/* ============================================================

   petscii.nw — cold-open boot frame

   Authentic C64 BASIC V2 boot: light blue ink on dark blue,

   purple border. C64 Pro Mono (Style64) for everything visible.

   ============================================================ */



@font-face {

  font-family: 'C64 Pro';

  src: url('https://d15x85sdl3ykxn.cloudfront.net/static/dapps/fonts/c64-pro/C64_Pro-STYLE.woff2') format('woff2');

  font-display: swap;

  font-weight: 400;

  font-style: normal;

}

@font-face {

  font-family: 'C64 Pro Mono';

  src: url('https://d15x85sdl3ykxn.cloudfront.net/static/dapps/fonts/c64-pro/C64_Pro_Mono-STYLE.woff2') format('woff2');

  font-display: swap;

  font-weight: 400;

  font-style: normal;

}



:root {

  /* Authentic C64 palette — VIC-II color #6 (blue) background,

     color #14 (light blue) text, color #4 (purple) border */

  --c64-bg:      #352879;

  --c64-fg:      #6c5eb5;

  --c64-ink:     #a59cf0;

  --c64-border:  #6f3d86;

  --c64-bright:  #ffffff;

  --c64-accent:  #ffff7b;

}



* { box-sizing: border-box; }



html, body {

  margin: 0;

  padding: 0;

  height: 100%;

  background: #000;

  overflow: hidden;

}



.petscii-body {

  /* font-family is set by shell.css for the modern chrome.

     C64 Pro Mono is scoped to .petscii-screen below. */

}

.petscii-screen,

.petscii-screen * {

  font-family: 'C64 Pro Mono', 'C64 Pro', ui-monospace, monospace;

  color: var(--c64-ink);

  -webkit-font-smoothing: none;

  -moz-osx-font-smoothing: grayscale;

  font-smooth: never;

}



.petscii-root {

  width: 100vw;

  height: 100vh;

  display: block;

}



/* ---------- The CRT ---------- */

.petscii-crt {

  position: relative;

  width: 100%;

  height: 100%;

  background: var(--c64-border);

  padding: 0;

  overflow: hidden;

}



.petscii-screen {

  position: relative;

  width: 100%;

  height: 100%;

  background: var(--c64-bg);

  padding: 8px 12px;

  color: var(--c64-ink);

  font-size: clamp(14px, 1.6vw, 20px);

  line-height: 1.2;

  letter-spacing: 0;

  white-space: pre-wrap;

  overflow-y: auto;

  overflow: hidden;

}



.petscii-stream {

  white-space: pre-wrap;

  display: block;

}



/* ---------- Blinking cursor ---------- */

.petscii-cursor {

  display: inline-block;

  width: 0.9ch;

  height: 1em;

  background: var(--c64-ink);

  margin: 0;

  padding: 0;

  vertical-align: text-top;

  line-height: 1em;

  animation: petscii-blink 0.9s steps(2, start) infinite;

  visibility: visible;

}

.petscii-cursor.is-hidden { visibility: hidden; display: none; }






@keyframes petscii-blink {

  0%, 49%   { opacity: 1; }

  50%, 100% { opacity: 0; }

}



/* ---------- Model list ---------- */

.petscii-models {

  list-style: none;

  margin: 1.5em 0 0 0;

  padding: 0;

}

.petscii-models li {

  padding: 0.15em 0.5em;

  cursor: pointer;

  user-select: none;

}

.petscii-models li.is-selected {

  background: var(--c64-ink);

  color: var(--c64-bg);

}

.petscii-models li .petscii-models-num {

  color: var(--c64-accent);

  margin-right: 0.6em;

}



/* ---------- Scanlines + CRT glare ---------- */

.petscii-scanlines {

  position: absolute;

  inset: 0;

  pointer-events: none;

  background: repeating-linear-gradient(

    to bottom,

    rgba(0,0,0,0) 0,

    rgba(0,0,0,0) 2px,

    rgba(0,0,0,0.18) 2px,

    rgba(0,0,0,0.18) 3px

  );

  z-index: 4;

  mix-blend-mode: multiply;

}

.petscii-glare {

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06), transparent 60%),

    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.35), transparent 60%);

  z-index: 5;

}



/* ---------- [?] escape hatch ---------- */

.petscii-info-btn {

  position: absolute;

  top: clamp(0.5rem, 1.5vw, 1.25rem);

  right: clamp(0.5rem, 1.5vw, 1.25rem);

  background: transparent;

  border: none;

  color: var(--c64-fg);

  font-family: inherit;

  font-size: clamp(12px, 1.2vw, 16px);

  cursor: pointer;

  opacity: 0.35;

  transition: opacity 0.2s;

  z-index: 10;

  padding: 0.5rem;

}

