/* ================================================================
   BANGBOWBING — ASCII SIGNAL BUILD
   The 3D bodega is ambient scenery. Navigation is a normal text index.
   Exact glyph density/color tuning is intentionally isolated here so the
   reference video can be matched without touching the site architecture.
   ================================================================ */

:root {
  --ascii-green: #71ff9a;
  --ascii-green-hot: #c5ffd6;
  --ascii-dim: #2eb861;
  --ascii-deep: #07110a;
  --ascii-black: #010302;
  --ascii-line: rgba(113,255,154,.22);
  --ascii-glass: rgba(2,10,5,.74);
}
html, body { background: var(--ascii-black) !important; }
body.ascii-site {
  margin: 0;
  overflow: hidden;
  color: var(--ascii-green);
  color-scheme: dark;
  /* one face for everything; the app kit's Inter / Orbitron / Silkscreen
     tokens resolve to it too, so those fonts are never requested */
  --font-ui: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-pixel: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* the game HUD is hidden in this build; os/scene.css still sizes the phone
     stage by these, which left a 52px dead band under the picture */
  --hud-top: 0px;
  --hud-bottom: 0px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow: 0 0 7px rgba(70,255,126,.12);
  letter-spacing: .01em;
}
/* (two full-screen body::before/::after overlays used to sit here; under
   mix-blend-mode:screen a black vignette draws nothing, and the 2% streak
   was invisible — the stage's own inset vignette is the one that shows) */

/* The scene is image, not interface. overflow:hidden also matters for the
   keyboard: on a phone os/scene.js pans the level by scrolling #scene, and
   Chrome makes a scrollable box keyboard-focusable — so Tab used to land on
   an invisible scroller after the last nav entry. */
body.ascii-site #scene { pointer-events: none !important; background: #000 !important; overflow: hidden !important; }
body.ascii-site #scene-spots { display: none !important; }
body.ascii-site #hud { display: none !important; }
body.ascii-site #pause { display: none !important; }
/* Settings > CRT texture: body.no-crt (os/settings.js) hides it; when it is
   on, faint dark lines — under `screen` black lines drew nothing */
body.ascii-site #crt {
  pointer-events: none;
  opacity: .35;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.55) 2px 3px) !important;
}
/* every scroller, not just .win-body: os.css paints purple gel thumbs */
body.ascii-site * { scrollbar-width: thin; scrollbar-color: rgba(113,255,154,.28) transparent; }
body.ascii-site ::-webkit-scrollbar { width: 8px; height: 8px; }
body.ascii-site ::-webkit-scrollbar-track { background: transparent; }
body.ascii-site ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 0; background: rgba(113,255,154,.28) padding-box; }
body.ascii-site ::-webkit-scrollbar-thumb:hover { background: rgba(113,255,154,.45) padding-box; }

/* The glyph field: a <canvas> painted by os/scene3d/ascii.js (live) or by
   os/ascii-still.js (the still). Colours live in ascii.js's TIERS so both
   are painted from one table; this only places and fades it. */
.scene3d-ascii {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: #000;
  opacity: 0;
  transition: opacity 320ms linear;
  pointer-events: none !important;
  transform: translateZ(0);
}
.scene3d-ascii.is-in { opacity: 1; }
/* In the ASCII build the stage IS the viewport. The photo build sized it to
   the photograph's ratio and covered the screen with it (so a phone drew a
   1193px-wide picture for a 375px screen, and every size carried a 3.5%
   zoom that blurred the glyphs); with no hotspots to keep in photo-percent,
   the canvas is the viewport, pixel for pixel, and scene3d/index.js gives the
   camera the viewport's aspect. Its photo background belongs to the photo
   build too: under the glyph field it was 640 KB of download nobody sees. */
body.ascii-site #scene-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  aspect-ratio: auto !important;
  transform: none !important;
  background-image: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .scene3d-ascii { transition: none; }
  body.ascii-site .win { animation: none !important; }
  .site-nav-link, .site-nav-arrow { transition: none; }
}
/* one focus ring for the whole build (os.css paints a cyan gel one) */
body.ascii-site :focus-visible { outline: 2px solid var(--ascii-green) !important; outline-offset: 2px; border-radius: 1px; }
body.ascii-site.is-3d #scene-stage::after {
  opacity: .62 !important;
  background:
    linear-gradient(180deg, rgba(112,255,154,.018), rgba(0,0,0,.14)),
    repeating-linear-gradient(0deg, rgba(120,255,160,.032) 0 1px, transparent 1px 4px) !important;
  mix-blend-mode: screen;
}
body.ascii-site.is-3d #scene-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(0,0,0,.56), inset 0 0 220px rgba(0,0,0,.32);
}

