/* ============================================================
   kull.games arcade — KullOS terminal, Kull Games brand, LIGHT mode.
   Paper/cream page + gold/ink accents (their kull.css palette); the
   monitor itself stays a dark amber CRT, sitting in a bright room.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --gold: #f5c542; --gold-bright: #ffd84d; --amber: #f0a811; --amber-deep: #d98a06;
    --ink: #201233; --ink-2: #34234f; --ink-3: #4a3568;
    --wheat: #e7d3a1; --sky: #8fb4d6; --forest: #27543d;
    --paper: #faf3e2; --paper-2: #f3e9d2; --paper-3: #ece0c4; --line: #ddcca6; --muted: #756849;
    --live: #4f9d4f;
    --pixel: 'Silkscreen', monospace;
    --sans: 'Space Grotesk', system-ui, sans-serif;
    --shadow: 0 2px 0 var(--line), 0 14px 32px -16px rgba(32,18,51,.4);
    --shadow-lg: 0 4px 0 var(--line), 0 28px 60px -22px rgba(32,18,51,.5);
    --kb-scale: 1;   /* on-screen-keyboard size multiplier (SIZE toolbar button) */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0; height: 100%;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    overflow: hidden;
    overscroll-behavior: none;
}
#app { height: 100vh; }

/* boot splash before WASM loads */
.boot-screen { height: 100vh; display: flex; align-items: center; justify-content: center; }
.boot-text { color: var(--amber-deep); font-family: var(--pixel); font-size: 13px; line-height: 1.8; text-align: center; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.console-page { height: 100dvh; display: flex; align-items: center; justify-content: center; }

.fs-container {
    position: relative;
    width: 100%; height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 8px; padding: 10px 8px;
}
#kullos-fs:fullscreen { width: 100vw; height: 100vh; background: var(--paper); padding: 6px; }

/* ---------- toolbar ---------- */
.toolbar {
    flex: 0 0 auto;
    width: min(98vw, 1120px);
    display: flex; align-items: center; gap: 10px;
    padding: 2px;
}
.tb-logo {
    height: 32px; width: 32px;
    object-fit: cover; border-radius: 6px;
    box-shadow: 0 0 0 2px var(--ink), 0 3px 0 var(--amber-deep);
    flex: 0 0 auto;
}
.tb-title {
    font-family: var(--pixel);
    color: var(--ink);
    font-size: clamp(10px, 1.6vw, 15px);
    letter-spacing: 0.02em;
}
.tb-spacer { flex: 1; }
.tb-btn {
    font-family: var(--pixel);
    font-size: clamp(8px, 1.3vw, 11px);
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink);
    background: var(--paper-3);
    border: none; border-radius: 4px;
    padding: 8px 12px; cursor: pointer;
    box-shadow: 0 2px 0 var(--line);
    transition: transform .1s, background .1s, color .1s;
    white-space: nowrap;
}
.tb-btn:hover { background: var(--gold); }
.tb-btn:active { transform: translateY(2px); box-shadow: none; background: var(--ink); color: var(--gold); }

/* ---------- screen (the dark CRT, on a bright page) ---------- */
.screen-wrap {
    flex: 1 1 auto; min-height: 0; width: 100%;
    display: flex; align-items: center; justify-content: center;
    position: relative;            /* anchor the on-screen desk mouse */
}

