/* Generated by PolarTGames/scripts/sync-ds.mjs from docs/redesign/prototype/app/ds.css (the design system's
   component styles). Do not hand-edit: update that file, then run `npm run ds`. */
/* FrostMath v2 — component styles. Every value comes from tokens.css (var(--…)). */

/* ---------- base ---------- */
.fm-stage { padding: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.fm-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.fm-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.fm-cap { font: 500 12px/1.45 var(--font-body); color: var(--ink-subtle); }
.fm-num { font-variant-numeric: tabular-nums; }
[data-icon], [data-tier], [data-mastery], [data-avatar] { display: inline-flex; flex: none; line-height: 0; }
.fm-icon { display: block; }
.fm-emblem { display: inline-flex; line-height: 0; }
[data-ui="v2"] :where(button, a, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.fm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fm-eyebrow { font: 700 12px/1.4 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--accent-text); margin: 0; }
.fm-h1 { font: 600 24px/1.15 var(--font-display); letter-spacing: 0.5px; color: var(--ink-strong); margin: 0; }
@media (min-width: 768px) { .fm-h1 { font-size: 32px; } }

/* ---------- Button ---------- */
.fm-btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--h); min-width: var(--touch-target); padding: 0 var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 600 15px/1.2 var(--font-display); letter-spacing: 1.5px; text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.fm-btn--sm { --h: 44px; padding: 0 var(--space-4); font-size: 12px; letter-spacing: 1px; }
.fm-btn--lg { --h: 60px; padding: 0 var(--space-8); font-size: 18px; letter-spacing: 2px; }
.fm-btn--full { width: 100%; }
/* a full-width label that can't fit wraps inside the button instead of pushing it past its container (Q2) */
.fm-btn--full { white-space: normal; height: auto; min-height: var(--h); padding: var(--space-2) var(--space-4); line-height: 1.2; text-align: center; }
.fm-btn--primary { background: linear-gradient(180deg, var(--primary-from), var(--primary-to)); color: var(--on-primary); box-shadow: var(--shadow-button); }
.fm-btn--secondary { background: transparent; color: var(--accent-text); border-color: var(--border-control); }
.fm-btn--secondary:hover { border-color: var(--accent); background: var(--accent-soft); }
.fm-btn--ghost { background: var(--surface-2); color: var(--ink); }
.fm-btn--ghost:hover { background: var(--surface-3); }
.fm-btn--text { background: none; color: var(--accent-text); height: auto; min-height: var(--touch-target); padding: 0 var(--space-2); font: 600 14px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; position: relative; }
/* a text button's hit area is at least the touch target, without changing its box (Q2) */
.fm-btn--text::after { content: ""; position: absolute; inset: min(0px, calc((100% - var(--touch-target)) / 2)); }
.fm-btn--danger { background: var(--wrong); color: var(--on-wrong); }
.fm-btn--correct { background: var(--correct); color: var(--on-correct); }
@media (hover: hover) { :where(:root:not([data-reduced-motion])) .fm-btn--primary:hover { transform: translateY(-1px); } }
.fm-btn:disabled, .fm-btn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; transform: none; }
.fm-btn[data-armed="false"] { opacity: var(--opacity-unarmed); pointer-events: none; }
.fm-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.fm-spinner { width: 18px; height: 18px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fm-spin 700ms linear infinite; }
@keyframes fm-spin { to { transform: rotate(360deg); } }

/* ---------- Input ---------- */
.fm-field { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 420px; text-align: left; }
.fm-label { font: 600 13px/1.3 var(--font-body); color: var(--ink-subtle); }
.fm-input { display: flex; align-items: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-4); background: var(--surface-inset);
  border: 1px solid var(--border-control); border-radius: var(--radius-sm); color: var(--ink); font: 400 16px/1 var(--font-body); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.fm-input input { all: unset; flex: 1; align-self: stretch; min-width: 0; color: var(--ink); }
.fm-input input::placeholder { color: var(--ink-subtle); }
.fm-input:hover { border-color: var(--accent); }
.fm-input:focus-within, .fm-input.is-focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fm-input.is-error { border-color: var(--wrong); }
.fm-input.is-correct { border-color: var(--correct); }
.fm-input.is-error [data-icon] { color: var(--wrong); }
.fm-input.is-correct [data-icon] { color: var(--correct); }
.fm-help { min-height: 20px; font: 500 12px/20px var(--font-body); color: var(--ink-subtle); }
.fm-help.is-error { color: var(--wrong); }
.fm-input--answer { height: 64px; justify-content: center; font: 700 28px/1 var(--font-mono); letter-spacing: 1px; }
.fm-input--answer input { text-align: center; }

