/* Selection Prada Love Arcade — CSS v1.0
   Aesthetic: Velvet room · Deep burgundy · Gold · Diamonds */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Montserrat:wght@200;300;400;500&display=swap');

:root {
  --spa-bg:       #050203;
  --spa-velvet:   #120810;
  --spa-panel:    #0E090C;
  --spa-gold:     #C9A84C;
  --spa-gold2:    #E8C96A;
  --spa-ruby:     #8B1A2A;
  --spa-ruby2:    #C42040;
  --spa-text:     #EDE0C4;
  --spa-muted:    #9A8870;
  --spa-border:   rgba(201,168,76,0.18);
  --spa-border2:  rgba(201,168,76,0.38);
  --spa-serif:    'Cormorant Garamond', Georgia, serif;
  --spa-sans:     'Montserrat', sans-serif;
  --spa-ease:     cubic-bezier(0.22,0.68,0,1.2);
  --spa-silk:     cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset ─────────────────────────────────────────────── */
.spa-wrap *, .spa-room-wrap *, .spa-prizes-wrap * { box-sizing: border-box; }

/* ── Notice ─────────────────────────────────────────────── */
.spa-notice {
  padding: 28px 32px;
  background: var(--spa-panel);
  border: 1px solid var(--spa-border);
  border-top: 2px solid var(--spa-gold);
  color: var(--spa-muted);
  font-family: var(--spa-sans);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.spa-notice a { color: var(--spa-gold); }

/* ════════════════════════════════════════════════════════
   ARCADE LOBBY
════════════════════════════════════════════════════════ */
.spa-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 80px;
  font-family: var(--spa-sans);
  color: var(--spa-text);
}

/* Header */
.spa-header {
  text-align: center;
  padding: 48px 20px 40px;
  position: relative;
}
.spa-header-gems {
  font-size: 11px;
  letter-spacing: 0.48em;
  color: rgba(201,168,76,0.3);
  margin-bottom: 18px;
}
.spa-title {
  font-family: var(--spa-serif);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 300;
  color: var(--spa-gold2);
  margin: 0 0 10px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.spa-title-gem { font-size: 0.45em; opacity: 0.65; }
.spa-subtitle {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--spa-muted);
  margin-bottom: 24px;
}
.spa-credits-hud {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: var(--spa-panel);
  border: 1px solid var(--spa-border);
  border-top: 2px solid var(--spa-gold);
  font-size: 13px;
  color: var(--spa-muted);
}
.spa-hud-gem { color: var(--spa-gold); font-size: 12px; }
.spa-credits-hud #spa-credit-count {
  font-family: var(--spa-serif);
  font-size: 1.8rem;
  color: var(--spa-gold);
  font-weight: 300;
  line-height: 1;
}
.spa-buy-link {
  padding: 4px 14px;
  border: 1px solid rgba(201,168,76,0.4);
  color: var(--spa-gold);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s;
  margin-left: 8px;
}
.spa-buy-link:hover { background: var(--spa-gold); color: #050505; }

/* Active session banner */
.spa-active-session {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 24px;
  background: var(--spa-panel);
  border: 1px solid var(--spa-border2);
  border-left: 3px solid var(--spa-gold);
  margin-bottom: 32px;
  font-size: 14px;
}
.spa-as-gem { color: var(--spa-gold); }
.spa-as-time { color: var(--spa-gold2); font-family: var(--spa-serif); font-size: 1.1rem; margin-left: auto; }

/* Sections */
.spa-section { margin-bottom: 52px; }
.spa-section-title {
  font-family: var(--spa-serif);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--spa-text);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.spa-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--spa-border2), transparent);
}

