@font-face {
  font-family: 'PixelUI';
  src: url('assets/fonts/pixel.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BodyUI';
  src: url('assets/fonts/vt323.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #070b06;
  --bg-2: #0c130b;
  --ink: #eaffea;
  --dim: #9bb89b;
  --accent: #39ff6a;
  --accent-2: #21c74c;
  --gold: #ffcc33;
  --line: #1b2a19;
  --display: 'PixelUI', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --body: 'BodyUI', 'PixelUI', ui-monospace, Menlo, monospace;
  --fs-xs: 13px;
  --fs-sm: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-sm);
  line-height: 1.35;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}

body { user-select: none; -webkit-user-select: none; }

.crt { position: relative; height: 100%; width: 100%; overflow: hidden; }

.scanlines {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.1) 3px 4px);
  opacity: .55;
}
.crt::after {
  content: ''; position: fixed; inset: 0; z-index: 49; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(0,0,0,.38) 100%);
}

.frame {
  position: relative; z-index: 2;
  height: 100%; width: 100%;
  max-width: 560px; margin: 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
}

.screen {
  display: flex; flex: 1 1 auto; min-height: 0;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mark {
  display: block; width: min(46vw, 168px); height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 18px rgba(57,255,106,.22));
  box-shadow: 0 0 0 2px var(--line), 0 0 0 4px #000;
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(16px, 4.4vw, 22px);
  letter-spacing: 1px;
  line-height: 1.4;
}

.fineprint a { color: #86a484; }

.sronly {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.meme {
  margin: 0;
  font-size: clamp(15px, 3.8vw, 18px);
  line-height: 1.35; color: var(--dim); white-space: pre-line;
}

.fineprint {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5; color: #5d7358;
}

.ladderbox {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; max-width: 340px; padding: 12px 12px 14px;
  background: var(--bg-2); box-shadow: 0 0 0 2px var(--line), 0 0 0 4px #000;
}
.ladder-title {
  margin: 0;
  font-family: var(--display);
  font-size: 10px; letter-spacing: 1px; color: var(--dim);
}
.ladder { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rung {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 9px; min-width: 52px;
  font-family: var(--display);
  font-size: 11px; color: var(--accent); background: #04240f;
  box-shadow: 0 0 0 2px var(--accent-2);
}
.rung i { font-family: var(--body); font-style: normal; font-size: 12px; color: #6f9472; letter-spacing: .5px; }
.rung-top {
  color: #2a1f04; background: var(--gold);
  box-shadow: 0 0 0 2px #fff0a8, 0 0 14px rgba(255,204,51,.55);
  animation: glow 1.6s steps(2) infinite;
}
.rung-top i { color: #5a4505; }
@keyframes glow { 0%, 60% { filter: brightness(1); } 61%, 100% { filter: brightness(1.25); } }
.ladder-note { margin: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--dim); }

.legal { align-items: flex-start; text-align: left; max-width: 340px; margin: 0 auto; }
.legal p { margin: 0; font-size: 18px; line-height: 1.45; color: var(--dim); }
.legal a { color: var(--accent); }

.fomo {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); line-height: 1.4; color: var(--accent);
}
.fomo::before {
  content: ''; width: 8px; height: 8px; flex: 0 0 auto;
  background: var(--accent); box-shadow: 0 0 6px var(--accent);
  animation: blip 1.4s steps(2) infinite;
}
@keyframes blip { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }

.panel {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--bg-2);
  box-shadow: 0 0 0 2px var(--line), 0 0 0 4px #000;
}
.stat { display: flex; flex-direction: column; gap: 6px; min-width: 84px; align-items: center; }
.stat-k {
  font-family: var(--display);
  font-size: 9px; color: var(--dim); letter-spacing: .5px;
}
.stat-v { font-family: var(--display); font-size: 12px; }

.lives { display: inline-flex; gap: 3px; align-items: center; justify-content: center; }
.lives i {
  display: inline-block;
  width: 9px; height: 9px;
  background: #ff3b6b;
  box-shadow: inset -1px -1px 0 #b0123c, 1px 1px 0 #000;
  clip-path: polygon(50% 12%, 61% 0, 80% 0, 100% 20%, 100% 40%, 50% 100%, 0 40%, 0 20%, 20% 0, 39% 0);
}

.btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 100%; max-width: 340px;
  font-family: var(--display); font-size: 12px; line-height: 1.45;
  color: #04240f; background: var(--accent);
  text-decoration: none;
  padding: 16px 18px; min-height: 56px; cursor: pointer; text-align: center;
  box-shadow: 0 0 0 2px #04240f, 0 4px 0 #000;
}
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 2px #04240f, 0 2px 0 #000; }
.btn .lbl { letter-spacing: .5px; }
.btn .sub {
  font-family: var(--body);
  font-size: 14px; opacity: .8; letter-spacing: 0; line-height: 1.25;
}