/* ---------- Card ---------- */
.fm-card { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4); color: var(--ink-muted); }
@media (min-width: 768px) { .fm-card { padding: var(--space-6); } }
.fm-card--edge::before { content: ""; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, rgba(0,0,0,0), var(--accent), rgba(0,0,0,0)); }
.fm-card--feature { background: linear-gradient(160deg, var(--accent-soft), var(--surface-1) 70%); border-color: var(--border-strong); }
.fm-card--glass { background: var(--surface-2); backdrop-filter: blur(12px); }
.fm-card--interactive { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast); }
.fm-card--interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); }
:where(:root:not([data-reduced-motion])) .fm-card--interactive:hover { transform: translateY(-2px); }
.fm-card__title { font: 600 16px/1.3 var(--font-display); letter-spacing: 0.5px; color: var(--ink-strong); margin: 0 0 var(--space-3); }

/* ---------- Badge ---------- */
.fm-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-xs); border: 1px solid currentColor;
  font: 700 12px/1 var(--font-body); letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; background: var(--surface-2); }
.fm-badge--accent { color: var(--accent-text); }
.fm-badge--neutral { color: var(--ink-muted); border-color: var(--border-control); }
.fm-badge--correct { color: var(--correct); }
.fm-badge--warn { color: var(--warn); }
.fm-badge--wrong { color: var(--wrong); }
.fm-badge--xp { color: var(--xp); }
.fm-badge--solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- Chip ---------- */
.fm-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fm-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--touch-target); min-width: 44px; padding: 0 var(--space-4); border-radius: var(--radius-full); cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--border-control); color: var(--ink-muted); font: 600 14px/1 var(--font-body); white-space: nowrap; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.fm-chip:hover { border-color: var(--accent); color: var(--ink); }
.fm-chip[aria-pressed="true"], .fm-chip[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fm-chip--op { width: 48px; padding: 0; justify-content: center; }

/* ---------- Tabs ---------- */
.fm-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); }
.fm-tab { position: relative; height: 44px; padding: 0 var(--space-4); background: none; border: 0; cursor: pointer; font: 600 14px/1 var(--font-body); color: var(--ink-subtle); }
.fm-tab:hover { color: var(--ink); }
.fm-tab[aria-selected="true"] { color: var(--ink-strong); }
.fm-tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: -1px; height: 2px; background: var(--accent); }
.fm-tabpanel { padding-top: var(--space-4); }

/* ---------- Dialog / sheet ---------- */
.fm-scrim { position: relative; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: var(--space-6); border-radius: var(--radius-lg); }
.fm-dialog { width: 100%; max-width: 440px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-6); }
.fm-dialog--sheet { border-radius: var(--radius-xl) var(--radius-xl) 0 0; align-self: flex-end; }
.fm-dialog h2 { font: 600 20px/1.2 var(--font-display); letter-spacing: 0.5px; color: var(--ink-strong); margin: 0 0 var(--space-2); }
.fm-dialog p { font: 400 15px/1.55 var(--font-body); color: var(--ink-muted); margin: 0 0 var(--space-6); }
.fm-dialog__actions { display: flex; gap: var(--space-3); }
.fm-dialog__actions > * { flex: 1; }

/* ---------- Menu ---------- */
.fm-menu { width: 220px; max-width: 100%; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); padding: var(--space-2); }
.fm-menu__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-1); }
.fm-menu__name { font: 600 15px/1.2 var(--font-body); color: var(--ink-strong); }
.fm-menu__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer;
  font: 600 14px/1 var(--font-body); color: var(--ink-muted); text-align: left; }
.fm-menu__item:hover, .fm-menu__item.is-hover { background: var(--surface-3); color: var(--ink-strong); }
.fm-menu__item--danger:hover { color: var(--wrong); }
.fm-menu__sep { height: 1px; background: var(--border-subtle); margin: var(--space-1) 0; }

