/* A 1980s office terminal: dark blue CRT glass, cyan glowing lines, faint digits. */
@font-face { font-family:"Share Tech Mono"; src:url(fonts/ShareTechMono-Regular.woff2) format("woff2"); font-display:swap; }
:root {
  color-scheme: dark;
  --bg:#01060d; --glass:#06192b; --glass-deep:#020c17;
  --text:#a8ecff; --dim:#5b9fbb; --line:#7ddcff; --glow-rgb:110,220,255; --glow:rgba(var(--glow-rgb),.5);
  --glass-hi:#0b2944; --edge:#0b2b44; --rim-rgb:60,160,220; --mark:#eafcff; --digit-rgb:150,230,255; --trail:rgba(168,236,255,.45);
  --panel-rgb:2,12,23; --card-rgb:2,14,26; --sheet-rgb:3,16,29;
  --ok:#9ef0b0; --bad:#f4a6cc; --warn:#f2e49a;
  --font:"Share Tech Mono", ui-monospace, monospace;
}
/* Screen tints of this look, as on old monitors: blue (the default), green and
   amber. theme.js sets data-tint on <html>; a picker tile shows its own tint
   with data-tint-preview. */
[data-theme="lumon"][data-tint="green"], [data-tint-preview="green"] {
  --bg:#010803; --glass:#06200f; --glass-deep:#021209; --glass-hi:#0b3a1c; --edge:#0b3d1e;
  --text:#b0ffc4; --dim:#5bbb78; --line:#7dff9f; --glow-rgb:110,255,150; --glow:rgba(var(--glow-rgb),.5);
  --rim-rgb:60,220,110; --mark:#eaffef; --digit-rgb:150,255,180; --trail:rgba(168,255,190,.45);
  --panel-rgb:2,18,8; --card-rgb:2,20,10; --sheet-rgb:3,22,11;
}
[data-theme="lumon"][data-tint="amber"], [data-tint-preview="amber"] {
  --bg:#0a0501; --glass:#2b1806; --glass-deep:#170c02; --glass-hi:#44290b; --edge:#442b0b;
  --text:#ffdcaa; --dim:#bb8a4f; --line:#ffbf5e; --glow-rgb:255,180,80; --glow:rgba(var(--glow-rgb),.5);
  --rim-rgb:220,140,40; --mark:#fff3e0; --digit-rgb:255,200,130; --trail:rgba(255,210,150,.45);
  --panel-rgb:23,12,2; --card-rgb:26,14,2; --sheet-rgb:29,16,3;
}
[data-tint-preview="blue"] {
  --glass-deep:#020c17; --text:#a8ecff; --dim:#5b9fbb; --line:#7ddcff; --glow-rgb:110,220,255; --glow:rgba(var(--glow-rgb),.5); --mark:#eafcff;
}
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 var(--font); text-shadow:0 0 6px var(--glow); }
a { color:var(--text); }
:focus-visible { outline:2px solid var(--warn); outline-offset:3px; }

/* The screen: the CRT glass with scanlines and a dark edge */
.screen { position:relative; overflow:hidden; max-width:980px; min-height:calc(100vh - 32px); min-height:calc(100dvh - 32px); margin:16px auto; padding:18px 22px 14px;
  display:flex; flex-direction:column; gap:18px; border-radius:30px; border:2px solid var(--edge);
  background:radial-gradient(ellipse at 50% 45%, var(--glass-hi) 0%, var(--glass) 55%, var(--glass-deep) 100%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.75), inset 0 0 0 6px rgba(0,0,0,.35), 0 0 40px rgba(var(--rim-rgb),.12); }
