/* DELREZ OS — the family console shell.
 *
 * Our own design: a dark living-room OS, OSD type, a wireframe data cube, and a fixed
 * 1280x720 stage that scales to the viewport on a big screen. The console-era look is an
 * homage drawn entirely in CSS and SVG — no Sony art, no word marks, no boot chime, no
 * webfont, and not one request to another host.
 *
 * Phone rule: below 900px the fixed stage is abandoned for a stacked layout at 100% scale.
 * Scaling a 1280px stage down to a phone makes 16px type into 5px type — it looks like a
 * console and reads like nothing. Structure first, homage second.
 */

:root{
  --bg:#070b12;
  --panel:#0f1626;
  --panel2:#131c2f;
  --line:#1e2740;
  --ink:#e9f0fb;
  --dim:#8ea0c0;
  --dim2:#68789a;
  --ok:#9ae66e;
  --warn:#f0c46a;
  --accent:#5ce1ee;
  --accent-ink:#06232a;
  --radius:10px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
html[data-accent="gold"]{ --accent:#f0c46a; --accent-ink:#2a1f06; }
html[data-accent="pink"]{ --accent:#ff6fae; --accent-ink:#2b0417; }
html[data-accent="lime"]{ --accent:#9ae66e; --accent-ink:#0d2404; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:
    radial-gradient(1200px 700px at 50% -10%, #101a2e 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:16px; line-height:1.45;
  display:grid; place-items:center; overflow:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

.stage{
  position:relative; width:1280px; height:720px; flex:none;
  transform:scale(var(--zoom,1)); transform-origin:center center;
}

/* ── boot ────────────────────────────────────────────────────────────────── */
.boot{
  position:absolute; inset:0; z-index:5;
  display:grid; grid-template-rows:1fr auto auto; place-items:center;
  padding:60px 40px 34px; text-align:center;
  background:radial-gradient(760px 420px at 50% 42%, #0d1626 0%, #06090f 70%);
  transition:opacity .45s ease;
}
.boot.gone{ opacity:0; pointer-events:none; }
.bootmark{ display:grid; place-items:center; gap:16px; align-self:end; }
.mark{ width:104px; height:104px; }
.mark .edge{ fill:none; stroke:var(--accent); stroke-width:2.2; }
.mark .edge2{ fill:none; stroke:var(--warn); stroke-width:1.6; opacity:.85; }
.mark.small{ width:22px; height:22px; }
.boot .mark{ animation:cubesway 5s ease-in-out infinite; }
.wordmark{
  font-size:44px; font-weight:800; letter-spacing:.34em; text-indent:.34em;
  text-transform:uppercase;
}
.bootver{ font-family:var(--mono); font-size:12px; color:var(--dim2); letter-spacing:.08em; }
.bootbar{ width:280px; height:4px; border-radius:4px; background:#162034; overflow:hidden; margin:26px 0 12px; }
.bootbar i{ display:block; height:100%; width:40%; border-radius:4px; background:var(--accent); animation:bootfill 1.4s ease forwards; }
.bootskip{ font-size:12px; color:var(--dim2); letter-spacing:.06em; }
/* The unofficial line belongs on the FIRST screen, not only inside the menu: the boot screen is
 * what a stranger sees, and it is where a trademark disclaimer actually does its job. */
.bootlegal{
  position:absolute; left:6%; right:6%; bottom:16px; margin:0; text-align:center;
  font-size:10.5px; line-height:1.5; color:#4f5d78;
}
@keyframes bootfill{ from{ width:6% } to{ width:100% } }
@keyframes cubesway{ 0%,100%{ transform:rotate(-2deg) } 50%{ transform:rotate(2deg) translateY(-3px) } }

/* ── the shell ───────────────────────────────────────────────────────────── */
.os{ position:absolute; inset:0; display:grid; grid-template-rows:auto 1fr auto; gap:14px; padding:20px 24px; }
.bar{ display:flex; align-items:center; gap:18px; }
.brand{ display:flex; align-items:center; gap:9px; white-space:nowrap; }
.brand b{ letter-spacing:.16em; font-size:14px; }
.brand span{ font-family:var(--mono); font-size:11px; color:var(--dim2); }
.tabs{ display:flex; gap:6px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.tab{
  background:transparent; border:1px solid var(--line); color:var(--dim);
  padding:6px 13px; border-radius:999px; cursor:pointer;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
}
.tab:hover{ color:var(--ink); border-color:#2c3a5c; }
.tab[aria-selected="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
.status{ display:flex; align-items:center; gap:12px; }
.chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--dim);
  border:1px solid var(--line); border-radius:5px; padding:4px 8px;
}
.clock{ font-family:var(--mono); font-size:13px; color:var(--ink); letter-spacing:.06em; }

.cols{ display:grid; grid-template-columns:1.18fr .82fr; gap:16px; min-height:0; align-items:start; }
.list, .detail{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); }
/* Content-sized, not stretched: pinning the note to the floor of a fixed-height panel left a
 * visible hole under a five-item group, which reads as unfinished rather than roomy. */
.list{ display:grid; grid-template-rows:auto auto auto; min-height:0; overflow:hidden; }
.colhead{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:12px 16px 10px; border-bottom:1px solid var(--line);
}
.colhead span:first-child{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:0 0 6px color-mix(in srgb, var(--accent) 55%, transparent), 0 1px 0 #000;
}
.colhead .note{ font-family:var(--mono); font-size:11px; color:var(--dim2); }
.scroll{ overflow-y:auto; padding:6px; scrollbar-width:thin; max-height:500px; }
.group[hidden]{ display:none; }
.group{ margin:0; padding:0; list-style:none; }
.row{ margin:0; }
.rowlink{
  display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:12px;
  padding:11px 12px; border-radius:7px; border-left:3px solid transparent;
}
.rowlink .disc{
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid #33436a; background:radial-gradient(circle at 38% 34%, #26334f 0 30%, #131c2f 70%);
}
.rowlink .rname{ font-size:15.5px; }
.rowlink .rnote{ font-family:var(--mono); font-size:11px; color:var(--dim2); white-space:nowrap; }
.rowlink:hover{ background:var(--panel2); }
.row.on .rowlink{
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent) 0%, var(--panel2) 70%);
  border-left-color:var(--accent);
}
.row.on .rowlink .rname{ font-weight:700; }
.row.on .rowlink .disc{ border-color:var(--accent); background:radial-gradient(circle at 38% 34%, var(--accent) 0 30%, #131c2f 72%); }
.rowlink:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.listhelp{ margin:0; padding:9px 16px 11px; border-top:1px solid var(--line); font-size:11.5px; color:var(--dim2); }

.detail{ position:relative; padding:16px; }
/* The mark sits in the panel's top-right as an ornament, and the title/body keep ONE left
 * edge. The first cut put the cube beside the title, which indented the heading away from the
 * text beneath it — a small misalignment that reads as sloppy at a glance. */
.dhead{ position:relative; margin:0 0 10px; padding-right:96px; min-height:60px; }
.cube{
  position:absolute; top:0; right:0; width:84px; height:84px; margin:0;
  transform-style:preserve-3d; animation:spin 16s linear infinite;
}
.cube .face{
  position:absolute; inset:0; border:1.4px solid color-mix(in srgb, var(--accent) 70%, transparent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}
.cube .fx{ transform:translateZ(42px) } .cube .bx{ transform:rotateY(180deg) translateZ(42px) }
.cube .fy{ transform:rotateX(90deg) translateZ(42px) } .cube .by{ transform:rotateX(-90deg) translateZ(42px) }
.cube .fz{ transform:rotateY(90deg) translateZ(42px) } .cube .bz{ transform:rotateY(-90deg) translateZ(42px) }
@keyframes spin{ from{ transform:rotateX(-18deg) rotateY(0) } to{ transform:rotateX(-18deg) rotateY(360deg) } }

.detail h1{ margin:0 0 4px; font-size:25px; letter-spacing:.01em; overflow-wrap:anywhere; }
.dmeta{ font-family:var(--mono); font-size:11.5px; color:var(--dim2); }
.dblurb{ margin:0 0 14px; color:#cfdcf2; font-size:14.5px; }
.fields{ margin:0 0 14px; display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.fields div{ min-width:0; }
.fields dt{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--dim2); }
.fields dd{ margin:2px 0 0; font-size:12.5px; color:var(--ink); overflow-wrap:anywhere; }
.go{
  display:inline-block; background:var(--accent); color:var(--accent-ink); font-weight:700;
  padding:9px 18px; border-radius:8px; letter-spacing:.04em;
}
.go:hover{ filter:brightness(1.08); }
.legal{ margin:14px 0 0; font-size:10.5px; color:#5d6c8b; line-height:1.5; }

.hints{ display:flex; align-items:center; gap:14px; font-size:12px; color:var(--dim); }
.hint{ display:flex; align-items:center; gap:5px; white-space:nowrap; }
kbd{
  font-family:var(--mono); font-size:10.5px; color:var(--ink);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:1px 5px; background:#111a2b;
}
.hint.gamepad{ color:var(--ok); }
.sbtn{
  background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:7px;
  padding:6px 12px; font-size:12px; cursor:pointer;
}
.sbtn:hover{ color:var(--ink); border-color:#2c3a5c; }
.sbtn.ghost{ margin-left:auto; }

/* ── settings ────────────────────────────────────────────────────────────── */
.settings{
  position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; gap:14px;
  padding:34px 40px; background:rgba(6,9,15,.96); overflow-y:auto;
}
.settings[hidden]{ display:none; }
.settings h2{ margin:0; font-size:20px; letter-spacing:.14em; text-transform:uppercase; }
.sets{ display:grid; gap:12px; max-width:640px; }
.set{ display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:8px; padding:11px 14px; background:var(--panel); }
.setlabel{ flex:1; font-size:13.5px; }
.swatches{ display:flex; gap:8px; }
.sw{ width:26px; height:26px; border-radius:50%; border:2px solid #223; cursor:pointer; }
.sw.cyan{ background:#5ce1ee } .sw.gold{ background:#f0c46a } .sw.pink{ background:#ff6fae } .sw.lime{ background:#9ae66e }
.sw[aria-pressed="true"]{ border-color:var(--ink); }
.set input[type=checkbox]{ width:18px; height:18px; accent-color:var(--accent); }
.settings .legal{ max-width:640px; }

/* ── CRT overlay: pure decoration, never in the way ──────────────────────── */
.crt{
  position:fixed; inset:0; pointer-events:none; z-index:9;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
  box-shadow:inset 0 0 180px rgba(0,0,0,.65);
  opacity:.55;
}
html[data-scan="off"] .crt{ display:none; }
html[data-motion="off"] .cube, html[data-motion="off"] .boot .mark{ animation:none; }
html[data-motion="off"] .bootbar i{ animation:none; width:100%; }

/* ── phone: structure over homage ────────────────────────────────────────── */
@media (max-width:900px){
  body{ display:block; overflow:auto; font-size:16px; }
  .stage{ width:100%; height:auto; min-height:100dvh; transform:none; }
  .os{ position:static; padding:14px 16px calc(24px + env(safe-area-inset-bottom)); gap:10px; min-height:100dvh; }
  .bar{ flex-wrap:wrap; gap:10px; }
  .tabs{ order:3; width:100%; justify-content:flex-start; margin:2px 0 0; overflow-x:auto; padding-bottom:2px; }
  .tab{ font-size:12.5px; padding:9px 15px; min-height:44px; display:inline-flex; align-items:center; }
  .status{ margin-left:auto; }
  .chip{ display:none; }
  .clock{ font-size:15px; }
  .cols{ grid-template-columns:1fr; }
  .scroll{ max-height:52vh; }
  .rowlink{ grid-template-columns:22px 1fr; padding:13px 12px; }
  .rowlink .rname{ font-size:16px; }
  .rowlink .rnote{ grid-column:2; white-space:normal; font-size:12px; }
  .colhead span:first-child{ font-size:12.5px; }
  .colhead .note{ font-size:11.5px; }
  .listhelp{ font-size:12.5px; }
  .detail{ padding:15px; }
  .dhead{ padding-right:0; min-height:0; }
  /* On a phone the mark goes back above the name: a floating ornament would collide with a
     full-width heading, and there is no room to give it a corner of its own. */
  .cube{ position:static; width:64px; height:64px; margin:0 0 10px; }
  .cube .fx{ transform:translateZ(32px) } .cube .bx{ transform:rotateY(180deg) translateZ(32px) }
  .cube .fy{ transform:rotateX(90deg) translateZ(32px) } .cube .by{ transform:rotateX(-90deg) translateZ(32px) }
  .cube .fz{ transform:rotateY(90deg) translateZ(32px) } .cube .bz{ transform:rotateY(-90deg) translateZ(32px) }
  .detail h1{ font-size:22px; }
  .dblurb{ font-size:15.5px; }
  .fields{ grid-template-columns:1fr; gap:10px; }
  .fields dt{ font-size:12px; }
  .fields dd{ font-size:13.5px; }
  .go{ display:block; text-align:center; padding:13px 18px; font-size:15px; }
  /* The disclaimer is legally load-bearing, so on a phone it gets readable ink and size
     instead of the desktop's fine print. */
  .legal{ font-size:12px; color:#93a2c2; }
  .hints{ flex-wrap:wrap; gap:8px; font-size:12px; }
  /* Keyboard hints are noise on a touch screen — two full-width buttons are the whole bar
     there, so neither one sits flush against the screen edge or in the gesture zone. */
  .hint{ display:none; }
  .sbtn{ padding:12px 15px; font-size:14px; min-height:46px; display:flex; align-items:center; justify-content:center; }
  .hints .sbtn{ flex:1 1 auto; }
  .sbtn.ghost{ margin-left:0; }
  .settings{ padding:20px 15px; }
  .setlabel{ font-size:14.5px; }
  .sw{ width:32px; height:32px; }
  .boot{ padding:40px 20px 26px; }
  .wordmark{ font-size:31px; }
  .crt{ opacity:.4; }
}
@media (prefers-reduced-motion:reduce){
  .cube, .boot .mark{ animation:none; }
}