/* Mystigo components — every value comes from tokens.css. Class prefix: my- */
.my-stage{background:var(--parchment);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:22px;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.my-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.my-cap{font-family:var(--font-sans);font-size:11px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;color:var(--ink-faint)}
.my-ico{width:var(--size-icon);height:var(--size-icon);flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.my-ico-lg{width:var(--size-icon-lg);height:var(--size-icon-lg)}
:where(.my-btn,.my-iconbtn,.my-chip,.my-seg button,.my-li,.my-input):focus-visible{outline:var(--border-focus) solid var(--focus);outline-offset:2px}

/* Button */
.my-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--size-touch);padding:0 var(--space-5);border-radius:var(--radius-sm);border:var(--border-control) solid transparent;font-family:var(--font-sans);font-size:15px;line-height:20px;font-weight:700;cursor:pointer;background:none}
.my-btn--primary{background:var(--bordeaux);color:var(--on-bordeaux)}
.my-btn--primary:active{background:var(--bordeaux-deep)}
.my-btn--secondary{border-color:var(--bordeaux);color:var(--bordeaux);background:transparent}
.my-btn--ghost{color:var(--ink-soft);padding:0 var(--space-3)}
.my-btn--danger{background:var(--brick);color:var(--on-brick)}
.my-btn--block{width:100%}
.my-btn[disabled]{background:var(--parchment-deep);color:var(--ink-faint);border-color:transparent;cursor:not-allowed}
.my-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.85;flex:none}

/* IconButton */
.my-iconbtn{width:var(--size-touch);height:var(--size-touch);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--paper);color:var(--ink-soft);border:var(--border-hairline) solid var(--rule);box-shadow:var(--shadow-raised);cursor:pointer}
.my-iconbtn--round{border-radius:var(--radius-pill)}
.my-iconbtn--bare{background:transparent;border-color:transparent;box-shadow:none;color:inherit}

/* Dialog */
.my-scrim{background:var(--scrim);padding:var(--space-6) var(--space-4);display:flex;align-items:center;justify-content:center}
.my-dialog{background:var(--paper);border:var(--border-hairline) solid var(--rule);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);box-shadow:var(--shadow-overlay);max-width:340px;width:100%;box-sizing:border-box}
.my-dialog__icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bordeaux-tint);color:var(--bordeaux)}
.my-dialog--danger .my-dialog__icon{background:var(--brick-tint);color:var(--brick)}
.my-dialog__title{font-family:var(--font-display);font-size:21px;line-height:26px;margin:0}
.my-dialog__body{color:var(--ink-soft);margin:0}
.my-dialog__actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-1)}

/* Toast */
.my-toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--night-ink);color:var(--paper);box-shadow:var(--shadow-toast);font-size:14px;line-height:20px}
.my-toast__icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:var(--paper)}
.my-toast__icon .my-ico{width:16px;height:16px;stroke-width:2.2}
.my-toast--success .my-toast__icon{background:var(--moss)}
.my-toast--info .my-toast__icon{background:var(--night)}
.my-toast--warning .my-toast__icon{background:var(--amber)}
.my-toast--error .my-toast__icon{background:var(--brick)}
.my-toast__text{flex:1}
.my-toast__action{background:none;border:0;color:var(--gold-light);font:700 13px/18px var(--font-sans);cursor:pointer;padding:var(--space-2)}

/* Cartouche — the engraved double frame, for game moments */
.my-cartouche{background:var(--paper);border:var(--border-hairline) solid var(--rule-strong);box-shadow:var(--shadow-frame);margin:5px;padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);border-radius:2px}
.my-cartouche__eyebrow{font:700 11px/14px var(--font-sans);letter-spacing:.14em;color:var(--bordeaux)}
.my-cartouche__title{font-family:var(--font-display);font-size:21px;line-height:26px}
.my-cartouche__flavor{font-family:var(--font-flavor);font-style:italic;font-size:15px;line-height:22px;color:var(--ink-soft)}
.my-seal{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(51,36,26,.25)}
.my-seal--bordeaux{background:var(--bordeaux);color:var(--on-bordeaux);box-shadow:inset 0 0 0 3px var(--bordeaux),inset 0 0 0 4px rgba(248,242,225,.55)}

