@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --g:  #00ff41;
  --y:  #ffff00;
  --c:  #00ffff;
  --r:  #ff2200;
  --o:  #ff8800;
  --w:  #ffffff;
}

html, body {
  min-height: 100%;
  font-family: 'Comic Sans MS', 'Comic Neue', cursive;
  background: #000;
  color: var(--w);
  overflow-x: hidden;
}

/* ── Three.js canvas ─────────────────────────────── */
#three-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Scanlines overlay ───────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.18) 2px,
    rgba(0,0,0,.18) 4px
  );
}

/* ── Page ────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* ── Card ────────────────────────────────────────── */
.card {
  background: rgba(0,0,0,.78);
  border: 3px solid var(--g);
  border-radius: 0;
  padding: 36px 32px;
  width: 100%;
  max-width: 500px;
  box-shadow: 4px 4px 0 var(--y), -2px -2px 0 var(--c), 0 0 40px rgba(0,255,65,.15);
  position: relative;
  animation: card-wobble 8s ease-in-out infinite;
}
@keyframes card-wobble {
  0%,100% { transform: rotate(0deg) skewX(0deg); }
  20%      { transform: rotate(-.3deg) skewX(.2deg); }
  50%      { transform: rotate(.2deg) skewX(-.15deg); }
  80%      { transform: rotate(-.15deg) skewX(.1deg); }
}

/* ── Title ───────────────────────────────────────── */
.card-title {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 700;
  text-align: center;
  color: var(--y);
  margin-bottom: 4px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: title-glitch 6s infinite;
  position: relative;
}
.card-title::before {
  content: attr(data-text);
  position: absolute;
  left: 2px; top: 0;
  color: var(--c);
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
  animation: glitch-clip1 6s infinite;
}
.card-title::after {
  content: attr(data-text);
  position: absolute;
  left: -2px; top: 0;
  color: var(--r);
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
  animation: glitch-clip2 6s infinite;
}
@keyframes title-glitch {
  0%,90%,100% { transform: none; }
  92% { transform: skewX(10deg) translateX(3px); }
  94% { transform: skewX(-8deg) translateX(-3px); }
  96% { transform: none; }
}
@keyframes glitch-clip1 {
  0%,88%,100% { opacity: 0; }
  90% { opacity: 1; transform: translateX(-4px); }
  93% { opacity: 0; }
}
@keyframes glitch-clip2 {
  0%,91%,100% { opacity: 0; }
  93% { opacity: 1; transform: translateX(4px); }
  96% { opacity: 0; }
}

.card-sub {
  text-align: center;
  color: var(--c);
  font-size: .88rem;
  margin-bottom: 24px;
  font-style: italic;
  animation: sub-blink 4s step-end infinite;
}
@keyframes sub-blink {
  0%,100% { opacity: 1; }
  85%      { opacity: 1; }
  86%      { opacity: 0; }
  87%      { opacity: 1; }
  89%      { opacity: 0; }
  90%      { opacity: 1; }
}

