/* Jollypixel ($JOLLYPIXEL) - design tokens
   reference: a beige all-in-one 8-bit terminal with an integrated CRT + drive bay,
   palette pulled straight from the approved avatar/banner (phosphor green screen,
   aged beige plastic case, near-black bezel), not invented.
   palette : case beige #C9BD9A / #A89873 / #DDD3B0, bezel #17140F, screen #071B12,
             phosphor dim #1F5C3E, mid #3FBE84, bright #9FF0C4, led red #D6453A, led green #4CBE6C
   type    : "Press Start 2P" (display/labels), "VT323" (terminal body/log)
   spacing : 4 / 8 / 12 / 16 / 24 / 32 / 48 px scale
   radius  : case 28px, glass 20px, chrome buttons 4px, reboot button 50%
   motion  : typewriter reveal + scanline flicker + glitch-jitter, one idiom reused everywhere
*/

@font-face{font-family:"Press Start 2P";src:url("assets/fonts/press-start-2p-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"VT323";src:url("assets/fonts/vt323-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}

:root{
  --case-beige:#C9BD9A;
  --case-beige-dark:#9C8F6C;
  --case-beige-light:#E4DAB6;
  --bezel:#17140F;
  --bezel-hi:#2A251C;
  --screen-bg:#071B12;
  --screen-bg-2:#0C2A1B;
  --phosphor-dim:#1F5C3E;
  --phosphor-mid:#3FBE84;
  --phosphor-bright:#9FF0C4;
  --phosphor-glow:rgba(143,245,196,.55);
  --led-red:#D6453A;
  --led-green:#4CBE6C;
  --ink:#0B0906;
  --font-display:"Press Start 2P",monospace;
  --font-term:"VT323",monospace;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem;
  --r-case:28px; --r-glass:20px; --r-chip:4px;
  --dur:220ms; --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{height:100%;}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(120% 60% at 50% 0%, #2E2820 0%, #17130F 45%, #0B0906 100%);
  font-family:var(--font-term);
  color:var(--phosphor-bright);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- hero viewport: the original single-screen machine, unchanged ---------- */
.hero-viewport{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(12px,3vw,32px);
}

#boot-error-banner{
  position:fixed;inset:auto 0 0 0;z-index:999;
  background:#D6453A;color:#fff;font:12px/1.4 var(--font-term);
  padding:10px 14px;text-align:center;
}
#boot-error-banner:empty{display:none;}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;}
img{display:block;max-width:100%;}

/* ---------- the case (the whole page IS this machine) ---------- */
.case{
  width:min(94vw,560px);
  background:
    linear-gradient(155deg, var(--case-beige-light) 0%, var(--case-beige) 42%, var(--case-beige-dark) 100%);
  border-radius:var(--r-case);
  padding:clamp(14px,3vw,22px) clamp(14px,3vw,22px) clamp(10px,2vw,16px);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.65),
    0 2px 0 rgba(255,255,255,.35) inset,
    0 -10px 24px rgba(0,0,0,.18) inset;
  position:relative;
}

.case-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--sp-2) var(--sp-3);
}
.case-brand{
  font-family:var(--font-display);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--bezel);
  opacity:.72;
}
.case-leds{display:flex;gap:6px;align-items:center;}
.led{width:8px;height:8px;border-radius:50%;background:var(--bezel-hi);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);}
.led--power{background:var(--led-red);box-shadow:0 0 6px 1px rgba(214,69,58,.75), inset 0 0 0 1px rgba(0,0,0,.3);}
.led--power.is-on{background:var(--led-green);box-shadow:0 0 7px 2px rgba(76,190,108,.85), inset 0 0 0 1px rgba(0,0,0,.3);}

