/* THE DEVICE — copied from game-device-design-system/assets/kit (via Subsystem Synth). Shared geometry,
   material and motion; colours come from theme.css. Change values here only to follow the family. */
:root{
  --font-screen: ui-monospace,"SFMono-Regular","Cascadia Mono",Menlo,Consolas,"Roboto Mono","Liberation Mono",monospace;
  --font-shell: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --r-device:42px; --r-panel:28px; --r-key:14px; --r-cell:9px;
  --pad-shell:14px; --pad-bay:11px; --pad-screen:14px; --gap:10px;
  --ctl:42px; --key-throw:6px; --well-h:54px; --view-in:200ms;
  --clear-top:max(14px, env(safe-area-inset-top), var(--safe-area-inset-top, 0px));
  --clear-bot:max(14px, env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px));
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%; margin:0; user-select:none; -webkit-user-select:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
button{font:inherit}
[hidden]{display:none !important}
body{
  background:radial-gradient(120% 80% at 50% 0%, var(--room-glow) 0%, var(--room) 55%, var(--room-edge) 100%);
  color:var(--ink); font-family:var(--font-shell);
  overflow:hidden; touch-action:manipulation; display:grid; place-items:center;
}
#app{
  position:relative; width:min(100%,460px); height:min(100dvh,920px);
  padding:calc(var(--clear-top) + 6px) var(--pad-shell) calc(var(--clear-bot) + 6px);
  background:linear-gradient(180deg, var(--shell-hi) 0%, var(--shell) 26%, var(--shell) 72%, var(--shell-lo) 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.05), inset 0 -2px 0 rgba(0,0,0,.45);
  border-radius:0; overflow:hidden; display:flex; flex-direction:column; gap:var(--gap);
}
@media (min-width:480px){ #app{ border-radius:var(--r-device) } }
#app::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  background:linear-gradient(90deg, rgba(255,255,255,.05), transparent 14%, transparent 86%, rgba(0,0,0,.18)),
    radial-gradient(80% 40% at 50% -8%, rgba(255,255,255,.05), transparent 70%)}
#app::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background-image:var(--grain);background-size:150px 150px;opacity:.05}
@media (max-width:390px){ :root{--pad-shell:11px; --pad-screen:11px} }
@media (max-height:640px){ :root{--pad-screen:10px; --well-h:48px} }
/* tablets and big windows: the same portrait device, grown (the board gets the room) */
@media (min-width:700px) and (min-height:1000px){
  #app{ width:min(100%, 600px, calc((100dvh - 48px) * .56)); height:min(calc(100dvh - 48px), 1100px) }
}
/* portrait only: a phone turned sideways (or a window too short for the board) is asked to turn back */
.turn{display:none}
@media (orientation:landscape) and (max-height:540px){
  #app{visibility:hidden}
  .turn{display:flex;position:fixed;inset:0;z-index:20;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    font:700 11px var(--font-screen);letter-spacing:.24em;text-transform:uppercase;color:rgba(235,228,218,.72)}
  .turn svg{width:44px;height:44px;animation:turnUp 2.6s ease-in-out infinite}
}
.turn .wide{display:none}
@media (hover:hover) and (pointer:fine){ .turn .wide{display:inline} .turn .phone{display:none} }
@keyframes turnUp{0%,25%{transform:rotate(-90deg)}55%,100%{transform:rotate(0)}}
.screen-body.sweep{animation:viewIn var(--view-in) ease both}
@keyframes viewIn{from{opacity:0} to{opacity:1}}

.chrome-top{display:flex;align-items:center;gap:8px;min-height:var(--ctl);flex:0 0 auto;position:relative;z-index:7}
.readout{flex:1;min-width:0}
.ctl-group{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.sbtn{position:relative;width:var(--ctl);height:var(--ctl);border-radius:50%;padding:0;cursor:pointer;flex:0 0 auto;
  border:1px solid var(--btn-edge);color:var(--btn-ink);display:grid;place-items:center;
  background:linear-gradient(180deg,var(--btn-hi),var(--btn-lo));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.36);
  transition:color .15s, box-shadow .1s, transform .1s}