.petscii-info-btn:hover,

.petscii-info-btn:focus { opacity: 1; outline: none; }



/* ---------- Info overlay ---------- */

.petscii-info-panel {

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,0.78);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 20;

  padding: 2rem;

}

.petscii-info-panel[hidden] { display: none; }



.petscii-info-inner {

  background: var(--c64-bg);

  border: 3px solid var(--c64-border);

  padding: clamp(1.5rem, 3vw, 2.5rem);

  max-width: 56ch;

  color: var(--c64-ink);

  font-size: clamp(13px, 1.3vw, 16px);

  line-height: 1.5;

}

.petscii-info-inner h2 {

  color: var(--c64-bright);

  margin: 0 0 1rem 0;

  font-size: 1.4em;

}

.petscii-info-inner p { margin: 0 0 0.85em 0; }

.petscii-info-meta { color: var(--c64-fg); font-size: 0.9em; }

.petscii-info-inner a { color: var(--c64-accent); text-decoration: underline; }

.petscii-info-close {

  margin-top: 1rem;

  background: transparent;

  border: 2px solid var(--c64-ink);

  color: var(--c64-ink);

  font-family: inherit;

  font-size: 1em;

  padding: 0.4em 1.2em;

  cursor: pointer;

}

.petscii-info-close:hover {

  background: var(--c64-ink);

  color: var(--c64-bg);

}



/* ---------- Mobile ---------- */

@media (max-width: 640px) {

  .petscii-crt { padding: 0; }

  .petscii-screen { padding: 8px 12px; font-size: 14px; }

}





/* ============================================================

   BBS Shell — appended for B.1

   ============================================================ */

.petscii-prompt {

  color: var(--c64-accent);

}

.petscii-cmd {

  color: var(--c64-bright);

}

.petscii-screen {

  /* Make sure long banners and menus scroll within the screen,

     not push the CRT around. */

  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color: var(--c64-fg) var(--c64-bg);

}

.petscii-screen::-webkit-scrollbar { width: 10px; }

.petscii-screen::-webkit-scrollbar-track { background: var(--c64-bg); }

.petscii-screen::-webkit-scrollbar-thumb { background: var(--c64-fg); }





/* ============================================================

   B.1.5 — CRT-in-pane mode

   When the CRT is hosted inside the modern NeuraWeb shell pane

   instead of full-bleed body, .petscii-crt--pane sizes to its

   parent (.nw-pane). The page chrome (purple border etc.) shrinks

   so the inner blue screen fills the pane edge to edge.

   ============================================================ */

.petscii-crt--pane {

  position: relative;

  flex: 1 1 auto;

  width: 100%;

  min-height: 0;

  padding: clamp(0.5rem, 1vw, 1rem);

}

/* When a modem panel is above the CRT, .nw-pane must be a column flex */

.nw-pane {

  display: flex;

  flex-direction: column;

}

.petscii-modem-panel {

  flex: 0 0 auto;

}

.nw-pane { position: relative; }

.petscii-crt--pane .petscii-screen {

  height: 100%;

}




/* ============================================================

   B.2 — INTRO FLIP

   First-ever visit: full-bleed CRT covers the entire viewport

   (modern NeuraWeb shell hidden) so the user gets the 1986 reveal

   at 300 baud. After BBS paints, body gets .petscii-intro-flipping

   then .petscii-intro-done, fading the shell back in.

   ============================================================ */

body.petscii-intro-full .nw-topnav,

body.petscii-intro-full .nw-sidebar,

body.petscii-intro-full .nw-divider,

body.petscii-intro-full .nw-tabs {

  opacity: 0;

  pointer-events: none;

}

body.petscii-intro-full .nw-body {

  grid-template-columns: 0 0 1fr;

}

body.petscii-intro-full .nw-app {

  grid-template-rows: 0 1fr;

}

