/* Newtmas Arcade theme. Palette comes straight from the Newt Face. */
:root {
  --newt-green: #3DFF25;
  --newt-black: #000000;
  --newt-red:   #FF010D;

  --green-dim:   #1f8f14;
  --green-deep:  #0b3307;
  --green-faint: #06200a;
  --panel:       #050d05;
  --snow:        #e9ffe6;
  --muted:       #8fcf86;
  --gold:        #ffd23f;

  --glow: 0 0 6px rgba(61, 255, 37, .55), 0 0 18px rgba(61, 255, 37, .18);
  --glow-red: 0 0 6px rgba(255, 1, 13, .6), 0 0 18px rgba(255, 1, 13, .2);

  --font-pixel: 'Press Start 2P', ui-monospace, monospace;
  --font-term:  'VT323', ui-monospace, 'Courier New', monospace;

  --top-h: 52px;
  --tabs-h: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--newt-black);
  color: var(--snow);
  font-family: var(--font-term);
  font-size: 22px;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
a { color: var(--newt-green); }
.pix { image-rendering: pixelated; image-rendering: crisp-edges; }
.accent { color: var(--newt-red); }
[hidden] { display: none !important; }

/* CRT scanlines + vignette, above everything, click-through */
.scan {
  pointer-events: none; position: fixed; inset: 0; z-index: 100;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
}

/* Christmas lights along the top edge */
.lights {
  position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 60;
  background: repeating-linear-gradient(90deg,
    var(--newt-red) 0 6px, transparent 6px 18px, var(--newt-green) 18px 24px, transparent 24px 36px,
    var(--gold) 36px 42px, transparent 42px 54px);
  animation: blink 1.6s steps(2) infinite;
}
@keyframes blink { 50% { filter: brightness(.45); } }

/* Header */
.top {
  position: sticky; top: 0; z-index: 50; height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px 0; background: linear-gradient(var(--newt-black) 80%, transparent);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--newt-green);
  font-family: var(--font-pixel); font-size: 11px; text-shadow: var(--glow); white-space: nowrap; }
.pts { font-family: var(--font-pixel); font-size: 10px; color: var(--gold); white-space: nowrap; }

/* Main view */
.view {
  max-width: 520px; margin: 0 auto; padding: 8px 16px calc(var(--tabs-h) + 24px + env(safe-area-inset-bottom));
  min-height: 100%;
}
.view.full { padding: 0; max-width: none; }

h1, h2, h3 { font-family: var(--font-pixel); font-weight: 400; color: var(--newt-green); text-shadow: var(--glow); }
h1 { font-size: 18px; line-height: 1.5; margin: 18px 0 10px; }
h2 { font-size: 13px; line-height: 1.6; margin: 22px 0 10px; }
h3 { font-size: 11px; line-height: 1.6; margin: 0 0 6px; }
p { margin: 8px 0; }
.muted { color: var(--muted); }
.prompt { color: var(--newt-green); }
.prompt::before { content: 'root@newtmas:~$ '; color: var(--green-dim); }
.cursor::after { content: '█'; animation: blink 1s steps(2) infinite; margin-left: 2px; color: var(--newt-green); }

/* Panels */
.panel {
  background: var(--panel); border: 2px solid var(--green-dim);
  box-shadow: inset 0 0 0 2px var(--newt-black), inset 0 0 0 4px var(--green-deep);
  padding: 14px; margin: 12px 0;
}

/* Forms */
label { display: block; margin: 12px 0 4px; color: var(--muted); font-size: 20px; }
input {
  width: 100%; font: inherit; font-size: 22px; color: var(--newt-green);
  background: var(--newt-black); border: 2px solid var(--green-dim); padding: 10px 12px; border-radius: 0;
  outline: none; caret-color: var(--newt-green);
}
input:focus { border-color: var(--newt-green); box-shadow: var(--glow); }
.err { color: var(--newt-red); text-shadow: var(--glow-red); min-height: 1.2em; margin-top: 10px; }

