/* =============================================
   ROOT & RESET
============================================= */
:root {
  --black:   #000408;
  --green:   #00ff41;
  --cyan:    #00e5ff;
  --magenta: #ff00aa;
  --yellow:  #ffe600;
  --orange:  #ff6600;
  --white:   #e8f4f0;
  --dim:     rgba(0,255,65,0.12);
  --font-px:   'Press Start 2P', monospace;
  --font-mono: 'Share Tech Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--black);
  color: var(--green);
  font-family: var(--font-mono);
  overflow-x: hidden;
  animation: flicker 8s infinite;
}

/* =============================================
   CRT SCREEN FLICKER
============================================= */
@keyframes flicker {
  0%,100% { opacity: 1; }
  92%     { opacity: 1; }
  93%     { opacity: 0.85; }
  94%     { opacity: 1; }
  96%     { opacity: 0.9; }
  97%     { opacity: 1; }
}

/* cursor: default browser cursor (no custom override) */

/* =============================================
   CRT OVERLAY (scanlines + vignette)
============================================= */
#crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
#crt-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 4px
  );
}
#crt-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 55%,
    rgba(0,0,0,0.7) 100%
  );
}

/* =============================================
   PHOSPHOR GLOW UTILITIES
============================================= */
.glow-green  { text-shadow: 0 0 7px var(--green),   0 0 20px var(--green),   0 0 40px rgba(0,255,65,.4); }
.glow-cyan   { text-shadow: 0 0 7px var(--cyan),    0 0 20px var(--cyan),    0 0 40px rgba(0,229,255,.4); }
.glow-mag    { text-shadow: 0 0 7px var(--magenta),  0 0 20px var(--magenta), 0 0 40px rgba(255,0,170,.4); }
.glow-yellow { text-shadow: 0 0 7px var(--yellow),   0 0 20px var(--yellow),  0 0 40px rgba(255,230,0,.4); }
.box-glow-green { box-shadow: 0 0 8px var(--green),   0 0 20px rgba(0,255,65,.3),   inset 0 0 8px rgba(0,255,65,.05); }
.box-glow-cyan  { box-shadow: 0 0 8px var(--cyan),    0 0 20px rgba(0,229,255,.3),  inset 0 0 8px rgba(0,229,255,.05); }
.box-glow-mag   { box-shadow: 0 0 8px var(--magenta), 0 0 20px rgba(255,0,170,.3),  inset 0 0 8px rgba(255,0,170,.05); }

/* =============================================
   PIXEL BORDER UTILITY
============================================= */
.pixel-border { border: 2px solid var(--green); position: relative; }
.pixel-border::before,
.pixel-border::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  background: var(--black);
  border: 2px solid var(--green);
}
.pixel-border::before { top: -4px; left: -4px; }
.pixel-border::after  { top: -4px; right: -4px; }

/* =============================================
   TICKER TAPE
============================================= */
#ticker {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: var(--green);
  z-index: 500;
  overflow: hidden;
  display: flex;
  align-items: center;
}
#ticker-inner {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item {
  font-family: var(--font-px);
  font-size: 0.45rem;
  color: var(--black);
  padding: 0 2rem;
  letter-spacing: 0.1em;
}
.ticker-sep { color: rgba(0,0,0,0.4); }