/* ---------- Toast ---------- */
.fm-toast { position: relative; overflow: hidden; display: flex; gap: var(--space-3); align-items: flex-start; width: 100%; max-width: 360px; padding: var(--space-3) var(--space-3) var(--space-4) var(--space-4);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-raised); color: var(--ink); }
.fm-toast__icon { margin-top: 1px; }
.fm-toast__body { flex: 1; font: 400 14px/1.45 var(--font-body); }
.fm-toast__body strong { display: block; font-weight: 600; color: var(--ink-strong); }
.fm-toast__close { background: none; border: 0; color: var(--ink-subtle); cursor: pointer; width: var(--touch-target); height: var(--touch-target); display: grid; place-items: center; margin: -10px -10px 0 0; }
.fm-toast__drain { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; background: currentColor; opacity: 0.7; }
.fm-toast--success { color: var(--correct); } .fm-toast--info { color: var(--accent-text); } .fm-toast--warn { color: var(--warn); } .fm-toast--error { color: var(--wrong); }
.fm-toast--success .fm-toast__body, .fm-toast--info .fm-toast__body, .fm-toast--warn .fm-toast__body, .fm-toast--error .fm-toast__body { color: var(--ink); }

/* ---------- Notice (LoadError, inline errors, banners) ---------- */
.fm-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-sm); border: 1px solid; font: 400 14px/1.5 var(--font-body); color: var(--ink); }
.fm-notice__title { font-weight: 600; color: var(--ink-strong); display: block; }
.fm-notice--error { background: var(--wrong-soft); border-color: var(--wrong); } .fm-notice--error > [data-icon] { color: var(--wrong); }
.fm-notice--warn { background: var(--warn-soft); border-color: var(--warn); } .fm-notice--warn > [data-icon] { color: var(--warn); }
.fm-notice--info { background: var(--accent-soft); border-color: var(--border-strong); } .fm-notice--info > [data-icon] { color: var(--accent-text); }
.fm-notice--block { flex-direction: column; align-items: center; text-align: center; padding: var(--space-8) var(--space-6); background: var(--surface-1); border-color: var(--border); }
.fm-notice--block > [data-icon] { color: var(--wrong); }
/* one card level: a notice inside a card is a panel, not a second bordered box (Q2) */
.fm-card .fm-notice, .fm-result .fm-notice { border-color: transparent; }
.fm-banner { display: flex; align-items: center; justify-content: center; gap: var(--space-3); height: 44px; padding: 0 var(--space-4); font: 600 14px/1.2 var(--font-body); }
.fm-banner--warn { background: var(--warn); color: var(--on-warn); }
.fm-banner--info { background: var(--surface-3); color: var(--ink); }
.fm-banner .fm-num { font-family: var(--font-mono); font-size: 14px; min-width: 2.2ch; text-align: right; }

/* ---------- Loading ---------- */
.fm-skel { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; border-radius: var(--radius-xs); animation: fm-shimmer 1.4s var(--ease-in-out) infinite; }
@keyframes fm-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Avatar ---------- */
.fm-avatar { position: relative; display: inline-grid; place-items: center; flex: none; }
.fm-avatar--initials { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--ice-900); color: #ffffff; font: 700 15px/1 var(--font-body); letter-spacing: 0.5px; border: 1px solid var(--border-strong); }

/* ---------- Share ---------- */
.fm-share { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 420px; }
.fm-share__link { display: flex; align-items: center; gap: var(--space-2); height: 52px; padding: 0 var(--space-1) 0 var(--space-4); background: var(--surface-inset); border: 1px solid var(--border-control); border-radius: var(--radius-sm); font: 500 14px/1 var(--font-body); color: var(--ink); text-align: left; }
.fm-share__link span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-share__copy { display: grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border: 0; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink); cursor: pointer; }
.fm-share__fallback { width: 100%; min-height: 72px; resize: none; padding: var(--space-3); background: var(--surface-inset); border: 1px solid var(--border-control); border-radius: var(--radius-sm); color: var(--ink); font: 500 13px/1.5 var(--font-body); }
.fm-share__status { min-height: 20px; font: 600 13px/20px var(--font-body); color: var(--correct); display: flex; align-items: center; gap: 6px; }

