/* BOXART — a daily game about Steam games. */

:root{
  --bg:#080B14; --panel:#111726; --tile:#1A2133; --tile-hi:#222B41; --line:#232C42;
  --ink:#E7ECF7; --muted:#7C879F; --dim:#5A6580;
  --green:#4FD1A5; --green-ink:#062018; --green-bg:#1E5B4C;
  --gold:#E9B23C;  --gold-ink:#221703;
  --accent:#6FD3F7; --accent-ink:#04121a;
  --red:#F2617A;
  --radius:14px;
  --shadow:0 24px 50px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.sheet-open{overflow:hidden}
body{
  background:radial-gradient(1100px 620px at 50% -12%,#14203a 0%,transparent 62%),var(--bg);
  background-attachment:fixed;
  color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;min-height:100vh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
svg{display:block}
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Flat dark gradients read as unfinished because they have no surface.
   A little fixed noise gives every panel something to catch. */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- the landing gate ---------------------------------------------- */

.hero{text-align:center;padding:26px 0 8px;position:relative}
.boxart{
  width:104px;height:auto;margin:0 auto 18px;
  filter:drop-shadow(0 18px 34px rgba(111,211,247,.22));
  /* Slow and shallow on purpose. At 5.5s with a 9px rise and a 4-degree swing
     this read as a wobble that kept pulling the eye back; the motion should
     be something you notice only if you look for it. */
  animation:float 13s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-5px) rotate(1deg)}
}
html.still .boxart{animation:none}
@media (prefers-reduced-motion:reduce){.boxart{animation:none}}
.wordmark{
  font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:.16em;
  font-size:clamp(30px,8.4vw,52px);margin:0;line-height:1;
}
.wordmark b{
  color:var(--accent);
  text-shadow:0 0 30px rgba(111,211,247,.45);
}
.tagline{color:var(--muted);font-size:15px;margin:14px 0 0}
.hero-date{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--dim);
  margin:6px 0 24px;letter-spacing:.04em;
}
.hero-date span{color:var(--gold);white-space:nowrap}

.play{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:.1em;
  font-size:17px;text-transform:uppercase;
  padding:15px 42px;border-radius:12px;
  color:#04121a;background:linear-gradient(160deg,#8FE0FA,#3FBEEA 62%,#26A9DC);
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 12px 30px rgba(63,190,234,.34);
  transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .18s,filter .15s;
}
.play:hover{filter:brightness(1.06);box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 16px 40px rgba(63,190,234,.46);transform:translateY(-2px)}
.play:active{transform:translateY(0) scale(.985)}

.streakchip{
  display:inline-block;margin-top:16px;padding:6px 14px;border-radius:999px;
  background:rgba(233,178,60,.12);border:1px solid rgba(233,178,60,.32);
  color:var(--gold);font-size:13px;font-weight:600;
}
.hero-stats{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--dim);
  margin:14px 0 0;letter-spacing:.03em;
}

/* how it works */
.how{margin-top:52px}
.how h2{
  text-align:center;margin:0 0 24px;font-size:12px;letter-spacing:.22em;
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:14px;
}
.how h2::before,.how h2::after{content:"";flex:1;height:1px;background:var(--line)}

.step{display:flex;gap:16px;margin-bottom:22px;align-items:flex-start}
.step .num{
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:26px;
  color:var(--accent);opacity:.5;line-height:1;flex:none;width:38px;
}
.stepbody{flex:1;min-width:0}
.stepbody h3{font-family:'Chakra Petch',sans-serif;font-size:17px;margin:0 0 6px;font-weight:600}
.stepbody p{color:#AAB4C8;font-size:14px;line-height:1.6;margin:0 0 8px}
.stepbody b.cg{color:var(--green)}
.stepbody b.cy{color:var(--gold)}

.fauxsearch{
  display:flex;align-items:center;gap:10px;margin-top:10px;
  background:var(--panel);border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;color:var(--muted);font-size:15px;
}
.fauxsearch span{color:var(--ink)}
.fauxsearch i{
  display:inline-block;width:1.5px;height:15px;background:var(--accent);
  margin-left:2px;vertical-align:-2px;animation:caret 1.1s step-end infinite;
}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}