/* Plain website index. */
#site-nav {
  position: fixed;
  z-index: 300;
  left: clamp(20px, 3vw, 46px);
  top: 50%;
  width: min(340px, calc(100vw - 40px));
  transform: translateY(-50%);
  display: grid;
  gap: 14px;
  pointer-events: auto;
  color: #d7ffe4;
  font-family: inherit;
  padding: 16px 18px 14px;
  /* solid plate: the glyph field behind this rail changes brightness, and a
     gradient that fades to transparent let the menu text disappear with it */
  background: #010803;
  mix-blend-mode: normal;
  isolation: isolate;
  border: 1px solid rgba(113,255,154,.38);
  border-left: 2px solid #8dffb4;
  box-shadow: 0 0 0 1px rgba(0,0,0,.85), 0 18px 50px rgba(0,0,0,.45);
  opacity: 1;
}
.site-nav-head { display: grid; gap: 5px; }
.site-nav-brand {
  margin: 0;
  font-family: inherit;
  font-size: clamp(21px, 2.05vw, 31px);
  line-height: .95;
  letter-spacing: .075em;
  font-weight: 500;
  color: var(--ascii-green-hot);
}
/* the wordmark: assets/logo.png as a mask so it takes the build's green */
.site-nav-logo {
  display: block;
  width: 100%;
  aspect-ratio: 2059 / 385;
  background: var(--ascii-green-hot);
  -webkit-mask: url(../assets/logo.png) left center / contain no-repeat;
  mask: url(../assets/logo.png) left center / contain no-repeat;
  /* luminance, not alpha: the PNG's black outline + drop shadow are opaque,
     so an alpha mask filled them in too (b read as d, g as p) */
  -webkit-mask-source-type: luminance;
  mask-mode: luminance;
  filter: drop-shadow(0 0 9px rgba(113,255,154,.22));
}
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
/* the mark elsewhere (splash, About): the white PNG pushed to green */
body.ascii-site .splash-logo,
body.ascii-site .about-logo {
  width: auto !important;
  height: auto !important;
  max-width: min(64vw, 520px);
  border-radius: 0 !important;
  object-fit: contain !important;
  filter: sepia(1) saturate(3.2) hue-rotate(72deg) brightness(1.08) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
body.ascii-site .about-logo { max-width: 220px; }
.site-nav-sub,
.site-nav-foot,
#site-signal {
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(113,255,154,.58);
  text-transform: uppercase;
}
.site-nav-list { display: grid; gap: 2px; }
.site-nav-link {
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 31px;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid rgba(99,255,141,.15);
  background: transparent;
  color: #e7fff0;
  font: inherit;
  font-size: 13px;
  letter-spacing: .09em;
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: color 90ms linear, padding-left 90ms linear, background 90ms linear, border-color 90ms linear;
}
.site-nav-index { font-size: 10px; color: #8dffb0; white-space: nowrap; }
.site-nav-arrow { opacity: 0; text-align: right; transition: opacity 100ms ease, transform 100ms ease; }
.site-nav-link:hover,
.site-nav-link:focus-visible,
.site-nav-link.is-active {
  color: #f3fff6;
  padding-left: 8px;
  border-color: rgba(113,255,154,.5);
  background: rgba(28, 92, 48, .55);
}
.site-nav-link.is-active {
  box-shadow: inset 3px 0 0 #c8ffd8;
  color: #ffffff;
}
.site-nav-link:hover .site-nav-index,
.site-nav-link.is-active .site-nav-index { color: rgba(151,255,180,.72); }
.site-nav-link:hover .site-nav-arrow,
.site-nav-link:focus-visible .site-nav-arrow,
.site-nav-link.is-active .site-nav-arrow { opacity: 1; transform: translateX(2px); }
.site-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: -19px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--ascii-green-hot);
  box-shadow: 0 0 8px rgba(113,255,154,.65);
}
.site-nav-foot { display: flex; gap: 14px; flex-wrap: wrap; line-height: 1.5; }
.site-nav-classic { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-nav-classic:hover,
.site-nav-classic:focus-visible { color: var(--ascii-green-hot); }
.site-nav-social { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.site-nav-social a { color: rgba(113,255,154,.62); text-decoration: none; }
.site-nav-social a::after { content: " ↗"; opacity: .6; }
.site-nav-social a:hover,
.site-nav-social a:focus-visible { color: var(--ascii-green-hot); }

.site-nav-purpose {
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .02em;
  text-transform: none;
  color: #d9ffe6;
}
.site-nav-purpose span { display: block; }
.site-player-face { display: grid; place-items: center; gap: 0; }
.site-player-you {
  font-size: 8px;
  letter-spacing: .14em;
  line-height: 1;
  color: #d9ffe6;
}
.site-sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid rgba(113,255,154,.45);
  background: #02140a;
  color: #e7fff0;
  font: inherit;
  font-size: 11px;
  letter-spacing: .16em;
  cursor: pointer;
}
.site-sound-mark { font-size: 13px; line-height: 1; }
.site-sound:hover,
.site-sound:focus-visible { color: #ffffff; border-color: #c8ffd8; }
.site-sound[aria-pressed="true"] { color: #9dffb8; }


#site-signal {
  position: fixed;
  z-index: 299;
  top: 16px;
  right: 20px;
  display: flex;
  gap: 18px;
  pointer-events: none;
  color: rgba(155,255,183,.7);
  text-shadow: 0 0 3px #000, 0 0 8px #000;
}

/* ---- the player card: who you are, coins, level (opens PROFILE) ---- */
.site-player {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px 8px 8px;
  border: 1px solid rgba(113,255,154,.18);
  border-radius: 1px;
  background: rgba(0,9,3,.42);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.site-player:hover,
.site-player:focus-visible,
.site-player.is-active {
  border-color: rgba(113,255,154,.42);
  background: rgba(30,110,52,.14);
}
.site-player.is-open { border-left: 2px solid var(--ascii-green); }
.site-player-face {
  display: grid;
  place-items: center;
  align-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(113,255,154,.55);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #e7fff0;
  background: #02140a;
}
.site-player-col { display: grid; gap: 4px; min-width: 0; }
.site-player-top,
.site-player-bot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.site-player-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: .12em;
  color: #e2ffe9;
}
.site-player-stat {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(113,255,154,.72);
  white-space: nowrap;
}
.site-player-level { padding: 2px 5px; border: 1px solid rgba(113,255,154,.26); color: var(--ascii-green); }
.site-player.is-guest .site-player-coins { text-decoration: underline; text-underline-offset: 3px; }
.site-player-xp {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  min-width: 30px;
  background: rgba(113,255,154,.14);
}
.site-player-xp i { position: absolute; inset: 0 auto 0 0; background: var(--ascii-green); }
.site-player-xp[hidden] { display: none; }
/* open-window marks on the directory: dot = open, dash = minimised */
.site-nav-link.is-open .site-nav-index::after { content: " \25CF"; color: var(--ascii-green); font-size: 7px; vertical-align: 1px; }
.site-nav-link.is-min .site-nav-index::after { content: " _"; color: rgba(113,255,154,.7); }

/* (panel chrome lives in the SITE PAGES block below) */

/* Boot becomes a terse terminal handoff rather than a game splash. */
body.ascii-site #boot { background: #000 !important; color: var(--ascii-green) !important; }
body.ascii-site .splash-bg,
body.ascii-site .splash-sun { display: none !important; }
/* the wordmark on the splash (os/boot.js un-hides it once assets/logo.png answers) */
body.ascii-site .splash-logo { display: block; margin: 0 auto 18px; }
body.ascii-site .splash-logo[hidden] { display: none !important; }
body.ascii-site .splash-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ascii-green) !important;
  font-family: inherit !important;
}
body.ascii-site .splash-word { color: var(--ascii-green) !important; font-family: inherit !important; text-shadow: 0 0 10px rgba(80,255,120,.24) !important; }