/* ---------- App shell ---------- */
.fm-topbar { display: flex; align-items: center; gap: var(--space-4); height: var(--top-bar-height); padding: 0 var(--space-6); background: var(--bar); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); }
.fm-topbar__brand { display: flex; align-items: center; gap: 10px; min-height: var(--touch-target); font: 600 18px/1 var(--font-display); letter-spacing: 3px; color: var(--ink-strong); text-transform: uppercase; text-decoration: none; }
.fm-topbar__word { display: none; }
@media (min-width: 1024px) { .fm-topbar__word { display: inline; } }
.fm-topbar__nav { display: flex; gap: var(--space-1); flex: 1; }
.fm-navlink { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--touch-target); padding: 0 var(--space-3); border-radius: var(--radius-sm); font: 600 14px/1 var(--font-body); color: var(--ink-subtle); text-decoration: none; }
.fm-navlink:hover { color: var(--ink-strong); }
.fm-navlink[aria-current="page"] { color: var(--ink-strong); background: var(--accent-soft); }
.fm-navlink[aria-current="page"] [data-icon] { color: var(--accent); }
.fm-navlink--play { color: var(--accent-text); }
.fm-topbar__right { display: flex; align-items: center; gap: var(--space-2); }
.fm-topbar__slot { width: 88px; display: flex; justify-content: flex-end; }
.fm-iconbtn { display: grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border-radius: var(--radius-sm); border: 0; background: none; color: var(--ink-subtle); cursor: pointer; }
.fm-iconbtn:hover { color: var(--ink-strong); background: var(--surface-3); }
.fm-bottombar { display: grid; grid-template-columns: repeat(4, 1fr); height: var(--bottom-bar-height); background: var(--bar); backdrop-filter: blur(20px); border-top: 1px solid var(--border-subtle); }
.fm-tabitem { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 44px; color: var(--ink-subtle); text-decoration: none; font: 600 12px/1.3 var(--font-body); }
.fm-tabitem[aria-current="page"] { color: var(--accent-text); }
.fm-tabitem[aria-current="page"] [data-icon] { color: var(--accent); }
.fm-tabitem--play [data-icon] { color: var(--accent); }

.fm-statusbar { width: 100%; display: flex; align-items: center; gap: var(--space-3); height: var(--bottom-bar-height); padding: 0 var(--space-4); background: var(--bar); border-top: 1px solid var(--border-subtle); font: 600 13px/1 var(--font-body); white-space: nowrap; color: var(--ink-subtle); }
.fm-statusbar__mode { color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.fm-statusbar__live { width: 8px; height: 8px; background: var(--correct); transform: rotate(45deg); }
.fm-statusbar__spacer { flex: 1; }
.fm-pill-danger { display: inline-flex; align-items: center; gap: 6px; height: var(--touch-target); padding: 0 var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--wrong); color: var(--wrong); background: var(--wrong-soft); font: 700 12px/1 var(--font-body); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }

/* ---------- Mode tile ---------- */
.fm-tile { position: relative; display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 260px; min-height: 196px; padding: var(--space-4); text-align: left; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); color: var(--ink-muted); font: 400 14px/1.5 var(--font-body);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast); }
.fm-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); }
:where(:root:not([data-reduced-motion])) .fm-tile:hover { transform: translateY(-2px); }
.fm-tile__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); border: 1px solid var(--border-strong); }
.fm-tile__name { font: 600 18px/1.2 var(--font-display); letter-spacing: 0.5px; color: var(--ink-strong); margin-top: var(--space-1); }
.fm-tile__desc { color: var(--ink-muted); flex: 1; }
.fm-tile__status { min-height: 22px; font: 600 12px/1.4 var(--font-body); color: var(--ink-subtle); display: flex; align-items: center; gap: 6px; }
.fm-tile__status--ok { color: var(--correct); }
.fm-tile--locked { cursor: default; background: var(--surface-2); border-style: dashed; border-color: var(--border-control); box-shadow: none; }
.fm-tile--locked:hover { transform: none; box-shadow: none; border-color: var(--border-control); }
.fm-tile--locked .fm-tile__icon { color: var(--ink-subtle); background: var(--surface-3); border-color: var(--border); }
.fm-tile--locked .fm-tile__name { color: var(--ink-muted); }
.fm-tile--wide { width: 100%; max-width: 1008px; min-height: 0; flex-direction: row; align-items: center; gap: var(--space-4); background: linear-gradient(110deg, var(--accent-soft), var(--surface-1) 60%); border-color: var(--border-strong); }
.fm-tile--wide .fm-tile__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fm-tile--wide .fm-tile__name { margin: 0; }
.fm-tile__aside { text-align: right; font: 600 13px/1.4 var(--font-body); color: var(--ink-muted); }
.fm-tile__aside [data-clock] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Matchmaking ---------- */
.fm-mm { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: var(--space-4); }
.fm-mm__vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center; }
.fm-mm__card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); min-height: 164px; justify-content: center; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border-strong); }
.fm-mm__card--empty { background: var(--surface-2); border: 1px dashed var(--border-control); }
.fm-mm__name { font: 600 15px/1.2 var(--font-body); color: var(--ink-strong); }
.fm-mm__vsmark { font: 700 16px/1 var(--font-body); letter-spacing: 1px; color: var(--ink-subtle); }
.fm-mm__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.fm-fact { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); text-align: center; }
.fm-fact b { display: block; font: 600 15px/1.25 var(--font-body); color: var(--ink-strong); }
.fm-fact span { font: 500 12px/1.5 var(--font-body); color: var(--ink-subtle); }
.fm-mm__rule { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); font: 400 13px/1.45 var(--font-body); }
.fm-mm__rule [data-icon] { color: var(--accent-text); }
.fm-dots { display: inline-flex; gap: 6px; }
.fm-dots i { width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); opacity: 0.35; animation: fm-dot 1.2s var(--ease-in-out) infinite; }
.fm-dots i:nth-child(2) { animation-delay: 0.2s; } .fm-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes fm-dot { 50% { opacity: 1; } }
.fm-offer { padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--surface-1); display: flex; flex-direction: column; gap: var(--space-3); }
.fm-offer__head { display: flex; gap: var(--space-3); align-items: center; }
.fm-offer__head b { font: 600 15px/1.2 var(--font-display); letter-spacing: 0.5px; color: var(--ink-strong); }

