/* GAME NIGHT — shared tokens
   World: a neon bar after hours. Mocktail / Happy Hour / Last Call is the brand,
   so the palette is drink-tier neon on plum-black velvet — never gray SaaS. */

:root {
  --ink: #14090f;        /* room-dark plum, not terminal black */
  --velvet: #241019;     /* panel surface */
  --velvet-2: #321622;   /* raised surface */
  --line: #4a2436;       /* hairline on velvet */
  --chalk: #fff3e6;      /* warm text */
  --chalk-dim: #cfa9b8;  /* secondary text */
  --rose: #ff4d8d;       /* the neon sign; her color */
  --rose-deep: #c22a63;
  --amber: #ffb84d;      /* happy hour / tips */
  --mint: #7fe7c4;       /* mocktail / free & success */
  --lastcall: #ff3b30;   /* reserved: Last Call + veto only */
  --shadow: 0 12px 40px rgba(0, 0, 0, .55);
  --r-lg: 22px;
  --r-md: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--chalk);
  background: var(--ink);
}

.display {
  font-family: "Bungee", "Rubik", system-ui, sans-serif;
  letter-spacing: .02em;
  font-weight: 400;
  text-transform: uppercase;
}

.neon { color: var(--rose); text-shadow: 0 0 18px rgba(255, 77, 141, .55), 0 0 2px rgba(255, 77, 141, .9); }

.card {
  background: linear-gradient(180deg, var(--velvet-2), var(--velvet));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.btn {
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--velvet-2);
  color: var(--chalk);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 17px;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.btn.primary { background: var(--rose); border-color: var(--rose); color: #2a0716; }
.btn.primary:disabled { background: var(--velvet-2); color: var(--chalk-dim); border-color: var(--line); }
.btn.ghosty { background: transparent; }
.btn.selected { background: var(--rose); border-color: var(--rose); color: #2a0716; }
.btn.mint { background: var(--mint); border-color: var(--mint); color: #0b241c; }
.btn:disabled { opacity: .55; cursor: default; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: 13px; color: var(--chalk-dim); background: rgba(0,0,0,.25);
}

/* rubber-stamp verdicts — one of the two signature elements */
.stamp {
  font-family: "Bungee", sans-serif;
  color: var(--lastcall);
  border: 4px solid var(--lastcall);
  border-radius: 10px;
  padding: 8px 18px;
  transform: rotate(-7deg);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(20, 9, 15, .82);
  box-shadow: 0 0 0 2px rgba(20,9,15,.82), var(--shadow);
}
.stamp.mint { color: var(--mint); border-color: var(--mint); }
.stamp.amber { color: var(--amber); border-color: var(--amber); }

@keyframes stamp-slam {
  0%   { transform: rotate(-7deg) scale(2.6); opacity: 0; }
  60%  { transform: rotate(-7deg) scale(.96); opacity: 1; }
  100% { transform: rotate(-7deg) scale(1); opacity: 1; }
}
@keyframes pop-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse-glow { 0%,100% { opacity: .85; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}