/* ────────────────────────────────────────────────────────────────────────
   Fun Tech Studio — retro 90s PC terminal
   Clean modern look (no scanlines / no flicker), light + dark themes,
   terminal rendered as a CSS3DObject so it tracks the monitor's rotation.
   ──────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --fts-red:    #e74c3c;
  --fts-orange: #e67e22;
  --fts-yellow: #f1c40f;
  --fts-green:  #2ecc71;
  --fts-blue:   #3498db;
  --fts-purple: #9b59b6;
}

/* ─── Dark theme (default) — amber phosphor on black ─── */
body {
  --bg:           #07090a;
  --bg-screen:    #0c0f08;
  --bg-screen-2:  #07090a;
  --phosphor:     #f1c40f;
  --text:         #e8d678;
  --text-dim:     #98823a;
  --prompt-c:     #2ecc71;
  --error:        #e74c3c;
  --dir:          #2ecc71;
  --file:         #3498db;
  --link:         #e67e22;
  --heading:      #f1c40f;
  --vignette-a:   0.45;
  --halo:         rgba(241, 196, 15, 0.16);
  --chip-bg:      rgba(7, 9, 10, 0.55);
  --chip-border:  rgba(241, 196, 15, 0.30);
  --chip-text:    #e8d678;
}

/* ─── Light theme — paper / cream ─── */
body.light {
  --bg:           #f1e9d2;
  --bg-screen:    #fbf4d8;
  --bg-screen-2:  #f5ecc8;
  --phosphor:     #a87a00;
  --text:         #4a3b18;
  --text-dim:     #8a7642;
  --prompt-c:     #1f7e44;
  --error:        #b53a2a;
  --dir:          #1f7e44;
  --file:         #1f6fab;
  --link:         #a55a18;
  --heading:      #a87a00;
  --vignette-a:   0.10;
  --halo:         rgba(168, 122, 0, 0.18);
  --chip-bg:      rgba(255, 250, 232, 0.75);
  --chip-border:  rgba(168, 122, 0, 0.35);
  --chip-text:    #5a4a20;
}

html, body {
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 400ms ease;
}

/* ─── CRT wrapper ─── */
#crt-wrapper {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── CSS3D renderer mount (created by JS, styled via this class) ─── */
.css3d-mount {
  position: absolute !important;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.css3d-mount > div { pointer-events: auto; }

/* ─── Terminal (rendered in 3D via CSS3DObject) ─── */
#terminal {
  width: 720px;
  height: 500px;
  padding: 28px 32px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 14px;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-screen) 0%, var(--bg-screen-2) 100%);
  border-radius: 6px;
  box-shadow: 0 0 32px var(--halo);
  opacity: 0;
  transition: opacity 700ms ease-out;
}
body.ready #terminal { opacity: 1; }

#terminal::-webkit-scrollbar { width: 6px; }
#terminal::-webkit-scrollbar-track { background: transparent; }
#terminal::-webkit-scrollbar-thumb { background: var(--chip-border); border-radius: 3px; }

#terminal-output {
  white-space: pre-wrap;
  word-wrap: break-word;
}

#terminal-output .line { margin: 0; min-height: 1.55em; }
#terminal-output .prompt-line .prompt-str { color: var(--prompt-c); }
#terminal-output .prompt-line .command    { color: var(--text); }

#terminal-output .error   { color: var(--error); }
#terminal-output .heading { color: var(--heading); font-weight: 700; letter-spacing: 0.02em; }
#terminal-output .subtle  { color: var(--text-dim); }
#terminal-output .quote   { color: var(--link); font-style: italic; }

#terminal-output .dir,
#terminal-output .file,
#terminal-output .link {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
#terminal-output .dir  { color: var(--dir); }
#terminal-output .file { color: var(--file); }
#terminal-output .link { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
#terminal-output .dir:hover,
#terminal-output .file:hover,
#terminal-output .link:hover { opacity: 0.7; }

#terminal-output .badge {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 11px;
  margin-right: 6px;
  letter-spacing: 0.05em;
}
#terminal-output .badge.win    { color: var(--fts-blue); }
#terminal-output .badge.mobile { color: var(--fts-purple); }
#terminal-output .badge.soon   { color: var(--fts-orange); }

/* ─── Banner — clean responsive big title ─── */
#terminal-output .banner {
  margin: 18px 0 14px;
  text-align: center;
  line-height: 1;
}
#terminal-output .banner-title {
  font-family: 'VT323', 'JetBrains Mono', monospace;
  font-size: clamp(48px, 12cqw, 96px);
  letter-spacing: 0.05em;
  color: var(--phosphor);
  font-weight: 400;
  line-height: 0.95;
}
#terminal-output .banner-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(11px, 2cqw, 14px);
  letter-spacing: 0.5em;
  color: var(--text-dim);
  margin-top: 6px;
  padding-left: 0.5em; /* compensate for letter-spacing on last char */
}
#terminal { container-type: inline-size; }

/* ─── Input line — native amber caret ─── */
#terminal-input-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}

#prompt {
  color: var(--prompt-c);
  white-space: nowrap;
  user-select: none;
}

#terminal-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  caret-color: var(--phosphor);
}

/* ─── Ambient vignette (very subtle — clean look) ─── */
#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 51;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0, var(--vignette-a)) 100%);
}

/* ─── Top-right controls (theme toggle + skip link) ─── */
#top-controls {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 70;
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
}

#theme-toggle,
#skip-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--chip-border);
  border-radius: 6px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

#theme-toggle:hover,
#skip-link:hover {
  color: var(--phosphor);
  border-color: var(--phosphor);
}

#skip-link .skip-arrow { transition: transform 200ms ease; }
#skip-link:hover .skip-arrow { transform: translateX(3px); }

/* Theme button — show the icon + label for the currently active theme */
#theme-toggle .when-light { display: none; }
body.light #theme-toggle .when-dark { display: none; }
body.light #theme-toggle .when-light { display: inline-flex; }
#theme-toggle .when-dark { display: inline-flex; }
#theme-toggle .theme-icon { flex-shrink: 0; }

/* ─── Hint ─── */
#hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.05em;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.7;
  pointer-events: none;
  text-align: center;
}

#hint kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--chip-border);
  border-radius: 3px;
  color: var(--phosphor);
  font-family: inherit;
  font-size: 11px;
}

#hint .dot { color: var(--chip-border); }

/* ─── Selection ─── */
::selection { background: var(--phosphor); color: var(--bg); }

/* ─── Responsive ─── */

/* Tablet — pull controls in, keep terminal usable */
@media (max-width: 1024px) {
  #terminal { font-size: 13.5px; padding: 22px 26px; }
}

/* Mobile — compact everything */
@media (max-width: 760px) {
  #terminal { font-size: 12.5px; padding: 18px 20px; }
  #top-controls { top: 12px; right: 12px; gap: 6px; }
  #theme-toggle, #skip-link { height: 32px; padding: 0 10px; font-size: 11px; gap: 6px; }
  #theme-toggle .theme-label { display: none; }
  #theme-toggle { padding: 0 10px; }
  #skip-link span:first-child { display: none; }
  #skip-link::before { content: 'main'; }
  #hint {
    font-size: 10px;
    bottom: 14px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 92vw;
    padding: 0 12px;
  }
  #hint kbd { font-size: 10px; padding: 1px 4px; }
}

/* Phone landscape / short screens */
@media (max-height: 560px) {
  #terminal { padding: 14px 18px; }
  #hint { bottom: 8px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #terminal,
  body {
    transition: none;
  }
}

/* ─── Whiteboard panel ─────────────────────────────────────────────────────── */

#terminal { position: relative; }  /* needed so #wb-panel can absolute-fill it */

#wb-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fffbf0;
  z-index: 100;
  border-radius: 6px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
#wb-panel.wb-hidden { display: none; }

/* ─── Toolbar ─── */
#wb-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  height: 44px;
  background: #1a1209;
  border-bottom: 2px solid #f1c40f;
  flex-shrink: 0;
  overflow: visible;   /* all items must fit — no hidden overflow */
}

.wb-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #f1c40f;
  letter-spacing: 0.10em;
  white-space: nowrap;
  flex-shrink: 0;
}

.wb-sep {
  width: 1px;
  height: 20px;
  background: rgba(241, 196, 15, 0.28);
  margin: 0 1px;
  flex-shrink: 0;
}

.wb-spacer { flex: 1; min-width: 0; }

/* Tool / size / action buttons */
.wb-btn {
  height: 26px;
  padding: 0 7px;
  background: rgba(241, 196, 15, 0.08);
  border: 1px solid rgba(241, 196, 15, 0.28);
  border-radius: 3px;
  color: #c8a840;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.wb-btn:hover,
.wb-btn.wb-active {
  background: rgba(241, 196, 15, 0.22);
  border-color: #f1c40f;
  color: #f1c40f;
}

.wb-exit-btn { color: #c07060; border-color: rgba(231, 76, 60, 0.4); }
.wb-exit-btn:hover {
  background: rgba(231, 76, 60, 0.18);
  border-color: #e74c3c;
  color: #e74c3c;
}

/* Color swatches */
.wb-color {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: transform 140ms, box-shadow 140ms;
}
.wb-color:hover { transform: scale(1.18); }
.wb-color.wb-active {
  border-color: #f1c40f;
  transform: scale(1.22);
  box-shadow: 0 0 0 2px #1a1209;
}

/* ─── Drawing canvas ─── */
#wb-canvas {
  flex: 1;
  width: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;   /* block browser pan/zoom while finger draws */
}