/* ---------- the CRT ---------- */
.crt{
  background:linear-gradient(160deg,#1D1912,var(--bezel) 40%,#0E0C08);
  border-radius:calc(var(--r-glass) + 10px);
  padding:clamp(10px,2.4vw,16px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 -6px 14px rgba(0,0,0,.5) inset;
}

.crt-glass{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--r-glass);
  overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, var(--screen-bg-2) 0%, var(--screen-bg) 62%, #030A06 100%);
  box-shadow:
    inset 0 0 0 2px #000,
    inset 0 0 70px rgba(0,0,0,.85),
    inset 0 -40px 60px rgba(0,0,0,.55);
  transform:translateZ(0);
}
.crt-glass::before{
  /* barrel curvature vignette */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(130% 130% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}

.boot-log{
  position:relative;z-index:2;
  height:44%;
  padding:clamp(10px,2.6vw,16px) clamp(12px,3vw,18px) 4px;
  font-family:var(--font-term);
  font-size:clamp(12px,3.1vw,15px);
  line-height:1.32;
  color:var(--phosphor-bright);
  overflow-y:auto;
  scrollbar-width:none;
}
.boot-log::-webkit-scrollbar{display:none;}
.boot-line{white-space:pre-wrap;word-break:break-word;text-shadow:0 0 6px var(--phosphor-glow);}
.boot-line--ca{
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:2px;
}
.boot-line--ca::-webkit-scrollbar{display:none;}
.boot-line--ca .ca-btn{
  font:inherit;color:var(--phosphor-bright);text-decoration:none;padding:0;
  pointer-events:none;text-shadow:0 0 6px var(--phosphor-glow);
}
.boot-line--ca.is-ready .ca-btn{pointer-events:auto;cursor:pointer;border-bottom:1px dashed rgba(159,240,196,.55);}
.boot-line--ca.is-ready .ca-btn:hover,.boot-line--ca.is-ready .ca-btn:focus-visible{color:#fff;outline:none;}
.ca-confirm{opacity:0;margin-left:6px;color:#fff;transition:opacity var(--dur) var(--ease);}
.ca-confirm.is-shown{opacity:1;}
.cursor{display:inline-block;width:.55em;background:var(--phosphor-bright);animation:blink 1s steps(1) infinite;transform:translateY(.1em);}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

.sprite-stage{
  position:absolute;left:0;right:0;bottom:0;top:44%;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 520ms var(--ease), transform 520ms var(--ease);
  overflow:hidden;
}
.sprite-stage.is-visible{opacity:1;transform:translateY(0);}
.sprite-img{
  flex:0 0 auto;
  width:46%;
  height:auto;
  margin-top:2%;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 18px rgba(159,240,196,.25));
}
.chart-canvas{flex:1 1 auto;width:100%;display:block;}

.crt-glass.is-glitching .sprite-img{filter:hue-rotate(20deg) brightness(1.3);}
.crt-glass.is-glitching{animation:glitchshift 160ms steps(2) 2;}
@keyframes glitchshift{
  0%{transform:translate(0,0);}
  25%{transform:translate(-3px,1px);}
  50%{transform:translate(2px,-2px);}
  75%{transform:translate(-1px,2px);}
  100%{transform:translate(0,0);}
}

.scanlines{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px, transparent 2px, transparent 3px);
  mix-blend-mode:multiply;
}
.flicker{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:rgba(159,240,196,.04);
  animation:flicker 4.2s infinite;
}
@keyframes flicker{
  0%,96%,100%{opacity:0;}
  97%{opacity:1;}
  98%{opacity:.2;}
  99%{opacity:.8;}
}
.crt-glass.is-rebooting{animation:poweroff 380ms ease-in forwards;}
@keyframes poweroff{
  0%{filter:brightness(1);transform:scaleY(1);}
  55%{filter:brightness(2.4);transform:scaleY(.06);}
  100%{filter:brightness(.2);transform:scaleY(.02);}
}
.crt-glass.is-poweron{animation:poweron 260ms ease-out;}
@keyframes poweron{
  0%{filter:brightness(2.6);transform:scaleY(.04);}
  40%{filter:brightness(1.8);transform:scaleY(1);}
  100%{filter:brightness(1);transform:scaleY(1);}
}

@media (prefers-reduced-motion:reduce){
  .flicker{animation:none;}
  .crt-glass.is-glitching{animation:none;}
  .crt-glass.is-rebooting{animation:none;}
  .crt-glass.is-poweron{animation:none;}
}

.crt-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(8px,2vw,12px) clamp(4px,1vw,8px) 0;
}
.drive-slot{
  flex:1;height:9px;border-radius:2px;
  background:linear-gradient(180deg,#000,#1A1712);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.05);
  margin-right:var(--sp-3);
  position:relative;
}
.drive-slot::after{
  content:"";position:absolute;left:10px;right:10px;top:50%;height:1px;
  background:rgba(255,255,255,.08);transform:translateY(-50%);
}
.bezel-text{font-family:var(--font-display);font-size:8px;color:#7A705A;letter-spacing:.1em;}

/* ---------- control deck ---------- */
.deck{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-2) 0;
  flex-wrap:wrap;
}
.chip-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(160deg,#211D16,var(--ink));
  border-radius:var(--r-chip);
  padding:10px 14px;
  box-shadow:0 2px 0 rgba(255,255,255,.06) inset, 0 3px 0 rgba(0,0,0,.5);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chip-btn:hover{transform:translateY(-1px);}
.chip-btn:active{transform:translateY(1px);box-shadow:0 0 0 rgba(0,0,0,.5);}

.x-link canvas{display:block;width:26px;height:26px;}

.buy-btn{
  font-family:var(--font-term);
  font-size:19px;
  letter-spacing:.03em;
  color:var(--phosphor-bright);
  text-shadow:0 0 8px var(--phosphor-glow);
  animation:buyblink 1.1s steps(1) infinite;
}
@keyframes buyblink{0%,55%{opacity:1;}56%,100%{opacity:.35;}}
.buy-btn:hover,.buy-btn:focus-visible{color:#fff;}

.reboot-btn{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-size:9px;letter-spacing:.08em;color:var(--bezel);
  background:linear-gradient(160deg,var(--case-beige-light),var(--case-beige-dark));
  border-radius:999px;
  padding:9px 14px;
  box-shadow:0 2px 0 rgba(255,255,255,.4) inset, 0 3px 0 rgba(0,0,0,.28);
}
.reboot-btn::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--led-red);box-shadow:0 0 4px rgba(214,69,58,.7);
}
.reboot-btn:hover{transform:translateY(-1px);}
.reboot-btn:active{transform:translateY(1px);box-shadow:none;}

/* ---------- depth: scroll content below the machine ---------- */
.depth{
  max-width:620px;
  margin:0 auto;
  padding:0 clamp(16px,4vw,28px) 100px;
  position:relative;
}
.depth-scanlines{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(159,240,196,.035) 0px, rgba(159,240,196,.035) 1px, transparent 2px, transparent 4px);
}

.depth-section{position:relative;z-index:1;margin-bottom:clamp(40px,8vw,64px);}
.depth-section:last-of-type{margin-bottom:32px;}

.depth-head{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--sp-4);flex-wrap:wrap;}
.depth-head .prompt{
  font-family:var(--font-term);font-size:clamp(14px,3.4vw,17px);
  color:var(--phosphor-mid);text-shadow:0 0 6px var(--phosphor-glow);
}
.depth-head h2{
  font-family:var(--font-display);font-size:clamp(11px,2.6vw,13px);
  letter-spacing:.05em;color:var(--phosphor-bright);
  text-shadow:0 0 8px var(--phosphor-glow);margin:0;
}