.demolabel{
  text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin:26px 0 10px;
}
.demolabel b{color:var(--muted)}
/* The demo is real output, so it must not react like a live board. */
.demo{pointer-events:none}
.demo .card{margin-bottom:10px}

/* ---- chrome -------------------------------------------------------- */

header{
  display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;background:rgba(8,11,20,.86);backdrop-filter:blur(14px);
}
.brand{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:.14em;font-size:15px}
.brand b{color:var(--accent)}
.puzzle-no{margin:0 auto;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--gold);letter-spacing:.06em;white-space:nowrap}
.icons{display:flex;gap:4px}
.icons button{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);transition:background .15s,color .15s}
.icons button:hover{background:var(--tile);color:var(--ink)}

/* ---- shell and ad rails ---------------------------------------------
   The rails hold their width from first paint, so a late-arriving creative
   drops into space that was already committed and the board never moves.
   Below 1780px there isn't room for a 300px rail either side of the wider
   two-column game
   column without squeezing the game, so they're removed outright rather
   than shrunk — a 120px-wide ad is worth nothing to anyone. */

.shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1180px) minmax(0,1fr);
  align-items:start;gap:0;
  max-width:1920px;margin:0 auto;
}
main{grid-column:2;width:100%;max-width:1180px;margin:0 auto;padding:18px 18px 90px}
#landing{width:100%;max-width:820px;margin:0 auto}

.rail{
  position:sticky;top:78px;
  display:flex;justify-content:center;
  padding:18px 12px;min-width:0;
}
.rail-l{grid-column:1}
.rail-r{grid-column:3}
.adslot{width:300px;height:600px;flex:none}

@media (max-width:1779px){
  .shell{display:block;max-width:none}
  .rail{display:none}
  main{grid-column:auto}
}

/* Leaderboard: only between 1024 and the width where full rails appear. */
.ad-leader{display:none;width:100%;max-width:728px;height:90px;margin:0 auto 16px}
@media (min-width:1024px) and (max-width:1779px){
  .ad-leader{display:block}
}
html:not(.ads-on):not(.ads-ph) .ad-leader{display:none}

/* Phone / iPad-portrait anchor. Fixed to the bottom, and `main` carries
   matching bottom padding so the banner can never sit over the board or the
   iOS home indicator. */
.ad-anchor{display:none}
@media (max-width:1023px){
  .ad-anchor{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(8,11,20,.94);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    padding:5px 0 calc(5px + env(safe-area-inset-bottom,0px));
  }
  .ad-anchor .adslot{width:320px;height:50px;margin:0 auto}
  main{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
  /* Keep the toast clear of the banner. */
  .toast{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}
/* Nothing configured and placeholders off: no empty furniture on a phone. */
html:not(.ads-on):not(.ads-ph) .ad-anchor{display:none}
html:not(.ads-on):not(.ads-ph) main{padding-bottom:90px}

/* House placeholder while no network is configured. */
.ad-ph{
  width:100%;height:100%;border:1px dashed var(--line);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,rgba(20,27,44,.42),transparent);
  color:var(--dim);font-family:'JetBrains Mono',monospace;
}
.ad-ph-mark{font-size:11px;letter-spacing:.24em;opacity:.65}
.ad-ph-size{font-size:13px;color:var(--muted)}
.ad-ph-note{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.5}
/* Short placements put their label on one line instead of stacking. */
.ad-ph.flat{flex-direction:row;gap:12px}
.ad-ph.flat .ad-ph-size{font-size:12px}

/* State hooks set by ads.js. A live network paints its own creative, so the
   slot loses the dashed placeholder chrome; with no network the rails keep a
   faint outline so the reserved space is visible while designing. */
html.ads-on .adslot{border:none;background:none}
html.ads-ph .rail{opacity:.55}

.boot{display:flex;flex-direction:column;align-items:center;gap:14px;padding:70px 0;color:var(--muted);font-size:14px}
.boot-spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
.boot.error{max-width:480px;margin:0 auto;text-align:center}
.boot-detail{max-width:42ch;margin:0;line-height:1.6}
.boot-retry{margin-top:4px}
@keyframes spin{to{transform:rotate(360deg)}}
.boot p{margin:0}
.boot.error{color:var(--red)}

/* ---- control bar --------------------------------------------------- */

.game-layout{
  display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);
  gap:18px;align-items:start;
}
.play-panel{position:sticky;top:82px;min-width:0}
.history-panel{
  min-width:0;max-height:calc(100svh - 100px);overflow-y:auto;
  overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 5px 8px;
}
.history-head{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:2px 2px 11px;
  background:linear-gradient(var(--bg) 72%,transparent);
  font:700 11px/1 'JetBrains Mono',monospace;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
}
.history-head b{color:var(--accent);font-size:10.5px;letter-spacing:.08em}