/* ---------- PlayerCard ---------- */
.fm-player { display: flex; align-items: center; gap: var(--space-3); width: 100%; max-width: 300px; min-width: 0; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border); }
.fm-player--you { border-color: var(--you); box-shadow: var(--shadow-glow); }
.fm-player--right { flex-direction: row-reverse; text-align: right; }
.fm-player__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fm-player__name { font: 600 15px/1.2 var(--font-body); color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-player__chips { display: flex; gap: 4px; min-height: 22px; }
.fm-player--right .fm-player__chips { justify-content: flex-end; }
.fm-player__score { width: 2.4ch; text-align: center; font: 600 28px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--you); }
.fm-player--rival .fm-player__score { color: var(--rival); }
.fm-player--matchpoint .fm-player__score { color: var(--warn); text-shadow: 0 0 12px var(--warn-soft); }
.fm-player--matchpoint { box-shadow: var(--shadow-glow-warn); }
.fm-player--searching { opacity: 0.6; border-style: dashed; }
.fm-delta { font: 700 13px/1 var(--font-mono); color: var(--correct); }
.fm-delta--rival { color: var(--ink-subtle); }

/* ---------- QuestionCard ---------- */
.fm-q { position: relative; width: 100%; max-width: 512px; padding: var(--space-6); border-radius: var(--radius-xl); background: linear-gradient(170deg, var(--accent-soft), var(--surface-1) 75%); border: 1px solid var(--border-strong); text-align: center; overflow: hidden; }
@media (min-width: 768px) { .fm-q { padding: var(--space-8) 36px; } }
.fm-q::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, rgba(0,0,0,0), var(--accent), rgba(0,0,0,0)); }
.fm-q__label { display: flex; justify-content: space-between; align-items: center; font: 700 12px/1 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: var(--space-4); }
.fm-q__text { font: 500 36px/1 var(--font-display); letter-spacing: 3px; color: var(--ink-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .fm-q__text { font-size: 48px; } }
@media (min-width: 1280px) { .fm-q__text { font-size: 60px; } }
.fm-q--correct { border-color: var(--correct); box-shadow: var(--shadow-glow-correct); }
.fm-q--wrong { border-color: var(--wrong); box-shadow: var(--shadow-glow-wrong); }
.fm-q--waiting .fm-q__text { opacity: var(--opacity-waiting); }
.fm-q--waiting::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%); pointer-events: none; }
.fm-q--both-mp { box-shadow: var(--shadow-glow-warn); border-color: var(--warn); }

/* ---------- Round status ---------- */
.fm-status { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--status-line); max-width: 420px; text-align: center; font: 600 15px/1.4 var(--font-body); }
.fm-status--correct { color: var(--correct); } .fm-status--reveal { color: var(--accent-text); } .fm-status--wait { color: var(--warn); } .fm-status--wrong { color: var(--wrong); }