/* ---------- the on-screen "physical" mouse: a real control surface (5 buttons, click-to-engage) ---------- */
.deskmouse {
    position: absolute; right: 26px; bottom: 18px; width: 86px; height: 126px; z-index: 8;
    touch-action: none; cursor: grab; user-select: none;
}
.deskmouse::before {           /* the mousepad it sits on */
    content: ''; position: absolute; inset: -16px -22px; z-index: -1; border-radius: 14px;
    background: repeating-linear-gradient(45deg, #2b2620, #2b2620 7px, #332e26 7px, #332e26 14px);
    box-shadow: inset 0 0 0 2px #1c1812, 0 6px 14px -8px rgba(0,0,0,.5);
}
.mouse-body {
    position: absolute; inset: 0; border-radius: 42px 42px 34px 34px;
    background: linear-gradient(#f1e9d3, #d6caa9 68%, #c6ba98);
    box-shadow: inset 0 2px 1px rgba(255,255,255,.6), inset 0 -4px 8px rgba(92,74,40,.35), 0 3px 6px -2px rgba(0,0,0,.5);
    transition: transform .1s ease;
}
.mouse-btn {
    display: flex; align-items: center; justify-content: center;
    font: 700 11px/1 var(--sans, system-ui); color: #6a5a32; letter-spacing: .5px;
    cursor: pointer; transition: background .08s, box-shadow .08s; user-select: none;
}
/* the two primary buttons + middle wheel live on the top face */
.mb-l, .mb-r { position: absolute; top: 3px; height: 46%; width: 40%; }
.mb-l { left: 3px; border-radius: 38px 4px 0 0; border-right: 1px solid rgba(92,74,40,.35); }
.mb-r { right: 3px; border-radius: 4px 38px 0 0; border-left: 1px solid rgba(92,74,40,.35); }
.mb-m {            /* middle / wheel button, between L and R */
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 14px; height: 30%; border-radius: 6px;
    background: linear-gradient(#9a8b60, #7c6e48);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -2px 2px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.3);
}
/* the two side buttons on the LEFT edge of the body (back/forward, thumb buttons) */
.mb-side {
    position: absolute; left: -9px; width: 12px; height: 17px; font-size: 9px; color: #d8cba6;
    background: linear-gradient(#5a4f38, #443c2b); border-radius: 4px 0 0 4px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.4);
}
.mb-back { top: 44%; }
.mb-fwd  { top: 64%; }
.mouse-btn:hover { background: rgba(120,98,52,.18); }
.mb-m:hover, .mb-side:hover { filter: brightness(1.18); }
.mouse-btn.down {
    background: rgba(120,98,52,.5) !important; box-shadow: inset 0 2px 5px rgba(60,46,18,.6); color: #4a3d1d;
}
.mb-m.down, .mb-side.down { filter: brightness(.8); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
/* ---------- late-90s beige CRT monitor: a moulded bezel around the 4:3 screen ---------- */
/* The screen itself stays 1024x768 (#vga); the monitor is the plastic frame around it, so the
   outer edge a user sees is never the hard edge of the rendered canvas. */
.crt-monitor {
    position: relative; display: inline-block;
    padding: 26px 30px 0;                       /* bezel thickness around the screen recess */
    border-radius: 30px / 24px;                 /* slightly elliptical → that CRT-shell curve */
    background: radial-gradient(125% 85% at 50% -8%, #f3ecd9 0%, #ded3b8 55%, #c7bb99 100%);
    box-shadow:
        inset 0 2px 1px rgba(255,255,255,.65),  /* top plastic highlight */
        inset 0 -4px 8px rgba(92,74,40,.38),    /* lower plastic shade */
        0 20px 44px -18px rgba(18,10,2,.7),     /* monitor drop shadow */
        0 2px 0 #b2a482;
    max-width: 100%; max-height: 100%;
}
.crt-chin {
    height: 58px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.crt-brand {
    font-family: var(--sans, system-ui); font-weight: 800; font-size: 15px; letter-spacing: 3px;
    color: #8a7c55; text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -1px 1px rgba(92,74,40,.45);  /* engraved */
}
.crt-led {
    position: absolute; right: 24px; bottom: 22px; width: 9px; height: 9px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe9a8, var(--amber, #d98a06) 70%);
    box-shadow: 0 0 7px 1px rgba(217,138,6,.85);
}
.screen-frame {
    /* the SCREEN inside the monitor: a BLACK inner mat (padding) around the picture so the text grid and
       its red proof-border never reach the rounded glass edge — no clipping, no overlap. The rounding
       lives here (the black mat), so #vga stays a sharp rectangle and its corner text is never cut. */
    position: relative; border: none; border-radius: 18px; padding: 22px; background: #000;
    box-shadow: inset 0 0 0 2px #15110a, inset 0 0 26px 8px rgba(0,0,0,.95);
    max-width: 100%; max-height: 100%;
}
#vga {
    display: block;
    image-rendering: pixelated;
    cursor: text;
    background: #000;
    border-radius: 0;                           /* sharp — the black mat does the rounding, text is never clipped */
    /* exact display size set by layout() in JS to fit available space at 4:3 */
}
.scanlines {
    pointer-events: none; position: absolute; inset: 22px;   /* match the mat padding → overlays exactly the picture */
    background: repeating-linear-gradient(to bottom,
        rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(20,10,0,0.20) 3px);
    border-radius: 0;
}
.crt-glass {
    /* the glass curve: a corner vignette + soft inner shadow over the whole rounded screen (incl. the mat) */
    pointer-events: none; position: absolute; inset: 0; border-radius: 18px;
    background: radial-gradient(140% 130% at 50% 50%, transparent 52%, rgba(0,0,0,.45) 100%);
    box-shadow: inset 0 0 30px rgba(0,0,0,.5);
}
/* ---------- the 90s desktop "pizza box" the monitor sits on ---------- */
.workstation { display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.pc-case {
    position: relative; height: 96px; margin-top: -4px;       /* tuck under the monitor's foot */
    border-radius: 8px 8px 14px 14px; border: 1px solid #b9ab86;
    background: linear-gradient(#ece2c8 0%, #ddd0b0 60%, #ccbf9c 100%);
    box-shadow: inset 0 2px 1px rgba(255,255,255,.6), inset 0 -5px 10px rgba(92,74,40,.35),
                0 16px 30px -16px rgba(18,10,2,.7);
}
.pc-face { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 100%; padding: 0 20px; }
.pc-drives { display: flex; flex-direction: column; gap: 11px; flex: 1 1 auto; max-width: 340px; }

/* 5.25" CD-ROM */
.cd-drive { position: relative; height: 22px; }
.cd-front { position: relative; height: 22px; border-radius: 4px; padding: 0 8px; display: flex; align-items: center; gap: 8px;
    background: linear-gradient(#d8cba8, #c2b48f); box-shadow: inset 0 0 0 1px #b3a47e, inset 0 1px 2px rgba(255,255,255,.4); }
.cd-front::before { content:''; position:absolute; left:8px; right:36px; top:50%; height:6px; transform:translateY(-50%);
    background:#2a2418; border-radius:2px; box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.cd-tray { position:absolute; left:6px; top:1px; width:58%; height:20px; z-index:2; border-radius:2px; background:#1c1812;
    display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
    transform: translateX(-112%); transition: transform .55s ease, opacity .2s; }
.cd-tray.out { transform: translateX(0); opacity:1; }
.cd-disc { width:16px; height:16px; border-radius:50%; opacity:0; transition: opacity .2s; box-shadow: 0 0 0 1px rgba(0,0,0,.3);
    background: conic-gradient(from 0deg, #b9c6d6, #e7eef6, #aebccd, #f0f4f9, #b9c6d6); }
.cd-disc.debian { background: conic-gradient(from 0deg, #d9486e, #f3a8bd, #c43050, #f7c0cf, #d9486e); }
.cd-disc.show { opacity:1; }

/* 3.5" floppy */
.fd-drive { position:relative; height:18px; display:flex; align-items:center; gap:8px; padding:0 8px; border-radius:4px;
    background: linear-gradient(#d8cba8, #c2b48f); box-shadow: inset 0 0 0 1px #b3a47e; }
.fd-slot { position:relative; flex:1 1 auto; height:6px; overflow:hidden; border-radius:2px; background:#2a2418;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.fd-disk { position:absolute; left:50%; top:-22px; width:22px; height:20px; transform:translateX(-50%); opacity:0;
    background:#2b2f6b; border-radius:2px 2px 1px 1px; transition: top .45s ease, opacity .15s; }
.fd-disk::after { content:''; position:absolute; left:4px; right:4px; top:3px; height:8px; background:#cfd2e6; border-radius:1px; }
.fd-disk.inserted { top:-2px; opacity:1; }
.cd-eject, .fd-eject { width:10px; height:5px; border-radius:1px; background:#9a8d68; margin-left:auto;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.2); }

/* LEDs */
.led { width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:#5b5240; box-shadow: inset 0 0 2px rgba(0,0,0,.6); }
.led-power.on { background: radial-gradient(circle at 35% 35%, #b6ffb0, #25c43a 70%); box-shadow: 0 0 6px 1px rgba(37,196,58,.7); }
.led-hdd.act { background: radial-gradient(circle at 35% 35%, #ffd0a0, #e0560a 70%); box-shadow: 0 0 6px 1px rgba(224,86,10,.85); }
.cd-led.act, .fd-led.act { background: radial-gradient(circle at 35% 35%, #ffe9a8, #d98a06 70%); box-shadow: 0 0 6px 1px rgba(217,138,6,.85); }

.pc-right { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.pc-btns { display:flex; align-items:center; gap:10px; }
.pc-power { width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; position:relative;
    background: radial-gradient(circle at 38% 32%, #f3ecd9, #cabf9c 75%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 -2px 4px rgba(92,74,40,.4), 0 2px 0 #b09f78; }
.pc-power::after { content:''; position:absolute; inset:0; margin:auto; width:3px; height:12px; border-radius:2px;
    background:#7a6c48; box-shadow: 0 -7px 0 -1px #7a6c48; }   /* the ⏻ power glyph */
.pc-power:active { transform: translateY(2px); box-shadow: inset 0 1px 1px rgba(255,255,255,.7); }
.pc-reset { height:16px; padding:0 8px; border:none; border-radius:3px; cursor:pointer;
    font-family: var(--sans, system-ui); font-weight:800; font-size:8px; letter-spacing:1px; color:#6a5e3e;
    background: linear-gradient(#e7dcc0, #cdc09c); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 2px 0 #b09f78; }
.pc-reset:active { transform: translateY(2px); box-shadow: inset 0 1px 2px rgba(92,74,40,.4); }
.led-power { background:#3a3528; }                       /* off by default; .on lights it green */
.pc-leds { display:flex; gap:8px; }
.pc-badge { font-family: var(--sans, system-ui); font-weight:800; font-size:10px; letter-spacing:1px; color:#8a7c55;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); }

/* ---------- on-screen keyboard (a light deck) ---------- */
.keyboard {
    flex: 0 0 auto;
    width: min(98vw, 1120px);
    display: flex; flex-direction: column;
    gap: clamp(3px, 0.6vw, 6px);
    padding: clamp(6px, 1vw, 12px);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    user-select: none; touch-action: manipulation;
}
.kbd-row { display: flex; gap: clamp(3px, 0.6vw, 6px); width: 100%; }
/* the function-key row is shorter (rarely used) — like a real Dell keyboard's half-height F-row */
.kbd-row-fn .kbd-key { height: calc(clamp(16px, 3.1vmin, 28px) * var(--kb-scale)); font-size: clamp(8px, 1.4vmin, 12px); }
.kbd-key {
    flex: 1 1 0; min-width: 0;
    height: calc(clamp(28px, 5vmin, 46px) * var(--kb-scale));
    background: var(--paper-3);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: var(--sans); font-weight: 600;
    font-size: clamp(12px, 2.1vmin, 18px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 0 var(--line);
    transition: transform 60ms, background 60ms, color 60ms, box-shadow 60ms;
}
.kbd-key:active, .kbd-key.down {
    background: var(--ink); color: var(--gold);
    transform: translateY(2px); box-shadow: none;
}
.kbd-key.wide-15 { flex-grow: 1.5; }
.kbd-key.wide-18 { flex-grow: 1.8; }
.kbd-key.wide-4 { flex-grow: 4; }
/* an empty spacer that holds a nav column open so the keys above/below stay column-aligned */
.kbd-key.kbd-blank { background: none; border: none; box-shadow: none; cursor: default; pointer-events: none; }
.kbd-key.special { font-family: var(--pixel); font-size: clamp(8px, 1.5vmin, 12px); color: var(--amber-deep); text-transform: lowercase; }
.kbd-key.mod { color: var(--amber-deep); }
.kbd-key.mod.active { background: var(--amber); color: var(--ink); box-shadow: none; border-color: var(--amber-deep); }
/* Fn is on: keys that have a shortcut glow so you can see the combos */
.kbd-key.fn-hint { background: var(--amber); color: var(--ink); border-color: var(--amber-deep); }

/* ---------- toolbar toggle "on" state (e.g. SPLIT active) ---------- */
.tb-btn.tb-on { background: var(--amber); color: var(--ink); box-shadow: 0 2px 0 var(--amber-deep); }

/* ---------- split / ergonomic keyboard (a folding Targus: monitor centred, halves flanking) ---------- */
/* The two halves are hidden by default; classic mode shows only #kbd. */
.kbd-half { display: none; }
.kbd-half-left, .kbd-half-right {
    flex: 0 1 auto; width: clamp(220px, 26vw, 420px);
    align-self: center; z-index: 7;
    background: var(--paper-2);
}
/* SPLIT MODE on a WIDE screen: screen-wrap becomes  [left keys | monitor | right keys]  side by side. */
@media (min-width: 980px) {
    .kbd-split-mode .screen-wrap {
        gap: clamp(6px, 1.4vw, 22px);
        align-items: center; justify-content: center;
    }
    .kbd-split-mode .kbd-half { display: flex; }
    /* the classic stacked deck is hidden by JS (display:none) in split mode; belt-and-braces here too */
    .kbd-split-mode #kbd { display: none !important; }
    .kbd-split-mode .workstation { flex: 0 1 auto; }
    /* a slight inward tilt + perspective, like the folding Targus split halves angling toward the user */
    .kbd-split-mode .kbd-half-left  { transform: perspective(900px) rotateY(9deg); transform-origin: right center; }
    .kbd-split-mode .kbd-half-right { transform: perspective(900px) rotateY(-9deg); transform-origin: left center; }
}
/* NARROW screen: split mode falls back to the classic stacked deck (the halves can't flank a narrow monitor). */
@media (max-width: 979px) {
    .kbd-split-mode .kbd-half { display: none !important; }
    .kbd-split-mode #kbd { display: flex !important; }
}

/* ---------- side panels (paper cards) ---------- */
.side-panel {
    position: absolute; top: 0; bottom: 0;
    width: min(440px, 94vw);
    background: var(--paper);
    color: var(--ink);
    padding: 14px 16px 18px 16px;
    transition: transform 160ms ease-out;
    z-index: 60; overflow-y: auto;
    font-size: 13px; line-height: 1.5;
}
.manual-panel { left: 0; border-right: 3px solid var(--amber); transform: translateX(-105%); box-shadow: var(--shadow-lg); }
.about-panel  { right: 0; border-left: 3px solid var(--amber); transform: translateX(105%); box-shadow: var(--shadow-lg); }
.manual-panel.open, .about-panel.open { transform: translateX(0); }

.sp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sp-title { font-family: var(--pixel); color: var(--ink); font-size: 14px; letter-spacing: 0.02em; }
.sp-title::before { content: "▸ "; color: var(--amber-deep); }
.sp-close {
    font-family: var(--pixel); font-size: 12px;
    background: var(--gold); color: var(--ink);
    border: none; border-radius: 4px; cursor: pointer; padding: 4px 9px;
    box-shadow: 0 2px 0 var(--amber-deep);
}
.sp-close:active { transform: translateY(2px); box-shadow: none; }
.sp-search {
    width: 100%; margin-bottom: 12px; padding: 7px 9px;
    background: var(--paper-2); color: var(--ink);
    border: 1px solid var(--line); border-radius: 4px;
    font-family: var(--sans); font-size: 13px;
}
.sp-search::placeholder { color: var(--muted); }
.sp-search:focus { outline: none; border-color: var(--amber); }

.sp-real { background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; margin-bottom: 14px; color: var(--muted); }
.sp-real > b { font-family: var(--pixel); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber-deep); }
.sp-real-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; margin: 8px 0 2px; line-height: 1.4; }
.sp-real-grid .real { color: var(--forest); font-weight: 600; }
.sp-real-grid .soon { color: var(--amber-deep); font-weight: 600; }
.sp-real-grid .nope { color: #b34a42; font-weight: 600; }
.sp-real code { font-family: ui-monospace, monospace; color: var(--ink); background: var(--paper-3); padding: 0 4px; border-radius: 3px; }
.sp-hint { margin-top: 8px; font-style: italic; }

.sp-cat { font-family: var(--pixel); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber-deep); margin: 14px 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.sp-cmds { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-cmd {
    background: var(--paper-2); color: var(--ink);
    border: 1px solid var(--line); border-radius: 5px;
    padding: 4px 8px; cursor: pointer; font-size: 12px; font-weight: 600;
    box-shadow: 0 1px 0 var(--line);
}
.sp-cmd:hover { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.sp-cmd .syn { display: block; font-weight: 400; color: var(--muted); font-size: 10px; }
.sp-cmd:hover .syn { color: var(--wheat); }

.about-hero {
    position: relative; margin: -14px -16px 14px -16px;
    aspect-ratio: 16/7; overflow: hidden; background: var(--ink);
    border-bottom: 3px solid var(--amber);
}
.about-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32,18,51,.1), transparent 45%, rgba(32,18,51,.8)); }
.about-hero-tag { position: absolute; left: 12px; bottom: 9px; z-index: 2; font-family: var(--pixel); font-size: 11px; letter-spacing: 0.1em; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.6); }

.about-row { display: flex; gap: 10px; margin: 8px 0; }
.about-row span { font-family: var(--pixel); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--amber-deep); min-width: 78px; padding-top: 2px; }
.about-row b { color: var(--ink); font-weight: 500; }
.about-blurb { margin-top: 16px; color: var(--muted); line-height: 1.6; }
.about-blurb b { color: var(--ink); }

@media (max-width: 640px) {
    .fs-container { height: 100dvh; gap: 5px; padding: 4px; }
    .scanlines { display: none; }
    .tb-title { display: none; }
}

/* ---------- blazor error bar ---------- */
#blazor-error-ui {
    color-scheme: light; background: #fff3f0; color: #8a2a22;
    border-top: 2px solid var(--amber); bottom: 0; display: none;
    left: 0; padding: 0.6rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
    font-family: var(--sans);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
#blazor-error-ui .reload { color: var(--amber-deep); }