/* Plans */
.spa-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.spa-plan-card {
  background: var(--spa-panel);
  border: 1px solid var(--spa-border);
  padding: 32px 24px;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
}
.spa-plan-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--spa-gold), transparent);
  transform: scaleX(0);
  transition: transform 0.4s var(--spa-silk);
}
.spa-plan-card:hover { border-color: var(--spa-border2); transform: translateY(-4px); }
.spa-plan-card:hover::before { transform: scaleX(1); }
.spa-plan-icon { font-size: 22px; color: var(--spa-gold); margin-bottom: 12px; }
.spa-plan-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--spa-muted);
  margin-bottom: 12px;
}
.spa-plan-cost {
  font-family: var(--spa-serif);
  font-size: 2.4rem;
  color: var(--spa-gold);
  font-weight: 300;
  margin-bottom: 4px;
  line-height: 1;
}
.spa-plan-cost span { font-size: 1rem; color: var(--spa-muted); }
.spa-plan-btn {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--spa-gold);
  color: var(--spa-gold);
  font-family: var(--spa-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.spa-plan-btn::after { content:''; position:absolute; inset:0; background:var(--spa-gold); transform:translateX(-100%); transition:transform 0.3s var(--spa-silk); z-index:-1; }
.spa-plan-btn:hover { color:#050505; }
.spa-plan-btn:hover::after { transform:translateX(0); }
.spa-plan-btn:disabled { opacity:0.35; cursor:not-allowed; }

/* Join form */
.spa-join-form {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.spa-code-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--spa-border2);
  color: var(--spa-text);
  padding: 13px 20px;
  font-family: 'Courier New', monospace;
  font-size: 22px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  width: 240px;
  outline: none;
  transition: border-color 0.2s;
}
.spa-code-input:focus { border-color: var(--spa-gold); }
.spa-msg { font-size: 12px; color: #ff9090; margin-top: 8px; }

/* Games showcase */
.spa-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.spa-game-card {
  background: var(--spa-panel);
  border: 1px solid var(--spa-border);
  padding: 20px 12px;
  text-align: center;
  transition: all 0.25s;
}
.spa-game-card:hover { border-color: var(--spa-border2); transform: translateY(-3px); }
.spa-game-icon { font-size: 24px; margin-bottom: 8px; }
.spa-game-name { font-size: 10px; letter-spacing: 0.1em; color: var(--spa-muted); text-transform: uppercase; line-height: 1.4; }

/* Prizes link */
.spa-prizes-link-wrap { text-align: center; }

/* Buttons */
.spa-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: linear-gradient(135deg, var(--spa-gold), var(--spa-gold2), var(--spa-gold));
  background-size: 200% 100%;
  color: #050505;
  border: none;
  font-family: var(--spa-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background-position 0.4s, box-shadow 0.3s, transform 0.2s;
}
.spa-btn-gold:hover { background-position:100% 0; box-shadow:0 6px 22px rgba(201,168,76,0.35); transform:translateY(-2px); color:#050505; }
.spa-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: transparent;
  border: 1px solid var(--spa-border2);
  color: var(--spa-gold);
  font-family: var(--spa-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s;
}
.spa-btn-ghost:hover { background: rgba(201,168,76,0.08); border-color: var(--spa-gold); color: var(--spa-gold); }

/* ════════════════════════════════════════════════════════
   GAME ROOM
════════════════════════════════════════════════════════ */
.spa-room-wrap {
  min-height: 100vh;
  background: var(--spa-bg);
  font-family: var(--spa-sans);
  color: var(--spa-text);
  display: flex;
  flex-direction: column;
}

/* HUD bar */
.spa-room-hud {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--spa-velvet);
  border-bottom: 1px solid var(--spa-border);
  position: sticky;
  top: 0;
  z-index: 99;
}
.spa-room-back { font-size: 10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--spa-muted); text-decoration:none; transition:color 0.2s; }
.spa-room-back:hover { color: var(--spa-gold); }
.spa-room-code-display { font-family:'Courier New',monospace; font-size:14px; letter-spacing:0.2em; color:var(--spa-gold); padding:4px 12px; border:1px solid var(--spa-border); }
.spa-room-timer-wrap { display:flex; align-items:center; gap:6px; font-size:13px; }
.spa-room-scores { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--spa-muted); margin-left:auto; }
.spa-score-sep { color:var(--spa-gold); }
.spa-room-credits { font-size:12px; color:var(--spa-gold); }

