/* IBM VGA 9x16 from The Ultimate Oldschool PC Font Pack (VileR, CC BY-SA 4.0).
   Full CP437 coverage: box drawing, block elements, the works. See fonts/FONT-LICENSE.TXT */
@font-face {
  font-family: 'IBM VGA';
  src: url('../fonts/WebPlus_IBM_VGA_9x16.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  --bg: #0a0a0c;
  --phone: #2b2b30;
  --phone-dark: #1a1a1e;
  --phone-key: #3a3a41;
  --phone-key-text: #e8e8e0;
  --lcd: #9db38a;
  --lcd-text: #1c2a14;
  --status-bg: #1c1c22;
  --status-fg: #9a9a9a;
  --term-font: 'IBM VGA', 'Perfect DOS VGA 437', 'Consolas', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg) radial-gradient(ellipse at center, #15151c 0%, #050506 70%);
  color: #ccc;
  font-family: var(--term-font);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hidden { display: none !important; }

/* ============================ PHONE ============================ */
.phone { display: flex; align-items: center; justify-content: center; padding: 20px; }
.phone-body {
  width: 320px;
  background: linear-gradient(180deg, #34343a, var(--phone) 30%, #202024);
  border-radius: 28px;
  padding: 22px 22px 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.6);
  border: 2px solid #111;
}
.phone-brand {
  text-align: center;
  letter-spacing: 4px;
  font-size: 15px;
  color: #b9b9b0;
  margin-bottom: 14px;
}
.phone-brand span { color: #d4a24c; }
.phone-display {
  background: var(--lcd);
  color: var(--lcd-text);
  border-radius: 6px;
  padding: 8px 12px;
  border: 3px solid #101012;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
  font-size: 16px;
  min-height: 74px;
}
.phone-status { font-size: 14px; letter-spacing: 2px; opacity: .8; }
.phone-number { font-size: 34px; letter-spacing: 3px; margin-top: 2px; }
.dialpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 14px;
}
.dialpad button, .phone-actions button {
  font-family: var(--term-font);
  border: none;
  cursor: pointer;
  user-select: none;
}
.dialpad button {
  background: linear-gradient(180deg, #464650, var(--phone-key));
  color: var(--phone-key-text);
  border-radius: 10px;
  height: 54px;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 4px 0 #15151a, 0 6px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dialpad button small { font-size: 11px; letter-spacing: 2px; color: #9a9aa0; margin-top: 1px; }
.dialpad button:active, .dialpad button.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #15151a, inset 0 1px 0 rgba(255,255,255,.12); }
.phone-actions { display: flex; gap: 10px; align-items: stretch; }
.btn-dial {
  flex: 1;
  background: linear-gradient(180deg, #4caf50, #2e7d32);
  color: #fff;
  font-size: 24px;
  letter-spacing: 4px;
  border-radius: 10px;
  height: 52px;
  box-shadow: 0 4px 0 #1b4d1e, 0 6px 8px rgba(0,0,0,.5);
}
.btn-dial:active { transform: translateY(3px); box-shadow: 0 1px 0 #1b4d1e; }
.btn-dial.hang { background: linear-gradient(180deg, #e53935, #b71c1c); box-shadow: 0 4px 0 #6d1010, 0 6px 8px rgba(0,0,0,.5); }
.btn-dial:disabled { opacity: .6; cursor: default; }
.btn-small {
  width: 60px;
  background: linear-gradient(180deg, #464650, var(--phone-key));
  color: #cfcfc8;
  border-radius: 10px;
  font-size: 16px;
  letter-spacing: 2px;
  box-shadow: 0 4px 0 #15151a, 0 6px 8px rgba(0,0,0,.5);
}
.btn-small.off { color: #777; text-decoration: line-through; }
.phone-hint { margin-top: 14px; text-align: center; font-size: 14px; color: #7a7a80; line-height: 1.2; }

/* ============================ TERMINAL ============================ */
.terminal {
  width: min(100vw, 1000px);
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 0;
}
.crt {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
  border-radius: 14px;
  border: 8px solid #2a2a2e;
  box-shadow: 0 0 0 2px #111, 0 30px 80px rgba(0,0,0,.8), inset 0 0 60px rgba(0,0,0,.9);
  overflow: hidden;
}
.screen {
  position: absolute; inset: 0;
  margin: 0;
  padding: 14px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--term-font);
  font-size: clamp(14px, 1.9vw, 22px);   /* overridden by fitTerminal() to fit 80 columns */
  line-height: 1;
  white-space: pre-wrap;
  word-break: break-all;
  color: #aaa;
  text-shadow: 0 0 1px currentColor;
  scrollbar-width: thin;
  scrollbar-color: #333 #000;
}
.screen::-webkit-scrollbar { width: 8px; }
.screen::-webkit-scrollbar-thumb { background: #333; }
.scanlines {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0px, rgba(0,0,0,.09) 1px, transparent 2px, transparent 4px);
}
.crt::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.03) 0%, rgba(0,0,0,.35) 100%);
}
.cursor { display: inline-block; width: .6em; background: currentColor; color: #aaa; animation: blink 1s steps(1) infinite; vertical-align: text-bottom; }
@keyframes blink { 50% { opacity: 0; } }
.inp { color: #fff !important; }

.statusbar {
  display: flex; gap: 14px; align-items: center;
  padding: 6px 12px;
  background: var(--status-bg);
  color: var(--status-fg);
  font-size: 16px;
  letter-spacing: 1px;
  border-radius: 0 0 8px 8px;
  margin: 0 10px;
}
.statusbar span { white-space: nowrap; }
#st-user { flex: 1; color: #ccc; overflow: hidden; text-overflow: ellipsis; }
#st-time.low { color: #ff5555; animation: blink 1s steps(1) infinite; }
.st-btn {
  font-family: var(--term-font);
  background: #2a2a32; color: #bbb; border: 1px solid #444; border-radius: 4px;
  padding: 2px 8px; cursor: pointer; font-size: 14px; letter-spacing: 1px;
}
.st-btn:hover { background: #3a3a44; color: #fff; }
.st-btn.off { color: #666; text-decoration: line-through; }
.hidden-input { position: fixed; opacity: 0; left: -9999px; top: 0; width: 1px; height: 1px; }

/* ============================ COLOR SCHEMES ============================ */
/* Full 16-colour ANSI palette */
.scheme-ansi .c00 { color: #000000; } .scheme-ansi .c08 { color: #555555; }
.scheme-ansi .c01 { color: #0000aa; } .scheme-ansi .c09 { color: #5555ff; }
.scheme-ansi .c02 { color: #00aa00; } .scheme-ansi .c10 { color: #55ff55; }
.scheme-ansi .c03 { color: #00aaaa; } .scheme-ansi .c11 { color: #55ffff; }
.scheme-ansi .c04 { color: #aa0000; } .scheme-ansi .c12 { color: #ff5555; }
.scheme-ansi .c05 { color: #aa00aa; } .scheme-ansi .c13 { color: #ff55ff; }
.scheme-ansi .c06 { color: #aa5500; } .scheme-ansi .c14 { color: #ffff55; }
.scheme-ansi .c07 { color: #aaaaaa; } .scheme-ansi .c15 { color: #ffffff; }

/* Monochrome schemes: colours map to intensity */
.scheme-green { color: #33ff33; }
.scheme-green [class^="c0"] { color: #22aa22; }
.scheme-green .c00 { color: #001100; }
.scheme-green .c07 { color: #33dd33; }
.scheme-green [class^="c1"] { color: #66ff66; text-shadow: 0 0 6px #33ff33; }
.scheme-green .cursor, .scheme-green .inp { color: #99ff99 !important; }

.scheme-amber { color: #ffb000; }
.scheme-amber [class^="c0"] { color: #b07a00; }
.scheme-amber .c00 { color: #1a1000; }
.scheme-amber .c07 { color: #e6a000; }
.scheme-amber [class^="c1"] { color: #ffd166; text-shadow: 0 0 6px #ffb000; }
.scheme-amber .cursor, .scheme-amber .inp { color: #ffe0a0 !important; }

.scheme-white { color: #d0d0d0; }
.scheme-white [class^="c0"] { color: #8a8a8a; }
.scheme-white .c00 { color: #111; }
.scheme-white .c07 { color: #c8c8c8; }
.scheme-white [class^="c1"] { color: #ffffff; text-shadow: 0 0 6px #ccc; }
.scheme-white .cursor, .scheme-white .inp { color: #fff !important; }

@media (max-width: 700px) {
  .terminal { padding: 4px 4px 0; }
  .screen { padding: 8px; font-size: 13px; }
  .statusbar { font-size: 12px; gap: 8px; }
}