.sbtn svg{width:18px;height:18px}
.sbtn::before{content:"";position:absolute;inset:-3px}
.sbtn:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.5)}
.sbtn[disabled]{opacity:.32;pointer-events:none}
.sbtn.current{color:#fff;cursor:default;transform:none;background:linear-gradient(180deg,var(--btn-lo),var(--btn-hi));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55), inset 0 1px 1px rgba(0,0,0,.4)}

.screen{flex:1;min-height:0;position:relative;overflow:hidden;border-radius:var(--r-panel);
  background:var(--screen);padding:var(--pad-screen);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), inset 0 0 0 2px var(--glass-edge),
    inset 0 16px 30px rgba(0,0,0,.36), 0 2px 3px rgba(255,255,255,.04);
  display:flex;flex-direction:column;transition:box-shadow .7s ease}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:inherit;
  background:repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px),
    radial-gradient(120% 60% at 50% -10%, var(--sheen), transparent 62%)}
.screen-body{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;
  font-family:var(--font-screen);color:var(--ink)}
.scroll{overflow-y:auto;scrollbar-width:none}
.scroll::-webkit-scrollbar{width:0;height:0;display:none}

.play-screen{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}
.screen-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 8px;flex:0 0 auto}
.ph-num{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-band{font-size:15px;font-weight:800;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.game-area{flex:1;min-height:0;position:relative;display:grid;place-items:center}
.play-foot{flex:0 0 auto;min-height:34px;display:flex;align-items:center;justify-content:center;padding:0 10px}
.verdict{text-align:center;line-height:1.25}
.verdict.win{font-size:16px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--go);animation:bandWin .7s ease}
.verdict.note{font-size:11px;letter-spacing:.04em;color:var(--readout)}
.verdict.warn{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
@keyframes bandWin{0%{transform:scale(.82);opacity:.4}55%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
.glass-ask{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-screen)}
.glass-ask-q{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.glass-act{position:relative;appearance:none;min-height:26px;min-width:44px;padding:4px 10px;border:1px solid var(--line-major);border-radius:6px;
  background:transparent;color:var(--ink);cursor:pointer;font:800 10px/1 var(--font-screen);letter-spacing:.12em;text-transform:uppercase}
.glass-act::before{content:"";position:absolute;inset:-10px -4px}
.glass-act.yes{border-color:var(--accent);color:var(--accent)}
.glass-ask.stack{flex-direction:column;gap:9px}
.glass-row{display:flex;gap:10px;justify-content:center}
.glass-act{white-space:nowrap}
@media (max-width:380px){ .glass-row{gap:6px} .glass-act{padding:4px 7px;letter-spacing:.06em} }
.glass-ask-q.solved{display:flex;align-items:center;gap:6px}
.glass-ask-q.solved svg{width:15px;height:15px;color:var(--go)}
.deck{border-radius:var(--r-panel);padding:var(--pad-bay);flex:0 0 auto;
  background:linear-gradient(180deg,var(--bay-hi) 0%, var(--bay-lo) 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.75), inset 0 3px 7px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.045);
  display:grid;grid-template-columns:repeat(4,1fr);gap:9px;align-items:stretch;container-type:inline-size}
.key{border:0;border-radius:var(--r-key);aspect-ratio:1;cursor:pointer;min-width:0;padding:0;
  background:var(--key);color:var(--key-ink);display:grid;place-items:center;position:relative;
  font-family:var(--font-screen);font-size:22px;font-weight:800;
  box-shadow:0 var(--key-throw) 0 var(--key-edge), 0 calc(var(--key-throw) + 3px) 15px rgba(0,0,0,.4);
  transition:transform .08s cubic-bezier(.3,.7,.4,1), box-shadow .08s cubic-bezier(.3,.7,.4,1)}
.key svg{width:32%;height:32%}
.key:active,.key.down{transform:translateY(var(--key-throw));
  box-shadow:inset 0 5px 12px rgba(0,0,0,.5), inset 0 2px 3px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.28)}
.key{--key-edge:rgba(0,0,0,.38)}
.key:not(.blank)::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,0) 46%, rgba(0,0,0,.12));
  box-shadow:inset 0 2px 2px rgba(255,255,255,.34), inset 0 -3px 6px rgba(0,0,0,.2)}
.key.play-key{background-color:var(--play, var(--key));color:var(--play-ink, var(--key-ink))}
.key.play-key svg{width:36%;height:36%}
.key[disabled]{opacity:.4;pointer-events:none;--key-o:.4}
.key.blank{background:var(--well);pointer-events:none;cursor:default;transform:translateY(var(--key-throw));
  box-shadow:inset 0 3px 9px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.85)}
