/* One stable spacecraft window. All controls stay independent of canvas resolution. */
.player-page{--player-gold:#ddc085;margin:0;min-width:320px;background:#02050a;color:#d5e2e7;overflow:hidden}
.player-page #app{height:100svh;min-height:240px}
.ship-window{position:fixed;inset:0;overflow:hidden;background:#03070e;isolation:isolate}
#cosmos-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.window-frame{position:absolute;inset:0;pointer-events:none;border:1px solid #59666e35;box-shadow:inset 0 0 30px 8px #0009;border-radius:22px}
.window-frame:after{content:"";position:absolute;left:-10%;right:-10%;height:45px;bottom:-27px;border-top:1px solid #7a919147;border-radius:50%;background:#060a0f;box-shadow:0 -7px 24px #0005}
.ship-brand{position:absolute;top:max(19px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));display:flex;align-items:center;gap:10px;pointer-events:none;color:#e4ebe5}
.ship-brand .brand-symbol{width:44px;height:44px}
.ship-heading{position:absolute;right:max(24px,env(safe-area-inset-right));top:max(23px,env(safe-area-inset-top));display:flex;flex-direction:column;align-items:flex-end;gap:7px;pointer-events:none;text-shadow:0 1px 5px #000,0 0 12px #000}
.ship-motto{margin-left:9px;font:11px/1.25 system-ui,sans-serif;letter-spacing:.14em;color:var(--player-gold);white-space:nowrap;text-shadow:0 1px 5px #000,0 0 12px #000}
.ship-edition{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.25;letter-spacing:.06em;color:#cbdadd}
.ship-beta{border:1px solid currentColor;border-radius:4px;padding:2px 4px;color:var(--player-gold);font-size:8px;line-height:1.15;letter-spacing:.08em}

.ship-controls{position:absolute;bottom:calc(max(29px,env(safe-area-inset-bottom)) + 5px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;max-width:calc(100% - 36px);width:340px;z-index:2}
#play{min-height:52px;min-width:118px;padding:0 25px;display:inline-flex;gap:11px;align-items:center;justify-content:center;background:#0c1c26d9;border:1px solid #8daaa56b;border-radius:30px;color:#cfdfd9;font-size:13px;font-weight:400;letter-spacing:.04em;box-shadow:0 4px 25px #0005;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#play svg{width:17px;height:17px;fill:currentColor}
#play:hover{background:#152c37ed;border-color:#b2c9bd}
#play:focus-visible{outline:2px solid #d8e8dc;outline-offset:6px}
#player-status{margin:9px 0 0;text-align:center;font-size:11px;line-height:1.5;color:#abc0c6;min-height:0;max-width:320px;background:#03070eb8;border-radius:6px}
#player-status:empty{display:none}
#player-status.error{padding:7px 10px}
@media(max-width:500px){.ship-brand{top:max(17px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));gap:10px}.ship-brand .brand-symbol{width:38px;height:38px}.ship-brand .brand-wordmark{width:76px}.ship-brand .brand-nimmer,.ship-brand .brand-still{font-size:21px}.ship-heading{top:max(19px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));gap:6px}.ship-motto{margin-left:0;font-size:9px;letter-spacing:.1em}.ship-edition{font-size:10px}.window-frame{border-radius:15px}.ship-controls{bottom:calc(max(24px,env(safe-area-inset-bottom)) + 5px)}}
@media(max-height:450px){.ship-brand{top:max(10px,env(safe-area-inset-top))}.ship-heading{top:max(13px,env(safe-area-inset-top))}.ship-controls{bottom:calc(max(15px,env(safe-area-inset-bottom)) + 5px)}#play{min-height:46px;min-width:110px}}
/* Compact transport and quiet journey readout. Range keeps a 44px touch target. */
.ship-controls{width:370px}
.ship-transport{display:flex;align-items:center;justify-content:center;gap:17px}
.ship-volume{display:flex;align-items:center;gap:2px;min-height:44px;margin:0;color:#9db3bd}
.ship-volume svg{width:14px;height:14px;fill:currentColor;flex-shrink:0}
#mute{display:grid;place-items:center;width:44px;height:44px;min-height:44px;flex-shrink:0;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:#9db3bd;box-shadow:none;cursor:pointer;touch-action:manipulation}
#mute:hover{background:#91aaa514;color:#d3e1e1}
#mute:focus-visible{outline:1px solid #d8e8dc;outline-offset:1px}
#mute .volume-muted,#mute[aria-pressed="true"] .volume-waves{display:none}
#mute[aria-pressed="true"] .volume-muted{display:block}
.ship-volume input[type="range"]{appearance:none;-webkit-appearance:none;width:84px;height:44px;min-height:44px;margin:0;padding:0;background:transparent;cursor:pointer;accent-color:#bdd0ce;border:0;border-radius:0}
.ship-volume input::-webkit-slider-runnable-track{height:2px;background:#91aaa56b;border-radius:2px}
.ship-volume input::-moz-range-track{height:2px;background:#91aaa56b;border-radius:2px}
.ship-volume input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;margin-top:-4px;border:1px solid #afc7c2;border-radius:50%;background:#cadbd6}
.ship-volume input::-moz-range-thumb{width:8px;height:8px;border:1px solid #afc7c2;border-radius:50%;background:#cadbd6}
.ship-volume input:focus-visible{outline:1px solid #d8e8dc;outline-offset:3px;border-radius:4px}
.ship-readout{margin-top:11px;text-align:center;font-size:10px;line-height:1.5;max-width:100%;color:#a4b7be;pointer-events:none}
.ship-world{display:block;max-width:100%;overflow-wrap:anywhere;color:#c0d0d1;font-size:11px;line-height:1.35}
.ship-world-separator{margin:0 5px;color:#6f838d;font-size:9px}
.ship-world-version{display:inline-block;color:#83949e;font-size:9px;white-space:nowrap}
.ship-counters{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:3px;color:var(--player-gold);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:500px){.ship-transport{gap:14px}.ship-readout{margin-top:9px}}
@media(max-height:450px){.ship-readout{margin-top:6px}.ship-counters{margin-top:1px}}
@media(max-width:500px){.ship-heading{top:max(13px,env(safe-area-inset-top))}}
/* Version and beta form a compact column to the left of the menu target. */
.ship-heading{top:max(15px,env(safe-area-inset-top));flex-direction:row;align-items:center;gap:8px;pointer-events:auto;z-index:5}
.ship-edition{flex-direction:column;align-items:flex-end;gap:4px;font-size:9px;line-height:1.2;padding-right:0}
#menu-button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:50%;color:var(--player-gold);background:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation}
#menu-button svg{width:23px;height:23px;fill:currentColor}
#menu-button:hover{background:#ddc08512}
#menu-button:focus-visible,.player-menu :focus-visible,.player-dialog button:focus-visible{outline:1px solid var(--player-gold);outline-offset:2px}
.player-menu{position:absolute;right:0;top:47px;width:205px;box-sizing:border-box;padding:7px;border:1px solid #ddc08544;border-radius:11px;background:#071018f7;box-shadow:0 12px 32px #000b;text-shadow:none;display:flex;flex-direction:column;gap:2px}
.player-menu[hidden],.player-dialog section[hidden]{display:none}
#menu-lab-slot:empty{display:none}
.player-menu button,.player-menu a{display:flex;align-items:center;min-height:44px;width:100%;box-sizing:border-box;margin:0;padding:10px 12px;border:0;border-radius:6px;background:transparent;box-shadow:none;color:#d5dfdf;text-align:left;text-decoration:none;font:13px/1.4 system-ui,sans-serif;cursor:pointer}
.player-menu button:hover,.player-menu a:hover{background:#ddc08512;color:var(--player-gold)}
.player-dialog{width:min(460px,calc(100vw - 32px));max-height:calc(100svh - 32px);box-sizing:border-box;margin:auto;padding:20px;border:1px solid #ddc08566;border-radius:14px;background:#081018;color:#cbd6d8;font:14px/1.7 system-ui,sans-serif;box-shadow:0 20px 70px #000c;overflow:auto;overscroll-behavior:contain}
.player-dialog::backdrop{background:#01050bcc}
.player-info-heading{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#081018;z-index:1}
.player-info-heading h2{margin:0;color:var(--player-gold);font-size:18px;line-height:1.35;font-weight:400;overflow-wrap:anywhere}
#player-info-close{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:0;border-radius:50%;color:var(--player-gold);background:transparent;box-shadow:none;cursor:pointer}
#player-info-close svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none}
.player-dialog p{margin:15px 0 0}
.player-qr{margin:20px auto 0;text-align:center}
.player-qr img{display:block;width:180px;height:180px;max-width:100%;margin:auto;border-radius:7px;background:#fff}
.player-qr figcaption{margin-top:9px;color:var(--player-gold);font-size:11px}
@media(max-height:450px){.ship-heading{top:max(5px,env(safe-area-inset-top))}.ship-edition{gap:3px;font-size:8px}.ship-beta{padding:1px 3px}}
.player-menu{top:49px}
.player-bitcoin-address{display:block;text-align:center;margin:14px 0 0;color:#c3d2d4;font:10px/1.6 ui-monospace,monospace;overflow-wrap:anywhere;user-select:all}

@media(max-width:360px){.ship-brand{left:max(12px,env(safe-area-inset-left));gap:6px}.ship-brand .brand-symbol{width:30px;height:30px}.ship-brand .brand-wordmark{width:62px}.ship-brand .brand-nimmer,.ship-brand .brand-still{font-size:18px}.ship-motto{font-size:7.5px;letter-spacing:.08em}.ship-heading{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));gap:5px}}