.bar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ghost{border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;transition:border-color .15s,color .15s;white-space:nowrap}
.ghost:hover:not(:disabled){border-color:var(--accent);color:var(--ink)}
.ghost:disabled{opacity:.35;cursor:not-allowed}
.counter{flex:1;text-align:center;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted)}
.counter b{color:var(--ink)}

.pips{display:flex;gap:5px;justify-content:center;margin-bottom:18px}
.pip{
  width:100%;max-width:44px;height:6px;border-radius:3px;background:var(--tile);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  transition:background .3s,box-shadow .3s;
}
.pip.used{background:linear-gradient(180deg,#5A6580,#48526B)}
.pip.win{background:var(--green);box-shadow:0 0 12px rgba(79,209,165,.6)}
.pip.lost{background:var(--red);box-shadow:0 0 12px rgba(242,97,122,.5)}

/* Steam's title-free library hero is a clue in its own right. Blur, colour and crop
   resolve together; the early overscan keeps softened edges from revealing
   the composition too soon. */
.capsule-clue{
  margin:0 0 16px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#111A2B,#0C111D);
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset,0 10px 24px rgba(0,0,0,.26);
}
.capsule-window{
  height:clamp(116px,19vw,152px);position:relative;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(111,211,247,.11),transparent 58%),
    linear-gradient(rgba(111,211,247,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(111,211,247,.035) 1px,transparent 1px);
  background-size:auto,24px 24px,24px 24px;
}
.capsule-window::after{content:"";position:absolute;inset:10px;border:1px solid rgba(111,211,247,.08);border-radius:9px;pointer-events:none}
.capsule-window img{
  position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(var(--capsule-scale,1.18));
  filter:blur(var(--capsule-blur,46px)) saturate(var(--capsule-saturation,0)) brightness(var(--capsule-brightness,.44));
  transition:filter .72s cubic-bezier(.2,.8,.3,1),transform .72s cubic-bezier(.2,.8,.3,1),opacity .25s;
  will-change:filter,transform;
}
.capsule-clue.ready .capsule-window img{opacity:1}
.capsule-scan{
  position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(111,211,247,.08) 4px);
}
.capsule-readout{
  display:flex;align-items:center;justify-content:space-between;padding:8px 12px;
  border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}
.capsule-readout b{font-size:10px;color:var(--accent);font-weight:700}

/* ---- win celebration ------------------------------------------------
   A solve should feel like something happened. Cheap DOM confetti: a few
   dozen absolutely-positioned chips that fall and clean themselves up. */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.confetti i{
  position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;
  animation:fall linear forwards;
}
@keyframes fall{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:1}
  100%{transform:translate3d(var(--dx),102vh,0) rotate(var(--spin));opacity:.15}
}
html.still .confetti{display:none}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}

/* ---- search -------------------------------------------------------- */