/* ---------- NumPad ---------- */
.fm-pad { width: 100%; max-width: 480px; height: min(48dvh, 300px); min-height: 266px; display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; user-select: none; }
.fm-pad__display { height: 56px; flex: none; display: grid; place-items: center; border-bottom: 1px solid var(--border-subtle); font: 700 28px/1 var(--font-mono); letter-spacing: 1px; color: var(--ink-strong); }
.fm-pad__display.is-empty { color: var(--ink-faint); }
.fm-pad__keys { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 6px; padding: var(--space-2); }
.fm-key { display: grid; place-items: center; min-height: 44px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-3); color: var(--ink-strong); font: 600 22px/1 var(--font-mono); cursor: pointer; transition: transform var(--dur-press) var(--ease-out), background var(--dur-press); }
.fm-key:active, .fm-key.is-pressed { transform: scale(0.95); background: var(--accent-soft); border-color: var(--accent); }
.fm-key--clear { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.fm-key--submit { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-glow); }
.fm-key--submit:disabled { opacity: var(--opacity-disabled); box-shadow: none; }
.fm-pad.is-locked .fm-key { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* ---------- GameTimer ---------- */
.fm-timer { position: relative; width: 72px; height: 72px; display: grid; place-items: center; color: var(--timer-full); }
.fm-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.fm-timer__track { fill: none; stroke: var(--surface-3); stroke-width: 6; }
.fm-timer__arc { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: butt; transition: stroke-dashoffset 1s linear; }
.fm-timer__num { position: relative; font: 600 24px/1 var(--font-display); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.fm-timer--low { color: var(--timer-low); } .fm-timer--critical { color: var(--timer-critical); }
.fm-timer--idle .fm-timer__num { color: var(--ink-subtle); }
.fm-clock { font: 600 13px/1.2 var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.fm-clock--critical { color: var(--wrong); }
.fm-clock__label { font-family: var(--font-body); }

/* ---------- RaceTrack ---------- */
.fm-race { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 6px; }
.fm-race__lane { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: var(--space-2); }
.fm-race__who { font: 600 12px/1 var(--font-body); color: var(--ink-subtle); }
.fm-race__lane--you .fm-race__who { color: var(--accent-text); }
.fm-race__bar { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--surface-3); }
.fm-race__lane--rival .fm-race__bar { height: 4px; }
.fm-race__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--you); transform-origin: left; }
.fm-race__lane--rival .fm-race__fill { background: var(--rival); }
.fm-race__bead { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--rival); transform: rotate(45deg); }
.fm-race__bead.is-miss { opacity: 0.4; }
.fm-race__ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; padding: 0 calc(100% / 12); pointer-events: none; }
.fm-race__ticks i { width: 1px; background: var(--surface-0); opacity: 0.6; }
.fm-race__finish { position: absolute; right: -2px; top: -6px; bottom: -6px; width: 3px; background: var(--ink-faint); }
.fm-race--mp .fm-race__finish { background: var(--warn); box-shadow: var(--shadow-glow-warn); }

