@layer reset, base, theme, components, utilities;

@layer reset {
  :where(.app-shell, .app-shell *, .app-shell *::before, .app-shell *::after, .modal-card, .modal-card *, .modal-card *::before, .modal-card *::after, .toast) { box-sizing: border-box; }
  html { background: #141110; min-block-size: 100%; }
  :where(body) { margin: 0; }
  :where(h1, h2, h3, p, ol, ul, li, figure, blockquote, dl, dd) { margin: 0; }
  :where(ol, ul) { padding: 0; }
  :where(button, input) { font: inherit; color: inherit; }
  :where(button) { border: 0; background: none; cursor: pointer; }
  :where(input) { border: 0; background: none; }
  :where(dialog) { border: 0; padding: 0; }
}

@layer theme {
  :root {
    color-scheme: light;

    /* Surface */
    --paper: #f4efe4;
    --paper-raised: #fbf7ee;
    --paper-sunk: #ebe3d3;
    --paper-plate: #e3d9c6;

    /* Ink */
    --ink: #1b1712;
    --ink-soft: #3a3227;
    --muted: #6d6153;
    --faint: #7a6c58;

    /* Lines */
    --rule: rgb(27 23 18 / 12%);
    --rule-strong: rgb(27 23 18 / 24%);

    /* Accents */
    --brass: #a8823a;
    --brass-ink: #7d5a1e;
    --brass-soft: #d2b378;
    --crimson: #a3302a;
    --crimson-ink: #8c2621;
    --forest: #2c5c4e;
    --slate: #40587f;

    /* Stage (live draft) */
    --stage: #141110;
    --stage-raised: #201b17;
    --stage-line: rgb(242 235 221 / 14%);
    --bone: #f2ebdd;
    --bone-muted: #a3977f;

    /* Type */
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
    --font-ui: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    /* Shape */
    --r-xs: 0.4rem;
    --r-sm: 0.6rem;
    --r-md: 0.85rem;
    --r-lg: 1.15rem;
    --r-pill: 999px;

    --shadow-card: 0 1px 0 rgb(27 23 18 / 4%), 0 22px 40px -32px rgb(27 23 18 / 55%);
    --shadow-raised: 0 30px 60px -34px rgb(0 0 0 / 45%);

    --safe-top: max(1rem, env(safe-area-inset-top, 0px));
    --safe-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    --gutter: clamp(1.1rem, 4vw, 3.5rem);
  }
}

@layer base {
  body {
    min-block-size: 100%;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  :where(button, a, input):focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 3px; }

  :where(h1, h2, h3) { text-wrap: balance; font-weight: 400; }
  :where(p, li) { text-wrap: pretty; }

  ::selection { color: var(--paper-raised); background: var(--brass-ink); }
}

@layer components {
  /* ── Shell & atmosphere ───────────────────────────── */
  .ambient,
  .stars { position: fixed; z-index: 0; pointer-events: none; }

  .ambient {
    inline-size: min(78vw, 62rem);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.35;
    filter: blur(26px);
  }

  .ambient--one {
    inset-block-start: -46vw;
    inset-inline-start: -22vw;
    background: radial-gradient(circle, #ecdcbd 0 30%, transparent 66%);
  }

  .ambient--two {
    inset-block-end: -48vw;
    inset-inline-end: -28vw;
    background: radial-gradient(circle, #e2dccc 0 28%, transparent 64%);
  }

  .stars {
    inset: 0;
    background-image:
      radial-gradient(1px 1px at 18% 14%, rgb(27 23 18 / 26%) 99%, transparent),
      radial-gradient(1px 1px at 74% 22%, rgb(27 23 18 / 20%) 99%, transparent),
      radial-gradient(1px 1px at 88% 68%, rgb(27 23 18 / 22%) 99%, transparent),
      radial-gradient(1px 1px at 32% 78%, rgb(27 23 18 / 18%) 99%, transparent),
      radial-gradient(1px 1px at 56% 46%, rgb(27 23 18 / 16%) 99%, transparent);
    background-size: 220px 210px, 300px 290px, 260px 300px, 340px 330px, 400px 380px;
    opacity: 0.7;
  }

  .app-shell {
    position: relative;
    z-index: 1;
    isolation: isolate;
    min-block-size: 100dvh;
  }

  .screen {
    min-block-size: 100dvh;
    padding: var(--safe-top) var(--gutter) var(--safe-bottom);
    background: var(--paper);
  }

  .screen[hidden] { display: none; }

  /* ── Small type ───────────────────────────────────── */
  .eyebrow,
  .list-eyebrow {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .step-label {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.16em;
  }

  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ── Controls ─────────────────────────────────────── */
  .icon-button {
    display: inline-grid;
    place-items: center;
    inline-size: 2.65rem;
    min-inline-size: 44px;
    min-block-size: 44px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .icon-button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

  .gem-button { color: var(--brass-ink); }

  .text-button {
    min-block-size: 44px;
    padding-inline: 0.4rem;
    background: transparent;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-underline-offset: 0.25em;
  }

  .text-button:hover { color: var(--ink); text-decoration: underline; }

  .primary-button,
  .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-block-size: 3.35rem;
    padding: 0.8rem 1.25rem;
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }

  .primary-button { background: var(--ink); color: var(--paper-raised); }
  .secondary-button { border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); }

  .primary-button:hover:not(:disabled) { background: #322a20; transform: translateY(-1px); }
  .secondary-button:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }
  .primary-button:active:not(:disabled),
  .secondary-button:active:not(:disabled) { transform: translateY(1px); }
  .primary-button:disabled,
  .secondary-button:disabled { opacity: 0.35; }

  /* ── Home ─────────────────────────────────────────── */
  .screen--home {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.9rem, 2.4vh, 1.6rem);
    max-inline-size: 62rem;
    margin-inline: auto;
  }

  .home-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    inline-size: 100%;
    padding-block-end: 0.85rem;
    border-block-end: 1px solid var(--rule);
  }

  .home-kicker { display: flex; align-items: center; gap: 0.55rem; max-inline-size: 24rem; }

  .status-dot {
    flex: 0 0 auto;
    inline-size: 0.45rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--brass-ink);
  }

  .top-actions { display: flex; gap: 0.45rem; }
  .top-actions .icon-button { inline-size: 2.5rem; min-inline-size: 2.5rem; min-block-size: 2.5rem; font-size: 0.95rem; }

  .home-hero {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    inline-size: 100%;
    padding-block: clamp(0.6rem, 3vh, 2.4rem) 0.2rem;
  }

  .logo-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--muted);
  }

  .number-badge {
    display: grid;
    place-items: center;
    inline-size: 1.9rem;
    aspect-ratio: 1;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
  }

  .number-badge--one { color: var(--crimson-ink); border-color: rgb(163 48 42 / 40%); }
  .number-badge--two { color: var(--forest); border-color: rgb(44 92 78 / 40%); }

  .logo-star { color: var(--brass); font-size: 0.75rem; }

  .game-logo {
    display: grid;
    justify-items: center;
    gap: clamp(0.2rem, 1vw, 0.5rem);
    margin-block: clamp(0.4rem, 1.6vh, 1rem) 0;
  }

  .game-logo span:first-child {
    color: var(--brass-ink);
    font-family: var(--font-ui);
    font-size: clamp(0.7rem, 2.2vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.62em;
    line-height: 1;
    text-indent: 0.62em;
    text-transform: uppercase;
  }

  .game-logo span:last-child {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(4.6rem, 16vw, 9.5rem);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 0.8;
    text-transform: uppercase;
  }

  .hero-caption {
    margin-block-start: clamp(0.7rem, 2vh, 1.2rem);
    color: var(--muted);
    font-size: 0.59rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-align: center;
  }

  .logo-spark {
    position: absolute;
    color: var(--brass);
    font-size: 0.8rem;
    opacity: 0.8;
  }

  .logo-spark--left { inset-inline-start: 12%; inset-block-start: 26%; }
  .logo-spark--right { inset-inline-end: 12%; inset-block-end: 20%; }

  .hero-confetti { display: none; }

  .home-menu {
    display: grid;
    gap: 0.55rem;
    inline-size: min(100%, 30rem);
  }

  .menu-button {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-block-size: 3.55rem;
    padding: 0.45rem 1.1rem 0.45rem 0.5rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  }

  .menu-button--gold { background: var(--ink); color: var(--paper-raised); }

  .menu-button--teal {
    border: 1px solid var(--rule-strong);
    background: transparent;
    color: var(--ink);
  }

  .menu-button:hover { transform: translateY(-1px); }
  .menu-button--gold:hover { background: #2f281e; }
  .menu-button--teal:hover { border-color: var(--ink); }

  .menu-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 2.55rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(244 239 228 / 14%);
    font-size: 0.85rem;
  }

  .menu-button--teal .menu-icon { background: var(--paper-plate); color: var(--ink); }
  .menu-icon--globe { font-size: 1.05rem; }

  .menu-arrow {
    margin-inline-start: auto;
    color: currentColor;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    opacity: 0.6;
  }

  .locked-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

  .locked-mode {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 3rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    color: var(--muted);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: start;
    text-transform: uppercase;
  }

  .locked-mode > span:first-child { color: var(--faint); font-size: 0.85rem; }
  .locked-mode small { margin-inline-start: auto; color: var(--brass-ink); font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.1em; }
  .locked-mode:hover { border-color: var(--rule-strong); }

  .party-games {
    inline-size: min(100%, 30rem);
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--rule);
    counter-reset: house-game;
  }

  .party-games h2 {
    margin-block-end: 0.5rem;
    color: var(--muted);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .party-game-grid { display: grid; }

  .party-game-grid button {
    display: grid;
    grid-template-columns: 1.6rem 1.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-block-size: 2.85rem;
    padding-block: 0.35rem;
    border-block-end: 1px solid var(--rule);
    color: var(--ink);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-align: start;
    transition: color 0.18s ease, padding-inline-start 0.18s ease;
  }

  .party-game-grid button::before {
    counter-increment: house-game;
    content: counter(house-game, decimal-leading-zero);
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-variant-numeric: tabular-nums;
  }

  .party-game-grid button::after { content: "→"; color: var(--faint); font-size: 0.8rem; }

  .party-game-grid button:hover { color: var(--brass-ink); padding-inline-start: 0.25rem; }
  .party-game-grid button:hover::after { color: var(--brass-ink); }

  .party-game-icon {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    aspect-ratio: 1;
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
    color: var(--brass-ink);
    font-size: 0.75rem;
  }

  .rate-button {
    min-block-size: 2.75rem;
    padding-inline: 1.2rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    color: var(--brass-ink);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .rate-button:hover { border-color: var(--brass-ink); }

  .home-footnote { color: var(--faint); font-size: 0.66rem; letter-spacing: 0.04em; }

  /* ── Shared screen header ─────────────────────────── */
  .view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    inline-size: 100%;
    max-inline-size: 75rem;
    margin-inline: auto;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid var(--rule);
  }

  /* ── Coin toss ────────────────────────────────────── */
  .screen--coin { display: flex; flex-direction: column; }

  .coin-content {
    display: grid;
    justify-items: center;
    align-content: center;
    min-block-size: calc(100dvh - 5.5rem);
    padding-block: 2rem;
    text-align: center;
  }

  .coin-content > .eyebrow { margin-block-end: clamp(2rem, 8vh, 4.5rem); color: var(--brass-ink); }

  .coin {
    position: relative;
    inline-size: clamp(9.5rem, 34vw, 13.5rem);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    perspective: 1100px;
    transform-style: preserve-3d;
    transition: transform 1.15s cubic-bezier(0.22, 0.8, 0.16, 1);
    filter: drop-shadow(0 26px 30px rgb(27 23 18 / 22%));
  }

  .coin.is-flipping { transform: rotateY(1800deg) rotateZ(8deg); }
  .coin.is-back { transform: rotateY(180deg); }

  .coin-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 1px solid #8d6726;
    border-radius: 50%;
    backface-visibility: hidden;
    background:
      radial-gradient(circle at 34% 28%, #f0dbb0 0%, #d8bb80 38%, #bb9655 72%, #a07d3c 100%);
    box-shadow:
      inset 0 0 0 0.45rem rgb(255 255 255 / 22%),
      inset 0 0 0 0.5rem rgb(120 86 30 / 40%),
      inset 0 -0.65rem 1.4rem rgb(94 64 16 / 32%);
    color: #33260f;
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 12vw, 4.9rem);
    line-height: 1;
  }

  .coin-face::before {
    position: absolute;
    inset: 1.15rem;
    border: 1px solid rgb(90 64 20 / 32%);
    border-radius: 50%;
    content: "";
  }

  .coin-face--back { transform: rotateY(180deg); }

  .coin-copy { margin-block-start: clamp(3rem, 8vh, 5rem); }

  .coin-copy h1 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5.6vw, 2.9rem);
    letter-spacing: -0.01em;
    line-height: 1.08;
    text-transform: uppercase;
  }

  .coin-copy p { margin-block-start: 0.6rem; color: var(--muted); font-size: clamp(0.9rem, 2.6vw, 1.05rem); }

  .coin-next { margin-block-start: 2rem; min-inline-size: min(100%, 20rem); }

  /* ── Pack picker ──────────────────────────────────── */
  .screen--categories {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    block-size: 100dvh;
    min-block-size: 34rem;
    max-block-size: 100dvh;
  }

  .category-header { flex: 0 0 auto; }
  .category-heading { flex: 1; min-inline-size: 0; }
  .category-heading .eyebrow { margin-block-end: 0.15rem; }

  .category-heading h1 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.6vw, 1.85rem);
    letter-spacing: -0.01em;
    line-height: 1.05;
  }

  .category-filters {
    display: flex;
    flex: 0 0 auto;
    gap: 0.4rem;
    overflow-x: auto;
    padding-block: 0.15rem 0.3rem;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .category-filters::-webkit-scrollbar { display: none; }

  .filter-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
    min-block-size: 2.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .filter-chip:hover { border-color: var(--rule-strong); color: var(--ink); }

  .filter-chip.is-selected {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper-raised);
  }

  .filter-chip.is-selected::before { content: "✓"; font-size: 0.7rem; }

  .filter-count {
    padding-inline-start: 0.4rem;
    border-inline-start: 1px solid currentColor;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    opacity: 0.65;
  }

  .search-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-block-size: 2.9rem;
    padding-inline: 0.85rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    background: var(--paper-raised);
    color: var(--muted);
  }

  .search-field[hidden] { display: none; }

  .search-field input { flex: 1; min-inline-size: 0; min-block-size: 2.7rem; color: var(--ink); }
  .search-field input::placeholder { color: var(--faint); }
  .search-field button { inline-size: 2.2rem; min-block-size: 2.2rem; border-radius: 50%; color: var(--muted); font-size: 1.2rem; }

  .category-list-wrap {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    padding-inline: 0.1rem;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  .custom-category,
  .daily-pack {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    inline-size: 100%;
    min-block-size: 4rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--r-md);
    text-align: start;
  }

  .custom-category {
    margin-block-end: 0.5rem;
    border: 1px dashed var(--rule-strong);
    color: var(--muted);
  }

  .custom-category:hover { border-color: var(--brass-ink); color: var(--ink); }

  .custom-icon {
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    aspect-ratio: 1;
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
    color: var(--brass-ink);
    font-size: 0.95rem;
  }

  .custom-category strong,
  .daily-copy strong {
    display: block;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 400;
  }

  .custom-category small,
  .daily-copy small {
    display: block;
    margin-block-start: 0.1rem;
    color: var(--muted);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .lock-mark { margin-inline-start: auto; color: var(--brass-ink); font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.12em; }

  .daily-pack {
    margin-block-end: 1rem;
    border: 1px solid var(--rule-strong);
    background: linear-gradient(100deg, var(--paper-raised), var(--paper));
    box-shadow: inset 3px 0 0 var(--brass);
  }

  .daily-pack:hover { border-color: var(--brass-ink); }

  .daily-emoji {
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    aspect-ratio: 1;
    border-radius: var(--r-xs);
    background: var(--paper-plate);
    color: var(--brass-ink);
    font-size: 0.95rem;
  }

  .daily-copy { flex: 1; min-inline-size: 0; }
  .daily-copy small { color: var(--brass-ink); }

  .daily-time {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  .list-eyebrow { margin: 0.4rem 0.1rem 0.6rem; }

  .category-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 0.55rem;
    padding-block-end: 0.6rem;
  }

  .empty-categories { grid-column: 1 / -1; padding: 2rem 0.5rem; color: var(--muted); font-size: 0.85rem; text-align: center; }

  .category-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    inline-size: 100%;
    min-block-size: 4.5rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper-raised);
    box-shadow: var(--shadow-card);
    text-align: start;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }

  .category-card .category-emoji { align-self: center; }

  .category-card:hover { border-color: var(--rule-strong); transform: translateY(-1px); }

  .category-card.is-selected {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgb(168 130 58 / 16%), var(--shadow-card);
  }

  .category-card.is-selected .category-title { text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

  .category-emoji {
    display: grid;
    place-items: center;
    flex: 0 0 2.9rem;
    inline-size: 2.9rem;
    aspect-ratio: 1;
    border-radius: var(--r-xs);
    background: var(--paper-sunk);
    font-size: 1.4rem;
  }

  .category-copy { display: grid; flex: 1; gap: 0.15rem; min-inline-size: 0; }
  .category-name-line { display: flex; align-items: center; gap: 0.4rem; min-inline-size: 0; }

  .category-title {
    display: -webkit-box;
    min-inline-size: 0;
    overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-family: var(--font-display);
    font-size: 1.02rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .category-tab-label {
    color: var(--faint);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .judge-profile-badge,
  .pack-flag {
    flex: 0 0 auto;
    padding: 0.1rem 0.32rem;
    border: 1px solid currentColor;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 0.46rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    opacity: 0.85;
  }

  .judge-profile-badge--character-power { color: var(--crimson-ink); }
  .judge-profile-badge--athlete-performance { color: var(--forest); }
  .judge-profile-badge--internet-ratings { color: var(--slate); }
  .pack-flag { color: var(--brass-ink); }

  .category-count {
    flex: 0 0 auto;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .category-footer {
    flex: 0 0 auto;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.75rem var(--gutter) max(0.75rem, env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--rule);
    background: var(--paper);
  }

  .selected-pack { display: flex; align-items: center; gap: 0.55rem; min-block-size: 1.9rem; margin-block-end: 0.5rem; }
  .selected-emoji { font-size: 1.1rem; }
  .selected-name { font-family: var(--font-display); font-size: 1rem; }

  .selected-count {
    margin-inline-start: auto;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
  }

  .judge-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem;
    padding: 0.2rem;
    margin-block-end: 0.45rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
  }

  .judge-option {
    min-block-size: 2.5rem;
    border-radius: var(--r-pill);
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .judge-option.is-selected { background: var(--ink); color: var(--paper-raised); }

  .judge-note {
    margin-block-end: 0.6rem;
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.45;
    text-align: center;
  }

  .start-button { inline-size: 100%; min-block-size: 3.2rem; }

  /* ── Live draft stage ─────────────────────────────── */
  .screen--game {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--stage);
    color: var(--bone);
    --faint: #8b8071;
  }

  .screen--game .icon-button { border-color: var(--stage-line); color: var(--bone); }
  .screen--game .icon-button:hover { background: var(--bone); border-color: var(--bone); color: var(--stage); }
  .screen--game :focus-visible { outline-color: var(--brass-soft); }
  .screen--game .text-button { color: var(--bone-muted); }
  .screen--game .text-button:hover { color: var(--bone); }
  .screen--game .step-label { color: var(--bone-muted); }

  .game-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    inline-size: 100%;
    max-inline-size: 75rem;
    margin-inline: auto;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid var(--stage-line);
  }

  .game-top-title { display: grid; justify-items: center; gap: 0.15rem; }
  .game-top-title .eyebrow { color: var(--brass-soft); }
  .round-count { color: var(--bone-muted); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; }

  .game-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
    inline-size: min(100%, 96rem);
    margin: auto;
  }

  .player-card {
    min-inline-size: 0;
    padding: 0.85rem;
    border: 1px solid var(--stage-line);
    border-radius: var(--r-lg);
    background: var(--stage-raised);
    transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
  }

  .player-card.is-active { border-color: rgb(210 179 120 / 55%); background: #262019; }
  .player-card.is-waiting { opacity: 0.55; }

  .player-heading {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-block-size: 2.4rem;
    padding-block-end: 0.6rem;
    border-block-end: 1px solid var(--stage-line);
  }

  .player-color-dot {
    flex: 0 0 auto;
    inline-size: 0.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #c2543f;
  }

  .player-card--two .player-color-dot { background: #4f8c7c; }
  .player-card--two .player-heading { border-block-end-color: rgb(79 140 124 / 30%); }

  .player-name {
    flex: 1;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    color: var(--bone);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .player-money {
    color: var(--brass-soft);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  .draft-slots { display: grid; gap: 0.3rem; margin-block-start: 0.6rem; list-style: none; }

  .draft-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
    min-block-size: 2.2rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgb(242 235 221 / 7%);
    border-radius: var(--r-xs);
    color: var(--bone-muted);
  }

  .slot-number { flex: 0 0 auto; color: var(--faint); font-family: var(--font-mono); font-size: 0.55rem; }
  .slot-item { flex: 1; min-inline-size: 0; overflow: hidden; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
  .slot-price { color: var(--brass-soft); font-family: var(--font-mono); font-size: 0.58rem; }

  .draft-slot.is-filled { border-color: rgb(210 179 120 / 26%); background: rgb(210 179 120 / 6%); color: var(--bone); }

  .player-status {
    min-block-size: 0.9rem;
    margin-block-start: 0.45rem;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    text-align: center;
  }

  .auction-center { display: grid; justify-items: center; min-inline-size: 0; padding: 1rem 0.5rem; text-align: center; }

  .lot-category {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--bone-muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .lot-overline {
    margin-block-start: 1.4rem;
    color: var(--brass-soft);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.22em;
  }

  .auction-center h1 {
    margin-block: 0.2rem 0.3rem;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.6vw, 3.9rem);
    letter-spacing: -0.02em;
    line-height: 1.02;
  }

  .lot-description { max-inline-size: 24ch; color: var(--bone-muted); font-size: 0.82rem; line-height: 1.5; }

  .bid-status { display: grid; justify-items: center; gap: 0.1rem; margin-block-start: 1.3rem; }
  .bid-status .eyebrow { color: var(--bone-muted); font-size: 0.54rem; }

  .bid-amount {
    color: var(--brass-soft);
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 3.6rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }

  .bid-note { color: var(--brass-soft); font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.16em; }

  .bid-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    inline-size: min(100%, 14rem);
    margin-block: 0.9rem 0.7rem;
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 1rem;
  }

  .step-button {
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    min-inline-size: 44px;
    min-block-size: 2.4rem;
    border: 1px solid var(--stage-line);
    border-radius: var(--r-xs);
    color: var(--bone);
    font-size: 1rem;
  }

  .step-button:hover:not(:disabled) { border-color: var(--bone); }
  .step-button:disabled { opacity: 0.28; }

  .auction-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; inline-size: min(100%, 17rem); }

  .auction-actions .primary-button,
  .auction-actions .secondary-button { min-block-size: 3rem; border-radius: var(--r-pill); }

  .bid-button { background: var(--brass-soft); color: var(--stage); }
  .bid-button:hover:not(:disabled) { background: #e0c58d; }

  .pass-button { border: 1px solid var(--stage-line); background: transparent; color: var(--bone); }
  .pass-button:hover:not(:disabled) { border-color: var(--bone); background: rgb(242 235 221 / 6%); }

  .turn-hint { min-block-size: 1.1rem; margin-block-start: 0.6rem; color: var(--bone-muted); font-size: 0.62rem; }

  /* ── Results ──────────────────────────────────────── */
  .screen--results { display: flex; flex-direction: column; }
  .results-header { max-inline-size: 58rem; }
  .result-trophy { color: var(--brass); font-size: 0.85rem; }

  .results-content {
    display: grid;
    justify-items: center;
    align-content: center;
    inline-size: min(100%, 58rem);
    margin: auto;
    padding-block: clamp(1.5rem, 5vh, 3rem);
    text-align: center;
  }

  .results-content > .eyebrow { color: var(--brass-ink); }

  .results-content h1 {
    margin-block-start: 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 6.6vw, 4rem);
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
  }

  .results-subtitle { margin-block-start: 0.7rem; color: var(--muted); font-size: 0.82rem; }

  .winner-banner {
    margin-block: 1.1rem 0.4rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    color: var(--brass-ink);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .result-scorecards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    inline-size: 100%;
    margin-block: 0.6rem 0.9rem;
  }

  .result-card {
    padding: 0.9rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper-raised);
    box-shadow: var(--shadow-card);
    text-align: start;
  }

  .result-card h2 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-block-end: 0.55rem;
    border-block-end: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .result-card .player-color-dot { flex: 0 0 0.45rem; inline-size: 0.45rem; }
  .result-card .player-color-dot--2 { background: #4f8c7c; }

  .result-card h2 span:last-child {
    margin-inline-start: auto;
    color: var(--brass-ink);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .result-card p { margin-block-start: 0.5rem; color: var(--muted); font-size: 0.68rem; line-height: 1.5; }

  .player-ai-notes {
    display: grid;
    gap: 0.3rem;
    margin-block-start: 0.6rem;
    padding-inline-start: 0.55rem;
    border-inline-start: 1px solid var(--brass);
    color: var(--ink-soft);
    font-size: 0.66rem;
    line-height: 1.5;
  }

  .result-items { display: grid; gap: 0.25rem; margin-block-start: 0.65rem; }

  .result-pick {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 0.25rem 0.45rem;
    padding-block: 0.35rem;
    border-block-end: 1px solid var(--rule);
  }

  .result-pick:last-child { border-block-end: 0; }

  .result-pick-name {
    min-inline-size: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .result-pick-rating,
  .result-pick-price {
    color: var(--brass-ink);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .result-pick-price { color: var(--muted); }
  .result-pick-reason { grid-column: 1 / -1; color: var(--muted); font-size: 0.62rem; line-height: 1.5; }

  .game-analysis {
    display: grid;
    gap: 0.8rem;
    inline-size: 100%;
    margin-block: 0.4rem 0.9rem;
    padding: 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper-raised);
    box-shadow: var(--shadow-card);
    text-align: start;
  }

  .analysis-heading .eyebrow { color: var(--muted); }

  .analysis-heading h2 {
    margin-block-start: 0.3rem;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    line-height: 1.15;
  }

  .analysis-method { color: var(--muted); font-size: 0.7rem; line-height: 1.55; }

  .analysis-summary {
    padding: 0.75rem 0.85rem;
    border-inline-start: 2px solid var(--brass);
    background: var(--paper-sunk);
    color: var(--ink-soft);
    font-size: 0.8rem;
    line-height: 1.55;
  }

  .analysis-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .analysis-actions[hidden] { display: none; }
  .analysis-actions button { min-block-size: 2.8rem; padding-inline: 0.65rem; font-size: 0.62rem; }

  .analysis-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }

  .analysis-stat { padding-block-start: 0.5rem; border-block-start: 1px solid var(--rule); }
  .analysis-stat strong { display: block; font-family: var(--font-mono); font-size: 0.95rem; font-variant-numeric: tabular-nums; font-weight: 500; }

  .analysis-stat span {
    display: block;
    margin-block-start: 0.15rem;
    color: var(--muted);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .auction-log { border-block-start: 1px solid var(--rule); }

  .auction-log summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    color: var(--ink);
    cursor: pointer;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    list-style: none;
    text-transform: uppercase;
  }

  .auction-log summary::-webkit-details-marker { display: none; }

  .auction-log summary::before {
    color: var(--brass-ink);
    content: "›";
    font-family: var(--font-mono);
    font-size: 1rem;
    transition: rotate 0.18s ease;
  }

  .auction-log[open] summary::before { rotate: 90deg; }

  #auction-log-list { display: grid; gap: 0.3rem; list-style: none; }

  .auction-round {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    gap: 0.4rem 0.6rem;
    padding: 0.55rem 0;
    border-block-end: 1px solid var(--rule);
  }

  .auction-round-number { color: var(--faint); font-family: var(--font-mono); font-size: 0.56rem; }

  .auction-round-main { display: grid; gap: 0.15rem; min-inline-size: 0; }
  .auction-round-title { overflow-wrap: anywhere; font-size: 0.74rem; font-weight: 600; }
  .auction-round-outcome { color: var(--forest); font-size: 0.64rem; }
  .auction-round-bids { color: var(--muted); font-size: 0.62rem; line-height: 1.5; }

  .auction-round-rating {
    justify-self: start;
    margin-block-start: 0.15rem;
    padding: 0.12rem 0.4rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    color: var(--brass-ink);
    font-size: 0.56rem;
  }

  .judge-prompt { inline-size: 100%; margin-block: 0.4rem 1rem; }
  .judge-prompt > p { margin-block-end: 0.6rem; font-family: var(--font-display); font-size: 1rem; }
  .judge-votes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .judge-votes button { min-block-size: 2.9rem; font-size: 0.64rem; }
  .draw-button { margin-block-start: 0.4rem; min-block-size: 44px; padding-inline: 0.75rem; background: transparent; color: var(--muted); font-size: 0.62rem; letter-spacing: 0.08em; text-decoration: underline; text-underline-offset: 0.25em; }
  .draw-button:hover { color: var(--ink); }

  .result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; inline-size: 100%; }
  .result-actions .primary-button,
  .result-actions .secondary-button { min-inline-size: 12rem; }

  /* ── Dialogs & feedback ───────────────────────────── */
  .modal-card {
    position: fixed;
    inset: 50% auto auto 50%;
    inline-size: min(calc(100% - 2rem), 30rem);
    max-block-size: min(85dvh, 44rem);
    overflow-y: auto;
    padding: 1.4rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: var(--paper-raised);
    color: var(--ink);
    box-shadow: var(--shadow-raised);
    transform: translate(-50%, -50%);
  }

  .modal-card::backdrop { background: rgb(20 17 16 / 55%); backdrop-filter: blur(6px); }
  .modal-card[open] { animation: modal-in 0.22s ease-out both; }
  .modal-card > form:first-child { display: flex; justify-content: flex-end; margin: -0.6rem -0.6rem 0.2rem; }

  .modal-close {
    inline-size: 2.5rem;
    min-block-size: 2.5rem;
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1;
  }

  .modal-close:hover { background: var(--ink); color: var(--paper); }
  .modal-card h2 { margin-block: 0.45rem 1rem; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; }

  .rules-list { display: grid; gap: 0.9rem; list-style: none; }
  .rules-list li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.55; }
  .rules-list li span { flex: 0 0 auto; color: var(--brass-ink); font-family: var(--font-mono); font-size: 0.6rem; }

  .modal-done { inline-size: 100%; margin-block-start: 1.2rem; }

  .settings-dialog .name-field {
    display: grid;
    gap: 0.35rem;
    margin-block: 0.8rem;
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
  }

  .name-field input {
    min-block-size: 2.9rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-xs);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: normal;
  }

  .toast {
    position: fixed;
    z-index: 5;
    inset-inline: 1rem;
    inset-block-end: max(1rem, env(safe-area-inset-bottom, 0px));
    inline-size: fit-content;
    max-inline-size: calc(100% - 2rem);
    margin-inline: auto;
    padding: 0.7rem 1rem;
    border-radius: var(--r-pill);
    background: var(--ink);
    box-shadow: 0 18px 40px -20px rgb(0 0 0 / 55%);
    color: var(--paper-raised);
    font-size: 0.75rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.8rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .toast.is-visible { opacity: 1; transform: translateY(0); }
}

@layer utilities {
  @keyframes modal-in { from { opacity: 0; translate: 0 0.4rem; } to { opacity: 1; translate: 0 0; } }

  @media (min-width: 900px) and (min-height: 820px) {
    .screen--home { justify-content: center; }
    .game-logo span:last-child { font-size: clamp(7rem, 12vw, 10rem); }
    .home-menu { gap: 0.7rem; }
    .party-games { padding-block-start: 1.2rem; }
  }

  @media (min-width: 1000px) {
    .game-layout { gap: clamp(1.5rem, 3vw, 3.5rem); }
    .player-card { padding: 1rem; }
    .player-heading { min-block-size: 2.8rem; }
    .player-name { font-size: 0.72rem; }
    .player-money { font-size: 1.3rem; }
    .draft-slot { min-block-size: 2.45rem; padding: 0.35rem 0.6rem; }
    .slot-item { font-size: 0.78rem; }
    .slot-number, .slot-price { font-size: 0.62rem; }
    .auction-center { padding-block: 1.5rem; }
    .bid-amount { font-size: clamp(3rem, 5vw, 4.2rem); }
    .lot-description { font-size: 0.92rem; }
  }

  @media (max-width: 760px) {
    .screen--game { padding-inline: 1rem; }

    .game-layout {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas: "one two" "center center";
      align-items: start;
      gap: 0.6rem;
    }

    .player-card--one { grid-area: one; }
    .player-card--two { grid-area: two; }
    .auction-center { grid-area: center; padding-block: 0.4rem 0.8rem; }

    .player-card { padding: 0.6rem; }
    .player-heading { min-block-size: 2.1rem; padding-block-end: 0.45rem; }
    .player-name { font-size: clamp(0.56rem, 2vw, 0.66rem); }
    .player-money { font-size: 0.95rem; }

    .draft-slots { gap: 0.22rem; }
    .draft-slot { min-block-size: 1.85rem; gap: 0.35rem; padding: 0.2rem 0.35rem; }
    .slot-number { font-size: 0.5rem; }
    .slot-item { font-size: 0.62rem; }
    .slot-price { font-size: 0.5rem; }
    .player-status { font-size: 0.46rem; letter-spacing: 0.1em; }

    .lot-overline { margin-block-start: 0.7rem; }
    .bid-status { margin-block-start: 0.7rem; }
    .bid-amount { font-size: 2.7rem; }
    .bid-stepper { margin-block: 0.6rem 0.5rem; }
  }

  @media (max-width: 520px) {
    .screen--home { justify-content: space-between; gap: 0.7rem; }

    .home-topbar { align-items: flex-start; padding-block-end: 0.7rem; }
    .home-kicker { max-inline-size: 10rem; margin-block-start: 0.3rem; font-size: 0.55rem; letter-spacing: 0.16em; }    .top-actions { gap: 0.35rem; }
    .top-actions .icon-button { inline-size: 2.35rem; min-inline-size: 44px; min-block-size: 44px; }

    .game-logo span:last-child { font-size: clamp(4.2rem, 20vw, 6rem); }
    .hero-caption { margin-block-start: 0.55rem; font-size: 0.54rem; letter-spacing: 0.18em; }
    .logo-spark--left { inset-inline-start: 3%; }
    .logo-spark--right { inset-inline-end: 3%; }

    .menu-button { min-block-size: 3.1rem; font-size: 0.7rem; }
    .menu-icon { inline-size: 2.2rem; }
    .locked-mode { min-block-size: 2.7rem; padding-inline: 0.55rem; font-size: 0.54rem; }
    .party-games h2 { font-size: 0.55rem; }
    .party-game-grid button { font-size: 0.72rem; }
    .rate-button { min-block-size: 2.5rem; font-size: 0.56rem; }
    .home-footnote { font-size: 0.6rem; }

    .screen--categories { gap: 0.7rem; padding-inline: 0.9rem; --gutter: 0.9rem; }
    .category-header { gap: 0.4rem; }
    .category-header .icon-button { inline-size: 2.4rem; min-inline-size: 2.4rem; min-block-size: 2.4rem; font-size: 0.9rem; }
    .category-heading h1 { font-size: 1.25rem; }
    .category-heading .eyebrow { font-size: 0.54rem; letter-spacing: 0.16em; }
    .filter-chip { min-block-size: 2.15rem; padding-inline: 0.7rem; font-size: 0.56rem; }
    .custom-category, .daily-pack { min-block-size: 3.5rem; }
    .category-card { min-block-size: 3.9rem; gap: 0.6rem; padding: 0.5rem 0.6rem; }
    .category-emoji { flex-basis: 2.4rem; inline-size: 2.4rem; font-size: 1.15rem; }
    .category-title { font-size: 0.92rem; }
    .category-count { font-size: 0.56rem; }
    .selected-pack { min-block-size: 1.6rem; }
    .judge-option { min-block-size: 2.25rem; font-size: 0.56rem; }
    .judge-note { margin-block-end: 0.45rem; font-size: 0.55rem; }
    .start-button { min-block-size: 3rem; }

    .screen--game { gap: 0.6rem; }
    .game-topbar .icon-button { inline-size: 2.4rem; min-inline-size: 2.4rem; min-block-size: 2.4rem; }
    .game-topbar .text-button { font-size: 0.54rem; }
    .auction-center h1 { font-size: clamp(2rem, 11vw, 2.9rem); }
    .lot-description { font-size: 0.76rem; }
    .bid-note { font-size: 0.5rem; }

    .result-scorecards { grid-template-columns: 1fr; }
    .game-analysis { padding: 0.8rem; }
    .analysis-actions { grid-template-columns: 1fr; }
    .analysis-stats { gap: 0.4rem; }
    .analysis-stat strong { font-size: 0.82rem; }
    .judge-votes { grid-template-columns: 1fr; }
    .result-actions { display: grid; grid-template-columns: 1fr; }
    .result-actions .primary-button,
    .result-actions .secondary-button { min-inline-size: 0; }
  }

  @media (max-width: 380px) {
    .locked-mode { gap: 0.4rem; padding-inline: 0.5rem; font-size: 0.5rem; letter-spacing: 0.06em; }
    .locked-mode small { font-size: 0.44rem; letter-spacing: 0.06em; }
    .category-tab-label { font-size: 0.5rem; letter-spacing: 0.12em; }
  }

  @media (max-height: 740px) and (max-width: 760px) {
    .screen--home { gap: 0.45rem; }
    .home-hero { padding-block: 0; }
    .game-logo span:last-child { font-size: clamp(3.6rem, 17vw, 5rem); }
    .menu-button { min-block-size: 2.9rem; }
    .party-game-grid button { min-block-size: 2.5rem; }
    .party-game-icon { inline-size: 1.5rem; }
    .rate-button { min-block-size: 2.35rem; }
  }

  @media (pointer: coarse) {
    .screen button:not(.coin) { min-block-size: 44px; }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.app-shell *, .modal-card *, .toast) {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media (forced-colors: active) {
    .category-card.is-selected,
    .filter-chip.is-selected,
    .judge-option.is-selected,
    .draft-slot.is-filled { outline: 2px solid Highlight; outline-offset: 2px; }
  }
}