/* Status panel */
.spa-room-status {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 60px 20px;
  text-align: center;
  min-height: 400px;
}
.spa-status-gem { font-size: 32px; color: var(--spa-gold); opacity: 0.5; animation: spa-pulse 2s infinite; }
@keyframes spa-pulse { 0%,100%{opacity:0.4;transform:scale(1)} 50%{opacity:0.9;transform:scale(1.1)} }
#spa-status-msg { font-size: 16px; color: var(--spa-muted); line-height: 1.6; }
.spa-share-label { font-size: 12px; letter-spacing:0.12em; color:var(--spa-muted); margin-bottom:12px; }
.spa-code-badge {
  font-family: 'Courier New', monospace;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--spa-gold2);
  padding: 14px 28px;
  border: 2px solid var(--spa-gold);
  background: var(--spa-panel);
  margin-bottom: 14px;
  display: inline-block;
}

/* Game selector */
.spa-game-selector {
  padding: 40px 24px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
.spa-game-selector h2 { font-family:var(--spa-serif); font-size:1.8rem; font-weight:300; color:var(--spa-text); margin-bottom:6px; }
.spa-game-selector p  { font-size:12px; color:var(--spa-muted); margin-bottom:24px; letter-spacing:0.06em; }
.spa-game-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.spa-pick-game-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: var(--spa-panel);
  border: 1px solid var(--spa-border);
  color: var(--spa-text);
  cursor: pointer;
  transition: all 0.25s;
  font-family: var(--spa-sans);
}
.spa-pick-game-btn:hover { border-color: var(--spa-gold); background: rgba(201,168,76,0.06); transform: translateY(-3px); }
.spa-pg-icon { font-size: 24px; }
.spa-pick-game-btn span:last-child { font-size: 10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--spa-muted); }

/* ════════════════════════════════════════════════════════
   GAME CANVAS — shared styles
════════════════════════════════════════════════════════ */
.spa-game-canvas { flex: 1; padding: 28px 24px; max-width: 900px; margin: 0 auto; width: 100%; }
.spa-game-wrap {
  background: var(--spa-panel);
  border: 1px solid var(--spa-border);
  border-top: 2px solid var(--spa-gold);
  padding: 28px 32px;
}
.spa-game-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--spa-border);
  flex-wrap: wrap;
}
.spa-game-ico { font-size: 22px; }
.spa-game-header h2 {
  font-family: var(--spa-serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--spa-text);
  margin: 0;
  flex: 1;
}
.spa-your-turn {
  font-size: 10px; letter-spacing:0.2em; text-transform:uppercase;
  color: var(--spa-gold2);
  background: rgba(201,168,76,0.12);
  padding: 4px 12px;
  border: 1px solid rgba(201,168,76,0.3);
  animation: spa-blink 1.5s ease infinite;
}
@keyframes spa-blink { 0%,100%{opacity:1} 50%{opacity:0.6} }
.spa-wait-turn { font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--spa-muted); padding:4px 12px; }
.spa-waiting-label { font-size:12px; color:var(--spa-muted); font-style:italic; margin-top:16px; letter-spacing:0.06em; }
.spa-streak { font-size:11px; color:#ff9966; letter-spacing:0.1em; }
.spa-q-num { font-size:11px; color:var(--spa-muted); letter-spacing:0.1em; }

/* Options / buttons */
.spa-options { display:flex; flex-direction:column; gap:10px; }
.spa-opt-btn {
  width:100%;
  padding:14px 20px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--spa-border);
  color:var(--spa-text);
  font-family:var(--spa-sans);
  font-size:13px;
  letter-spacing:0.04em;
  cursor:pointer;
  text-align:left;
  transition:all 0.2s;
}
.spa-opt-btn:hover:not(:disabled) { border-color:var(--spa-gold); background:rgba(201,168,76,0.08); color:var(--spa-gold2); }
.spa-opt-btn.selected { border-color:var(--spa-gold); background:rgba(201,168,76,0.15); color:var(--spa-gold2); }

