/*
 * Animal Army — stylesheet (private beta baseline)
 * Preserved verbatim from the original prototype. Design tokens live in :root
 * below (ink / manila / stamp / pine / amber / chalk). Responsive rules:
 * mobile-first single column, side stats panel appears at min-width:1000px.
 */
:root{
    --ink:#180f0a;
    --board:#22272d;
    --manila:#e8c583;
    --manila-edge:#c99a4a;
    --manila-shadow: rgba(20,10,0,0.5);
    --stamp:#c4451f;
    --stamp-dark:#8f2f13;
    --pine:#5c8f3a;
    --pine-dark:#3e6326;
    --amber:#d9962e;
    --chalk:#fbf1de;
    --chalk-dim: rgba(251,241,222,0.6);
    --ink-text:#2e2210;
    --ink-text-dim: rgba(46,34,16,0.62);
    --silhouette:#170d07;
    --font-stamp: ui-monospace, "SF Mono", "Cascadia Code", "Courier New", monospace;
    --font-body: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  button{ touch-action:manipulation; }
  body{
    min-height:100vh;
    background:var(--ink);
    color:var(--chalk);
    font-family:var(--font-body);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:32px 16px;
    overflow-x:hidden;
    position:relative;
  }

  .bg-sky{
    position:fixed;
    inset:0;
    z-index:-4;
    background:#0e4b29;
  }
  .bg-ground, .bg-figures{ display:none; }
  .safari-figure{
    position:absolute;
    display:block;
    filter:drop-shadow(0 8px 10px rgba(0,0,0,0.35)) drop-shadow(0 0 16px rgba(255,175,70,0.4));
  }
  .bg-scrim{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background: linear-gradient(180deg,
      rgba(10,4,6,0.45) 0%,
      rgba(10,4,6,0.08) 22%,
      rgba(10,4,6,0.04) 62%,
      rgba(10,4,6,0.32) 100%);
  }
  .masthead{
    text-align:center;
    margin-bottom:22px;
  }
  .masthead .kicker{
    font-family:var(--font-stamp);
    font-size:11px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--chalk-dim);
    text-shadow:0 2px 10px rgba(0,0,0,0.6);
  }
  .masthead h1{
    font-family:var(--font-stamp);
    font-weight:700;
    font-size:clamp(22px, 4vw, 32px);
    letter-spacing:0.06em;
    text-transform:uppercase;
    text-shadow:0 3px 16px rgba(0,0,0,0.65);
    margin:6px 0 0;
    text-wrap:balance;
  }

  .fight-layout{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:14px;
  }
  .fight-side{ display:none; width:min(460px, 100%); }
  .fight-layout.in-fight .fight-side{ display:block; }
  @media (min-width:1000px){
    .fight-layout.in-fight{
      flex-direction:row;
      align-items:flex-start;
      justify-content:center;
      gap:20px;
    }
    .fight-layout.in-fight .fight-side{ width:230px; flex-shrink:0; }
    .fight-layout.in-fight .card{ flex-shrink:0; }
  }
  .fight-panel-box{
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:8px;
    padding:16px 18px;
    color:rgba(244,240,232,0.9);
  }
  .fight-panel-title{
    font-family:var(--font-stamp);
    font-weight:800;
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:rgba(244,240,232,0.6);
    margin-bottom:10px;
  }
  .fight-stat-row{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:13px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .fight-stat-row:last-of-type{ border-bottom:none; }
  .fight-stat-row .val{ font-weight:700; font-variant-numeric:tabular-nums; }
  .fight-history-list{ margin-top:10px; display:flex; flex-direction:column; gap:5px; }
  .fight-history-item{
    display:flex; justify-content:space-between; font-size:12px;
    color:rgba(244,240,232,0.7);
  }
  .fight-history-item .win{ color:#8fd66a; }
  .fight-history-item .lose{ color:#ff8a76; }
  .fight-empty-note{ font-size:12.5px; color:rgba(244,240,232,0.55); }
  .trophy-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .trophy-item{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px;
    background:rgba(255,255,255,0.04); border-radius:6px; padding:8px 4px;
    font-size:10.5px; color:rgba(244,240,232,0.4);
  }
  .trophy-item.unlocked{ color:rgba(244,240,232,0.85); background:rgba(255,196,64,0.1); }
  .trophy-emoji{ font-size:20px; filter:grayscale(1); opacity:0.5; }
  .trophy-item.unlocked .trophy-emoji{ filter:none; opacity:1; }
  .trophy-name{ line-height:1.3; }
  .fight-streak-banner{
    font-family:var(--font-stamp);
    font-weight:800;
    font-size:13px;
    text-align:center;
    color:#ffcf4d;
    background:rgba(255,196,64,0.14);
    border-radius:6px;
    padding:6px 8px;
    margin-bottom:8px;
  }

  .card{
    position:relative;
    width:min(460px, 100%);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06), transparent 40%),
      var(--manila);
    border:1px solid var(--manila-edge);
    border-radius:5px;
    box-shadow: 0 22px 45px var(--manila-shadow), 0 2px 0 var(--manila-edge) inset;
    color:var(--ink-text);
    padding:28px 26px 24px;
    transform:rotate(-1.1deg);
    transition: transform 0.35s ease;
    animation: settle 0.5s ease;
  }
  .card:focus-within, .card:hover{ transform:rotate(0deg); }
  .card.gauntlet-theme{
    border-color:var(--pine-dark);
    box-shadow: 0 22px 45px var(--manila-shadow), 0 0 0 2px var(--pine-dark), 0 2px 0 var(--manila-edge) inset;
  }

  @keyframes settle{
    from{ opacity:0; transform:rotate(-1.1deg) translateY(10px); }
    to{ opacity:1; transform:rotate(-1.1deg) translateY(0); }
  }

  .stamp-badge{
    position:absolute;
    top:-14px;
    right:22px;
    font-family:var(--font-stamp);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--stamp);
    border:2px solid var(--stamp);
    border-radius:4px;
    padding:4px 10px;
    background:rgba(255,255,255,0.4);
    mix-blend-mode:multiply;
    transform:rotate(-7deg);
    white-space:nowrap;
  }

  .case-no{
    font-family:var(--font-stamp);
    font-size:11px;
    color:var(--ink-text-dim);
    letter-spacing:0.08em;
    font-variant-numeric: tabular-nums;
  }

  .tally{
    display:flex;
    gap:6px;
    margin:14px 0 20px;
    flex-wrap:wrap;
  }
  .tally i{
    width:14px;height:14px;
    border:1.5px solid var(--ink-text-dim);
    border-radius:2px;
    display:inline-block;
  }
  .tally i.done{ background:var(--pine); border-color:var(--pine-dark); }
  .tally i.now{ border-color:var(--stamp); }

  .prompt{
    font-family:var(--font-body);
    font-size:clamp(19px, 3.4vw, 23px);
    line-height:1.35;
    font-weight:600;
    margin:0 0 22px;
    text-wrap:balance;
    min-height:64px;
  }

  .lede{
    font-size:15px;
    line-height:1.55;
    color:var(--ink-text-dim);
    margin:0 0 20px;
  }

  .btn-yes{
    grid-column:span 2; border:2px solid var(--pine); color:var(--pine-dark);
    font-family:var(--font-stamp); font-size:12.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.08em; padding:12px 8px;
    border-radius:4px; cursor:pointer; background:transparent;
    transition:transform 0.12s ease, background 0.12s ease;
  }
  .btn-yes:hover{ background:var(--pine); color:var(--chalk); transform:translateY(-1px); }
  .btn-yes:focus-visible{ outline:2px solid var(--ink-text); outline-offset:2px; }
  .btn-no{
    grid-column:span 2; border:2px solid var(--stamp); color:var(--stamp-dark);
    font-family:var(--font-stamp); font-size:12.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.08em; padding:12px 8px;
    border-radius:4px; cursor:pointer; background:transparent;
    transition:transform 0.12s ease, background 0.12s ease;
  }
  .btn-no:hover{ background:var(--stamp); color:var(--chalk); transform:translateY(-1px); }
  .btn-no:focus-visible{ outline:2px solid var(--ink-text); outline-offset:2px; }

  .double-spin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
  .double-spin-card{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:14px 8px; border-radius:6px; border:2px solid var(--pine);
    background:transparent; cursor:pointer; color:var(--ink-text);
    transition:transform 0.12s ease, background 0.12s ease;
  }
  .double-spin-card:hover{ background:rgba(92,143,58,0.12); transform:translateY(-1px); }
  .double-spin-card:focus-visible{ outline:2px solid var(--ink-text); outline-offset:2px; }
  .double-spin-card .emoji{ font-size:38px; line-height:1; }
  .double-spin-name{ font-family:var(--font-stamp); font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:0.03em; text-align:center; }

  .start-btn, .primary-btn{
    font-family:var(--font-stamp);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:13px;
    padding:13px 18px;
    width:100%;
    border-radius:4px;
    border:2px solid var(--ink-text);
    background:var(--ink-text);
    color:var(--manila);
    cursor:pointer;
    transition:transform 0.12s ease;
  }
  .start-btn:hover, .primary-btn:hover{ transform:translateY(-1px); }
  .start-btn:focus-visible, .primary-btn:focus-visible{ outline:2px solid var(--stamp); outline-offset:2px; }

  .toggle-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
  .toggle-btn{
    font-family:var(--font-stamp);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    padding:10px 6px;
    border-radius:4px;
    border:1.5px solid var(--ink-text-dim);
    background:transparent;
    color:var(--ink-text-dim);
    cursor:pointer;
  }
  .toggle-btn.active{
    border-color:var(--ink-text);
    background:var(--ink-text);
    color:var(--manila);
  }

  .setup-section-label{
    font-family:var(--font-stamp);
    font-weight:800;
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-text-dim);
    margin:16px 0 8px;
  }
  .setup-section-label:first-of-type{ margin-top:6px; }
  .setup-toggle-check{
    display:flex; align-items:center; gap:8px;
    font-size:13px; color:var(--ink-text);
    margin-bottom:6px; cursor:pointer;
  }
  .setup-toggle-check input{ width:16px; height:16px; flex-shrink:0; }
  /* Daily Challenge's twist is fixed for the day - shown checked but inert,
     matching how its opponent/arena/pool read as locked rather than absent. */
  .setup-toggle-check.locked,
  .setup-toggle-check.locked input{ cursor:default; }
  .setup-lock-note{ color:var(--ink-text-dim); }
  .opponent-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .opponent-btn{
    display:flex; flex-direction:column; align-items:flex-start; gap:3px;
    text-align:left; padding:10px 10px; border-radius:4px;
    border:1.5px solid var(--ink-text-dim); background:transparent; cursor:pointer;
  }
  .opponent-btn.active{ border-color:var(--ink-text); background:rgba(0,0,0,0.06); }
  .opponent-btn.bonus-slot{ border-color:var(--amber); background:rgba(217,150,46,0.1); }

  .gauntlet-cta{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    width:100%; padding:14px 14px; margin:0 0 10px;
    border-radius:6px; border:2px solid var(--stamp);
    background:var(--stamp); color:var(--manila);
    cursor:pointer; box-shadow:0 2px 10px rgba(196,69,31,0.35);
    animation: gauntletPulse 2.2s ease-in-out infinite;
  }
  .gauntlet-cta.active{ background:var(--stamp-dark); border-color:var(--stamp-dark); }
  .gauntlet-cta-badge{
    font-family:var(--font-stamp); font-weight:800; font-size:10px;
    text-transform:uppercase; letter-spacing:0.05em;
    background:var(--manila); color:var(--stamp-dark);
    padding:2px 6px; border-radius:10px;
  }
  .gauntlet-cta-label{
    font-family:var(--font-stamp); font-weight:800; font-size:13.5px;
    text-transform:uppercase; letter-spacing:0.04em;
  }
  @keyframes gauntletPulse{
    0%, 100% { box-shadow:0 2px 10px rgba(196,69,31,0.35); }
    50% { box-shadow:0 2px 18px rgba(196,69,31,0.65); }
  }
  @media (prefers-reduced-motion: reduce){
    .gauntlet-cta{ animation:none; }
  }
  .hardcore-cta{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    width:100%; padding:16px 14px; margin:0 0 10px;
    border-radius:6px; border:2px solid var(--ink-text);
    background:var(--ink-text); color:var(--amber);
    cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,0.4);
    font-size:15px;
  }
  .hardcore-cta.active{ background:var(--silhouette); border-color:var(--amber); }
  .hardcore-cta .gauntlet-cta-label{ font-size:14.5px; }
  .daily-cta{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    width:100%; padding:14px 14px; margin:0 0 10px;
    border-radius:6px; border:2px solid var(--pine);
    background:var(--pine); color:var(--chalk);
    cursor:pointer; box-shadow:0 2px 10px rgba(92,143,58,0.35);
  }
  .daily-cta.active{ background:var(--pine-dark); border-color:var(--pine-dark); }
  .mode-cta-sub{
    display:block;
    font-family:var(--font-body); font-weight:400; font-size:11.5px;
    text-transform:none; letter-spacing:0.01em; opacity:0.85;
  }
  .opponent-name{
    font-family:var(--font-stamp); font-weight:800; font-size:12px;
    text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-text);
  }
  .opponent-desc{ font-size:11px; color:var(--ink-text-dim); line-height:1.35; }
  .opponent-spin-reveal{
    text-align:center; padding:14px 10px; border-radius:4px;
    border:1.5px dashed var(--ink-text-dim); margin-bottom:8px;
  }
  .opponent-spin-name{
    font-family:var(--font-stamp); font-weight:800; font-size:15px;
    text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-text);
  }
  .opponent-spin-note{ font-size:11.5px; color:var(--ink-text-dim); margin-top:4px; }

  @media (prefers-reduced-motion: reduce){
    .card{ animation:none; }
    .start-btn, .primary-btn{ transition:none; }
  }

  .fight-teams{ display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }
  .fight-team-name{
    font-family:var(--font-stamp);
    font-weight:800;
    text-transform:uppercase;
    font-size:11.5px;
    letter-spacing:0.05em;
    text-align:center;
    margin-bottom:8px;
  }
  .fight-team.ai .fight-team-name{ color:var(--stamp-dark); }
  .fight-team.player .fight-team-name{ color:var(--pine-dark); }
  .fight-slots{ display:flex; flex-direction:row; flex-wrap:wrap; gap:6px; }
  .fight-slot{
    flex:1 1 calc(50% - 6px);
    min-width:0;
    border:1.5px dashed rgba(46,34,16,0.3);
    border-radius:4px;
    padding:7px 8px;
    text-align:center;
    font-size:12.5px;
    color:var(--ink-text-dim);
    min-height:18px;
  }
  .fight-slot.filled{
    border-style:solid;
    border-color:rgba(46,34,16,0.25);
    background:rgba(46,34,16,0.05);
    color:var(--ink-text);
    font-weight:600;
  }
  .fight-slot .emoji{ font-size:16px; margin-right:5px; }
  .fight-slot.bonus-slot{ border-color:var(--amber); }
  .fight-slot.filled.bonus-slot{ background:rgba(217,150,46,0.12); }
  .bonus-slot-tag{
    display:inline-block; font-family:var(--font-stamp); font-size:10px; font-weight:800;
    color:var(--stamp-dark); background:rgba(217,150,46,0.22);
    padding:1px 6px; border-radius:8px; letter-spacing:0.02em; vertical-align:middle;
  }

  .fight-spin-area{ text-align:center; }
  .fight-reveal{ font-size:60px; line-height:1; margin:6px 0; animation:fighterPop 0.4s ease; }
  @keyframes fighterPop{
    from{ opacity:0; transform:scale(0.6); }
    to{ opacity:1; transform:scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .fight-reveal{ animation:none; }
  }
  .fight-reveal-name{
    font-family:var(--font-stamp);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-bottom:14px;
  }
  .fight-assign-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }

  .stamina-bar{
    height:8px; border-radius:4px; background:rgba(46,34,16,0.28);
    overflow:hidden; margin:2px auto 0; max-width:160px;
  }
  .stamina-fill{ height:100%; background:#4a7c2a; transition:width 0.4s ease, background-color 0.4s ease; }
  .stamina-fill.ko{ background:#a8291c; }
  .gauntlet-vs{
    align-self:center; z-index:1;
    width:36px; height:36px; margin:-21px auto;
    border-radius:50%; background:var(--ink-text);
    border:3px solid var(--amber);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-stamp); font-weight:800; font-size:12px;
    color:var(--amber); box-shadow:0 2px 6px rgba(0,0,0,0.3);
    transform:rotate(-6deg);
  }
  .stamp-badge.gauntlet{
    color:var(--pine-dark);
    border-color:var(--pine-dark);
  }
  .fight-reveal.defeated{ filter:grayscale(1); opacity:0.45; }
  .ko-tag{
    display:inline-block; font-family:var(--font-stamp); font-size:10.5px; font-weight:800;
    color:var(--chalk); background:var(--stamp-dark); letter-spacing:0.04em;
    margin-left:3px; padding:2px 6px; border-radius:9px; vertical-align:middle;
  }
  .gauntlet-log{ margin:10px 0 16px; display:flex; flex-direction:column; gap:5px; }
  .gauntlet-log-item{ font-size:12px; color:var(--ink-text-dim); text-align:center; }
  .bout-rules{ margin:0 0 16px; }
  .bout-rules-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .bout-rule-item{
    font-size:12px; font-weight:600; text-align:center;
    padding:4px 6px; border-radius:8px;
  }
  .bout-rule-item.good{ color:var(--pine-dark); background:rgba(92,143,58,0.14); }
  .bout-rule-item.bad{ color:var(--stamp-dark); background:rgba(196,69,31,0.12); }

  .fight-result-score{
    font-family:var(--font-stamp);
    font-weight:800;
    font-size:44px;
    text-align:center;
    margin:6px 0;
    font-variant-numeric: tabular-nums;
  }
  .fight-result-banner{
    text-align:center;
    font-family:var(--font-stamp);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.05em;
    font-size:13px;
    padding:10px;
    border-radius:6px;
    margin:8px 0 16px;
  }
  .fight-result-banner.win{ background:rgba(92,143,58,0.18); color:var(--pine-dark); }
  .fight-result-banner.lose{ background:rgba(196,69,31,0.18); color:var(--stamp-dark); }

  .fight-overlay{
    position:fixed;
    inset:0;
    z-index:1000;
    background:#0a1a2e;
    color:#f4f0e8;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:28px 20px;
    overflow-y:auto;
  }
  .fight-overlay[hidden]{ display:none; }
  /* margin:auto (not justify-content:center) vertically centers this when
     it fits the viewport, but collapses to 0 - never negative - once the
     results screen grows taller than the screen, so the top (the score)
     stays scrollable into view instead of being clipped above an
     unreachable scroll position. */
  .fight-overlay-content{ max-width:440px; width:100%; text-align:center; margin:auto 0; }
  .ov-kicker{
    font-family:var(--font-stamp);
    font-size:11px;
    letter-spacing:0.25em;
    text-transform:uppercase;
    color:rgba(244,240,232,0.55);
    margin-bottom:6px;
  }
  .ov-score{
    font-family:var(--font-stamp);
    font-weight:800;
    font-size:64px;
    line-height:1;
    margin:6px 0;
    font-variant-numeric: tabular-nums;
  }
  .ov-score .of1000{ font-size:20px; color:rgba(244,240,232,0.55); }
  .ov-banner{
    font-family:var(--font-stamp);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:20px;
    margin:8px 0 18px;
    opacity:0;
    animation: ovBannerIn 0.35s ease 0.85s forwards;
  }
  .ov-banner.win{ color:#8fd66a; }
  .ov-banner.lose{ color:#ff6b52; }
  .ov-medal{
    font-size:13.5px;
    color:rgba(244,240,232,0.75);
    margin:-10px 0 12px;
  }
  .ov-medal b{ color:#f4f0e8; }
  .ov-percentile{
    font-size:12.5px;
    color:rgba(244,240,232,0.6);
    margin:-10px 0 16px;
  }
  @keyframes ovBannerIn{
    from{ opacity:0; transform:translateY(4px) scale(0.96); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .ov-banner{ animation:none; opacity:1; }
  }
  .confetti-canvas{
    position:fixed;
    inset:0;
    z-index:1001;
    pointer-events:none;
  }
  .ov-explain{
    text-align:left;
    font-size:14.5px;
    line-height:1.6;
    color:rgba(244,240,232,0.85);
    background:rgba(255,255,255,0.06);
    border-radius:8px;
    padding:14px 16px;
    margin-bottom:20px;
  }
  .ov-explain p{ margin:0 0 10px; }
  .ov-explain p:last-child{ margin-bottom:0; }
  .fight-pop{ opacity:0.65; font-weight:600; }
  .fight-power{
    opacity:0.85; font-weight:700; color:#ffcf4d;
    font-variant-numeric:tabular-nums;
  }
  .ov-matchup-tally{
    font-size:13px;
    color:rgba(244,240,232,0.75);
    text-align:center;
    margin-bottom:8px;
  }
  .ov-star{
    font-family:var(--font-stamp);
    font-size:12.5px;
    letter-spacing:0.02em;
    text-align:center;
    color:#ffcf4d;
    background:rgba(255,196,64,0.12);
    border-radius:6px;
    padding:7px 10px;
    margin-bottom:8px;
  }
  .fun-fact{
    font-size:13px;
    line-height:1.5;
    text-align:center;
    color:rgba(244,240,232,0.75);
    font-style:italic;
    margin:0 0 16px;
  }
  .ov-achievements{ margin:0 0 16px; }
  .ov-achievement-unlock{
    font-size:13px;
    line-height:1.5;
    text-align:center;
    color:#ffcf4d;
    background:rgba(255,196,64,0.14);
    border-radius:8px;
    padding:10px 12px;
    margin-bottom:8px;
  }
  .ov-achievement-unlock b{ font-family:var(--font-stamp); }
  .ov-records{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; text-align:left; }
  .ov-record-team-name{
    font-family:var(--font-stamp);
    font-size:10.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:rgba(244,240,232,0.55);
    margin-bottom:6px;
    text-align:center;
  }
  .ov-record-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    padding:5px 6px;
    border-radius:6px;
  }
  .ov-record-item.mvp{ background:rgba(255,196,64,0.14); }
  .ov-record-emoji{ font-size:15px; }
  .ov-record-name{ flex:1; display:flex; align-items:center; gap:4px; flex-wrap:wrap; color:rgba(244,240,232,0.85); }
  .ov-record-score{
    font-family:var(--font-stamp);
    font-weight:800;
    font-size:12px;
    font-variant-numeric:tabular-nums;
    color:rgba(244,240,232,0.7);
    white-space:nowrap;
  }
  .ov-record-item.mvp .ov-record-score{ color:#ffcf4d; }
  .mvp-tag{
    font-family:var(--font-stamp); font-size:9px; font-weight:800;
    letter-spacing:0.05em; color:#ffcf4d; border:1px solid #ffcf4d;
    border-radius:3px; padding:1px 4px;
  }
  .ov-btn{
    font-family:var(--font-stamp);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:13px;
    padding:14px 24px;
    border-radius:6px;
    cursor:pointer;
    margin:5px;
  }
  .ov-btn.primary{ background:#f4f0e8; color:#0a0a0a; border:2px solid #f4f0e8; }
  .ov-btn.secondary{ background:transparent; color:#f4f0e8; border:2px solid rgba(244,240,232,0.4); }

  .share-score-box{ margin:6px 0; }
  .share-score-text{
    display:block;
    width:100%;
    max-width:400px;
    margin:8px auto 0;
    font-family:var(--font-body);
    font-size:12.5px;
    line-height:1.4;
    color:#f4f0e8;
    background:rgba(255,255,255,0.08);
    border:1.5px solid rgba(244,240,232,0.35);
    border-radius:6px;
    padding:8px 10px;
    resize:none;
  }

  .criteria-link{
    background:none;
    border:none;
    padding:0;
    font-family:var(--font-body);
    font-size:12.5px;
    text-decoration:underline;
    color:var(--ink-text-dim);
    cursor:pointer;
    margin:2px 0 10px;
  }
  .fight-overlay .criteria-link{ color:rgba(244,240,232,0.7); }
  .criteria-box{
    font-size:12.5px;
    line-height:1.55;
    text-align:left;
    color:var(--ink-text-dim);
    background:rgba(46,34,16,0.06);
    border-radius:6px;
    padding:10px 12px;
    margin:0 0 14px;
  }
  .fight-overlay .criteria-box{
    color:rgba(244,240,232,0.8);
    background:rgba(255,255,255,0.06);
  }
  .trait-rules-list{
    display:flex; flex-direction:column; gap:8px; margin-top:8px;
    max-height:280px; overflow-y:auto; padding-right:6px;
  }
  .trait-rule-item{ line-height:1.45; }
  .trait-rule-mult{ font-family:var(--font-stamp); font-weight:800; opacity:0.75; }
  .rulebook-btn{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--font-stamp); font-size:11.5px; font-weight:700;
    letter-spacing:0.03em; text-transform:uppercase;
    color:var(--pine-dark); background:rgba(92,143,58,0.12);
    border:1.5px solid var(--pine); border-radius:20px;
    padding:7px 15px; margin:2px 0 14px; cursor:pointer;
  }
  .rulebook-btn:hover{ background:rgba(92,143,58,0.22); }
  .fight-overlay .rulebook-btn{
    color:var(--amber); background:rgba(217,150,46,0.14); border-color:var(--amber);
  }
  .fight-overlay .rulebook-btn:hover{ background:rgba(217,150,46,0.24); }

  .how-to-play-fab{
    position:fixed;
    top:14px;
    left:14px;
    z-index:1100;
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--font-stamp); font-size:11px; font-weight:700;
    letter-spacing:0.03em; text-transform:uppercase;
    color:var(--chalk); background:rgba(20,14,8,0.55);
    border:1.5px solid rgba(244,240,232,0.4); border-radius:20px;
    padding:7px 14px; cursor:pointer;
    backdrop-filter:blur(2px);
  }
  .how-to-play-fab:hover{ background:rgba(20,14,8,0.75); }

  .rules-overlay{
    position:fixed;
    inset:0;
    z-index:1200;
    background:rgba(10,6,3,0.55);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:0;
  }
  .rules-overlay[hidden]{ display:none; }
  .rules-sheet{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06), transparent 40%),
      var(--manila);
    border:1px solid var(--manila-edge);
    border-bottom:none;
    color:var(--ink-text);
    width:100%;
    max-width:520px;
    max-height:85vh;
    border-radius:14px 14px 0 0;
    padding:20px 22px 26px;
    overflow-y:auto;
    box-shadow:0 -10px 34px var(--manila-shadow);
    animation: rulesSheetUp 0.28s ease;
  }
  @keyframes rulesSheetUp{
    from{ transform:translateY(28px); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){
    .rules-sheet{ animation:none; }
  }
  .rules-sheet-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:8px;
  }
  .rules-sheet-title{
    font-family:var(--font-stamp); font-weight:800; text-transform:uppercase;
    letter-spacing:0.06em; font-size:15px; color:var(--ink-text);
  }
  .rules-sheet-close{
    background:none; border:none; font-size:22px; line-height:1; cursor:pointer;
    color:var(--ink-text-dim); padding:2px 6px;
  }
  .rules-sheet-close:hover{ color:var(--ink-text); }

  /* ------------------------------------------------------------------
     Private-beta fixes (appended 2026-07 during standalone extraction).
     Keep new rules in this block so the original prototype styles above
     remain byte-for-byte diffable against the source artifact.
     ------------------------------------------------------------------ */

  /* On narrow screens the fixed "How To Play" button sat on top of the
     masthead kicker. Extra top padding clears it without moving anything
     else. */
  @media (max-width:560px){
    body{ padding-top:58px; }
  }