body.petscii-intro-full .nw-content {

  background: var(--c64-border, #6f3d86);

}

body.petscii-intro-full .nw-pane {

  position: fixed;

  inset: 0;

  z-index: 50;

  background: var(--c64-border, #6f3d86);

}



body.petscii-intro-flipping .nw-topnav,

body.petscii-intro-flipping .nw-sidebar,

body.petscii-intro-flipping .nw-divider,

body.petscii-intro-flipping .nw-tabs {

  transition: opacity 0.9s ease;

  opacity: 1;

  pointer-events: auto;

}

body.petscii-intro-flipping .nw-pane {

  transition: inset 0.9s ease, position 0s 0.9s;

}



body.petscii-intro-done .nw-topnav,

body.petscii-intro-done .nw-sidebar,

body.petscii-intro-done .nw-divider,

body.petscii-intro-done .nw-tabs {

  opacity: 1;

  pointer-events: auto;

}




/* ============================================================

   B.5 — PER-MACHINE COLOR PALETTES

   Each machine gets a body.machine-<id> class added by boot.js.

   Overrides the C64 --c64-* tokens scoped to .petscii-screen.

   The modern chrome (top nav, sidebar) is unaffected — only

   the BBS pane (CRT) swaps palette.

   ============================================================ */



/* ---- PET 2001 (1977) — green phosphor on black ---- */

body.machine-pet-2001 .petscii-screen {

  --c64-bg: #000000;

  --c64-ink: #33ff33;

  --c64-fg: #66ff66;

  --c64-border: #1a1a1a;

  background: var(--c64-bg);

  color: var(--c64-ink);

}

body.machine-pet-2001 .nw-content,

body.machine-pet-2001 .nw-pane,

body.machine-pet-2001 .nw-tab.is-active {

  background: #000000;

}



/* ---- VIC-20 (1980) — white border, cyan screen, dark-blue ink ---- */

body.machine-vic-20 .petscii-screen {

  --c64-bg:     #b1ddff;

  --c64-ink:    #29388e;

  --c64-border: #ffffff;

  --c64-accent: #29388e;

  --c64-dim:    #6285c2;

}

body.machine-vic-20 .nw-content,

body.machine-vic-20 .nw-pane,

body.machine-vic-20 .nw-tab.is-active {

  background: #ffffff;

}

body.machine-vic-20 .nw-tab.is-active { color: #29388e; }



/* ---- C64 / SX-64 / C64C (1982/84/86) — the canonical purple/blue ---- */

/* (default — no overrides needed, but we set explicitly for clarity) */

body.machine-c64 .petscii-screen,

body.machine-sx-64 .petscii-screen,

body.machine-c64c .petscii-screen {

  --c64-bg:     #352879;

  --c64-ink:    #a59cf0;

  --c64-border: #6f3d86;

  --c64-accent: #ffff7b;

  --c64-dim:    #756bb1;

}



/* ---- Plus/4 (1984) — light-grey screen, pink border, dark ink ---- */

body.machine-plus4 .petscii-screen {

  --c64-bg: #4a4a52;

  --c64-ink: #e8a8c8;

  --c64-fg: #f0c8d8;

  --c64-border: #6b6b75;

  background: var(--c64-bg);

  color: var(--c64-ink);

}

body.machine-plus4 .nw-content,

body.machine-plus4 .nw-pane,

body.machine-plus4 .nw-tab.is-active {

  background: #ffb5b5;

}

body.machine-plus4 .nw-tab.is-active { color: #1d1d1d; }



/* ---- C128 (1985) — like C64 but slightly more luminous on boot ---- */

body.machine-c128 .petscii-screen {

  --c64-bg: #4040a0;

  --c64-ink: #d0d0ff;

  --c64-fg: #e8e8ff;

  --c64-border: #5050b0;

  background: var(--c64-bg);

  color: var(--c64-ink);

}



/* ---- Amiga 1000 (1985) — orange-on-black insert-disk screen ---- */

body.machine-amiga-1000 .petscii-screen {

  --c64-bg:     #0055aa;

  --c64-ink:    #ff8800;

  --c64-border: #000000;

  --c64-accent: #ffffff;

  --c64-dim:    #ffaa44;

  font-family: "Helvetica", "Arial", system-ui, sans-serif !important;

}

body.machine-amiga-1000 .petscii-screen * {

  font-family: "Helvetica", "Arial", system-ui, sans-serif !important;

}

body.machine-amiga-1000 .nw-content,

body.machine-amiga-1000 .nw-pane,

body.machine-amiga-1000 .nw-tab.is-active {

  background: #000000;

}

body.machine-amiga-1000 .nw-tab.is-active { color: #ff8800; }



/* Notice line in BBS (e.g. unread bulletins reminder) */

.petscii-notice {

  color: var(--c64-accent, var(--c64-fg));

  font-weight: 600;

}





/* C64 Ultimate (2025, FPGA) - same VIC-II palette as the originals */

body.machine-c64-ultimate .petscii-screen {

  --c64-bg:     #352879;

  --c64-ink:    #a59cf0;

  --c64-border: #6f3d86;

  --c64-accent: #ffff7b;

  --c64-dim:    #756bb1;

}