.dos-frame{
  position:relative;
  border:1px solid rgba(159,240,196,.28);
  background:linear-gradient(160deg, rgba(159,240,196,.06), rgba(7,27,18,.35));
  border-radius:var(--r-chip);
  padding:clamp(16px,3.4vw,24px);
}
.dos-frame::before,.dos-frame::after{
  content:"+";position:absolute;font-family:monospace;font-size:14px;line-height:1;
  color:rgba(159,240,196,.4);pointer-events:none;
}
.dos-frame::before{top:-8px;left:-7px;}
.dos-frame::after{bottom:-8px;right:-7px;}

/* spec rows: dot-leader readout, echoes the boot log's own voice */
.spec-row{
  display:flex;align-items:baseline;gap:6px;
  font-family:var(--font-term);font-size:clamp(13px,3vw,16px);
  color:var(--phosphor-bright);padding:4px 0;
}
.spec-row .label{flex:0 0 auto;white-space:nowrap;}
.spec-row .fill{flex:1 1 auto;border-bottom:1px dotted rgba(159,240,196,.35);margin:0 2px;transform:translateY(-4px);}
.spec-row .value{flex:0 0 auto;color:var(--phosphor-mid);white-space:nowrap;text-align:right;}

/* changelog rows: version tag + line, its own template */
.log-row{
  display:flex;gap:12px;padding:7px 0;
  border-bottom:1px solid rgba(159,240,196,.1);
  font-family:var(--font-term);font-size:clamp(13px,3vw,16px);
}
.log-row:last-child{border-bottom:0;}
.log-row .ver{flex:0 0 auto;min-width:38px;color:var(--phosphor-mid);}
.log-row .desc{flex:1 1 auto;color:var(--phosphor-bright);}