/* =============================================
   FLOATING NAV
============================================= */
#nav {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,4,8,0.92);
  border: 1px solid var(--green);
  box-shadow: 0 0 12px rgba(0,255,65,.3), inset 0 0 20px rgba(0,255,65,.03);
  backdrop-filter: blur(10px);
  margin-top: 12px;
  transition: all 0.4s ease;
}
.nav-logo-area {
  padding: 0.65rem 1.5rem;
  border-right: 1px solid rgba(0,255,65,.3);
  font-family: var(--font-px);
  font-size: 0.5rem;
  color: var(--green);
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-logo-area span { color: var(--magenta); }
.nav-items { display: flex; list-style: none; }
.nav-items li a {
  display: block;
  padding: 0.65rem 1.1rem;
  font-family: var(--font-px);
  font-size: 0.38rem;
  letter-spacing: 0.12em;
  color: rgba(0,255,65,.6);
  text-decoration: none;
  text-transform: uppercase;
  border-right: 1px solid rgba(0,255,65,.15);
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.nav-items li a:hover,
.nav-items li a.active {
  color: var(--cyan);
  background: rgba(0,229,255,.06);
  text-shadow: 0 0 8px var(--cyan), 0 0 16px rgba(0,229,255,.4);
}
.nav-items li a::before         { content: '> '; opacity: 0; transition: opacity .2s; }
.nav-items li a:hover::before,
.nav-items li a.active::before  { opacity: 1; }
.nav-cta-area { padding: 0.5rem 1.2rem; }

.btn-insert-coin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  background: var(--magenta);
  color: var(--black);
  font-family: var(--font-px);
  font-size: 0.38rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  transition: background .2s, box-shadow .2s, transform .1s;
  clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px),
             calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px);
}
.btn-insert-coin:hover {
  background: var(--yellow);
  box-shadow: 0 0 16px var(--yellow), 0 0 32px rgba(255,230,0,.4);
  transform: translateY(-1px);
}

/* =============================================
   HERO — FULLSCREEN
============================================= */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 90px;
  overflow: hidden;
}

/* Animated grid floor */
#hero-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,255,65,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,65,.07) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: grid-move 20s linear infinite;
  transform-origin: center bottom;
  transform: perspective(500px) rotateX(40deg) scale(1.5);
  top: 30%;
}
@keyframes grid-move {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}

#stars-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.insert-coin-msg {
  font-family: var(--font-px);
  font-size: 0.55rem;
  color: var(--yellow);
  letter-spacing: 0.2em;
  animation: blink 1.2s step-end infinite;
  margin-bottom: 1.5rem;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}

.hero-logotype {
  font-family: var(--font-px);
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--green);
  text-shadow:
    0 0 7px var(--green),
    0 0 21px var(--green),
    0 0 42px rgba(0,255,65,.6),
    4px 4px 0 rgba(0,255,65,.15);
  margin-bottom: .6rem;
}
.hero-logotype .dot-exe {
  color: var(--cyan);
  text-shadow: 0 0 7px var(--cyan), 0 0 21px var(--cyan), 0 0 42px rgba(0,229,255,.6);
}

.hero-subtitle {
  font-family: var(--font-px);
  font-size: clamp(0.55rem, 1.8vw, 0.85rem);
  color: var(--magenta);
  letter-spacing: 0.12em;
  text-shadow: 0 0 8px var(--magenta), 0 0 20px rgba(255,0,170,.5);
  margin-bottom: 2.5rem;
  text-align: center;
  line-height: 1.8;
}

.score-bar {
  display: flex;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
  padding: 0.75rem 2rem;
  border: 1px solid rgba(0,255,65,.3);
  background: rgba(0,255,65,.04);
}
.score-item  { text-align: center; }
.score-label {
  font-family: var(--font-px);
  font-size: 0.35rem;
  color: rgba(0,255,65,.5);
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 0.3rem;
}
.score-value {
  font-family: var(--font-px);
  font-size: 0.85rem;
  color: var(--yellow);
  text-shadow: 0 0 8px var(--yellow), 0 0 16px rgba(255,230,0,.4);
  letter-spacing: 0.08em;
}

/* Hero buttons */
.hero-btns {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-pixel-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.8rem;
  background: transparent;
  border: 2px solid var(--cyan);
  color: var(--cyan);
  font-family: var(--font-px);
  font-size: 0.42rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  transition: all .2s;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px),
             calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
}
.btn-pixel-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cyan);
  opacity: 0;
  transition: opacity .2s;
  clip-path: inherit;
}
.btn-pixel-primary:hover           { color: var(--black); text-shadow: none; box-shadow: 0 0 20px var(--cyan), 0 0 40px rgba(0,229,255,.4); }
.btn-pixel-primary:hover::before   { opacity: 1; }
.btn-pixel-primary span            { position: relative; z-index: 1; }

.btn-pixel-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.8rem;
  background: transparent;
  border: 2px solid rgba(0,255,65,.4);
  color: rgba(0,255,65,.7);
  font-family: var(--font-px);
  font-size: 0.42rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  transition: all .2s;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px),
             calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
}
.btn-pixel-ghost:hover { border-color: var(--green); color: var(--green); box-shadow: 0 0 14px rgba(0,255,65,.4); }