.key.refuse{animation:keyRefuse .42s ease}
@keyframes keyRefuse{0%,100%{transform:none}30%{transform:translateY(var(--key-throw));background:color-mix(in srgb, var(--accent) 30%, var(--key))}}
.deck.dealing .key:not(.blank){animation:keyIn .42s cubic-bezier(.25,.8,.35,1) both;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes keyIn{0%{opacity:0;transform:perspective(440px) rotateX(-90deg) translateZ(30px)}
  60%{opacity:var(--key-o,1);transform:perspective(440px) rotateX(10deg)} 100%{opacity:var(--key-o,1);transform:none}}

.rocker-well{flex:0 0 auto;height:var(--well-h);border-radius:15px;padding:5px;perspective:520px;
  background:linear-gradient(180deg,var(--bay-hi),var(--bay-lo));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), inset 0 3px 8px rgba(0,0,0,.62), 0 1px 0 rgba(255,255,255,.04)}
/* no rocker (the map, help, settings): the well is covered by a plate in the case colour, flush
   with the shell but for a fine seam; the rocker flips in over it */
.rocker-well:empty{background:linear-gradient(180deg,var(--shell-hi),var(--shell-lo));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12)}
.rocker{height:100%;display:grid;grid-template-columns:1fr 3px 1fr;border-radius:12px;transition:transform .11s ease}
.rocker.tilt-l{transform:rotateY(-10deg)} .rocker.tilt-r{transform:rotateY(10deg)}
.rocker.seat{animation:flapIn .36s cubic-bezier(.22,.9,.3,1) both}
@keyframes flapIn{from{transform:rotateX(-72deg);opacity:0}60%{opacity:1}to{transform:rotateX(0);opacity:1}}
.rocker.unseat{animation:flapOut .28s cubic-bezier(.45,0,.75,.4) both;pointer-events:none}
@keyframes flapOut{from{transform:rotateX(0);opacity:1}to{transform:rotateX(-70deg);opacity:0}}
.rk-end{appearance:none;border:0;cursor:pointer;display:grid;place-items:center;color:var(--btn-ink);
  background:linear-gradient(180deg,var(--btn-hi),var(--btn-lo));
  box-shadow:0 3px 0 var(--btn-lo), 0 5px 10px rgba(0,0,0,.4);
  transition:transform .08s cubic-bezier(.3,.7,.4,1), box-shadow .08s cubic-bezier(.3,.7,.4,1), color .15s}
