:root { color-scheme:dark; font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; background:#0b0b0b; color:#f6f6f6; font-size:17px; }
* {box-sizing:border-box}
body {margin:0; min-height:100vh; background:#101010}
button {font:inherit;cursor:pointer;color:inherit}
button:focus-visible,.file-list:focus-visible {outline:3px solid #fff;outline-offset:3px}
button:disabled {cursor:not-allowed;opacity:.36}
.app {max-width:1460px;margin:0 auto;padding:clamp(12px,2.5vw,36px)}
.header {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;border-bottom:1px solid #555;padding-bottom:8px}
.eyebrow {font-size:16px;letter-spacing:.13em;color:#aaa;font-weight:650}
h1 {font-size:clamp(24px,2.3vw,31px);letter-spacing:-.035em;margin:0;font-weight:900;line-height:1.15}
h1 span {font-weight:450}
.release {text-align:right;letter-spacing:.07em;font-size:16px;font-weight:800;white-space:nowrap}
.release span {display:block;color:#aaa;font-size:16px;font-weight:500;margin-top:1px}
.screen-section {margin:auto;max-width:1120px}
.screen-shell {position:relative;background:black;border:1px solid #777;aspect-ratio: 3 / 2;isolation:isolate;overflow:hidden}
.screen-shell canvas {width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block;background:black}
.screen-shell:fullscreen {display:grid;place-items:center;width:100vw;height:100vh;border:0;background:black}
.screen-shell:fullscreen canvas {width:100%;height:100%;object-fit:contain}
.screen-overlay {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;background:linear-gradient(140deg,#050505ed,#1a1a1ae8);pointer-events:none}
.screen-overlay[hidden] {display:none}
.screen-wordmark {font-size:clamp(55px,11vw,156px);font-weight:950;letter-spacing:-.06em;line-height:1;opacity:.13}
.screen-overlay p {margin:18px 0 0;font-size:clamp(17px,2.1vw,24px);font-weight:700;letter-spacing:.03em}
.screen-overlay .screen-help {font-size:clamp(15px,1.5vw,18px);color:#bbb;max-width:610px;font-weight:400;line-height:1.7;margin-top:8px}
.screen-bottom {position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;background:#000d;padding:10px 16px;gap:12px;color:#ccc;font-size:16px;letter-spacing:.05em;overflow:hidden}
#screen-filename {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.controls {display:flex;justify-content:center;flex-wrap:wrap;gap:9px;max-width:1120px;margin:14px auto 10px}
.controls button {background:#2c2c2c;border:1px solid #666;border-radius:4px;padding:12px 20px;min-width:100px;font-weight:780;min-height:54px;letter-spacing:.01em}
.controls button:hover:not(:disabled),.import-actions button:hover:not(:disabled){background:#424242}
.controls #play{background:#eee;color:#111;border-color:white;min-width:135px}
.controls #play:hover:not(:disabled){background:#cfcfcf}
.controls #repeat[aria-pressed="true"],.controls #folder-auto[aria-pressed="true"]{background:white;color:#111}
.status {max-width:1120px;margin:13px auto 22px;padding:12px 16px;background:#222;border-left:4px solid #aaa;font-size:16px;line-height:1.55}
.status.error {border-left-color:#777}
.library {border-top:1px solid #555;padding-top:24px}
.library-header {display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
h2 {font-size:26px;line-height:1.2;margin:3px 0 0;letter-spacing:-.02em}
h2 span {font-size:18px;color:#aaa;border:1px solid #777;padding:2px 8px;border-radius:3px;vertical-align:middle;margin-left:6px}
.import-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.import-actions button {background:#252525;border:1px solid #888;border-radius:4px;padding:11px 16px;min-height:48px;font-weight:700;font-size:16px}
.drop-zone {margin-top:16px;border:2px dashed #777;border-radius:4px;text-align:center;padding:21px 16px;color:#ddd;line-height:1.55}
.drop-zone.drag-over {border-color:white;background:#303030}
.privacy {font-size:16px;color:#aaa;margin:10px 0 14px}
.file-list {display:flex;flex-direction:column;min-height:120px;max-height:460px;overflow:auto;border:1px solid #555;background:#171717}
.file-entry {width:100%;min-height:51px;text-align:left;background:transparent;border:0;border-bottom:1px solid #363636;padding:12px 16px;display:flex;gap:12px;justify-content:space-between;align-items:center}
.file-entry:hover {background:#333}
.file-entry.active {background:#efefef;color:black;font-weight:750}
.file-name {overflow-wrap:anywhere}
.file-size {font-variant-numeric:tabular-nums;white-space:nowrap;color:#aaa;font-size:16px}
.file-entry.active .file-size {color:#333}
.empty {padding:24px 16px;margin:0;color:#aaa;text-align:center}
footer {display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;border-top:1px solid #444;margin-top:32px;padding:17px 0;color:#aaa;font-size:16px}
@media(max-width:650px){
  :root {font-size:16px}
  .header {align-items:start}.eyebrow {font-size:16px}
  .screen-shell {aspect-ratio:4/3}
  .controls {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .controls button {min-width:0!important;padding:10px 6px;font-size:16px;min-height:52px}
  .controls #fullscreen {grid-column:span 3}
  .import-actions {width:100%;display:grid;grid-template-columns:1fr 1fr}
  .import-actions #clear {grid-column:span 2}
  .import-actions button {font-size:16px;padding:10px 7px}
  .screen-bottom {font-size:16px;padding:8px}
}

/* FIX25 diagnostic panel: intentionally readable on a 256x256 player screen. */
.diagnostics {max-width:1120px;margin:16px auto 25px;padding:20px;border:1px solid #666;background:#151515}
.diagnostics-head {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.diagnostics h2 {font-size:clamp(23px,2.5vw,31px)}
.diagnostics h2 span {font-weight:600}
.diagnostics h3 {font-size:19px;margin:14px 0 10px}
#diag-copy {background:#272727;border:1px solid #aaa;border-radius:5px;padding:12px 18px;font-size:17px;font-weight:700;min-height:52px}
.diag-summary {padding:15px 17px;margin-top:16px;background:#252525;border-left:4px solid #aaa;font-size:19px;font-weight:680;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.diag-sections {display:grid;grid-template-columns:1fr 1fr;gap:20px}
.diag-lines {font-size:17px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;color:#f0f0f0}
.diag-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.diag-metric {border:1px solid #444;background:#202020;padding:11px 12px;min-height:71px;overflow-wrap:anywhere}
.diag-metric .diag-key {font-size:16px;color:#ccc;display:block;margin-bottom:5px}
.diag-metric .diag-value {font-size:19px;font-weight:750;font-variant-numeric:tabular-nums}
.diag-history {border-top:1px solid #444;margin-top:17px;padding-top:13px}
.diag-history summary {cursor:pointer;font-size:19px;font-weight:700}
.diag-history .diag-lines {margin-top:10px;max-height:310px;overflow:auto;font-family:ui-monospace,Consolas,monospace;font-size:16px}
.diag-privacy {font-size:16px;color:#bbb;line-height:1.65;margin-bottom:0}
@media(max-width:690px){.diag-sections{grid-template-columns:1fr}.diag-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.diagnostics{padding:13px}}

.diag-headline {position:sticky;top:0;z-index:20;max-width:1120px;margin:0 auto 15px;padding:11px 15px;background:#242424;border:1px solid #666;border-left:4px solid #999;font-size:18px;font-weight:720;line-height:1.5;overflow-wrap:anywhere}
.diag-headline[data-severity="warning"],.diag-summary[data-severity="warning"] {border-left-color:#c6c6c6}
.diag-headline[data-severity="error"],.diag-summary[data-severity="error"] {border-left-color:#fff;background:#313131}

/* FIX37: player-first UI; diagnostics are user-controlled and positioned last. */
.diagnostics {display:block;margin:27px auto;padding:0;background:#171717}
.diagnostics:not([open]) .diag-body {display:none}
.diagnostics-toggle {list-style-position:inside;cursor:pointer;min-height:58px;padding:16px 20px;font-size:21px;font-weight:750;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.diagnostics-toggle::marker{color:#ddd}
.diagnostics-toggle .diag-toggle-hint {font-size:16px;color:#aaa;font-weight:400}
.diagnostics-toggle #diag-state {margin-left:auto;font-size:16px;color:#ddd;font-weight:600}
.diag-body {padding:0 20px 20px}
.diag-headline {position:static;margin:0 0 16px;z-index:auto}
.credits {display:flex;flex-direction:column;gap:7px;justify-content:flex-start;line-height:1.65;overflow-wrap:anywhere}
.credits a {color:#f1f1f1;text-decoration:underline;text-underline-offset:3px}
.credits a:hover {color:white}
@media(max-width:650px){.diagnostics-toggle{padding:14px;font-size:19px}.diag-body{padding:0 13px 13px}.credits{font-size:16px}}