/* RobCo TermLink — Fallout 4 style terminal (shared by the Fallout Fudged terminal and character creator) */

:root {
  --g: #1bff80;
  --g-dim: #0f9d55;
  --g-faint: rgba(27, 255, 128, .14);
  --bg: #021208;
  --glow: 0 0 2px rgba(27, 255, 128, .9), 0 0 9px rgba(27, 255, 128, .55), 0 0 22px rgba(27, 255, 128, .25);
  --font: "Monofonto", "Lucida Console", "DejaVu Sans Mono", "Liberation Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #050605; }
body { font-family: var(--font); color: var(--g); font-size: clamp(15px, 1.35vw + 7px, 22px); letter-spacing: .02em; overflow: hidden; }
.hidden { display: none !important; }

/* ----- monitor ----- */
.crt {
  position: fixed; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px;
  padding: clamp(8px, 2.2vmin, 28px);
  background:
    radial-gradient(120% 90% at 50% 0%, #2b2d2a, #0c0d0c 70%),
    #0c0d0c;
}
.screen {
  position: relative; overflow-y: auto; overflow-x: hidden; scroll-behavior: auto;
  background:
    radial-gradient(130% 110% at 50% 45%, #052a14 0%, var(--bg) 55%, #000 120%);
  border-radius: clamp(14px, 3.4vmin, 44px);
  padding: clamp(18px, 4vmin, 52px) clamp(18px, 5vw, 80px) 40px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .8), inset 0 0 90px rgba(0, 0, 0, .95), inset 0 0 160px rgba(27, 255, 128, .06), 0 0 0 3px #1a1b19, 0 0 0 5px #3a3c38;
  text-shadow: var(--glow);
  animation: flicker 4s infinite steps(1);
  scrollbar-width: thin; scrollbar-color: var(--g) transparent;
}
.screen::-webkit-scrollbar { width: 12px; }
.screen::-webkit-scrollbar-track { background: transparent; }
.screen::-webkit-scrollbar-thumb { background: var(--g); border-radius: 6px; border: 3px solid var(--bg); box-shadow: var(--glow); }
.screen::selection, .screen ::selection { background: var(--g); color: #02150a; text-shadow: none; }
.screen:focus { outline: none; }

/* CRT overlays sit on top of the screen but are pointer-transparent */
.fx { position: fixed; pointer-events: none; z-index: 20; }
.fx-scan { inset: 0; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .28) 2px 3px); mix-blend-mode: multiply; }
.fx-roll { left: 0; right: 0; top: -20%; height: 18%; background: linear-gradient(to bottom, transparent, rgba(27, 255, 128, .06), transparent); animation: roll 7s linear infinite; }
.fx-vig { inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); border-radius: 0; }
@keyframes roll { to { transform: translateY(650%); } }
@keyframes flicker { 0%, 100% { filter: brightness(1); } 47% { filter: brightness(1); } 48% { filter: brightness(1.06); } 50% { filter: brightness(.97); } 52% { filter: brightness(1); } }

