:root{--ink:#17324d;--paper:#fffaf0;--blue:#4aa9d8;--brown:#956047;--gold:#f8c35a;--coral:#d9563f;--mint:#67c7b5;--pale:#dcecf4}
*{box-sizing:border-box}html{background:#dbe6ef;color:var(--ink)}button,a{font:inherit}.game-shell{width:min(1120px,100%);margin:0 auto;padding:clamp(10px,2.5vw,30px)}.screen{min-height:calc(100dvh - 88px)}[hidden]{display:none!important}
.intro,.result{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(340px,.98fr);gap:clamp(18px,4vw,50px);align-items:center}.intro{min-height:0}.hero-stage,.result-art{aspect-ratio:900/1120;background:#edf6fa}.hero-stage img{width:100%;height:100%;display:block;object-fit:cover}.hero-flow{position:absolute;inset:0}.hero-token{position:absolute;width:18%;filter:drop-shadow(3px 3px 0 #17324d2b)}.hero-token.blue{left:35%;top:25%}.hero-token.brown{right:28%;top:48%}.hero-token svg{display:block;width:100%}.intro h1,.result h2{margin:0;font-size:clamp(3rem,7vw,6rem);line-height:.94;letter-spacing:-.045em}.dek{font-size:clamp(1rem,2vw,1.35rem);font-weight:900;color:#714435;margin:10px 0}.eyebrow{font-size:.72rem;font-weight:950;letter-spacing:.12em;color:var(--coral)}.news-brief,.rule-paper{margin:12px 0;padding:13px 15px;background:#fff;border-left:5px solid var(--coral);border-radius:8px}.rule-paper{border-left-color:var(--blue);background:#edf7fb}.news-brief p,.rule-paper p{margin:5px 0 0;line-height:1.55}.primary,.secondary,.pause-button{min-height:50px;border:3px solid var(--ink);border-radius:11px;font-weight:950;cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .1s,box-shadow .1s,filter .1s}.primary{padding:12px 18px;background:var(--gold);color:var(--ink)}.secondary{padding:11px 15px;background:var(--mint);color:var(--ink)}.pause-button{min-height:40px;padding:7px 11px;background:#fff;color:var(--ink)}.primary:active,.secondary:active,.pause-button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}.primary:focus-visible,.secondary:focus-visible,.pause-button:focus-visible,.clamp:focus-visible,.locale:focus-visible,.brand:focus-visible,.news-links a:focus-visible{outline:4px solid #0086ff;outline-offset:4px}.key-help{font-size:.78rem;color:#526477;font-weight:750}
.play{max-width:980px;margin:0 auto;position:relative;display:grid;grid-template-columns:minmax(280px,520px) minmax(220px,1fr);gap:18px;align-items:center}.board-column{min-width:0}.play-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.status-pair{display:flex;gap:17px}.status-pair span,.clock span{display:block;font-size:.65rem;font-weight:900;letter-spacing:.08em;color:#526477}.status-pair b,.clock b{font-size:1.8rem;font-variant-numeric:tabular-nums}.clock{display:flex;align-items:center;gap:8px}.clock b.urgent{color:var(--coral)}.line-board{position:relative;aspect-ratio:900/1120;overflow:hidden;border:4px solid var(--ink);border-radius:18px;background:#edf6fa;box-shadow:7px 7px 0 #17324d32;touch-action:none}.board-base{position:absolute;inset:0;width:100%;height:100%;display:block}.token-layer,.clamp-layer{position:absolute;inset:0}.token-layer{z-index:10;pointer-events:none}.clamp-layer{z-index:8}.flow-token{position:absolute;width:17%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(2px 3px 0 #17324d2a);will-change:left}.flow-token svg{display:block;width:100%}.flow-token.brown{width:15%}.flow-token.resolved-good{animation:token-good .42s forwards}.flow-token.resolved-bad{animation:token-bad .42s forwards}.flow-token.caught{animation:token-caught .42s forwards}.clamp{position:absolute;width:74px;height:56px;padding:0;border:0;background:transparent;cursor:grab;touch-action:none;filter:drop-shadow(3px 4px 0 #17324d40);transition:transform .12s,filter .12s;user-select:none}.clamp svg{width:100%;height:100%;display:block;overflow:visible}.clamp:active{cursor:grabbing}.clamp.selected{filter:drop-shadow(0 0 0 #17324d00) drop-shadow(0 0 7px #0086ff)}.clamp.hinted{animation:hint 1s infinite}.clamp.snapped{filter:drop-shadow(3px 4px 0 #17324d40) brightness(1.12)}.tutorial{position:absolute;z-index:12;left:50%;top:42%;transform:translate(-50%,-50%);width:min(72%,270px);padding:9px 11px;background:var(--gold);border-left:6px solid var(--ink);border-radius:7px;font-size:.78rem;font-weight:950;text-align:center;pointer-events:none}.shield-rail{display:flex;justify-content:center;gap:7px;margin:10px 0 0}.shield-cell{width:34px;height:13px;border-radius:7px;background:#b8cbd5}.shield-cell.filled{background:var(--mint)}.side-panel{display:flex;flex-direction:column;gap:11px}.monitor{width:min(100%,220px);margin:0 auto}.monitor svg{display:block;width:100%}.feedback{margin:0;min-height:72px;padding:12px 14px;background:#fff;border-left:6px solid var(--blue);border-radius:8px;font-weight:900;display:flex;align-items:center}.feedback.good{border-left-color:var(--mint);background:#e7f6f1}.feedback.bad{border-left-color:var(--coral);background:#fff0eb}.feedback.note{border-left-color:var(--gold)}.flat-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;color:#526477;font-size:.72rem;font-weight:850;text-align:center}.flat-stats span{padding:6px 3px}.flat-stats b{display:block;color:var(--ink);font-size:1.1rem}.pause-layer{position:absolute;z-index:30;inset:0;background:#fffaf0ef;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.pause-layer p{font-weight:950}
.result{padding:2vh 0}.result-art svg{width:100%;height:100%;display:block}.result h2{font-size:clamp(2rem,5vw,4.1rem)}.score-line{display:flex;align-items:baseline;margin:14px 0 0}.score-line strong{font-size:clamp(5rem,11vw,8rem);line-height:.8;color:var(--coral)}.score-line span{font-weight:950}.rank-line{font-weight:950}.rank-line b{font-size:2rem;color:#248f7d}.rank-line span{margin-left:8px}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:13px 0}.result-stats p{margin:0;padding:9px 11px;background:#fff;border-left:4px solid var(--blue);font-weight:780}.result-actions,.news-links{display:flex;flex-wrap:wrap;gap:10px}.news-links{margin-top:18px}.news-links a{color:var(--ink);font-weight:850;text-underline-offset:4px}.disclaimer{font-size:.72rem;line-height:1.5;color:#526477}
@keyframes hint{50%{filter:drop-shadow(0 0 10px #f8c35a)}}@keyframes token-good{to{opacity:0;transform:translate(-50%,-50%) scale(.7)}}@keyframes token-bad{40%{transform:translate(-50%,-50%) scale(1.2)}to{opacity:0}}@keyframes token-caught{to{opacity:0;transform:translate(-95%,-50%) scale(.65)}}
@media(max-width:760px){.game-shell{padding:8px}.intro,.result{grid-template-columns:1fr;gap:12px;align-items:start}.hero-stage,.result-art{max-height:34vh;justify-self:center}.intro h1{font-size:clamp(2.8rem,14vw,4.5rem)}.play{grid-template-columns:1fr;max-width:520px;gap:8px}.line-board{max-height:calc(100svh - 190px);margin:0 auto}.side-panel{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}.monitor{width:110px;grid-row:1/3;grid-column:2}.feedback{min-height:51px;padding:8px 10px}.flat-stats{grid-column:1/-1}.result-art{max-height:31vh}}
@media(max-width:430px){.game-shell{padding:6px}.screen{min-height:calc(100dvh - 68px)}.intro{gap:8px}.hero-stage{max-height:27vh}.intro h1{font-size:clamp(2.65rem,13.5vw,3.7rem);line-height:1.04}.dek{font-size:.98rem;margin:6px 0}.news-brief,.rule-paper{margin:7px 0;padding:10px 12px;font-size:.82rem}.primary{width:100%}.key-help{display:none}.play-head{margin:0;height:41px}.status-pair b,.clock b{font-size:1.5rem}.line-board{width:min(100%,calc((100svh - 203px)*.8036));max-height:calc(100svh - 203px);border-radius:13px;box-shadow:5px 5px 0 #17324d32}.clamp{width:68px;height:52px}.side-panel{gap:4px}.monitor{width:88px}.feedback{min-height:44px;font-size:.77rem}.flat-stats{font-size:.64rem}.flat-stats b{font-size:.95rem}.pause-button{min-height:38px}.result-stats{grid-template-columns:1fr}.result-art{max-height:27vh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.flow-token{will-change:auto}}
body.is-playing{overflow:hidden;overscroll-behavior:none}

/* Universal clamp grammar: every row reads PASS on the left and STOP on the right. */
.clamp-rail{position:absolute;width:200px;height:72px;transform:translate(-50%,-50%);pointer-events:none;border-radius:12px;background:#ffffffdf;box-shadow:0 2px 0 #17324d2b}
.clamp-rail::before{content:"";position:absolute;left:56px;right:56px;top:31px;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--blue) 0 50%,var(--coral) 50%)}
.clamp-rail>span{position:absolute;font-size:.56rem;font-weight:950;line-height:1}
.rail-pass{left:5px;top:9px;color:#216d93}.rail-stop{right:5px;top:9px;color:var(--coral)}
.rail-state{left:50%;bottom:5px;transform:translateX(-50%);min-width:54px;text-align:center;color:#216d93}.clamp-rail.is-stop .rail-state{color:var(--coral)}
.tutorial{left:50%;top:4%;transform:translateX(-50%);width:min(82%,320px)}
.feedback.pass-state{border-left-color:var(--blue);background:#edf7fb}.feedback.stop-state{border-left-color:var(--coral);background:#fff0eb}

/* Compact rails sit below each flow; decision tokens remain in the foreground. */
.clamp{width:148px;height:54px;padding:0;border:2px solid var(--ink);border-radius:12px;background:#ffffffd9;box-shadow:0 3px 0 #17324dcc;filter:none;transform:translate(-50%,-50%)!important;overflow:visible;cursor:grab}
.clamp:active,.clamp.dragging{cursor:grabbing;box-shadow:0 1px 0 #17324dcc}.clamp.selected{outline:3px solid #0086ff;outline-offset:2px;filter:none}
.slider-track{position:absolute;left:38px;right:38px;top:24px;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--blue) 0 50%,var(--coral) 50%);pointer-events:none}
.endpoint{position:absolute;top:5px;font-size:.54rem;font-weight:950;line-height:1;pointer-events:none}.endpoint.pass{left:8px;color:#216d93}.endpoint.stop{right:8px;color:var(--coral)}
.lane-chip{position:absolute;left:-12px;top:50%;width:26px;height:26px;display:grid;place-items:center;transform:translateY(-50%);border:2px solid var(--ink);border-radius:50%;background:var(--gold);color:var(--ink);font-size:.68rem;font-weight:950;pointer-events:none}
.clamp-knob{position:absolute;z-index:2;left:50%;top:50%;width:58px;height:34px;display:grid;place-items:center;transform:translate(-50%,-50%) translateX(-39px);border:2px solid var(--ink);border-radius:8px;background:var(--blue);color:#fff;font-size:.66rem;font-weight:950;letter-spacing:.02em;box-shadow:0 2px 0 var(--ink);transition:transform .12s,background .12s;pointer-events:none}
.clamp.is-stop .clamp-knob{background:var(--coral)}.clamp.dragging .clamp-knob{transition:none}.clamp.snapped .clamp-knob{filter:brightness(1.18)}
.clamp.incoming::after{content:attr(data-incoming-label);position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);padding:2px 7px;border-radius:5px;background:#fffffff2;color:var(--ink);font-size:.56rem;font-weight:950;line-height:1.2;white-space:nowrap;box-shadow:0 2px 0 #17324d33}.clamp.incoming-brown{border-color:var(--brown)}.clamp.incoming-blue{border-color:var(--blue)}
@media(max-width:430px){.clamp{width:132px;height:48px}.clamp-knob{height:32px;width:54px}.slider-track{left:34px;right:34px;top:21px}.endpoint{top:4px;font-size:.5rem}.clamp.incoming::after{bottom:-18px}}