/* voxpair-ui.css: the shared VoxPair design kit.
   Same tokens and components as voxpair.com (site-com/index.html) and the
   game's login pages (VPhostinger/assets/css/auth.css). An identical copy is
   meant to live in each project so the three sites stay independent but look
   like one product. If you change a token here, change it in all three. */

:root{
  --night:#0e1a2b; --night2:#122338; --mist:#1b2e44; --mist2:#223a56;
  --amber:#ffb347; --glow:#7ad7f0; --fox:#ff6a13; --fox-deep:#c9500b;
  --leaf:#58cc02; --violet:#9b5de5; --danger:#ff5d5d;
  --text:#e8f1f8; --muted:#9fbad0; --dim:#6f8ba3;
  --border:rgba(122,215,240,.18); --border2:rgba(122,215,240,.32);
  --card:rgba(27,46,68,.62); --card2:rgba(27,46,68,.85);
  /* section accents, identical to the game's building colours */
  --terra:#d9623b; --vio:#8b5cf6; --blue:#3fa9f5; --teal:#14b8a6; --green:#4cb944; --slate:#7b8aa0;
  --display:"Fredoka","Nunito",system-ui,sans-serif;
  --body:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:20px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body); color:var(--text); background:var(--night);
  overflow-x:hidden; -webkit-text-size-adjust:100%; line-height:1.5; min-height:100vh;
}
a{color:inherit; text-decoration:none;}
button, input, select, textarea{font:inherit; color:inherit;}
button{background:none; border:0; cursor:pointer;}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-.01em; line-height:1.15;}
::selection{background:var(--fox); color:#fff;}
:focus-visible{outline:3px solid var(--glow); outline-offset:3px; border-radius:8px;}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}

/* night sky backdrop */
.sky{ position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1100px 700px at 80% -10%, rgba(155,93,229,.22), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(122,215,240,.12), transparent 55%),
    radial-gradient(700px 400px at 50% 115%, rgba(255,106,19,.12), transparent 60%),
    var(--night);
}
.stars i{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.4; animation:twinkle 3.5s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{opacity:.12} 50%{opacity:.8} }

/* logo */
.logo{ display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:21px; }
.logo .f{ font-size:26px; filter:drop-shadow(0 0 10px rgba(255,106,19,.55)); }
.logo .a{ color:var(--amber); } .logo .b{ color:var(--glow); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-weight:600; font-size:16px;
  padding:13px 22px; border-radius:16px; transition:transform .15s, box-shadow .15s, background .15s, opacity .15s;
  white-space:nowrap;
}
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none !important; }
.btn-fox{ background:linear-gradient(180deg,#ff8a3d,var(--fox)); color:#fff; box-shadow:0 5px 0 var(--fox-deep), 0 12px 30px rgba(255,106,19,.3); }
.btn-fox:hover{ transform:translateY(-2px); }
.btn-fox:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--fox-deep); }
.btn-ghost{ border:1.5px solid var(--border2); color:var(--text); background:rgba(122,215,240,.06); }
.btn-ghost:hover{ background:rgba(122,215,240,.12); transform:translateY(-2px); }
.btn-sm{ font-size:14px; padding:9px 14px; border-radius:12px; }
.btn-sm.btn-fox{ box-shadow:0 4px 0 var(--fox-deep); }

/* cards, pills, chips */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); }
.kicker{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--glow); margin-bottom:10px; }
.pill{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; padding:6px 12px; border-radius:100px; background:rgba(14,26,43,.6); border:1px solid var(--border); }
.chip{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; padding:5px 10px; border-radius:10px; background:rgba(122,215,240,.1); border:1px solid var(--border2); }
.chip.on{ background:rgba(255,179,71,.2); border-color:var(--amber); color:var(--amber); }
.badge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:8px; }
.badge.full{ background:rgba(88,204,2,.18); color:#a9f06e; border:1px solid rgba(88,204,2,.5); }
.badge.early{ background:rgba(122,215,240,.1); color:var(--glow); border:1px solid var(--border2); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}