/* Classic Blue, clean unplayed cards, and solid score cells. */
:root{--card-label:'Atkinson Hyperlegible',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
:root[data-theme=dark]{--btn:#F4EEDC;--btn-text:#142b44;--ink-2:#b9c8e2}
:root[data-theme=dark][data-palette=classic]{--ground:#0B2547;--paper:#10315E;--play-paper:#10315E;--chip:#1b3b62;--craft-card:#10315E;--sheet-glow:transparent;--sheet-edge:transparent;--line:#7796ba}
:root[data-theme=dark][data-palette=middle]{--ground:#132b48;--paper:#1d3c63;--play-paper:#1d3c63;--chip:#294b70;--craft-card:#1d3c63;--sheet-glow:transparent;--sheet-edge:transparent;--line:#7e9dbc}
:root[data-theme=dark][data-palette=bright]{--ground:#1c3655;--paper:#294b74;--play-paper:#294b74;--chip:#345882;--craft-card:#294b74;--sheet-glow:transparent;--sheet-edge:transparent;--line:#8aa9c9}
:root[data-theme] .daily-preview ol>li[data-family] .daily-shot{height:84px;min-height:84px;padding:9px 4px;gap:4px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--craft-border);border-radius:14px;background:var(--paper);box-shadow:none;color:var(--ink)}
:root[data-theme=light] .daily-preview ol>li[data-family] .daily-shot{background:#fffdf8;border-color:#d8d2c3}
:root[data-theme=dark] .daily-preview ol>li[data-family] .daily-shot{background:color-mix(in srgb,var(--ground) 75%,#26323e);border-color:color-mix(in srgb,var(--ink-3) 28%,transparent)}
:root[data-theme] .daily-preview .daily-shot>.not-played{display:none}
:root[data-theme] .daily-preview .daily-shot>.game-icon{width:22px;height:22px;color:var(--ink-2);flex-shrink:0}
:root[data-theme] .daily-preview .daily-shot>.daily-shot-name{display:flex;align-items:center;justify-content:center;max-width:100%;font:700 12px/1.1 var(--card-label);letter-spacing:0;text-transform:none;white-space:normal;hyphens:manual;overflow-wrap:normal;word-break:normal;color:var(--ink-2);min-height:2.2em}
:root[data-theme] .daily-preview .daily-shot>b{font:700 22px/1 var(--card-label);font-variant-numeric:tabular-nums}
:root[data-theme] .daily-preview .g-good{--solid-score:#5ba970}:root[data-theme] .daily-preview .g-ok{--solid-score:#d8b43f}:root[data-theme] .daily-preview .g-meh{--solid-score:#df8c41}:root[data-theme] .daily-preview .g-bad{--solid-score:#db7778}
:root[data-theme] .daily-preview ol>li[data-family][class*='g-'] .daily-shot{height:104px;min-height:104px;background:var(--solid-score);border-color:transparent;color:#142b40;box-shadow:none}
:root[data-theme] .daily-preview [class*='g-'] .daily-shot>:is(b,.game-icon,.daily-shot-name){color:#142b40}
:root[data-theme] .daily-preview .daily-shot::before,:root[data-theme] .daily-preview .daily-shot::after{content:none}
:root[data-theme] body[data-phase=results] .result-ticket .tile .nm{font:700 12px/1.1 var(--card-label);text-transform:none;white-space:normal;hyphens:manual;overflow-wrap:normal;word-break:normal;letter-spacing:0}
/* Only a perfect cell gains a small crown, a corner highlight and a raised edge. */
:root{--perfect-cell:linear-gradient(135deg,#f8e6ad 0%,#efd184 38%,#dfb75a 100%)}
:root[data-theme] body[data-phase=results] .result-ticket .tile.is-perfect,
:root[data-theme] .daily-preview ol>li[data-family].is-perfect .daily-shot{
  position:relative;overflow:visible;background:var(--perfect-cell)!important;color:#241a08;
  box-shadow:inset 0 1px 0 #fff9dcaa,inset 0 -2px 0 #76531740,0 2px 3px #0b172825;
}
:root[data-theme] .daily-preview .is-perfect .daily-shot>:is(b,.game-icon,.daily-shot-name){color:#241a08}
:root[data-theme] body[data-phase=results] .result-ticket .tile>.perfect-crown,
:root[data-theme] .daily-preview .daily-shot>.perfect-crown{width:20px;height:19px;top:-10px;right:5px;transform:rotate(10deg)}
:root[data-theme] .daily-preview .daily-shot>.perfect-crown svg{width:100%;height:100%}
.local-palette-setting{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 0;font-size:.88rem}.local-palette-setting select{margin-left:auto;background:var(--paper);color:var(--ink);border:1px solid var(--craft-border);border-radius:8px;min-height:44px;padding:8px}.local-palette-setting small{width:100%;color:var(--ink-3);font-size:.75rem}
#dlg-lab{padding:0;max-height:calc(100dvh - 32px)}#lab-body{padding:20px;min-width:0}#lab-body>h2{position:sticky;top:-20px;z-index:2;background:var(--paper);padding:14px 0;margin:-20px 0 10px;align-items:center}#lab-body .lab-tabs{display:flex;overflow-x:auto;gap:6px;scrollbar-width:thin;padding-bottom:4px}#lab-body .lab-tabs .btn{flex:0 0 auto;min-height:40px;padding:8px 12px;font:700 12px/1.2 var(--card-label);white-space:nowrap;word-break:normal}
#lab-choices .lab-pick{border-radius:12px;padding:14px;min-width:0;text-align:left}#lab-choices .lab-pick b{font:700 13px/1.15 var(--card-label);text-transform:none;white-space:normal;hyphens:manual}#lab-choices .lab-pick .bl{font-size:12px;line-height:1.35;color:var(--ink-2)}#lab-body .lab-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:420px){#lab-body .lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:359px){:root[data-theme] .daily-preview ol{gap:5px}:root[data-theme] .daily-preview ol>li[data-family] .daily-shot{padding-inline:3px}}
@media(min-width:600px){:root[data-theme] .daily-preview .daily-shot>.daily-shot-name{font-size:13px}}

/* Calm invitations and archive rows use the same type and spacing as the app. */
.card-cta>svg{order:2}
body[data-phase=intro] #controls .home-archive{min-height:44px;width:auto;align-self:center;padding:10px 16px;color:var(--ink-2);font:400 14px/1.4 var(--card-label);background:none;border:0}
.challenge-landing{max-width:470px;margin:30px auto 18px;text-align:center;padding:12px 8px;color:var(--ink)}
.challenge-edition{color:var(--ink-2);font-size:13px;letter-spacing:.06em}
.challenge-landing h2{font:700 clamp(30px,6vw,44px)/1.1 var(--display);margin:24px 0 0;text-wrap:balance}
.challenge-landing .challenge-total{display:flex;gap:10px;align-items:baseline;justify-content:center;margin:16px 0 24px}
.challenge-total strong{font:800 96px/1 var(--display)}.challenge-total span{color:var(--ink-2)}
.challenge-landing>p:last-of-type{font-size:16px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.challenge-landing>small{display:block;margin-top:14px;font-size:13px;color:var(--ink-3)}
.shot-challenge{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;width:100%;padding:10px 0;color:var(--ink-2);font:400 14px/1.35 var(--card-label);border-top:1px solid var(--craft-border)}
.shot-challenge>span{display:flex;gap:8px;align-items:baseline;justify-content:space-between;min-width:0;overflow-wrap:anywhere}
.shot-challenge b{color:var(--ink);font-size:17px}.shot-challenge>strong{grid-column:1/-1;font-weight:400;font-size:13px;color:var(--ink-2)}
.challenge-results{margin:18px 0 12px;padding:18px 0;border-top:1px solid var(--craft-border)}
.challenge-results h3{font:700 18px/1.4 var(--card-label);margin:0 0 12px;overflow-wrap:anywhere}
.challenge-columns,.challenge-results li{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(50px,80px);align-items:center;gap:10px}
.challenge-columns{font-size:12px;color:var(--ink-2)}.challenge-columns>span:not(:first-child){text-align:right;overflow-wrap:anywhere}
.challenge-results ol{list-style:none;padding:0;margin:6px 0 0}.challenge-results li{padding:8px 0;font-size:14px}
.challenge-results li>span{display:flex;align-items:center;gap:10px}.challenge-results li .game-icon{width:20px;height:20px;flex-shrink:0}.challenge-results li>b{text-align:right}
body.first-shot-offer #play{display:none}
#first-shot-offer{min-height:min(65dvh,540px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:440px;width:100%;margin:16px auto;padding:16px 0 28px}
.first-shot-icon{width:64px;height:64px;border-radius:50%;border:1px solid var(--craft-border);display:grid;place-items:center;background:var(--paper);color:var(--ink-2);margin-bottom:18px}
.first-shot-icon .game-icon{width:30px;height:30px}
#first-shot-offer h2{font:700 28px/1.2 var(--display);margin:0 0 14px}
#first-shot-offer h2:focus{outline:none}
#first-shot-offer p{font:400 16px/1.5 var(--card-label);color:var(--ink-2);max-width:340px;margin:0 0 26px}
.first-shot-actions{display:grid;gap:10px;width:100%}.first-shot-actions .btn{min-height:52px}
#dlg-archive{width:min(600px,calc(100% - 24px));max-height:calc(100dvh - 48px);padding:0;border-radius:18px}
.archive-page{padding:24px}.archive-page h2{display:flex;align-items:center;justify-content:space-between;font-size:32px;margin:0 0 12px}
.archive-intro{font-size:15px;line-height:1.45;color:var(--ink-2);margin-bottom:20px}
.archive-list{list-style:none;padding:0;margin:0 0 20px}.archive-list li+li{border-top:1px solid var(--craft-border)}
.archive-list button{display:grid;grid-template-columns:1fr auto 18px;align-items:center;gap:12px;width:100%;min-height:76px;padding:13px 0;border:0;background:none;color:var(--ink);font:400 15px/1.35 var(--card-label);text-align:left}
.archive-list button>span{display:grid;gap:3px}.archive-list button>span:nth-child(2){text-align:right}
.archive-list small{font-size:12px;color:var(--ink-2)}.archive-list strong{font-size:20px}.archive-list svg{width:16px;height:16px;color:var(--ink-2)}
.archive-end{color:var(--ink-3);font-size:13px;text-align:center}.you-archive{width:100%;margin-top:20px}
@media(max-width:359px){.archive-page{padding:18px}.challenge-landing{margin-top:10px}.challenge-total strong{font-size:80px}#first-shot-offer{margin:4px auto;min-height:0}#first-shot-offer h2{font-size:25px}}

/* ---------- v1: in-play progress strip shows scores, not bars ---------- */
/* Tiles need about 30 px more than the bars they replace. Viewports shorter than
   640 px keep the bars so Next never leaves the fold; taller ones give the field
   the difference instead of the button. */
@media (min-height:700px){
  body:is([data-phase="play"],[data-phase="reveal"]) .strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0}
  body[data-phase="reveal"] .strip{display:grid}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot,body:is([data-phase="play"],[data-phase="reveal"]) .slot.active,body:is([data-phase="play"],[data-phase="reveal"]) .slot.done{position:relative;height:32px;min-height:32px;padding:0 4px;border:1.5px solid var(--surface-border,var(--line));border-radius:6px;background:var(--surface-soft);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;overflow:hidden}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot>*{display:block}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot .slot-label{display:none}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot .em{font-size:0;line-height:1;color:var(--ink-2)}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot .em svg{width:15px;height:15px}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot.active{border-color:var(--ink);background:var(--paper)}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot.active::after{display:none}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot.done{border-color:transparent;color:var(--on-grade)}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot.done .em{display:none}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot.done .slot-score{position:static;font:800 14px/1 var(--font-display,var(--font-ui));letter-spacing:.01em;color:inherit}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot.g-good{background:var(--good)}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot.g-ok{background:var(--ok)}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot.g-meh{background:var(--meh)}
  body:is([data-phase="play"],[data-phase="reveal"]) .slot.g-bad{background:var(--bad)}
}
@media (min-height:700px) and (max-height:730px){
  body:is([data-phase="play"],[data-phase="reveal"]) .stage{max-width:min(100%,calc(100svh - 375px))}
}
@media (min-height:731px) and (max-height:960px){
  body:is([data-phase="play"],[data-phase="reveal"]) .stage{max-width:min(100%,calc(100svh - 380px))}
}
.shot-heading-pts{margin-left:auto;font:600 .82rem/1 var(--font-ui);color:var(--ink-2);white-space:nowrap}
/* On phones the heading has no room for the points without wrapping (which would push Next below the fold); the score tiles carry them there. */
@media (max-width:480px){.shot-heading-pts{display:none}}

/* ---------- v1: results header on narrow phones ---------- */
@media (max-width:360px){
  .res-head{flex-direction:column;align-items:stretch;gap:6px}
  .res-head .total{font-size:60px;text-align:left;line-height:.95}
  .res-head .rank{font-size:1.05rem}
  .result-ticket .tiles .tile{min-height:78px}
  .result-review-hint{margin:6px 0 0}
}
.profile-stat-note{margin:6px 2px 0;font-size:.82rem;color:var(--ink-2)}