/* Scroll prompt */
.scroll-prompt {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--font-px);
  font-size: 0.38rem;
  color: rgba(0,255,65,.4);
  letter-spacing: 0.18em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.scroll-arrow {
  width: 10px; height: 10px;
  border-right: 2px solid rgba(0,255,65,.4);
  border-bottom: 2px solid rgba(0,255,65,.4);
  transform: rotate(45deg);
  animation: arrow-bounce 1.4s ease-in-out infinite;
}
.scroll-arrow:nth-child(2) { animation-delay: .2s; opacity: .6; }
.scroll-arrow:nth-child(3) { animation-delay: .4s; opacity: .3; }
@keyframes arrow-bounce {
  0%,100% { transform: rotate(45deg) translateY(0); }
  50%     { transform: rotate(45deg) translateY(4px); }
}

/* =============================================
   SECTION COMMON
============================================= */
.section {
  position: relative;
  padding: 6rem 2rem 5rem;
  overflow: hidden;
}
.section-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.pixel-divider {
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    var(--green) 0px, var(--green) 8px,
    transparent 8px, transparent 16px
  );
  opacity: 0.3;
}

.sec-eyebrow {
  font-family: var(--font-px);
  font-size: 0.4rem;
  color: var(--magenta);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.sec-eyebrow::before { content: '//'; color: rgba(255,0,170,.4); }

.sec-title {
  font-family: var(--font-px);
  font-size: clamp(1.1rem, 3vw, 2rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  margin-bottom: 3rem;
  color: var(--white);
}
.sec-title .accent-g { color: var(--green); }
.sec-title .accent-c { color: var(--cyan); }
.sec-title .accent-m { color: var(--magenta); }
.sec-title .accent-y { color: var(--yellow); }

/* =============================================
   MISSION — ABOUT
============================================= */
#mission { background: linear-gradient(180deg, var(--black) 0%, #000d1a 100%); }

.mission-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.mission-terminal {
  background: #000d06;
  border: 1px solid rgba(0,255,65,.4);
  font-family: var(--font-mono);
  box-shadow: 0 0 30px rgba(0,255,65,.08), inset 0 0 30px rgba(0,255,65,.03);
}
.terminal-bar {
  background: rgba(0,255,65,.15);
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(0,255,65,.2);
}
.terminal-dot              { width: 8px; height: 8px; border: 1px solid; }
.terminal-dot.red          { border-color: #ff4444; background: rgba(255,68,68,.3); }
.terminal-dot.yel          { border-color: #ffcc00; background: rgba(255,204,0,.3); }
.terminal-dot.grn          { border-color: var(--green); background: rgba(0,255,65,.3); }
.terminal-title {
  font-family: var(--font-px);
  font-size: 0.35rem;
  color: rgba(0,255,65,.5);
  margin-left: 0.5rem;
  letter-spacing: 0.1em;
}
.terminal-body {
  padding: 1.5rem;
  font-size: 0.82rem;
  line-height: 2;
  color: rgba(0,255,65,.8);
}
.terminal-line            { display: block; }
.terminal-line .prompt    { color: var(--cyan); margin-right: 0.5rem; }
.terminal-line .cmd       { color: var(--green); }
.terminal-line .out       { color: rgba(0,255,65,.65); padding-left: 1rem; }
.terminal-line .highlight { color: var(--yellow); font-weight: bold; }
.cursor-blink {
  display: inline-block;
  width: 8px; height: 14px;
  background: var(--green);
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

/* XP Bars */
.xp-bars { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 0.5rem; }
.xp-label-row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.xp-name {
  font-family: var(--font-px);
  font-size: 0.38rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
}
.xp-num {
  font-family: var(--font-px);
  font-size: 0.38rem;
  color: var(--yellow);
}
.xp-track {
  height: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(0,255,65,.2);
  position: relative;
  overflow: hidden;
}
.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  box-shadow: 0 0 8px var(--cyan);
  width: 0%;
  transition: width 1.5s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.xp-fill::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 6px #fff;
}
.xp-fill.magenta-bar { background: linear-gradient(90deg, var(--magenta), var(--orange)); box-shadow: 0 0 8px var(--magenta); }
.xp-fill.yellow-bar  { background: linear-gradient(90deg, var(--yellow), var(--orange));  box-shadow: 0 0 8px var(--yellow); }

/* Stat pills */
.stat-pills { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; }
.stat-pill {
  border: 1px solid;
  padding: 0.7rem 1.2rem;
  text-align: center;
  flex: 1;
  min-width: 100px;
  background: rgba(0,0,0,.5);
}
.stat-pill.green-pill { border-color: rgba(0,255,65,.4); }
.stat-pill.cyan-pill  { border-color: rgba(0,229,255,.4); }
.stat-pill.mag-pill   { border-color: rgba(255,0,170,.4); }
.stat-pill-val { font-family: var(--font-px); font-size: 1rem; display: block; margin-bottom: 0.3rem; }
.green-pill .stat-pill-val  { color: var(--green);   text-shadow: 0 0 10px var(--green); }
.cyan-pill  .stat-pill-val  { color: var(--cyan);    text-shadow: 0 0 10px var(--cyan); }
.mag-pill   .stat-pill-val  { color: var(--magenta); text-shadow: 0 0 10px var(--magenta); }
.stat-pill-label { font-family: var(--font-px); font-size: 0.32rem; color: rgba(255,255,255,.35); letter-spacing: 0.12em; text-transform: uppercase; }

/* =============================================
   JOURNEY — SERVICES
============================================= */
#journey { background: var(--black); }

.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }

.service-card {
  border: 1px solid rgba(0,255,65,.25);
  background: rgba(0,255,65,.02);
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, background .3s, transform .3s;
  cursor: default;
}
.service-card::before {
  content: attr(data-level);
  position: absolute;
  top: -0.5rem; right: 1.5rem;
  font-family: var(--font-px);
  font-size: 0.32rem;
  color: var(--black);
  background: var(--green);
  padding: 0.2rem 0.5rem;
  letter-spacing: 0.12em;
}
.service-card.card-c::before { background: var(--cyan); }
.service-card.card-m::before { background: var(--magenta); color: var(--black); }
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 20px; height: 20px;
  border-top: 2px solid rgba(0,255,65,.2);
  border-left: 2px solid rgba(0,255,65,.2);
  transform: rotate(180deg);
}
.service-card:hover                   { transform: translateY(-6px); }
.service-card.card-g:hover            { border-color: var(--green);   background: rgba(0,255,65,.05);  box-shadow: 0 0 30px rgba(0,255,65,.15); }
.service-card.card-c:hover            { border-color: var(--cyan);    background: rgba(0,229,255,.05); box-shadow: 0 0 30px rgba(0,229,255,.15); }
.service-card.card-m:hover            { border-color: var(--magenta); background: rgba(255,0,170,.05); box-shadow: 0 0 30px rgba(255,0,170,.15); }

.svc-num {
  font-family: var(--font-px);
  font-size: 2rem;
  opacity: 0.07;
  position: absolute;
  bottom: 1rem; right: 1.2rem;
  line-height: 1;
  color: var(--green);
}
.svc-icon-px  { font-size: 2.2rem; display: block; margin-bottom: 1rem; image-rendering: pixelated; }
.svc-tag      { font-family: var(--font-px); font-size: 0.32rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.7rem; }
.svc-tag.g    { color: rgba(0,255,65,.55); }
.svc-tag.c    { color: rgba(0,229,255,.55); }
.svc-tag.m    { color: rgba(255,0,170,.55); }
.svc-title-card { font-family: var(--font-px); font-size: 0.62rem; line-height: 1.6; color: var(--white); margin-bottom: 1rem; letter-spacing: 0.04em; }
.svc-desc     { font-family: var(--font-mono); font-size: 0.82rem; color: rgba(255,255,255,.45); line-height: 1.75; margin-bottom: 1.5rem; }

.svc-link-px {
  font-family: var(--font-px);
  font-size: 0.35rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap .2s;
  cursor: pointer;
}
.svc-link-px.g                        { color: rgba(0,255,65,.5); }
.svc-link-px.c                        { color: rgba(0,229,255,.5); }
.svc-link-px.m                        { color: rgba(255,0,170,.5); }
.service-card:hover .svc-link-px      { gap: 0.8rem; }
.service-card.card-g:hover .svc-link-px { color: var(--green); }
.service-card.card-c:hover .svc-link-px { color: var(--cyan); }
.service-card.card-m:hover .svc-link-px { color: var(--magenta); }

/* =============================================
   HIGH SCORES — LEADERBOARD
============================================= */
#highscores { background: linear-gradient(180deg, #000d1a 0%, var(--black) 100%); }

.leaderboard { display: flex; flex-direction: column; gap: 1px; margin-bottom: 2rem; }

.leader-header {
  display: grid;
  grid-template-columns: 60px 1fr 140px 120px;
  padding: 0.6rem 1.5rem;
  background: rgba(0,255,65,.12);
  border: 1px solid rgba(0,255,65,.3);
  border-bottom: none;
}
.lh-col { font-family: var(--font-px); font-size: 0.32rem; color: rgba(0,255,65,.5); letter-spacing: 0.15em; text-transform: uppercase; }

.leader-row {
  display: grid;
  grid-template-columns: 60px 1fr 140px 120px;
  padding: 1.2rem 1.5rem;
  border: 1px solid rgba(0,255,65,.15);
  border-top: none;
  background: rgba(0,0,0,.6);
  transition: background .25s, border-color .25s;
  cursor: default;
  align-items: center;
}
.leader-row:hover { background: rgba(0,255,65,.04); border-color: rgba(0,255,65,.35); }

.ld-rank   { font-family: var(--font-px); font-size: 1rem; text-align: center; }
.rank-1    { color: var(--yellow);  text-shadow: 0 0 10px var(--yellow); }
.rank-2    { color: var(--cyan);    text-shadow: 0 0 10px var(--cyan); }
.rank-3    { color: var(--magenta); text-shadow: 0 0 10px var(--magenta); }
.rank-4    { color: rgba(0,255,65,.5); }

.ld-name   { font-family: var(--font-px); font-size: 0.55rem; color: var(--white); letter-spacing: 0.04em; margin-bottom: 0.3rem; display: block; }
.ld-type   { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255,255,255,.35); letter-spacing: 0.06em; }

.ld-score            { font-family: var(--font-px); font-size: 0.6rem; text-align: right; }
.ld-score .pts       { display: block; margin-bottom: 0.2rem; }
.ld-score .bar-mini  { height: 4px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.ld-score .bar-fill  { height: 100%; background: var(--green); box-shadow: 0 0 6px var(--green); }

.ld-badge { text-align: right; font-family: var(--font-px); font-size: 0.32rem; letter-spacing: 0.1em; padding: 0.3rem 0.6rem; border: 1px solid; display: inline-block; white-space: nowrap; }
.badge-neon  { color: var(--green);   border-color: rgba(0,255,65,.4);   background: rgba(0,255,65,.08); }
.badge-cyan  { color: var(--cyan);    border-color: rgba(0,229,255,.4);  background: rgba(0,229,255,.08); }
.badge-mag   { color: var(--magenta); border-color: rgba(255,0,170,.4);  background: rgba(255,0,170,.08); }
.badge-gold  { color: var(--yellow);  border-color: rgba(255,230,0,.4);  background: rgba(255,230,0,.08); }

/* =============================================
   CTA — FINAL BOSS SCREEN
============================================= */
#cta {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--black);
  position: relative;
  overflow: hidden;
  padding: 6rem 2rem;
}

.pulse-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,255,65,.15);
  animation: expand-ring 4s ease-out infinite;
  pointer-events: none;
}
.pulse-ring:nth-child(1) { width: 300px; height: 300px; animation-delay: 0s; }
.pulse-ring:nth-child(2) { width: 500px; height: 500px; animation-delay: 1s; }
.pulse-ring:nth-child(3) { width: 700px; height: 700px; animation-delay: 2s; }
.pulse-ring:nth-child(4) { width: 900px; height: 900px; animation-delay: 3s; }
@keyframes expand-ring {
  0%   { opacity: .6; transform: scale(.8); }
  100% { opacity: 0;  transform: scale(1.2); }
}