/* ── Fields ──────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: .82rem;
  color: var(--g);
  margin-bottom: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.field input[type=text],
.field input[type=email],
.field textarea {
  width: 100%;
  background: #0a0a0a;
  border: 1.5px solid var(--g);
  border-radius: 0;
  padding: 9px 12px;
  color: var(--g);
  font-family: inherit;
  font-size: .95rem;
  outline: none;
  transition: border-color .1s, box-shadow .1s;
  caret-color: var(--y);
}
.field input:focus, .field textarea:focus {
  border-color: var(--y);
  box-shadow: 0 0 0 2px var(--y), inset 0 0 8px rgba(255,255,0,.05);
  color: var(--y);
}
.field textarea { resize: vertical; min-height: 70px; }

/* ── Choices ─────────────────────────────────────── */
.choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #0a0a0a;
  border: 1.5px solid #333;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .1s;
  position: relative;
}
.choice:hover   { border-color: var(--c); }
.choice.selected { border-color: var(--y); box-shadow: 2px 2px 0 var(--y); }
.choice input[type=radio] { margin-top: 3px; accent-color: var(--y); flex-shrink: 0; }
.choice-label  { font-weight: 700; font-size: .92rem; display: block; color: var(--w); }
.choice-detail { font-size: .76rem; color: #666; display: block; margin-top: 2px; }
.choice.selected .choice-label { color: var(--y); }

/* ── Button ──────────────────────────────────────── */
.btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: 3px solid var(--y);
  background: transparent;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--y);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .15s;
  margin-top: 6px;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--y);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
  z-index: -1;
}
.btn:hover { color: #000; }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: scale(.97); }

.btn.secondary {
  border-color: #444;
  color: #666;
  font-size: .85rem;
  letter-spacing: 1px;
  margin-top: 10px;
}
.btn.secondary:hover { color: #000; }
.btn.secondary::before { background: #444; }

/* ── Misc ────────────────────────────────────────── */
.success-icon {
  font-size: 4rem;
  text-align: center;
  display: block;
  margin-bottom: 14px;
  animation: spin-once 0.6s ease-out;
}
@keyframes spin-once {
  from { transform: rotate(-360deg) scale(0); }
  to   { transform: rotate(0deg) scale(1); }
}
.tag {
  display: inline-block;
  background: transparent;
  border: 1.5px solid var(--g);
  padding: 3px 12px;
  font-size: .82rem;
  color: var(--g);
  margin: 2px;
  text-transform: uppercase;
}
.muted { color: #555; font-size: .8rem; text-align: center; margin-top: 10px; }
.error-msg { color: var(--r); font-size: .83rem; margin-top: 4px; }

/* ── Ticker ──────────────────────────────────────── */
.ticker {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  background: var(--y);
  color: #000;
  font-weight: 700;
  font-size: .82rem;
  padding: 4px 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker-inner {
  display: inline-block;
  animation: ticker-scroll 25s linear infinite;
}
@keyframes ticker-scroll {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

/* ── Admin ───────────────────────────────────────── */
.admin-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 30px 20px;
}
.admin-page h1 { color: var(--y); margin-bottom: 20px; font-size: 1.6rem; text-transform: uppercase; }
.admin-page h2 { color: var(--g); margin: 24px 0 10px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.admin-page table { width: 100%; border-collapse: collapse; font-size: .83rem; margin-bottom: 16px; }
.admin-page th { background: #111; color: var(--y); padding: 8px; text-align: left; border-bottom: 1px solid #333; }
.admin-page td { padding: 7px 8px; border-bottom: 1px solid #1a1a1a; vertical-align: top; }
.admin-page tr:hover td { background: #0d0d0d; }
.admin-page input[type=text],
.admin-page input[type=email],
.admin-page input[type=password],
.admin-page input[type=file],
.admin-page textarea {
  background: #0a0a0a;
  border: 1px solid #444;
  padding: 7px 10px;
  color: var(--w);
  font-family: inherit;
  font-size: .88rem;
  outline: none;
  width: 100%;
  margin-bottom: 8px;
}
.admin-page input:focus, .admin-page textarea:focus { border-color: var(--g); }
.admin-page button {
  background: var(--g);
  border: none;
  padding: 6px 14px;
  color: #000;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  font-size: .83rem;
  text-transform: uppercase;
}
.admin-page button.danger    { background: var(--r); color: #fff; }
.admin-page button.secondary { background: transparent; border: 1px solid #444; color: #888; }
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.stat {
  background: #0a0a0a;
  border: 1px solid #333;
  padding: 14px 20px;
  text-align: center;
  flex: 1;
  min-width: 90px;
}
.stat-num   { font-size: 2rem; font-weight: 700; color: var(--y); display: block; }
.stat-label { font-size: .76rem; color: #555; text-transform: uppercase; }
.asset-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.asset-item {
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  padding: 10px;
  width: 130px;
  text-align: center;
  font-size: .76rem;
}
.asset-item img { max-width: 100%; max-height: 70px; margin-bottom: 6px; display: block; object-fit: contain; }
.asset-name { color: #555; word-break: break-all; margin-bottom: 6px; }

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 480px) {
  .card { padding: 24px 16px; }
  .card-title { font-size: 1.3rem; letter-spacing: 1px; }
}