/* Old Skool Nerd — BBS terminal page: vintage CRT monitor shell around fTelnet.
   Overlays use pointer-events:none so keyboard/mouse reach the terminal canvas. */
:root {
  --osn-crt-phosphor: #33ff77;
  --osn-crt-case: #2b2b2e;
  --osn-crt-case-2: #1a1a1d;
  --osn-crt-bezel-edge: #444;
}

.osn-bbs-page .osn-post-content { max-width: none; }

.osn-crt {
  margin: 1.6rem auto 1rem;
  max-width: 860px;
  perspective: 1400px;
}

/* Monitor case */
.osn-crt__bezel {
  background: linear-gradient(160deg, var(--osn-crt-case) 0%, var(--osn-crt-case-2) 100%);
  border-radius: 22px;
  padding: 26px 26px 14px;
  box-shadow:
    0 2px 0 #555 inset,
    0 -2px 14px rgba(0,0,0,.6) inset,
    0 18px 40px rgba(0,0,0,.55),
    0 2px 6px rgba(0,0,0,.4);
  border: 1px solid var(--osn-crt-bezel-edge);
}

/* Glass screen */
.osn-crt__screen {
  position: relative;
  background: #000;
  border-radius: 14px / 18px;           /* slight CRT curvature */
  padding: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 2px #0b0b0b,
    0 0 28px rgba(0,0,0,.9) inset;
}

/* fTelnet renders its canvas + controls here */
#fTelnetContainer {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 100%;
}
#fTelnetContainer canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  image-rendering: pixelated;            /* keep CP437 crisp */
}

/* Scanlines */
.osn-crt__scanlines {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.22) 3px,
    rgba(0,0,0,.22) 3px
  );
  mix-blend-mode: multiply;
  animation: osn-scan 8s linear infinite;
}
@keyframes osn-scan { from { background-position-y: 0; } to { background-position-y: 100px; } }

/* Phosphor glow + vignette */
.osn-crt__glow {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: 14px / 18px;
  box-shadow: 0 0 90px rgba(51,255,119,.10) inset, 0 0 14px rgba(0,0,0,.7) inset;
  background: radial-gradient(ellipse at center, rgba(51,255,119,.04) 0%, rgba(0,0,0,.18) 80%, rgba(0,0,0,.42) 100%);
}

/* Bezel chin: power LED + branding */
.osn-crt__panel {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 8px 4px; color: #8a8a90;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.osn-crt__led {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--osn-crt-phosphor);
  box-shadow: 0 0 8px 2px rgba(51,255,119,.8);
  animation: osn-led 3.4s ease-in-out infinite;
}
@keyframes osn-led { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.osn-crt__brand { color: #c8c8cf; font-weight: 700; }
.osn-crt__model { margin-left: auto; opacity: .7; }

.osn-crt__hint {
  max-width: 860px; margin: .4rem auto 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .8rem; opacity: .85;
}
.osn-crt__hint code { background: rgba(127,127,127,.18); padding: 0 .35em; border-radius: 3px; }

/* Be kind to motion-sensitive folks */
@media (prefers-reduced-motion: reduce) {
  .osn-crt__scanlines { animation: none; }
  .osn-crt__led { animation: none; }
}

/* Mobile: drop the heavy frame so the terminal stays readable */
@media (max-width: 640px) {
  .osn-crt__bezel { padding: 10px 10px 6px; border-radius: 12px; }
  .osn-crt__screen { padding: 6px; }
  .osn-crt__scanlines { display: none; }
  .osn-crt__panel { font-size: .62rem; gap: 8px; }
  .osn-crt__model { display: none; }
}

/* The page auto-connects (OSN_fTelnet.Connect()), so hide fTelnet's status/button
   bar for a clean CRT-only view. Reconnect after logoff = reload the page. */
.osn-crt .fTelnetStatusBar { display: none; }

/* fTelnet draws its own fixed-size canvas; clamp the containers so no scrollbar
   appears inside the screen, and keep the canvas within the bezel on small screens */
.osn-crt #fTelnetContainer,
.osn-crt .fTelnetClientContainer { overflow: hidden; max-width: 100%; }