.cta-inner { position: relative; z-index: 10; text-align: center; max-width: 700px; }
.cta-game-over {
  font-family: var(--font-px);
  font-size: clamp(2rem, 6vw, 4.5rem);
  color: var(--green);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-shadow: 0 0 10px var(--green), 0 0 30px var(--green), 0 0 60px rgba(0,255,65,.5), 6px 6px 0 rgba(0,255,65,.1);
  margin-bottom: 0.5rem;
}
.cta-game-over .line2 {
  color: var(--magenta);
  text-shadow: 0 0 10px var(--magenta), 0 0 30px var(--magenta), 0 0 60px rgba(255,0,170,.5);
  display: block;
}
.cta-prompt { font-family: var(--font-mono); font-size: 1rem; color: rgba(0,255,65,.6); margin: 1.5rem 0 2.5rem; line-height: 1.8; max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-prompt strong { color: var(--cyan); }

.btn-start-quest {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 2.8rem;
  background: var(--magenta);
  color: var(--black);
  font-family: var(--font-px);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: all .25s;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px),
             calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  animation: btn-pulse 2s ease-in-out infinite;
}
@keyframes btn-pulse {
  0%,100% { box-shadow: 0 0 15px var(--magenta), 0 0 30px rgba(255,0,170,.4); }
  50%     { box-shadow: 0 0 30px var(--magenta), 0 0 60px rgba(255,0,170,.6); }
}
.btn-start-quest:hover {
  background: var(--yellow);
  animation: none;
  box-shadow: 0 0 40px var(--yellow), 0 0 80px rgba(255,230,0,.5);
  transform: scale(1.04);
}