/* MapBanner */
.my-banner{background:var(--paper);border:var(--border-hairline) solid var(--rule);border-radius:var(--radius-lg);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);box-shadow:var(--shadow-overlay)}
.my-banner__eyebrow{font:700 11px/14px var(--font-sans);letter-spacing:.14em;color:var(--bordeaux)}
.my-banner__title{font-family:var(--font-display);font-size:21px;line-height:26px}
.my-banner__body{color:var(--ink-soft);font-size:14px;line-height:20px}
.my-banner__actions{display:flex;justify-content:flex-end;gap:var(--space-2)}
.my-banner--live .my-banner__eyebrow{color:var(--night)}
.my-notice{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--paper);border:var(--border-hairline) solid var(--rule);font-size:13px;line-height:18px;color:var(--ink-soft);box-shadow:var(--shadow-raised)}

/* CoachMark */
.my-coach{background:var(--paper);border:var(--border-hairline) solid var(--rule-strong);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);box-shadow:var(--shadow-overlay);max-width:320px}
.my-coach__step{font:700 11px/14px var(--font-sans);letter-spacing:.14em;color:var(--ink-faint)}
.my-coach__title{font-family:var(--font-display);font-size:18px;line-height:22px;color:var(--bordeaux)}
.my-coach__body{font-size:14px;line-height:20px;color:var(--ink-soft)}
.my-coach__actions{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-1)}
.my-coach__actions .my-spacer{flex:1}

/* EmptyState */
.my-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-6) var(--space-5);border:var(--border-hairline) solid var(--rule-strong);box-shadow:var(--shadow-frame);margin:5px;background:var(--paper);border-radius:2px}
.my-empty__art{color:var(--ink-faint);width:44px;height:44px}
.my-empty__title{font-family:var(--font-display);font-size:21px;line-height:26px}
.my-empty__body{font-family:var(--font-flavor);font-style:italic;font-size:15px;line-height:22px;color:var(--ink-soft);max-width:280px}
.my-empty--error .my-empty__art{color:var(--brick)}

/* Loading */
.my-loader{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);color:var(--ink-faint);font-size:13px}
.my-compass{width:40px;height:40px;color:var(--bordeaux)}
.my-skel{background:var(--parchment-deep);border-radius:var(--radius-xs)}
.my-skel-card{background:var(--paper);border:var(--border-hairline) solid var(--rule);border-radius:var(--radius-md);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}

/* TopBar */
.my-topbar{display:flex;align-items:center;gap:var(--space-2);min-height:var(--size-topbar);padding:0 var(--space-2) 0 var(--space-4);background:var(--night-ink);color:var(--paper)}
.my-topbar__title{flex:1;font-family:var(--font-display);font-size:26px;line-height:30px}
.my-topbar--back{padding-left:var(--space-1)}
.my-topbar--back .my-topbar__title{font-size:21px;line-height:26px}
.my-topbar .my-iconbtn{color:var(--paper)}

/* BottomNav */
.my-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--paper);border-top:3px double var(--rule-strong);padding:var(--space-2) 0 var(--space-3)}
.my-nav__item{display:flex;flex-direction:column;align-items:center;gap:2px;font:700 12px/16px var(--font-sans);color:var(--ink-faint);background:none;border:0;min-height:var(--size-touch);cursor:pointer}
.my-nav__item[aria-current="page"]{color:var(--bordeaux)}

/* SegmentedControl */
.my-seg{display:inline-flex;background:var(--paper);border:var(--border-hairline) solid var(--rule-strong);border-radius:var(--radius-sm);padding:3px;gap:3px}
.my-seg button{border:0;background:none;padding:0 var(--space-4);min-height:36px;border-radius:6px;font:700 13px/18px var(--font-sans);color:var(--ink-soft);cursor:pointer}
.my-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* BottomSheet */
.my-sheet{background:var(--paper);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-overlay);padding:var(--space-2) var(--space-5) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.my-sheet__handle{width:40px;height:4px;border-radius:2px;background:var(--rule-strong);align-self:center;margin-bottom:var(--space-1)}
.my-sheet__head{display:flex;align-items:flex-start;gap:var(--space-2)}
.my-sheet__titles{flex:1;display:flex;flex-direction:column;gap:2px}