.search-wrap{position:relative;margin-bottom:20px}
.search{display:flex;align-items:center;gap:10px;background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);padding:0 14px;transition:border-color .18s,box-shadow .18s}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(111,211,247,.09)}
.search.done{border-color:var(--green)}
.search .mag{color:var(--muted);flex:none}
#guess{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);padding:16px 0;font-size:16px}
#guess::placeholder{color:var(--muted)}
#guess:disabled{color:var(--green);-webkit-text-fill-color:var(--green);opacity:1}
.search.done #guess::placeholder{color:var(--green)}

.drop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.drop button{display:flex;width:100%;align-items:center;gap:11px;padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.25}
.drop button:last-child{border-bottom:none}
.drop button:hover,.drop button.sel{background:var(--tile)}
.drop .cap{width:62px;height:24px;flex:none;border-radius:3px;background:var(--tile);object-fit:cover}
.drop .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop .yr{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);flex:none}
.drop mark{background:none;color:var(--accent);font-weight:600}
.drop .none{padding:14px 12px;color:var(--muted);font-size:14px;text-align:center}

/* ---- hints --------------------------------------------------------- */

.hints{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.hint{background:linear-gradient(90deg,rgba(233,178,60,.14),transparent);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:10px 14px;font-size:14px;animation:rise .3s cubic-bezier(.2,.8,.3,1) both}
.hint span{color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;display:block;margin-bottom:2px}

/* ---- guess cards --------------------------------------------------- */

/* A top-edge highlight is what separates a panel that looks like a surface
   from one that looks like a coloured rectangle. */
.card{
  background:linear-gradient(180deg,#141B2C,#101624);
  border:1px solid var(--line);border-radius:0 0 16px 16px;padding:14px;margin:0;
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset,0 10px 26px rgba(0,0,0,.34);
  animation:rise .32s cubic-bezier(.2,.8,.3,1) both;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s;
  position:relative;z-index:2;
}
#cards .card:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 16px 34px rgba(0,0,0,.42)}
.card.win{
  border-color:var(--green);
  box-shadow:0 0 0 1px var(--green),0 0 46px rgba(79,209,165,.22),0 10px 26px rgba(0,0,0,.34);
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.guess-entry{
  margin-bottom:10px;border-radius:14px;background:rgba(17,23,38,.72);
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset;
}
.guess-entry>summary{
  min-height:48px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:14px;cursor:pointer;list-style:none;user-select:none;
  transition:border-color .15s,background .15s;
}
.guess-entry>summary::-webkit-details-marker{display:none}
.guess-entry>summary:hover{border-color:#34405c;background:var(--panel)}
.guess-entry[open]>summary{
  border-radius:14px 14px 0 0;border-bottom-color:transparent;
  background:var(--panel);
}
.guess-entry.latest>summary{border-color:rgba(111,211,247,.42)}
.guess-no{
  font:700 10px/1 'JetBrains Mono',monospace;color:var(--gold);
  background:rgba(233,178,60,.1);padding:5px 6px;border-radius:6px;
}
.guess-name{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 14px/1.2 'Chakra Petch',sans-serif;color:var(--ink);
}
.guess-dots{display:grid;grid-template-columns:repeat(5,6px);gap:3px}
.guess-dots i{width:6px;height:6px;border-radius:2px;background:var(--dim)}
.guess-dots i.g{background:var(--green)}
.guess-dots i.y{background:var(--gold)}
.guess-dots i.u{background:transparent;border:1px solid var(--dim)}
.guess-chevron{color:var(--dim);transition:transform .18s}
.guess-entry[open] .guess-chevron{transform:rotate(180deg)}
.top{display:grid;grid-template-columns:112px minmax(0,1fr);gap:13px;align-items:stretch}

.art{
  width:112px;height:100%;min-height:232px;border-radius:9px;overflow:hidden;
  position:relative;background:var(--tile);
  box-shadow:0 8px 20px rgba(0,0,0,.5);
}
.art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  opacity:0;transition:opacity .25s;
}
.art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.055) inset;
  background:linear-gradient(to bottom,transparent 72%,rgba(4,7,13,.22));
}
.art img.on{opacity:1}
.art .fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:8px}
.art .fallback b{font-family:'Chakra Petch',sans-serif;font-size:15px;line-height:1.1}
.art .fallback i{font-family:'JetBrains Mono',monospace;font-size:9px;opacity:.7;font-style:normal}

