/* 3DOpera Web. Colours come from the logo: a red diamond, an indigo drum, a yellow
   ball, purple lettering and a cyan badge. */
:root {
  color-scheme: dark;
  --bg: #07070b;
  --panel: #12121b;
  --panel-2: #1a1a27;
  --line: #2a2a3b;
  --text: #f0f0f6;
  --muted: #a0a1b5;
  --red: #ec2047;
  --indigo: #4a3bd0;
  --yellow: #f7c51e;
  --purple: #9a5be6;
  --cyan: #3cc9e4;
  --error: #ff8d8d;
  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h2 { font-size: 22px; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--cyan); }
kbd { padding: 1px 6px; font: 12px var(--mono); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; }
code { font: 13px var(--mono); }

/* Controls */
button, .button { display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-height: 34px; padding: 5px 14px; font: inherit; font-weight: 550; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
button:hover:not(:disabled), .button:hover { border-color: var(--purple); }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { color: #17120a; background: var(--yellow); border-color: var(--yellow); }
button.primary:hover:not(:disabled) { background: #ffd548; border-color: #ffd548; }
button.danger { color: var(--error); }
button[aria-pressed="true"] { color: #0b0b12; background: var(--cyan); border-color: var(--cyan); }
input[type="search"], input[type="text"], select { min-height: 34px; padding: 4px 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
input[type="search"] { min-width: 0; }
label { display: inline-flex; gap: 8px; align-items: center; }
.field { display: grid; gap: 3px; color: var(--muted); font-size: 13px; }
.field select { color: var(--text); font-size: 15px; }
.row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.row.end { align-items: end; }
.grow { flex: 1 1 auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--error); }
.notice { padding: 8px 12px; color: var(--text); background: color-mix(in srgb, var(--indigo) 30%, var(--panel)); border: 1px solid var(--indigo); border-radius: 8px; }
.panel { padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.stack { display: grid; gap: 12px; }

/* Layout */
#app { display: grid; grid-template-columns: 196px minmax(0, 1fr); min-height: 100%; }
#rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 4px; height: 100vh; padding: 16px 12px; background: #000; border-right: 1px solid var(--line); }
#rail .logo { display: block; width: 100%; margin-bottom: 12px; }
#rail nav { display: grid; gap: 4px; }
#rail nav button { justify-content: flex-start; width: 100%; color: var(--muted); background: none; border-color: transparent; }
#rail nav button:hover { color: var(--text); border-color: var(--line); }
#rail nav button[aria-current="true"] { color: var(--text); background: var(--panel-2); border-color: var(--line); box-shadow: inset 3px 0 0 var(--yellow); }
#rail .foot { display: grid; gap: 6px; margin-top: auto; font-size: 12px; color: var(--muted); }
#version-line { color: var(--yellow); font-weight: 600; }
.links { display: flex; flex-wrap: wrap; gap: 4px 10px; }
main { min-width: 0; padding: 24px; }
main > section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1280px; margin: 0 auto; }

/* Play */
#play-layout { display: grid; gap: 16px; }
body.dev-mode #play-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 44%); align-items: start; }
#play-main { display: grid; gap: 12px; min-width: 0; }
#screen-frame { position: relative; width: var(--screen-width, 100%); max-width: 100%; margin: 0 auto; }
/* Fit keeps the controls under the picture on screen. */
#screen-frame[data-fit] { max-width: min(100%, calc((100vh - 150px) * 4 / 3)); }
#screen-inner { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #000; border: 1px solid var(--line); border-radius: 6px; }
canvas#screen { display: block; width: 100%; height: 100%; background: #000; image-rendering: pixelated; }
#filter { position: absolute; inset: 0; pointer-events: none; }
[data-filter="smooth"] canvas, [data-filter="crt"] canvas { image-rendering: auto; }
[data-filter="crt"] canvas { filter: saturate(1.15) contrast(1.05) brightness(1.08); }
[data-filter="scanlines"] #filter { background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pixel-height) * 0.5), rgb(0 0 0 / 0.4) calc(var(--pixel-height) * 0.5), rgb(0 0 0 / 0.4) var(--pixel-height)); }
[data-filter="crt"] #filter { background:
  radial-gradient(ellipse at center, transparent 62%, rgb(0 0 0 / 0.42) 100%),
  repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pixel-height) * 0.55), rgb(0 0 0 / 0.32) calc(var(--pixel-height) * 0.55), rgb(0 0 0 / 0.32) var(--pixel-height)),
  repeating-linear-gradient(to right, rgb(255 60 60 / 0.07) 0, rgb(255 60 60 / 0.07) 1px, rgb(60 255 60 / 0.07) 1px, rgb(60 255 60 / 0.07) 2px, rgb(60 60 255 / 0.07) 2px, rgb(60 60 255 / 0.07) 3px); }
