:root{--g-paper:#e7e7e3;--g-panel:#d5d5d1;--g-inset:#f2f2ed;--g-line:#29292c;--g-text:#202024;--g-muted:#55555b;--g-metal:#9d9da1;--g-accent:#772b38;--g-accent-text:#fff4ef;--g-shadow:#161619}
html[data-theme=dark]{--g-paper:#202024;--g-panel:#2c2b30;--g-inset:#17171b;--g-line:#aaa6ad;--g-text:#eeece7;--g-muted:#c1bbc3;--g-metal:#64616b;--g-accent:#f2f2ef;--g-accent-text:#19191d;--g-shadow:#08080a}
html[data-theme] .player-card,html[data-theme] .start-panel{background:var(--g-paper);border:2px solid var(--g-line);box-shadow:0 0 0 3px var(--g-paper),0 0 0 5px var(--g-line),8px 8px 0 var(--g-shadow),inset 0 0 0 5px var(--g-paper),inset 0 0 0 6px var(--g-metal)}
html[data-theme] .player-card{padding:22px;gap:18px 24px;isolation:isolate}
.player-card::before,.player-card::after{content:'';position:absolute;width:10px;height:10px;border:2px solid var(--g-line);background:var(--g-metal);pointer-events:none}
.player-card::before{top:8px;left:8px;box-shadow:0 0 0 2px var(--g-paper)}
.player-card::after{bottom:8px;right:8px;box-shadow:0 0 0 2px var(--g-paper)}
html[data-theme] .card-caption{border-bottom:4px double var(--g-line);padding:2px 0 14px;gap:14px}
html[data-theme] .card-caption h1{font-size:28px;line-height:1.4;letter-spacing:.5px;color:var(--g-text);text-shadow:1px 1px 0 var(--g-metal)}
html[data-theme] .system-label{color:var(--g-muted);font-size:12px;letter-spacing:1px;margin-bottom:7px}
html[data-theme] .console-key,html[data-theme] .transport button,html[data-theme] #ghostHome{border:2px solid var(--g-line);border-radius:0;background:var(--g-panel);color:var(--g-text);box-shadow:0 3px 0 var(--g-shadow),inset 2px 2px 0 var(--g-paper),inset -2px -2px 0 var(--g-metal)}
html[data-theme] .console-key:hover,html[data-theme] #ghostHome:hover{background:var(--g-inset);color:var(--g-text)}
html[data-theme] .console-key[aria-pressed=true],html[data-theme] .transport .play,html[data-theme] .transport .play:hover{background:var(--g-accent);color:var(--g-accent-text);box-shadow:0 3px 0 var(--g-shadow),inset 2px 2px 0 #b16a76,inset -2px -2px 0 #481a24}
html[data-theme] .theme-toggle[aria-pressed=true]{background:var(--g-panel);color:var(--g-text);box-shadow:0 3px 0 var(--g-shadow),inset 2px 2px 0 var(--g-paper),inset -2px -2px 0 var(--g-metal)}
html[data-theme] .console-key:active{transform:translateY(2px);box-shadow:inset 2px 2px 0 var(--g-metal)}
html[data-theme] .now-display{background:var(--g-inset);border:3px double var(--g-line);box-shadow:inset 3px 3px 0 var(--g-panel);padding:12px 14px}
html[data-theme] .now{font-size:22px;line-height:1.5;color:var(--g-text);margin-top:10px}
html[data-theme] .display-line{color:var(--g-muted);font-size:12px;letter-spacing:.2px}
html[data-theme] .playback-state.is-playing{color:var(--g-accent)}
html[data-theme] .seek{border:2px solid var(--g-line);background:repeating-linear-gradient(90deg,var(--g-panel) 0 8px,var(--g-inset) 8px 11px);box-shadow:2px 2px 0 var(--g-shadow)}
html[data-theme] .seek #progress{background:repeating-linear-gradient(90deg,var(--g-accent) 0 8px,transparent 8px 11px)}
html[data-theme] .visualizer i{background:var(--g-accent)}
html[data-theme] .times{color:var(--g-muted)}
html[data-theme] .curse-control{background:var(--g-panel);border:3px double var(--g-line);box-shadow:3px 3px 0 var(--g-shadow);padding:10px}
html[data-theme] .curse-heading,html[data-theme] .curse-mode{color:var(--g-text)}
html[data-theme] .curse-heading{padding-bottom:7px;border-bottom:1px solid var(--g-metal);margin-bottom:6px}
html[data-theme] .curse-scale{color:var(--g-muted)}
html[data-theme] .playlist-panel{background:var(--g-inset);border:3px double var(--g-line)}
html[data-theme] .panel-heading{background:var(--g-panel);color:var(--g-text);border-bottom:2px solid var(--g-line);letter-spacing:.3px;padding:10px}
html[data-theme] .track{color:var(--g-text);border-bottom-color:var(--g-metal);padding:8px 10px}
html[data-theme] .track:hover{background:var(--g-panel)}
html[data-theme] .track.selected{background:var(--g-panel);color:var(--g-text);box-shadow:inset 4px 0 0 var(--g-accent)}
html[data-theme] .track.selected .track-slot{background:var(--g-accent);color:var(--g-accent-text);border-color:var(--g-accent)}
html[data-theme] .track-slot{background:var(--g-paper);color:var(--g-text);border-color:var(--g-metal)}
html[data-theme] .track-duration{color:var(--g-muted)}
html[data-theme] .console-footer{border-top:4px double var(--g-line);padding-top:14px}
html[data-theme] .settings-panel{background:var(--g-paper);border:3px double var(--g-line);box-shadow:4px 4px 0 var(--g-shadow),inset 0 0 0 2px var(--g-panel)}
html[data-theme] .settings-panel h2{color:var(--g-text);border-bottom:3px double var(--g-line)}
html[data-theme] .font-setting select{background:var(--g-inset);color:var(--g-text);border-color:var(--g-line)}
html[data-theme] .ghost-name{color:var(--g-text);font-size:18px;letter-spacing:.4px;text-shadow:1px 1px 0 var(--g-metal)}
html[data-theme] .donation-link{border:3px double var(--g-line);background:var(--g-inset)}
html[data-theme] .upload-note{color:var(--g-muted)}
html[data-theme] .start-panel{padding:32px 24px}
html[data-theme] .start-panel h1{color:var(--g-text);font-size:34px;line-height:1.45;text-shadow:2px 2px 0 var(--g-metal)}
html[data-theme] .start-caption{color:var(--g-muted);letter-spacing:1px;border-bottom:4px double var(--g-line);padding-bottom:14px}
html[data-theme] .start-button{background:var(--g-accent);color:var(--g-accent-text);min-height:48px}
html[data-theme] .start-prompt{color:var(--g-text)}
html[data-theme] .start-hint{color:var(--g-muted)}


html[data-theme=dark] .console-key[aria-pressed=true],html[data-theme=dark] .transport .play,html[data-theme=dark] .transport .play:hover{box-shadow:0 3px 0 var(--g-shadow),inset 2px 2px 0 #ffffff,inset -2px -2px 0 #929297}
html[data-theme=dark] .theme-toggle[aria-pressed=true]{box-shadow:0 3px 0 var(--g-shadow),inset 2px 2px 0 var(--g-paper),inset -2px -2px 0 var(--g-metal)}

.player-card::after{content:none}

html[data-theme] .art{margin-top:20px}


/* Flat, double-line keys echo the GothicByte lettering. */
html[data-theme] .player-card .console-key,html[data-theme] .player-card .transport button{border:3px double var(--g-line);border-radius:0;background:var(--g-inset);color:var(--g-text);box-shadow:2px 2px 0 var(--g-shadow);text-shadow:none;line-height:1.5;transition:transform 70ms steps(2,end),box-shadow 70ms steps(2,end)}
html[data-theme] .player-card .console-key:hover{background:var(--g-panel);color:var(--g-text);box-shadow:3px 3px 0 var(--g-shadow)}
html[data-theme] .player-card .console-key[aria-pressed=true],html[data-theme] .player-card .transport .play,html[data-theme] .player-card .transport .play:hover{background:var(--g-accent);color:var(--g-accent-text);border-color:var(--g-accent);box-shadow:2px 2px 0 var(--g-shadow),inset 0 0 0 1px var(--g-accent-text)}
html[data-theme] .player-card .theme-toggle[aria-pressed=true]{background:var(--g-inset);color:var(--g-text);border-color:var(--g-line);box-shadow:2px 2px 0 var(--g-shadow)}
html[data-theme] .player-card .console-key:active{transform:translate(2px,2px);box-shadow:none}
html[data-theme] .player-card .utility-button{letter-spacing:.4px;padding:6px 12px}
html[data-theme] .player-card .transport{gap:14px;margin:14px 0}
html[data-theme] .player-card .transport button{width:46px;height:44px}
html[data-theme] .player-card .transport .play{width:58px;height:48px}
html[data-theme] .player-card .curse-step{font-family:var(--ui-font);font-size:22px;line-height:1}
html[data-theme] .player-card .donation-link{letter-spacing:.3px;min-height:44px}
html[data-theme] .player-card .settings-toggle,html[data-theme] .player-card .theme-toggle{padding:7px}


/* Heavy inset faces, raised edges and a deep base. */
:root{--key-face:#d0d0cb;--key-top:#fafaf5;--key-edge:#88888b;--key-base:#39393c}
html[data-theme=dark]{--key-face:#37373d;--key-top:#777780;--key-edge:#202025;--key-base:#09090c}
html[data-theme] .player-card .console-key,html[data-theme] .player-card .transport button{border:2px solid var(--g-line);background:linear-gradient(180deg,var(--g-paper) 0 12%,var(--key-face) 12% 86%,var(--key-edge) 86% 100%);color:var(--g-text);box-shadow:0 6px 0 var(--key-base),0 8px 0 var(--g-shadow),inset 3px 3px 0 var(--key-top),inset -3px -3px 0 var(--key-edge);padding-top:5px;padding-bottom:8px;transition:transform 80ms steps(3,end),box-shadow 80ms steps(3,end)}
html[data-theme] .player-card .console-key:hover{background:linear-gradient(180deg,var(--key-top) 0 10%,var(--g-panel) 10% 86%,var(--key-edge) 86% 100%);box-shadow:0 6px 0 var(--key-base),0 8px 0 var(--g-shadow),inset 3px 3px 0 var(--key-top),inset -3px -3px 0 var(--key-edge)}
html[data-theme] .player-card .console-key[aria-pressed=true],html[data-theme] .player-card .transport .play,html[data-theme] .player-card .transport .play:hover{background:var(--g-accent);color:var(--g-accent-text);border-color:var(--g-line);box-shadow:0 6px 0 var(--key-base),0 8px 0 var(--g-shadow),inset 3px 3px 0 rgba(255,255,255,.3),inset -3px -3px 0 rgba(0,0,0,.28)}
html[data-theme] .player-card .theme-toggle[aria-pressed=true]{background:var(--key-face);color:var(--g-text);border-color:var(--g-line);box-shadow:0 6px 0 var(--key-base),0 8px 0 var(--g-shadow),inset 3px 3px 0 var(--key-top),inset -3px -3px 0 var(--key-edge)}
html[data-theme] .player-card .console-key:active,html[data-theme] .player-card .console-key[aria-pressed=true]:active,html[data-theme] .player-card .transport .play:active{transform:translateY(5px);box-shadow:0 1px 0 var(--key-base),0 3px 0 var(--g-shadow),inset 2px 2px 0 var(--key-edge),inset -1px -1px 0 var(--key-top)}
html[data-theme] .player-card .utility-bar{padding-bottom:6px}
html[data-theme] .player-card .transport{gap:16px;margin:16px 0 22px}
html[data-theme] .player-card .curse-dial-field{padding-bottom:7px}
html[data-theme] .player-card .console-footer{padding-bottom:8px}
html[data-theme] .player-card .donation-link{margin-bottom:8px}
html[data-theme] .player-card .settings-toggle,html[data-theme] .player-card .theme-toggle{padding:7px}
html[data-theme] .player-card .playback-options{row-gap:14px;padding-bottom:6px}

.player-card .pixel-icon,.player-card .theme-icon,.player-card .settings-icon{width:24px;height:24px;fill:currentColor;stroke:none;shape-rendering:crispEdges;image-rendering:pixelated;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15))}
.player-card .transport .play .pixel-icon{width:24px;height:24px}

html[data-theme] .player-card .transport button{width:36px;height:36px;min-width:36px;min-height:36px;padding:5px}
html[data-theme] .player-card .transport .play{width:44px;height:40px;min-width:44px;min-height:40px}
html[data-theme] .player-card .curse-step{width:32px;height:32px;min-width:32px;min-height:32px;flex:0 0 32px;padding:4px}
html[data-theme] .player-card .transport .pixel-icon,html[data-theme] .player-card .transport .play .pixel-icon,html[data-theme] .player-card .curse-step .pixel-icon{width:18px;height:18px}
html[data-theme] .player-card .transport{gap:12px}
@media(pointer:coarse){
 html[data-theme] .player-card .transport button,html[data-theme] .player-card .curse-step{position:relative}
 html[data-theme] .player-card .transport button::after,html[data-theme] .player-card .curse-step::after{content:'';position:absolute;inset:-6px;background:transparent}
}

html[data-theme] .player-card .transport button{width:42px;height:40px;min-width:42px;min-height:40px}
html[data-theme] .player-card .transport .play{width:50px;height:44px;min-width:50px;min-height:44px}
html[data-theme] .player-card .transport .pixel-icon,html[data-theme] .player-card .transport .play .pixel-icon{width:20px;height:20px}