.meta{flex:1;min-width:0}
.title{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:19px;line-height:1.18;margin:0 0 9px;overflow-wrap:anywhere}
.card.win .title{color:var(--green)}

.pills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.pill{font-size:11.5px;padding:4px 9px;border-radius:999px;background:var(--tile);color:var(--muted)}
.pill.g{background:var(--green);color:var(--green-ink);font-weight:600}
/* Gold means the answer carries a tag from the same family — see TAG_CLUSTERS. */
.pill.y{background:var(--gold);color:var(--gold-ink);font-weight:600}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.t{background:var(--tile);border-radius:10px;padding:8px 10px;min-height:56px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.t .k{font-size:9px;letter-spacing:.11em;color:var(--muted);text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-bottom:3px}
.t .v{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.t .v small{font-size:11px;color:var(--muted);font-weight:500}
/* Matched tiles get a gradient and a soft outward glow so a hit reads as
   lit-up rather than merely filled in. */
.t.g{
  background:linear-gradient(165deg,#5FE0B4,#3BBE93);color:var(--green-ink);
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 4px 16px rgba(79,209,165,.28);
}
.t.g .k,.t.g .v small{color:rgba(6,32,24,.68)}
.t.y{
  background:linear-gradient(165deg,#F3C258,#DDA22C);color:var(--gold-ink);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 4px 16px rgba(233,178,60,.26);
}
.t.y .k,.t.y .v small{color:rgba(34,23,3,.66)}
/* Steam has no value for this game — visibly different from "no match", so a
   dash never reads as a clue you can act on. */
.t.unk{background:repeating-linear-gradient(135deg,var(--tile),var(--tile) 6px,#161D2E 6px,#161D2E 12px)}
.t.unk .v{color:var(--dim)}
/* Company names are long and proportional type sets them far better than the
   mono face the numeric tiles use — "Coffee Stain Publishing" wrapped to three
   lines in mono and fits in two here. */
.t.txt .v{font-family:Inter,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:0}
.t.wide{grid-column:1 / -1}
.t.wide .v{font-family:Inter,sans-serif;font-size:14px;font-weight:600}
.arrow{font-size:13px;opacity:.85}


/* ---- empty board ---------------------------------------------------- */

.board-empty{
  text-align:center;padding:44px 20px 52px;
  border:1px dashed var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(20,27,44,.5),transparent);
}
.be-icon{
  width:44px;height:44px;margin:0 auto 16px;border-radius:12px;
  display:grid;place-items:center;color:var(--dim);
  background:var(--tile);box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.be-icon svg{width:21px;height:21px}
.be-lead{font-family:'Chakra Petch',sans-serif;font-size:17px;margin:0 0 6px;color:var(--ink)}
.be-sub{color:var(--muted);font-size:13.5px;margin:0;line-height:1.55;max-width:42ch;
  margin-left:auto;margin-right:auto}
.be-seed{
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
}
.be-seed>span{
  width:100%;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-bottom:4px;
}
.seed{
  font-size:13px;padding:7px 13px;border-radius:999px;
  background:var(--tile);border:1px solid var(--line);color:#C3CBDC;
  transition:border-color .15s,color .15s,transform .12s;
}
.seed:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}

/* ---- the reveal ---------------------------------------------------- */

.end{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:16px;animation:rise .4s cubic-bezier(.2,.8,.3,1) both}
.end.won{border-color:var(--green)}
.end .hero{position:relative;aspect-ratio:16/7;background:var(--tile);display:grid;place-items:center;overflow:hidden}
.end .hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.end .hero img.bg.on{opacity:1}
.end .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,23,38,.96) 2%,rgba(17,23,38,.35) 46%,rgba(17,23,38,.15) 100%)}
.end .hero img.logo{position:relative;z-index:2;max-width:56%;max-height:62%;object-fit:contain;opacity:0;transition:opacity .5s .15s;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.end .hero img.logo.on{opacity:1}
.end .body{padding:18px 20px 20px;text-align:center}
.end h2{font-family:'Chakra Petch',sans-serif;font-size:21px;margin:0 0 6px}
.end .answer{font-family:'Chakra Petch',sans-serif;font-size:24px;font-weight:700;margin:0 0 4px;line-height:1.15}
.end.won .answer{color:var(--green)}
.end p{color:var(--muted);font-size:14px;margin:0 0 14px;line-height:1.5}
.end p b{color:var(--ink)}
.grid-share{font-size:15px;line-height:1.5;letter-spacing:.06em;margin:0 0 14px;font-family:'JetBrains Mono',monospace}
.actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.btn{padding:11px 20px;border-radius:10px;font-weight:600;font-size:14px;background:var(--accent);color:var(--accent-ink);transition:transform .12s,filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.97)}
.btn.alt{background:var(--tile);color:var(--ink);border:1px solid var(--line)}
.storelink{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12.5px;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.storelink:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---- sheets -------------------------------------------------------- */

.scrim{position:fixed;inset:0;background:rgba(4,6,12,.72);backdrop-filter:blur(4px);z-index:60;display:grid;place-items:end center}
.sheet{background:var(--panel);border:1px solid var(--line);border-bottom:none;border-radius:20px 20px 0 0;width:100%;max-width:620px;max-height:88vh;overflow-y:auto;padding:22px 20px 34px;position:relative;animation:up .28s cubic-bezier(.2,.8,.3,1) both}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet h2{font-family:'Chakra Petch',sans-serif;font-size:20px;margin:0 0 4px}
.sheet h3{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;margin:22px 0 8px}
.sheet p,.sheet li{font-size:14px;line-height:1.6;color:#C3CBDC}
.sheet ul{padding-left:18px;margin:0}
.sheet li{margin-bottom:7px}
.sheet li b{color:var(--ink)}
.close{position:absolute;top:14px;right:16px;color:var(--muted)}
.close:hover{color:var(--ink)}
.key{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px}
.sw{width:22px;height:22px;border-radius:6px;flex:none}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 4px}
.stat{background:var(--tile);border-radius:12px;padding:12px 6px;text-align:center}
.stat .n{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700}
.stat .l{font-size:10px;color:var(--muted);margin-top:2px;line-height:1.3}
.dist{display:flex;flex-direction:column;gap:5px;margin-top:14px}
.row{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px}
.row .lbl{width:16px;color:var(--muted);text-align:right}
.row .bar2{background:var(--tile);border-radius:4px;height:20px;display:flex;align-items:center;justify-content:flex-end;padding:0 7px;min-width:26px;transition:width .4s}
.row .bar2.hi{background:var(--green);color:var(--green-ink);font-weight:700}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.toggle:last-of-type{border-bottom:none}
.toggle small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.tg{width:46px;height:27px;border-radius:999px;background:var(--tile);position:relative;flex:none;transition:background .18s}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--muted);transition:transform .18s,background .18s}
.tg.on{background:var(--green-bg)}
.tg.on::after{transform:translateX(19px);background:var(--green)}
.foot{text-align:center;color:var(--muted);font-size:11.5px;line-height:1.6;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}

/* ---- the staggered reveal ------------------------------------------
   Each clue on a freshly-played guess flips in on its own beat rather than
   the whole card landing at once. The delay lives in a --d custom property
   set per element, so the order is decided in JS alongside the clue table. */

/* staggered reveal targets */
.card.fresh .pill,
.card.fresh .t{
  animation:flipIn .5s cubic-bezier(.4,0,.2,1) both;
  animation-delay:var(--d,0ms);
  backface-visibility:hidden;
}
@keyframes flipIn{
  from{transform:perspective(600px) rotateX(-92deg);opacity:0}
  60%{opacity:1}
  to{transform:none;opacity:1}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* The reveal is theatre, not information — anyone who has asked for less
   motion, in the OS or in settings, gets the card immediately. */
html.still .card.fresh .pill,
html.still .card.fresh .t{animation:none}
@media (prefers-reduced-motion:reduce){
  .card.fresh .pill,.card.fresh .t{animation:none !important}
}

/* ---- hint picker ---------------------------------------------------- */

.hintpick{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.hintopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--tile);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  transition:border-color .15s,background .15s}
.hintopt:hover:not(:disabled){border-color:var(--gold);background:var(--tile-hi)}
.hintopt:disabled{opacity:.45;cursor:not-allowed}
.hintopt .ic{font-size:20px;flex:none;line-height:1}
.hintopt .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.hintopt .tx b{font-size:14.5px;font-weight:600}
.hintopt .tx small{color:var(--muted);font-size:12px}
.hintopt.known .tx b{color:var(--muted);font-weight:500}

.countdown{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted)}