[data-filter="lcd"] #filter { background:
  repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pixel-height) - 1px), rgb(0 0 0 / 0.3) calc(var(--pixel-height) - 1px), rgb(0 0 0 / 0.3) var(--pixel-height)),
  repeating-linear-gradient(to right, transparent 0, transparent calc(var(--pixel-width) - 1px), rgb(0 0 0 / 0.3) calc(var(--pixel-width) - 1px), rgb(0 0 0 / 0.3) var(--pixel-width)); }
#screen-frame:fullscreen { display: flex; width: 100%; max-width: none; margin: 0; align-items: center; justify-content: center; background: #000; }
#screen-frame:fullscreen #screen-inner { width: min(100vw, calc(100vh * 4 / 3)); border: 0; border-radius: 0; }
#boot-art { position: absolute; inset: 0; display: grid; place-items: center; background: #000; opacity: 1; transition: opacity 400ms ease; pointer-events: none; }
#boot-art.leaving { opacity: 0; }
#boot-art img { height: 86%; animation: boot-art 2s ease-out; }
@keyframes boot-art { from { opacity: 0; transform: scale(0.94); } 40% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #boot-art img { animation: none; } #boot-art { transition: none; } }
#screen-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; padding: 16px; text-align: center; color: var(--muted); }
#screen-empty img { width: min(46%, 300px); margin: 0 auto; }
#status { min-height: 22px; font-variant-numeric: tabular-nums; }
.file { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.file:last-of-type { padding-bottom: 0; border-bottom: 0; }
.file-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.file-title { flex: 1 1 auto; font-weight: 600; }
.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-name { overflow-wrap: anywhere; }
.file-name.empty, .file small { color: var(--muted); }
#start { display: grid; gap: 12px; }
details > summary { cursor: pointer; font-weight: 600; }

/* Dev tools */
#dev-root { display: grid; gap: 10px; min-width: 0; }
body.dev-mode #dev-root:not(.in-window) { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
body.detached { padding: 16px; }
body.detached #dev-root { max-width: none; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tabs button { min-height: 28px; padding: 2px 10px; font-size: 13px; color: var(--muted); }
.tabs button[aria-pressed="true"] { color: #0b0b12; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 16px; margin: 0; font-size: 13px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.registers { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 2px 12px; font: 13px var(--mono); }
.registers b { display: inline-block; width: 3ch; font-weight: 400; color: var(--muted); }
.table-scroll { overflow-x: auto; }
#dev-root table, #saves-page table { width: 100%; border-collapse: collapse; font-size: 13px; }
#dev-root table { font-family: var(--mono); font-size: 12px; }
#dev-root th, #saves-page th { font-weight: 500; text-align: left; color: var(--muted); }
#dev-root th, #dev-root td { padding: 2px 10px 2px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
#dev-root h3 { margin: 12px 0 4px; font-size: 14px; }
pre { margin: 0; padding: 12px; overflow: auto; font: 12px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: #000; border: 1px solid var(--line); border-radius: 8px; }
#kernel { height: min(56vh, 560px); }
body.detached #kernel { height: calc(100vh - 170px); }
#kernel .bad { color: var(--error); }
#kernel time { color: var(--muted); }
#memory-dump { white-space: pre; }
#memory-address { width: 11ch; font-family: var(--mono); }

/* Games */
#library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.game { display: grid; align-content: start; gap: 4px; min-width: 0; }
.cover { display: grid; gap: 4px; width: 100%; min-width: 0; min-height: 0; padding: 0; font-weight: 400; text-align: left; background: none; border: 0; }
.cover-art { display: grid; place-items: center; aspect-ratio: 5 / 7; overflow: hidden; padding: 8px; text-align: center; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; transition: transform 120ms ease, border-color 120ms ease; }
.cover:hover .cover-art, .cover:focus-visible .cover-art { border-color: var(--yellow); transform: translateY(-2px); }
.cover-art:has(img) { padding: 0; }
.cover-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cover-title { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.cover-details { font-size: 12px; color: var(--muted); }
.game-files { justify-self: start; min-height: 24px; padding: 0 8px; font-size: 12px; font-weight: 500; color: var(--muted); }

/* Toolkit: a gallery of everything on the disc, and a theater that fills the window. */
#tool-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
#tool-kinds button[aria-pressed="true"] { color: #0b0b12; }
#tool-path { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; min-height: 28px; color: var(--muted); }
#tool-path button { min-height: 26px; padding: 0 8px; font-weight: 500; background: none; border-color: transparent; }
#tool-path button:hover:not(:disabled) { background: var(--panel-2); }
#tool-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; align-content: start; height: calc(100vh - 300px); min-height: 280px; overflow: auto; padding: 10px; background: #000; border: 1px solid var(--line); border-radius: var(--radius); }
#tool-list:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.node { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 6px; cursor: pointer; border-radius: 8px; }
.node:hover { background: var(--panel-2); }
.node[aria-selected="true"] { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--yellow); }
.node .thumb { position: relative; display: grid; place-items: center; width: 100%; max-width: 320px; aspect-ratio: 4 / 3; contain: strict; overflow: hidden; color: var(--tint, var(--muted)); background: color-mix(in srgb, var(--tint, var(--line)) 16%, #0a0a12); border-radius: 6px; font: 700 13px/1 system-ui, sans-serif; letter-spacing: 0.08em; }
.node .thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.node .name { overflow: hidden; font-size: 13px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.node .size { overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.node[data-kind="folder"], .tile[data-kind="folder"] { --tint: var(--purple); }
.node[data-kind="container"], .tile[data-kind="container"] { --tint: var(--purple); }
.node[data-kind="picture"], .tile[data-kind="picture"] { --tint: var(--yellow); }
.node[data-kind="sound"], .tile[data-kind="sound"] { --tint: var(--cyan); }
.node[data-kind="movie"], .tile[data-kind="movie"] { --tint: var(--red); }
.node[data-kind="model"], .tile[data-kind="model"] { --tint: #5fd38a; }
.node[data-kind="text"], .tile[data-kind="text"] { --tint: #e8e8f0; }
#tool-list[data-view="rows"] { display: block; padding: 4px; }
#tool-list[data-view="rows"] .node { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 3px 8px; }
#tool-list[data-view="rows"] .thumb { aspect-ratio: 4 / 3; font-size: 8px; }

#tool-player:focus { outline: none; }
#tool-player { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #000; }
#tool-stage { position: absolute; inset: var(--head-room, 0) 0 var(--dock-room, 0); overflow: auto; background: #000; }
#tool-player.resting #tool-stage { inset: 0; }
.more-cards { grid-column: 1 / -1; height: 1px; }
#tool-stage[data-fit="false"] #tool-canvas { width: var(--zoom-width); height: var(--zoom-height); margin: auto; }
#tool-stage[data-fit="true"] #tool-canvas { width: 100%; height: 100%; object-fit: contain; }
#tool-canvas { display: block; image-rendering: pixelated; }
#tool-model { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#tool-model[hidden] { display: none; }
#tool-stage[data-smooth="true"] #tool-canvas, #tool-stage[data-kind="sound"] #tool-canvas { image-rendering: auto; }
#tool-info { position: absolute; inset: var(--head-room, 80px) 24px var(--dock-room, 190px); display: grid; gap: 12px; align-content: start; overflow: auto; }
#tool-player:has(#tool-stage:not([hidden])) #tool-info { display: none; }
#tool-player:has(#tool-stage[hidden]) #tool-hex-box summary { display: none; }
.glass { background: rgb(14 14 22 / 78%); backdrop-filter: blur(14px); border: 1px solid rgb(255 255 255 / 10%); }
#tool-head { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; }
#tool-name { overflow-wrap: anywhere; }
#tool-close { width: 34px; padding: 0; }
.tool-edge { position: absolute; top: 50%; width: 44px; height: 72px; margin-top: -60px; padding: 0; font-size: 20px; border-radius: 10px; }
#tool-previous { left: 12px; }
#tool-next { right: 12px; }
#tool-dock { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 8px; max-width: 1080px; margin: 0 auto; }
#tool-controls { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; }
#tool-controls:has(> #tool-transport[hidden]) > .row:empty { display: none; }
#tool-head, #tool-dock, .tool-edge { transition: opacity 200ms; }
#tool-player.resting #tool-head, #tool-player.resting #tool-dock, #tool-player.resting .tool-edge { opacity: 0; }
#tool-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.tile { position: relative; flex: 0 0 76px; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; min-height: 0; color: var(--tint, var(--muted)); background: color-mix(in srgb, var(--tint, var(--line)) 16%, #0a0a12); border: 1px solid rgb(255 255 255 / 10%); border-radius: 6px; font-size: 9px; }
.tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.tile[aria-current="true"] { box-shadow: 0 0 0 2px var(--yellow); }
.tool-export select { width: auto; }
#tool-frame { min-width: 120px; accent-color: var(--yellow); }
#tool-zoom { width: 140px; accent-color: var(--cyan); }
#tool-volume { width: 80px; accent-color: var(--cyan); }
#tool-frame-text { min-width: 9ch; font-variant-numeric: tabular-nums; }
#tool-text { max-height: none; }
#tool-hex { max-height: none; white-space: pre; }
@media (max-width: 640px) { .tool-edge { display: none; } #tool-strip { display: none; } }

/* Saves */
#saves-page td, #saves-page th { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
#saves-page td.actions { white-space: nowrap; text-align: right; }
#saves-page td.actions button { min-height: 28px; padding: 2px 10px; font-size: 13px; }

/* Welcome */
dialog { padding: 0; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
dialog::backdrop { background: rgb(0 0 0 / 0.75); }
#welcome { width: min(560px, calc(100vw - 32px)); }
#welcome-body { display: grid; gap: 16px; padding: 20px 24px 24px; }
#welcome .logo { display: block; width: 100%; max-height: 240px; object-fit: contain; background: #000; }
.step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 12px; }
.step b { display: grid; place-items: center; grid-row: span 3; width: 30px; height: 30px; font-weight: 700; color: #000; border-radius: 50%; }
.step:nth-child(1) b { background: var(--yellow); }
.step:nth-child(2) b { background: var(--cyan); }
.step .row { margin-top: 6px; }

/* Credits */
#credits-page blockquote { margin: 8px 0 0; padding: 8px 12px; font-size: 13px; color: var(--muted); border-left: 3px solid var(--purple); }
#credits-page h3 { color: var(--yellow); }

@media (max-width: 860px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #rail { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; height: auto; padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  #rail .logo { width: 110px; margin: 0 8px 0 0; }
  #rail nav { display: flex; flex-wrap: wrap; }
  #rail nav button { width: auto; }
  #rail nav button[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--yellow); }
  #rail .foot { display: none; }
  main { padding: 16px; }
  body.dev-mode #play-layout, #tool-layout { grid-template-columns: minmax(0, 1fr); }
  #tool-browser { position: static; }
  #tool-list { height: 40vh; }
}