@media (max-width: 759px) {
  /* Bottom directory, not a left rail and not a full-screen sheet.
     The seven entries sit in one thumb row (swipe to move; nothing is
     removed). Socials and CLASSIC SITE stay on the next row. The plate
     stays opaque while the glyph field moves. */
  #site-nav {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-height: none;
    transform: none;
    gap: 6px;
    overflow: visible;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #010803;
    border: 0;
    border-top: 2px solid #8dffb4;
    border-radius: 0;
    box-shadow: 0 -18px 40px rgba(0,0,0,.55);
  }
  .site-nav-head { gap: 2px; }
  .site-nav-brand { font-size: 14px; }
  .site-nav-logo { width: min(148px, 42vw); }
  .site-nav-sub { display: none; }
  .site-nav-purpose { font-size: 11px; line-height: 1.35; gap: 2px; }
  .site-player {
    padding: 4px 8px;
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 44px;
  }
  .site-player-face { width: 36px; height: 36px; font-size: 13px; }
  .site-player-col { gap: 0; }
  .site-player-name { font-size: 12px; }
  .site-player-xp, .site-player-bot { display: none; }
  .site-sound { min-height: 44px; justify-self: end; }
  .site-nav-list {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .site-nav-link {
    flex: 0 0 auto;
    width: auto;
    min-width: 112px;
    min-height: 44px;
    scroll-snap-align: start;
    font-size: 13px;
    letter-spacing: .1em;
    grid-template-columns: 22px 1fr auto;
    padding: 0 8px;
    border: 1px solid rgba(113,255,154,.28);
    color: #f3fff6;
  }
  .site-nav-link.is-active {
    background: rgba(36, 130, 68, .85);
    border-color: #c8ffd8;
  }
  .site-nav-link.is-active::after { display: none; }
  .site-nav-foot { gap: 8px; justify-content: flex-start; font-size: 12px; }
  .site-nav-foot > span { display: none; }
  .site-nav-social {
    flex-wrap: wrap;
    gap: 0 14px;
    font-size: 12px;
    letter-spacing: .1em;
  }
  .site-nav-social a {
    color: #c8ffd8;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }
  body.ascii-site .radio { padding: 14px !important; }
  #site-signal { top: 10px; right: 10px; font-size: 9px; }
  #site-signal span:first-child { display: none; }
}

/* ======================================================================
   SITE PAGES — the old app machinery rendered as one ordinary website.
   This block intentionally overrides every glossy/game-era primitive.
   ====================================================================== */
body.ascii-site #panels {
  position: fixed !important;
  z-index: 240 !important;
  inset: 54px 38px 42px clamp(390px, 31vw, 470px) !important;
  pointer-events: none;
}
/* A WINDOW. os/wm.js writes left/top/width/height inline (drag, resize,
   smart placement); this only dresses it. Several can be open at once and
   the bodega shows between them. */
body.ascii-site .win {
  position: absolute !important;
  min-width: 260px;
  min-height: 150px;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(113,255,154,.20) !important;
  border-radius: 2px !important;
  background:
    linear-gradient(145deg, rgba(3,13,6,.92), rgba(0,5,2,.86) 62%, rgba(0,0,0,.92)) !important;
  box-shadow: 0 24px 100px rgba(0,0,0,.52), inset 0 1px rgba(190,255,208,.025) !important;
  backdrop-filter: blur(10px) saturate(.55) !important;
  animation: sitePageIn 150ms ease-out !important;
  pointer-events: auto;
}
body.ascii-site .win.is-max { inset: 0 !important; width: auto !important; height: auto !important; }
body.ascii-site .win.is-min { animation: winOut 0.14s ease forwards !important; }
@keyframes sitePageIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
/* after the rule above in source order, so it wins the !important tie */
@media (prefers-reduced-motion: reduce) {
  body.ascii-site .win { animation: none !important; }
}
/* the window takes focus on open for keyboard / screen-reader visitors; the
   ring belongs on the controls inside it, not around the frame */