/* ---- colourblind palette -------------------------------------------
   Green/gold is the worst possible pair for deuteranopia, which is also the
   most common form. Blue/orange separates cleanly for every common type. */

html.cb{--green:#4C9AFF;--green-ink:#04121f;--green-bg:#1B3A63;--gold:#FF8A3D;--gold-ink:#2A1203}

/* ---- compact cards -------------------------------------------------- */

html.compact .card{padding:11px;margin-bottom:10px}
html.compact .top{grid-template-columns:60px minmax(0,1fr)}
html.compact .art{width:60px;height:90px;min-height:0;align-self:start}
html.compact .title{font-size:16px;margin-bottom:7px}
html.compact .t{min-height:46px;padding:6px 8px}
html.compact .t .v{font-size:13px}
html.compact .pills{margin-bottom:7px}
html.compact .pill{font-size:11px;padding:3px 7px}

/* ---- share sheet ---------------------------------------------------- */

.sharegrid{
  font-family:'JetBrains Mono',monospace;font-size:15px;line-height:1.45;letter-spacing:.06em;
  text-align:center;background:var(--tile);border-radius:12px;padding:14px;margin:14px 0 18px;
}
.sharebtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.sharebtn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 14px;border-radius:11px;font-size:14px;font-weight:600;
  background:var(--brand,var(--tile));color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;
  transition:transform .12s,filter .15s;
}
.sharebtn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.sharebtn:active{transform:translateY(0) scale(.98)}
.sharebtn.copy{background:var(--tile);color:var(--ink);border:1px solid var(--line)}
.sharenote{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.55}