/* ---------- Countdown ---------- */
.fm-countdown { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
.fm-countdown__num { font: 700 120px/1 var(--font-display); color: var(--ink-strong); }
.fm-countdown__ring { position: absolute; inset: 0; fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.6; }

/* ---------- Result ---------- */
.fm-result { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border); }
.fm-result__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-md); }
.fm-result__head { font: 700 28px/1.1 var(--font-display); letter-spacing: 0.5px; color: var(--ink-strong); }
@media (min-width: 768px) { .fm-result__head { font-size: 40px; } }
.fm-result__why { font: 500 14px/1.4 var(--font-body); color: var(--ink-subtle); }
.fm-result--win { border-color: var(--correct); } .fm-result--win .fm-result__icon { color: var(--correct); background: var(--correct-soft); } .fm-result--win .fm-result__head { color: var(--correct); }
.fm-result--loss .fm-result__icon { color: var(--wrong); background: var(--wrong-soft); }
.fm-result--neutral .fm-result__icon { color: var(--accent-text); background: var(--accent-soft); }
.fm-result__score { display: flex; gap: var(--space-4); align-items: baseline; font: 600 28px/1 var(--font-display); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.fm-result__score small { font: 600 14px/1 var(--font-body); color: var(--ink-subtle); }
.fm-rating { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.fm-rating__delta { font: 700 24px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.fm-rating__delta--up { color: var(--correct); } .fm-rating__delta--down { color: var(--wrong); }
.fm-rating__new [data-motion] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.fm-rating__new { font: 600 14px/1.3 var(--font-body); color: var(--ink-muted); text-align: left; }
.fm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); width: 100%; }
.fm-stat { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); text-align: center; }
.fm-stat b { display: block; font: 600 20px/1.2 var(--font-mono); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.fm-stat span { font: 500 12px/1.5 var(--font-body); color: var(--ink-subtle); white-space: nowrap; }

/* ---------- Rematch ---------- */
.fm-rematch { position: relative; width: 100%; max-width: 420px; }
.fm-rematch .fm-btn { width: 100%; white-space: nowrap; }
/* REMATCH keeps one line in all four states and truncates (CLAUDE.md §15), unlike other full-width buttons (Q2) */
.fm-rematch__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-rematch__fill { position: absolute; left: 1px; bottom: 1px; border-radius: 0 0 0 var(--radius-sm); height: 3px; background: var(--on-primary); opacity: 0.8; }
.fm-rematch--incoming .fm-btn { outline: 2px solid var(--correct); outline-offset: 2px; }

/* ---------- Grades ---------- */
.fm-grades { display: grid; grid-template-columns: repeat(12, 24px); gap: 4px; }
.fm-grade { width: 24px; height: 24px; border-radius: var(--radius-xs); display: grid; place-items: center; background: var(--surface-3); color: var(--ink-faint); }
.fm-grade--fast { background: var(--correct); color: var(--on-correct); }
.fm-grade--ok { background: var(--warn); color: var(--on-warn); }
.fm-grade--miss { background: var(--wrong); color: var(--on-wrong); }
.fm-grade--current { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.fm-gradekey { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font: 500 12px/1.4 var(--font-body); color: var(--ink-muted); }
.fm-gradekey span { display: inline-flex; align-items: center; gap: 6px; }
.fm-gradekey .fm-grade { width: 16px; height: 16px; }

/* ---------- Tier badge ---------- */
.fm-tier { display: inline-flex; align-items: center; gap: var(--space-2); }
.fm-tier__name { font: 700 12px/1 var(--font-body); letter-spacing: 1px; text-transform: uppercase; }
.fm-tier__elo { font: 500 12px/1 var(--font-mono); color: var(--ink-subtle); }
.fm-tier--lg { flex-direction: column; gap: var(--space-2); }
.fm-tier--lg .fm-tier__name { font: 600 18px/1 var(--font-display); letter-spacing: 2px; }

/* ---------- Mastery ---------- */
.fm-mastery { display: flex; align-items: center; gap: var(--space-3); }
.fm-mastery__label { font: 600 13px/1.3 var(--font-body); color: var(--ink); }
.fm-mastery__sub { font: 500 12px/1.4 var(--font-body); color: var(--ink-subtle); }
.fm-mastery--none .fm-emblem { color: var(--ink-faint) !important; }

/* ---------- XP ---------- */
.fm-xp { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; width: 100%; max-width: 460px; min-height: 28px; }
.fm-xp__gain { font: 700 14px/1 var(--font-mono); color: var(--xp); white-space: nowrap; }
.fm-xp__bar { position: relative; height: 8px; border-radius: var(--radius-xs); background: var(--surface-3); overflow: hidden; }
.fm-xp__fill { position: absolute; inset: 0 auto 0 0; background: var(--xp); }
.fm-xp__gainfill { position: absolute; top: 0; bottom: 0; background: var(--xp); opacity: 0.5; }
.fm-xp__lvl { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-xs); border: 1px solid var(--xp); color: var(--xp); font: 700 12px/1 var(--font-body); letter-spacing: 0.6px; }
.fm-xp__note { grid-column: 1 / -1; font: 500 12px/1.4 var(--font-body); color: var(--ink-subtle); }

/* ---------- Streak ---------- */
.fm-streakline { display: inline-flex; flex-wrap: wrap; white-space: nowrap; align-items: center; gap: var(--space-1) var(--space-2); min-height: 24px; font: 600 14px/1.3 var(--font-body); color: var(--ink); }
.fm-streakline [data-icon="streak-day"] { color: var(--warn); }
.fm-streakline__freeze { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); font-weight: 600; }
.fm-streakcard { width: 100%; max-width: 520px; }
.fm-streak__nums { display: flex; gap: var(--space-6); margin-bottom: var(--space-4); }
.fm-streak__nums b { font: 600 32px/1 var(--font-display); color: var(--ink-strong); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: var(--space-2); }
.fm-streak__nums b [data-icon] { color: var(--warn); }
.fm-streak__nums b + span { font: 500 12px/1.6 var(--font-body); color: var(--ink-subtle); }
.fm-miles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.fm-mile { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.fm-mile__hex { width: 52px; height: 58px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--surface-3); color: var(--ink-subtle); font: 700 16px/1 var(--font-display); }
.fm-mile--lit .fm-mile__hex { background: var(--warn); color: var(--on-warn); }
.fm-mile span { font: 500 12px/1.3 var(--font-body); color: var(--ink-subtle); min-height: 16px; white-space: nowrap; }
.fm-combo { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 var(--space-2); border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--border-strong); font: 700 13px/1 var(--font-mono); }
.fm-combo--hot { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-glow); }
.fm-winstreak { display: inline-flex; align-items: center; gap: 4px; font: 600 13px/1 var(--font-mono); color: var(--ink-muted); }
.fm-winstreak [data-icon] { color: var(--metal-gold); }