.lives-display {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-family: var(--font-px);
  font-size: 0.4rem;
  color: rgba(255,255,255,.35);
  letter-spacing: 0.15em;
}
.life-icon { font-size: 1rem; filter: drop-shadow(0 0 4px var(--magenta)); }

.testimonial-box {
  margin-top: 3rem;
  border: 1px solid rgba(0,255,65,.2);
  padding: 1.2rem 2rem;
  background: rgba(0,255,65,.03);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.test-label  { font-family: var(--font-px); font-size: 0.3rem; color: var(--yellow); letter-spacing: 0.2em; margin-bottom: 0.8rem; }
.test-text   { font-family: var(--font-mono); font-size: 0.82rem; color: rgba(255,255,255,.5); line-height: 1.7; font-style: italic; }
.test-author { font-family: var(--font-px); font-size: 0.32rem; color: var(--cyan); margin-top: 0.8rem; letter-spacing: 0.1em; }

/* =============================================
   FOOTER
============================================= */
footer {
  background: #000204;
  border-top: 1px solid rgba(0,255,65,.15);
  padding: 1.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  z-index: 10;
}
.footer-logo  { font-family: var(--font-px); font-size: 0.45rem; color: rgba(0,255,65,.4); letter-spacing: 0.12em; }
.footer-copy  { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255,255,255,.2); }
.footer-links { list-style: none; display: flex; gap: 1.5rem; }
.footer-links a { font-family: var(--font-mono); font-size: 0.75rem; color: rgba(0,255,65,.35); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--green); text-shadow: 0 0 6px var(--green); }