/* ---- accounts -------------------------------------------------------- */

.signin p{margin:0 0 12px}
.oauth{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:12px 15px;margin-bottom:8px;border-radius:11px;font-size:14.5px;font-weight:600;
  background:var(--tile);border:1px solid var(--line);color:var(--ink);
  transition:border-color .15s,transform .12s,background .15s;
}
.oauth:hover{border-color:var(--brand);background:var(--tile-hi);transform:translateY(-1px)}
.oauth svg{color:var(--brand);flex:none}
/* X's mark is pure black and vanishes on this background. */
.oauth[data-provider="twitter"] svg{color:var(--ink)}
.acct-fine{font-size:12px;color:var(--dim);margin-top:12px;line-height:1.5}

.acct{display:flex;align-items:center;gap:12px;background:var(--tile);border-radius:12px;padding:12px 14px}
.acct-av{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;background:var(--line)}
.acct-av.ph{display:grid;place-items:center;font-weight:700;font-size:17px;color:var(--accent)}
.acct-who{flex:1;min-width:0}
.acct-who b{display:block;font-size:14.5px}
.acct-who small{color:var(--muted);font-size:12px}
.acct-off{background:var(--tile);border-radius:12px;padding:13px 15px}
.acct-off p{margin:0 0 7px;font-size:13.5px}
.acct-off p:last-child{margin-bottom:0}
.acct-off code{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--accent)}