/* ListGroup */
.my-list{background:var(--paper);border:var(--border-hairline) solid var(--rule);border-radius:var(--radius-md);display:flex;flex-direction:column;overflow:hidden}
.my-li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);min-height:var(--size-touch);border:0;border-bottom:var(--border-hairline) solid var(--rule);background:none;text-align:left;font:inherit;color:var(--ink);width:100%;cursor:pointer}
.my-li:last-child{border-bottom:0}
.my-li__text{flex:1;display:flex;flex-direction:column}
.my-li__title{font-weight:700;font-size:15px;line-height:20px}
.my-li__sub{font-size:13px;line-height:18px;color:var(--ink-faint)}
.my-li__meta{font:700 13px/18px var(--font-sans);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.my-li--danger{color:var(--brick)}
.my-switch{width:44px;height:26px;border-radius:13px;background:var(--parchment-deep);border:var(--border-control) solid var(--rule-strong);position:relative;flex:none;box-sizing:border-box}
.my-switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--ink-faint)}
.my-switch[aria-checked="true"]{background:var(--bordeaux);border-color:var(--bordeaux)}
.my-switch[aria-checked="true"]::after{left:21px;background:var(--paper)}

/* SectionHeader */
.my-section{display:flex;align-items:center;gap:var(--space-3);font:700 11px/14px var(--font-sans);letter-spacing:.14em;color:var(--bordeaux)}
.my-section::after{content:"";flex:1;height:1px;background:var(--rule-strong);opacity:.5}

/* TextField */
.my-field{display:flex;flex-direction:column;gap:6px}
.my-field__label{font:700 13px/18px var(--font-sans);color:var(--ink-soft)}
.my-input{min-height:var(--size-touch);box-sizing:border-box;border:var(--border-control) solid var(--rule-strong);background:var(--paper);border-radius:var(--radius-sm);padding:0 14px;font:400 15px/22px var(--font-sans);color:var(--ink);width:100%}
.my-input::placeholder{color:var(--ink-faint)}
.my-field__help{font-size:13px;line-height:18px;color:var(--ink-faint)}
.my-field--error .my-input{border-color:var(--brick)}
.my-field--error .my-field__help{color:var(--brick)}
.my-rules{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:18px;color:var(--ink-faint);list-style:none;margin:0;padding:0}
.my-rules li{display:flex;align-items:center;gap:6px}
.my-rules li[data-ok="true"]{color:var(--moss)}

/* Chip and badge */
.my-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 var(--space-3);border-radius:var(--radius-pill);border:var(--border-hairline) solid var(--rule-strong);background:var(--paper);font:700 13px/18px var(--font-sans);color:var(--ink-soft);cursor:pointer}
.my-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.my-badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--radius-xs);font:700 12px/16px var(--font-sans)}
.my-badge .my-ico{width:14px;height:14px;stroke-width:2.2}
.my-badge--success{background:var(--moss-tint);color:var(--moss)}
.my-badge--warning{background:var(--amber-tint);color:var(--amber)}
.my-badge--error{background:var(--brick-tint);color:var(--brick)}
.my-badge--info{background:var(--night-tint);color:var(--night)}
.my-badge--neutral{background:var(--parchment-deep);color:var(--ink-soft)}

/* ProgressBar */
.my-progress{height:6px;border-radius:var(--radius-xs);background:var(--parchment-deep);overflow:hidden}
.my-progress__fill{height:100%;background:var(--bordeaux);border-radius:var(--radius-xs)}
.my-progress--done .my-progress__fill{background:var(--moss)}
.my-steps{display:flex;gap:4px}
.my-steps span{flex:1;height:4px;border-radius:2px;background:var(--parchment-deep)}
.my-steps span[data-done="true"]{background:var(--bordeaux)}

/* StatTile */
.my-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.my-stat{background:var(--paper);border:var(--border-hairline) solid var(--rule);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;color:var(--ink)}
.my-stat__value{font-family:var(--font-display);font-size:26px;line-height:28px;font-variant-numeric:tabular-nums}
.my-stat__label{font-size:13px;line-height:18px;color:var(--ink-soft)}
.my-stat--pending .my-stat__value{color:var(--ink-faint)}