/* =============================================
   COOKIE BANNER
============================================= */
#cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  width: calc(100% - 4rem);
  max-width: 820px;
  background: #000d06;
  border: 1px solid rgba(0,255,65,.45);
  box-shadow: 0 0 30px rgba(0,255,65,.15), inset 0 0 20px rgba(0,255,65,.03);
  padding: 1.5rem 2rem;
  display: none; /* shown by JS after delay */
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .5s;
}
#cookie-banner::before,
#cookie-banner::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 2px solid var(--green);
  background: var(--black);
}
#cookie-banner::before { bottom: -5px; left: -5px; }
#cookie-banner::after  { bottom: -5px; right: -5px; }
#cookie-banner.hidden  { transform: translateX(-50%) translateY(130%); opacity: 0; pointer-events: none; }

/* Cookie minimised pill — shown after banner is dismissed */
#cookie-pill {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 600;
  display: none; /* toggled by JS */
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem 0.45rem 0.7rem;
  background: #000d06;
  border: 1px solid rgba(0,255,65,.4);
  box-shadow: 0 0 14px rgba(0,255,65,.12);
  cursor: pointer;
  transition: box-shadow .25s, border-color .25s;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px),
             calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
}
#cookie-pill:hover {
  border-color: var(--green);
  box-shadow: 0 0 22px rgba(0,255,65,.25);
}
#cookie-pill .pill-icon { font-size: 1rem; line-height: 1; }
#cookie-pill .pill-label {
  font-family: var(--font-px);
  font-size: 0.28rem;
  color: rgba(0,255,65,.65);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ck-icon-px { font-size: 2rem; flex-shrink: 0; filter: drop-shadow(0 0 8px var(--green)); }