/* ---- store links ----------------------------------------------------- */

.storelinks{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.storelink.buy{color:var(--gold)}
.storelink.buy:hover{color:var(--gold);border-bottom-color:var(--gold)}
/* Disclosure has to be legible, not hidden in the noise. */
.affnote{font-size:11.5px;color:var(--dim);margin:10px 0 0;line-height:1.5}

/* ---- toast --------------------------------------------------------- */

.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:80;
  background:var(--tile);border:1px solid var(--line);border-radius:10px;
  padding:10px 18px;font-size:14px;box-shadow:var(--shadow);animation:rise .2s both}

/* ---- responsive ---------------------------------------------------- */

@media (max-width:899px){
  main{max-width:820px;padding:14px 14px 90px}
  .game-layout{display:block}
  .play-panel{position:static}
  .history-panel{max-height:none;overflow:visible;padding:0}
  .history-head{position:static;padding:1px 2px 10px;background:none}
  .capsule-window{height:clamp(100px,18vw,136px)}
  .search-wrap{margin-bottom:14px}
  .board-empty{padding:30px 18px 34px}
  .top{grid-template-columns:96px minmax(0,1fr)}
  .art{width:96px;min-height:210px}
}

@media (max-width:619px){
  main{padding:10px 10px 74px}
  .bar{margin-bottom:8px}
  .ghost{padding:7px 10px;font-size:12px}
  .counter{font-size:12px}
  .pips{margin-bottom:11px;gap:4px}
  .capsule-clue{margin-bottom:11px;border-radius:13px}
  .capsule-window{height:96px}
  .capsule-window::after{inset:7px}
  .capsule-readout{padding:7px 9px;font-size:9px}
  .search{border-radius:12px;padding:0 12px}
  #guess{padding:13px 0;font-size:16px}
  .history-head{padding-top:2px}
  .guess-entry{margin-bottom:8px}
  .guess-entry>summary{min-height:44px;padding:8px 9px;gap:8px}
  .guess-dots{grid-template-columns:repeat(5,5px);gap:2px}
  .guess-dots i{width:5px;height:5px}
  .card{padding:10px;border-radius:0 0 13px 13px}
  .top{grid-template-columns:70px minmax(0,1fr);gap:10px}
  .art{width:70px;height:105px;min-height:0;align-self:start}
  .t{min-height:48px;padding:7px 8px}
  .board-empty{padding:24px 14px 26px}
  .be-icon{margin-bottom:12px}
  .be-seed{margin-top:16px;padding-top:15px}
}

@media (min-width:900px) and (max-height:800px){
  .hero{padding-top:8px}
  .boxart{width:76px;margin-bottom:10px}
  .tagline{margin-top:10px}
  .hero-date{margin-bottom:16px}
  .how{margin-top:30px}
}

@media (min-width:620px){
  /* Nine clues, so three columns lands a clean 3x3. */
  .tiles{grid-template-columns:repeat(3,1fr)}
  .t.wide{grid-column:span 3}
}
/* Two columns can't divide nine evenly. Rather than leave a half-width tile
   stranded on the last row, let the odd one out run the full width. */
@media (max-width:619px){
  .tiles > .t:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:480px){
  .top{grid-template-columns:68px minmax(0,1fr)}
  .art{width:68px;height:102px;min-height:0}
  .title{font-size:17px}
  .t .v{font-size:14px}
  .puzzle-no{font-size:12px}
}
/* Very narrow phones: the brand, the puzzle number and three icons stop
   fitting on one line. The number is on the landing anyway, so it goes first
   rather than wrapping the header to two lines. */
@media (max-width:400px){
  header{gap:6px;padding:12px 12px}
  .brand{font-size:14px;letter-spacing:.1em}
  .puzzle-no{display:none}
  .icons button{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}