:root {color-scheme:light; --accent:#b94f7c; --mini-bg:#fff0f4; --ink:#51434d; --paper:#fffdf8; font-family:system-ui,-apple-system,'Hiragino Kaku Gothic ProN',sans-serif; color:var(--ink); background:#f5f0eb}
* {box-sizing:border-box}
body {margin:0; height:100svh; height:100dvh; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; background:radial-gradient(ellipse at 50% 0,var(--mini-bg),#f5f0eb 80%)}
body > .game-nav-header {flex:none}
button,a,input {touch-action:manipulation}
button {font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible {outline:3px solid var(--accent); outline-offset:2px}
[hidden] {display:none !important}
.mini-shell {width:100%; max-width:450px; margin:0 auto; padding:3px 8px max(7px,env(safe-area-inset-bottom)); flex:1; min-height:0; display:flex; flex-direction:column; gap:5px; background:linear-gradient(180deg,var(--paper),#fcf9f4)}
.companion {position:relative; display:flex; align-items:center; gap:9px; min-height:78px; padding:0 5px; flex:none; isolation:isolate}
.companion::before {content:''; position:absolute; z-index:-1; left:9px; top:9px; width:61px; height:61px; border-radius:50%; background:var(--mini-bg); box-shadow:inset 0 0 0 3px #fff8}
.companion > img {width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 4px 3px #6c3f3b1c)}
.companion > div {min-width:0; flex:1}
.cast-name {font-size:10px; font-weight:650; letter-spacing:.05em; color:#827079; display:block; margin:0 0 4px 9px}
.speech {position:relative; font-size:13px; line-height:1.5; margin:0; background:#fffdf9; border:1px solid #e9dfda; border-radius:5px 16px 16px; padding:8px 11px; min-height:37px; box-shadow:0 3px 0 #d9c8bc18}
.companion[data-reaction='good'] .speech {border-color:var(--accent); background:var(--mini-bg)}
.companion[data-reaction='good'] > img {animation:happy .35s ease-out}
@keyframes happy {50% {transform:translateY(-5px) rotate(3deg)}}
.mini-hud {display:flex; justify-content:space-between; align-items:center; min-height:30px; flex:none; gap:6px; padding:0 2px; font-size:13px; font-variant-numeric:tabular-nums}
.mini-hud > span:first-child {display:flex; align-items:center; gap:7px; color:var(--accent); background:var(--mini-bg); padding:3px 12px; border-radius:11px; box-shadow:inset 0 1px 0 #fff}
.mini-hud strong {font-size:19px; font-weight:750; letter-spacing:-.04em}
.mini-hud .clock {margin-left:auto; font-size:12px; font-weight:700; padding:6px 10px; border:1px solid #e9e0d8; border-radius:10px; background:#fffdf9; min-width:45px; text-align:center}
.icon-button {border:1px solid #e9e0d8; background:#fffdf9; color:var(--accent); border-radius:11px; width:38px; min-height:32px; font-size:19px; margin-left:0; box-shadow:0 2px 0 #ddcec333}
.stage {position:relative; flex:1; min-height:0; overflow:hidden; border-radius:19px; background:var(--mini-bg); isolation:isolate; box-shadow:0 0 0 1px #8c6f591c,0 5px 13px #876d5310}
.stage::after {content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border:1px solid #fff9; border-radius:inherit; box-shadow:inset 0 1px 4px #fff8}
#playfield {display:block; width:100%; height:100%; position:absolute; inset:0; touch-action:none}
#targets {position:absolute; inset:0; z-index:1; pointer-events:none}
.hit-target {position:absolute; border:0; background:transparent; border-radius:12px; padding:0; pointer-events:auto; touch-action:manipulation}
.hit-target:active {background:#fff3; box-shadow:inset 0 0 0 2px #fff8}
.hit-target:disabled {pointer-events:none}
.hit-target:focus-visible {outline-offset:-3px; background:#fff3}
.overlay {position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; justify-content:safe center; overflow-y:auto; overscroll-behavior:contain; padding:14px; text-align:center; background:linear-gradient(150deg,#fffdf6f5,#fffaf1e8 55%,var(--mini-bg)); backdrop-filter:blur(5px)}
.panel-icon {flex:none; display:flex; align-items:center; justify-content:center; width:84px; height:84px; line-height:1; margin:0 0 9px; border:1px solid #fff; border-radius:26px; background:linear-gradient(145deg,#fffdf9,var(--mini-bg)); box-shadow:0 6px 0 #b69b8410,0 10px 20px #80604c10; transform:rotate(-5deg)}
.panel-icon img {width:68px; height:68px; transform:rotate(5deg)}
.overlay h2 {font-size:23px; font-weight:750; letter-spacing:-.04em; margin:0; line-height:1.4; color:var(--ink)}
.panel-detail {font-size:12px; line-height:1.65; max-width:240px; margin:10px 0; color:#7d6a72}
.cast-options {display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin:12px 0 16px}
.cast-options button {position:relative; border:2px solid #fff; width:51px; height:57px; border-radius:17px; background:#f0e8df; padding:0; flex:none; box-shadow:0 3px 0 #9c7f6612; transition:background .16s,border-color .16s,transform .16s}
.cast-options img {width:100%; height:100%; object-fit:contain; transform:translateY(-2px)}
.cast-options button[aria-pressed='true'] {border-color:var(--accent); background:var(--mini-bg); transform:translateY(-3px); box-shadow:0 4px 0 #8f6a731c}
.cast-options button[aria-pressed='true']::after {content:'✓'; position:absolute; right:-4px; bottom:-4px; width:17px; height:17px; display:grid; place-items:center; border-radius:50%; background:var(--accent); border:2px solid #fffdf9; color:#fff; font-size:10px; font-weight:800}
.go {border:1px solid #fff7; border-radius:23px; width:72px; height:63px; background:var(--accent); background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#60474e)); color:#fffdf8; font-size:28px; line-height:1; box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 68%,#60474e),0 10px 18px #70454d21; flex:none; transition:transform .12s,box-shadow .12s}
.go:active {transform:translateY(3px); box-shadow:0 2px 0 var(--accent)}
.controls {display:flex; gap:6px; justify-content:center; flex:none; padding:3px 1px 4px}
.controls button {display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#fffdf9,var(--mini-bg)); color:var(--accent); min-width:44px; min-height:48px; flex:1; max-width:100px; border:1px solid #e1d6cd; border-bottom:3px solid #d5c2b1; border-radius:13px; font-size:26px; padding:4px; transition:background .12s,transform .12s}
.controls button > img {width:34px; height:34px; object-fit:contain; pointer-events:none}
.controls button:active {transform:translateY(2px); border-bottom-width:1px; background:var(--mini-bg)}
.controls button[aria-pressed='true'] {border:2px solid var(--accent); background:var(--mini-bg); box-shadow:inset 0 0 0 2px #fff8}
.controls button:disabled {opacity:.35; cursor:default; box-shadow:none}
.save-note {font-size:11px; margin:8px 0 0; color:#806e75}
/* The result stays beside the finished board instead of covering it. */
.overlay[data-presentation='result'] {overflow:visible; position:relative; inset:auto; flex:none; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:8px; padding:8px 10px; border:1px solid #eaded3; border-radius:15px; background:var(--paper); backdrop-filter:none; text-align:left; box-shadow:0 3px 0 #d9c8bc18}
.overlay[data-presentation='result'] .panel-icon {display:none}
.overlay[data-presentation='result'] h2 {flex:1; font-size:18px; min-width:90px}
.overlay[data-presentation='result'] .panel-detail {font-size:11px; margin:0; max-width:95px; color:var(--accent)}
.overlay[data-presentation='result'] .go {order:2; width:48px; height:44px; border-radius:15px; font-size:25px; box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 68%,#60474e)}
.overlay[data-presentation='result'] .cast-options {order:3; width:100%; margin:2px 0}
.overlay[data-presentation='result'] .save-note {order:4; width:100%; margin:0}
.cast-toggle {order:1; border:1px solid #e9e0d8; border-radius:13px; background:var(--mini-bg); color:var(--accent); width:44px; height:44px; font-size:24px; flex:none}
@media (max-width:350px) {.controls {gap:3px}.controls button {min-width:40px;font-size:24px}.cast-options {gap:4px}.cast-options button {width:46px}}
@media (max-height:740px) {
    .companion {min-height:62px; gap:6px}.companion > img {width:62px;height:62px}
    .companion::before {width:49px;height:49px;left:8px;top:7px}
    .panel-icon {width:52px;height:52px;border-radius:17px;margin-bottom:6px}.panel-icon img {width:44px;height:44px}
    .overlay {padding:10px}.overlay h2 {font-size:20px}.panel-detail {font-size:12px;line-height:1.5;margin:7px 0}
    .cast-options {margin:7px 0 10px}.cast-options button {height:48px;width:48px}.go {width:60px;height:51px;border-radius:18px;font-size:25px}
}
@media (max-height:620px) {.panel-icon {display:none}}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none !important;transition:none !important}.overlay {backdrop-filter:none}}

/* Keep the larger cast picker within the play area. */
.cast-options {max-height:132px; overflow-y:auto; align-content:flex-start; padding:5px;}