.rk-end.l{border-radius:11px 4px 4px 11px} .rk-end.r{border-radius:4px 11px 11px 4px}
.rk-end svg{width:28px;height:28px}
.rk-end:active{transform:translateY(3px);box-shadow:inset 0 4px 9px rgba(0,0,0,.5), inset 0 1px 1px rgba(0,0,0,.4)}
.rk-end[disabled]{opacity:.35;pointer-events:none}
/* ready (Play, Start, Next): the cap itself is the neon play color, ink glyph, a soft glow round it */
.rk-end.ready{color:var(--play-ink);background:linear-gradient(180deg, color-mix(in srgb, var(--play) 82%, #fff), var(--play));
  box-shadow:0 3px 0 color-mix(in srgb, var(--play) 55%, #000), 0 5px 10px rgba(0,0,0,.4), 0 0 16px color-mix(in srgb, var(--play) 35%, transparent)}
.rk-pivot{background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.3))}

.doc{font-family:var(--font-screen);color:var(--ink);padding:2px 2px 14px;user-select:text}
.doc-h{font-size:15px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin:2px 0 12px}
.doc-lede{font-size:12px;line-height:1.7;color:var(--readout);margin:0 0 16px}
.doc-sec{margin:14px 0}
.doc-h2{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.doc-h2 svg{width:18px;height:18px;flex:0 0 auto}
.doc-sec p{font-size:12px;line-height:1.7;color:var(--readout);margin:0}
.doc b{color:var(--ink)}
.set-own{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--readout)}
.buy-list{display:flex;flex-direction:column;margin:10px 0 14px;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1.2px var(--line-major)}
.buy-ch{display:grid;grid-template-columns:16px 16px auto 1fr;align-items:center;gap:8px;padding:8px 11px;font-size:11px}
.buy-ch + .buy-ch{border-top:1px solid var(--line)}
.buy-ch svg{width:16px;height:16px}
.buy-ch.asked{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.buy-n{color:var(--dim);font-weight:700;text-align:right}
.buy-name{font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.buy-idea{color:var(--readout);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buy-more{margin:0 0 14px;padding:0 0 0 16px;font-size:12px;line-height:1.7;color:var(--readout)}
.buy-terms{font-size:11px;line-height:1.6;color:var(--readout);text-align:center;margin:8px 0 0}
.set-act.buy{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.set-act[disabled]{opacity:.55;cursor:default}
.set-act.ghost{background:transparent;box-shadow:inset 0 0 0 1.2px var(--line-major);color:var(--ink)}
.set-act{width:100%;padding:13px;margin-top:8px;border:0;border-radius:6px;cursor:pointer;min-height:48px;
  background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-major);
  font-family:var(--font-screen);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.set-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px}
.set-row.tap{cursor:pointer}
.set-name{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sw{width:46px;height:26px;border-radius:99px;border:1px solid var(--line-major);cursor:pointer;padding:0;
  background:var(--socket);position:relative;transition:background .2s;flex:0 0 auto}
body[data-theme="light"] .sw:not(.on){background:#d4d0c4}
.sw::before{content:"";position:absolute;inset:-10px -6px}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--key);box-shadow:0 1px 2px rgba(0,0,0,.5);transition:left .18s}
.sw.on{background:var(--go);border-color:transparent}
.sw.on::after{left:22px}
.tabs{display:flex;border:1px solid var(--line-major);border-radius:9px;overflow:hidden;flex:0 0 auto}
.tab{flex:1;appearance:none;border:0;background:transparent;cursor:pointer;padding:8px 12px;min-height:38px;display:flex;align-items:center;gap:7px;
  font-family:var(--font-screen);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tab.on{background:var(--ink);color:var(--screen)}
.swatch{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.title{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px}
.wordmark{font-family:var(--font-screen);font-size:30px;font-weight:800;text-transform:uppercase;margin:0;color:var(--ink);
  display:flex;justify-content:center;align-items:center;gap:.12em;text-shadow:0 0 18px rgba(242,239,230,.16)}
.wordmark .wm-g{flex:0 0 auto;width:.82em;height:.82em}
body[data-theme="light"] .wordmark{text-shadow:none}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px}
.stat-n{font-size:22px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-l{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.title-today{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.title .tabs{width:100%;max-width:240px}
.title .tab{justify-content:center}
.set-status{font-size:11px;line-height:1.6;color:var(--readout);min-height:18px;margin:8px 0 0;text-align:center}
.share-verdict{font-size:15px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--go);text-align:center;margin:2px 0 10px}
.share-text{font-family:var(--font-screen);font-size:16px;line-height:1.35;text-align:center;margin:2px 0 16px;white-space:pre-wrap;word-break:break-word}

body.reduced .screen-body.sweep, body.reduced .deck.dealing .key, body.reduced .rocker.seat, body.reduced .rocker.unseat,
body.reduced .verdict.win, body.reduced .key.refuse{animation:none}
body[data-theme="light"] .screen{box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), inset 0 0 0 2px var(--glass-edge),
    inset 0 10px 22px rgba(0,0,0,.14), 0 2px 3px rgba(255,255,255,.04)}
body.reduced .rocker.tilt-l, body.reduced .rocker.tilt-r{transform:none}
.screen.alarm{transition:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent),
  inset 0 0 38px color-mix(in srgb, var(--accent) 34%, transparent), inset 0 16px 30px rgba(0,0,0,.36)}
/* ── dev tools: in the room, off the device. the local dev server (http://localhost) only. ── */
.dev{position:fixed;left:12px;top:12px;z-index:20;font:10px/1.4 var(--font-screen);letter-spacing:.12em;color:#b9a998;
  background:rgba(20,15,12,.86);border:1px solid #3a3029;border-radius:10px;padding:0;max-width:230px}
.dev summary{cursor:pointer;padding:8px 12px;list-style:none;text-transform:uppercase;font-weight:800}
.dev summary::-webkit-details-marker{display:none}
.dev .in{padding:0 12px 12px;display:grid;gap:8px}
.dev .row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.dev button,.dev select{background:#2a221d;color:#ecdccb;border:1px solid #4a3d33;border-radius:6px;padding:6px 8px;
  font:inherit;letter-spacing:.1em;cursor:pointer}
.dev select{max-width:100%}
.dev .info{color:#8c7f73;line-height:1.6}
/* on a phone the device is full-bleed: the dev pill sits on the shell's bottom margin and opens upward */
@media (max-width:479px){ .dev{top:auto;bottom:2px;left:50%;transform:translateX(-50%)} .dev summary{padding:3px 12px} }
.dev .info{white-space:pre-line}