/* Deflect TD: one colour pair, Tangerine and ink, flat like Boom Room. */
@font-face { font-family: "SG"; src: url("/fonts/space-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SG"; src: url("/fonts/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --field: #ff6a13; --ink: #111111; --shade: #e85a06; --deep: #2a0f00; --paper: #fff3e6; --act: #111111; --hud: 64px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--field); color: var(--ink); font-family: "SG", system-ui, sans-serif; font-weight: 500; -webkit-tap-highlight-color: transparent; }
body { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
.stage { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---- the wordmark ---- */
.mark { display: flex; flex-direction: column; align-items: flex-start; line-height: 0.86; font-weight: 700; letter-spacing: -0.02em; }
.mark b { font-size: var(--mk, 88px); }
.mark .tiles { display: flex; gap: 0.12em; margin-bottom: 0.12em; font-size: calc(var(--mk, 88px) * 0.62); }
.mark .tiles i { font-style: normal; background: var(--ink); color: var(--field); width: 1.25em; height: 1.25em; display: grid; place-items: center; border-radius: 0.14em; }
.mark .tiles i:last-child { animation: bonk 1.6s infinite; }
@keyframes bonk { 0%, 60%, 100% { transform: none; } 70% { transform: translateX(0.12em) scaleX(0.9); } }

/* ---- TV lobby: a column on the left (join + how), the board on the right under the level card ---- */
.tv .lobby { position: fixed; left: 0; top: 0; bottom: 0; width: 34vw; padding: 3.4vh 2.4vw; display: flex; flex-direction: column; gap: 2.2vh; z-index: 2; --mk: min(6.4vw, 10vh); }
.tv .lobby .how { margin: 0; font-size: min(1.4vw, 2.4vh); line-height: 1.3; }
.tv .legend { height: 21vh; width: auto; aspect-ratio: 520 / 300; align-self: flex-start; }
.tv .pick { position: fixed; left: 36vw; right: 2vw; top: 3.4vh; height: 15vh; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 1.6vh 1.6vw; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; column-gap: 1.4vw; z-index: 2; }
.tv .pick .lv { font-size: min(1.2vw, 2vh); opacity: 0.7; font-weight: 700; }
.tv .pick .nm { font-size: min(3vw, 5.4vh); font-weight: 700; line-height: 1; color: var(--field); align-self: center; }
.tv .pick .st { font-size: min(2.4vw, 4vh); color: var(--field); grid-row: 1 / 3; grid-column: 2; align-self: center; letter-spacing: 0.08em; }
.tv .pick .idea { font-size: min(1.4vw, 2.4vh); }
.tv .pick .go { grid-column: 2; grid-row: 3; font-weight: 700; font-size: min(1.2vw, 2vh); text-align: right; }
.tv .seats { display: grid; grid-template-columns: 1fr 1fr; gap: 1vh 0.8vw; margin-top: auto; }
.tv .seats .s { display: flex; align-items: center; gap: 0.6vw; font-weight: 700; font-size: min(1.4vw, 2.4vh); }
.tv .seats .s b { width: 1.8em; height: 1.8em; flex: none; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); display: grid; place-items: center; }
.tv .seats .s.empty { opacity: 0.45; }
.join { display: flex; align-items: center; gap: 1.2vw; color: var(--ink); text-decoration: none; }
.join .qr { width: min(12vw, 21vh); height: auto; border-radius: 8px; border: 4px solid var(--ink); }
.join .addr { font-weight: 500; font-size: min(1.5vw, 2.5vh); }
.join .addr b { display: block; font-weight: 700; font-size: 2.2em; letter-spacing: 0.06em; }
.deskhint { position: fixed; left: 36vw; right: 14vw; bottom: 2.4vh; text-align: center; font-weight: 700; font-size: min(1.3vw, 2.2vh); z-index: 3; pointer-events: none; }

/* ---- TV strip over the board ---- */
.tv .hud { position: fixed; left: 0; right: 0; top: 0; height: var(--hud); display: flex; align-items: center; gap: 2vw; padding: 0 1.4vw; z-index: 5; font-size: calc(var(--hud) * 0.36); }
.tv .hud .lvl { display: flex; align-items: baseline; gap: 0.6em; white-space: nowrap; }
.tv .hud .lvl b { font-weight: 700; }
.tv .hud .lvl span { font-weight: 700; background: var(--ink); color: var(--paper); padding: 0.1em 0.5em; border-radius: 6px; }
.tv .hud .waves { display: flex; align-items: center; gap: 0.8em; white-space: nowrap; font-weight: 700; }
.tv .hud .pips { display: flex; gap: 0.3em; }
.tv .hud .pips i { width: 0.8em; height: 0.8em; border-radius: 50%; border: 3px solid var(--ink); }
.tv .hud .pips i.done { background: var(--ink); }
.tv .hud .pips i.now { background: var(--paper); animation: pulse 0.9s infinite alternate; }
@keyframes pulse { to { transform: scale(1.25); } }
.tv .hud .who { display: flex; gap: 1.2vw; margin-left: auto; }
.tv .hud .who .w { display: flex; align-items: center; gap: 0.4em; font-weight: 700; }
.tv .hud .who .w > b { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); display: grid; place-items: center; font-size: 0.8em; }
.tv .hud .who .bars { display: flex; gap: 3px; }
.tv .hud .who .bars i { width: 0.32em; height: 1em; border-radius: 3px; border: 2px solid var(--ink); }
.tv .hud .who .bars i.on { background: var(--ink); }
.tv .hud .who .coins { opacity: 0.8; }
.tv .hud .lives { background: var(--ink); color: var(--paper); font-weight: 700; padding: 0.15em 0.6em; border-radius: 8px; font-size: 1.15em; white-space: nowrap; }
.tv .hud .lives.low { background: var(--paper); color: var(--ink); animation: pulse 0.5s infinite alternate; }
.tv .hud .cornerqr .qr { width: calc(var(--hud) * 0.8); border-width: 2px; border-radius: 4px; }
.tv .hud .cornerqr { flex: none; }
.tv .hud .cornerqr .addr { font-size: calc(var(--hud) * 0.22); white-space: nowrap; }
.tv .hud .waves, .tv .hud .who { min-width: 0; }
.tv .hud { font-size: min(calc(var(--hud) * 0.36), 1.45vw); }

.banner { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--ink); color: var(--paper); border-radius: 18px; padding: 3vh 3vw; text-align: center; z-index: 3; pointer-events: none; min-width: 30vw; }
.banner .small { font-size: min(1.6vw, 2.6vh); opacity: 0.7; font-weight: 700; }
.banner h2 { margin: 0.1em 0; font-size: min(5vw, 8vh); line-height: 1; color: var(--field); }
.banner p { margin: 0.4em 0 0; font-size: min(1.8vw, 3vh); }

.tv .shop { position: fixed; left: 50%; bottom: 1.6vh; transform: translateX(-50%); background: var(--ink); color: var(--paper); border-radius: 16px; padding: 1.4vh 1.4vw; z-index: 3; display: flex; flex-direction: column; gap: 1vh; align-items: center; max-width: 96vw; }
.tv .shop .head { font-weight: 700; font-size: min(1.5vw, 2.5vh); }
.tv .shop .row { display: flex; gap: 1vw; }
.tv .shop .tw { display: flex; flex-direction: column; align-items: center; gap: 0.4vh; font-size: min(1vw, 1.7vh); }
.tv .shop .tw.dead { opacity: 0.4; }
.tv .shop .tw canvas { width: 3.4vw; max-width: 56px; height: auto; }
.tv .shop .up { background: transparent; border: 2px solid var(--paper); border-radius: 6px; padding: 0.2em 0.5em; color: var(--paper); white-space: nowrap; font-weight: 700; }
.tv .shop button.up:disabled { opacity: 0.35; cursor: default; }
.tv .shop .ready { background: var(--field); color: var(--ink); border: 0; border-radius: 8px; font-weight: 700; padding: 0.4em 1.2em; }

.tv .over { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: grid; place-items: center; z-index: 4; background: rgba(255, 106, 19, 0.86); }
.tv .over .card { background: var(--ink); color: var(--paper); border-radius: 22px; padding: 4vh 4vw; text-align: center; min-width: 34vw; }
.tv .over .small { font-weight: 700; opacity: 0.7; font-size: min(1.6vw, 2.6vh); }
.tv .over .big { font-size: min(7vw, 12vh); font-weight: 700; line-height: 1; color: var(--field); }
.tv .over .stars { font-size: min(4vw, 7vh); color: var(--field); letter-spacing: 0.1em; }
.tv .over .sub { font-size: min(2vw, 3.4vh); }
.tv .over .rows { display: grid; grid-template-columns: repeat(4, auto); gap: 2vw; margin: 3vh 0 2vh; justify-content: center; }
.tv .over .rows .r { display: flex; flex-direction: column; }
.tv .over .rows b { font-size: min(3vw, 5vh); }
.tv .over .rows span { font-size: min(1.2vw, 2vh); opacity: 0.8; }
.tv .over .again { font-weight: 700; font-size: min(1.6vw, 2.6vh); }

.sound { position: fixed; right: 1.4vw; bottom: 1.6vh; z-index: 5; background: var(--ink); color: var(--paper); border: 0; border-radius: 10px; padding: 0.6em 1em; font-weight: 700; }
.netmark { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 0.4em 1em; border-radius: 8px; z-index: 9; font-weight: 700; }
.tweaks { position: fixed; left: 10px; bottom: 10px; z-index: 20; font-size: 13px; }
.tweaks .pill { background: var(--ink); color: var(--paper); border: 0; border-radius: 99px; padding: 6px 12px; font-weight: 700; }
.tweaks .panel { background: var(--paper); border: 3px solid var(--ink); border-radius: 10px; padding: 8px; margin-bottom: 6px; }
.tweaks .r { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tweaks .r span { font-weight: 700; }
.tweaks .r button { background: transparent; border: 2px solid var(--ink); border-radius: 6px; padding: 3px 8px; }
.tweaks .r button.on { background: var(--ink); color: var(--paper); }

/* ---- the door (phone and laptop) ---- */
.phone.door { overflow: auto; }
.screen.door { min-height: 100%; display: grid; grid-template-columns: minmax(320px, 36vw) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 0 2vw; padding: 4vh 3vw 2vh; --mk: min(7vw, 12vh); }
.screen.door .col { display: flex; flex-direction: column; gap: 2.4vh; justify-content: center; }
.screen.door .lede { font-size: 20px; line-height: 1.35; margin: 0; }
.screen.door .demo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.screen.door .col, .screen.door .shelf { position: relative; z-index: 1; }
.screen.door .gap { min-height: 50vh; }
.screen.door .shelf { grid-column: 1 / -1; min-height: 10px; }
.screen.door .small a { color: var(--ink); font-weight: 700; }
.btns { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.btn { background: var(--ink); color: var(--paper); border: 3px solid var(--ink); border-radius: 12px; padding: 14px 22px; font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; }
.btn.white { background: transparent; color: var(--ink); }
.btn.big { font-size: 24px; padding: 16px 30px; }
.btn:disabled { background: transparent; color: var(--ink); border-style: dashed; }
form.code { display: flex; gap: 10px; }
form.code input, .enter input { font: inherit; font-weight: 700; font-size: 20px; width: 6.2em; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 12px; background: transparent; color: var(--ink); letter-spacing: 0.18em; text-transform: uppercase; }
form.code input::placeholder, .enter input::placeholder { color: rgba(17, 17, 17, 0.45); }
.note { font-size: 16px; line-height: 1.35; margin: 0; }
@media (max-width: 760px) {
  .screen.door { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 34vh auto; padding: 22px 18px; --mk: 64px; }
  .screen.door .gap { min-height: 36vh; }
  .screen.door .col { gap: 16px; }
  .screen.door .lede { font-size: 17px; }
}

/* ---- joining ---- */
.screen.enter { min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 24px; --mk: 64px; font-size: 18px; font-weight: 700; }
.enter form { display: flex; gap: 10px; flex-wrap: wrap; }
.enter input { width: 10em; letter-spacing: 0; text-transform: none; }

/* ---- the controller: a strip, a panel (lobby, shop, end), the trackpad ---- */
.phone.pad { display: flex; flex-direction: column; height: 100%; }
.pad #app { display: flex; flex-direction: column; height: 100%; padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); gap: 10px; }
.pad .top { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.pad .badge { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; min-width: 0; }
.pad .badge b { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); display: grid; place-items: center; font-size: 22px; }
.pad .badge span { overflow-wrap: anywhere; }
.pad .res { display: flex; align-items: center; gap: 8px; margin-left: auto; font-weight: 700; }
.pad .res .bars { display: flex; gap: 3px; }
.pad .res .bars i { width: 9px; height: 22px; border-radius: 3px; border: 2px solid var(--ink); }
.pad .res .bars i.on { background: var(--ink); }
.pad .res small { font-size: 13px; }
.pad .res .coins { background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; padding: 2px 8px; }
.pad .lives { background: var(--ink); color: var(--paper); font-weight: 700; padding: 4px 10px; border-radius: 8px; }
.pad .mute { margin-left: auto; background: transparent; border: 2px solid var(--ink); border-radius: 8px; padding: 6px 10px; font-weight: 700; }
.pad .panel { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.pad .panel:empty { display: none; }
.pad .panel .note { font-weight: 500; }
.levelrow { display: flex; align-items: center; gap: 10px; }
.levelrow .arrow { width: 56px; height: 56px; flex: none; border-radius: 12px; border: 3px solid var(--ink); background: transparent; font-size: 30px; font-weight: 700; line-height: 1; }
.levelrow .arrow:disabled { border-style: dashed; color: transparent; }
.levelrow .lvl { flex: 1; text-align: center; display: flex; flex-direction: column; }
.levelrow .lvl small { font-size: 13px; font-weight: 700; }
.levelrow .lvl b { font-size: 24px; }
.levelrow .lvl .st { font-size: 20px; letter-spacing: 0.1em; }
.bots { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.bots span { margin-right: auto; }
.bots button { width: 44px; height: 40px; border-radius: 10px; border: 3px solid var(--ink); background: transparent; font-weight: 700; }
.bots button.on { background: var(--ink); color: var(--paper); }
.bots.skill button { width: auto; padding: 0 12px; }
.shophead { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.shoplist { display: flex; flex-direction: column; gap: 8px; max-height: 44vh; overflow: auto; }
.shoplist .tw { display: grid; grid-template-columns: 48px 1fr 1fr 1fr; gap: 6px; align-items: center; }
.shoplist .tw.dead { filter: grayscale(1); }
.shoplist canvas { width: 48px; height: 48px; }
.shoplist .up { background: var(--ink); color: var(--paper); border: 0; border-radius: 10px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 58px; }
.shoplist .up b { font-size: 14px; }
.shoplist .up small { font-size: 12px; opacity: 0.85; }
.shoplist .up .pips { display: flex; gap: 3px; }
.shoplist .up .pips i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--paper); }
.shoplist .up .pips i.on { background: var(--paper); }
.shoplist .up:disabled { background: transparent; color: var(--ink); border: 2px dashed var(--ink); }
.shoplist .up:disabled .pips i { border-color: var(--ink); }
.shoplist .up:disabled .pips i.on { background: var(--ink); }
.result { font-size: 34px; font-weight: 700; }
.trackpad { position: relative; flex: 1; min-height: 34vh; background: var(--ink); color: var(--paper); border-radius: 22px; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden;
  background-image: radial-gradient(rgba(255, 243, 230, 0.16) 1.5px, transparent 1.6px); background-size: 28px 28px; }
.trackpad .act { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font-weight: 700; font-size: 22px; padding: 0 12px; }
.trackpad .act.no { color: rgba(255, 243, 230, 0.55); }
.trackpad .act.lift, .trackpad .act.move { color: var(--field); }
.trackpad .hint { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 15px; opacity: 0.6; }
.trackpad .dot { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--field); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.trackpad.down .dot { opacity: 1; }
.pad .netmark { top: auto; bottom: 20px; }

.pad.over .trackpad { display: none; }
.pad .lives, .pad .res { white-space: nowrap; }
/* a phone on its side: the panel on the left (it scrolls), the trackpad on the right */
@media (orientation: landscape) and (max-height: 520px) {
  .pad #app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .pad .top { grid-column: 1 / -1; }
  .pad .panel { grid-column: 1; overflow: auto; min-height: 0; }
  .pad .trackpad { grid-column: 2; min-height: 0; }
  .pad .panel:empty + .trackpad { grid-column: 1 / -1; }
  .shoplist { max-height: none; }
}

/* ---- the puzzles (/puzzle): alone, on a phone. A strip on top, the board, a fixed bar under it. The
   column is 100svh (the height with the browser bar out), so the bar sliding never resizes the board. ---- */
body.pz { overflow: hidden; }
.pz #app { position: relative; z-index: 1; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.pz-btn { background: var(--ink); color: var(--paper); border: 3px solid var(--ink); border-radius: 14px; font-weight: 700; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; padding: 0 22px; height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; }
.pz-btn.go { flex: 1; font-size: 24px; }
.pz-btn.ghost { background: transparent; color: var(--ink); }
.pz-btn.fast.on { background: var(--paper); }
.pz-btn kbd { font: inherit; font-size: 0.6em; background: var(--paper); color: var(--ink); border-radius: 6px; padding: 3px 7px; letter-spacing: 0.02em; }
.pz-btn.ghost kbd { background: var(--ink); color: var(--paper); }
/* a desk: key prompts, not buttons */
.pz-btn.prompt { background: transparent; color: var(--ink); border: 0; height: 44px; padding: 0 10px; font-size: 18px; flex: 0 0 auto; }
.pz-btn.prompt kbd { background: var(--ink); color: var(--paper); font-size: 0.8em; padding: 4px 9px; }

.pz-top { flex: none; display: flex; align-items: center; gap: 12px; min-height: 58px; }
.pz-top .pz-btn.ghost:not(.prompt) { height: 46px; padding: 0 14px; font-size: 15px; }
.pz-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.pz-title small { font-size: 13px; font-weight: 700; opacity: 0.75; }
.pz-title b { font-size: 24px; overflow-wrap: anywhere; }
.pz-walls { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.pz-walls .bars { display: flex; gap: 5px; }
.pz-walls .bars i { width: 26px; height: 9px; border-radius: 4px; border: 3px solid var(--ink); }
.pz-walls .bars i.on { background: var(--ink); }
.pz-board { flex: 1; min-height: 0; position: relative; }
.pz-board canvas.board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.pz-bottom { flex: none; height: 138px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.pz-say { font-size: 17px; line-height: 1.3; font-weight: 700; min-height: 2.6em; display: flex; align-items: flex-end; }
.pz-say.warn { color: var(--paper); }
.pz-say.bad { font-size: 20px; }
.pz-row { display: flex; gap: 10px; align-items: center; }

/* the list: a puzzle playing itself behind a grid of numbers */
/* the list's demo board has its own slot: it never sits behind a tile or the today card */
.pz-head { flex: 1 0 auto; }
.pz-hero { flex: 1; align-self: stretch; min-height: 120px; position: relative; pointer-events: none; }
.pz-hero canvas.board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pz-list { display: flex; flex-direction: column; gap: 18px; height: 100%; overflow: auto; --mk: 58px; }
.pz-head { display: flex; align-items: flex-start; gap: 14px; }
.pz-home { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 40px; line-height: 1; width: 46px; height: 46px; border: 3px solid var(--ink); border-radius: 12px; display: grid; place-items: center; flex: none; }
.pz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.pz-tile { background: var(--ink); color: var(--paper); border: 3px solid var(--ink); border-radius: 14px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 104px; }
.pz-tile b { font-size: 34px; line-height: 1; color: var(--field); }
.pz-tile .nm { font-size: 14px; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.pz-tile .st { font-size: 18px; letter-spacing: 0.1em; color: var(--field); min-height: 1.2em; }
.pz-tile.shut { background: transparent; color: var(--ink); border-style: dashed; }
.pz-tile.shut b { color: var(--ink); opacity: 0.5; }
.pz-tile.nope { animation: nope 0.35s; }
@keyframes nope { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pz-foot { font-weight: 700; font-size: 17px; min-height: 1.4em; }

/* cleared: a sheet that waits for a tap */
.pz-sheet { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 18px; background: rgba(255, 106, 19, 0.82); animation: fade 0.25s; }
@keyframes fade { from { opacity: 0; } }
.pz-sheet .card { background: var(--ink); color: var(--paper); border-radius: 22px; padding: 26px 22px 22px; width: min(100%, 420px); display: flex; flex-direction: column; gap: 10px; animation: rise 0.35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rise { from { transform: translateY(40px) scale(0.9); } }
.pz-sheet small { font-weight: 700; opacity: 0.7; font-size: 15px; }
.pz-sheet h2 { margin: 0; font-size: 56px; line-height: 1; color: var(--field); }
.pz-sheet .stars { display: flex; gap: 8px; font-size: 54px; line-height: 1; }
.pz-sheet .stars i { font-style: normal; color: rgba(255, 243, 230, 0.2); }
.pz-sheet .stars i.on { color: var(--field); animation: pop 0.4s backwards; }
@keyframes pop { from { transform: scale(0); } 70% { transform: scale(1.3); } }
.pz-sheet p { margin: 0; font-size: 18px; line-height: 1.3; }
.pz-sheet .pz-btn { background: var(--field); color: var(--ink); border-color: var(--field); }
.pz-sheet .pz-btn.ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
.pz-sheet .pz-btn.prompt { background: transparent; color: var(--paper); border: 0; }
.pz-sheet .pz-btn.prompt kbd { background: var(--field); color: var(--ink); }
.pz-sheet .all { font-weight: 700; }
@media (min-width: 761px) {
  .pz-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0; }
  .pz-list { max-width: 1100px; width: 100%; margin: 0 auto; justify-content: center; --mk: 84px; }
  .pz-bottom { height: 110px; }
}
/* a phone on its side: the board on the left, the strip and the bar stacked on the right */
@media (orientation: landscape) and (max-height: 520px) {
  .pz.play #app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 38vw); grid-template-rows: auto minmax(0, 1fr); column-gap: 14px; }
  .pz-top { grid-column: 2; flex-wrap: wrap; }
  .pz-board { grid-column: 1; grid-row: 1 / 4; }
  .pz-bottom { grid-column: 2; grid-row: 2; height: auto; }
  .pz-row { flex-wrap: wrap; }
  .pz-list { --mk: 40px; }
  .pz-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pz-tile { min-height: 84px; }
}
.pz-low { display: flex; align-items: center; gap: 12px; }
.pz-low .pz-foot { margin-right: auto; }
.pz-btn.small:not(.prompt) { height: 44px; font-size: 14px; padding: 0 14px; }
.pz-list { position: relative; z-index: 1; }
@media (min-width: 1000px) and (min-height: 640px) {
  .pz-title b { font-size: 34px; }
  .pz-title small { font-size: 16px; }
  .pz-walls { font-size: 18px; }
  .pz-say { font-size: 22px; }
  .pz-btn.prompt { font-size: 22px; }
  .pz-tile b { font-size: 48px; }
  .pz-tile .nm { font-size: 18px; }
  .pz-foot { font-size: 20px; }
}
.pz-title { flex: 1; }
.pz-title b { overflow-wrap: normal; word-break: normal; }
.pz-walls .bars i { width: 18px; }

/* the hand: the pieces this puzzle gives you, one row, always the same height */
.pz-hand { flex: none; display: flex; gap: 8px; height: 50px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.pz-hand.off { opacity: 0.45; pointer-events: none; }
.pz-piece { flex: none; height: 44px; padding: 0 6px; border-radius: 12px; border: 3px solid var(--ink); background: transparent; display: grid; place-items: center; }
.pz-piece.on { background: var(--paper); box-shadow: 0 4px 0 var(--ink); transform: translateY(-2px); }
.pz-piece.used { border-style: dashed; opacity: 0.4; }
.pz-piece canvas { display: block; }
.pz-title small { white-space: nowrap; }

/* today's puzzle, on top of the list */
.pz-today { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; text-align: left; box-shadow: 0 6px 0 var(--ink); }
.pz-today .l { display: flex; flex-direction: column; min-width: 0; }
.pz-today small { font-size: 14px; font-weight: 700; opacity: 0.7; }
.pz-today b { font-size: 26px; line-height: 1.05; }
.pz-today .st { margin-left: auto; font-weight: 700; font-size: 22px; letter-spacing: 0.06em; white-space: nowrap; background: var(--ink); color: var(--field); padding: 8px 14px; border-radius: 10px; }
.pz-grid { margin-top: 0; }
.pz-note { min-height: 1.3em; }
.pz-copy { width: 100%; font: inherit; font-size: 16px; margin-top: 6px; border-radius: 8px; border: 0; padding: 8px; resize: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .pz-hand { grid-column: 2; }
  .pz-board { grid-row: 1 / 4; }
  .pz.play #app { grid-template-rows: auto auto minmax(0, 1fr); }
  .pz-bottom { grid-row: 3; }
  .pz-today { padding: 8px 14px; }
  .pz-today b { font-size: 20px; }
}
@media (max-width: 760px) {
  .pz-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .pz-tile { min-height: 86px; padding: 8px 4px 6px; border-radius: 12px; }
  .pz-tile b { font-size: 28px; }
  .pz-tile .nm { font-size: 11px; line-height: 1.1; }
  .pz-tile .st { font-size: 14px; letter-spacing: 0.04em; }
  .pz-list { gap: 14px; --mk: 50px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .pz-tile { min-height: 76px; }
  .pz-tile .nm { display: none; }
  .pz-list { --mk: 40px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .pz-hand { min-width: 0; flex-wrap: wrap; height: auto; overflow: visible; gap: 6px; }
  .pz-piece { height: 38px; padding: 0 2px; }
  .pz-piece canvas { transform: scale(0.8); }
}
/* the hand always fits across: pieces share the row, each icon shrinks to its button */
.pz-hand { overflow: visible; }
.pz-piece { flex: 1 1 0; min-width: 0; max-width: 104px; }
.pz-piece canvas { max-width: 100%; height: auto !important; }
@media (orientation: landscape) and (max-height: 520px) { .pz-piece { flex: 1 1 30%; } .pz-piece canvas { transform: none; } }
/* phones: the wordmark is too wide to share its row, so the demo board takes the full width under it */
@media (max-width: 760px) {
  .pz-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(120px, 1fr); column-gap: 14px; row-gap: 6px; }
  .pz-hero { grid-column: 1 / -1; grid-row: 2; }
}