/* ============================================================
 * bam.li · design tokens · v060
 * Single source of truth for colour, type, radius, spacing.
 * See DESIGN_TOKENS.md for the full spec.
 * ============================================================ */

:root {
  /* ── colour · surfaces ── */
  --bam-bg: #0a0a14;
  --bam-card: #15151c;
  --bam-input: #1a1a22;
  --bam-border: #2a2a30;
  --bam-border-soft: #20202a;

  /* ── colour · text ── */
  --bam-text: #ffffff;
  --bam-text-muted: #888888;
  --bam-text-dim: #555555;

  /* ── colour · brand ── */
  --bam-yellow: #FFD93D;
  --bam-red: #E24B4A;
  --bam-pink: #ED93B1;
  --bam-orange: #EF9F27;
  --bam-purple: #7F77DD;
  --bam-blue: #4A9EFF;

  /* ── colour · brand gradients (for buttons) ── */
  --grad-yellow: linear-gradient(180deg, #FFD93D 0%, #E5A828 100%);
  --grad-purple: linear-gradient(180deg, #4a3a8a 0%, #2a2050 100%);
  --grad-blue: linear-gradient(180deg, #4a9eff 0%, #1f63bf 100%);

  /* ── type families ── */
  --font-display: Impact, 'Arial Black', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── radius ── */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ── shadow / glow ── */
  --shadow-card: 0 4px 0 -1px rgba(0,0,0,.4);
  --shadow-press: 0 3px 0 -1px rgba(0,0,0,.6);
  --shadow-modal: 0 30px 80px -10px rgba(0,0,0,.7);
  --glow-yellow: 0 0 18px -4px rgba(255,217,61,.55);
  --glow-red:    0 0 18px -4px rgba(226,75,74,.55);
  --glow-purple: 0 0 18px -4px rgba(127,119,221,.55);
  --glow-blue:   0 0 18px -4px rgba(74,158,255,.55);

  /* ── motion ── */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
 * Buttons — 6 locked variants
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border: 2px solid #000;
  border-radius: var(--radius-md);
  padding: 11px 18px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform .1s, box-shadow .1s;
  background: transparent;
  color: inherit;
}
.btn:hover:not(:disabled){ transform: translateY(-1px) }
.btn:active:not(:disabled){ transform: translateY(1px) }
.btn:disabled{ opacity: .45; cursor: not-allowed; transform: none }

.btn-lg { font-size: 16px; padding: 13px 22px }
.btn-sm { font-size: 12px; padding: 8px 12px; letter-spacing: 1.2px }

/* Primary — yellow filled */
.btn-primary {
  background: var(--grad-yellow);
  color: #1a0f00;
  box-shadow: var(--shadow-press), var(--glow-yellow);
  text-shadow: 1px 1px 0 rgba(255,255,255,.3);
}

/* Throne — red outline */
.btn-throne {
  background: transparent;
  border-color: var(--bam-red);
  color: var(--bam-red);
  text-shadow: 1px 1px 0 #000;
}
.btn-throne:hover:not(:disabled){ background: rgba(226,75,74,.08) }

/* Invade — purple gradient */
.btn-invade {
  background: var(--grad-purple);
  border-color: var(--bam-purple);
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  box-shadow: var(--shadow-press), var(--glow-purple);
}

/* Shield — blue gradient */
.btn-shield {
  background: var(--grad-blue);
  color: #fff;
  box-shadow: var(--shadow-press), var(--glow-blue);
}

/* Ghost — secondary, cancel, dismiss */
.btn-ghost {
  background: var(--bam-input);
  border: 1.5px solid var(--bam-border);
  color: var(--bam-text-muted);
}
.btn-ghost:hover:not(:disabled){ border-color: var(--bam-yellow); color: var(--bam-yellow) }

/* Danger — red filled */
.btn-danger {
  background: var(--bam-red);
  color: #fff;
  box-shadow: var(--shadow-press);
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}

/* ============================================================
 * Tabs — one pattern, underline style
 * ============================================================ */

.tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 8px 4px 0;
  border-bottom: 1.5px solid var(--bam-border);
  flex-wrap: wrap;
}
.tabs > button, .tabs > a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1.3px;
  color: var(--bam-text-muted);
  background: transparent;
  border: 0;
  padding: 8px 2px 10px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: color .15s;
  line-height: 1;
  text-decoration: none;
}
.tabs > button:hover, .tabs > a:hover { color: var(--bam-yellow) }
.tabs > .on, .tabs > .on { color: var(--bam-yellow) }
.tabs > .on::after, .tabs > [aria-current='page']::after {
  content:'';
  position: absolute;
  left: 0; right: 0;
  bottom: -1.5px;
  height: 3px;
  background: var(--bam-yellow);
  border-radius: 2px 2px 0 0;
  box-shadow: var(--glow-yellow);
}
.tabs .count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .6px;
  color: var(--bam-text-dim);
  text-transform: none;
}
.tabs > .on .count { color: var(--bam-yellow); opacity: .8 }

/* ============================================================
 * Cards
 * ============================================================ */

