/* ==========================================================================
   Arcadoom Site CSS
   - Theme tokens
   - Base reset
   - Global links
   - Layout utilities
   - Header / brand pill / nav
   - Buttons
   - Hero
   - Cards (games)
   - News
   - Footer
   - Forms
   - Tables
   - Utilities
   ========================================================================== */

/* -- Theme tokens --------------------------------------------------------- */
:root {
  --bg:       #0a0e13;
  --bg2:      #0c1118;
  --card:     #111826;
  --text:     #e9edf3;
  --muted:    #94a3b8;
  --line:     #1f2a3a;
  --accent:   #00d1ff;
  --accent2:  #7cff6b;
  --pink:     #ff4bd8;
}

/* -- Base reset ----------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #0f1b2a, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, Arial, sans-serif;
}

/* -- Global links (neutral by default; no underline on hover) ------------- */
a {
  color: inherit;                 /* no forced blue */
  text-decoration: none;          /* no underline */
  transition:
    color .15s ease,
    border-color .15s ease,
    opacity .15s ease,
    transform .15s ease;
}
a:visited { color: inherit; }
a:hover   { text-decoration: none; opacity: 1; }

/* Optional utilities for content links */
.link-accent { color: var(--accent); }
.link-muted  { color: var(--muted);  }
.link-accent:hover,
.link-muted:hover { opacity: 0.9; }

/* -- Layout utilities ----------------------------------------------------- */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px;
}

.section { padding: 36px 20px; }
.h       { margin: 0 0 14px;   }

.grid       { display: grid; gap: 16px; }
.games-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* -- Header / brand pill / nav ------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(10,14,19,.9), rgba(10,14,19,.6));
  border-bottom: 1px solid var(--line);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* brand left, nav right */
  gap: 20px;
}

/* Brand pill: entire ARCADOOM GAMING is clickable and in a neon chip */
.logo{
  display:inline-flex;
  align-items:center;         /* both words are same size, center-align */
  gap:10px;
  white-space:nowrap;
  color:var(--text);
  text-decoration:none;

  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(0,209,255,.12), rgba(124,255,107,.10));
  border:1px solid rgba(0,209,255,.28);
  box-shadow:
    inset 0 0 10px rgba(124,255,107,.10),
    0 0 16px rgba(0,209,255,.18);
}
.logo:hover{
  border-color:rgba(0,209,255,.45);
  box-shadow:
    inset 0 0 12px rgba(124,255,107,.14),
    0 0 22px rgba(0,209,255,.26);
}

/* ARCADOOM (gradient neon) */
.wordmark{
  font-weight:800;
  font-size:28px;
  line-height:1;
  letter-spacing:.02em;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 0 8px rgba(0,209,255,.35),
    0 0 18px rgba(124,255,107,.20);
}

/* GAMING (white + subtle neon) */
.logo .sub{
  font-weight:800;
  font-size:28px;             /* same as ARCADOOM */
  line-height:1;
  letter-spacing:.08em;        /* caps need a bit more tracking */
  text-transform:uppercase;
  margin-left:2px;
  color:var(--text);
  opacity:.98;
  /* soft white/cyan glow to match the vibe */
  text-shadow:
    0 0 6px rgba(255,255,255,.25),
    0 0 14px rgba(124,255,107,.15),
    0 0 18px rgba(0,209,255,.18);
}


/* (Legacy) If you ever re-introduce an SVG wordmark; not used now */
.neon-logo {
  height: 28px;
  width: auto;
  display: block;
  filter:
    drop-shadow(0 0 8px rgba(0,209,255,.35))
    drop-shadow(0 0 18px rgba(124,255,107,.20));
}

/* Header nav links (non-buttons) — keep neutral, no underline on hover */
.topbar nav a:not(.btn) {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  margin-left: 10px;
  opacity: .92;
}
.topbar nav a:not(.btn):visited { color: var(--text); }
.topbar nav a:not(.btn):hover   { opacity: 1; text-decoration: none; }
.topbar nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* -- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}
a.btn { color: inherit; text-decoration: none; }

.btn:hover { border-color: #2e3a4e; }

.btn.accent {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #05121a;
  border: none;
}

.btn.ghost { background: transparent; }

/* -- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg2), transparent 60%);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 46vh;
  align-items: center;
}

.title {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  margin: 0 0 8px;
}

.tag {
  color: var(--muted);
  font-size: 18px;
  margin: 0 0 18px;
}

.cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Ambient glow behind hero */
.glow {
  position: absolute;
  inset: auto -40% -40% -40%;
  height: 220px;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(0,209,255,.25), transparent 70%),
    radial-gradient(closest-side at 60% 40%, rgba(124,255,107,.18), transparent 75%),
    radial-gradient(closest-side at 40% 60%, rgba(255,75,216,.12), transparent 80%);
  filter: blur(40px);
}

/* -- Cards (games) -------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, var(--card), #0c1420);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  display: block;
}
.card:hover {
  border-color: #2e3a4e;
  transform: translateY(-1px);
}

.card .meta { padding: 12px; }
.card .name { font-weight: 800; }

.card .tags span {
  display: inline-block;
  margin: 6px 8px 0 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.card .thumb {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,209,255,.25), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(124,255,107,.25), transparent 60%),
    linear-gradient(135deg, #0a1320, #0e1624);
}

/* -- News ----------------------------------------------------------------- */
.news { display: grid; gap: 14px; }

.news-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px dashed #223047;
  border-radius: 12px;
  background: #0b121d;
}

.news-item .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--pink));
  box-shadow: 0 0 12px rgba(0,209,255,.6);
}

/* -- Footer --------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 20px;
  color: var(--muted);
}

/* Footer links — subtle by default, no underline */
.footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed #223047;
}
.footer a:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* -- Forms ---------------------------------------------------------------- */
.form {
  max-width: 420px;
  margin: 24px auto;
  display: grid;
  gap: 12px;
}

.form label { display: grid; gap: 6px; color: var(--muted); }

.form input {
  padding: 12px;
  border-radius: 10px;
  background: #0a111a;
  border: 1px solid #182536;
  color: var(--text);
}

.form .actions { display: flex; gap: 10px; align-items: center; }

.error {
  background: #2a1020;
  border: 1px solid #4a2040;
  color: #ffd8f1;
  padding: 10px;
  border-radius: 10px;
}

/* -- Tables --------------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.table th,
.table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.table th {
  background: #0c141f;
  color: #a2b4cc;
  text-align: left;
}

/* -- Utilities ------------------------------------------------------------ */
.hide { display: none !important; }

/* Show/hide by auth state: add/remove .hide via JS */
[data-auth="in"].hide,
[data-auth="out"].hide { display: none !important; }

/* ============================
   Achievement toasts (gold) 
   ============================ */
#toastHost{
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none; /* container ignores clicks */
}

/* GOLD, SHINY by default (no extra class needed) */
#toastHost .toast{
  pointer-events: auto;                 /* individual toasts can be clickable */
  position: relative;
  overflow: hidden;                     /* enables the sheen layer */
  display: flex;
  gap: 10px;
  align-items: flex-start;

  /* gold gradient border using the double-background trick */
  background:
    linear-gradient(180deg, rgba(18,14,6,.94), rgba(10,8,4,.94)) padding-box,
    conic-gradient(from 180deg at 50% 50%,
      #fff2c6, #ffd86c, #f0b52f, #ba7f10, #ffd86c, #fff2c6) border-box;
  border: 1px solid transparent;
  border-radius: 14px;

  padding: 12px 14px;
  color: #fff8e6;

  box-shadow:
    0 12px 40px rgba(255, 208, 80, .25),
    inset 0 0 0 1px rgba(255, 212, 96, .20),
    0 8px 30px rgba(0,0,0,.35);

  transform: translateY(-6px) scale(.98);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

/* snappier entrance */
#toastHost .toast.in{
  transform: translateY(0) scale(1);
  opacity: 1;
  animation: toastPop .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes toastPop{
  0%{ transform: translateY(-6px) scale(.98); opacity:0; }
  60%{ transform: translateY(0) scale(1.02); opacity:1; }
  100%{ transform: translateY(0) scale(1); }
}

/* shimmering sweep */
#toastHost .toast::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(120deg,
    transparent 15%,
    rgba(255,255,255,.16) 40%,
    rgba(255,255,255,.33) 50%,
    rgba(255,255,255,.16) 60%,
    transparent 85%);
  transform: translateX(-120%);
  animation: toastSheen 1.4s ease-out .2s forwards;
}
@keyframes toastSheen { to { transform: translateX(120%); } }

/* subtle glitter specks */
#toastHost .toast::before{
  content:"";
  position:absolute; inset:1px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(2px 2px at 18% 32%, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(1.5px 1.5px at 66% 58%, rgba(255,255,255,.25), transparent 70%),
    radial-gradient(1.5px 1.5px at 38% 78%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(1px 1px at 82% 22%, rgba(255,255,255,.2), transparent 70%);
  filter: blur(.2px);
}

/* copy */
#toastHost .t-emoji{
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255,210,70,.55));
}
#toastHost .t-copy{ display:flex; flex-direction:column; }
#toastHost .t-line1{ font-size: 12px; color:#ffe6a8; letter-spacing:.02em; }

/* “gold foil” title */
#toastHost .t-line2{
  font-weight: 800;
  font-size: 14px;
  margin-top: 2px;
  background: linear-gradient(180deg, #fff6d6, #ffd56b 45%, #a97808 70%, #ffe9a6);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
#toastHost .t-points{ margin-top:6px; font-size:12px; color:#e9ffad; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #toastHost .toast::after,
  #toastHost .toast.in{ animation:none; }
}