/* ── Trivia ── */
.spa-trivia-q { font-family:var(--spa-serif); font-size:1.4rem; font-weight:300; color:var(--spa-text); margin-bottom:22px; line-height:1.5; }

/* ── Memory match ── */
.spa-memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 560px;
}
.spa-card {
  aspect-ratio: 0.7;
  cursor: pointer;
  perspective: 600px;
  position: relative;
}
.spa-card-inner {
  width:100%; height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 0.4s var(--spa-silk);
}
.spa-card.flipped .spa-card-inner,
.spa-card.matched .spa-card-inner { transform:rotateY(180deg); }
.spa-card-front, .spa-card-back {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden;
  font-size:28px;
  border:1px solid var(--spa-border);
}
.spa-card-front { background:var(--spa-velvet); color:var(--spa-gold); font-size:20px; }
.spa-card-back  { background:var(--spa-panel); transform:rotateY(180deg); }
.spa-card.matched .spa-card-back { border-color:var(--spa-gold); background:rgba(201,168,76,0.12); }

/* ── Tic Tac Love ── */
.spa-ttt-board {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  max-width:280px;
  margin:0 auto 16px;
}
.spa-ttt-cell {
  aspect-ratio:1;
  background:var(--spa-velvet);
  border:1px solid var(--spa-border);
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem;
  color:var(--spa-gold);
  transition:all 0.2s;
}
.spa-ttt-cell.clickable { cursor:pointer; }
.spa-ttt-cell.clickable:hover { background:rgba(201,168,76,0.1); border-color:var(--spa-gold); }
.spa-ttt-hint { text-align:center; font-size:12px; color:var(--spa-muted); letter-spacing:0.08em; }
.spa-ttt-score { font-size:11px; color:var(--spa-muted); }

/* ── Would You Rather ── */
.spa-wyr-question { font-family:var(--spa-serif); font-size:1.2rem; color:var(--spa-muted); margin-bottom:18px; font-style:italic; }
.spa-wyr-choices { display:flex; flex-direction:column; gap:12px; }
.spa-wyr-btn {
  padding:18px 24px;
  background:var(--spa-velvet);
  border:1px solid var(--spa-border);
  color:var(--spa-text);
  font-family:var(--spa-sans);
  font-size:15px;
  cursor:pointer;
  text-align:left;
  transition:all 0.2s;
}
.spa-wyr-btn:hover:not(:disabled) { border-color:var(--spa-ruby2); background:rgba(139,26,42,0.12); }
.spa-wyr-btn.selected { border-color:var(--spa-gold); background:rgba(201,168,76,0.1); }
.spa-wyr-or { text-align:center; font-family:var(--spa-serif); font-size:1.2rem; color:var(--spa-ruby2); font-style:italic; }
.spa-wyr-matches { margin-top:18px; font-size:12px; color:var(--spa-muted); letter-spacing:0.06em; }

/* ── Truth or Dare ── */
.spa-td-choose p { font-family:var(--spa-serif); font-size:1.2rem; color:var(--spa-text); margin-bottom:18px; }
.spa-td-btns { display:flex; gap:16px; }
.spa-td-btn {
  flex:1; padding:20px; background:var(--spa-velvet); border:1px solid var(--spa-border);
  color:var(--spa-text); font-family:var(--spa-sans); font-size:12px;
  letter-spacing:0.16em; text-transform:uppercase; cursor:pointer; transition:all 0.25s;
}
.spa-truth-btn:hover { border-color:var(--spa-gold); background:rgba(201,168,76,0.1); }
.spa-dare-btn:hover  { border-color:var(--spa-ruby2); background:rgba(139,26,42,0.1); }
.spa-td-type { font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--spa-gold); margin-bottom:14px; }
.spa-td-prompt { font-family:var(--spa-serif); font-size:1.5rem; font-weight:300; line-height:1.55; color:var(--spa-text); margin-bottom:22px; padding:20px; border:1px solid var(--spa-border); background:var(--spa-velvet); }
.spa-td-history { margin-top:20px; font-size:11px; color:rgba(160,136,112,0.45); }