.card {
  background: var(--bam-card);
  border: 1.5px solid var(--bam-border);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.card-lg { border-radius: var(--radius-lg); padding: 20px }
.card-yellow { border-color: var(--bam-yellow); box-shadow: var(--shadow-card), var(--glow-yellow) }
.card-red    { border-color: var(--bam-red);    box-shadow: var(--shadow-card), var(--glow-red) }
.card-purple { border-color: var(--bam-purple); box-shadow: var(--shadow-card), var(--glow-purple) }
.card-blue   { border-color: var(--bam-blue);   box-shadow: var(--shadow-card), var(--glow-blue) }

/* ============================================================
 * Pills / chips
 * ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bam-input);
  border: 1.5px solid var(--bam-border);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--bam-text-muted);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.pill:hover { border-color: var(--bam-yellow); color: var(--bam-yellow) }
.pill.on { border-color: var(--bam-yellow); color: var(--bam-yellow); background: rgba(255,217,61,.06) }

/* ============================================================
 * Inputs — iOS 16px rule baked in
 * ============================================================ */

.input {
  background: var(--bam-input);
  border: 1.5px solid var(--bam-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 16px;  /* HARD iOS rule — never go below */
  color: var(--bam-text);
  outline: none;
  transition: border-color .15s;
}
.input:focus { border-color: var(--bam-yellow) }
.input::placeholder { color: var(--bam-text-dim) }

/* ============================================================
 * Type utilities
 * ============================================================ */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--bam-yellow);
  text-transform: uppercase;
  font-weight: 700;
}
.label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  color: var(--bam-text-muted);
  text-transform: uppercase;
  font-weight: 700;
}
.t-muted { color: var(--bam-text-muted) }
.t-dim { color: var(--bam-text-dim) }
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums }

/* ============================================================
 * Animation helpers
 * ============================================================ */

@keyframes bam-pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
@keyframes bam-bob   { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bam-red);
  box-shadow: 0 0 8px var(--bam-red);
  animation: bam-pulse 1.4s infinite;
  display: inline-block;
}

/* ============================================================
 * iOS hard rule — every input/textarea ≥ 16px (no zoom)
 * ============================================================ */
input, textarea, select { font-size: 16px }

/* ============================================================
 * Shared chrome — backs inc/header.php + inc/footer.php so the
 * top bar + footer render identically on EVERY page (incl. the
 * ones that historically lacked .top-right or footer classes).
 * Per-page inline CSS still wins where present (loads after).
 * ============================================================ */
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px}
.logo{font-family:var(--font-display);font-size:30px;letter-spacing:1px;transform:rotate(-2deg);display:inline-block;color:var(--bam-text);text-decoration:none}
.logo b{color:var(--bam-red);font-weight:inherit}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:32px;border:1.5px solid var(--bam-border);border-radius:var(--radius-sm);color:var(--bam-text-muted);background:none;cursor:pointer;transition:border-color .15s,color .15s}
.menu-btn svg{width:18px;height:18px}
.menu-btn:hover{border-color:var(--bam-yellow);color:var(--bam-yellow)}
.top-right{display:flex;align-items:center;gap:8px}

/* Follow-on-Facebook (FunClicker = games creator). Header icon sits left of the bell. */
.bam-social-fb{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:#1877F2;cursor:pointer;text-decoration:none;padding:0;margin-right:5px;transition:color .15s,transform .08s}
.bam-social-fb:hover{color:var(--bam-yellow,#FFD93D);transform:translateY(-1px)}
.bam-social-fb svg{width:20px;height:20px;display:block;fill:currentColor}

/* Footer container + rows (canonical values, for pages whose inline footer CSS is absent e.g. tips) */
.foot{display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 8px 4px;text-align:center}
.foot-mech{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;justify-content:center}
.foot-mech a{font-family:var(--font-display);font-size:22px;letter-spacing:1.2px;color:var(--bam-text-muted);text-decoration:none;text-transform:uppercase;transition:color .12s}
.foot-mech a:hover{color:var(--bam-yellow)}
.foot-mech a.current{color:var(--bam-yellow);border-bottom:2px solid var(--bam-yellow);padding-bottom:2px}
.foot-divider{width:80%;height:1px;background:var(--bam-border);border:0;margin:2px 0}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--bam-text-dim)}
.foot-legal a{color:var(--bam-text-dim);text-decoration:none;transition:color .12s}
.foot-legal a:hover{color:var(--bam-yellow)}
.foot-legal .dot{opacity:.5}
.foot-copy{font-family:var(--font-mono);font-size:9px;letter-spacing:1.1px;color:var(--bam-text-dim);text-transform:uppercase;margin-top:2px}
.foot-social{display:flex;justify-content:center;margin-top:4px}
.foot-fb{display:inline-flex;align-items:center;gap:7px;color:#1877F2;font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;transition:color .15s}
.foot-fb:hover{color:var(--bam-yellow,#FFD93D)}
.foot-fb svg{width:15px;height:15px;display:block;fill:currentColor}