.ck-txt     { flex: 1; min-width: 200px; }
.ck-txt h4  { font-family: var(--font-px); font-size: 0.42rem; color: var(--green); letter-spacing: 0.12em; margin-bottom: 0.5rem; text-shadow: 0 0 8px var(--green); }
.ck-txt p   { font-family: var(--font-mono); font-size: 0.8rem; color: rgba(0,255,65,.55); line-height: 1.6; }
.ck-txt a   { color: var(--cyan); text-decoration: underline; }
.ck-btns    { display: flex; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; }

.btn-ck-ok {
  padding: 0.6rem 1.4rem;
  background: var(--green);
  color: var(--black);
  font-family: var(--font-px);
  font-size: 0.38rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: box-shadow .2s, transform .1s;
  clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px),
             calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px);
}
.btn-ck-ok:hover { box-shadow: 0 0 20px var(--green); transform: translateY(-1px); }

.btn-ck-no {
  padding: 0.6rem 1.2rem;
  background: transparent;
  border: 1px solid rgba(0,255,65,.35);
  color: rgba(0,255,65,.6);
  font-family: var(--font-px);
  font-size: 0.38rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.btn-ck-no:hover { border-color: var(--green); color: var(--green); }

/* =============================================
   REDUCED MOTION TOGGLE
============================================= */
#rm-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 601;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  background: rgba(0,4,8,.9);
  border: 1px solid rgba(0,255,65,.25);
  color: rgba(0,255,65,.45);
  font-family: var(--font-px);
  font-size: 0.3rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all .2s;
}
#rm-btn:hover              { border-color: var(--green); color: var(--green); }
#rm-btn.off                { border-color: rgba(255,0,170,.35); color: rgba(255,0,170,.6); }
#rm-dot-btn                { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
#rm-btn.off #rm-dot-btn    { background: var(--magenta); }

/* =============================================
   GSAP REVEAL CLASS
============================================= */
.will-reveal { opacity: 0; }

/* =============================================
   REDUCED MOTION
============================================= */
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) *,
  body:not(.motion-on) *::before,
  body:not(.motion-on) *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}
body.rm *,
body.rm *::before,
body.rm *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 900px) {
  .mission-layout              { grid-template-columns: 1fr; gap: 2rem; }
  .services-grid               { grid-template-columns: 1fr; }
  .leader-header,
  .leader-row                  { grid-template-columns: 50px 1fr 100px; }
  .ld-badge                    { display: none; }
}
@media (max-width: 680px) {
  #nav                         { width: calc(100% - 2rem); flex-wrap: wrap; padding: 0.5rem; gap: 0.25rem; }
  .nav-logo-area               { padding: 0.4rem 0.8rem; font-size: 0.42rem; }
  .nav-items li a              { padding: 0.4rem 0.65rem; font-size: 0.3rem; }
  .nav-cta-area                { padding: 0.25rem 0.5rem; }
  .btn-insert-coin             { font-size: 0.3rem; padding: 0.4rem 0.8rem; }
  .hero-logotype               { font-size: clamp(1.8rem, 10vw, 3rem); }
  .score-bar                   { gap: 1rem; padding: 0.6rem 1rem; flex-wrap: wrap; justify-content: center; }
  #cookie-banner               { padding: 1rem 1.2rem; width: calc(100% - 2rem); }
  .ck-btns                     { width: 100%; justify-content: center; }
  footer                       { padding: 1rem 1.5rem; flex-direction: column; text-align: center; }
  .leader-row,
  .leader-header               { grid-template-columns: 40px 1fr 90px; }
}