/* field report: ascii art + timestamped log */
.report-status{
  margin:0 0 var(--sp-3);font-family:var(--font-term);
  font-size:clamp(13px,3vw,16px);color:var(--phosphor-bright);
}
.ascii-line{
  margin:0 0 var(--sp-3);padding:var(--sp-2) 0;
  font-family:"Courier New",Courier,monospace;
  font-size:clamp(9px,2.6vw,13px);line-height:1.2;
  color:var(--phosphor-mid);text-shadow:0 0 6px var(--phosphor-glow);
  overflow-x:auto;white-space:pre;
}
.stamp-row{
  display:flex;gap:12px;padding:3px 0;
  font-family:var(--font-term);font-size:clamp(12px,2.8vw,15px);
}
.stamp-row .t{flex:0 0 auto;min-width:76px;color:var(--phosphor-dim);}
.stamp-row .d{flex:1 1 auto;color:var(--phosphor-bright);}

/* faq: command-line question / output pairs */
.faq-item{margin-bottom:var(--sp-4);}
.faq-item:last-child{margin-bottom:0;}
.faq-q{
  margin:0 0 4px;font-family:var(--font-term);
  font-size:clamp(13px,3vw,16px);color:var(--phosphor-bright);
}
.faq-q .prompt{color:var(--phosphor-mid);margin-right:6px;font-size:inherit;text-shadow:none;}
.faq-a{
  margin:0;padding-left:18px;position:relative;
  font-family:var(--font-term);font-size:clamp(13px,3vw,16px);
  color:rgba(159,240,196,.82);
}
.faq-a::before{content:">";position:absolute;left:0;color:var(--phosphor-mid);}

.depth-end{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-term);font-size:16px;color:var(--phosphor-mid);
}

@media (max-width:460px){
  .spec-row{flex-wrap:wrap;}
  .spec-row .fill{display:none;}
  .spec-row .value{color:inherit;}
}

/* ---------- footer ---------- */
.meta-footer{
  position:fixed;left:0;right:0;bottom:6px;
  display:flex;justify-content:center;gap:14px;
  font-family:var(--font-term);font-size:12px;
  color:rgba(159,240,196,.55);
  pointer-events:none;
}
#canary.is-online{color:var(--phosphor-bright);}

@media (min-width:920px){
  .case{width:520px;}
}
@media (max-width:380px){
  .deck{gap:8px;}
  .chip-btn{padding:8px 10px;}
  .reboot-btn{padding:8px 10px;}
}