/* Grit: neon on near-black (Hotline Miami 2 / Nidhogg 2), a
   glowing brush title and brush command words (Knewave), condensed caps
   labels (League Gothic), hard pink shadows. Fonts: fonts/, SIL OFL 1.1. */
:root { --ink: #0b0710; --bg: #0d0221; --paper: #efe6d2; --pink: #ff2a6d; --cyan: #05d9e8; --acid: #f9f002; --me: #ff2a6d; color-scheme: dark;
  --title: "Knewave"; --ts: .8; --ls: 1;
  --display: "Knewave", Impact, sans-serif; --label: "League Gothic", Impact, "Arial Narrow", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; color: #fff; font: 700 calc(17px * var(--ls))/1.3 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif; overscroll-behavior: none; }
body {
  background: linear-gradient(180deg, #0d0221 0%, #2a0845 60%, #5a0a3e 100%) fixed;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* (no CRT look on a phone: scanlines and a vignette are the TV's; a phone's text, and
   the live picture on Just this phone, stay crisp) */
[hidden] { display: none !important; }
.screen { position: relative; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, var(--random-nav-h, env(safe-area-inset-bottom))); text-align: center; }
.logo { font: calc(clamp(56px, 19vw, 100px) * var(--ts))/1.2 var(--title), "Brush Script MT", cursive; color: #ff2a6d; margin: 0 0 10px; transform: rotate(-7deg); white-space: nowrap;
  text-shadow: 0 0 12px #ff2a6d, 0 0 34px rgba(255,42,109,.6), 4px 5px 0 var(--ink); animation: flicker 5s steps(1) infinite; }
@keyframes flicker { 0%, 90%, 94%, 100% { opacity: 1; } 91%, 93% { opacity: .45; } }
form { display: flex; flex-direction: column; gap: 14px; width: min(360px, 100%); }
label { display: flex; flex-direction: column; gap: 6px; text-align: left; font: calc(16px * var(--ls)) var(--label); text-transform: uppercase; color: var(--cyan); letter-spacing: 3px; }
input { font: calc(26px * var(--ls)) var(--label); letter-spacing: 2px; padding: 12px 14px; border-radius: 2px; border: 3px solid var(--cyan); background: rgba(0,0,0,.55); color: #fff; box-shadow: 5px 5px 0 var(--pink); -webkit-user-select: text; user-select: text; }
#code { text-transform: uppercase; letter-spacing: 10px; text-align: center; font-size: 36px; color: var(--acid); }
button, .btn { font: calc(20px * var(--ls)) var(--label); color: #fff; background: rgba(0,0,0,.6); border: 3px solid #fff; border-radius: 2px; padding: 12px 18px; cursor: pointer; touch-action: manipulation; box-shadow: 5px 5px 0 var(--pink); text-transform: uppercase; letter-spacing: 3px; }
button:active, .btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--pink); }
.big { font-size: 28px; padding: 14px 22px; background: var(--pink); color: #fff; border-color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.btn.big { background: rgba(0,0,0,.6); border-color: #fff; box-shadow: 5px 5px 0 var(--pink); }
.err { color: var(--acid); min-height: 1.4em; margin: 0; font-size: 15px; }
/* the room code still to type (Playing from somewhere else? needs it): the box lit up, the line under it */
#code[aria-invalid="true"] { border-color: var(--acid); box-shadow: 0 0 0 3px var(--acid), 5px 5px 0 var(--pink); }
#code-err { min-height: 0; font: 15px system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.host a { color: var(--cyan); } .small { font-size: 14px; }
.sub { margin: 0; color: var(--cyan); }
h2 { margin: 0; font: 48px var(--display); letter-spacing: 3px; color: #fff; text-shadow: 4px 4px 0 var(--pink); text-transform: uppercase; }
.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
/* a selfie is shown in your colour, as the TV will draw it (a doodle keeps its own colours) */
.face-preview { position: relative; }
.face-preview:has(#doodle[data-mode="photo"])::after { content: ""; position: absolute; inset: 0; background: var(--me); mix-blend-mode: color; opacity: .85; pointer-events: none; }
.face-preview { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 5px solid #fff; background: var(--me); box-shadow: 8px 8px 0 var(--pink), -6px -4px 0 var(--cyan); }
#doodle { width: 100%; height: 100%; touch-action: none; }
.swatches { display: flex; gap: 8px; }
.swatches button { width: 48px; height: 48px; padding: 0; border-radius: 50%; box-shadow: 3px 3px 0 var(--pink); }
.swatches button.on { outline: 3px solid var(--acid); outline-offset: 2px; }

#pad { justify-content: flex-start; padding: 0; gap: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--me) 30%, #0d0221), #0d0221 75%); }
#me { width: 100%; display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 16px 10px; font: calc(24px * var(--ls)) var(--label); letter-spacing: 3px; background: rgba(0,0,0,.7); border-bottom: 3px solid var(--me); text-transform: uppercase; }
/* you: your blob (sent by the TV), or your colour with your shape on it */
#me i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--me) center / 118% no-repeat; border: 3px solid #fff; font: normal 900 18px/30px system-ui, sans-serif; font-style: normal; text-align: center; color: #0b0710; }
#me i svg.shape { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); }
#me i[style*="background-image"] svg.shape { left: auto; top: auto; right: -9px; bottom: -8px; transform: none; }
#me b svg.shape { width: .8em; height: .8em; vertical-align: -.05em; }
/* which blob's yours, as a game starts */
/* (it takes your name's place in the header for a moment: never over a control) */
#me b.whoami { background: var(--me); color: #0b0710; padding: 0 10px; animation: whoami 1.8s ease-out both; }
@keyframes whoami { 0% { opacity: 0; } 10%, 85% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #me b.whoami { animation: none; } }
#me > span { margin-left: auto; color: var(--ink); background: var(--cyan); padding: 1px 8px; font-size: 16px; }
#me > span:empty { display: none; }
#view.scroll { touch-action: pan-y; }
#view { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 18px; padding: 16px 16px max(16px, var(--random-nav-h, env(safe-area-inset-bottom))); touch-action: none; }
#view.scroll { touch-action: pan-y; }
.msg { font: clamp(34px, 11vw, 56px)/1.05 var(--display); letter-spacing: 2px; margin: 0; color: #fff; text-shadow: 4px 4px 0 var(--pink); transform: rotate(-3deg); text-transform: uppercase; }
.msg.shout { color: #fff; animation: slam .3s cubic-bezier(.2, 1.8, .4, 1) both, jit .1s steps(2) .3s infinite; text-shadow: 7px 7px 0 var(--pink); }
@keyframes slam { from { transform: scale(2.8) rotate(-14deg); opacity: 0; } to { transform: scale(1) rotate(-3deg); opacity: 1; } }
@keyframes jit { 50% { transform: rotate(-3deg) translate(3px, -2px); } }
.actions { display: flex; flex-direction: column; gap: 14px; width: min(360px, 100%); }
.cards { display: flex; flex-direction: column; gap: 14px; width: min(420px, 100%); }
.cards button { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-transform: none; background: rgba(0,0,0,.65); border-color: var(--cyan); }
.cards button:nth-child(odd) { transform: rotate(-1.5deg); } .cards button:nth-child(even) { transform: rotate(1.5deg); }
.cards b { font: 34px var(--display); letter-spacing: 2px; color: #fff; text-shadow: 3px 3px 0 var(--pink); }
.cards small { font: calc(14px * var(--ls)) var(--label); letter-spacing: 2px; text-transform: uppercase; background: var(--cyan); color: var(--ink); padding: 0 6px; align-self: flex-start; }
.cards span { font-weight: 700; font-size: calc(15px * var(--ls)); color: #ddd; }
.cards button.who { display: grid; grid-template-columns: 76px 1fr; column-gap: 14px; row-gap: 4px; align-items: center; }
.cards button.who img { grid-row: 1 / span 3; width: 76px; height: 76px; }
.cards button.who > :not(img) { grid-column: 2; }
.cards button.who small { justify-self: start; }
.cards .shot { position: relative; width: 100%; aspect-ratio: 2 / 1; margin-bottom: 6px; border: 3px solid var(--ink); background: #1b1030; overflow: hidden; }
.cards .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.cards .shot img.on { opacity: 1; }
.hit { width: min(72vw, 340px); aspect-ratio: 1; border-radius: 50%; font: clamp(44px, 14vw, 72px) var(--display); letter-spacing: 4px; color: #fff; text-shadow: 3px 3px 0 var(--ink); background: radial-gradient(circle at 35% 30%, #fff6 0 10%, transparent 11%), var(--me); border: 6px solid #fff; box-shadow: 0 14px 0 var(--ink), 10px 20px 0 var(--pink); transition: transform .05s; }
.hit.down { transform: translateY(12px) scale(.97); box-shadow: 0 2px 0 var(--ink), 4px 6px 0 var(--pink); }
.dpad { display: grid; grid-template: repeat(3, min(25vw, 112px)) / repeat(3, min(25vw, 112px)); gap: 8px; }
.dpad button { font: 40px system-ui, sans-serif; border-color: var(--cyan); }
.dpad button.down { background: var(--me); transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--pink); }
.dpad .u { grid-area: 1 / 2; } .dpad .l { grid-area: 2 / 1; } .dpad .r { grid-area: 2 / 3; } .dpad .d { grid-area: 3 / 2; }
.sling { position: relative; flex: 1; width: 100%; border: 3px dashed rgba(255,255,255,.35); display: grid; place-items: center; overflow: hidden; background: rgba(0,0,0,.35); touch-action: none; }
.sling.active { border: 4px solid var(--acid); background: repeating-linear-gradient(-45deg, rgba(249,240,2,.08) 0 18px, transparent 18px 36px), rgba(0,0,0,.4); box-shadow: 8px 8px 0 var(--pink); }
.sling svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hint { font-size: calc(16px * var(--ls)); margin: 0; color: var(--ink); background: var(--paper); padding: 5px 12px; box-shadow: 4px 4px 0 var(--pink); }
.cmd { margin: 0; font: clamp(40px, 13vw, 64px)/1 var(--display); color: #fff; text-shadow: 5px 5px 0 var(--pink); transform: rotate(-3deg); text-transform: uppercase; }
.pads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(360px, 100%); }
.pads button { min-width: 0; overflow: hidden; padding: 4px; aspect-ratio: 1; font: 64px var(--display); color: var(--ink); border: 5px solid var(--ink); border-radius: 6px; box-shadow: 6px 6px 0 #fff; }
.pads button:disabled { opacity: .25; }
.pads button.down { transform: translate(4px, 4px); box-shadow: 2px 2px 0 #fff; }
/* a colour pad: its shape over its name (never the colour alone) */
.pads button.shaped { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; }
.pads button.shaped svg { width: auto; height: 50%; flex: none; overflow: visible; }
.pads button.shaped span { font: calc(24px * var(--ls)) var(--label); letter-spacing: 2px; line-height: 1; text-shadow: none; }
/* a trivia answer pad: its letter, then the answer's words (as many lines as they need) */
.pads.worded { width: min(420px, 100%); }
.pads.worded button { aspect-ratio: auto; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 6px; }
.pads.worded button b { font: calc(30px * var(--ls))/1 var(--display); }
.pads.worded button span { font: 800 calc(17px * var(--ls))/1.15 ui-rounded, "SF Pro Rounded", system-ui, sans-serif; text-transform: none; letter-spacing: 0; text-shadow: none; overflow-wrap: anywhere; }
svg.shape path { fill: #fff; stroke: var(--ink); stroke-width: 10; stroke-linejoin: round; paint-order: stroke; }
.radar { width: min(92vw, 420px); aspect-ratio: 320 / 186; height: auto; background: rgba(0,0,0,.55); border: 3px solid var(--cyan); box-shadow: 5px 5px 0 var(--pink); }
.stickrow { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(92vw, 420px); }
.stick { position: relative; width: 190px; height: 190px; border-radius: 50%; border: 4px solid var(--cyan); background: rgba(0,0,0,.45); touch-action: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--me); border: 4px solid #fff; box-shadow: 4px 4px 0 var(--pink); pointer-events: none; }
.act { width: 130px; height: 130px; border-radius: 50%; font-size: 26px; }
.trackpad { flex: 1; width: 100%; min-height: 240px; border: 4px dashed var(--cyan); background: repeating-linear-gradient(0deg, rgba(5,217,232,.07) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(5,217,232,.07) 0 1px, transparent 1px 40px), rgba(0,0,0,.4); display: grid; place-items: center; touch-action: none; }
.trackpad span { font: 22px var(--label); letter-spacing: 4px; color: rgba(255,255,255,.4); pointer-events: none; }
.hit.fire { width: min(56vw, 240px); }
.hit.fire:disabled { background: #444; color: #aaa; }
.stickrow.solo { justify-content: center; }
.acts { display: flex; flex-direction: column; gap: 14px; }
.acts .act { width: 112px; height: 112px; }
.acts .act.two { background: #05d9e8; color: #0d0221; }
.stickrow.solo .stick { width: 230px; height: 230px; }
.firerow { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.firerow .hit.fire { width: min(48vw, 210px); }
.flare { width: 120px; height: 120px; border-radius: 50%; font-size: 20px; background: var(--acid); color: var(--ink); border-color: var(--ink); box-shadow: 5px 5px 0 var(--pink); }
.flare:disabled { background: #444; color: #999; }
.items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: min(420px, 100%); }
/* an item card: its picture on the left, USE and its name over what it does (or, greyed, why not now) */
.items button { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: 72px; padding: 6px 12px 6px 6px; text-align: left; text-transform: none; letter-spacing: 1px; border-color: var(--acid); }
.items button.nopic { grid-template-columns: minmax(0, 1fr); padding-left: 14px; }
.items button img { grid-row: 1 / span 2; width: 64px; height: 64px; }
.items button b { font: calc(20px * var(--ls))/1.1 var(--label); letter-spacing: 2px; text-transform: uppercase; color: var(--acid); }
.items button span { font: 700 calc(16px * var(--ls))/1.25 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif; letter-spacing: 0; color: #ddd; }
.items button:disabled { opacity: 1; border-color: #666; box-shadow: 5px 5px 0 #333; }
.items button:disabled img { filter: grayscale(1) brightness(.6); }
.items button:disabled b { color: #999; }
.items button:disabled span { color: var(--acid); }
.pads.small button { aspect-ratio: .45; font-size: 30px; }
.level { position: relative; width: 170px; height: 170px; border-radius: 50%; border: 4px solid var(--cyan); background: radial-gradient(circle, transparent 0 22px, rgba(5,217,232,.3) 23px 25px, transparent 26px), rgba(0,0,0,.45); }
.level i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--me); border: 4px solid #fff; transition: transform .05s linear; }
.stick.mini { width: 130px; height: 130px; }
.stick.mini i { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.prompt { margin: 0; font: 30px/1.1 var(--display); color: var(--acid); text-shadow: 3px 3px 0 var(--pink); text-transform: uppercase; }
.sketch { width: min(92vw, 420px); aspect-ratio: 1; height: auto; border: 5px solid #fff; box-shadow: 6px 6px 0 var(--pink); touch-action: none; background: #fff; }
.swatches { flex-wrap: wrap; justify-content: center; }
.manual { width: min(94vw, 440px); max-height: 46dvh; overflow-y: auto; touch-action: pan-y; text-align: left; background: var(--paper); color: var(--ink); padding: 10px 14px; box-shadow: 5px 5px 0 var(--pink); font-size: calc(15px * var(--ls)); }
.manual h3 { margin: 8px 0 4px; font: 22px var(--label); letter-spacing: 2px; color: var(--pink); }
.manual p { margin: 0 0 4px; }
.hit.bombbtn { width: min(52vw, 220px); font-size: clamp(26px, 8vw, 40px); }
/* Bomb Squad: the defuser's module, as the TV shows it */
.defuse { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(420px, 100%); }
.wires { display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* (a pale panel, like the TV's module plate, so black and white wires both show) */
.wire { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 16px; text-transform: none; letter-spacing: 0; background: linear-gradient(180deg, #e3e7ee, #b9c0cc); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink), 4px 9px 0 var(--pink); }
.wire b { width: 30px; font: 34px var(--display); color: var(--ink); text-shadow: none; }
.wire span { position: relative; flex: 1; height: 16px; border-radius: 8px; background: var(--w); box-shadow: 0 0 0 3px var(--ink), inset 0 3px 0 rgba(255,255,255,.4); }
.wire i { width: 42px; font: normal 22px system-ui, sans-serif; color: var(--ink); }
.wire:disabled { opacity: 1; filter: grayscale(.6) brightness(.7); }
.wire:disabled span { background: linear-gradient(90deg, var(--w) 0 42%, transparent 42% 58%, var(--w) 58%); box-shadow: none; }
.wire:disabled i { font: 16px var(--label); letter-spacing: 2px; text-transform: uppercase; }
.wire.down { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink), 2px 3px 0 var(--pink); }
.defuse .pads { width: min(300px, 100%); }
.defuse .pads button { font-size: 64px; text-transform: none; } /* (λ must stay λ: the manual tells λ from Λ) */
/* defusing with the manual too, upright: the manual shorter, the wires fit under it */
#view.solo .manual { flex: 1 1 auto; min-height: 120px; max-height: 40cqh; }
#view.solo .wire { height: clamp(40px, calc((60cqh - 90px) / var(--n) - 10px), 56px); }
#view.solo .defuse { gap: 8px; }
#view.solo .defuse .pads { width: min(240px, 100%); }
#view.solo .hit.bombbtn { width: min(44vw, 180px); }
/* reading the manual, and nothing else: it gets the screen */
#view.reader { justify-content: flex-start; }
#view.reader .manual { width: min(100%, 560px); max-height: none; flex: 1; font-size: calc(16px * var(--ls)); }
.manual section + section { margin-top: 10px; padding-top: 8px; border-top: 2px dashed rgba(11,7,16,.25); }
/* the couch's vote on the next microgame: two cards side by side, its picture, its name, what you do */
.cvote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(420px, 100%); }
.cvote button { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 6px 10px; text-align: left; text-transform: none; letter-spacing: 0; border-color: var(--cyan); background: rgba(0,0,0,.65); }
.cvote button img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 3px solid var(--ink); }
.cvote button b { font: calc(22px * var(--ls))/1.05 var(--display); letter-spacing: 1px; color: #fff; text-shadow: 2px 2px 0 var(--pink); text-transform: uppercase; }
.cvote button span { font: 700 calc(15px * var(--ls))/1.25 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif; color: #ddd; }
.cvote button.on { border-color: var(--acid); background: rgba(249,240,2,.14); box-shadow: 5px 5px 0 var(--acid); }
.reacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(340px, 100%); }
.reacts button { font: 40px system-ui, "Apple Color Emoji", sans-serif; padding: 10px 0; border-color: var(--cyan); box-shadow: 4px 4px 0 var(--pink); text-transform: none; }
.reacts button.pop { transform: scale(1.25); }
.heckle { background: #39ff14; color: var(--ink); border-color: var(--ink); }
.heckle:disabled { background: #444; color: #aaa; }
#me #pause, #me #full { margin-left: 10px; padding: 2px 12px; font-size: 22px; box-shadow: 3px 3px 0 var(--pink); }
#me #full + #pause { margin-left: 8px; }
.tip { position: fixed; left: 12px; right: 12px; bottom: calc(16px + var(--random-nav-h, env(safe-area-inset-bottom, 0px))); z-index: 5; background: var(--paper, #fdf6e3); color: #16182b; border: 3px solid #0b0710; box-shadow: 5px 5px 0 var(--pink); padding: 12px 14px; font: 17px/1.4 system-ui, sans-serif; }
#face-skip { font-size: 16px; padding: 8px 14px; opacity: .85; }

/* the setup wizard */
.wz-title { font-size: clamp(28px, 9vw, 44px); }
.cards.wz { padding: 6px 10px 10px 4px; } /* (a long list scrolls with the whole screen, not in a box of its own) */
.cards.wz button.voted { border-color: var(--acid); }
.cards.wz button.chosen { background: var(--acid); } .cards.wz button.chosen b, .cards.wz button.chosen span { color: var(--ink); text-shadow: none; }
.cards.wz small { background: var(--acid); }
.cards.wz button.go b { font-size: 26px; } /* (the first page's start-now cards: a longer name, "Quick night, Start") */
.wz-rows { display: flex; flex-direction: column; gap: 8px; width: min(420px, 100%); padding: 4px 8px 8px 2px; }
:is(.wz-rows, .wz-group) > button { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-transform: none; padding: 10px 14px; }
:is(.wz-rows, .wz-group) > button b { color: var(--acid); }
:is(.wz-rows, .wz-group) > button.on b { color: #35e06b; } :is(.wz-rows, .wz-group) > button.off { opacity: .6; } :is(.wz-rows, .wz-group) > button.off b { color: var(--pink); }
.wz-player { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.3); padding: 8px; }
.wz-player i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; }
.wz-player span { flex: 1; text-align: left; font: calc(22px * var(--ls)) var(--label); letter-spacing: 2px; text-transform: uppercase; }
.wz-player button { padding: 8px 12px; font-size: calc(17px * var(--ls)); min-height: 44px; }
.wz-player .mate { flex-basis: 100%; text-transform: none; }
.wz-lines { background: var(--paper); color: var(--ink); padding: 10px 16px; box-shadow: 5px 5px 0 var(--pink); width: min(420px, 100%); }
.wz-lines p { margin: 6px 0; }
button:disabled { opacity: .4; }
.wz-back { min-height: 44px; }
.practice-tag { margin: 0; font: calc(15px * var(--ls)) var(--label); letter-spacing: 2px; text-transform: uppercase; color: var(--acid); }
#me { flex-wrap: wrap; row-gap: 6px; }
#me #ready-chip, #me #start-chip { margin-left: 10px; padding: 4px 12px; font-size: calc(18px * var(--ls)); min-height: 40px; box-shadow: 3px 3px 0 var(--ink); }
#me #ready-chip { background: var(--pink); border-color: #fff; animation: nudge 1.6s ease-in-out infinite; }
#me #ready-chip.on { background: #35e06b; color: var(--ink); animation: none; opacity: 1; }
#me #start-chip { background: var(--acid); color: var(--ink); }
body.practicing #me { border-bottom-color: var(--acid); }
@keyframes nudge { 50% { box-shadow: 0 0 0 4px var(--acid), 3px 3px 0 var(--ink); } }
@media (prefers-reduced-motion: reduce) { #me #ready-chip { animation: none; } }
.cards.wz > button { flex: none; display: grid; grid-template-columns: 108px 1fr; column-gap: 12px; align-items: center; }
.cards.wz > button > :not(img) { grid-column: 2; }
.cards.wz > button:not(:has(img)) { grid-template-columns: 1fr; } .cards.wz > button:not(:has(img)) > * { grid-column: 1; }
.cards.wz img.art { grid-column: 1; grid-row: 1 / span 3; width: 108px; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid rgba(255,255,255,.4); }
.cards.wz button.voted img.art, .cards.wz button.chosen img.art { animation: kenburns 3s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.06); } }
.cards.wz button { overflow: hidden; }
:is(.wz-rows, .wz-group) > button img.thumb { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; flex: none; }
:is(.wz-rows, .wz-group) > button span { flex: 1; text-align: left; }
:is(.wz-rows, .wz-group) > button.head { background: rgba(5,217,232,.25); border-color: var(--cyan); margin-top: 8px; }
:is(.wz-rows, .wz-group) > button.head.off { opacity: .8; }
/* a group of games, folded to one line until it's opened (the switch-all row first inside it) */
.wz-group > button { width: 100%; margin-top: 8px; } /* (a details box isn't a flex column everywhere: each row takes the full width itself) */
.wz-group summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; list-style: none; cursor: pointer; font: calc(22px * var(--ls)) var(--label); letter-spacing: 2px; text-transform: uppercase; background: rgba(5,217,232,.25); border: 3px solid var(--cyan); box-shadow: 5px 5px 0 var(--pink); }
.wz-group summary::-webkit-details-marker { display: none; }
.wz-group summary::before { content: "▸"; color: var(--cyan); transition: transform .15s; }
.wz-group[open] summary::before { transform: rotate(90deg); }
.wz-group summary span { flex: 1; text-align: left; }
.wz-group summary b { color: #35e06b; font-size: .8em; }
.wz-group.off summary b { color: var(--pink); }
.wz-group > button.head { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .wz-group summary::before { transition: none; } }

/* a first-time hint: a strip under the header (in the flow, so it never
   covers a control: the controls make room), tap to dismiss */
#hint { position: relative; flex: none; align-self: stretch; margin: 8px 12px 0; padding: 10px 14px; background: #f9f002; color: #0b0710; border: 3px solid #0b0710; border-radius: 14px; box-shadow: 4px 4px 0 var(--pink, #ff2a6d); font: 800 calc(17px * var(--ls))/1.3 ui-rounded, system-ui, sans-serif; }
#hint[hidden] { display: none; }
#hint.in { animation: hint-in .25s ease-out; }
@keyframes hint-in { from { transform: translateY(-16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #hint.in { animation: none; } }

/* ---------------------------------------------------------------- tactile
   Controls you can feel: a lip under every button that goes when you press,
   a shine on top, a well for the stick to sit in. Still flat colours and
   ink edges; all of it's box-shadow and gradients, no images. */
button, .btn { transition: transform .06s ease-out, box-shadow .06s ease-out; box-shadow: 5px 5px 0 var(--pink), inset 0 2px 0 rgba(255,255,255,.14); }
button:active, .btn:active { box-shadow: 1px 1px 0 var(--pink), inset 0 2px 0 rgba(255,255,255,.08); }
.big { background: linear-gradient(180deg, #ff5a8d, var(--pink) 45%, #e0195a); box-shadow: 6px 6px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.18); text-shadow: 2px 2px 0 rgba(11,7,16,.45); }
.big:active { transform: translate(5px, 5px); box-shadow: 1px 1px 0 var(--ink), inset 0 3px 0 rgba(0,0,0,.18); }
.btn.big { background: rgba(0,0,0,.6); box-shadow: 5px 5px 0 var(--pink), inset 0 2px 0 rgba(255,255,255,.14); text-shadow: none; }
.heckle { background: linear-gradient(180deg, #7dff5c, #39ff14 50%, #22c800); text-shadow: none; }
.heckle:disabled { background: #444; }
/* the one big button: a dome, lit from the top left, on a thick lip */
.hit { background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.55) 0 9%, rgba(255,255,255,.12) 10% 30%, transparent 46%), radial-gradient(circle at 50% 70%, var(--me), color-mix(in srgb, var(--me) 62%, #0b0710) 100%); box-shadow: 0 14px 0 var(--ink), 10px 20px 0 var(--pink), inset 0 -10px 0 rgba(0,0,0,.18); }
.hit:active, .hit.down { transform: translateY(12px) scale(.97); box-shadow: 0 2px 0 var(--ink), 4px 6px 0 var(--pink), inset 0 6px 14px rgba(0,0,0,.3); }
.hit.fire:disabled { background: #444; box-shadow: 0 6px 0 var(--ink), 4px 10px 0 var(--pink); }
/* the stick: a sunken well with a guide ring; the knob's a dome that lifts when held */
.stick { background: radial-gradient(circle, transparent 0 44%, rgba(5,217,232,.22) 45% 46.5%, transparent 47.5%), radial-gradient(circle at 50% 42%, #1a0d2e, #07030f 72%); box-shadow: inset 0 8px 20px rgba(0,0,0,.75), inset 0 -2px 0 rgba(5,217,232,.25), 0 0 0 7px rgba(5,217,232,.1), 6px 8px 0 var(--ink); }
.stick i { background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.6) 0 11%, rgba(255,255,255,.1) 12% 30%, transparent 44%), radial-gradient(circle at 50% 68%, var(--me), color-mix(in srgb, var(--me) 60%, #0b0710)); box-shadow: 0 6px 0 var(--ink), 5px 10px 0 var(--pink); transition: scale .08s, box-shadow .08s; }
.stick:active i { scale: 1.08; box-shadow: 0 10px 0 var(--ink), 7px 15px 0 var(--pink); }
.level i { background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.55) 0 14%, transparent 40%), var(--me); box-shadow: 0 4px 0 var(--ink); }
/* action buttons: acid yellow (a second one's cyan), the same colours the TV's how-to phones use */
.act { background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.7) 0 9%, rgba(255,255,255,.15) 10% 28%, transparent 42%), linear-gradient(180deg, #fff65c, var(--acid) 45%, #cfc600); color: var(--ink); border: 5px solid var(--ink); font-size: 28px; text-shadow: none; box-shadow: 0 10px 0 var(--ink), 6px 15px 0 var(--pink); }
.acts .act.two { background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.7) 0 9%, rgba(255,255,255,.15) 10% 28%, transparent 42%), linear-gradient(180deg, #6ff3fb, var(--cyan) 45%, #00a8b5); color: var(--ink); }
.act:active { transform: translateY(8px) scale(.97); box-shadow: 0 2px 0 var(--ink), 3px 5px 0 var(--pink); }
.flare { background: linear-gradient(180deg, #fff65c, var(--acid) 50%, #cfc600); box-shadow: 0 8px 0 var(--ink), 5px 12px 0 var(--pink), inset 0 3px 0 rgba(255,255,255,.5); }
.flare:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink), 3px 5px 0 var(--pink); }
/* d-pad and coloured pads: keys with a lip */
.dpad button { background: linear-gradient(180deg, #2b1846, #120824); box-shadow: 0 7px 0 var(--ink), 5px 11px 0 var(--pink), inset 0 2px 0 rgba(255,255,255,.18); }
.dpad button.down, .dpad button:active { background: var(--me); transform: translateY(6px); box-shadow: 0 1px 0 var(--ink), 3px 4px 0 var(--pink), inset 0 4px 10px rgba(0,0,0,.3); }
.pads button { box-shadow: 0 8px 0 var(--ink), 6px 12px 0 #fff, inset 0 5px 0 rgba(255,255,255,.35), inset 0 -8px 0 rgba(0,0,0,.2); text-shadow: 0 2px 0 rgba(255,255,255,.35); }
.pads button.down { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink), 3px 5px 0 #fff, inset 0 6px 12px rgba(0,0,0,.3); }
.reacts button { background: linear-gradient(180deg, #2b1846, #120824); }
.reacts button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--pink); }
.swatches button { box-shadow: 3px 3px 0 var(--pink), inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.2); }
/* surfaces you drag on: a sunken pad */
.trackpad, .sling { box-shadow: inset 0 8px 24px rgba(0,0,0,.6); }
.sling.active { box-shadow: 8px 8px 0 var(--pink), inset 0 8px 24px rgba(0,0,0,.5); }
.radar { box-shadow: 5px 5px 0 var(--pink), inset 0 0 24px rgba(5,217,232,.18); }
/* paper chips (hints, the manual): a crisp ink edge like the TV's panels */
.hint, .manual, .wz-lines { border: 2px solid var(--ink); }
/* the waiting screens: a soft pool of your colour behind the words */
#view { background: radial-gradient(ellipse 70% 42% at 50% 46%, color-mix(in srgb, var(--me) 16%, transparent), transparent 70%); }
.msg { text-shadow: 4px 4px 0 var(--pink), 0 0 26px rgba(255,42,109,.35); }
/* a game card with no picture yet: wallpaper and a waiting blob, not a black hole */
.cards .shot { background: radial-gradient(circle at 50% 50%, rgba(255,42,109,.28), transparent 62%), repeating-linear-gradient(-30deg, rgba(5,217,232,.1) 0 10px, transparent 10px 22px), #1b1030; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.cards .shot::before { content: ""; position: absolute; left: 50%; top: 52%; width: 64px; height: 56px; margin: -28px 0 0 -32px; border-radius: 50% 50% 44% 44%; border: 3px solid var(--ink); pointer-events: none;
  background: radial-gradient(circle at 36% 44%, var(--ink) 0 5px, transparent 6px), radial-gradient(circle at 64% 44%, var(--ink) 0 5px, transparent 6px), radial-gradient(circle at 32% 26%, rgba(255,255,255,.6) 0 5px, transparent 6px), var(--pink); box-shadow: 0 5px 0 var(--ink); animation: wobble 1.6s ease-in-out infinite; }
@keyframes wobble { 50% { transform: scale(1.08, .92) translateY(4px); } }
.cards .shot img { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .cards .shot::before { animation: none; } button, .btn { transition: none; } }

/* the time left to decide: a bar that drains (and goes red near the end) */
.timer { flex: none; width: min(420px, 100%); height: 10px; background: rgba(255,255,255,.15); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--pink); overflow: hidden; }
.timer i { display: block; height: 100%; background: var(--acid); transform-origin: left; animation: drain linear forwards; }
@keyframes drain { 0% { transform: scaleX(1); } 70% { background: var(--acid); } 100% { transform: scaleX(0); background: var(--pink); } }

/* a game's controls fit the room the view has (a hint strip or a practice
   tag takes some): it's a container, and what could run long sizes to it */
body.ctl #pad { height: 100dvh; min-height: 0; } /* (a definite height, so the view's cq units resolve: a controls screen never scrolls) */
body.ctl #view { container-type: size; min-height: 0; }
body.ctl .pads:not([style*="grid-template-columns"]) { width: min(360px, 100%, calc((100cqh - 150px) * 2 / var(--prows, 2))); } /* (upright: two across, --prows down) */
body.ctl .sketch { width: min(92vw, 420px, calc(100cqh - 230px)); }
body.ctl #view[data-kind="draw"] .swatches { flex-wrap: nowrap; gap: 6px; }
body.ctl #view[data-kind="draw"] .swatches button { width: min(40px, 10vw); height: min(40px, 10vw); }

/* ---------------------------------------------------------------- sideways
   A minigame's controls are laid out for a phone on its side, like a
   gamepad: the stick (or d-pad, or tilt bubble) under the left thumb, the
   buttons under the right, what to look at in between. A phone held upright
   when a game's controls arrive is asked to turn (the intro asks first), and
   can keep playing upright instead (remembered). Menus work either way up. */
#rotate, .sideways { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  body.turn:not(.upright) #pad:not([hidden]) ~ #rotate { display: grid; position: fixed; inset: 0; z-index: 50; place-content: center; justify-items: center; gap: 18px; text-align: center; padding: 24px; background: rgba(13,2,33,.96); }
  body:not(.upright) .sideways { display: block; }
}
#rotate b { font: 96px/1 system-ui, sans-serif; color: var(--acid); animation: turn 1.8s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
#rotate p { margin: 0; font: calc(30px * var(--ls)) var(--label); text-transform: uppercase; letter-spacing: 3px; }
#rotate small { font-size: 16px; color: #ccc; }
#rotate button { font-size: calc(16px * var(--ls)); padding: 8px 14px; opacity: .85; }
.sideways { margin: 0; font: calc(20px * var(--ls)) var(--label); letter-spacing: 2px; text-transform: uppercase; color: var(--ink); background: var(--acid); padding: 4px 12px; box-shadow: 4px 4px 0 var(--pink); }
@media (prefers-reduced-motion: reduce) { #rotate b { animation: none; transform: rotate(-90deg); } }

/* a phone on its side (a landscape screen this short is a phone) */
@media (orientation: landscape) and (max-height: 540px) {
  #me { padding: max(4px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left)); font-size: calc(20px * var(--ls)); }
  #me i { width: 28px; height: 28px; font-size: 14px; line-height: 22px; }
  #me #pause, #me #full { font-size: 18px; padding: 0 10px; }
  #view { gap: 12px; padding: 10px max(16px, env(safe-area-inset-right)) max(10px, var(--random-nav-h, env(safe-area-inset-bottom))) max(16px, env(safe-area-inset-left)); }
  .msg { font-size: clamp(28px, 9dvh, 44px); }
  .cmd { font-size: clamp(30px, 11dvh, 48px); }
  .hit { width: min(56dvh, 260px); }
  /* menus: cards two across */
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(760px, 100%); }
  .cards.wz { max-height: 64dvh; }

  /* the game controls: three columns, left thumb | the middle | right thumb.
     Sized to the room the view really has (cq units: it's a container), so
     a hint strip or a practice tag makes them smaller, never covers them. */
  body.ctl #view { container-type: size; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-auto-flow: row dense; align-content: center; align-items: center; justify-items: center; column-gap: 28px; row-gap: 0; }
  body.ctl #view > * { grid-column: 2; margin: 5px 0; }
  body.ctl .stickrow, body.ctl .firerow { display: contents; }
  body.ctl #view > :is(.stick:not(.mini), .dpad, .level, .sketch, .trackpad) { grid-column: 1; grid-row: 1 / span 6; }
  body.ctl .stickrow > :is(.act, .acts), body.ctl .firerow > * { grid-column: 3; grid-row: 1 / span 6; }
  body.ctl .stickrow > .stick { grid-column: 1; grid-row: 1 / span 6; }
  body.ctl .firerow > .flare { grid-row: 4 / span 3; } body.ctl .firerow > .fire { grid-row: 1 / span 3; }
  body.ctl #view > :is(.hit, .stick.mini) { grid-column: 3; grid-row: 1 / span 6; }
  body.ctl #view > .sling { grid-column: 1 / -1; width: 100%; height: calc(100cqh - 76px); }
  body.ctl .stick { width: min(190px, 62cqh); height: min(190px, 62cqh); }
  body.ctl .stickrow.solo .stick { width: min(230px, 72cqh); height: min(230px, 72cqh); }
  body.ctl .acts { gap: min(14px, 3cqh); }
  body.ctl .acts .act { width: min(112px, 40cqh); height: min(112px, 40cqh); font-size: clamp(18px, 8cqh, 28px); }
  body.ctl .act { width: min(130px, 46cqh); height: min(130px, 46cqh); }
  body.ctl .radar { width: min(100%, 360px, calc((100cqh - 110px) * 1.72)); }
  body.ctl .dpad { grid-template: repeat(3, min(25cqh, 84px)) / repeat(3, min(25cqh, 84px)); }
  body.ctl .dpad button { font-size: 30px; padding: 0; }
  body.ctl .level { width: min(170px, 56cqh); height: min(170px, 56cqh); }
  body.ctl .sketch { width: min(46vw, calc(100cqh - 10px)); }
  body.ctl .trackpad { width: min(62vw, 560px); height: calc(100cqh - 10px); min-height: 0; }
  body.ctl .hit { width: min(62cqh, 260px); font-size: clamp(24px, 11cqh, 48px); }
  body.ctl .hit.fire, body.ctl .firerow .hit.fire { width: min(46cqh, 170px); }
  body.ctl .flare { width: min(96px, 34cqh); height: min(96px, 34cqh); }
  body.ctl .pads:not([style*="grid-template-columns"]) { grid-template-columns: repeat(var(--lcols, 2), minmax(0, 1fr)); width: min(100%, calc(var(--lcols, 2) * (100cqh - 120px) / var(--lrows, 1))); }
  body.ctl .pads:not(.small) button { font-size: clamp(28px, 12cqh, 44px); }
  body.ctl .pads.worded { width: min(100%, 560px); gap: 8px 14px; }
  body.ctl .pads.worded button { min-height: min(96px, 22cqh); padding: 4px 6px; }
  body.ctl .pads.worded button b { font-size: min(calc(30px * var(--ls)), 9cqh); }
  body.ctl .msg, body.ctl .cmd { font-size: clamp(24px, 11cqh, 44px); }
  /* Bomb Squad on its side: manual and module side by side (or the manual alone, in two columns) */
  body.ctl #view[data-kind="bomb"] { display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: 20px; }
  body.ctl #view[data-kind="bomb"] > * { grid-column: auto; margin: 0; }
  body.ctl #view[data-kind="bomb"] > .hint { display: none; } /* (the role chip and the TV say it) */
  body.ctl #view[data-kind="bomb"] .manual, body.ctl #view.solo .manual { flex: 1 1 55%; max-height: 100cqh; max-width: none; width: auto; }
  body.ctl #view.reader .manual { columns: 2; column-gap: 28px; flex-basis: 100%; }
  body.ctl #view.reader .manual section { break-inside: avoid; }
  body.ctl #view[data-kind="bomb"] .defuse { flex: 1 1 45%; justify-content: center; gap: 8px; max-height: 100cqh; }
  body.ctl #view[data-kind="bomb"]:not(.solo) .defuse { max-width: 620px; }
  body.ctl .wires { gap: 8px; }
  body.ctl .defuse:has(.wires) > .hint { display: none; } /* (on its side the wires need the height; the TV and the manual say what to do) */
  body.ctl .wire, body.ctl #view.solo .wire { height: clamp(40px, calc(100cqh / var(--n) - 8px), 64px); }
  body.ctl .defuse .pads, body.ctl #view.solo .defuse .pads { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: min(100%, calc(100cqh - 60px)); gap: 10px; }
  body.ctl .defuse .pads button { font-size: clamp(32px, 13cqh, 56px); }
  body.ctl .defuse .hit.bombbtn, body.ctl #view.solo .hit.bombbtn { width: min(70cqh, 240px); font-size: clamp(24px, 9cqh, 40px); }
  body.ctl .practice-tag { margin: 0; white-space: nowrap; }
  /* the board's roll on its side: what's up and your items on the left, the big ROLL on the right */
  #view[data-kind="roll"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; justify-items: center; column-gap: 28px; row-gap: 10px; }
  #view[data-kind="roll"] > * { grid-column: 1; }
  #view[data-kind="roll"] > .hit { grid-column: 2; grid-row: 1 / span 6; width: min(52dvh, 220px); }
  #hint { margin: 6px max(12px, env(safe-area-inset-left)) 0; padding: 6px 12px; font-size: calc(15px * var(--ls)); }
}
/* (a bot's second line: its persona beside its teammate wish; the remove button stays up by its name) */
.wz-player .persona { order: 1; flex: 1 1 40%; text-transform: none; }
.wz-player .persona ~ .mate { order: 2; flex: 1 1 40%; }
.lineup { text-transform: none; }

/* an action's cooldown, drawn the moment it's pressed or the TV says it began (controller.js cooling): a shade that sweeps away
   (--done: how far it already was, for a button redrawn mid-cooldown) */
@property --left { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.act { position: relative; }
.act.cooling::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; background: conic-gradient(rgba(13, 2, 33, .62) var(--left), transparent 0); animation: cooldown var(--cool, 1s) linear var(--done, 0s) forwards; }
@keyframes cooldown { from { --left: 100%; } to { --left: 0%; } }
/* …and back: a flash and a ring that rings out (controller.js back) */
.act.ready { animation: back-flash .35s ease-out; }
.act.ready::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; border: 5px solid #fff; animation: back-ring .45s ease-out forwards; }
@keyframes back-flash { from { filter: brightness(1.5); } to { filter: none; } }
@keyframes back-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

/* playing from somewhere else: the question, the header's "watching" chip and its menu */
button.link { background: none; border: 0; box-shadow: none; color: var(--cyan); text-decoration: underline; font: inherit; padding: 6px; }
#how .actions p.small { margin: -6px 0 6px; color: #d9d0ff; font-size: 14px; text-align: left; }
#me #watching { margin-left: 10px; padding: 2px 10px; font-size: calc(15px * var(--ls)); letter-spacing: 1px; text-transform: none; box-shadow: 3px 3px 0 var(--cyan); }
#views { position: fixed; inset: auto 12px 12px; z-index: 60; display: grid; gap: 10px; padding: 16px; background: #1b0b33; border: 3px solid var(--cyan); box-shadow: 6px 6px 0 var(--pink); }
#views[hidden] { display: none; }
/* behind an open sheet: the rest of the phone darkened, and out of reach (a tap on it closes the sheet) */
#dim { position: fixed; inset: 0; z-index: 59; background: rgba(5, 0, 15, .72); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
#dim[hidden] { display: none; }
#views p { margin: 0; font: calc(22px * var(--ls)) var(--label); letter-spacing: 2px; text-transform: uppercase; }
#views button.on { background: var(--acid); color: var(--ink); }

/* "Just this phone": the game's live picture on top, the controls below it,
   upright like a DS whatever the game (the controls' upright layout, fitted
   to what's left) */
#live { display: none; }
body.solo #live { display: block; position: fixed; top: 0; left: 0; width: 100%; height: var(--live-h); background: #000; object-fit: contain; z-index: 20; }
body.solo { --live-h: min(56.25vw, 42dvh); }
body.solo .screen { margin-top: var(--live-h); min-height: calc(100dvh - var(--live-h)); }
body.solo.ctl #pad { height: calc(100dvh - var(--live-h)); min-height: 0; } /* (controls: exactly the room under the picture) */
body.solo:not(.ctl) #pad { height: auto; min-height: calc(100dvh - var(--live-h)); } /* (menus and lists: as long as they are, the page scrolling under the pinned picture) */
body.solo #rotate, body.solo .sideways { display: none !important; } /* (never asked to turn: it's upright by design) */
/* (the picture takes the top: the header stays one line, and the big controls shrink to what's left) */
body.solo #me { flex-wrap: nowrap; padding: 6px 12px; gap: 8px; font-size: calc(20px * var(--ls)); }
body.solo #me i { width: 28px; height: 28px; }
body.solo #me #watching { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; }
body.solo #me #full, body.solo #me #pause { margin-left: 6px; padding: 0 8px; font-size: 18px; }
body.solo .trackpad { min-height: 90px; }
body.solo.ctl .hit.fire { width: min(40vw, calc(100cqh * .38), 240px); }
body.solo.ctl .act { width: min(30vw, calc(100cqh * .3), 130px); height: min(30vw, calc(100cqh * .3), 130px); }

/* the header: your blob and name, your role, one gear button (full screen, pause and what you're watching are in its sheet) */
#me #gear { margin-left: auto; padding: 0 12px; font-size: 22px; box-shadow: 3px 3px 0 var(--pink); }
#me > span:not(:empty) ~ #gear { margin-left: 10px; }
#me #full, #me #pause, #me #watching { display: none !important; }
#views button.two-line { display: grid; gap: 2px; }
#views button.two-line small { font-size: .7em; letter-spacing: 1px; opacity: .85; }
/* drawn icons (icons.js), in text where an emoji would have been: a picture on the line, as tall as a capital and a bit */
svg.ic { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.24em; position: static; overflow: visible; flex: none; }
[data-icon] { display: inline-block; min-width: 1.2em; line-height: 1; }
[data-icon] > svg.ic { vertical-align: -.24em; }
.dpad button svg.ic, #me button svg.ic { vertical-align: middle; }
svg.ic[class*="ic-tile-"] { width: 1.7em; height: 1.7em; vertical-align: -.5em; } /* (the fork's look ahead: tiles need the room) */