/* ── Roulette ── */
.spa-roulette-wheel { width:180px; height:180px; margin:20px auto; position:relative; }
.spa-wheel-inner {
  width:100%; height:100%;
  border-radius:50%;
  border:3px solid var(--spa-gold);
  background:radial-gradient(circle at 35% 35%, var(--spa-ruby), #0a0508);
  display:flex; align-items:center; justify-content:center;
  font-size:32px; color:var(--spa-gold2);
  box-shadow:0 0 32px rgba(139,26,42,0.4),inset 0 0 16px rgba(0,0,0,0.5);
  transition:transform 0.1s;
}
.spa-roulette-wheel.spinning .spa-wheel-inner { animation:spa-spin 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
@keyframes spa-spin { 0%{transform:rotate(0)} 100%{transform:rotate(1440deg)} }
.spa-wheel-ring { position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(201,168,76,0.25); }
.spa-roulette-result { font-family:var(--spa-serif); font-size:1.4rem; text-align:center; color:var(--spa-text); margin:16px 0 20px; padding:14px; border:1px solid var(--spa-border); background:var(--spa-velvet); }
.spa-roulette-history { margin-top:20px; display:flex; flex-direction:column; gap:6px; }
.spa-rh-item { font-size:12px; color:var(--spa-muted); padding:8px 12px; border-left:2px solid rgba(201,168,76,0.2); }

/* ── Secret Admirer ── */
.spa-admirer-desc { font-size:13px; color:var(--spa-muted); margin-bottom:22px; line-height:1.6; letter-spacing:0.04em; }
.spa-admirer-symbols { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.spa-sym-btn {
  width:80px; height:80px; font-size:2rem;
  background:var(--spa-velvet); border:2px solid var(--spa-border);
  color:var(--spa-gold); cursor:pointer; transition:all 0.25s;
  display:flex; align-items:center; justify-content:center;
}
.spa-sym-btn:hover:not(:disabled) { border-color:var(--spa-gold2); background:rgba(201,168,76,0.1); transform:scale(1.1); }
.spa-sym-btn.selected { border-color:var(--spa-gold); background:rgba(201,168,76,0.18); }
.spa-admirer-hint { font-size:12px; color:var(--spa-muted); text-align:center; margin-top:16px; }

/* ── Heartbeat ── */
.spa-hb-desc { font-size:14px; color:var(--spa-text); margin-bottom:24px; line-height:1.65; }
.spa-hb-center { display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 auto 24px; }
.spa-hb-heart {
  font-size:5rem; cursor:default; transition:transform 0.1s;
  filter:drop-shadow(0 0 18px rgba(201,68,90,0.4));
}
.spa-hb-heart.tap-ready { cursor:pointer; }
.spa-hb-heart.tapped { transform:scale(1.25); filter:drop-shadow(0 0 32px rgba(255,80,100,0.7)); }
.spa-hb-count { font-family:var(--spa-serif); font-size:3rem; color:var(--spa-gold); }
.spa-hb-timer { font-size:1.2rem; color:var(--spa-ruby2); font-weight:500; }

/* ── Compatibility ── */
.spa-compat-q { font-family:var(--spa-serif); font-size:1.4rem; font-weight:300; color:var(--spa-text); margin-bottom:22px; }
.spa-compat-opts { display:flex; gap:12px; flex-wrap:wrap; }
.spa-copt-btn {
  flex:1; min-width:140px; padding:16px 20px;
  background:var(--spa-velvet); border:1px solid var(--spa-border);
  color:var(--spa-text); font-family:var(--spa-sans); font-size:14px;
  cursor:pointer; text-align:center; transition:all 0.2s;
}
.spa-copt-btn:hover:not(:disabled) { border-color:var(--spa-gold); background:rgba(201,168,76,0.08); }
.spa-copt-btn.selected { border-color:var(--spa-gold); background:rgba(201,168,76,0.15); color:var(--spa-gold2); }
.spa-compat-score { font-family:var(--spa-serif); font-size:5rem; color:var(--spa-gold); text-align:center; margin:20px 0 8px; }
.spa-compat-label { text-align:center; font-size:1.2rem; font-family:var(--spa-serif); color:var(--spa-text); margin-bottom:28px; }

/* ── Date planner ── */
.spa-date-cat { font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--spa-gold); margin-bottom:18px; }
.spa-date-opts { display:flex; flex-direction:column; gap:8px; }
.spa-dopt-btn { padding:14px 18px; background:var(--spa-velvet); border:1px solid var(--spa-border); color:var(--spa-text); font-family:var(--spa-sans); font-size:14px; cursor:pointer; text-align:left; transition:all 0.2s; }
.spa-dopt-btn:hover:not(:disabled) { border-color:var(--spa-gold); background:rgba(201,168,76,0.08); }
.spa-dopt-btn.selected { border-color:var(--spa-gold); background:rgba(201,168,76,0.15); }
.spa-date-reveal-grid { display:flex; flex-direction:column; gap:12px; margin:20px 0; }
.spa-dr-row { display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:center; padding:12px 16px; background:var(--spa-velvet); border:1px solid var(--spa-border); }
.spa-dr-row.is-match { border-color:var(--spa-gold); background:rgba(201,168,76,0.08); }
.spa-dr-label { font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--spa-muted); }
.spa-dr-choices { display:flex; align-items:center; gap:10px; font-size:13px; }
.spa-dr-match-icon { color:var(--spa-ruby2); font-size:16px; }
.spa-dr-vs { color:var(--spa-muted); font-size:11px; }

/* ── Word chain ── */
.spa-chain-hint { font-size:14px; margin-bottom:16px; color:var(--spa-text); }
.spa-chain-hint strong { color:var(--spa-gold2); font-size:1.4em; }
.spa-chain-display { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:20px; min-height:40px; }
.spa-chain-word { background:var(--spa-velvet); border:1px solid var(--spa-border); padding:6px 12px; font-size:14px; color:var(--spa-text); }
.spa-chain-arrow { color:var(--spa-gold); opacity:0.5; }
.spa-chain-input-wrap { display:flex; gap:10px; }
.spa-chain-input { flex:1; background:rgba(255,255,255,0.04); border:1px solid var(--spa-border); color:var(--spa-text); padding:12px 16px; font-family:var(--spa-sans); font-size:14px; outline:none; transition:border-color 0.2s; }
.spa-chain-input:focus { border-color:var(--spa-gold); }

/* ── Dice ── */
.spa-dice-challenge { font-family:var(--spa-serif); font-size:1.6rem; font-weight:300; text-align:center; padding:20px; border:1px solid var(--spa-border); background:var(--spa-velvet); color:var(--spa-text); margin-bottom:20px; }
.spa-dice-desc { font-size:14px; color:var(--spa-muted); text-align:center; margin-bottom:20px; }
.spa-dice-history { margin-top:20px; display:flex; flex-direction:column; gap:6px; }
.spa-dh-item { font-size:12px; color:var(--spa-muted); padding:6px 12px; border-left:2px solid var(--spa-border); }

/* ── Emoji story ── */
.spa-emoji-desc { font-size:13px; color:var(--spa-muted); margin-bottom:14px; line-height:1.6; }
.spa-emoji-prompt { font-family:var(--spa-serif); font-size:2.4rem; letter-spacing:0.12em; text-align:center; padding:20px; margin-bottom:18px; border:1px dashed rgba(201,168,76,0.28); }
.spa-emoji-input { display:block; width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--spa-border); color:var(--spa-text); padding:13px 16px; font-size:1.4rem; letter-spacing:0.08em; outline:none; margin-bottom:12px; transition:border-color 0.2s; }
.spa-emoji-input:focus { border-color:var(--spa-gold); }
.spa-emoji-story { font-size:2.2rem; letter-spacing:0.08em; text-align:center; padding:18px; margin-bottom:16px; border:1px solid var(--spa-border); background:var(--spa-velvet); }
.spa-emoji-guess { display:block; width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--spa-border); color:var(--spa-text); padding:12px 16px; font-family:var(--spa-sans); font-size:14px; outline:none; margin-bottom:12px; transition:border-color 0.2s; }
.spa-emoji-guess:focus { border-color:var(--spa-gold); }