body.ascii-site .win:focus,
body.ascii-site .win:focus-visible { outline: none !important; }
body.ascii-site .win.is-focused {
  border-color: #b6ffc8 !important;
  box-shadow: 0 0 0 1px #b6ffc8, 0 0 24px rgba(80,255,140,.18), 0 28px 110px rgba(0,0,0,.72) !important;
  opacity: 1 !important;
}
body.ascii-site .win.is-focused .win-title { color: #f4fff7 !important; }
body.ascii-site .win:not(.is-focused) {
  /* .22 on black measured 1.75:1 against #e2ffe9. .62 clears 4.5:1 and stays dimmer than the focused window. */
  opacity: .62 !important;
  pointer-events: none;
}
body.ascii-site .win.is-min {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Title bar: the drag handle, the name, three text controls. */
body.ascii-site .win-tb {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 11px 12px 10px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(113,255,154,.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
body.ascii-site .win-tb::after { display: none !important; }
body.ascii-site .win-tb:active { cursor: grabbing; }
body.ascii-site .win.is-max .win-tb { cursor: default; }
body.ascii-site .win-tb > .ico { display: none !important; }
body.ascii-site .win-btns { display: flex !important; gap: 5px; margin-left: auto; }
body.ascii-site .wb {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  min-width: 26px;
  padding: 4px 8px !important;
  border: 1px solid rgba(113,255,154,.26) !important;
  border-radius: 1px !important;
  background: rgba(0,9,3,.6) !important;
  color: var(--ascii-green) !important;
  font: inherit !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: none !important;
  opacity: 1 !important;
}
body.ascii-site .wb::after { display: none !important; }
body.ascii-site .wb svg { display: none !important; }
body.ascii-site .wb-min::before { content: "_"; }
body.ascii-site .wb-max::before { content: "[ ]"; }
body.ascii-site .win.is-max .wb-max::before { content: "[=]"; }
body.ascii-site .wb-close::before { content: "CLOSE"; }
body.ascii-site .wb:hover,
body.ascii-site .wb:focus-visible {
  color: #effff3 !important;
  border-color: rgba(113,255,154,.5) !important;
  background: rgba(39,120,61,.2) !important;
}
body.ascii-site .win:not(.is-focused) .wb { color: rgba(113,255,154,.7) !important; }
/* resize handles: os.css places them; make the corner one findable */
body.ascii-site .rs-se::after {
  content: "";
  position: absolute; right: 3px; bottom: 3px;
  width: 7px; height: 7px;
  border-right: 1px solid rgba(113,255,154,.45);
  border-bottom: 1px solid rgba(113,255,154,.45);
}

body.ascii-site .win .win-title {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: .19em !important;
  text-transform: uppercase;
  color: rgba(155,255,183,.72) !important;
}
body.ascii-site .win .win-title-mark { color: rgba(113,255,154,.34); }
body.ascii-site .win .win-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #d4ffdf !important;
  box-shadow: none !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(113,255,154,.28) transparent;
}
/* the status strip stays, as a thin terminal footer: connection state,
   presence, page counts have nowhere else to go */
body.ascii-site .win .win-status {
  display: flex !important;
  gap: 18px;
  flex: 0 0 auto;
  padding: 7px 22px !important;
  border: 0 !important;
  border-top: 1px solid rgba(113,255,154,.10) !important;
  background: transparent !important;
  color: rgba(113,255,154,.58) !important;
  font-family: inherit !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
body.ascii-site .win .win-status span {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  text-shadow: none !important;
}
body.ascii-site .win .win-status span:empty { display: none; }

/* Shared content primitives. */
body.ascii-site .pad { padding: 22px !important; }
body.ascii-site .screen,
body.ascii-site .win-body.sunk {
  background: transparent !important;
  color: #d4ffdf !important;
  box-shadow: none !important;
}
body.ascii-site .app-col { gap: 18px !important; }
body.ascii-site .sect {
  padding: 0 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(113,255,154,.10) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.ascii-site .kicker,
body.ascii-site .field-label,
body.ascii-site fieldset.group legend {
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .17em !important;
  color: rgba(113,255,154,.58) !important;
  text-transform: uppercase;
}
body.ascii-site .app-h,
body.ascii-site h1,
body.ascii-site h2,
body.ascii-site h3 {
  font-family: inherit !important;
  color: #e2ffe9 !important;
  text-shadow: none !important;
}
body.ascii-site .hint,
body.ascii-site .dim {
  color: rgba(190,255,207,.52) !important;
}
body.ascii-site .holo {
  background: none !important;
  color: var(--ascii-green-hot) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Controls: simple terminal-web controls, no gel/chrome. :where() zeroes the
   selector's weight — the five :not() classes used to give this generic rule
   (0,6,1), so .btn.primary, .tab.on, the home directory rows and the radio
   list all lost to it and rendered as the same plain button. */
body.ascii-site :where(.btn, .tab, button:not(.site-nav-link):not(.gal-tile):not(.prod-artbtn):not(.postrow):not(.pj-row)) {
  border-radius: 1px !important;
  border: 1px solid rgba(113,255,154,.22) !important;
  background: rgba(9,28,14,.38) !important;
  box-shadow: none !important;
  color: rgba(207,255,220,.78) !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  transition: background 90ms ease, color 90ms ease, border-color 90ms ease !important;
}
body.ascii-site .btn::before { display: none !important; }
body.ascii-site :where(.btn:hover:not(:disabled), .tab:hover, button:hover:not(:disabled)) {
  filter: none !important;
  transform: none !important;
  color: #effff3 !important;
  border-color: rgba(113,255,154,.46) !important;
  background: rgba(39,120,61,.20) !important;
}
body.ascii-site .btn.primary,
body.ascii-site .btn.on,
body.ascii-site .tab.on,
body.ascii-site button[aria-pressed="true"] {
  color: #031006 !important;
  background: var(--ascii-green) !important;
  border-color: var(--ascii-green) !important;
}
body.ascii-site .btn.primary:hover:not(:disabled) { background: var(--ascii-green-hot) !important; border-color: var(--ascii-green-hot) !important; color: #031006 !important; }
body.ascii-site .btn:disabled,
body.ascii-site button:disabled { opacity: .5 !important; }
body.ascii-site .tabs {
  gap: 0 !important;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(113,255,154,.10);
}
body.ascii-site .tab {
  flex: 0 0 auto !important;
  padding: 7px 11px !important;
  border-right: 0 !important;
}
body.ascii-site .tab:last-child { border-right: 1px solid rgba(113,255,154,.22) !important; }
body.ascii-site .input,
body.ascii-site .inp,
body.ascii-site input,
body.ascii-site select,
body.ascii-site textarea {
  border-radius: 1px !important;
  border: 1px solid rgba(113,255,154,.22) !important;
  background: rgba(0,8,3,.72) !important;
  box-shadow: none !important;
  color: #d8ffe2 !important;
  font-family: inherit !important;
  accent-color: var(--ascii-green);
}
body.ascii-site .input:focus,
body.ascii-site .inp:focus,
body.ascii-site input:focus,
body.ascii-site select:focus,
body.ascii-site textarea:focus {
  outline: 1px solid rgba(113,255,154,.62) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}
body.ascii-site fieldset.group {
  margin: 0 0 22px !important;
  padding: 16px 0 18px !important;
  border: 0 !important;
  border-top: 1px solid rgba(113,255,154,.14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.ascii-site fieldset.group legend { padding: 0 10px 0 0 !important; }
/* os.css paints .check in the light theme's ink (near-black): invisible here */
body.ascii-site .check { color: #d4ffdf !important; font-size: 12px !important; letter-spacing: .04em; }
body.ascii-site .check input { accent-color: var(--ascii-green) !important; }
body.ascii-site select {
  appearance: none;
  -webkit-appearance: none;
  padding: 5px 26px 5px 8px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2371ff9a' stroke-width='1.4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
}
body.ascii-site select option { background: #020b04; color: #d8ffe2; }
/* game-era primitives that leaked through: the amber offline card, the
   silver transport bar, the purple About card, the Windows sign-in dialog */
body.ascii-site .offline-note {
  border-radius: 1px !important;
  border: 1px solid rgba(113,255,154,.16) !important;
  border-left: 2px solid rgba(113,255,154,.55) !important;
  background: rgba(20,65,31,.10) !important;
  color: rgba(205,255,219,.72) !important;
  font-family: inherit !important;
  font-size: 12px !important;
}
body.ascii-site .offline-note strong { color: var(--ascii-green) !important; font-weight: 500 !important; }
body.ascii-site .radio-ctl {
  background: rgba(0,7,2,.6) !important;
  border-top: 1px solid rgba(113,255,154,.14) !important;
}
body.ascii-site .vol { accent-color: var(--ascii-green); }
body.ascii-site .vol::-webkit-slider-runnable-track { height: 3px !important; border-radius: 0 !important; background: rgba(113,255,154,.25) !important; box-shadow: none !important; }
body.ascii-site .vol::-webkit-slider-thumb { width: 9px !important; height: 13px !important; margin-top: -5px !important; border-radius: 0 !important; border: 0 !important; background: var(--ascii-green) !important; background-image: none !important; box-shadow: none !important; }
body.ascii-site .vol::-moz-range-track { height: 3px; background: rgba(113,255,154,.25); border: 0; }
body.ascii-site .vol::-moz-range-thumb { width: 9px; height: 13px; border-radius: 0; border: 0; background: var(--ascii-green); }
body.ascii-site .about {
  border-radius: 1px !important;
  border: 1px solid rgba(113,255,154,.14) !important;
  background: rgba(0,9,3,.42) !important;
  box-shadow: none !important;
}
body.ascii-site .dlg-back { background: rgba(0,3,1,.78) !important; backdrop-filter: blur(6px); }
body.ascii-site .dlg {
  border-radius: 2px !important;
  border: 1px solid rgba(113,255,154,.26) !important;
  background: rgba(0,7,3,.97) !important;
  color: #d4ffdf !important;
  box-shadow: 0 24px 100px rgba(0,0,0,.6) !important;
  padding: 0 !important;
  font-family: inherit !important;
}
body.ascii-site .dlg-tb {
  background: transparent !important;
  color: var(--ascii-green) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(113,255,154,.14) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  font-family: inherit !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}
body.ascii-site .dlg-tb::after { display: none !important; }
body.ascii-site .dlg-title { color: var(--ascii-green) !important; font-family: inherit !important; }
body.ascii-site .dlg .wb,
body.ascii-site .dlg .wb-x {
  border-radius: 1px !important;
  border: 1px solid rgba(113,255,154,.26) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--ascii-green) !important;
  box-shadow: none !important;
}
body.ascii-site .dlg .wb { border: 0 !important; }
body.ascii-site .dlg-body { padding: 16px !important; background: transparent !important; }
body.ascii-site .dlg .field-label { color: rgba(113,255,154,.58) !important; }
body.ascii-site .dlg-note { color: rgba(190,255,207,.52) !important; }
body.ascii-site .dlg-err { color: #ffb3b3 !important; }
body.ascii-site .badge,
body.ascii-site .rtag {
  border-radius: 1px !important;
  border: 1px solid rgba(113,255,154,.22) !important;
  background: rgba(0,9,3,.62) !important;
  box-shadow: none !important;
  color: rgba(157,255,184,.72) !important;
  font-family: inherit !important;
  font-size: 10px !important;
}
body.ascii-site .badge.live { color: #dffff0 !important; border-color: rgba(113,255,154,.52) !important; }
body.ascii-site .notice,
body.ascii-site .flashline {
  border-radius: 1px !important;
  border: 1px solid rgba(113,255,154,.16) !important;
  background: rgba(20,65,31,.10) !important;
  color: rgba(205,255,219,.68) !important;
}

/* INDEX */
body.ascii-site .home-index {
  min-height: 100%;
  box-sizing: border-box;
  padding: clamp(26px, 5vw, 64px);
  display: grid;
  align-content: center;
  gap: 26px;
  max-width: 860px;
}
.home-index-hero { max-width: 700px; }
.home-index-eyebrow {
  margin-bottom: 18px;
  font-size: 10px;
  letter-spacing: .20em;
  color: rgba(113,255,154,.58);
}
.home-index-hero .home-index-title {
  margin: 0;
  font-size: clamp(36px, 6vw, 78px) !important;
  line-height: .9;
  letter-spacing: -.035em;
  font-weight: 500;
}
.home-index-lead {
  max-width: 620px;
  margin: 20px 0 0;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.75;
  color: rgba(207,255,220,.68);
}
.home-index-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 10px;
  letter-spacing: .15em;
  color: rgba(113,255,154,.58);
}
.home-index-signal.is-live { color: var(--ascii-green-hot); }
.home-index-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(113,255,154,.14);
  max-width: 820px;
}
body.ascii-site .home-index-entry {
  display: grid !important;
  grid-template-columns: 26px 1fr 14px !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 15px 10px 15px 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(113,255,154,.11) !important;
  background: transparent !important;
  text-align: left !important;
}
.home-index-entry:nth-child(odd) { margin-right: 20px; }
.home-index-num { font-size: 10px; color: rgba(113,255,154,.58); }
.home-index-copy { display: grid; gap: 5px; }
.home-index-copy strong { font-size: 11px; font-weight: 500; color: #dcffe5; letter-spacing: .08em; }
.home-index-copy span { font-size: 10px; line-height: 1.45; color: rgba(190,255,207,.55); text-transform: none; letter-spacing: 0; }
.home-index-go { opacity: .3; color: var(--ascii-green); }
.home-index-entry:hover .home-index-go { opacity: 1; }
.home-index-note { font-size: 10px; color: rgba(113,255,154,.58); letter-spacing: .08em; }

/* TV */
body.ascii-site .tv-app { min-height: 100%; padding: 22px; gap: 18px; }
body.ascii-site .tvstage {
  border-radius: 1px !important;
  border: 1px solid rgba(113,255,154,.16) !important;
  background: #000 !important;
  box-shadow: none !important;
}
body.ascii-site .tvhud,
body.ascii-site .tvbar,
body.ascii-site .votepanel { background: rgba(0,8,3,.72) !important; border-color: rgba(113,255,154,.15) !important; }
body.ascii-site .bars { filter: grayscale(1) contrast(1.5) sepia(.8) hue-rotate(70deg) saturate(2); opacity: .34; }

/* the TV testcard was still the game-era card: amber kicker, navy box */
body.ascii-site .tc-box {
  border-radius: 1px !important;
  border: 1px solid rgba(113,255,154,.22) !important;
  background: rgba(0,7,3,.9) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.ascii-site .tc-kicker { color: rgba(113,255,154,.62) !important; font-family: inherit !important; letter-spacing: .16em; }
body.ascii-site .tc-box p { color: rgba(207,255,220,.72) !important; font-family: inherit !important; }

/* AUDIO */
body.ascii-site .radio { min-height: 100%; padding: 22px; box-sizing: border-box; background: transparent !important; }
body.ascii-site .radio > * { min-width: 0; }
body.ascii-site .radio-list .n,
body.ascii-site .radio-list .ph { color: rgba(113,255,154,.58) !important; font-family: inherit !important; font-size: 10px !important; }
body.ascii-site .radio-ctl { flex-wrap: wrap; }
body.ascii-site .radio-ctl .btn { flex: 0 0 auto; white-space: nowrap; }
body.ascii-site .radio-ctl .vol { flex: 1 1 60px; min-width: 40px; width: auto !important; }
body.ascii-site .radio-now {
  border: 0 !important;
  border-bottom: 1px solid rgba(113,255,154,.13) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.ascii-site .radio-cover { border-radius: 1px !important; filter: none !important; }
body.ascii-site .radio-title { color: #e2ffe9 !important; font-family: inherit !important; }
body.ascii-site .radio-eq i { background: var(--ascii-green) !important; border-radius: 0 !important; }
body.ascii-site .radio-list { padding: 6px 0 !important; }
body.ascii-site .radio-list li { border-bottom: 1px solid rgba(113,255,154,.08); }
body.ascii-site .radio-list button { border: 0 !important; background: transparent !important; text-transform: none !important; }
body.ascii-site .radio-list li.on button { background: rgba(45,140,69,.13) !important; }

/* CHAT — the room with the GAMES rail beside it (stacked under it when the
   window is narrow: a container query on .chat-app, not the viewport) */
body.ascii-site .chat-app {
  display: flex !important;
  flex-direction: row;
  height: 100%;
  min-height: 100%;
  background: transparent !important;
}
body.ascii-site .chat-main { flex: 1 1 auto; min-width: 0 !important; border: 0 !important; }
body.ascii-site .games-rail {
  display: flex !important;
  flex: 0 0 216px;
  border-left: 1px solid rgba(113,255,154,.12) !important;
  border-top: 0 !important;
  background: rgba(0,6,2,.45) !important;
  max-height: none;
}
/* (the nearest container: the window body, or .tv-room inside TV) */
@container (max-width: 619px) {
  body.ascii-site .chat-app { flex-direction: column; }
  body.ascii-site .games-rail {
    flex: 0 0 auto;
    max-height: 42%;
    border-left: 0 !important;
    border-top: 1px solid rgba(113,255,154,.12) !important;
  }
}
body.ascii-site .rail-head,
body.ascii-site .rail-feed-head {
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .17em;
  color: rgba(113,255,154,.58) !important;
  text-transform: uppercase;
}
body.ascii-site .rail-tab {
  border-radius: 1px !important;
  border: 1px solid rgba(113,255,154,.16) !important;
  background: transparent !important;
  color: rgba(113,255,154,.7) !important;
  font-family: inherit !important;
  font-size: 9.5px !important;
  letter-spacing: .1em;
}
body.ascii-site .rail-tab.on { color: #e2ffe9 !important; border-color: rgba(113,255,154,.5) !important; background: rgba(30,110,52,.16) !important; }
body.ascii-site .rail-result { color: rgba(190,255,207,.52) !important; }
body.ascii-site .rail-cta .hint { text-align: center; font-size: 11px; }
/* TV / LIVE: the picture, then the room and its games */
body.ascii-site .win .win-body { container-type: inline-size; }
body.ascii-site .tv-live {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
}
body.ascii-site .tv-live > .tv-app { overflow: auto; min-height: 0; align-content: start; }
/* tv.css's own container query names .tv-app, which is the container itself:
   its column rule never lands but its grid-column ones do, splitting the
   picture into an implicit second column. One column, always. */
body.ascii-site .tv-app { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; }
body.ascii-site .tv-app .tvstage,
body.ascii-site .tv-app .tv-side { grid-column: 1 !important; grid-row: auto !important; }
body.ascii-site .tv-room {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-left: 1px solid rgba(113,255,154,.12);
}
body.ascii-site .tv-room > .chat-app { flex: 1 1 auto; min-height: 0; }
@container (max-width: 699px) {
  body.ascii-site .tv-live { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content minmax(240px, 1fr); }
  body.ascii-site .tv-live > .tv-app { overflow: visible; }
  body.ascii-site .tv-room { border-left: 0; border-top: 1px solid rgba(113,255,154,.12); }
}
body.ascii-site .tv-app .tvstage { border-radius: 1px !important; border-color: rgba(113,255,154,.16) !important; box-shadow: none !important; }
body.ascii-site .msgs { background: transparent !important; }
body.ascii-site .msg {
  border: 0 !important;
  border-bottom: 1px solid rgba(113,255,154,.075) !important;
  background: transparent !important;
}
body.ascii-site .msg.mention { background: rgba(58,170,84,.08) !important; }
body.ascii-site .av { border-radius: 1px !important; filter: grayscale(.85) sepia(.2) hue-rotate(70deg); }
body.ascii-site .uname { color: #dffff0 !important; font-family: inherit !important; }
body.ascii-site .chat-input { border-top: 1px solid rgba(113,255,154,.12) !important; background: rgba(0,7,2,.70) !important; }
body.ascii-site .guestbar,
body.ascii-site .chat-banner { background: rgba(17,60,28,.12) !important; border-color: rgba(113,255,154,.14) !important; }

/* STORE */
body.ascii-site .store { background: transparent !important; }
body.ascii-site .prods { gap: 12px !important; }
body.ascii-site .prod {
  border-radius: 1px !important;
  border: 1px solid rgba(113,255,154,.13) !important;
  background: rgba(0,9,3,.42) !important;
  box-shadow: none !important;
}
body.ascii-site .prod:hover { border-color: rgba(113,255,154,.30) !important; transform: none !important; }
body.ascii-site .prod-art,
body.ascii-site .prod-artbtn { border-radius: 0 !important; }
body.ascii-site .prod-art { filter: none !important; }
body.ascii-site .prod-sticker {
  border-radius: 1px !important;
  background: rgba(0,10,3,.78) !important;
  border: 1px solid rgba(113,255,154,.22) !important;
  color: #d8ffe2 !important;
  transform: none !important;
  box-shadow: none !important;
}
body.ascii-site .prod-title { color: #e2ffe9 !important; }
body.ascii-site .prod-desc { color: rgba(190,255,207,.53) !important; }

/* WIRE */
body.ascii-site .posts { background: transparent !important; }
body.ascii-site .postrow {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(113,255,154,.10) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.ascii-site button.postrow:hover { background: rgba(42,130,65,.08) !important; }
body.ascii-site .post-date strong { color: #dffff0 !important; font-family: inherit !important; font-weight: 400 !important; }
body.ascii-site .post-date span { color: rgba(113,255,154,.58) !important; font-family: inherit !important; }
body.ascii-site .post-main h3 { font-weight: 500 !important; }
body.ascii-site .post-body p { color: rgba(207,255,220,.62) !important; }
body.ascii-site .post-thumb { border-radius: 1px !important; filter: grayscale(.65) contrast(1.05); }

/* GALLERY */
body.ascii-site .gal-grid { gap: 9px !important; }
body.ascii-site .gal-tile {
  border-radius: 1px !important;
  border: 1px solid rgba(113,255,154,.12) !important;
  background: rgba(0,7,2,.5) !important;
  box-shadow: none !important;
  color: #d8ffe2 !important;
}
body.ascii-site .gal-tile:hover { transform: none !important; border-color: rgba(113,255,154,.36) !important; }
body.ascii-site .gal-art { filter: none !important; }
body.ascii-site .gal-title { color: #ddffe6 !important; font-family: inherit !important; }
body.ascii-site .gal-when { color: rgba(113,255,154,.58) !important; }

/* PROJECTS — film tiles: the clip's first frame shows dim, full on hover/tap */
body.ascii-site .pj { background: transparent !important; }
body.ascii-site .pj-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 12px !important;
  padding: 16px 22px !important;
}
body.ascii-site .pj-list li {
  padding: 0 !important;
  grid-column: auto !important;
  border: 1px solid rgba(113,255,154,.14) !important;
  background: #000 !important;
  overflow: hidden;
  transition: border-color 150ms ease;
}
body.ascii-site .pj-list li.hot { border-color: rgba(113,255,154,.46) !important; }
body.ascii-site .pj-tile { aspect-ratio: 16 / 9 !important; min-height: 120px; transform: none !important; box-shadow: none !important; }
body.ascii-site .pj.focusing .pj-tile:not(.hot) { opacity: 1 !important; filter: none !important; }
body.ascii-site .pj-vid { filter: none !important; opacity: .42 !important; transform: none !important; transition: opacity .35s ease; }
body.ascii-site .pj-list li.hot .pj-vid { opacity: 1 !important; }
body.ascii-site .pj-tile-shade { background: linear-gradient(180deg, transparent 45%, rgba(0,4,1,.88)) !important; }
body.ascii-site .pj-row,
body.ascii-site .pj.focusing .pj-row,
body.ascii-site .pj.focusing .pj-list li.hot .pj-row {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 18px 12px 10px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  align-items: baseline !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(210,255,222,.72) !important;
  font-family: inherit !important;
  text-transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  cursor: pointer;
}
body.ascii-site .pj-num,
body.ascii-site .pj-meta { color: rgba(113,255,154,.7) !important; font-family: inherit !important; font-size: 9px !important; letter-spacing: .14em; min-width: 0 !important; }
body.ascii-site .pj-title { flex: 1 1 auto; min-width: 0; font-size: 14px !important; color: #e3ffea !important; font-family: inherit !important; font-weight: 500 !important; letter-spacing: .06em; -webkit-text-stroke: 0 !important; text-shadow: none !important; }
body.ascii-site .pj-list li.hot .pj-title { color: #fff !important; }
body.ascii-site .pj-foot { position: static !important; padding: 0 22px 14px !important; background: none !important; color: rgba(113,255,154,.58) !important; font-family: inherit !important; font-size: 10px !important; letter-spacing: .16em; }

/* ABOUT */
body.ascii-site .story-app { max-width: 760px !important; padding: clamp(28px,5vw,64px) !important; }
body.ascii-site .story-kicker { margin-bottom: 18px; font-size: 10px; letter-spacing: .2em; color: rgba(113,255,154,.58); }
body.ascii-site .story-h { margin: 0 !important; font-size: clamp(38px,6vw,72px) !important; line-height: .95; font-weight: 500 !important; letter-spacing: -.035em !important; }
body.ascii-site .story-lead { margin: 22px 0 !important; max-width: 650px; color: rgba(216,255,226,.75) !important; line-height: 1.7; }
body.ascii-site .story-body { max-width: 680px; }
body.ascii-site .story-body p { font-size: 13px !important; line-height: 1.85 !important; color: rgba(198,255,214,.58) !important; }
body.ascii-site .story-links { display: flex; gap: 8px; margin-top: 28px; }
body.ascii-site .story-door { padding: 9px 12px !important; }
body.ascii-site .story-social { margin-top: 30px; display: grid; gap: 10px; }
body.ascii-site .story-social-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
body.ascii-site .story-social-row a { color: rgba(207,255,220,.78); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
body.ascii-site .story-social-row a:hover,
body.ascii-site .story-social-row a:focus-visible { color: var(--ascii-green-hot); }

/* SETTINGS */
body.ascii-site .settings-page { max-width: 760px; }
body.ascii-site .about-word { font-family: inherit !important; color: #dffff0 !important; letter-spacing: .08em; }

/* 760-980: the nav narrows so the page column keeps its width */
@media (max-width: 980px) and (min-width: 760px) {
  #site-nav { width: min(272px, calc(100vw - 40px)); padding: 14px 14px 12px; }
  .site-nav-brand { font-size: 20px; }
  body.ascii-site #panels { left: 318px !important; right: 20px !important; }
}
/* short viewports (a phone on its side, a small laptop with the dock up):
   a nav centred at full height would lose its top entries off-screen, so it
   docks to the top and scrolls instead */
@media (max-height: 600px) and (min-width: 760px) {
  #site-nav {
    top: 12px;
    transform: none;
    max-height: calc(100vh - 24px);
    overflow: auto;
    overscroll-behavior: contain;
    gap: 8px;
    padding: 10px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(113,255,154,.28) transparent;
  }
  .site-nav-brand { font-size: 18px; }
  .site-nav-link { min-height: 28px; font-size: 12px; padding: 0; }
  .site-nav-purpose { font-size: 11px; }
  #site-signal { display: none; }
  body.ascii-site #panels { inset: 12px 16px 12px clamp(318px, 31vw, 470px) !important; }
}
@media (max-width: 759px) {
  body.ascii-site #panels {
    /* the nav docks to the bottom; site-nav.js publishes its height */
    inset: 42px 10px calc(var(--site-nav-h, 200px) + max(14px, env(safe-area-inset-bottom)) + 10px) 10px !important;
  }
  /* a phone window is the whole page column: the WM maximises it */
  body.ascii-site .win { inset: 0 !important; max-width: none; }
  body.ascii-site .win-tb { padding: 12px 14px 10px !important; }
  body.ascii-site .pad { padding: 14px !important; }
  body.ascii-site .home-index { padding: 20px 16px; gap: 18px; align-content: start; }
  .home-index-directory { grid-template-columns: 1fr; }
  .home-index-entry:nth-child(odd) { margin-right: 0; }
  body.ascii-site .home-index-hero .home-index-title { font-size: 34px !important; }
  body.ascii-site .story-app { padding: 22px 16px !important; }
  body.ascii-site .story-h { font-size: 38px !important; }
  /* TV / LIVE: picture, chat input and games rail flow in the window's own
     scroller instead of a 100px nested rail; the chat log stays bounded */
  body.ascii-site .tv-live { height: auto; }
  body.ascii-site .tv-room .games-rail { max-height: none; overflow: visible; }
  body.ascii-site .tv-room .msgs { max-height: 45vh; }
}

/* short landscape phone: keep the bottom directory, just tighter.
   Purpose stays on taller screens. Entries, socials and CLASSIC SITE stay. */
@media (max-width: 759px) and (max-height: 480px) {
  #site-nav { gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .site-nav-head, .site-nav-purpose { display: none; }
  .site-nav-link { min-height: 40px; min-width: 100px; }
  body.ascii-site .win-tb { padding: 8px 12px 6px !important; }
  body.ascii-site .win .win-status { display: none !important; }
}

/* ---- round 3: menu icons + the tabbed HUB / PROFILE windows ---------------
   Icons: Lucide monoline SVG inlined by os/site-nav.js (and pre-rendered in
   desktop.html). currentColor = the entry's green, hover and active included.
   They sit INSIDE .site-nav-label, so the 3-column entry grid (index / label /
   arrow) is untouched at every breakpoint. */
.site-nav-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.site-nav-icon { flex: 0 0 auto; width: 14px; height: 14px; stroke-width: 1.75; opacity: .82; transition: opacity 90ms linear; }
.site-nav-link:hover .site-nav-icon,
.site-nav-link:focus-visible .site-nav-icon,
.site-nav-link.is-active .site-nav-icon { opacity: 1; }
@media (max-width: 759px), (max-height: 760px) {
  .site-nav-label { gap: 6px; }
  .site-nav-icon { width: 13px; height: 13px; }
}
/* hub: tab bar over the folded apps' panes; each pane is its own scroller */
body.ascii-site .hub { display: flex; flex-direction: column; height: 100%; min-height: 0; }
body.ascii-site .hub-tabs { flex: 0 0 auto; margin: 0 !important; padding: 10px 12px 10px !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.ascii-site .hub-panes { position: relative; flex: 1 1 auto; min-height: 0; }
body.ascii-site .hub-pane { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(113,255,154,.28) transparent; }
body.ascii-site .hub-pane[hidden] { display: none !important; }
body.ascii-site .win .win-body:has(> .hub) { overflow: hidden !important; }

/* held sections: a status, not a fault */
.offline-note.is-standby {
  border: 1px solid rgba(113,255,154,.35);
  border-left: 3px solid #8dffb4;
  background: rgba(4, 24, 12, .55);
  padding: 8px 10px;
}
.offline-note.is-standby .avail {
  letter-spacing: .16em;
  font-size: 10px;
  color: #b6ffc8;
}
.is-standby { border-left: 3px solid #8dffb4; }