@charset "UTF-8";
/* SuperSlop TV — "neon" theme.
 *
 * Modelled on cbkswwc.com (2026-09-03): black page, green Times body text,
 * cyan Courier headings with a red drop, translucent-navy boxes behind ridge
 * borders in magenta / cyan / yellow, an amber Georgia marquee over a blue rule,
 * a striped blue contract bar, and Windows-98 dialog chrome for anything that
 * pops up. All system fonts — nothing to load.
 *
 * Structure and class names are the ones the soulsplay port left behind; only
 * the look changes. The custom-property names are kept too, redefined with
 * this palette, because the per-page <style> blocks reference them. Where a
 * page block would still win (it loads after this file), the rule here carries
 * a `.wrap` / `.modal-overlay` prefix for specificity.
 *
 * The stream window is fenced as .retro and is not themed.
 */

:root{
  color-scheme:dark;

  /* Palette */
  --background:#000;
  --on-background:#0f0;
  --surface:rgba(0,0,64,.92);        /* evidence card */
  --on-surface:#ff0;
  --surface-light:rgba(0,0,128,.5);  /* primitive box */
  --surface-75:rgba(0,0,0,.76);

  --accent:#f0f;
  --on-accent:#fff;
  --accent-ink:#0ff;
  --accent-pressed:#c0c;
  --accent-soft:rgba(255,0,255,.18);

  --abstract:#0f0;
  --secondary:#ff0;
  --secondary-surface:#001fd1;
  --secondary-dark:#050505;
  --light-grey:#888;
  --error:#ff2d2d;
  --success:#0f0;
  --warning:#ffad21;

  --navy:#000080;
  --blue:#001fd1;
  --blue-2:#0030ff;
  --title-blue:#064fc5;
  --amber:#ffad21;
  /* Robinhood lime. The loudest colour on the page — wordmark, active nav,
     primary button, the flying sprites. */
  --lime:#ccff00;
  --lime-dim:#7fa300;
  --win-bg:#c0c0c0;
  --win-face:#e9e9e9;

  /* Nothing on this site is rounded. */
  --border-color:0,255,0;
  --border-opacity:1;
  --border:1px solid #0f0;
  --border-radius-x-small:0;
  --border-radius-small:0;
  --border-radius-regular:0;
  --border-radius-large:0;
  --border-radius-x-large:0;
  --radius-pill:0;

  /* Type */
  --font-body:'Times New Roman',Times,serif;
  --font-display:'Courier New',Courier,monospace;
  --font-mono:'Courier New',Courier,monospace;
  --font-ui:'MS Sans Serif',Tahoma,sans-serif;
  --font-impact:Impact,'Arial Black',sans-serif;
  --font-marquee:Georgia,'Times New Roman',serif;

  --space-block:30px;
  --space-head:14px;
  --space-cards:14px;

  --font-size-alpha:64px;      --font-weight-alpha:900;      --line-height-alpha:1.1;
  --font-size-xxl-title1:48px; --font-weight-xxl-title1:700; --line-height-xxl-title1:1.15;
  --font-size-xxl-title2:40px; --font-weight-xxl-title2:700; --line-height-xxl-title2:1.15;
  --font-size-xl-title1:34px;  --font-weight-xl-title1:700;  --line-height-xl-title1:1.2;
  --font-size-xl-title2:28px;  --font-weight-xl-title2:700;  --line-height-xl-title2:1.2;
  --font-size-lg-title:24px;   --font-weight-lg-title:700;   --line-height-lg-title:1.25;
  --font-size-title1:20px;     --font-weight-title1:700;     --line-height-title1:1.3;
  --font-size-title2:17px;     --font-weight-title2:700;     --line-height-title2:1.3;
  --font-size-body-1:17px;     --font-weight-body-1:400;     --line-height-body-1:1.5;
  --font-size-body-2:16px;     --font-weight-body-2:400;     --line-height-body-2:1.5;
  --font-size-callout:14px;    --font-weight-callout:400;    --line-height-callout:1.45;
  --font-size-caption1:12px;   --font-weight-caption1:700;   --line-height-caption1:1.35;

  --button-small-height:auto;   --button-small-font-size:12px;   --button-small-padding:4px 15px;
  --button-regular-height:auto; --button-regular-font-size:13px; --button-regular-padding:6px 18px;
  --button-large-height:auto;   --button-large-font-size:15px;   --button-large-padding:8px 22px;
  --button-xl-height:auto;      --button-xl-font-size:17px;      --button-xl-padding:10px 26px;

  --shadow-soft:4px 4px 0 #000;
  --shadow-card:0 0 0 3px #f0f,0 0 24px rgba(0,255,255,.55);
  --shadow-float:8px 8px 0 #000,0 0 32px #f0f;
  --glass-bg:#000;
  --glass-blur:none;
  --glass-border:var(--blue);

  --ease-standard:steps(2,end);
}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  background-color:#000;
  /* A faint two-tone star field, fixed behind the page. */
  background-image:
    radial-gradient(rgba(0,255,0,.32) .7px,transparent .8px),
    radial-gradient(rgba(255,0,255,.28) .7px,transparent .8px);
  background-size:96px 96px,148px 148px;
  background-position:0 0,52px 74px;
  background-attachment:fixed;
  color:var(--on-background);
  font-family:var(--font-body);
  font-size:var(--font-size-body-2);
  line-height:var(--line-height-body-2);
  overflow-x:hidden;
}
::selection{background:var(--lime);color:#000;}

/* The pixel Robin Hood field (rh-field.js) sits behind everything. */
#rh-field{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:0;}
.wrap,.ss-head,.ss-side,.modal-overlay{position:relative;z-index:5;}
.ss-side,.modal-overlay{z-index:850;}
.modal-overlay{z-index:999;}

a{color:#0ff;text-decoration:underline;}
a:hover{color:#ff0;}
img{max-width:100%;height:auto;display:block;}
hr{border:0;border-top:3px double #555;margin:var(--space-block) 0;}

.wrap{max-width:1040px;margin:0 auto;padding:0 16px;}
.section{margin-bottom:var(--space-block);}

/* ── Typography ── */
.text-mono{font-family:var(--font-mono);}
.text-alpha,.text-xxl-1,.text-xxl-2,.text-xl,.text-lg{font-family:var(--font-mono);color:#0ff;}
.text-title1,.text-title2{font-family:var(--font-mono);font-weight:700;color:#ff0;}
.text-title1{font-size:var(--font-size-title1);}
.text-title2{font-size:var(--font-size-title2);}
.text-body-1{font-size:var(--font-size-body-1);}
.text-body-2{font-size:var(--font-size-body-2);}
.text-callout{font-size:var(--font-size-callout);}
.text-caption{font-size:var(--font-size-caption1);font-weight:700;font-family:var(--font-mono);}
.text-secondary{color:#0ff;}
.text-accent-ink{color:#0ff;}
.text-error{color:var(--error);}

h1,h2,h3{font-family:var(--font-mono);font-weight:700;color:#0ff;margin:0;text-shadow:2px 2px #000;}
h1{font-size:var(--font-size-xl-title1);}
h2{font-size:var(--font-size-lg-title);}
h3{font-size:var(--font-size-title2);color:#ff0;}

/* Section heading: >> TITLE << in cyan Courier with a red drop, underlined. */
.ss-h{
  display:block;
  font:700 clamp(1.5rem,3.6vw,2.4rem)/1.2 var(--font-mono);
  color:#0ff;text-align:center;text-transform:uppercase;letter-spacing:1px;
  text-shadow:3px 3px red;text-decoration:underline;
  margin:0 0 var(--space-head);
}
.ss-h::before{content:'>> ';color:var(--lime);}
.ss-h::after{content:' <<';color:var(--lime);}
.ss-h--mcp{letter-spacing:4px;}
.ss-h__alt{color:#f0f;}

/* ── Buttons: Windows-98 bevel, MS Sans Serif ────────────────────────────── */
.btn,
.wrap input[type="button"],
.wrap button,
.wrap .win-btn{
  display:inline-block;
  background:var(--win-bg);color:#000;
  border:2px solid #000;border-color:#fff #000 #000 #fff;border-radius:0;
  padding:4px 15px;height:auto;margin:0;
  font:12px var(--font-ui);font-weight:700;text-decoration:none;text-transform:uppercase;
  cursor:pointer;line-height:1.4;
}
.btn:active,
.wrap input[type="button"]:active,
.wrap button:active{border-color:#000 #fff #fff #000;}
.btn:hover{text-decoration:none;color:#000;}
.btn--md{padding:6px 18px;font-size:13px;}
.btn--lg{padding:8px 22px;font-size:15px;}
.btn--xl{padding:10px 26px;font-size:17px;}
.btn--primary,.wrap .btn--primary{background:var(--lime);color:#0a1400;text-shadow:none;}
.btn--primary:hover{color:#0a1400;}
.btn--dark,.wrap .btn--dark{background:var(--title-blue);color:#fff;text-shadow:1px 1px #000;}
.btn--dark:hover{color:#fff;}
.btn--ghost{background:#000;color:#0f0;border-color:#0f0;}
.btn--pill{border-radius:0;}
.btn:disabled,.wrap button:disabled,.wrap input[type="button"]:disabled{
  color:#808080!important;background:var(--win-bg)!important;text-shadow:1px 1px #fff;cursor:not-allowed;
}

/* Fields: sunken white boxes, black Courier. */
.field,
.wrap input[type="text"],
.wrap textarea{
  width:100%;height:auto;
  background:#fff;color:#000;
  border:2px inset #999;border-radius:0;
  padding:8px 10px;font:16px var(--font-mono);outline:none;
}
.field:focus,.wrap input[type="text"]:focus,.wrap textarea:focus{border-color:#f0f;}
.field::placeholder{color:#777;}

/* ── Badges ── */
.badge{
  display:inline-block;
  background:var(--lime);color:#0a1400;
  border:2px solid #000;border-radius:0;
  padding:2px 8px;height:auto;
  font:700 12px var(--font-ui);letter-spacing:1px;text-transform:uppercase;
}
.badge--live{background:var(--error);color:#fff;}
.badge--accent{background:var(--lime);color:#0a1400;}

/* ── Cards ─────────────────────────────────────────────────────────────────
 * Evidence-card look: near-black navy behind a 3px ridge. The three columns of
 * a row cycle cyan / magenta / yellow so a grid does not read as a flat wall. */
.card{
  background:var(--surface);
  border:3px ridge #0ff;border-radius:0;box-shadow:none;
  padding:7px;color:#ff0;
}
.card--flat{border-style:solid;}
.card--accent{background:#f0f;color:#fff;}
.card-grid{display:grid;gap:var(--space-cards);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
table.card-grid{
  display:grid;width:100%;gap:var(--space-cards);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  border-collapse:separate;
}
table.card-grid > tbody,table.card-grid tr{display:contents;}
table.card-grid td{display:block;width:auto!important;}
table.card-grid td.card{background:var(--surface);border:3px ridge #0ff;border-radius:0;box-shadow:none;padding:7px;}
table.card-grid td.card:nth-child(3n+2){border-color:#f0f;}
table.card-grid td.card:nth-child(3n){border-color:var(--lime);}
table.card-grid td.card img{
  border:4px solid var(--lime)!important;border-radius:0;
  width:100%;aspect-ratio:4/3;object-fit:cover;margin:8px 0;
}
.card[onclick],.award-card[onclick],.team-card[onclick]{cursor:pointer;}
.wrap .card[onclick]:hover,.wrap .award-card[onclick]:hover,.wrap .team-card[onclick]:hover{
  box-shadow:0 0 0 3px #f0f,0 0 24px rgba(0,255,255,.55);
}
.ss-card-title{
  display:block;font:700 1rem/1.3 var(--font-mono);
  color:#ff0;text-transform:uppercase;text-shadow:2px 2px #000;
  margin:0 0 4px;
}
.wrap .card u,.ss-table tr[onclick] u{text-decoration:underline;color:#0ff;font-weight:700;}

/* Standalone decorative GIFs: the banner frame — yellow ridge, magenta ring,
 * cyan glow, a quarter-degree of tilt.
 *
 * width:auto, not 100%: the sources are 245–500px GIFs, and stretching them to
 * a fixed 560 blew a 245px frame up to 2.3x and turned it to mush. They render
 * at native size (capped for the widest) and stay crisp. */
.ss-figure{
  display:block;margin:0 auto var(--space-block);
  width:auto;max-width:min(100%,480px);height:auto;
  background:#000;padding:4px;border-radius:0;
  border:5px ridge #ff0;
  box-shadow:0 0 0 3px #f0f,0 0 24px rgba(0,255,255,.55);
  transform:rotate(-.25deg);
}

/* ── Data tables ── */
.ss-table{
  width:100%;border-collapse:collapse;
  background:var(--surface-light);
  border:4px ridge #f0f;border-radius:0;box-shadow:none;
}
.ss-table td,.ss-table th{
  color:#ff0;border:1px solid #0f0;padding:8px;text-align:left;
  font:16px var(--font-mono);
}
.ss-table th{color:#0ff;text-transform:uppercase;font-weight:700;}
.ss-table tr:last-child td{border-bottom:1px solid #0f0;}
.ss-table tr[onclick]{cursor:pointer;}
.ss-table tr[onclick]:hover td{background:var(--blue);}
.ss-table td[bgcolor],.ss-table th[bgcolor]{background:transparent!important;}
.ss-table:not(.ss-table--dark) tr[bgcolor]{background-color:rgba(0,0,128,.35)!important;}
.ss-table:not(.ss-table--dark) tr[bgcolor="#ffdddd"],
.ss-table:not(.ss-table--dark) tr[bgcolor="#fff0f0"],
.ss-table:not(.ss-table--dark) tr[bgcolor="#fff0f5"],
.ss-table:not(.ss-table--dark) tr[bgcolor="#fff8f8"]{background-color:rgba(255,0,0,.35)!important;}
.ss-table:not(.ss-table--dark) tr[bgcolor="#fff"],
.ss-table:not(.ss-table--dark) tr[bgcolor="#ffffff"]{background-color:transparent!important;}
.ss-table a{color:#0ff;text-decoration:underline;font-weight:700;}
.ss-table a:hover{color:#ff0;}
.ss-table--dark{background:#000;border-color:#0f0;}
.ss-table--dark td,.ss-table--dark th{color:#0f0;}
.ss-table--dark font{color:inherit!important;}
.ss-table--dark tr:hover td{background:rgba(0,255,0,.08);}
.ss-table--dark a{color:#ff0;}

/* Page footers (the last legacy table on each page). */
.ss-footer,.wrap table.ss-footer{
  background:#000;border:0;border-top:3px double #555;
  color:#888;text-align:center;margin-top:50px;
}
.ss-footer td,.wrap table.ss-footer td{border:0;color:#888;font:13px var(--font-mono);padding:20px;text-align:center;}
.ss-footer font,.ss-footer a{color:#888!important;}
.ss-footer a:hover{color:#ff0!important;}

/* ── Dark / terminal blocks ── */
.card-dark,.ss-terminal,
.wrap .block,.wrap .block-purple{
  background:#000;color:#0f0;
  border:3px ridge #0f0;border-radius:0;
  padding:16px;
  font-family:var(--font-mono);
  text-align:left;
}
.wrap .block-purple{border-color:#f0f;}
.ss-terminal{font-size:14px;line-height:1.7;overflow-wrap:anywhere;}
.ss-terminal font{color:inherit!important;}
.ss-terminal b,.wrap .block b,.wrap .block-purple b{color:var(--lime);text-shadow:2px 2px #000;}
.wrap .block .ss-h,.wrap .block-purple .ss-h{color:#0ff;}
.wrap .code-box,.wrap .code-box-purple{
  background:#000;border:1px solid #0f0;color:#0f0;
  padding:12px;font:12px/1.5 var(--font-mono);white-space:pre;overflow-x:auto;
  max-width:100%;min-width:0;border-radius:0;
}
.wrap .code-box-purple{border-color:#f0f;color:#f9a;}
.wrap .btn-green{background:#0f0;color:#000;}
.wrap .btn-purple{background:#f0f;color:#fff;text-shadow:1px 1px #000;}

/* ── Follow banner: the "dossier" — red ridge, yellow ring, red glow ── */
.ss-follow{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,0,.06) 0 12px,transparent 12px 24px),
    rgba(20,0,0,.94);
  border:8px ridge #ff1a1a;border-radius:0;
  box-shadow:0 0 0 5px #ff0,0 0 30px rgba(255,0,0,.8);
  padding:14px;color:#fff;
}
.ss-follow__ava img{width:110px;height:110px;object-fit:cover;border:4px solid #ff0;border-radius:0;max-width:none;}
.ss-follow__body{flex:1 1 240px;}
.ss-follow .ss-card-title{color:#0ff;text-shadow:3px 3px red;font-size:1.3rem;}
.ss-follow .text-body-2,.ss-follow .text-callout{color:#ff0;font-family:var(--font-mono);font-weight:700;}

/* ── Retro fence: the stream window keeps its original look ──────────────── */
.retro,.retro *{box-sizing:content-box;}
.retro{font-family:'Courier New',monospace;color:#111;}
.retro a{color:#006600;}
.retro a:hover{color:#000;}
.ss-stream{margin:0 0 var(--space-block);}
.ss-stream table{width:100%;}

/* ── Header (injected by header.js) ─────────────────────────────────────────
 * Wordmark, then the dense nav — blue, uppercase, underlined Times links with
 * a gem between each — then the striped contract bar, then the amber ticker. */
.ss-head{position:relative;background:#000;}
.ss-head__row{display:block;text-align:center;padding:10px 10px 6px;}

.ss-logo{display:block;text-decoration:none;margin:4px 0 6px;}
.ss-logo:hover{text-decoration:none;}
.ss-logo__mark{
  display:block;
  font:900 clamp(2.4rem,6.5vw,4.4rem)/1 var(--font-impact);
  color:var(--lime);letter-spacing:2px;text-transform:uppercase;
  text-shadow:3px 3px #f0f,6px 6px #000,0 0 26px rgba(204,255,0,.5);
}
.ss-logo__sub{
  display:block;margin-top:6px;
  font:700 .8rem var(--font-mono);color:var(--lime);letter-spacing:.35em;text-transform:uppercase;
  text-shadow:2px 2px #000;
}

.ss-nav{
  display:block;
  color:#00f;text-transform:uppercase;text-align:center;overflow-wrap:break-word;
  font:700 16px/1.8 var(--font-body);
  padding:4px 0;
}
.ss-nav .chip{
  display:inline;margin:0 5px;padding:0;height:auto;border-radius:0;background:none;
  color:#00f;font:inherit;text-decoration:underline;white-space:normal;
}
.ss-nav .chip:hover{color:var(--lime);background:none;}
.ss-nav .chip--active{color:var(--lime);background:none;}
.ss-nav .chip--active::before{content:'\2605  ';text-decoration:none;}
.ss-nav__gem{display:inline-block;margin:0 5px;vertical-align:-2px;font-size:15px;filter:saturate(1.6);}
.ss-nav .chip--warn{color:#ff2d2d;animation:ss-blink .9s steps(2,end) infinite;}

/* Contract bar. The address comes from /api/config; until it is set the bar
 * shows "..." and .is-empty dims the COPY button, which does nothing. */
.ss-ca{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;
  width:100%;height:auto;max-width:none;
  background:repeating-linear-gradient(90deg,var(--blue) 0 14px,var(--blue-2) 14px 28px);
  border:0;border-bottom:6px solid var(--amber);border-radius:0;
  padding:9px 12px;cursor:pointer;
  font:inherit;color:#0f0;
}
.ss-ca::before{
  content:'CA';
  color:#000;background:var(--amber);border:2px solid #000;
  padding:3px 10px;font:700 15px var(--font-ui);letter-spacing:1px;
}
.ss-ca__addr{
  color:#0f0;font:700 clamp(.72rem,2.1vw,1.15rem) var(--font-mono);
  text-shadow:2px 2px #000;letter-spacing:.5px;
  max-width:none;overflow:visible;white-space:normal;overflow-wrap:anywhere;word-break:break-all;
}
.ss-ca__copy{
  display:inline-block;width:auto;height:auto;border-radius:0;
  background:var(--win-bg);color:#000;
  border:2px solid #000;border-color:#fff #000 #000 #fff;
  padding:4px 15px;font:700 12px var(--font-ui);text-transform:uppercase;
}
.ss-ca:active .ss-ca__copy{border-color:#000 #fff #fff #000;}
.ss-ca.is-empty{cursor:default;}
.ss-ca.is-empty .ss-ca__addr{color:#7a7a7a;text-shadow:none;letter-spacing:3px;}
.ss-ca.is-empty .ss-ca__copy{opacity:.45;}

/* Ticker */
.ss-ticker{
  white-space:nowrap;overflow:hidden;
  color:var(--amber);text-shadow:2px 2px #630;
  border-bottom:8px solid var(--blue);
  padding:4px 0 7px;margin-bottom:18px;
  font:900 clamp(1.2rem,3.2vw,2.2rem)/1.2 var(--font-marquee);
  text-transform:uppercase;
}
.ss-ticker__track{display:inline-block;padding-left:100%;animation:ss-ticker 26s linear infinite;}
@keyframes ss-ticker{to{transform:translateX(-100%);}}
@keyframes ss-blink{50%{opacity:0;}}
.ss-tagline{display:none;}

/* Page tickers: the header already carries the site ticker, so the per-page
 * <marquee> would be a second amber band right under the first. Hidden. */
.wrap marquee{
  display:none;width:100%;
  background:none!important;border-radius:0;
  border-bottom:8px solid var(--blue);
  color:var(--amber);text-shadow:2px 2px #630;
  font:900 clamp(1.1rem,3vw,1.9rem) var(--font-marquee);text-transform:uppercase;
  padding:4px 0 7px;margin-bottom:var(--space-block);
}
.wrap marquee font{color:var(--amber)!important;font-family:inherit!important;font-size:inherit!important;}

/* ── Radio strip ── */
.ss-radio{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#000;border:4px ridge #f0f;border-radius:0;
  padding:8px 12px;margin-bottom:18px;
  font-family:var(--font-mono);color:#ff0;
}
.ss-radio__now{color:var(--lime);font-weight:700;}
.ss-radio__ctl{display:inline-flex;gap:4px;}
.ss-radio__list{flex:1 1 auto;min-width:180px;color:#ff0;}
.ss-radio__list span{color:#ff0;}

/* ── Floating side windows: Windows-98 dialog chrome ── */
.ss-side{
  position:fixed;top:50%;transform:translateY(-50%);z-index:850;
  width:230px;padding:0;
  background:var(--win-face);color:#000;
  border:4px solid #111;border-color:#fff #111 #111 #fff;border-radius:0;
  box-shadow:8px 8px #000,0 0 32px #f0f;
  font-family:var(--font-ui);
}
.ss-side--left{left:16px;}
.ss-side__bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--title-blue);color:#fff;padding:5px 8px;
}
.ss-side__bar .text-caption{color:#fff!important;font:700 13px var(--font-ui);}
.ss-side__bar .modal-close{
  background:silver;color:#000;
  border:1px solid;border-color:#fff #000 #000 #fff;border-radius:0;
  width:auto;height:auto;padding:1px 6px;font:700 12px var(--font-ui);cursor:pointer;
}
.ss-side__media{display:block;margin:8px;border:3px ridge #ff0;border-radius:0;overflow:hidden;background:#000;}
.ss-side__media img{width:100%;height:160px;object-fit:cover;}
.ss-side__cap{
  display:block;margin:0 8px 8px;padding:5px;
  background:var(--navy);color:#ff0;text-decoration:none;
  font:700 .72rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;text-align:center;
}
.ss-side__cap:hover{color:#fff;}
@media screen and (max-width:1400px){.ss-side{display:none;}}

/* ── Broadcast console: a primitive box ── */
.ss-console{
  max-width:760px;margin:0 auto var(--space-block);
  background:var(--surface-light);
  border:4px ridge #f0f;border-radius:0;box-shadow:none;
  padding:16px;
}
.ss-console__row{display:flex;gap:8px;}
.ss-console__input{flex:1 1 auto;}
.ss-console__status{min-height:20px;padding:10px 2px 12px;color:var(--lime);font:700 13px var(--font-ui);text-shadow:1px 1px #000;}
.ss-console__status font,.ss-console__status span{color:var(--lime);}
.ss-console__log,.ss-console__feed{
  background:#000;border:2px inset #0f0;border-radius:0;
  color:#0f0;font:13px/1.5 var(--font-mono);
}
.ss-console__log{display:none;max-height:120px;overflow-y:auto;padding:8px 10px;margin-bottom:10px;}
.ss-console__feed{max-height:250px;overflow-y:auto;padding:10px 12px;}
.ss-console.is-closed .ss-console__row{opacity:.5;pointer-events:none;}

/* ── Modals: Windows-98 dialogs ── */
.modal-overlay{background:rgba(0,0,0,.76)!important;}
.modal-overlay .modal-win{
  background:var(--win-face);color:#000;
  border:4px solid #111;border-color:#fff #111 #111 #fff;border-radius:0;
  box-shadow:8px 8px #000,0 0 32px #f0f;
  max-width:700px;width:min(700px,100vw - 32px);
  font-family:var(--font-ui);
}
.modal-overlay .modal-titlebar{background:var(--title-blue);padding:8px 10px;cursor:move;}
.modal-overlay .modal-titlebar font{color:#fff;font:700 clamp(.9rem,2.5vw,1.15rem) var(--font-ui);}
.modal-overlay .modal-close{
  background:silver;color:#000;
  border:1px solid;border-color:#fff #000 #000 #fff;border-radius:0;
  width:auto;height:auto;padding:1px 6px;font:700 14px var(--font-ui);line-height:1.3;cursor:pointer;
}
.modal-overlay .modal-close:active{border-color:#000 #fff #fff #000;}
.modal-overlay .modal-body{
  background:#050505;color:#fff;
  padding:22px 24px;font:1rem/1.5 var(--font-body);
}
.modal-overlay .modal-body font{color:#ff0;}
.modal-overlay .modal-body b{color:#ff0;text-shadow:2px 2px red;}
.modal-overlay .modal-body img{border:4px solid #ff0;border-radius:0;margin:10px 0;}
.modal-overlay .modal-body .vid-placeholder{
  background:#000;color:#0ff;
  border:2px dashed #0ff;border-radius:0;
  padding:40px 10px;margin:10px 0;text-align:center;
  font:700 .78rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
}
.vid-placeholder--empty{color:#888!important;border-color:#555!important;}
.vid-placeholder--empty .text-caption{display:block;margin-top:6px;color:#888;}
.modal-overlay .modal-body video{border:5px outset #f0f;background:#000;padding:4px;}

/* ── Legacy attribute bridge ─────────────────────────────────────────────────
 * The pages are HTML4: colour lives in <font color>, bgcolor and bordercolor.
 * The handful of legacy values map onto this palette here rather than being
 * rewritten across hundreds of tags. Scoped to .wrap; .retro keeps its own. */
.wrap table[border],
.wrap table[bordercolor],
.wrap td[bordercolor]{border:none!important;}

.wrap [bgcolor="#c0c0c0"],
.wrap [bgcolor="#d0d0d0"],
.wrap [bgcolor="#bbb"],
.wrap [bgcolor="#ddd"],
.wrap [bgcolor="#e8e8e8"],
.wrap [bgcolor="#c8c8c8"],
.wrap [bgcolor="#999"],
.wrap [bgcolor="#b8b8b8"]{background-color:rgba(0,0,128,.5)!important;}
.wrap [bgcolor="#f8f0ff"],.wrap [bgcolor="#fafaff"],.wrap [bgcolor="#f0f0ff"],
.wrap [bgcolor="#fffff0"],.wrap [bgcolor="#fffaf0"],.wrap [bgcolor="#fff8f0"],
.wrap [bgcolor="#f0fff0"],.wrap [bgcolor="#f0f8ff"]{background-color:rgba(0,0,64,.6)!important;}

.wrap font[color="#000"],
.wrap font[color="#111"],
.wrap font[color="#222"],
.wrap font[color="#333"]{color:#ff0;}
.wrap font[color="#444"],
.wrap font[color="#555"],
.wrap font[color="#666"],
.wrap font[color="#777"],
.wrap font[color="#888"],
.wrap font[color="#999"]{color:#0ff;}
.wrap font[color="#006600"],
.wrap font[color="#060"]{color:#0f0;}
.wrap font[color="#cc0000"],
.wrap font[color="#c00"],
.wrap font[color="#f00"]{color:var(--error);text-shadow:1px 1px #000;}
.wrap font[color="#000080"],
.wrap font[color="#006666"]{color:#0ff;}
.wrap font[color="#0a3"]{color:#0f0;}

.card-dark font,.ss-terminal font,.retro font{color:inherit;}
.ss-terminal font[color="#0f0"]{color:#0f0!important;}

/* Courier stays Courier here — it is the reference's own monospace. */
.wrap font[face="Courier New"]{font-family:var(--font-mono);}

/* Nothing outside .retro may push the page sideways. */
.wrap table{max-width:100%;}
.wrap td,.wrap th{overflow-wrap:anywhere;}
.retro table,.retro td{overflow-wrap:normal;}

/* ── Responsive ── */
@media screen and (max-width:760px){
  .ss-nav{font-size:14px;line-height:1.9;}
  .ss-nav__gem{font-size:13px;margin:0 3px;}
  .ss-ca{gap:8px;padding:8px;}
  .ss-console__row{flex-direction:column;}
  .ss-figure{max-width:100%;}
}