/* ── Confessions ── */
.spa-confess-prompt { font-family:var(--spa-serif); font-size:1.5rem; font-weight:300; line-height:1.55; color:var(--spa-text); margin-bottom:20px; font-style:italic; padding:18px; border:1px solid var(--spa-border); background:var(--spa-velvet); }
.spa-confess-input { display:block; width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--spa-border); color:var(--spa-text); padding:13px 16px; font-family:var(--spa-serif); font-size:15px; line-height:1.6; outline:none; resize:vertical; min-height:100px; margin-bottom:12px; transition:border-color 0.2s; }
.spa-confess-input:focus { border-color:var(--spa-gold); }
.spa-confess-pair { margin-bottom:20px; border:1px solid var(--spa-border); background:var(--spa-velvet); }
.spa-confess-q { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--spa-gold); padding:10px 14px; border-bottom:1px solid var(--spa-border); }
.spa-confess-ans { padding:12px 16px; font-family:var(--spa-serif); font-size:14px; line-height:1.65; color:var(--spa-text); }
.spa-confess-ans.mine { border-bottom:1px solid var(--spa-border); }
.spa-confess-ans span { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--spa-muted); margin-right:8px; }

/* ── Crossword ── */
.spa-crossword-clues { display:flex; flex-direction:column; gap:12px; }
.spa-clue-row { background:var(--spa-velvet); border:1px solid var(--spa-border); padding:14px 16px; }
.spa-clue-text { font-size:14px; color:var(--spa-text); margin-bottom:8px; line-height:1.5; }
.spa-clue-input-wrap { display:flex; gap:8px; }
.spa-clue-input { flex:1; background:rgba(255,255,255,0.04); border:1px solid var(--spa-border); color:var(--spa-text); padding:9px 12px; font-family:'Courier New',monospace; font-size:16px; letter-spacing:0.16em; text-transform:uppercase; outline:none; transition:border-color 0.2s; }
.spa-clue-input:focus { border-color:var(--spa-gold); }
.spa-clue-submit { padding:9px 16px; background:var(--spa-panel); border:1px solid var(--spa-gold); color:var(--spa-gold); cursor:pointer; font-size:13px; transition:all 0.2s; }
.spa-clue-submit:hover { background:var(--spa-gold); color:#050505; }
.spa-clue-blocked { font-size:12px; color:var(--spa-muted); font-style:italic; padding:4px 0; }
.spa-cw-solved { margin-top:16px; font-size:12px; color:var(--spa-gold); letter-spacing:0.06em; font-style:italic; }

/* ── Game over ── */
.spa-game-over { text-align:center; padding:40px; }
.spa-go-gems { font-size:12px; letter-spacing:0.38em; color:rgba(201,168,76,0.35); margin-bottom:16px; }
.spa-game-over h2 { font-family:var(--spa-serif); font-size:2rem; font-weight:300; color:var(--spa-text); margin-bottom:28px; }
.spa-go-scores { display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:32px; }
.spa-go-score { text-align:center; }
.spa-go-score span { display:block; font-family:var(--spa-serif); font-size:3.5rem; color:var(--spa-gold); line-height:1; }
.spa-go-score label { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--spa-muted); margin-top:6px; display:block; }
.spa-go-vs { font-size:1rem; color:var(--spa-muted); }

