:root {
  --bg: #0a0d08;
  --green: #b3d188;
  --green-dim: #6f8458;
  --green-faint: #3d4a32;
  --amber: #d9a55d;
  --rust: #b5663a;
  --steel: #7d8794;
  --err: #ff8a80;
  --glow: 0 0 6px rgba(179, 209, 136, .45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: radial-gradient(ellipse at 50% 28%, #10160d 0%, var(--bg) 72%);
  color: var(--green);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; overflow: hidden;
  -webkit-font-smoothing: none;
}

/* CRT scanline overlay + faint flicker */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.18) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: multiply;
  animation: flicker 5s infinite steps(60);
}
@keyframes flicker { 0%,96%{opacity:1} 97%{opacity:.85} 98%{opacity:.95} 100%{opacity:1} }

.crt {
  width: min(440px, 92vw);
  border: 1px solid var(--green-faint);
  background: linear-gradient(180deg, rgba(20,28,16,.55), rgba(10,13,8,.55));
  padding: 22px 22px 28px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 44px rgba(0,0,0,.7), inset 0 0 60px rgba(0,0,0,.5);
}

.hdr { border-bottom: 1px solid var(--green-faint); padding-bottom: 12px; margin-bottom: 18px; }
.ascii { color: var(--green); font-weight: 700; letter-spacing: 2px; font-size: 15px; text-shadow: var(--glow); }
.clock { color: var(--green-dim); font-size: 12px; margin-top: 7px; letter-spacing: 1px; }

.screen { display: none; }
.screen.active { display: block; }

.prompt { color: var(--amber); font-size: 13px; letter-spacing: 4px; text-align: center; margin-bottom: 16px; }

.pin-display { display: flex; gap: 14px; justify-content: center; margin-bottom: 24px; }
.slot {
  width: 34px; height: 46px; border: 1px solid var(--green-faint);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--green); text-shadow: var(--glow);
  background: rgba(0,0,0,.3);
}
.slot.filled::after { content: '*'; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key {
  font-family: inherit; font-size: 22px; font-weight: 500;
  color: var(--green); background: rgba(40,52,32,.35);
  border: 1px solid var(--green-faint); padding: 17px 0; cursor: pointer;
  transition: background .06s, color .06s; text-shadow: var(--glow);
}
.key:active { background: var(--green); color: var(--bg); text-shadow: none; }
.key-clear { color: var(--rust); }
.key-enter { color: var(--amber); }

.line { color: var(--green-dim); font-size: 13px; margin-bottom: 8px; letter-spacing: 1px; }
.big { font-size: 24px; text-align: center; margin: 16px 0; letter-spacing: 2px; text-shadow: var(--glow); }
.big-art { font-size: 56px; text-align: center; color: var(--green); text-shadow: var(--glow); margin-top: 8px; }
.sub { color: var(--green-dim); text-align: center; font-size: 13px; min-height: 16px; }
.err { color: var(--err); text-shadow: 0 0 6px rgba(255,138,128,.4); }
#confirm-greet { color: var(--green); }

.btnrow { display: flex; gap: 12px; margin-top: 28px; }
.btn {
  flex: 1; font-family: inherit; font-size: 15px; padding: 17px;
  border: 1px solid var(--green-faint); background: transparent;
  color: var(--green); cursor: pointer; letter-spacing: 2px;
}
.btn-go { border-color: var(--green); background: rgba(179,209,136,.12); }
.btn-go:active { background: var(--green); color: var(--bg); }
.btn-ghost { color: var(--steel); border-color: #2a3340; }