:root{--ink:#071323;--art-ink:#17324d;--paper:#fffaf0;--surface:#fff;--page:#dbe6ef;--coral:#d9563f;--gold:#f8c35a;--kraft:#c98d51;--kraft-light:#efc88f;--sage:#76a58a;--blue:#28527a;--muted:#526477;--line:#a9b8c5}
*{box-sizing:border-box}
[hidden]{display:none!important}
.screen{min-width:0}
.game-shell{width:100%;padding-bottom:32px}
.intro{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);align-items:stretch}
.hero-stage{min-height:100%;margin:-4px 0 -4px -4px;border-radius:24px 0 0 24px!important;box-shadow:none!important;background:#e8f0f5!important}
.hero-stage img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.intro-copy{align-self:center}
.eyebrow{margin:0 0 8px;font-size:.72rem;line-height:1.3}
h1{margin:0;font-size:clamp(2.8rem,6vw,6.6rem);line-height:.91;letter-spacing:-.055em}
.dek{margin:10px 0 16px;color:#834638;font-size:clamp(1rem,2.2vw,1.4rem);font-weight:900;line-height:1.35}
.news-brief a{color:inherit}
#start{width:100%;margin-top:6px}
.key-help{margin:12px 0 0;color:var(--muted);font-size:.75rem;line-height:1.55;text-align:center}
.play,.result,.error{width:min(900px,calc(100% - 28px));margin:12px auto 30px;padding:22px;color:var(--ink);background:var(--paper);border:4px solid var(--ink);border-radius:28px;box-shadow:0 10px 0 rgba(7,19,35,.14)}
.play{width:min(760px,calc(100% - 20px))}
.play-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.hud-cell{min-width:0;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:none;text-align:center}
.hud-cell span{display:block;color:var(--muted);font-size:.68rem;font-weight:850;letter-spacing:.06em}
.hud-cell b{display:block;font-size:1.05rem;line-height:1.15;overflow-wrap:anywhere}
.playfield-wrap{position:relative;width:min(100%,620px);margin:0 auto;padding-top:14px}
.playfield{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--paper);border:4px solid var(--art-ink);border-radius:24px;box-shadow:8px 8px 0 rgba(23,50,77,.18);touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.playfield:focus-visible{outline:4px solid #0086ff;outline-offset:5px}
.world,.object-layer,.trace-layer,.effect-layer{position:absolute;inset:0;width:100%;height:100%;display:block}
.world{z-index:0}
.object-layer{z-index:2;pointer-events:none}
.trace-layer{z-index:4;pointer-events:none}
.effect-layer{z-index:6;pointer-events:none}
.object{filter:drop-shadow(4px 5px 0 rgba(23,50,77,.14));transition:transform .18s ease-out,opacity .18s}
.target-halo{fill:#f8c35a;fill-opacity:.22;stroke:#d9563f;stroke-width:4;stroke-dasharray:7 9}
.desk-zone{fill:#fff;fill-opacity:.01;stroke:#17324d;stroke-width:1;stroke-opacity:.06}
.roll-hit{fill:transparent;pointer-events:all;cursor:crosshair}
.playfield.is-ready .roll-art{animation:roll-pulse .7s ease-in-out 2}
.roll-art{filter:drop-shadow(6px 7px 0 rgba(23,50,77,.22));transform-origin:center}
.trace-key{fill:none;stroke:#fffaf0;stroke-width:20;stroke-linecap:round;stroke-linejoin:round}
.trace{fill:none;stroke:var(--art-ink);stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.trace-ridges{fill:none;stroke:var(--kraft-light);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 17}
.trace-layer.is-warning .trace{stroke:#b55c35}.trace-layer.is-warning .trace-ridges{stroke:#f8c35a}
.booth-floor{fill:var(--kraft-light);fill-opacity:.35;stroke:#fffaf0;stroke-width:18;stroke-linejoin:round}
.booth-wall{fill:none;stroke:var(--art-ink);stroke-width:12;stroke-linejoin:round;filter:drop-shadow(8px 10px 0 rgba(23,50,77,.2));stroke-dasharray:1400;stroke-dashoffset:1400;animation:build-wall .48s ease-out forwards}
.booth-ridges{fill:none;stroke:#9b6638;stroke-width:5;stroke-dasharray:6 17;stroke-linejoin:round;opacity:.8}
.closure{fill:#fffaf0;fill-opacity:.78;stroke:var(--coral);stroke-width:7;stroke-dasharray:4 10;opacity:0;transition:opacity .12s}
.closure.is-near{opacity:1}
.coach{position:absolute;z-index:8;top:0;left:50%;max-width:190px;padding:7px 10px;color:#fff;background:var(--coral);border-radius:6px;font-size:.72rem;font-weight:950;line-height:1.25;pointer-events:none;box-shadow:none;transform:translateX(-50%);animation:coach-fade 1.8s forwards}
.feedback{min-height:44px;margin:14px auto 0;color:var(--art-ink);font-size:1rem;font-weight:950;line-height:1.35;text-align:center}
.feedback[data-mode=bad]{color:#a03f2c;font-size:1.12rem}.feedback[data-mode=good]{color:#176448;font-size:1.12rem}
.pop{position:absolute;z-index:9;left:50%;top:44%;transform:translate(-50%,-50%);width:max-content;max-width:86%;padding:14px 18px;color:var(--ink);background:var(--gold);border:4px solid var(--art-ink);border-radius:12px;box-shadow:6px 6px 0 rgba(23,50,77,.2);font-size:clamp(1.1rem,5vw,2rem);font-weight:950;text-align:center;pointer-events:none;animation:pop .8s ease-out forwards}
.result{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);gap:22px;align-items:center}
.result-art{min-width:0;overflow:hidden;background:#e8f0f5;border:4px solid var(--art-ink);border-radius:20px;box-shadow:7px 7px 0 rgba(23,50,77,.2)}
.result-art object{display:block;width:100%;height:auto;aspect-ratio:900/560;pointer-events:none}
.result-copy{min-width:0}
.result h2{margin:4px 0 8px;font-size:clamp(1.9rem,4vw,3.5rem);line-height:1.02;letter-spacing:-.035em;overflow-wrap:anywhere}
.score-line{display:flex;align-items:baseline;gap:7px;margin:8px 0}.score-line strong{font-size:clamp(3.3rem,8vw,6rem);line-height:.9}.score-line span{color:var(--muted);font-weight:850}
.rank-line{margin:8px 0;font-weight:900}.rank-line b{color:#8a4d33}
.result-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:14px 0}.result-stats p{margin:0;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:7px;font-size:.82rem;font-weight:800;line-height:1.4;overflow-wrap:anywhere}
.result-actions{display:grid;gap:9px}.result-actions button{width:100%}
.news-links{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:18px}.news-links a{color:var(--blue);font-size:.8rem;font-weight:850}
.disclaimer{margin:14px 0 0;color:var(--muted);font-size:.7rem;line-height:1.55}
.error{text-align:center}.error .primary{margin-top:12px}
.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}
@keyframes roll-pulse{50%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes build-wall{to{stroke-dashoffset:0}}
@keyframes coach-fade{0%,65%{opacity:1}100%{opacity:0}}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-42%) scale(.88)}20%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(.97)}}
@media(max-width:819px){.intro{display:block}.hero-stage{min-height:0;margin:-4px -4px 0;border-radius:20px 20px 0 0!important;aspect-ratio:16/9}.hero-stage img{object-fit:cover}.intro-copy{padding-top:18px!important}h1{font-size:clamp(3.2rem,15vw,5rem)}.result{grid-template-columns:1fr}.result-art{width:min(100%,520px);margin:0 auto}}
@media(max-width:819px){html:lang(ja) h1{font-size:clamp(2.35rem,11.5vw,3.3rem)}}
@media(max-width:680px){.play,.result,.error{width:calc(100% - 12px);margin:7px auto 20px;padding:14px;border-width:3px;border-radius:22px;box-shadow:0 7px 0 rgba(7,19,35,.14)}.play{padding:10px}.play-hud{gap:5px;margin-bottom:7px}.hud-cell{padding:6px 4px}.hud-cell span{font-size:.58rem}.hud-cell b{font-size:.87rem}.playfield-wrap{padding-top:10px}.playfield{border-width:3px;border-radius:18px;box-shadow:5px 5px 0 rgba(23,50,77,.16)}.coach{max-width:170px;padding:5px 8px;font-size:.64rem}.feedback{min-height:39px;margin-top:10px;font-size:.88rem}.result-stats{grid-template-columns:1fr}.key-help{font-size:.7rem}.result h2{font-size:2rem}}
@media(max-width:390px) and (max-height:780px){.playfield-wrap{width:min(100%,calc(100svh - 188px))}.feedback{margin-top:7px}.play{padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){.playfield.is-ready .roll-art,.coach,.booth-wall,.pop{animation:none}.object,.closure{transition:none}.booth-wall{stroke-dashoffset:0}.coach{opacity:1}.pop{opacity:1}}

/* v3 action controls: the whole playfield is the control; labels explain its two halves. */
.playfield{cursor:pointer}
.turn-hints{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 18px 16px;pointer-events:none;z-index:8;opacity:.38;transition:opacity .16s ease}
.turn-hints span{color:#17324d;font-size:clamp(.68rem,2.4vw,.86rem);font-weight:950;letter-spacing:.04em;text-shadow:0 1px 0 #fff,0 0 7px rgba(255,255,255,.9)}
.playfield.is-driving .turn-hints{opacity:.86}
.playfield[data-fold="left"] .turn-hints span:first-child,.playfield[data-fold="right"] .turn-hints span:last-child{color:#e65336;transform:scale(1.12)}
.playfield.is-driving .roll-art{animation:none}
@media(max-width:390px){.turn-hints{padding:0 12px 10px}.turn-hints span{font-size:.64rem}}