.screen::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:5; border-radius:inherit;
  background:repeating-linear-gradient(rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
.screen > * { position:relative; z-index:1; }
.digits { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; } /* the canvas has device pixels; the CSS size keeps it to the screen */
@media (max-width:600px) { .screen { margin:8px; min-height:calc(100vh - 16px); min-height:calc(100dvh - 16px); padding:14px 14px 10px; border-radius:20px; } }
@media (max-width:440px) { .bar .where { display:none; } .bar .pct { margin-left:auto; } }
/* Larger touch targets on phones */
@media (pointer:coarse) {
  button.link { padding:12px 0; }
  .actions { gap:28px; }
}

/* Header bar: name on the left, progress and globe on the right, a double rule below */
.bar { display:flex; align-items:center; gap:14px; border:2px solid var(--line); padding:10px 8px 10px 14px; margin-top:12px; box-shadow:0 0 10px var(--glow); background:rgba(var(--panel-rgb),.6); position:relative; isolation:isolate; }
/* As in the show, the box fills with the share done, from the logo end to the left; the text inverts over it */
.bar { --logo-w:128px; --fill-end:calc(var(--logo-w) * .6 + 8px); } /* the fill stops where the globe starts to overlap the box */
.bar::before { content:""; position:absolute; z-index:-1; top:0; bottom:0; right:var(--fill-end); width:calc((100% - var(--fill-end)) * var(--done, 0) / 100); background:var(--line); transition:width .6s; }
.bar .title, .bar .where, .bar .pct { mix-blend-mode:difference; }
.bar .title { font-size:1.35rem; letter-spacing:.06em; text-decoration:none; }
.bar .where { color:var(--dim); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar .pct { white-space:nowrap; }
.bar .logo { width:var(--logo-w); height:64px; flex:none; margin:-14px -2px -14px 0; } /* larger than the bar, as in the show */
@media (max-width:600px) { .bar { --logo-w:92px; } .bar .logo { height:50px; margin:-10px 0; } }
.rule { height:7px; margin-top:-12px; border-top:2px solid var(--line); border-bottom:1px solid var(--line); opacity:.8; }
.hex { margin-top:auto; text-align:center; color:var(--dim); font-size:.85rem; letter-spacing:.12em; }

/* Globe logo */
.globe { display:block; width:100%; height:100%; overflow:visible; }
.globe path { fill:none; stroke:var(--line); stroke-width:2.8; stroke-linecap:round; filter:drop-shadow(0 0 2px var(--glow)); }
.globe .band rect { fill:var(--glass-deep); }
.globe text { fill:var(--text); font:22px var(--font); letter-spacing:2px; }

/* The Syndrome emblem, drawn as terminal lines: the S stays bright on dark glass */
.mark { display:block; width:100%; height:100%; overflow:visible; }
.mark .disc { fill:var(--glass-deep); stroke:var(--line); stroke-width:2.8; filter:drop-shadow(0 0 3px var(--glow)); }
.mark .ring { fill:none; stroke:var(--line); stroke-width:1.4; opacity:.7; }
.mark .s { fill:var(--mark); filter:drop-shadow(0 0 4px var(--glow)); }

/* Intro: the globe builds itself in the middle of the screen */
.intro { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--bg); transition:background .8s; cursor:pointer; }
.intro.leaving { background:transparent; }
.intro .globe { width:min(78vw, 460px); height:auto; }
.intro .globe path { stroke-width:1.7; transition:stroke-width .85s cubic-bezier(.6,0,.2,1); }
.intro.leaving .globe path { stroke-width:2.8; } /* ends at the header line width, so the swap does not show */
.intro .globe.pulse .lines { animation:pulse .5s ease-out; }
.intro .band { transition:opacity .4s; }
.intro .band rect { animation:fadein .35s both; }
.intro .band text tspan { fill-opacity:0; }
.intro .band text tspan.on { animation:glyph .5s both; }
.intro .skip { position:fixed; right:20px; bottom:20px; }
.intro.leaving .skip { display:none; }
@keyframes pulse { 40% { filter:brightness(2.2) drop-shadow(0 0 8px var(--glow)); } }
@keyframes fadein { from { opacity:0; } }
@keyframes glyph { 0% { fill-opacity:0; stroke:#fff; stroke-width:0; } 35% { fill-opacity:1; stroke:#fff; stroke-width:2.5; } 100% { fill-opacity:1; stroke-width:0; } }

/* Buttons: outlined terminal keys */
button, .button { font:inherit; color:var(--text); text-shadow:inherit; background:rgba(var(--panel-rgb),.7); border:2px solid var(--line); padding:10px 14px; cursor:pointer;
  text-align:center; text-decoration:none; display:inline-block; box-shadow:0 0 8px rgba(var(--glow-rgb),.2); transition:background .15s, box-shadow .15s; }
button:hover:not(:disabled), .button:hover { background:rgba(var(--glow-rgb),.14); box-shadow:0 0 14px var(--glow); }
button:disabled { cursor:default; opacity:.55; }
button.correct { border-color:var(--ok); color:var(--ok); opacity:1; box-shadow:0 0 14px rgba(158,240,176,.5); }
button.wrong { border-color:var(--bad); color:var(--bad); opacity:1; }
button.link { background:none; border:none; box-shadow:none; padding:6px 0; color:var(--dim); text-decoration:underline; }
button small { display:block; color:var(--dim); }
.next { width:100%; margin-top:12px; letter-spacing:.12em; text-transform:uppercase; }
.actions { display:flex; gap:22px; margin-top:6px; }
.hidden { display:none; }

/* The question box: it floats, and its letters pop in at random */
.stage { display:flex; flex-direction:column; gap:16px; min-width:0; }
.float { animation:hover 6s ease-in-out infinite; }
@keyframes hover { 50% { transform:translateY(-7px); } }
.qbox { border:2px solid var(--line); background:rgba(var(--card-rgb),.88); padding:16px clamp(16px, 4vw, 34px) 28px;
  box-shadow:0 0 22px rgba(var(--glow-rgb),.28), inset 0 0 26px rgba(var(--glow-rgb),.08); }
.qbox .meta { display:flex; justify-content:space-between; gap:12px; color:var(--dim); font-size:.85rem; letter-spacing:.08em; margin-bottom:10px; text-transform:uppercase; }
.qbox .quote { margin:0; font-size:clamp(1.25rem, 3vw, 1.85rem); line-height:1.45; min-height:2.9em; }
.qbox .w { display:inline-block; white-space:nowrap; }
.ch { display:inline-block; opacity:0; }
.ch.on { animation:pop .42s cubic-bezier(.2,1.7,.45,1) both; }
.ch.shown { opacity:1; }
@keyframes pop {
  0% { opacity:0; transform:scale(.2); filter:blur(3px); }
  55% { opacity:1; transform:scale(1.45); text-shadow:0 0 12px #fff, 0 0 4px #fff; }
  100% { opacity:1; transform:none; filter:none; }
}
.qbox.shake { animation:shake .5s cubic-bezier(.36,.07,.19,.97); border-color:var(--bad); }
@keyframes shake {
  10%, 90% { transform:translateX(-2px); } 20%, 80% { transform:translateX(5px); }
  30%, 50%, 70% { transform:translateX(-10px) rotate(-.4deg); } 40%, 60% { transform:translateX(10px) rotate(.4deg); }
}
.ghost { position:fixed; margin:0; z-index:2; pointer-events:none; transform-origin:center; }

/* Practice options and the daily guess field */
.options { display:grid; gap:10px; }
.options button { text-align:left; }
.guess { display:flex; gap:8px; }
.guess label { align-self:center; font-size:1.3rem; }
.guess input { flex:1; min-width:0; font:inherit; font-size:1.1rem; color:var(--text); text-shadow:inherit; caret-color:var(--text);
  padding:10px 12px; border:2px solid var(--line); background:rgba(var(--panel-rgb),.8); }
.guess input:focus { outline:none; box-shadow:0 0 14px var(--glow); }
.guess .next { margin-top:0; width:auto; }
.status-line { color:var(--dim); font-size:.9rem; letter-spacing:.06em; }
/* The sign-in page of the dev app (login.html): a box in the middle of the screen */
.gate-box { flex:1; display:grid; grid-template-columns:minmax(0, 1fr); align-content:center; gap:12px; width:min(520px, 100%); margin:0 auto; }
.gate-box h1 { margin:0; font-size:1.4rem; font-weight:normal; letter-spacing:.14em; text-transform:uppercase; }
.gate-box .status-line { margin:0; min-height:1.4em; }
.hints { list-style:none; padding:0; margin:0; display:grid; gap:4px; color:var(--warn); text-shadow:0 0 6px rgba(242,228,154,.4); }
.hints li::before { content:"▸ "; }
.guesses { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.guesses li { padding:2px 8px; border:1px solid var(--bad); color:var(--bad); text-decoration:line-through; font-size:.9rem; }
.guesses li.correct { border-color:var(--ok); color:var(--ok); text-decoration:none; }

/* Result panel that takes the place of the filed box */
.panel { border:2px solid var(--line); padding:16px 20px; background:rgba(var(--card-rgb),.85); animation:fadein .4s both; }
.panel p { margin:0 0 8px; }
.panel .quote { color:var(--dim); }
.panel .verdict { font-size:1.25rem; }
.panel .verdict.ok { color:var(--ok); }
.panel .verdict.bad { color:var(--bad); }
.panel .note { color:var(--dim); }
/* The share card preview and its buttons */
.share-frame { margin:0; border:2px solid var(--line); box-shadow:0 0 18px var(--glow); background:var(--glass-deep); line-height:0; animation:fadein .5s both; }
.share-card { display:block; width:100%; height:auto; }
.share-actions { display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; }
.share-actions .next { margin-top:0; }
@media (max-width:480px) { .share-actions { grid-template-columns:1fr 1fr; } .share-actions .next { grid-column:1 / -1; } }
.next.back { margin-top:4px; }

/* Bins: a label box with a lid in two flaps, and a meter below */
.bins { display:grid; grid-template-columns:repeat(2, minmax(0, 220px)); justify-content:center; gap:clamp(40px, 12vw, 140px); padding:20px 0 0; position:relative; z-index:3; margin-top:8px; }
/* The double rule above the bins: thin, then thick (the header rule, mirrored) */
.bins::before { content:""; position:absolute; left:-22px; right:-22px; top:0; height:7px; border-top:1px solid var(--line); border-bottom:2px solid var(--line); opacity:.8; box-shadow:0 4px 8px -4px var(--glow); }
/* A bin, as in the show: a label box and a % box of near equal height, 40% of a box apart */
.bin { position:relative; display:grid; gap:12px; --lid:18px; }
.bin .label { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:10px; height:30px; border:2px solid var(--line); background:var(--glass-deep); font-size:1.1rem; }
.bin .label svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.6; filter:drop-shadow(0 0 3px var(--glow)); }
.bin.ok .label svg { color:var(--ok); }
.bin.bad .label svg { color:var(--bad); }
.bin .meter { position:relative; height:27px; border:2px solid var(--line); background:var(--glass-deep); font-size:.8rem; }
.bin .meter { isolation:isolate; }
.bin .fill { position:absolute; inset:0 auto 0 0; width:0; background:var(--line); transition:width .6s; }
.bin .pct { position:relative; padding-left:5%; line-height:23px; mix-blend-mode:difference; } /* dark where the bar is filled, as in the show */
/* Opening, as in the show: the lids swing out from hinges at the outer edges to 45
   degrees (0.4 s) and the tray rises (0.4 s). Closing: the tray sinks (0.4 s), the
   lids hold for 0.3 s, then swing shut over the bin (0.5 s) and are gone. */
.lid { position:absolute; top:calc(-1 * var(--lid)); width:50%; height:var(--lid); border:2px solid var(--line); background:var(--glass-deep); z-index:3;
  visibility:hidden; transition:transform .5s ease-in .7s, visibility 0s 1.2s; }
.lid.left { left:0; transform-origin:0 0; }
.lid.right { right:0; transform-origin:100% 0; }
.bin.open .lid { visibility:visible; transition:transform .4s ease-out, visibility 0s; }
.bin.open .lid.left { transform:rotate(-135deg); }
.bin.open .lid.right { transform:rotate(135deg); }
.tray-well { position:absolute; left:0; right:0; bottom:100%; height:164px; overflow:hidden; pointer-events:none; z-index:1; }
.tray { position:absolute; inset:0; display:grid; align-content:center; gap:12px; padding:12px 5%; border:2px solid var(--line); border-bottom:none;
  background:var(--glass-deep); transform:translateY(100%); transition:transform .4s ease-in; }
.bin.open .tray { transform:none; transition:transform .4s ease-out .1s; }
.tray-head { display:flex; align-items:center; justify-content:center; height:22px; border:2px solid var(--line); }
.tray-head svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; }
.bin.ok .tray-head { color:var(--ok); } .bin.bad .tray-head { color:var(--bad); }
/* The bars blink twice when a number lands, as in the show */
.tray.blink .level { animation:barblink .6s steps(1); }
@keyframes barblink { 0%, 50% { opacity:0; } 25%, 75% { opacity:1; } }
.temper { display:grid; grid-template-columns:2.4em 1fr; align-items:center; gap:6px; color:var(--c); font-size:.8rem; text-shadow:0 0 6px color-mix(in srgb, var(--c) 50%, transparent); }
.temper .track { position:relative; height:13px; border:1px solid var(--c); }
.temper .level { position:absolute; inset:0 auto 0 0; width:0; background:var(--c); transition:width .3s; }
.temper.wo { --c:#6fd3a8; } .temper.fc { --c:#e3dd90; } .temper.dr { --c:#e7c0bc; } .temper.ma { --c:#2cc0e8; } /* sampled from the show */
.bin.got .label { animation:got .6s ease-out; }
@keyframes got { 30% { background:rgba(var(--glow-rgb),.35); box-shadow:0 0 22px var(--glow); } }

/* Home: the modes in a rolodex, one card at a time, as in the show */
.home { flex:1; display:flex; flex-direction:column; justify-content:center; gap:22px; }
.home.waiting { visibility:hidden; }
/* As in the show, the menu screen has the deck alone: the header box, the rule,
   the footer and the number field come in only on the page of the chosen file.
   The globe stays, because the intro lands on it. */
[data-theme="lumon"] .screen.menu :is(.rule, .hex, .digits, .bar > :not(.logo, .to-games)) { visibility:hidden; }
[data-theme="lumon"] .screen.menu .bar { border-color:transparent; background:none; box-shadow:none; }
.files { display:flex; flex-direction:column; align-items:center; gap:18px; }
.files.enter { animation:rise .6s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes rise { from { opacity:0; transform:translateY(24px) scale(.96); } }
.deck { display:flex; align-items:center; gap:clamp(6px, 3vw, 32px); }
.file-step { padding:8px 11px; font-size:.9rem; }
.file { position:relative; display:flex; align-items:center; gap:6px; }
/* A wheel: a cylinder of bars seen from the side, turned by --spin. A bar at the
   angle --a sits at sin(--a) of the radius from the middle and is cos(--a) of its
   full height. A bar that turns past the top or the bottom goes out. */
@property --spin { syntax:"<angle>"; inherits:true; initial-value:0deg; }
.wheel { position:relative; width:22px; height:120px; flex:none; filter:drop-shadow(0 0 3px var(--glow)); }
.wheel .bar { --a:calc(var(--i) * 15deg + var(--spin)); position:absolute; left:0; right:0; top:calc(50% - 2.5px); height:5px; background:var(--line);
  transform:translateY(calc(sin(var(--a)) * 54px)) scaleY(cos(var(--a))); opacity:clamp(0, cos(var(--a)) * 8, 1); }
/* The card, as in the show: an upper sheet with the name and a solid tab, and the
   back of the last card hanging under the rings, its tab an outline at the bottom */
.card-file { position:relative; display:block; width:min(240px, 52vw); height:330px; color:inherit; text-decoration:none; }
.card-file:focus-visible { outline:none; }
.card-file:focus-visible .face .upper, .card-file:hover .face .upper { box-shadow:0 0 18px var(--glow), inset 0 0 20px rgba(var(--glow-rgb),.12); }
.sheet { position:absolute; left:0; right:0; border:2px solid var(--line); border-radius:7px; background:rgba(var(--sheet-rgb),.78); transition:box-shadow .2s;
  box-shadow:0 0 8px var(--glow), inset 0 0 14px rgba(var(--glow-rgb),.06); }
.sheet.upper { top:22px; bottom:calc(50% + 8px); display:grid; place-items:center; padding:8px 12px; overflow:hidden; }
.sheet.lower { top:calc(50% + 8px); bottom:20px; }
.name { font-size:clamp(2rem, 8vw, 3rem); letter-spacing:.1em; text-transform:uppercase; }
/* The spacing after the last letter would push a long name left, so cut it off */
.name.long { font-size:clamp(1.3rem, 5.5vw, 2.1rem); margin-right:-.1em; }
.tab { position:absolute; width:30px; height:20px; font-size:.8rem; line-height:18px; text-align:center; }
.tab.solid { top:4px; border:2px solid var(--line); border-bottom:none; border-radius:6px 6px 0 0; }
.tab.solid { background:var(--line); color:var(--glass-deep); text-shadow:none; z-index:1; box-shadow:0 0 8px var(--glow); }
/* The upside-down card's tab: the same size as the front tab, an outline only, and
   part of the sheet's outline: it covers the sheet's bottom line where it hangs,
   so the line runs down around the tab and back up without a break. */
.tab.hang { top:100%; height:18px; border:2px solid var(--line); border-top:none; border-radius:0 0 6px 6px; background:rgb(3,16,29); }
/* The card that turns over the rings while the deck scrolls. It has the size of
   the whole card and turns about its middle, the line through the rings. The back
   is turned in advance, so it lands upright in the lower half. */
.card-file { perspective:900px; }
@property --k { syntax:"<number>"; inherits:true; initial-value:0; }
/* The halves of the deck, seen from beyond their outer edges: the upper half
   from above, the lower half from below. A card behind, turned --k pages about
   the rings, then comes out past the front card's edge and gets narrower. */
.half, .face, .back-card { position:absolute; inset:0; }
.half { perspective:900px; }
.half.upper { perspective-origin:50% calc(50% - 650px); }
.half.lower { perspective-origin:50% calc(50% + 650px); }
/* Further back is darker. Brightness keeps each card opaque, so the lines of the
   cards behind it do not show through its tab; a card past the third goes out. */
.back-card { pointer-events:none; filter:brightness(calc(.9 - var(--k) * .2)); opacity:clamp(0, (3.6 - var(--k)) * 2, 1); }
.half.upper .back-card { transform:rotateX(calc(var(--k) * var(--page))); }
.half.lower .back-card { transform:rotateX(calc(var(--k) * var(--page) * -1)); }
.back-card .sheet { background:none; box-shadow:0 0 6px var(--glow); }
.back-card .tab { opacity:clamp(0, (2 - var(--k)) * 2, 1); } /* only the first card behind shows its tab */
.flap .sheet { background:rgba(var(--sheet-rgb),.35); } /* the turning card is mostly outline, as in the show */
.flap { position:absolute; inset:0; transform-style:preserve-3d; visibility:hidden; pointer-events:none; z-index:2; }
.flap .side { position:absolute; inset:0; backface-visibility:hidden; }
.flap .side.back { transform:rotateX(180deg); }
.ring { position:absolute; top:calc(50% - 22px); width:11px; height:44px; border:2px solid var(--line); border-radius:6px; background:var(--line); z-index:4; box-shadow:0 0 6px var(--glow); }
.ring.left { left:24%; } .ring.right { right:24%; }
/* The choice of game: two boxes side by side, in the style of the theme tiles */
.bar .to-games { flex:none; padding:0 6px; font-size:1.8rem; line-height:1; text-decoration:none; }
/* The menu hides the rest of the header in this look, so the arrow and the logo get the room */
[data-theme="lumon"] .screen.menu .bar:has(.to-games:not(.hidden)) :is(.title, .where, .pct) { display:none; }
[data-theme="lumon"] .screen.menu .bar .to-games { margin-right:auto; }
.games:not(.hidden) { display:grid; justify-items:center; }
.games.enter { animation:rise .6s cubic-bezier(.2,1.3,.4,1) both; }
.game-box { align-content:center; gap:10px; min-height:150px; padding:22px 16px; }
.game-box .look-name { font-size:clamp(1.4rem, 6vw, 2.2rem); }
.game-hint { min-height:4.05em; color:var(--dim); font-size:clamp(.8rem, 2.6vw, .95rem); line-height:1.35; text-align:center; text-transform:none; } /* three lines (on a phone), so both names line up */

/* The theme picker: a tile for each look, with its logo in this look */
.looks:not(.hidden) { display:grid; justify-items:center; gap:14px; animation:fadein .4s both; }
.look-options { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(12px, 4vw, 28px); width:min(560px, 100%); }
.look-options.n3 { grid-template-columns:repeat(3, minmax(0, 1fr)); width:min(760px, 100%); }
.look[data-tint-preview] { color:var(--text); border-color:var(--line); background:var(--glass-deep); }
.look { display:grid; justify-items:center; gap:6px; padding:18px 12px 14px; }
.look-logo { width:min(180px, 100%); aspect-ratio:160 / 112; }
.look-name { font-size:clamp(1.1rem, 4vw, 1.5rem); letter-spacing:.1em; text-transform:uppercase; }
.look[aria-checked="true"] { border-color:var(--warn); box-shadow:0 0 18px var(--glow), inset 0 0 20px rgba(var(--glow-rgb),.12); }
.look[aria-checked="true"] .look-name::before { content:"▸ "; color:var(--warn); }
.looks .back { width:min(560px, 100%); }
.screen.retheme { animation:retheme .5s ease-out; }
@keyframes retheme { from { clip-path:inset(50% 0 50% 0); } to { clip-path:inset(0); } }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* A file opens: the home screen clears. A game page draws in from the centre. */
/* Choosing a file, as in the show: the card dims to a third and goes out (0.2 s),
   with the rest of the screen; the screen stays blank until the next page builds. */
[data-theme="lumon"] .screen.leaving > :not(.digits) { animation:dimout .2s linear both; }
[data-theme="lumon"] .screen.leaving .digits { transition:opacity .2s; opacity:0; }
@keyframes dimout { 50% { opacity:.35; } 100% { opacity:0; } }
/* The next page builds as in the show: the header and the bins come in together
   (a third at 0.1 s, full at 0.2 s); the number field fills in cell by cell
   (fx.js), and the question comes in with it. */
.screen.boot .bar, .screen.boot .rule, .screen.boot .bins, .screen.boot .hex { animation:boot .2s linear backwards; }
.screen.boot .layout { animation:fadein .4s .3s backwards; }
@keyframes boot { 0% { opacity:0; } 50% { opacity:.35; } 100% { opacity:1; } }

/* Feedback panel to the right of the question: in the Feedback mode, and on every question in dev mode */
.layout { display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; flex:1; align-content:center; } /* minmax(0, …): a long row cannot push the column past the screen */
/* Wider only while the feedback panel shows; elsewhere the page keeps the production width */
.screen:has(.dev-panel:not(.hidden)) { max-width:1280px; }
.layout:has(.dev-panel:not(.hidden)) { grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); align-items:start; }
@media (max-width:900px) { .layout:has(.dev-panel:not(.hidden)) { grid-template-columns:1fr; } }
.card { border:2px solid var(--line); background:rgba(var(--card-rgb),.88); padding:16px; }
.dev-panel h2 { font-size:1rem; font-weight:normal; margin:0 0 4px; text-transform:uppercase; letter-spacing:.1em; }
.dev-panel .meta { color:var(--dim); font-size:.85rem; margin:0 0 12px; }
.dev-panel textarea { width:100%; font:inherit; padding:10px; border:2px solid var(--line); background:var(--glass-deep); color:var(--text); resize:vertical; }
.dev-panel .trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.dev-panel .privacy { color:var(--dim); font-size:.8rem; margin:8px 0 0; }
.dev-panel .status { color:var(--dim); font-size:.85rem; margin:8px 0 0; min-height:1.3em; }
.dev-panel ul { margin:12px 0 0; padding-left:18px; font-size:.9rem; }
.dev-panel li { margin-bottom:6px; }
.dev-panel li small { color:var(--dim); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:1ms !important; animation-delay:0ms !important; transition-duration:1ms !important; }
  .float { animation:none; }
}
@media (max-width:400px) {
  .card-file { width:60vw; }
  .deck { gap:4px; }
  .wheel { width:12px; }
}

/* Dev panel (devtools.js): only in dev mode */
.devtools-toggle { position:fixed; right:12px; bottom:12px; z-index:20; padding:4px 10px; font:inherit; font-size:.8rem; color:var(--warn); background:var(--glass-deep); border:1px solid var(--warn); border-radius:4px; cursor:pointer; }
.devtools { width:min(640px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:18px 20px; color:var(--text); background:var(--glass-deep); border:2px solid var(--line); border-radius:10px; font:inherit; }
.devtools::backdrop { background:rgba(0,0,0,.6); }
.devtools h2 { font-size:1rem; font-weight:normal; margin:0 0 6px; text-transform:uppercase; letter-spacing:.1em; }
.devtools table { width:100%; border-collapse:collapse; margin:8px 0; }
.devtools th, .devtools td { padding:4px 6px; text-align:left; }
.devtools td:not(:first-child), .devtools thead th:not(:first-child) { width:56px; text-align:center; }
.devtools small, .dt-note, .dt-status { color:var(--dim); font-size:.8rem; }
.devtools .dt-group { padding-top:12px; color:var(--warn); font-weight:normal; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
.devtools input[type=checkbox] { width:18px; height:18px; accent-color:var(--line); }
.dt-tools { display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:12px; }