/* The live iframe stays mounted when changing size. No save session is copied. */
body[data-current-view="play"] { height:100dvh; overflow:hidden; background:#101c2b; color:#e6dcc5; }
body[data-current-view="play"] .site-header { height:56px; min-height:0; position:relative; padding:0 22px; background:#101c2b; }
body[data-current-view="play"] #main-content { height:calc(100dvh - 56px); min-height:0; }
.player-view { padding:0 14px 10px; min-height:0; height:100%; }
#player-shell { height:100%; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; position:relative; }
.player-heading { width:100%; max-width:none; min-width:0; margin:0; padding:10px 0; gap:12px; align-items:center; }
.player-heading-copy { min-width:0; }
.player-heading h1 { color:#eadfca; font-size:17px; line-height:1.4; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-back { width:32px; height:36px; flex:none; border-color:#b8a16c65; background:#26344b; color:#decba2; }
.cloud-status { margin:3px 0 0; font-size:11px; line-height:1.4; color:#b6bcc6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; }
.cloud-status[data-state="error"],.cloud-status[data-state="conflict"] { color:#f3bf8a; }
#player-controls { margin-left:auto; display:flex; gap:6px; flex:none; }
#player-controls .player-control { margin:0; padding:8px 11px; color:#e6dcc5; background:#26344b; border:1px solid #b8a16c70; border-radius:4px; font-size:11px; display:flex; align-items:center; gap:6px; }
#player-controls .player-control:hover { background:#354560; border-color:#dbc693; }
#player-controls .player-control:disabled { opacity:.45; cursor:wait; }
#player-controls .player-control span { display:inline; }
#player-controls .player-control svg { width:17px; height:17px; }
.player-stage,.player-stage[data-engine="reader"]:not(:fullscreen) { width:100%; height:100%; max-width:none; max-height:none; min-height:0; aspect-ratio:auto; margin:0; border:1px solid #b8a16c80; background:#070c14; border-radius:5px; box-shadow:0 0 0 3px #b8a16c0c; }
.player-stage iframe { height:100%; width:100%; min-height:0; display:block; border:0; }
.player-stage:fullscreen { border:0; border-radius:0; width:100vw; height:100dvh; max-height:none; }
.stage-exit-fullscreen { z-index:30; padding:9px 13px; background:#162334ef; color:#e6dcc5; border-color:#b8a16c; }
.player-below { width:100%; max-width:none; margin:0; min-height:38px; gap:12px; display:flex; align-items:center; justify-content:space-between; }
.player-below p { margin:0; font-size:10px; color:#a7adb7; max-width:none; }
.player-below .save-controls { display:flex; gap:12px; margin:0; align-items:center; justify-content:flex-end; }
.player-below .save-controls button { font-size:11px; }
.player-save { padding:6px 12px; border:1px solid #b8a16c66; background:#26344b; color:#e6dcc5; }
.player-guest-note { display:none; }
.player-loading { background:#101c2b; color:#e6dcc5; }
.player-loading .small-note { color:#b8b8b4; }
#mini-header { display:flex; align-items:center; gap:7px; height:36px; padding:0 8px; background:#26344b; color:#e6dcc5; border-bottom:1px solid #b8a16c80; }
#mini-header strong { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:auto; }
.mini-indicator { width:6px; height:6px; border-radius:50%; background:#b8a16c; flex:none; }
#mini-header button { font:inherit; font-size:10px; white-space:nowrap; background:transparent; border:1px solid #b8a16c4d; color:#e6dcc5; padding:4px 6px; border-radius:3px; cursor:pointer; }
#mini-header button:hover { background:#b8a16c30; }
#mini-header button:disabled { opacity:.45; }
#mini-close { font-size:18px!important; line-height:16px; }
body[data-player-mode="mini"] .player-view,body[data-player-mode="pip"] .player-view { position:fixed; bottom:14px; right:14px; z-index:80; width:min(440px,calc(100vw - 24px)); height:min(370px,calc(100dvh - 90px)); padding:0; min-height:0; }
body[data-player-mode="mini"] .player-view:has(.mini-wide),body[data-player-mode="pip"] .player-view:has(.mini-wide) { width:min(600px,calc(100vw - 24px)); height:min(470px,calc(100dvh - 90px)); }
body[data-player-mode="mini"] #player-shell,body[data-player-mode="pip"] #player-shell { grid-template-rows:36px minmax(0,1fr); overflow:hidden; border:1px solid #b8a16c; border-radius:7px; box-shadow:0 14px 65px #000a,0 0 0 3px #101c2b80; background:#101c2b; }
body[data-player-mode="mini"] .player-heading,body[data-player-mode="mini"] .player-below,body[data-player-mode="pip"] .player-heading,body[data-player-mode="pip"] .player-below { display:none; }
body[data-player-mode="mini"] .player-stage,body[data-player-mode="pip"] .player-stage { border:0; border-radius:0; box-shadow:none; min-height:0; }
body[data-player-mode="pip"] #mini-header { background:#35422f; }
body[data-player-mode="pip"] #mini-pip { border-color:#c7c48f; }
body[data-player-mode="mini"] .toast,body[data-player-mode="pip"] .toast { bottom:auto; top:76px; max-width:min(390px,calc(100vw - 32px)); }
@media(max-width:760px) {
 body[data-current-view="play"] .site-header { height:48px; padding:0 12px; }
 body[data-current-view="play"] #main-content { height:calc(100dvh - 48px); }
 body[data-current-view="play"] .site-header nav { gap:12px; }
 .player-view { padding:0 6px 4px; }
 .player-heading { padding:7px 0; gap:7px; flex-wrap:wrap; }
 .player-heading-copy { flex:1; }
 .player-heading h1 { font-size:13px; }
 .cloud-status { max-width:calc(100vw - 64px); font-size:9px; }
 .player-back { width:28px; height:32px; }
 #player-controls { width:calc(100% - 35px); margin-left:35px; }
 #player-controls .player-control { padding:5px 9px; font-size:10px; flex:1; justify-content:center; }
 #player-controls .player-control svg { width:13px; height:13px; }
 .player-below { min-height:34px; }
 .player-below .mobile-recommendation { display:none; }
 .player-below .save-controls { width:100%; gap:12px; }
 .player-below .save-controls button { font-size:10px; }
 body[data-player-mode="mini"] .player-view,body[data-player-mode="pip"] .player-view { bottom:8px; right:8px; width:calc(100vw - 16px); height:min(380px,calc(100dvh - 80px)); }
}
@media(max-height:520px) and (min-width:761px) { body[data-current-view="play"] .site-header { height:42px; } body[data-current-view="play"] #main-content { height:calc(100dvh - 42px); } .player-heading { padding:5px 0; } .player-below { min-height:30px; } }
@media(prefers-reduced-motion:reduce) { #player-shell { transition:none; } }