/* Page-specific styles for bot.html — a normal doc page (page-doc, like History)
   with the live game embedded. Shared document chrome comes from site.css; these
   rules style the intro, embedded game screen, controls, speed bar, level tabs,
   note and link. */

.page-bot .lead{
  max-width:820px;
  margin:2px auto 8px;
  color:#d6ded8;
  font-size:18px;
  line-height:1.65;
  text-align:center;
}

/* ---------- the embedded game screen (full CRT, matching game.html) ----------
   The toolbar + bezel sit in #game-stage{width:max-content} so the toolbar tracks
   the monitor width, and game.js's fit() sizes the canvas to its native scale
   (1x = 640px) like game.html. The mobile block below drops the frame for an
   edge-to-edge screen. */
.page-bot #game-stage{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:max-content;
  max-width:100%;
  margin:14px auto 6px;
}
.page-bot #bezel{
  position:relative;
  align-self:center;      /* hug the tube like the game page: no wide case flanks */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:13px;
  background:var(--crt-case-bg);
  border-radius:20px;
  padding:18px 22px 15px;
  box-shadow:var(--crt-case-shadow);
  animation:poweron .6s ease-out both .08s;
}
@keyframes poweron{
  from{ opacity:0; transform:scale(.985); }
  to{ opacity:1; transform:none; }
}
.page-bot #tube{
  position:relative;
  align-self:center;
  background:#060708;
  padding:9px;
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), inset 0 0 18px 5px rgba(0,0,0,.9);
}
.page-bot #screen{
  display:block;
  background:#000;
  border-radius:7px;
  image-rendering:pixelated;
  box-shadow:0 0 0 2px #000, 0 0 44px -2px var(--glow);
  touch-action:none;
}
.page-bot #glass,
.page-bot #power{
  position:absolute;
  inset:9px;
  border-radius:7px;
  pointer-events:none;
}
.page-bot #glass{
  z-index:2;
  background:linear-gradient(133deg, rgba(255,255,255,.07), rgba(255,255,255,.012) 24%, transparent 40%), radial-gradient(128% 132% at 50% 47%, transparent 56%, rgba(0,0,0,.40) 100%), repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  box-shadow:inset 0 0 26px 5px rgba(0,0,0,.5);
}
.page-bot #power{
  z-index:3;
  background:radial-gradient(120% 100% at 50% 50%, #fff, rgba(255,255,255,.55));
  opacity:0;
}
.page-bot #power.go{ animation:crton 620ms ease-out both; }
@keyframes crton{
  0%{ opacity:0; transform:scaleY(.006); filter:brightness(2.2); }
  7%{ opacity:.95; transform:scaleY(.03); }
  22%{ opacity:.55; transform:scaleY(1); }
  100%{ opacity:0; transform:scaleY(1); }
}
.page-bot #tube.stuck-red::after,
.page-bot #tube.clear-green::after{
  content:"";
  position:absolute;
  inset:9px;
  z-index:4;
  border-radius:7px;
  pointer-events:none;
}
.page-bot #tube.stuck-red::after{
  background:rgba(255,0,0,.55);
  box-shadow:inset 0 0 36px rgba(255,255,255,.18), 0 0 34px rgba(255,0,0,.65);
}
.page-bot #tube.clear-green::after{
  background:rgba(0,255,80,.50);
  box-shadow:inset 0 0 36px rgba(255,255,255,.18), 0 0 34px rgba(0,255,80,.62);
}
.page-bot #bezel:fullscreen #tube.stuck-red::after,
.page-bot #bezel:fullscreen #tube.clear-green::after{
  inset:0;
  border-radius:0;
}
.page-bot #panel{
  display:flex;
  align-items:center;
  gap:11px;
  height:16px;
  padding:0 5px;
}
.page-bot #panel .logo{
  font:700 10px/1 ui-monospace, monospace;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--crt-logo);
  text-shadow:var(--crt-logo-shadow);
}
.page-bot #panel .led{
  width:7px;
  height:7px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #e6ffe6, var(--phos) 52%, rgba(0,0,0,.7) 100%);
  box-shadow:0 0 9px 1px var(--glow);
}
.page-bot #panel .knobs{
  margin-left:auto;
  display:flex;
  gap:11px;
}
.page-bot #panel .knobs i{
  position:relative;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--crt-knob-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.6);
}
.page-bot #panel .knobs i::after{
  content:"";
  position:absolute;
  left:50%;
  top:2px;
  width:1.5px;
  height:5px;
  background:rgba(0,0,0,.6);
  border-radius:1px;
  transform:translateX(-50%);
}

/* fullscreen: hand the whole display to the screen */
.page-bot #bezel:fullscreen{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0;
  background:#000;
  max-width:none;
  border-radius:0;
  box-shadow:none;
  animation:none;
}
.page-bot #bezel:fullscreen #tube{ align-self:auto; padding:0; background:#000; border-radius:0; box-shadow:none; }
.page-bot #bezel:fullscreen #screen{ border-radius:0; box-shadow:none; }
.page-bot #bezel:fullscreen #glass,
.page-bot #bezel:fullscreen #power{ inset:0; border-radius:0; }
.page-bot #bezel:fullscreen #panel{ display:none; }

