:root{--ink:#171717;--paper:#f4f4f1;--shade:#c4c4c0;--frame:3px;--key-shadow:0 3px 0 var(--ink)}
[hidden]{display:none!important}
button,input,a{-webkit-tap-highlight-color:transparent}
button,a,input{font-family:var(--ui-font)}
.player-page{padding:28px 20px 100px}
.player-card{width:min(640px,94%);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px 18px;padding:14px 16px;background:var(--paper);border:var(--frame) solid var(--ink);box-shadow:6px 6px 0 var(--ink),inset 3px 3px 0 #fff,inset -3px -3px 0 var(--shade)}
.player-page::before,.start-screen::before{transform:scale(1.08);transform-origin:center}
.card-caption{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:3px solid var(--ink)}
.system-label{margin:0 0 7px;color:#555;font:14px/1.6 var(--ui-font);letter-spacing:1px}
.card-caption h1{margin:0;color:var(--ink);font:20px/1.5 var(--ui-font)}
.utility-bar{display:flex;gap:8px;flex:none}
.console-key,.ghost-controls button,.transport button,.curse-step,.start-button,.corner-tile{
  display:grid;place-items:center;min-height:36px;padding:5px 7px;border:2px solid var(--ink);border-radius:2px;background:linear-gradient(#fff 0 78%,#d2d2ce 78%);color:var(--ink);box-shadow:var(--key-shadow),inset 2px 2px 0 #fff,inset -2px -4px 0 #aaa;cursor:pointer;text-decoration:none;font:14px/1.5 var(--ui-font);transition:transform 70ms steps(2,end),box-shadow 70ms steps(2,end),background-color 70ms steps(2,end)
}
.console-key:hover,.ghost-controls button:hover{background:#e5e5e1}
.console-key:active,.ghost-controls button.is-held,.ghost-controls button:active{transform:translateY(3px);background:#d2d2ce;box-shadow:inset 1px 1px 0 #aaa}
.console-key[aria-pressed=true]{background:#242424;color:#fff;box-shadow:var(--key-shadow),inset 2px 2px 0 #555,inset -2px -4px 0 #111}
.utility-button{min-width:68px;font-size:14px;white-space:nowrap}
.now-display{padding:8px 10px;border:3px solid var(--ink);background:#e1e1dc;box-shadow:inset 3px 3px 0 #b6b6b0}
.display-line{display:flex;justify-content:space-between;align-items:center;gap:8px;font:14px/1.6 var(--ui-font);color:#454541}
.playback-state{padding-left:10px;white-space:nowrap}
.playback-state::before{content:'';display:inline-block;width:5px;height:5px;margin-right:7px;background:currentColor}
.playback-state.is-playing{color:#111}
.now{min-height:22px;margin:8px 0 0;font:16px/1.7 var(--ui-font)}
.transport{gap:10px;margin:10px 0}
.transport button{width:40px;height:38px;padding:4px}
.transport .play{width:50px;height:42px;background:#242424;color:#fff;box-shadow:var(--key-shadow),inset 2px 2px 0 #555,inset -2px -4px 0 #111}
.transport .play:hover{background:#393939}
.pixel-icon{display:block;width:16px;height:16px;image-rendering:pixelated;fill:currentColor}
.seek{height:28px;padding:5px;border:2px solid var(--ink);background:repeating-linear-gradient(90deg,#cacac4 0 10px,#efefeb 10px 13px);box-shadow:2px 2px 0 var(--ink);touch-action:none}
.seek #progress{height:14px;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 13px);pointer-events:none}
#seekInput{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:none}
.seek:focus-within{outline:3px solid var(--ink);outline-offset:4px}
.times{font:14px/1.6 var(--ui-font);color:#333;margin-top:7px}
.visualizer{height:20px;gap:3px;margin:5px 0 6px}
.visualizer i{width:5px;background:#343434}
.volume-panel{display:grid;grid-template-columns:36px auto minmax(0,1fr) 38px;align-items:center;gap:7px;padding:3px 0;font:14px/1.5 var(--ui-font)}
.mute-button{width:36px;height:36px;padding:4px}
.volume-panel output{text-align:right;white-space:nowrap}
.pixel-range{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:36px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.pixel-range::-webkit-slider-runnable-track{height:10px;border:2px solid var(--ink);background:repeating-linear-gradient(90deg,#bdbdb8 0 9px,#f5f5f1 9px 12px)}
.pixel-range::-moz-range-track{height:6px;border:2px solid var(--ink);background:#bdbdb8}
.pixel-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:24px;margin-top:-9px;border:2px solid var(--ink);border-radius:0;background:#fff;box-shadow:2px 2px 0 var(--ink)}
.pixel-range::-moz-range-thumb{width:14px;height:20px;border:2px solid var(--ink);border-radius:0;background:#fff;box-shadow:2px 2px 0 var(--ink)}
.pixel-range:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.playback-options{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:3px 0 10px}
.mode-button{font-size:14px;white-space:nowrap}
.curse-control{max-width:none;margin:0 0 12px;padding:6px 8px;border:2px solid var(--ink);background:#e9e9e4;box-shadow:3px 3px 0 var(--ink)}
.curse-heading{font-size:14px;line-height:1.5}
.curse-dial-field{min-height:44px;gap:4px}
.curse-scale{font-size:14px;line-height:1.5}
.curse-step{flex:0 0 36px;width:36px;height:36px;padding:0;font-size:22px}
.curse-dial{flex-basis:56px;height:44px}
.curse-knob{width:36px;height:36px}
.curse-needle{top:4px;height:11px;transform-origin:50% 14px}
.curse-range{touch-action:none}
.curse-dial:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.curse-mode{min-height:15px;margin-top:5px;font-size:14px;line-height:1.5}
.playlist-panel{border:2px solid var(--ink);background:#fff}
.panel-heading{display:flex;justify-content:space-between;gap:7px;padding:8px;border-bottom:2px solid var(--ink);background:#e1e1dc;font:14px/1.5 var(--ui-font)}
.playlist{max-height:140px;margin:0}
.track{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:7px;min-height:36px;padding:6px 8px;border-bottom:1px solid #bdbdb8;font:14px/1.5 var(--ui-font)}
.track:last-child{border-bottom:0}
.track::before,.track.selected::before{content:none}
.track-slot{display:grid;place-items:center;min-height:22px;border:1px solid #999;font-size:14px;background:#ecece7}
.track.selected{background:#d8d8d2;color:#111}
.track.selected .track-slot{border-color:var(--ink);background:var(--ink);color:#fff}
.track-duration{font:14px/1.5 var(--ui-font);color:#444}
.track:hover{background:#ecece7}
.donation-link{width:100%;margin-top:10px;min-height:36px;font-size:14px;text-align:center}
.upload-note{max-width:none;margin:8px 0 0;font:14px/1.6 var(--ui-font);color:#555;text-align:center}
.player-status{margin-top:10px;font:14px/1.6 var(--ui-font)}
.art{align-self:center;margin-top:30px}
.ghost-controls{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:5px;margin-top:16px}
.ghost-controls button{width:44px;height:44px;padding:0 0 3px;font:27px/1 var(--ui-font)}
.ghost-help{margin-top:8px;font:14px/1.8 var(--ui-font);color:#555}
#ghostHome{min-height:30px;min-width:64px;margin-top:4px;border:2px solid #777;background:#ecece7;padding:3px 6px;font:14px/1.5 var(--ui-font)}
.health-notice{top:0;left:50%;max-width:180px;padding:6px 8px;transform:translate(-50%,-100%);font:14px/1.5 var(--ui-font)}
.health-notice.show{animation:retro-notice-pop 180ms steps(3,end) both}
@keyframes retro-notice-pop{from{opacity:0;transform:translate(-50%,calc(-100% + 4px))}to{opacity:1;transform:translate(-50%,-100%)}}
.console-footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding-top:10px;border-top:3px solid var(--ink)}
.footer-hint{font:14px/1.7 var(--ui-font);color:#555}
.sfx-volume{display:grid;grid-template-columns:auto 86px 20px;align-items:center;gap:6px;font:14px/1.5 var(--ui-font)}
.sfx-volume .pixel-range{height:32px}
.corner-widget{top:calc(100% + 24px)}
.corner-widget{width:38px;height:38px}
.corner-tile{width:38px;height:38px;font-size:30px}
.tile-message{width:160px;left:calc(100% - 10px);gap:7px}
.ghost-quote{display:block;max-width:160px;padding:7px 8px;font:14px/1.5 var(--ui-font);white-space:normal;text-align:center}
.start-screen{isolation:isolate;background:none;filter:none;padding:24px;overflow:auto}
.start-screen::before{content:'';position:fixed;inset:0;z-index:-2;background:url('../img/goblin-castle.gif') center/cover no-repeat;filter:grayscale(1) brightness(1.1)}
.start-screen::after{content:'';position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.27)}
.start-panel{width:min(380px,100%);padding:24px 20px 20px;border:3px solid #111;background:rgba(244,244,241,.96);box-shadow:6px 6px 0 #111;text-align:center}
.start-caption{margin:0 0 14px;font:14px/1.6 var(--ui-font);letter-spacing:.5px}
.start-ghost{display:block;width:112px;height:auto;margin:0 auto 10px;image-rendering:pixelated}
.start-panel h1{margin:0;font:32px/1.55 var(--ui-font);letter-spacing:1px}
.start-prompt{margin:20px 0 14px;font:14px/1.6 var(--ui-font);animation:press-start-blink 1.4s steps(2,end) infinite}
.start-button{width:130px;min-height:46px;height:auto;margin:0 auto;gap:0;font-size:16px}
.start-hint{margin:15px 0 0;font:14px/1.7 var(--ui-font);color:#555}
@keyframes press-start-blink{0%,45%{opacity:1}55%,100%{opacity:.35}}
.crt-overlay{position:fixed;z-index:10000;inset:0;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.055) 0 1px,transparent 1px 4px);box-shadow:inset 0 0 160px rgba(0,0,0,.14)}
body.crt-on .crt-overlay{opacity:1}
:focus-visible{outline:3px solid var(--ink);outline-offset:4px}


@media(max-height:760px){.player-page{align-content:start}.start-screen{place-items:start center}.start-panel{margin:auto}}
@media(prefers-reduced-motion:reduce){.start-prompt{animation:none}.crt-overlay{box-shadow:inset 0 0 120px rgba(0,0,0,.09)}.console-key{transition:none}}

/* Phone layout: keep the compact console, with comfortable touch targets. */


@media(pointer:coarse) and (max-height:500px){
  .player-page{padding-top:12px}
  .start-panel{margin:auto}
}
@media(pointer:coarse){
  .console-key,.transport button,.utility-button,.track,#ghostHome{min-height:44px}
  .transport button,.mute-button,.curse-step{min-width:44px}
  .curse-step{flex-basis:44px}
  .pixel-range,.sfx-volume .pixel-range{height:44px}
}

/* Larger GothicByte lettering needs room to wrap instead of clipping. */
.player-card{width:min(700px,94%)}
.utility-bar{flex-wrap:wrap}
.utility-button{white-space:normal;min-width:88px}
.mode-button{white-space:normal;min-height:44px}
.display-line{flex-wrap:wrap}
.panel-heading{flex-wrap:wrap}
.track{width:100%;text-align:left}
.track-name{min-width:0;overflow-wrap:anywhere;white-space:normal}
.now{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.upload-note{font:14px/1.5 var(--ui-font)}
.donation-link{min-height:44px;line-height:1.6;overflow-wrap:anywhere}
.console-footer{row-gap:12px}
.sfx-volume{grid-template-columns:auto minmax(64px,100px) 28px}
.curse-scale{font-size:12px}
.curse-dial-field{flex-wrap:wrap}


/* Secondary playback controls live behind the bottom gear. */
.console-footer{position:relative;justify-content:flex-end}
.footer-hint{margin-right:auto}
.settings-menu{position:relative;flex:none}
.settings-toggle{width:44px;height:44px;padding:8px;list-style:none;cursor:pointer}
.settings-toggle::-webkit-details-marker{display:none}
.settings-icon{width:24px;height:24px;display:block}
.settings-menu[open] .settings-toggle{background:#d2d2ce}
.settings-panel{position:absolute;right:0;bottom:calc(100% + 12px);z-index:100;width:300px;max-width:calc(100vw - 48px);padding:14px;border:3px solid var(--ink);background:var(--paper);box-shadow:4px 4px 0 var(--ink)}
.settings-panel h2{margin:0 0 10px;font:18px/1.5 var(--ui-font);border-bottom:2px solid var(--ink);padding-bottom:8px}
.settings-panel .volume-panel{grid-template-columns:44px auto minmax(0,1fr) 44px;gap:5px}
.settings-panel .playback-options{margin:10px 0 12px}
.settings-panel .sfx-volume{grid-template-columns:auto minmax(0,1fr) 28px;max-width:100%;font-size:14px}
.settings-panel .mode-button{font-size:14px}


.now{font-size:20px;line-height:1.6}

.upload-note{font:9px/1.5 var(--ui-font);white-space:nowrap}