/* ---------- Skills ---------- */
.fm-skills { display: grid; grid-template-columns: 160px repeat(3, 1fr); gap: 6px; width: 100%; max-width: 720px; }
.fm-skills__head { font: 600 12px/1.35 var(--font-body); color: var(--ink-subtle); padding: 0 var(--space-2); align-self: end; }
.fm-skills__op { display: flex; align-items: center; gap: var(--space-2); font: 600 14px/1.2 var(--font-body); color: var(--ink); }
.fm-cell { min-height: 72px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.fm-cell b { font: 600 18px/1.1 var(--font-mono); color: var(--ink-strong); display: flex; align-items: center; gap: 6px; }
.fm-cell span { font: 500 12px/1.3 var(--font-body); color: var(--ink-subtle); }
.fm-cell--weak { box-shadow: inset 0 0 0 2px var(--warn); }
.fm-cell--empty b { color: var(--ink-subtle); }
.fm-trend--up { color: var(--correct); } .fm-trend--down { color: var(--wrong); } .fm-trend--flat { color: var(--ink-subtle); }

/* ---------- Stat tile ---------- */
.fm-stattile { width: 100%; min-width: 0; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.fm-stattile__label { display: flex; align-items: center; gap: 6px; font: 600 12px/1.4 var(--font-body); color: var(--ink-subtle); }
.fm-stattile__value { font: 600 24px/1.2 var(--font-mono); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.fm-stattile__sub { font: 500 12px/1.4 var(--font-body); color: var(--ink-subtle); display: flex; align-items: center; gap: 4px; }

/* ---------- Leaderboard row ---------- */
.fm-lb { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: 4px; }
.fm-lbrow { display: grid; grid-template-columns: 44px 1fr 150px 80px 64px 56px; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--border-subtle); font: 400 14px/1.3 var(--font-body); color: var(--ink-muted); }
.fm-lbrow--head { min-height: 32px; background: none; border: 0; font: 600 12px/1 var(--font-body); color: var(--ink-subtle); }
.fm-lbrow--you { border-color: var(--accent); background: var(--accent-soft); }
.fm-lbrow__rank { font: 700 16px/1 var(--font-display); color: var(--ink-subtle); text-align: center; font-variant-numeric: tabular-nums; }
.fm-lbrow__rank--1 { color: var(--rank-1); } .fm-lbrow__rank--2 { color: var(--rank-2); } .fm-lbrow__rank--3 { color: var(--rank-3); }
.fm-lbrow__name { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--ink-strong); }
.fm-lbrow__elo { font: 600 14px/1 var(--font-mono); color: var(--ink-strong); text-align: right; }
.fm-lbrow__num { font: 500 13px/1 var(--font-mono); text-align: right; }
.fm-lb__gap { text-align: center; font: 700 12px/1 var(--font-body); color: var(--ink-faint); letter-spacing: 4px; padding: 2px 0; }

/* ---------- Match row ---------- */
.fm-mrow { display: grid; grid-template-columns: 72px 1fr auto auto 24px; align-items: center; gap: var(--space-4); width: 100%; max-width: 860px; min-height: 64px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--border-subtle); color: var(--ink-muted); text-decoration: none; font: 400 13px/1.4 var(--font-body); }
.fm-mrow:hover { border-color: var(--border-strong); }
.fm-mrow__opp { font: 600 15px/1.3 var(--font-body); color: var(--ink-strong); }
.fm-mrow__score { font: 600 18px/1 var(--font-display); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.fm-mrow__elo { font: 600 13px/1 var(--font-mono); text-align: right; min-width: 64px; }
.fm-mrow > [data-icon] { color: var(--ink-subtle); }

/* ---------- Reduced motion ---------- */
:where(:root[data-reduced-motion]) .fm-skel, :where(:root[data-reduced-motion]) .fm-dots i { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }