@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ---------- CRT animations ---------- */
@keyframes flicker {
  0% { opacity:.27861 } 5% { opacity:.34769 } 10% { opacity:.23604 } 15% { opacity:.90626 }
  20% { opacity:.18128 } 25% { opacity:.83891 } 30% { opacity:.65583 } 35% { opacity:.67807 }
  40% { opacity:.26559 } 45% { opacity:.84693 } 50% { opacity:.96019 } 55% { opacity:.08594 }
  60% { opacity:.20313 } 65% { opacity:.71988 } 70% { opacity:.53455 } 75% { opacity:.37288 }
  80% { opacity:.71428 } 85% { opacity:.70419 } 90% { opacity:.7003 } 95% { opacity:.36108 }
  100% { opacity:.24387 }
}
@keyframes textShadow {
  0%{text-shadow:.439px 0 1px rgba(0,30,255,.5), -.439px 0 1px rgba(255,0,80,.3), 0 0 3px}
  5%{text-shadow:2.793px 0 1px rgba(0,30,255,.5), -2.793px 0 1px rgba(255,0,80,.3), 0 0 3px}
  10%{text-shadow:.03px 0 1px rgba(0,30,255,.5), -.03px 0 1px rgba(255,0,80,.3), 0 0 3px}
  15%{text-shadow:.402px 0 1px rgba(0,30,255,.5), -.402px 0 1px rgba(255,0,80,.3), 0 0 3px}
  20%{text-shadow:3.479px 0 1px rgba(0,30,255,.5), -3.479px 0 1px rgba(255,0,80,.3), 0 0 3px}
  25%{text-shadow:1.613px 0 1px rgba(0,30,255,.5), -1.613px 0 1px rgba(255,0,80,.3), 0 0 3px}
  30%{text-shadow:.702px 0 1px rgba(0,30,255,.5), -.702px 0 1px rgba(255,0,80,.3), 0 0 3px}
  35%{text-shadow:3.897px 0 1px rgba(0,30,255,.5), -3.897px 0 1px rgba(255,0,80,.3), 0 0 3px}
  40%{text-shadow:3.871px 0 1px rgba(0,30,255,.5), -3.871px 0 1px rgba(255,0,80,.3), 0 0 3px}
  45%{text-shadow:2.231px 0 1px rgba(0,30,255,.5), -2.231px 0 1px rgba(255,0,80,.3), 0 0 3px}
  50%{text-shadow:.081px 0 1px rgba(0,30,255,.5), -.081px 0 1px rgba(255,0,80,.3), 0 0 3px}
  55%{text-shadow:2.376px 0 1px rgba(0,30,255,.5), -2.376px 0 1px rgba(255,0,80,.3), 0 0 3px}
  60%{text-shadow:2.202px 0 1px rgba(0,30,255,.5), -2.202px 0 1px rgba(255,0,80,.3), 0 0 3px}
  65%{text-shadow:2.864px 0 1px rgba(0,30,255,.5), -2.864px 0 1px rgba(255,0,80,.3), 0 0 3px}
  70%{text-shadow:.489px 0 1px rgba(0,30,255,.5), -.489px 0 1px rgba(255,0,80,.3), 0 0 3px}
  75%{text-shadow:1.895px 0 1px rgba(0,30,255,.5), -1.895px 0 1px rgba(255,0,80,.3), 0 0 3px}
  80%{text-shadow:.083px 0 1px rgba(0,30,255,.5), -.083px 0 1px rgba(255,0,80,.3), 0 0 3px}
  85%{text-shadow:.098px 0 1px rgba(0,30,255,.5), -.098px 0 1px rgba(255,0,80,.3), 0 0 3px}
  90%{text-shadow:3.443px 0 1px rgba(0,30,255,.5), -3.443px 0 1px rgba(255,0,80,.3), 0 0 3px}
  95%{text-shadow:2.184px 0 1px rgba(0,30,255,.5), -2.184px 0 1px rgba(255,0,80,.3), 0 0 3px}
  100%{text-shadow:2.621px 0 1px rgba(0,30,255,.5), -2.621px 0 1px rgba(255,0,80,.3), 0 0 3px}
}

/* ---------- CRT overlay ---------- */
/* ---------- CRT overlay ---------- */
.crt::after {
  content:""; position:absolute; inset:0;
  background: rgba(18,16,16,.08);
  opacity:0; z-index:2; pointer-events:none;
  animation: flicker .15s infinite;
}
.crt::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.25) 50%),
    linear-gradient(90deg, rgba(255,0,0,.06), rgba(0,255,0,.02), rgba(0,0,255,.06));
  background-size: 100% 2px, 3px 100%;
}
.crt { animation: textShadow 1.6s infinite; }

/* ---------- Variables & base ---------- */
:root {
  --mobile-border: 10px;   /* small outer border on mobile */
  --sb-reserve: 14px;      /* reserved space for overlay scrollbars */
  --term-fg: #7cff86;
  --term-bg: rgba(45,45,45,.95);  /* default terminal grey */
  --page-bg: #1a1a1a;             /* page backdrop */
  --bezel-bg: rgba(30,30,30,.9);
  --grid-accent: rgba(124,255,134,.3);

  /* Mobile line-length cap (in characters) */
  --mobile-max-ch: 48;
}
body {
  background: var(--page-bg);
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  color: var(--term-fg);
}

/* ---------- Terminal layout ---------- */
.terminal-screen{
  position:relative; height: clamp(520px, 78vh, 860px);
  padding: 1rem; border-radius: .75rem;
  background: var(--term-bg);
  color: var(--term-fg);
  text-shadow: 0 0 6px rgba(124,255,134,.35);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:
    0 0 0 1px rgba(124,255,134,.08),
    0 10px 40px rgba(0,0,0,.45);
  /* Prevent layout thrash during font/typing on mobile */
  contain: content;
}

/* Optional bezel styling for header/footer */
.terminal-header{
  text-align:center; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:.5rem; flex:0 0 auto;
  background: var(--bezel-bg);
  padding:.25rem .5rem;
  border-bottom: 1px solid var(--grid-accent);
  border-top-left-radius:.5rem; border-top-right-radius:.5rem;
}

.terminal-body{
  position:relative; z-index:3; flex:1 1 auto;
  overflow-y: scroll; scrollbar-gutter: stable both-edges;
  white-space: pre-wrap; line-height:1;
  padding-inline-end: 0;
  backdrop-filter: blur(.1px);
  min-height: 0;                 /* key for flex children that scroll */
}
.terminal-body > div { margin: 0 0 .1rem 0; }
.terminal-body > div:last-child { margin-bottom: 0; }

.terminal-footer{
  position:relative; z-index:3; flex:0 0 auto;
  border-top:1px solid var(--grid-accent);
  padding-top:.75rem; margin-top:.75rem;
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;
  background: var(--bezel-bg);
  border-bottom-left-radius:.5rem; border-bottom-right-radius:.5rem;
}
.terminal-footer a{
  color: var(--term-fg);
  text-decoration:none; border-bottom:1px dotted currentColor;
}
.terminal-footer a:hover{ text-decoration:underline; }

/* caret */
.caret{ display:inline-block; width:.6ch; height:1em; vertical-align:-0.15em; background:currentColor; opacity:.85; }
@keyframes blink{ 50%{opacity:.15} }
.blink{ animation: blink 1.1s steps(1) infinite; }

/* ---------- Scrollbar theme ---------- */
/* Firefox */
.terminal-body{
  scrollbar-width: thin;
  scrollbar-color: rgba(124,255,134,.65) rgba(12,16,12,.25);
  -webkit-overflow-scrolling: touch;
}
/* WebKit */
.terminal-body::-webkit-scrollbar{ width:10px; height:10px; }
.terminal-body::-webkit-scrollbar-track{
  background: linear-gradient(180deg, rgba(12,16,12,.22), rgba(6,10,6,.22));
  border-radius:8px; box-shadow: inset 0 0 0 1px rgba(124,255,134,.12);
}
.terminal-body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(124,255,134,.60), rgba(124,255,134,.38));
  border:2px solid rgba(20,24,20,.95);
  border-radius:8px; box-shadow:0 0 8px rgba(124,255,134,.25);
}
.terminal-body::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(124,255,134,.80), rgba(124,255,134,.55));
}
.terminal-body::-webkit-scrollbar-corner{ background:transparent; }