/* ---------- delayed loading status ---------- */
.page-bot .bot-loading{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:50;
  max-width:min(420px, calc(100vw - 32px));
  border:1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
  border-radius:6px;
  background:#08100c;
  box-shadow:0 18px 52px -28px rgba(0,0,0,.95), 0 0 22px -14px var(--accent);
  padding:10px 14px;
  color:var(--accent);
  font-size:13px;
  line-height:1.35;
  text-align:center;
  opacity:1;
  transition:opacity .22s ease;
}
.page-bot .bot-loading.is-done{ opacity:0; }

/* ---------- the game toolbar (theme / sound / fullscreen), matching game.html ---------- */
.page-bot #controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin:0 0 12px;
}
.page-bot #controls .grp{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; }
.page-bot #controls .grp:last-child{ justify-content:flex-end; gap:8px; margin-left:auto; }
.page-bot #controls button{
  font:inherit;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--button);
  border:1px solid var(--border);
  border-radius:3px;
  padding:7px 13px;
  cursor:pointer;
  transition:color .12s, border-color .12s, box-shadow .12s, background .12s;
}
.page-bot #controls button:hover{ color:var(--accent); border-color:var(--accent); }
.page-bot #controls button[aria-pressed="true"]{
  color:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 12px -5px var(--accent);
}

/* ---------- speed bar ---------- */
.page-bot .speedbar{
  display:grid;
  grid-template-columns:auto minmax(120px, 220px) auto;
  align-items:center;
  gap:8px;
  max-width:340px;
  margin:14px auto 0;
}
.page-bot .speedbar label{ color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.page-bot .speedbar output{ min-width:3ch; color:var(--accent); text-align:right; font-size:12px; font-family:ui-monospace, monospace; }
.page-bot .speedbar input{ width:100%; accent-color:var(--accent); cursor:pointer; }

/* ---------- level tabs (26-32) ---------- */
.page-bot .leveltabs{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:7px;
  width:100%;
  max-width:632px;
  margin:14px auto 0;
}
.page-bot .leveltabs button{
  min-height:40px;
  font:inherit;
  font-size:12px;
  letter-spacing:.03em;
  text-transform:none;
  color:#98a1a6;
  background:var(--button);
  border:1px solid var(--border);
  border-radius:5px;
  cursor:pointer;
  transition:color .12s, border-color .12s, box-shadow .12s, background .12s;
}
.page-bot .leveltabs button:hover{ color:var(--accent); border-color:var(--accent); }
.page-bot .leveltabs button[aria-pressed="true"]{
  color:var(--accent);
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 18%, var(--button));
  box-shadow:0 0 16px -8px var(--accent);
  cursor:default;
}

/* ---------- note + link ---------- */
.page-bot .live-note{
  max-width:632px;
  margin:16px auto 0;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}
.page-bot .bot-think-link{ margin:10px auto 0; text-align:center; }
.page-bot .bot-think-link a{ color:var(--accent); text-decoration:none; }
.page-bot .bot-think-link a:hover{ text-decoration:underline; }

@media (max-width:900px){
  .page-bot .leveltabs{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width:640px){
  /* Mobile: drop the CRT monitor frame and run the game screen edge-to-edge,
     matching the landing page (index.html) preview. */
  .page-bot{ overflow-x:hidden; }
  .page-bot #game-stage{
    width:100%;
    max-width:100%;
    margin:14px 0 0;
  }
  .page-bot #bezel{
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:0;
    background:none;
    border-radius:0;
    box-shadow:none;
  }
  .page-bot #tube{
    width:100%;
    padding:0;
    background:none;
    border-radius:0;
    box-shadow:none;
  }
  .page-bot #screen{
    border-radius:0;
    box-shadow:none;
  }
  /* fill the full-bleed frame at the same 4:3 CRT display ratio as the landing preview. */
  .page-bot #bezel:not(:fullscreen) #screen{ width:100% !important; height:75vw !important; }
  .page-bot #glass,
  .page-bot #power,
  .page-bot #panel{ display:none; }
  .page-bot #tube.stuck-red::after,
  .page-bot #tube.clear-green::after{
    inset:0;
    border-radius:0;
  }
}
@media (pointer:coarse), (max-width:520px){
  /* Smaller controls that keep their full labels, matching game.html's mobile
     buttons (flex-wrap, not the old abbreviated 5-column grid). */
  .page-bot #controls{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    justify-content:space-between;
  }
  .page-bot #controls .grp{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
  }
  .page-bot #controls .grp:last-child{ justify-content:flex-end; margin-left:auto; }
  .page-bot #controls button{
    min-width:0;
    min-height:32px;
    padding:8px 6px;
    font-size:10px;
    letter-spacing:.055em;
    white-space:nowrap;
  }
}
@media (max-width:520px){
  .page-bot .lead{ font-size:16px; text-align:left; }
  .page-bot #game-stage{ margin-top:18px; }
  .page-bot .speedbar{ grid-template-columns:auto minmax(120px, 1fr) auto; gap:6px; max-width:300px; }
  .page-bot .leveltabs{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}