.story-play-panel { align-items: start; }
.play-screen.is-mission-mode:has(.story-play-panel.is-active) #play-mission-intro { display:block; font-size:.92rem; line-height:1.5; color:#e0e8e8; margin-top:9px; max-width:56ch; }
.play-screen.is-mission-mode .story-play-panel .game-panel-copy { grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; }
.play-screen.is-mission-mode .story-play-panel .game-panel-copy > p { grid-column:1; font-size:.86rem; line-height:1.45; }
.play-screen.is-mission-mode .story-play-panel .game-live-status { color:#e7c582; font-size:.82rem; line-height:1.45; text-align:center; }
.story-play-experience { display:grid; gap:10px; justify-items:center; width:min(100%, 350px); margin-inline:auto; }
.story-play-art { position:relative; width:min(100%, 330px); height:112px; overflow:hidden; margin:0; border:1px solid color-mix(in srgb,var(--gold,#bfa181) 55%,transparent); border-radius:18px; background:#071735; box-shadow:0 12px 32px rgba(0,0,0,.24); }
.story-play-art img { width:100%; height:100%; object-fit:cover; display:block; }
.story-play-board { position:relative; width:min(100%,330px); min-height:132px; padding:10px; border-radius:20px; color:#fff9e8; background:linear-gradient(155deg,rgba(13,36,90,.97),rgba(6,22,55,.98)); border:1px solid rgba(191,161,129,.48); touch-action:none; }
.story-play-board button { min-width:44px; min-height:44px; color:inherit; font:inherit; touch-action:none; }
.story-play-river { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:28px 88px 28px; gap:6px; }
.story-play-river button,.story-play-river-cell { position:relative; aspect-ratio:1; border-radius:12px; border:1px solid rgba(239,250,253,.2); background:rgba(38,79,143,.58); }
.story-play-river-cell { aspect-ratio:auto; background:rgba(38,79,143,.15); }
.story-play-river button { aspect-ratio:auto; padding:0; }
.story-play-river svg { width:100%;height:100%;display:block;filter:drop-shadow(0 0 5px rgba(131,219,239,.55)); }
.story-play-river button[data-hint="true"] { outline:3px solid #f0cb77; outline-offset:-3px; }
.story-play-river-end { position:absolute; z-index:2; top:48%; translate:0 -50%; font-size:24px; pointer-events:none; }
.story-play-river-fish { left:4px; }.story-play-river-sea { right:4px; }
.story-play-trail { height:190px; overflow:hidden; background-position:center;background-size:cover; }
.story-play-trail-path { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
.story-play-waypoint { position:absolute; translate:-50% -50%; padding:0; border:1px solid #f0cb77; border-radius:50%; background:#264f8f; }
.story-play-waypoint[aria-current="step"] { background:#f0cb77; color:#0d245a; box-shadow:0 0 0 7px rgba(240,203,119,.18); }
.story-play-player { position:absolute; width:48px; height:48px; border-radius:50%; translate:-50% -50%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 4px 7px rgba(0,0,0,.5)); transition:left .28s ease,top .28s ease; }
.story-play-reveal { display:grid; grid-template-columns:repeat(8,1fr); padding:0; overflow:hidden; min-height:300px; background-position:center;background-size:cover; }
.story-play-reveal-cell { aspect-ratio:1; background:rgba(2,13,38,.91); transition:opacity .25s ease; pointer-events:none; }
.story-play-reveal-cell[data-cleared="true"] { opacity:0; }
.story-play-tools { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.story-play-tools button { min-width:44px;min-height:44px;border:1px solid rgba(240,203,119,.58); border-radius:13px; background:#264f8f; padding:8px 14px; }
.story-play-tools button { color:#fff9e8; }
.story-play-panel .game-live-status:empty { display:none; }
.story-play-piece[data-player=true] { background:rgba(168,65,112,.3); }
.story-play-piece img { border-radius:50%; }
.story-play-tools button:disabled { opacity:.5; }
.story-play-piece[data-selected=true] { outline:3px solid #f0cb77; outline-offset:-3px; }
.story-play-exit { position:absolute; right:6px; top:54%; font-size:.68rem; color:#f0cb77; pointer-events:none; }
.story-play-grid { display:grid; gap:5px; }
.story-play-cell { display:grid; place-items:center; min-width:0!important; padding:0; border:1px solid rgba(239,250,253,.16); border-radius:8px; background:rgba(38,79,143,.32); }
.story-play-piece { position:absolute; display:grid; place-items:center; border:1px solid #f0cb77; border-radius:12px; background:#315f75; color:#fff9e8; transition:inset .22s ease,transform .22s ease; }
.story-play-piece[data-player="true"] { background:#a84170; }
.story-play-piece img,.story-play-courier { width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.story-play-piece[data-player="false"] { background:transparent;border-color:rgba(240,203,119,.45);overflow:hidden; }
.story-play-piece[data-player="false"] i { width:22%;height:110%;border-radius:60% 40%;background:linear-gradient(#547b63,#b8a752);transform:rotate(5deg); }
.story-play-cell { position:relative; color:#f0cb77; font-weight:700; }
.story-play-cell[data-rock=true]::before { content:""; width:75%; height:65%; background:linear-gradient(135deg,#84959b,#374c61); border-radius:40% 50% 26% 24%; box-shadow:inset 3px 4px 0 #9bb0af,0 4px 8px #061637; }
.story-play-cell[data-beach=true] { background:linear-gradient(145deg,#886a44,#c9b989); color:#182b46; }
.story-play-landmark { width:75%; height:75%; object-fit:contain; border-radius:50%; }
.story-play-courier { position:absolute; translate:-50% -50%; pointer-events:none; object-fit:contain; border-radius:50%; transition:left .3s ease,top .3s ease; }
.story-play-plan { flex-basis:100%; text-align:center; min-height:28px; color:#f0cb77; font-weight:600; letter-spacing:.06em; }
.story-play-panel.is-story-complete .story-play-art { box-shadow:0 0 0 2px rgba(240,203,119,.78),0 18px 50px rgba(56,126,170,.35); }
@media (prefers-reduced-motion:reduce) { .story-play-player,.story-play-piece,.story-play-courier,.story-play-reveal-cell { transition:none; } }
@media (max-width:420px) { .story-play-panel { gap:12px; } .story-play-experience { width:100%; } .story-play-art { width:min(100%,320px);height:96px; } .story-play-board { width:min(100%,320px); } }