/* Buttons: chunky 8-bit */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 18px; border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--font-pixel); font-size: 12px; line-height: 1.4; text-transform: uppercase;
  color: var(--newt-black); background: var(--newt-green);
  box-shadow: 0 -4px 0 0 #1a7a10 inset, 0 0 0 2px var(--newt-black), 0 0 0 4px var(--newt-green);
  margin: 4px;
}
.btn:active { transform: translateY(2px); box-shadow: 0 -2px 0 0 #1a7a10 inset, 0 0 0 2px var(--newt-black), 0 0 0 4px var(--newt-green); }
.btn.red { background: var(--newt-red); color: var(--snow); box-shadow: 0 -4px 0 0 #8a0008 inset, 0 0 0 2px var(--newt-black), 0 0 0 4px var(--newt-red); }
.btn.ghost { background: transparent; color: var(--newt-green); box-shadow: 0 0 0 2px var(--green-dim); }
.btn.block { display: flex; width: calc(100% - 8px); }
.btn:disabled { opacity: .5; cursor: default; }
.linkbtn { background: none; border: 0; color: var(--newt-green); font: inherit; text-decoration: underline; cursor: pointer; padding: 6px; }

/* Login hero */
.hero { text-align: center; padding-top: 18px; }
.hero img { width: 112px; height: 112px; border: 4px solid var(--newt-green); box-shadow: var(--glow); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.hero h1 { font-size: 20px; margin-top: 22px; }
.hero .sub { font-family: var(--font-pixel); font-size: 9px; color: var(--newt-red); letter-spacing: 2px; text-shadow: var(--glow-red); }
.seg { display: flex; gap: 0; margin: 18px 0 4px; border: 2px solid var(--green-dim); }
.seg button { flex: 1; font-family: var(--font-pixel); font-size: 10px; padding: 12px 4px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--green-deep); color: var(--newt-green); text-shadow: var(--glow); }

/* Arcade cabinets grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.cab {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 150px;
  padding: 12px; text-decoration: none; color: var(--snow);
  background: linear-gradient(180deg, var(--green-faint), var(--newt-black));
  border: 2px solid var(--green-dim);
  box-shadow: inset 0 0 0 2px var(--newt-black), inset 0 0 0 4px var(--green-deep);
}
.cab .no { font-family: var(--font-pixel); font-size: 9px; color: var(--green-dim); }
.cab .title { font-family: var(--font-pixel); font-size: 11px; line-height: 1.5; color: var(--newt-green); text-shadow: var(--glow); margin: 8px 0; }
.cab .blurb { font-size: 18px; color: var(--muted); }
.cab .meta { font-family: var(--font-pixel); font-size: 8px; color: var(--gold); margin-top: 8px; }
.cab.live { border-color: var(--newt-green); }
.cab.live:active { transform: translateY(2px); }
.cab.soon { opacity: .55; }
.cab.soon .title { color: var(--muted); text-shadow: none; }
.cab.vault { grid-column: 1 / -1; border-color: var(--newt-red); background: linear-gradient(180deg, #1a0002, var(--newt-black)); }
.cab.vault .title { color: var(--newt-red); text-shadow: var(--glow-red); }
.badge { position: absolute; top: 10px; right: 10px; font-family: var(--font-pixel); font-size: 7px; padding: 4px 5px; }
.badge.pwned { background: var(--newt-green); color: var(--newt-black); }
.badge.locked { background: var(--newt-red); color: var(--snow); }

/* Scoreboard */
.board { width: 100%; border-collapse: collapse; }
.board th { font-family: var(--font-pixel); font-size: 8px; color: var(--green-dim); text-align: left; padding: 6px 4px; border-bottom: 2px solid var(--green-deep); }
.board td { padding: 8px 4px; border-bottom: 1px dashed var(--green-deep); font-size: 22px; }
.board td.r { text-align: right; } .board th.r { text-align: right; }
.board .rank { font-family: var(--font-pixel); font-size: 10px; color: var(--muted); width: 36px; }
.board tr.me td { color: var(--newt-green); text-shadow: var(--glow); }
.board tr:nth-child(1) .rank { color: var(--gold); }
.board .name { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Collection */
.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.pic { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed var(--green-deep); background: var(--panel); text-align: center; padding: 6px; }
.pic .gift { font-size: 34px; color: var(--newt-red); text-shadow: var(--glow-red); }
.pic .lbl { font-family: var(--font-pixel); font-size: 7px; line-height: 1.5; color: var(--muted); }

/* Achievements */
.ach { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--green-deep); }
.ach .icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px;
  border: 2px solid var(--green-dim); background: var(--newt-black); }
.ach.earned .icon { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px rgba(255,210,63,.35); }
.ach.locked { opacity: .55; }
.ach .t { font-family: var(--font-pixel); font-size: 10px; line-height: 1.5; color: var(--newt-green); }
.ach.locked .t { color: var(--muted); }
.ach .d { font-size: 20px; color: var(--muted); }
.ach .p { margin-left: auto; font-family: var(--font-pixel); font-size: 9px; color: var(--gold); white-space: nowrap; }

/* Stats row */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { border: 2px solid var(--green-deep); padding: 10px 6px; text-align: center; background: var(--panel); }
.stat .v { font-family: var(--font-pixel); font-size: 14px; color: var(--newt-green); text-shadow: var(--glow); }
.stat .k { font-size: 18px; color: var(--muted); margin-top: 4px; }

/* Bottom tabs */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--newt-black); border-top: 2px solid var(--green-dim);
}
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font-pixel); font-size: 7px; color: var(--muted); text-decoration: none; }
.tabs a .ico { font-family: var(--font-term); font-size: 26px; line-height: 1; }
.tabs a.on { color: var(--newt-green); text-shadow: var(--glow); }

/* Toasts */
.toasts { position: fixed; left: 0; right: 0; top: 60px; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { max-width: 440px; width: 100%; background: var(--newt-black); border: 2px solid var(--gold); padding: 10px 12px;
  box-shadow: 0 0 16px rgba(255,210,63,.35); animation: slide .25s ease-out; }
.toast .h { font-family: var(--font-pixel); font-size: 9px; color: var(--gold); margin-bottom: 4px; }
.toast.bad { border-color: var(--newt-red); box-shadow: var(--glow-red); }
.toast.bad .h { color: var(--newt-red); }
@keyframes slide { from { transform: translateY(-12px); opacity: 0; } }

/* Game screen */
.game-wrap { position: fixed; inset: 0; z-index: 70; background: var(--newt-black); display: flex; flex-direction: column; }
.game-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; gap: 8px; }
.game-bar .btn { min-height: 40px; padding: 8px 12px; font-size: 10px; }
.game-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.game-stage canvas { display: block; image-rendering: pixelated; touch-action: none; }

/* Trophy room placeholder */
.room { position: relative; aspect-ratio: 16 / 9; border: 2px solid var(--green-dim); background:
  linear-gradient(var(--green-faint), var(--newt-black) 70%), var(--newt-black); overflow: hidden; }
.room .under { position: absolute; inset: auto 0 18px; text-align: center; font-family: var(--font-pixel); font-size: 9px; color: var(--newt-red); }

@media (prefers-reduced-motion: reduce) {
  .lights, .cursor::after, .hero img { animation: none; }
}

.small { font-size: 18px; }