/* ── Prize popup ── */
.spa-prize-popup {
  position: fixed;
  inset: 0;
  background: rgba(5,2,3,0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.spa-prize-inner {
  background: var(--spa-panel);
  border: 2px solid var(--spa-gold);
  padding: 48px 52px;
  text-align: center;
  max-width: 440px;
  position: relative;
  animation: spa-pop 0.4s var(--spa-ease) both;
}
@keyframes spa-pop { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
.spa-prize-inner::before,
.spa-prize-inner::after { content:''; position:absolute; width:24px; height:24px; border-color:var(--spa-gold2); border-style:solid; }
.spa-prize-inner::before { top:-1px; left:-1px; border-width:3px 0 0 3px; }
.spa-prize-inner::after  { bottom:-1px; right:-1px; border-width:0 3px 3px 0; }
.spa-prize-gems { font-size:12px; letter-spacing:0.38em; color:rgba(201,168,76,0.45); margin-bottom:16px; }
.spa-prize-title { font-family:var(--spa-serif); font-size:2rem; font-weight:300; color:var(--spa-text); margin-bottom:20px; }
.spa-prize-value { display:flex; align-items:center; justify-content:center; gap:14px; font-family:var(--spa-serif); font-size:1.8rem; color:var(--spa-gold2); margin-bottom:28px; }
.spa-prize-emoji { font-size:2rem; }

/* ── Toast ── */
.spa-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--spa-panel);
  border: 1px solid var(--spa-gold);
  border-left: 3px solid var(--spa-gold);
  color: var(--spa-text);
  padding: 13px 20px;
  font-family: var(--spa-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  max-width: 320px;
  z-index: 9998;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s, transform 0.3s;
}
.spa-toast.is-visible { opacity:1; transform:translateX(0); }

/* ════════════════════════════════════════════════════════
   PRIZES PAGE
════════════════════════════════════════════════════════ */
.spa-prizes-wrap { max-width:800px; margin:0 auto; padding:32px 20px; font-family:var(--spa-sans); }
.spa-prize-list { display:flex; flex-direction:column; gap:1px; }
.spa-prize-row {
  display:grid;
  grid-template-columns:32px 1fr 120px 120px 80px;
  align-items:center;
  gap:14px;
  padding:13px 18px;
  background:var(--spa-panel);
  border:1px solid var(--spa-border);
  font-size:13px;
}
.spa-prize-row.is-claimed { opacity:0.5; }
.spa-pr-icon { color:var(--spa-gold); font-size:16px; }
.spa-pr-type { color:var(--spa-text); }
.spa-pr-val  { color:var(--spa-gold2); font-family:var(--spa-serif); font-size:1.1rem; }
.spa-pr-date { font-size:11px; color:var(--spa-muted); }
.spa-pr-status { font-size:10px; letter-spacing:0.1em; color:var(--spa-gold); }

/* Responsive */
@media(max-width:700px){
  .spa-plans-grid{grid-template-columns:1fr 1fr}
  .spa-games-grid{grid-template-columns:repeat(3,1fr)}
  .spa-game-picker{grid-template-columns:repeat(3,1fr)}
  .spa-memory-grid{grid-template-columns:repeat(4,1fr)}
  .spa-prize-row{grid-template-columns:24px 1fr 80px}
  .spa-pr-date,.spa-pr-status{display:none}
  .spa-ttt-board{max-width:240px}
}
@media(max-width:480px){
  .spa-plans-grid{grid-template-columns:1fr}
  .spa-games-grid{grid-template-columns:repeat(2,1fr)}
}