:root {
  color-scheme: dark;
  --ink: #f8fafc;
  --muted: #94a3b8;
  --paper: #1e293b;
  --sea: #0f172a;
  --sea-deep: #172033;
  --green: #f59e0b;
  --green-dark: #b76d06;
  --coral: #f59e0b;
  --line: #64748b;
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--sea); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--sea); }
button, a { font: inherit; }
button { min-height: 44px; }
.app-shell { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 44px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 850; font-size: 1.15rem; letter-spacing: -.02em; }
.brand-mark { display:grid; place-items:center; width:36px; aspect-ratio:1; overflow:hidden; }
.brand-mark img { display:block; width:100%; height:100%; object-fit:contain; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { width: 44px; padding: 0; border: 1px solid #334155; border-radius: 50%; color: var(--ink); background: var(--paper); font-weight: 800; cursor: pointer; }
.intro { margin-bottom: 22px; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.7rem); line-height: .98; letter-spacing: -.055em; }
.lede { max-width: 650px; margin: 14px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.game-card { width:min(600px,100%); margin:0 auto; overflow:hidden; padding:12px; background:var(--paper); border:1px solid #334155; border-radius:30px; box-shadow:0 24px 70px rgba(0,0,0,.34); }
.stream-board { position:relative; overflow:hidden; width:100%; border-radius:21px; background:var(--sea-deep); }
#board { display:block; width:100%; height:auto; }
.step-0 { fill: #172033; }.step-1 { fill: #1b2639; }
.edge { cursor: pointer; outline: none; }.edge.locked { cursor: default; }.edge.locked .edge-line { opacity: .34; }.edge-hit { stroke: transparent; stroke-width: 72; }.edge-line { stroke: var(--line); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 3 13; transition: stroke .18s, stroke-width .18s, opacity .18s; }
.edge:hover .edge-line, .edge:focus .edge-line { stroke: #cbd5e1; stroke-width: 9; }.edge:focus-visible .edge-line { filter: drop-shadow(0 0 4px white); }.edge.selected .edge-line { stroke: var(--green); stroke-width: 9; stroke-dasharray: none; }
.node { cursor:crosshair; outline:none; touch-action:none; }.node.locked { cursor:default; opacity:.58; }.node circle:not(.node-hit) { fill:#fff; stroke:#94a3b8; stroke-width:3; transition:stroke .16s,stroke-width .16s,filter .16s,opacity .16s; }.node .node-hit { fill:transparent; stroke:none; }.node.locked:hover circle:not(.node-hit) { stroke-width:3; filter:none; }.node-start circle:not(.node-hit),.node-goal circle:not(.node-hit) { fill:var(--paper); stroke:var(--green); stroke-width:6; }.node-count { fill:#0f172a; font-size:20px; font-weight:850; }.node-start .node-count,.node-goal .node-count { fill:#f8fafc; }.node-label { fill:#f8fafc; font-size:17px; font-weight:850; paint-order:stroke; stroke:rgba(15,23,42,.72); stroke-width:2px; }.node.satisfied circle:not(.node-hit) { stroke:var(--green); stroke-width:6; filter:drop-shadow(0 0 7px rgba(245,158,11,.35)); }.node:hover circle:not(.node-hit),.node:focus-visible circle:not(.node-hit) { stroke-width:7; filter:drop-shadow(0 0 8px rgba(245,158,11,.45)); }.node.selected-origin circle:not(.node-hit) { stroke:#e2e8f0; stroke-width:6; stroke-dasharray:6 5; filter:drop-shadow(0 0 6px rgba(226,232,240,.3)); }.node.mismatch circle:not(.node-hit) { stroke:#f87171; stroke-width:6; filter:none; }.drag-preview { stroke:var(--green); stroke-width:8; stroke-linecap:round; opacity:0; pointer-events:none; }.drag-preview.active { opacity:.75; }
.pip { position:absolute; left:9%; top:4%; width:40px; height:36px; background:var(--green); border-radius:50% 50% 42% 42%; box-shadow:inset -5px -6px 0 rgba(120,72,2,.24),0 4px 0 rgba(0,0,0,.22); transition:top 1.5s cubic-bezier(.22,.8,.35,1),transform .3s; pointer-events:none; }.pip::after { content:""; position:absolute; inset:auto 6px -5px; height:9px; border-radius:50%; background:var(--green); }.pip-eye { position:absolute; top:12px; width:5px; height:7px; border-radius:50%; background:#0f172a; }.pip-eye.left{left:11px}.pip-eye.right{right:11px}.pip.crossing { top:91%; }
.status-panel { display: flex; align-items: center; gap: 10px; min-height: 56px; margin: 10px 4px 0; padding: 10px 12px; color: var(--muted); font-weight: 650; }.status-panel[hidden]{display:none}.status-icon { display:grid; flex:0 0 auto; place-items:center; width:26px; height:26px; border:2px solid currentColor; border-radius:50%; }.status-panel[data-kind="error"] { color:#fbbf24 }.status-panel[data-kind="success"] { color:var(--green) }
.controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.primary-button,.secondary-button { border:0; border-radius:13px; padding:8px 16px; font-weight:800; cursor:pointer; }.primary-button { color:#0f172a; background:var(--green); box-shadow:0 5px 0 var(--green-dark); }.primary-button:active { transform:translateY(3px); box-shadow:0 2px 0 var(--green-dark); }.secondary-button { color:var(--ink); background:#334155; }.primary-button:disabled,.secondary-button:disabled{cursor:not-allowed;opacity:.5;box-shadow:none}.full { width:100%; }
.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}
footer { display:flex; justify-content:flex-end; padding:14px 6px; color:var(--muted); font-size:.78rem; line-height:1.55; }
footer nav { display:flex; gap:12px; margin-left:16px; }
footer a { color:inherit; }
dialog { width:min(500px, calc(100% - 28px)); max-height:calc(100svh - 28px); overflow:auto; border:1px solid #334155; border-radius:25px; padding:24px; color:var(--ink); background:var(--paper); box-shadow:0 30px 100px rgba(0,0,0,.55); }dialog::backdrop{background:rgba(2,6,23,.78);backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head h2{margin:0;font-size:1.7rem}.dialog-head .icon-button{background:#334155}.dialog-head+ol{padding-left:24px;line-height:1.55;color:var(--muted)}
.help-illustration{display:block;width:min(100%,320px);margin:18px auto;color:var(--ink)}.help-frame{fill:var(--sea-deep);stroke:#475569;stroke-width:3}.help-edge{fill:none;stroke:#cbd5e1;stroke-width:4;stroke-linecap:round}.help-edge.available{stroke:var(--line);stroke-dasharray:9 10}.help-edge.selected{stroke:var(--green);stroke-width:7}.help-dot circle{fill:#fff;stroke:#94a3b8;stroke-width:3}.help-dot text{fill:#0f172a;font-size:22px;font-weight:850;text-anchor:middle}.help-dot.satisfied circle{stroke:var(--green);stroke-width:5}
#answer-board{display:block;width:min(100%,280px);height:auto;margin:14px auto 20px;border:1px solid #334155;border-radius:18px;overflow:hidden}.answer-edge{stroke:var(--line);stroke-width:6;stroke-linecap:round;stroke-dasharray:3 13}.answer-edge.selected{stroke:var(--green);stroke-width:10;stroke-dasharray:none}.answer-node circle{fill:#fff;stroke:#94a3b8;stroke-width:4}.answer-node text{fill:#0f172a;font-size:20px;font-weight:850}
@media (max-width: 700px) { .app-shell{width:min(100% - 16px,1080px);padding-top:max(8px,env(safe-area-inset-top))}.topbar{margin-bottom:12px}.brand{font-size:1.05rem}.brand-mark{width:32px}.intro{margin-bottom:10px}.intro h1{font-size:clamp(1.65rem,8vw,2.2rem);line-height:1.02}.lede{margin-top:7px;font-size:.84rem;line-height:1.34}.game-card{padding:5px;border-radius:19px}.stream-board{display:flex;justify-content:center;border-radius:14px}.stream-board #board{width:auto;height:clamp(540px,calc(100svh - 310px),620px);max-width:100%}.pip{width:36px;height:33px}.pip-eye{top:11px}.controls{grid-template-columns:repeat(3,minmax(0,1fr));position:sticky;bottom:max(4px,env(safe-area-inset-bottom));z-index:5;padding:4px 0 3px;background:var(--paper)}.primary-button,.secondary-button{min-height:44px;border-radius:12px;padding:7px 12px}.status-panel{min-height:44px;margin-top:2px;padding:6px 8px;font-size:.82rem}footer{justify-content:center;padding:8px 4px;text-align:center}.top-actions{gap:6px}.icon-button{width:40px;min-height:40px} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }