/* ============================================================
   HITEL BBS — Terminal SPA Styles
   All UI is rendered inside xterm.js. This file handles:
   - Page background ("the room behind the CRT monitor")
   - Terminal centering and CRT bezel/glow
   - CRT scanlines + vignette overlays
   - Turnstile overlay (shown over terminal when captcha needed)
   ============================================================ */

@font-face {
  font-family: "NeoDunggeunmo";
  src:
    url("/fonts/NeoDunggeunmo.woff") format("woff"),
    url("/fonts/DungGeunMo.woff2") format("woff2"),
    url("/fonts/DungGeunMo.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

/* Page background — the "room" behind the CRT monitor */
body {
  margin: 0;
  height: 100dvh;
  background: #050510;
  background-image: radial-gradient(ellipse at 50% 30%, #0b0b2e 0%, #050510 70%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* CRT scanlines overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 100;
}

/* CRT vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 72%, rgba(0, 0, 0, 0.28) 100%);
  pointer-events: none;
  z-index: 99;
}

/* Terminal container */
#terminal {
  position: relative;
  z-index: 2;
  /* CRT monitor bezel effect */
  border: 2px solid #1a1a2a;
  outline: 1px solid #2a2a3a;
  outline-offset: 4px;
  /* CRT phosphor glow */
  box-shadow:
    0 0 0 6px #080810,
    0 0 30px rgba(0, 68, 220, 0.7),
    0 0 80px rgba(0, 40, 180, 0.35),
    0 0 120px rgba(0, 20, 100, 0.2),
    inset 0 0 40px rgba(0, 0, 40, 0.6);
}

/* xterm.js font override — Terminal options take precedence, this is a fallback */
.xterm {
  font-family: "NeoDunggeunmo", "D2Coding", "Nanum Gothic Coding", monospace !important;
}

/* ============================================================
   Turnstile overlay
   ============================================================ */

#turnstile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 30, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.turnstile-modal {
  background: #000080;
  border: 2px solid #55FFFF;
  padding: 24px 32px;
  text-align: center;
  color: #AAAAAA;
  font-family: "NeoDunggeunmo", "D2Coding", monospace;
  max-width: 400px;
  box-shadow: 0 0 30px rgba(85, 255, 255, 0.3);
}

.turnstile-title {
  color: #55FFFF;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
}

.turnstile-desc {
  color: #AAAAAA;
  font-size: 12px;
  margin: 0 0 16px;
}

#turnstile-done-btn {
  margin-top: 16px;
  background: #0000AA;
  color: #FFFFFF;
  border: 1px solid #AAAAAA;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 20px;
  cursor: pointer;
}

#turnstile-done-btn:hover {
  background: #FFFFFF;
  color: #000000;
}

/* ============================================================
   Utility
   ============================================================ */

.hidden {
  display: none !important;
}