/* ---------- Highlight palette ---------- */
.ink-purple { color:#c084fc; }
.ink-gold   { color:#facc15; }
.ink-amber  { color:#fbbf24; }
.ink-red    { color:#f87171; }
.ink-crimson{ color:#ef4444; }
.ink-blue   { color:#60a5fa; }
.ink-cyan   { color:#22d3ee; }
.ink-green  { color:#86efac; }
.ink-orange { color:#fb923c; }
.ink-pink   { color:#f472b6; }
.ink-gray   { color:#9ca3af; }

/* ---------- Selection styling ---------- */
::selection{
  background: rgba(124,255,134,.22);
  color: var(--term-fg);
  text-shadow:none;
}

/* ---------- Optional theme variants ---------- */
.terminal-screen.theme-green{ --term-bg: rgba(40, 50, 40, .95); }
.terminal-screen.theme-grey{  --term-bg: rgba(45,45,45,.95); }

/* ---------- Mobile tweaks ---------- */
@media (max-width:576px){
  /* Make space near edges so bezel + lights stay in view */
  .container.py-5{ padding-top:8px !important; padding-bottom:8px !important; }
  .container{ padding-left:6px; padding-right:6px; }

  /* Cap the device-facing width in characters for stable layout */
  .terminal-bezel,
  .terminal-screen{
    max-width: calc(var(--mobile-max-ch) * 1ch);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  /* Keep the entire unit in view: slightly shorter than full viewport */
  .terminal-screen{
    height: calc(96dvh - (var(--mobile-border) * 2)
                 - env(safe-area-inset-top, 0px)
                 - env(safe-area-inset-bottom, 0px));
    margin: var(--mobile-border) auto;
    border-radius:10px;
  }

  /* Reserve scrollbar space so no text jump */
  .terminal-body{
    padding-inline-end: var(--sb-reserve);
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .crt{ animation:none !important; }
  .crt::after{ animation:none !important; opacity:.05; }
  .blink{ animation:none; opacity:.6; }
}

/* ===== Bezel + Lights (bottom-right) ===== */
.terminal-bezel {
  background: linear-gradient(180deg, #d6d6ce 0%, #c8c8c0 60%, #bfbfb5 100%);
  border: 2px solid #a3a39a;
  border-radius: 16px;
  padding: 14px;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.25),
    inset 0 -1px 2px rgba(0,0,0,.15),
    0 8px 24px rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.terminal-bezel .terminal-screen { border-radius: 10px; }

.bezel-panel {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 32px;          
  margin-top: auto;
  padding-right: 32px;
}

.bezel-right { display:flex; align-items:flex-end; gap:32px; }
.bezel-lights { display:flex; align-items:center; gap:10px; pointer-events:none; margin-bottom:6px; }

.bezel-label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: #2b2b2b;
  background: linear-gradient(180deg, #e6e6de 0%, #cfcfc5 100%);
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.45),
    inset 0 -1px 2px rgba(0,0,0,.25),
    0 0 0 1px rgba(0,0,0,.25);
}

.crt-led { width:12px; height:12px; border-radius:50%; position:relative;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.35); }
.crt-led::after { content:""; position:absolute; top:2px; left:2px; width:5px; height:5px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 60%); }
.crt-led--green { background: radial-gradient(circle at 60% 60%, #22c55e, #14532d 70%);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.5), 0 0 6px rgba(34,197,94,.55), 0 0 10px rgba(34,197,94,.35); }
.crt-led--amber { background: radial-gradient(circle at 60% 60%, #f59e0b, #7c3a00 70%); opacity:.15; }
/* Amber = blinks rapidly ONLY while typing */
@keyframes crt-amber-rapid {
  0%, 100% { opacity: .2; }
  40%, 60% { opacity: 1; filter: drop-shadow(0 0 6px rgba(245,158,11,.9)); }
}
.is-typing .crt-led--amber { animation: crt-amber-rapid .22s infinite; opacity: 1; }

.crt-led--red { background: radial-gradient(circle at 60% 60%, #ef4444, #7f1d1d 70%); animation: crt-red-alarm 1.2s infinite; }
@keyframes crt-red-alarm {
  0%,20%{opacity:1; filter:drop-shadow(0 0 10px rgba(239,68,68,.85))}
  21%,40%{opacity:.15; filter:none}
  41%,60%{opacity:1; filter:drop-shadow(0 0 10px rgba(239,68,68,.85))}
  61%,100%{opacity:.15; filter:none}
}

/* Logo font (separate from VT323) */
.bezel-logo {
  font-family: 'Cinzel Decorative', cursive;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: #222222;
  text-shadow: 0 0 2px rgba(255,255,255,0.2);
  user-select: none;
}

/* Mobile bezel tweaks */
@media (max-width: 576px){
  .terminal-bezel { padding: 10px; border-radius: 14px; gap: 10px; }
  .bezel-right { gap: 8px; }
  .bezel-label { font-size: .85rem; padding: 2px 6px; }
}
/* ===== Tight CRT frame mask (fix gap between bezel and screen) ===== */
:root{
  --bezel-radius: 16px;              /* outer plastic curve (matches your .terminal-bezel) */
  --frame-gap: 8px;                  /* thickness of the black mask between bezel and glass */
  --frame-radius: calc(var(--bezel-radius) - 2px);
  --screen-radius: calc(var(--frame-radius) - var(--frame-gap));
}

/* Make sure the bezel has the expected rounding and no inner color shows */
.terminal-bezel{
  position: relative;                 /* already present later; keep it */
  padding: 14px;                      /* uniform on all sides */
  border-radius: var(--bezel-radius); /* already defined below */
}

/* ---- Terminal Black Inner Frame ---- */
.terminal-frame {
  background: #000;                
  padding: 20px;                   
  border-radius: 15px;            
  display: flex;
  flex-direction: column;
  gap: 0;                         
}
.terminal-frame .terminal-screen {
  border-radius: 42px;             
  box-shadow: none;               
}


/* Desktop: thicken top/left/right so they visually match the bottom */
@media (min-width: 577px){
  .terminal-bezel{
    /* more “plastic” around the screen */
    padding: 38px 38px 20px 38px;  /* T R B L */
    border-radius: 18px;
  }
  .terminal-frame{
    /* thicker black inner frame all around */
    padding: 28px;
    border-radius: 18px;
  }
}
/* Tighten the outer vertical space created by .py-5 */
.container.py-5 {
  padding-top: 20px !important;   /* was ~3rem */
  padding-bottom: 2px !important;
}

/* Make sure the bezel itself isn't adding extra vertical margin */
.terminal-bezel { margin-top: 0; margin-bottom: 0; }

/* Slightly reduce internal gaps so the overall block is shorter */
.terminal-header { margin-bottom: .25rem; }
.terminal-footer { margin-top: .5rem; padding-top: .5rem; }