/* ----- bezel bar ----- */
.bezel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #8f948b; text-shadow: none; padding: 0 6px; }
.bezel .hint b { color: #c6cabf; font-weight: normal; border: 1px solid #5a5d57; border-radius: 3px; padding: 1px 5px; margin: 0 2px; }
.bezel .tools { display: flex; gap: 8px; align-items: center; }
.tool { font: inherit; letter-spacing: inherit; text-transform: uppercase; color: #c6cabf; background: #1f201e; border: 1px solid #5a5d57; border-radius: 4px; padding: 5px 10px; cursor: pointer; text-decoration: none; }
.tool:hover, .tool:focus-visible { background: #c6cabf; color: #111; outline: none; }
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--g); box-shadow: 0 0 8px var(--g); margin-right: 8px; vertical-align: middle; }

/* ----- power-on gate ----- */
.gate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: #000; text-align: center; cursor: pointer; padding: 20px; }
.gate .box { color: var(--g); text-shadow: var(--glow); }
.gate h1 { font-size: 1.15rem; font-weight: normal; letter-spacing: .12em; margin: 0 0 8px; }
.gate p { margin: 6px 0; }
.gate .go { margin-top: 28px; animation: blink 1.1s steps(1) infinite; }
.gate.off { opacity: 0; pointer-events: none; transition: opacity .35s; }
@keyframes blink { 50% { opacity: 0; } }

/* ----- text ----- */
.ln { min-height: 1.45em; line-height: 1.45; white-space: pre-wrap; max-width: 78ch; }
.ln.h { margin-top: .9em; padding-bottom: 2px; text-transform: uppercase; border-bottom: 2px solid var(--g); display: table; }
.ln.li { padding-left: 1.6ch; text-indent: -1.6ch; margin: .25em 0; }
.ln.li::before { content: "> "; }
.ln.dim { color: var(--g-dim); }
.ln.rule { border-top: 2px solid var(--g); margin: .5em 0 .9em; min-height: 0; height: 0; }
.cursor::after { content: "█"; animation: blink .9s steps(1) infinite; margin-left: 2px; }

/* ----- menu (selected row is a solid inverse block, like the game) ----- */
.menu { list-style: none; margin: .6em 0 0; padding: 0; display: grid; gap: 2px; max-width: 60ch; }
.menu-item {
  display: block; width: 100%; text-align: left; font: inherit; letter-spacing: inherit; text-transform: uppercase;
  color: var(--g); background: transparent; border: 0; padding: .2em .7ch; cursor: pointer; text-shadow: inherit;
}
.menu-item::before { content: "> "; }
.menu-item.sel, .menu-item:focus-visible { background: var(--g); color: #02150a; text-shadow: none; outline: none; }
.menu-head { margin: 1em 0 .2em; color: var(--g-dim); }
.menu-head::before { content: "-- "; } .menu-head::after { content: " --"; }

/* ----- tables ----- */
table { border-collapse: collapse; width: 100%; max-width: 78ch; margin: .8em 0; }
th, td { border: 1px solid var(--g-dim); padding: .35em .7ch; text-align: left; vertical-align: top; font-size: .9em; }
th { background: var(--g-faint); text-transform: uppercase; font-weight: normal; }

/* ----- character creator widgets ----- */
.terminal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; border-bottom: 2px solid var(--g); padding-bottom: 14px; }
.header-info div { line-height: 1.5; }
.header-info div:first-child { font-size: 1.05em; }
.vault-tec-logo-container { flex: none; }
.vault-tec-svg { width: clamp(110px, 16vw, 200px); height: auto; fill: var(--g); filter: drop-shadow(0 0 6px var(--g)); opacity: .9; }
h2, h3 { font-weight: normal; text-transform: uppercase; margin: 1em 0 .5em; display: table; border-bottom: 2px solid var(--g); }
h2 { font-size: 1.15em; } h3 { font-size: 1em; }
p { line-height: 1.5; margin: .5em 0; max-width: 78ch; }
.tabs-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0; }
.tab-btn, .btn, .controls button {
  font: inherit; letter-spacing: inherit; text-transform: uppercase; color: var(--g); background: transparent; text-shadow: inherit;
  border: 1px solid var(--g-dim); cursor: pointer; padding: .35em 1.2ch;
}
.tab-btn:hover, .btn:hover, .controls button:hover:not(:disabled), .tab-btn:focus-visible, .btn:focus-visible, .controls button:focus-visible,
.tab-btn.active { background: var(--g); color: #02150a; text-shadow: none; outline: none; border-color: var(--g); }
.btn { margin-top: 14px; }
.tab-content { display: none; } .tab-content.active { display: block; }
.controls { display: flex; gap: 8px; justify-content: center; }
.controls button { width: 2.4em; height: 2.1em; padding: 0; }
.points-pool { border: 1px solid var(--g-dim); background: var(--g-faint); padding: .6em 1.2ch; margin: .8em 0; max-width: 78ch; }
.points-pool > span:first-of-type { font-weight: bold; }
.identity-table td { text-align: left; }
#tab-attributes td:not(:first-child), #skills-table td:not(:first-child), #tab-attributes th, #skills-table th { text-align: center; }
input[type="text"], select {
  width: 100%; font: inherit; letter-spacing: inherit; text-transform: uppercase; color: var(--g); background: rgba(0, 0, 0, .35);
  border: 1px solid var(--g-dim); padding: .3em 1ch; text-shadow: inherit; caret-color: var(--g); border-radius: 0;
}
input[type="text"]:focus, select:focus { outline: none; border-color: var(--g); box-shadow: 0 0 12px rgba(27, 255, 128, .45); background: var(--g-faint); }
select option { background: #021208; color: var(--g); }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; margin-top: 10px; }
.checkbox-item { display: flex; gap: 1.2ch; align-items: flex-start; border: 1px solid var(--g-dim); padding: .5em 1ch; cursor: pointer; }
.checkbox-item:hover, .checkbox-item:has(input:checked) { background: var(--g-faint); border-color: var(--g); }
.checkbox-item input { appearance: none; -webkit-appearance: none; flex: none; width: 1.1em; height: 1.1em; margin: .25em 0 0; border: 2px solid var(--g); background: transparent; cursor: pointer; display: grid; place-items: center; }
.checkbox-item input:checked { background: var(--g); box-shadow: var(--glow); }
.checkbox-item input:focus-visible { outline: 2px dashed var(--g); outline-offset: 3px; }
.help-text { font-size: .8em; opacity: .75; margin-top: 2px; }
.summary-box { border: 1px solid var(--g-dim); padding: 14px; margin-top: 14px; background: var(--g-faint); }
.perk-desc-block { border-left: 3px solid var(--g); padding-left: 1.2ch; margin: .8em 0; }
.footer-legal { margin-top: 36px; padding-top: 12px; border-top: 1px dashed var(--g-dim); text-align: center; font-size: .7em; opacity: .7; }

@media (max-width: 640px) { .bezel .hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .screen, .fx-roll, .gate .go, .cursor::after { animation: none !important; } }

@media print {
  html, body { height: auto; background: #fff; overflow: visible; }
  .crt { position: static; display: block; padding: 0; background: none; }
  .screen { overflow: visible; box-shadow: none; background: #fff; color: #000; text-shadow: none; animation: none; padding: 0; }
  .fx, .bezel, .tabs-bar, .btn, .gate, .controls { display: none !important; }
  .tab-content { display: none !important; } #tab-derived { display: block !important; }
  .terminal-header, h2, h3, th, td, .summary-box, .perk-desc-block { border-color: #000; color: #000; }
  .vault-tec-svg { fill: #000; filter: none; }
  th { background: #eee; }
}

/* CRT "turn on" effect */
.screen.boot { animation: turnon .7s ease-out, flicker 4s infinite steps(1) .7s; }
@keyframes turnon { 0% { transform: scaleY(.02); filter: brightness(4); } 45% { transform: scaleY(.02) scaleX(1); filter: brightness(3); } 100% { transform: none; filter: brightness(1); } }