/* ─────────────────────────────────────────────────────────────
   HexBattle — Elevated Cosmic Theme (vanilla CSS)
   Ported from Claude Design HexBattle Elevated system.
   Source of truth for tokens: matches src/theme.jsx `HB` object.
───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Backgrounds — deep cosmic blues with warmth */
  --elev-bg0: #05060d;
  --elev-bg1: #0b0d1a;
  --elev-bg2: #141729;
  --elev-bg3: #1d2140;
  --elev-bg4: #2a2f52;
  --elev-line: rgba(255, 255, 255, 0.06);
  --elev-line-strong: rgba(255, 255, 255, 0.12);

  /* Text */
  --elev-ink: #f5f6ff;
  --elev-ink-dim: #a4a9c9;
  --elev-ink-mute: #6a6f8f;

  /* Accents — cosmic nebula */
  --elev-primary: #8b7cff;
  --elev-primary-deep: #6d5ef5;
  --elev-cyan: #62e9ff;
  --elev-pink: #ff7cc4;
  --elev-gold: #ffc857;
  --elev-orange: #ff8a4c;
  --elev-coral: #ff6b6b;
  --elev-mint: #4dd6a8;
  --elev-plasma: #b565ff;

  /* Rank tiers */
  --elev-bronze: #d2916c;
  --elev-silver: #c8cfe0;
  --elev-gold2: #f5cb5c;
  --elev-platinum: #93f5d0;
  --elev-diamond: #8bd7ff;
  --elev-master: #ff6ba8;

  /* Gradients */
  --elev-grad-cosmic: linear-gradient(135deg, #8b7cff 0%, #ff7cc4 50%, #ffc857 100%);
  --elev-grad-nebula: linear-gradient(135deg, #b565ff 0%, #62e9ff 100%);

  /* Radii */
  --elev-r1: 8px;
  --elev-r2: 14px;
  --elev-r3: 20px;
  --elev-r4: 28px;

  /* Type
   * v154.13 — MOVE B: drop Space Grotesk. It was the AI-generated UI font
   * of 2024-25 (every Vercel/Linear/Cursor landing page uses it). System
   * stack actually reads MORE custom because it matches the OS the user
   * is on — SF on iOS, Roboto on Android, Segoe on Windows. Big Shoulders
   * Display is promoted to a separate --elev-display var below for all
   * display surfaces (PLAY label, headlines, section kickers, mode tiles).
   * Body/labels stay system-stack for legibility. */
  --elev-font: -apple-system, BlinkMacSystemFont, system-ui, 'SF Pro Text', 'Inter', sans-serif;
  --elev-display: 'Big Shoulders Display', 'Unbounded', 'Rajdhani', -apple-system, sans-serif;
  --elev-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ─────────────────────────────────────────────────────────────
   ELEVATED RESULTS OVERLAY
───────────────────────────────────────────────────────────── */

.elev-results-overlay {
  position: fixed;
  inset: 0;
  z-index: 250; /* above #winOverlay (200-ish) */
  background: var(--elev-bg0);
  color: var(--elev-ink);
  font-family: var(--elev-font);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
  animation: elevFadeIn 0.35s ease-out;
}

@keyframes elevFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.elev-results-overlay .elev-results {
  position: relative;
  width: 100%;
  max-width: 440px;
  min-height: 100%;
  padding: max(60px, env(safe-area-inset-top, 0) + 24px) 16px max(24px, env(safe-area-inset-bottom, 0)) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Radial background tint — color set inline via --elev-accent var */
.elev-results-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--elev-accent, #4dd6a8) 20%, transparent) 0%, transparent 60%),
    var(--elev-bg0);
  pointer-events: none;
}

/* Subtle hex-field tessellation background */
.elev-hex-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='97' height='84'%3E%3Cg fill='none' stroke='white' stroke-width='0.6'%3E%3Cpath d='M24.25 0 L48.5 14 L48.5 42 L24.25 56 L0 42 L0 14 Z'/%3E%3Cpath d='M72.75 42 L97 56 L97 84 L72.75 98 L48.5 84 L48.5 56 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 97px 84px;
}

/* Confetti shards — injected by JS; keyframes below */
.elev-confetti {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: elevConfettiFly 2.4s ease-out forwards;
  transform-origin: center;
}

@keyframes elevConfettiFly {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(720deg); opacity: 0; }
}

/* Content stack */
.elev-results-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 360px;
}

/* Result tag — "VICTORY" / "DEFEAT" */
.elev-tag {
  font-family: var(--elev-mono);
  font-size: 11px;
  letter-spacing: 4px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--elev-accent, var(--elev-mint));
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.elev-phase-1 .elev-tag { transform: translateY(0); opacity: 1; }

/* Big headline — "YOU WIN" / "CLOSE ONE" */
.elev-headline {
  font-family: var(--elev-font);
  font-weight: 900;
  font-size: 56px;
  color: var(--elev-ink);
  letter-spacing: -2px;
  margin-top: 4px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 40px color-mix(in srgb, var(--elev-accent, #4dd6a8) 40%, transparent);
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.2, 1.4, 0.5, 1), opacity 0.6s cubic-bezier(0.2, 1.4, 0.5, 1);
}
.elev-phase-1 .elev-headline { transform: scale(1); opacity: 1; }

/* Six-in-a-row replay wrapper */
.elev-replay {
  margin-top: 20px;
  position: relative;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
.elev-phase-2 .elev-replay { transform: translateY(0); opacity: 1; }

.elev-replay-caption {
  font-family: var(--elev-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--elev-ink-dim);
  text-transform: uppercase;
  margin-top: 14px;
  opacity: 0;
  transition: opacity 0.4s 0.4s;
  text-align: center;
}
.elev-phase-2 .elev-replay-caption { opacity: 1; }

/* Winning-line SVG animations */
@keyframes elevWinPulse {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes elevWinSpark {
  0%   { transform: scale(0);   opacity: 0; }
  50%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.4; }
}
@keyframes elevBeamDraw {
  0%   { stroke-dashoffset: 260; opacity: 0; }
  40%  { opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 1; }
}

.elev-replay .elev-win-hex {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
.elev-phase-2 .elev-replay .elev-win-hex {
  opacity: 1;
  animation: elevWinPulse 1.2s ease-out calc(var(--i, 0) * 0.12s) both;
}
.elev-replay .elev-win-spark {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
.elev-phase-2 .elev-replay .elev-win-spark {
  animation: elevWinSpark 1s ease-out calc(var(--i, 0) * 0.12s + 0.2s) both;
}
.elev-replay .elev-beam {
  stroke-dasharray: 260;
  opacity: 0;
}
.elev-phase-2 .elev-replay .elev-beam {
  animation: elevBeamDraw 1.2s ease-out 0.7s both;
}

/* VS summary row */
.elev-vs-row {
  margin-top: 22px;
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: stretch;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s 0.2s ease-out, transform 0.6s 0.2s ease-out;
}
.elev-phase-2 .elev-vs-row { opacity: 1; transform: translateY(0); }

.elev-player-panel {
  flex: 1;
  padding: 12px;
  background: var(--elev-bg2);
  border-radius: var(--elev-r2);
  border: 1px solid var(--elev-line);
  position: relative;
}
.elev-player-panel.winner {
  border-color: var(--elev-mint);
  box-shadow: 0 0 20px rgba(77, 214, 168, 0.2);
}
.elev-player-panel.loser {
  border-color: var(--elev-line);
}
.elev-player-panel.flip { text-align: right; }

.elev-player-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.elev-player-panel.flip .elev-player-head { flex-direction: row-reverse; }

.elev-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--elev-bg3);
  border: 1px solid var(--elev-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.elev-player-panel.winner .elev-avatar { border-color: var(--elev-mint); }

.elev-player-name {
  font-family: var(--elev-font);
  font-weight: 700;
  font-size: 14px;
  color: var(--elev-ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elev-player-role {
  font-family: var(--elev-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}
.elev-player-panel.winner .elev-player-role { color: var(--elev-mint); }
.elev-player-panel.loser  .elev-player-role { color: var(--elev-ink-dim); }

.elev-player-stat {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  font-family: var(--elev-mono);
  font-size: 11px;
  color: var(--elev-ink-dim);
}
.elev-player-stat b { color: var(--elev-ink); font-weight: 700; }

.elev-vs-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--elev-font);
  font-size: 14px;
  color: var(--elev-ink-mute);
  font-weight: 700;
  letter-spacing: 2px;
}

/* Elo row */
.elev-elo-row {
  margin-top: 14px;
  width: 100%;
  padding: 16px;
  background: var(--elev-bg2);
  border-radius: var(--elev-r2);
  border: 1px solid var(--elev-line);
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s 0.1s ease-out, transform 0.6s 0.1s ease-out;
}
.elev-phase-3 .elev-elo-row { opacity: 1; transform: translateY(0); }

.elev-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: rgba(210, 145, 108, 0.12);
  border: 1px solid rgba(210, 145, 108, 0.27);
  border-radius: 999px;
  flex-shrink: 0;
}
.elev-rank-badge .elev-rank-text {
  font-family: var(--elev-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--elev-bronze);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.elev-elo-body { flex: 1; min-width: 0; }
.elev-elo-label {
  font-family: var(--elev-mono);
  font-size: 10px;
  color: var(--elev-ink-mute);
  letter-spacing: 1.5px;
}
.elev-elo-values {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 2px;
}
.elev-elo-val {
  font-family: var(--elev-font);
  font-weight: 900;
  font-size: 28px;
  color: var(--elev-ink);
  font-variant-numeric: tabular-nums;
}
.elev-elo-delta {
  font-family: var(--elev-mono);
  font-size: 14px;
  font-weight: 700;
}

.elev-elo-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 13%, transparent);
}

/* Rewards grid */
.elev-rewards {
  margin-top: 12px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s 0.25s ease-out, transform 0.6s 0.25s ease-out;
}
.elev-phase-3 .elev-rewards { opacity: 1; transform: translateY(0); }

.elev-reward-tile {
  padding: 12px;
  background: var(--elev-bg2);
  border-radius: var(--elev-r2);
  border: 1px solid var(--elev-line);
  text-align: center;
}
.elev-reward-tile .elev-reward-icon {
  font-size: 20px;
  line-height: 1;
}
.elev-reward-tile .elev-reward-v {
  font-family: var(--elev-font);
  font-weight: 800;
  font-size: 16px;
  color: var(--elev-ink);
  margin-top: 2px;
}
.elev-reward-tile .elev-reward-l {
  font-family: var(--elev-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--elev-ink-mute);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Top-accent border variations */
.elev-reward-tile.coins { border-top: 2px solid var(--elev-gold); }
.elev-reward-tile.coins .elev-reward-icon { color: var(--elev-gold); }
.elev-reward-tile.xp    { border-top: 2px solid var(--elev-primary); }
.elev-reward-tile.xp    .elev-reward-icon { color: var(--elev-primary); }
.elev-reward-tile.daily { border-top: 2px solid var(--elev-cyan); }
.elev-reward-tile.daily .elev-reward-icon { color: var(--elev-cyan); }

/* Action buttons */
.elev-actions {
  margin-top: 20px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.5s 0.4s;
}
.elev-phase-3 .elev-actions { opacity: 1; }

/* v120 — Expanded action layout: primary row (Rematch), secondary row
   (Find Match / Add Friend / Share), tertiary row (View Board / Home). */
.elev-actions-v2 {
  margin-top: 18px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.5s 0.4s;
}
.elev-phase-3 .elev-actions-v2 { opacity: 1; }
.elev-action-primary-row {
  display: flex;
  width: 100%;
}
.elev-action-primary-row .elev-btn-rematch {
  width: 100%;
  height: 58px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.elev-rematch-sub {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.8;
  letter-spacing: 0.3px;
}
/* Rematch waiting state — pulsing animation while we wait for opponent */
.elev-btn-rematch.elev-rematch-waiting {
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.25), rgba(124, 111, 247, 0.25));
  color: #ffc857;
  animation: elevRematchPulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(255, 200, 87, 0.4), 0 10px 24px rgba(255, 200, 87, 0.2);
}
.elev-btn-rematch.elev-rematch-confirmed {
  background: linear-gradient(135deg, #4dd6a8, #62e9ff);
  color: #0a0a1a;
  animation: elevRematchLock 0.5s ease forwards;
  box-shadow: 0 10px 32px rgba(77, 214, 168, 0.4);
}
@keyframes elevRematchPulse {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 0 1px rgba(255, 200, 87, 0.4), 0 10px 24px rgba(255, 200, 87, 0.2); }
  50% { filter: brightness(1.15); box-shadow: 0 0 0 2px rgba(255, 200, 87, 0.7), 0 14px 32px rgba(255, 200, 87, 0.35); }
}
@keyframes elevRematchLock {
  0% { transform: scale(1); }
  30% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.elev-action-secondary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 6px;
}
.elev-action-tertiary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 2px;
}

/* Dopamine — moments strip (streak pill + personal best pill) */
.elev-moments {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -4px;
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s 0.15s, transform 0.5s 0.15s;
}
.elev-phase-1 .elev-moments { opacity: 1; transform: translateY(0); }
.elev-moment-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  animation: elevMomentPopIn 0.6s cubic-bezier(.4,2,.3,1) both;
}
.elev-moment-streak {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 200, 87, 0.2));
  color: #ffc857;
  border: 1px solid rgba(255, 200, 87, 0.4);
  animation-delay: 0.3s;
}
.elev-moment-pb {
  background: linear-gradient(135deg, rgba(124, 111, 247, 0.2), rgba(98, 233, 255, 0.2));
  color: #62e9ff;
  border: 1px solid rgba(98, 233, 255, 0.4);
  animation-delay: 0.5s;
}
.elev-moment-icon {
  font-size: 14px;
  line-height: 1;
}
@keyframes elevMomentPopIn {
  0% { opacity: 0; transform: scale(0.6) translateY(6px); }
  60% { opacity: 1; transform: scale(1.08) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Dopamine — coin tally pop when count-up finishes */
.elev-reward-v.elev-reward-pop {
  animation: elevRewardPop 0.5s cubic-bezier(.4,2,.3,1);
}
@keyframes elevRewardPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* v153.90 — Running balance row under each reward tile (coins/xp).
   Animates from balanceBefore → balanceBefore+reward in sync with the
   +amount counter. Telegraphs that match rewards are accumulating into
   the player's running progress, not just floating points. */
.elev-reward-tile .elev-reward-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.elev-reward-tile .elev-reward-total-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.elev-reward-tile .elev-reward-total-v {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.3s ease;
}
.elev-reward-tile.coins .elev-reward-total-v { color: var(--elev-gold, #f5cb5c); }
.elev-reward-tile.xp    .elev-reward-total-v { color: var(--elev-primary, #7c6ff7); }

/* When the count-up lands, briefly pulse the whole tile so the player
   can't miss that progress just landed. */
.elev-reward-tile.elev-balance-landed {
  animation: elevBalanceLand 0.7s cubic-bezier(.4, 1.6, .3, 1);
}
.elev-reward-tile.elev-balance-landed .elev-reward-total-v {
  text-shadow: 0 0 12px currentColor;
}
@keyframes elevBalanceLand {
  0%   { transform: translateY(0)    scale(1); }
  35%  { transform: translateY(-4px) scale(1.04); box-shadow: 0 8px 24px rgba(124, 111, 247, 0.4); }
  100% { transform: translateY(0)    scale(1); }
}

.elev-btn {
  height: 52px;
  border-radius: var(--elev-r2);
  border: none;
  cursor: pointer;
  font-family: var(--elev-font);
  font-weight: 700;
  font-size: 14px;
  transition: transform 0.12s, filter 0.12s;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  padding: 0 12px;
}
.elev-btn:active { transform: translateY(2px) scale(0.98); }
.elev-btn:hover  { filter: brightness(1.07); }

.elev-btn-ghost {
  background: var(--elev-bg3);
  border: 1px solid var(--elev-line);
  color: var(--elev-ink-dim);
}
.elev-btn-cosmic {
  background: var(--elev-grad-cosmic);
  color: #0a0a1a;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 10px 28px rgba(255, 124, 196, 0.3);
}

/* Reduce-motion: keep the final state, skip the animations */
@media (prefers-reduced-motion: reduce) {
  .elev-results-overlay,
  .elev-tag, .elev-headline, .elev-replay, .elev-replay-caption,
  .elev-vs-row, .elev-elo-row, .elev-rewards, .elev-actions,
  .elev-confetti {
    animation: none !important;
    transition: none !important;
  }
  .elev-results-overlay .elev-tag,
  .elev-results-overlay .elev-headline,
  .elev-results-overlay .elev-replay,
  .elev-results-overlay .elev-replay-caption,
  .elev-results-overlay .elev-vs-row,
  .elev-results-overlay .elev-elo-row,
  .elev-results-overlay .elev-rewards,
  .elev-results-overlay .elev-actions {
    opacity: 1; transform: none;
  }
  .elev-confetti { display: none; }
}

/* Small phones — scale headline down */
@media (max-height: 700px) {
  .elev-results-overlay .elev-results { padding-top: 40px; }
  .elev-headline { font-size: 44px; }
  .elev-replay svg { height: 150px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   UI PRIMITIVES — buttons, cards, badges, xp bar, tabs, wordmark
═══════════════════════════════════════════════════════════════ */

/* Button base */
.elev-btn {
  font-family: var(--elev-font);
  font-weight: 600;
  letter-spacing: 0.2px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
  user-select: none;
}
.elev-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.elev-btn:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.08); }
.elev-btn:not(:disabled):active { transform: translateY(2px) scale(0.98); }
.elev-btn-full { width: 100%; }
.elev-btn-sm { height: 36px; padding: 0 14px; font-size: 13px; gap: 6px; }
.elev-btn-md { height: 48px; padding: 0 20px; font-size: 15px; gap: 8px; }
.elev-btn-lg { height: 60px; padding: 0 28px; font-size: 17px; gap: 10px; }
.elev-btn-primary {
  background: var(--elev-primary);
  color: #fff;
  box-shadow: 0 2px 0 var(--elev-primary-deep), 0 8px 24px rgba(139,124,255,0.35);
}
.elev-btn-cosmic {
  background: var(--elev-grad-cosmic);
  color: #0a0a1a;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,0.3), 0 10px 30px rgba(255,124,196,0.25);
}
.elev-btn-secondary {
  background: var(--elev-bg3);
  color: var(--elev-ink);
  border: 1px solid var(--elev-line-strong);
}
.elev-btn-ghost {
  background: transparent;
  color: var(--elev-ink-dim);
  border: 1px solid var(--elev-line);
}
.elev-btn-danger {
  background: transparent;
  color: var(--elev-coral);
  border: 1px solid color-mix(in srgb, var(--elev-coral) 27%, transparent);
}

/* Card */
.elev-card {
  background: var(--elev-bg2);
  border-radius: var(--elev-r3);
  border: 1px solid var(--elev-line);
  padding: 16px;
  position: relative;
}
.elev-card-glow { box-shadow: 0 0 40px rgba(139,124,255,0.35); }
.elev-card-interactive { cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.elev-card-interactive:hover {
  transform: translateY(-1px);
  border-color: var(--elev-line-strong);
}

/* Rank badge */
.elev-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.elev-rank-badge svg { flex-shrink: 0; }
.elev-rank-badge span {
  font-family: var(--elev-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.elev-rank-badge-sm { height: 22px; padding: 0 8px; font-size: 11px; }
.elev-rank-badge-sm svg { width: 11px; height: 12.5px; }
.elev-rank-badge-sm span { font-size: 11px; }
.elev-rank-badge-md { height: 28px; padding: 0 10px; }
.elev-rank-badge-md svg { width: 13px; height: 15px; }
.elev-rank-badge-md span { font-size: 12px; }

/* XP Bar */
.elev-xpbar { width: 100%; }
.elev-xpbar-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--elev-bg4);
  overflow: hidden;
}
.elev-xpbar-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, var(--elev-primary) 0%, var(--elev-cyan) 100%);
  border-radius: 4px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--elev-primary) 60%, transparent);
  overflow: hidden;
}
.elev-xpbar-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: elevShimmer 2.4s linear infinite;
}
.elev-xpbar-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--elev-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--elev-ink-mute);
  text-transform: uppercase;
}
@keyframes elevShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Hex Tile */
.elev-hextile {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  display: inline-block;
  transition: filter 0.2s;
}
.elev-hextile.active {
  filter: drop-shadow(0 0 8px var(--elev-primary));
}
.elev-hextile-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--elev-font);
  font-weight: 700;
  color: var(--elev-ink-dim);
  pointer-events: none;
}
.elev-hextile.active .elev-hextile-label { color: #fff; }

/* Section Header */
.elev-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.elev-section-header h3 {
  margin: 0;
  font-family: var(--elev-font);
  font-size: 11px;
  font-weight: 700;
  color: var(--elev-ink-mute);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Wordmark */
/* v153.45 — Wordmark v1 (legacy fallback). Kept so any consumer that's
   still calling the old structure doesn't break. New mark uses .v2 below. */
.elev-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--elev-font);
  font-weight: 700;
}
.elev-wordmark-text {
  background: var(--elev-grad-cosmic);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* v153.46 — Wordmark v2 final. Single-line layout: layered hex glyph +
   "HEX BATTLE" headline. The "HEX" segment gets the brand gradient,
   "BATTLE" stays neutral white — that contrast does the visual work
   without leaning on a full-text gradient (which was the v153.44 AI
   tell). Logomark pattern à la Linear / Notion / Slack. */
.elev-wordmark.elev-wordmark-v2 {
  align-items: center;
  gap: 10px;
  /* v153.52 — Big Shoulders Display 900 replaces Rajdhani for the lobby
     wordmark. Tall narrow geometric proportions echo the hex piece;
     gives the mark real presence at the lobby header size (~26-30px). */
  font-family: var(--font-wordmark, 'Big Shoulders Display', 'Rajdhani', sans-serif);
}
.elev-wordmark-v2 .elev-wm-glyph {
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 6px rgba(124,111,247,0.28));
  transition: transform .4s cubic-bezier(.2,.8,.3,1);
}
.elev-wordmark-v2:hover .elev-wm-glyph {
  transform: rotate(20deg);
}
.elev-wordmark-v2 .elev-wm-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  line-height: 1;
  flex-wrap: wrap;
}
/* v153.96 — App Store name is "Hex Battle Infinite". Surfaces the full
   product name in-app as a quieter caption riding alongside the wordmark
   so users connect what they see in the app to what they downloaded. Set
   small (0.30em of wordmark size) and dim so it doesn't compete with the
   main mark. Uppercase + wide letter-spacing reads as a tagline rather
   than another word in the title. */
.elev-wordmark-v2 .elev-wm-tag {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', sans-serif);
  font-weight: 600;
  font-size: 0.30em;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.45);
  align-self: center;
  margin-left: 0.1em;
  padding: 0.18em 0.5em 0.14em;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.4em;
  text-transform: uppercase;
  position: relative;
  top: -0.05em;
}
/* v153.52 — Both spans now use weight 900 (Big Shoulders Display's
   heaviest cut), tighter 0.025em letter-spacing. The wordmark reads as
   a single confident logomark — no two-tier weight hierarchy needed
   when the typeface itself has presence at this weight. The brand
   gradient still differentiates HEX from BATTLE. */
.elev-wordmark-v2 .elev-wm-hex {
  font-weight: 900;
  font-size: 1em;
  letter-spacing: 0.025em;
  background: linear-gradient(120deg, var(--accent, #7c6ff7), #ff7cc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.elev-wordmark-v2 .elev-wm-battle {
  font-weight: 900;
  font-size: 1em;
  letter-spacing: 0.025em;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
@media (prefers-reduced-motion: reduce) {
  .elev-wordmark-v2:hover .elev-wm-glyph { transform: none; }
}

/* Nav Tabs */
.elev-nav-tabs {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--elev-bg2);
  border: 1px solid var(--elev-line);
  border-radius: 16px;
}
.elev-nav-tab {
  flex: 1;
  height: 40px;
  border: none;
  cursor: pointer;
  background: transparent;
  border-radius: 11px;
  color: var(--elev-ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}
.elev-nav-tab.active {
  background: var(--elev-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(139,124,255,0.35);
}

/* ═══════════════════════════════════════════════════════════════
   LOADERS — the 10 signature loaders + achievement toast
═══════════════════════════════════════════════════════════════ */

.elev-loader {
  font-family: var(--elev-font);
  color: var(--elev-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.elev-loader-label {
  font-family: var(--elev-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--elev-ink-dim);
  text-transform: uppercase;
}

/* 1. Tessellation */
@keyframes elevTessPulse {
  0%, 100% { opacity: 0.15; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1); }
}

/* 2. Opponent Search */
.elev-loader-oppsearch {
  position: relative;
  width: var(--elev-oppsearch-size, 200px);
  height: var(--elev-oppsearch-size, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.elev-oppsearch-ring {
  position: absolute;
  border-radius: 50%;
}
.elev-oppsearch-ring-outer {
  inset: 0;
  border: 1px solid var(--elev-primary);
  opacity: 0.15;
}
.elev-oppsearch-ring-inner {
  inset: 14%;
  border: 1px dashed var(--elev-primary);
  opacity: 0.3;
  animation: elevSearchSpin 12s linear infinite;
}
.elev-oppsearch-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--elev-primary) 33%, transparent) 40deg, transparent 80deg);
  animation: elevSearchSpin 2s linear infinite;
  -webkit-mask-image: radial-gradient(circle, transparent 30%, black 31%, black 100%);
  mask-image: radial-gradient(circle, transparent 30%, black 31%, black 100%);
}
.elev-oppsearch-you {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--elev-bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 0 0 2px var(--elev-primary), 0 0 24px color-mix(in srgb, var(--elev-primary) 53%, transparent);
  z-index: 2;
  position: relative;
}
.elev-oppsearch-orbit {
  position: absolute;
  inset: 0;
  animation: elevOrbit 7s linear infinite;
}
.elev-oppsearch-candidate {
  position: absolute;
  top: 50%; left: 50%;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--elev-bg2);
  border: 1px solid var(--elev-line-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
@keyframes elevSearchSpin { to { transform: rotate(360deg); } }
@keyframes elevOrbit { to { transform: rotate(360deg); } }

/* 3. Board Materialize */
@keyframes elevMaterialize {
  0%, 80%, 100% { opacity: 0; transform: scale(0.2) rotate(45deg); }
  20%, 60%     { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* 4. Elo Reveal */
.elev-loader-elo {
  width: 260px;
  padding: 22px;
  background: var(--elev-bg2);
  border-radius: var(--elev-r3);
  border: 1px solid var(--elev-line);
  align-items: stretch;
  gap: 0;
}
.elev-elo-inner-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.elev-elo-inner-label {
  font-family: var(--elev-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--elev-ink-mute);
  text-transform: uppercase;
}
.elev-elo-inner-delta {
  font-family: var(--elev-mono);
  font-size: 14px;
  color: var(--elev-mint);
  font-weight: 600;
}
.elev-elo-inner-val {
  font-family: var(--elev-font);
  font-size: 48px;
  font-weight: 700;
  color: var(--elev-ink);
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.elev-elo-inner-bar {
  margin-top: 14px;
  height: 4px;
  background: var(--elev-bg4);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.elev-elo-inner-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--elev-primary), var(--elev-cyan));
  box-shadow: 0 0 12px var(--elev-primary);
  transition: width 0.1s;
}

/* 5. Liquid Hex */
.elev-loader-liquid { gap: 0; }
.elev-liquid-rise  { animation: elevLiquidRise 2.6s ease-in-out infinite; transform-origin: center; }
.elev-liquid-wave-a { animation: elevLiquidWave 3.5s ease-in-out infinite; transform-origin: center; }
.elev-liquid-wave-b { animation: elevLiquidWave 3s ease-in-out infinite reverse; transform-origin: center; }
@keyframes elevLiquidRise {
  0%, 100% { transform: translateY(40px); }
  50%      { transform: translateY(-10px); }
}
@keyframes elevLiquidWave {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-20px); }
}

/* 6. Dice Assemble */
@keyframes elevDieAssemble {
  0%, 90%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10%           { transform: translate(-40px, -60px) rotate(-90deg); opacity: 0; }
  30%, 70%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

/* 7. Connection Pulse */
.elev-loader-connpulse { gap: 14px; }
.elev-connpulse-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.elev-connpulse-bar {
  width: 8px;
  background: linear-gradient(180deg, var(--elev-cyan), var(--elev-primary));
  border-radius: 3px;
  animation: elevBarPulse 1.4s ease-in-out infinite;
  transform-origin: bottom;
}
@keyframes elevBarPulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* 8. Rank Reveal */
.elev-loader-rankreveal {
  position: relative;
  width: 300px;
  height: 340px;
  justify-content: center;
  gap: 0;
}
.elev-rank-backdrop {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--elev-rank-col, #c8cfe0) 27%, transparent), transparent 70%);
  animation: elevRankPulse 2s ease-in-out infinite;
}
.elev-rank-rays {
  position: absolute;
  inset: 0;
  animation: elevRankSpin 8s linear infinite;
}
.elev-rank-medallion-wrap { position: relative; z-index: 2; }
.elev-rank-medallion {
  filter: drop-shadow(0 0 30px var(--elev-rank-col, #c8cfe0));
  transform: scale(0.6);
  opacity: 0;
  transition: all 0.7s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.elev-rank-phase-1 .elev-rank-medallion {
  transform: scale(1);
  opacity: 1;
}
.elev-rank-shards { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.elev-rank-phase-1 .elev-rank-shards { opacity: 1; }
.elev-rank-shard {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 14px;
  background: var(--elev-rank-col, #c8cfe0);
  border-radius: 2px;
  animation: elevShardFly 1.1s ease-out forwards;
}
.elev-rank-text {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.5s ease-out;
}
.elev-rank-phase-2 .elev-rank-text { opacity: 1; transform: translateY(0); }
.elev-rank-text-kicker {
  font-family: var(--elev-mono);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--elev-ink-mute);
  text-transform: uppercase;
}
.elev-rank-text-tier {
  font-family: var(--elev-font);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
}
.elev-rank-text-prev {
  font-family: var(--elev-mono);
  font-size: 11px;
  color: var(--elev-ink-dim);
  margin-top: 2px;
  letter-spacing: 1px;
}
@keyframes elevRankPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes elevRankSpin { to { transform: rotate(360deg); } }
@keyframes elevShardFly {
  from { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
  to   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; }
}

/* 9. Streak Fire */
.elev-loader-streak {
  position: relative;
  justify-content: center;
  gap: 0;
}
.elev-streak-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.elev-streak-count {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 8px;
}
.elev-streak-num {
  font-family: var(--elev-font);
  font-weight: 900;
  font-size: 56px;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 20px rgba(255, 100, 0, 0.9);
  font-variant-numeric: tabular-nums;
}
.elev-streak-sub {
  font-family: var(--elev-mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: #fff;
  text-transform: uppercase;
  opacity: 0.9;
  margin-top: 2px;
  text-shadow: 0 1px 6px rgba(200, 50, 0, 0.9);
}
@keyframes elevFlicker {
  0%   { transform: scale(1)    translateY(0)   skewX(-2deg); }
  100% { transform: scale(1.05) translateY(-4px) skewX(2deg); }
}

/* 10. Countdown Hex */
.elev-loader-countdown {
  position: relative;
  justify-content: center;
  gap: 0;
}
.elev-cd-num {
  position: absolute;
  font-family: var(--elev-font);
  font-size: 100px;
  font-weight: 900;
  color: var(--elev-ink);
  font-variant-numeric: tabular-nums;
  animation: elevCdPop 0.9s ease-out forwards;
}
.elev-cd-sweep {
  transform-origin: center;
  animation: elevCdSweep 0.9s linear forwards;
}
@keyframes elevCdPop {
  0%   { transform: scale(0.5);  opacity: 0; }
  30%  { transform: scale(1.15); opacity: 1; }
  70%  { transform: scale(1);    opacity: 1; }
  100% { transform: scale(0.9);  opacity: 0; }
}
@keyframes elevCdSweep {
  from { stroke-dashoffset: 600; }
  to   { stroke-dashoffset: 0; }
}

/* 11. Achievement Toast */
.elev-toast {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  background: linear-gradient(135deg, rgba(20, 23, 41, 0.95), rgba(30, 34, 70, 0.95));
  border: 1px solid color-mix(in srgb, var(--elev-toast-col, #ff6b6b) 40%, transparent);
  border-radius: 18px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--elev-toast-col, #ff6b6b) 13%, transparent),
    0 0 30px color-mix(in srgb, var(--elev-toast-col, #ff6b6b) 27%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  min-width: 300px;
  max-width: 380px;
  overflow: hidden;
  transform: translateY(-40px);
  opacity: 0;
  animation: elevToastIn 0.5s cubic-bezier(0.2, 1.4, 0.5, 1) forwards;
}
.elev-toast-hide { animation: elevToastOut 0.4s ease-in forwards; }
.elev-toast-shine {
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--elev-toast-col, #ff6b6b) 27%, transparent), transparent);
  animation: elevToastShine 1.8s ease-out 0.3s;
  pointer-events: none;
}
.elev-toast-icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 58px;
  height: 64px;
}
.elev-toast-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.elev-toast-body { flex: 1; min-width: 0; }
.elev-toast-kicker {
  font-family: var(--elev-mono);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--elev-toast-col, #ff6b6b);
  text-transform: uppercase;
  font-weight: 700;
}
.elev-toast-title {
  font-family: var(--elev-font);
  font-weight: 700;
  font-size: 16px;
  color: var(--elev-ink);
  margin-top: 2px;
}
.elev-toast-desc {
  font-family: var(--elev-font);
  font-size: 12px;
  color: var(--elev-ink-dim);
  margin-top: 1px;
}
.elev-toast-reward {
  padding: 3px 8px;
  background: color-mix(in srgb, var(--elev-gold) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--elev-gold) 33%, transparent);
  border-radius: 999px;
  font-family: var(--elev-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--elev-gold);
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
@keyframes elevToastIn {
  from { transform: translateY(-40px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes elevToastOut {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(-40px); opacity: 0; }
}
@keyframes elevToastShine {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* Toast stack container (fixed top-right) */
.elev-toast-stack {
  position: fixed;
  top: max(24px, env(safe-area-inset-top));
  right: 16px;
  left: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}
.elev-toast-stack .elev-toast { pointer-events: auto; margin: 0 auto; }

/* Reduced motion: keep loaders visible but stop animations */
@media (prefers-reduced-motion: reduce) {
  .elev-loader *,
  .elev-toast *,
  .elev-btn {
    animation: none !important;
    transition: none !important;
  }
  .elev-loader-rankreveal .elev-rank-medallion { opacity: 1; transform: scale(1); }
  .elev-loader-rankreveal .elev-rank-text { opacity: 1; transform: none; }
  .elev-toast { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE B — GLOBAL ELEVATED THEME (v69)

   Re-themes the *entire* existing app by retargeting the existing
   CSS custom properties to the Claude Design palette. No HTML needs
   to change — buttons, cards, inputs, HUD, modals all automatically
   inherit the new look.

   The original HexBattle tokens are retained as fallbacks; we just
   override them with Elevated values at :root. Opt out per-element
   with data-elev="off".
═══════════════════════════════════════════════════════════════════ */

/* Token retuning — applies globally. Ordered after the original :root
   block in index.html so cascade resolves to our values. */
:root {
  /* Core palette → Elevated cosmic */
  --bg: #0a0c1f;
  --surface: #141840;
  --surface2: #1d2140;
  --border: rgba(255,255,255,0.12);
  --text: #f5f6ff;
  --text-dim: #a4a9c9;

  /* Accent → cosmic purple (with compatible glow rgba) */
  --accent: #8b7cff;
  --accent-glow: rgba(139,124,255,0.35);

  /* Semantic colors → Elevated tuned */
  --success: #4dd6a8;
  --success-glow: rgba(77,214,168,0.3);
  --warning: #ffc857;
  --warning-glow: rgba(255,200,87,0.3);
  --danger: #ff6b6b;
  --danger-glow: rgba(255,107,107,0.3);
  --info: #62e9ff;
  --info-glow: rgba(98,233,255,0.3);
}

/* v153.108 — REMOVED the cosmic nebula gradient. THIS was "the newer background"
   Michael kept calling out. Even though the #menuBg canvas was animating
   on top, the multi-layer purple/pink/navy gradient was the dominant
   visual that pushed the animated hex placement into the background of
   the user's perception. Reverted to a single solid dark #0a0c1f to match
   the OG era — the animated #menuBg canvas now has nothing competing
   with it for the lobby's background look. */
html, body {
  background: #0a0c1f !important;
}

/* Typography — Elevated uses SF Pro stack + JetBrains Mono for tokens */
body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Inter", "Segoe UI", Roboto, sans-serif !important;
}

/* Uppercase / letterspaced labels get a tokenized "monospace" treatment */
.section-label,
.form-group label,
.hud-room,
.room-code-display .label,
.pause-info strong,
.admin-stat .lbl {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, "Menlo",
               "Consolas", monospace !important;
  letter-spacing: 1.2px !important;
}

/* ── Primary button — upgrade to Elevated cosmic gradient ── */
.btn-primary:not([data-elev="off"]) {
  background:
    linear-gradient(135deg, #8b7cff 0%, #6d5ef5 55%, #5b4bd5 100%) !important;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Inter", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
  box-shadow:
    0 4px 20px rgba(139,124,255,0.35),
    0 1px 0 inset rgba(255,255,255,0.18),
    0 0 30px rgba(139,124,255,0.18) !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease !important;
}
.btn-primary:not([data-elev="off"]):hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 8px 28px rgba(139,124,255,0.45),
    0 1px 0 inset rgba(255,255,255,0.22),
    0 0 40px rgba(139,124,255,0.25) !important;
}
.btn-primary:not([data-elev="off"]):active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* Secondary button — glass card surface */
.btn-secondary:not([data-elev="off"]) {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #f5f6ff !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.btn-secondary:not([data-elev="off"]):hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(139,124,255,0.35) !important;
}

/* ── Cards / surfaces ── */
.subtitle {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.45;
}

/* Inputs — Elevated bordered/padded style */
input:not([data-elev="off"]),
select:not([data-elev="off"]),
textarea:not([data-elev="off"]) {
  background: rgba(29,33,64,0.6) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  color: #f5f6ff !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease !important;
}
input:not([data-elev="off"]):focus,
select:not([data-elev="off"]):focus,
textarea:not([data-elev="off"]):focus {
  border-color: rgba(139,124,255,0.6) !important;
  box-shadow: 0 0 0 3px rgba(139,124,255,0.18) !important;
  background: rgba(29,33,64,0.85) !important;
}

/* ── HUD chrome (in-game top bar elements) ── */
.hud-room {
  background: rgba(10,12,31,0.88) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: none !important;  /* keep existing perf fix */
}
.moves-badge {
  background: rgba(29,33,64,0.8) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #a4a9c9 !important;
}
.hud-player.active {
  border-color: #8b7cff !important;
  box-shadow:
    0 0 18px rgba(139,124,255,0.4),
    0 2px 14px rgba(0,0,0,0.3) !important;
}

/* ── Lobby nav tabs ── */
.lobby-nav-btn.active {
  background: rgba(139,124,255,0.18) !important;
  color: #8b7cff !important;
}

/* ── Section labels — cosmic treatment ── */
.section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #a4a9c9 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* ── Elevated hero Quick Match button (optional structural upgrade) ── */
.elev-quick-match {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 68px;
  margin-top: 8px;
  border: none;
  border-radius: 18px;
  padding: 0 20px;
  background: linear-gradient(135deg, #ffb85c 0%, #ff8a4c 50%, #ff5a2c 100%);
  color: #1a1105;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.5px;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(120,50,10,0.5),
    0 14px 30px rgba(255,138,76,0.35),
    0 0 0 1px rgba(255,255,255,0.15) inset;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.elev-quick-match::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.18) 0.5px, transparent 1.5px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.18) 0.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}
.elev-quick-match:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 2px 0 rgba(120,50,10,0.55),
    0 20px 40px rgba(255,138,76,0.5),
    0 0 0 1px rgba(255,255,255,0.22) inset;
}
.elev-quick-match:active { transform: translateY(0); filter: brightness(0.95); }
.elev-quick-match svg { position: relative; z-index: 1; }
.elev-quick-match > span { position: relative; z-index: 1; }

/* ── Elevated lobby wordmark container ── */
.elev-lobby-wordmark {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
}

/* ── Divider — cleaner Elevated line ── */
.divider {
  color: #6a6f8f !important;
}
.divider::before,
.divider::after {
  background: rgba(255,255,255,0.08);
}

/* ── Status text / subtitles ── */
.status-text { color: #a4a9c9 !important; }

/* ── Modal surfaces (pause menu, profile, quests, shop, friends) ── */
.modal-overlay,
.quick-match-overlay {
  background:
    radial-gradient(ellipse at top, rgba(26,30,63,0.92) 0%, rgba(10,12,31,0.96) 60%) !important;
  backdrop-filter: blur(6px) saturate(1.2);
}
.modal-content,
.pause-menu-content,
.admin-panel {
  background: rgba(20,24,64,0.92) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.04) inset !important;
}

/* ── Pause info card ── */
.pause-info {
  background: rgba(29,33,64,0.7) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  color: #a4a9c9 !important;
}

/* ── Auth status pill ── */
.auth-status {
  background: rgba(29,33,64,0.7) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  color: #a4a9c9 !important;
}

/* ── Google sign-in button ── */
.btn-google {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #f5f6ff !important;
}
.btn-google:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(139,124,255,0.35) !important;
}

/* ── Room code display (Host screen) ── */
.room-code-display {
  background: rgba(29,33,64,0.7) !important;
  border: 1.5px dashed rgba(139,124,255,0.4) !important;
  border-radius: 14px !important;
}

/* ── Player list items ── */
.player-list li {
  background: rgba(29,33,64,0.7) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 10px !important;
}
.player-you {
  background: linear-gradient(135deg, #8b7cff 0%, #6d5ef5 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* ── Admin panel chrome ── */
.admin-tab.active {
  color: #8b7cff !important;
  border-bottom-color: #8b7cff !important;
}
.admin-stat .val {
  color: #8b7cff !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
  font-weight: 800 !important;
}
.admin-game-row {
  background: rgba(29,33,64,0.7) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.admin-game-row:hover {
  border-color: rgba(139,124,255,0.3) !important;
  background: rgba(29,33,64,0.9) !important;
}

/* ── Skeleton shimmer — upgraded to cosmic ── */
.skeleton {
  background:
    linear-gradient(90deg,
      rgba(29,33,64,0.6) 25%,
      rgba(139,124,255,0.08) 50%,
      rgba(29,33,64,0.6) 75%) !important;
}

/* ── Hex tooltip (in-game hint) ── */
.hex-tooltip {
  background: rgba(10,12,31,0.85) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #a4a9c9 !important;
}

/* ── Spectator count badge ── */
.spectator-count-badge {
  background: rgba(10,12,31,0.85) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── Territory HUD (during endgame) ── */
#territoryHUD {
  background: rgba(10,12,31,0.92) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
}

/* ── Chat panel surfaces ── */
.chat-panel-inner {
  background: rgba(20,24,64,0.95) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── Quick Match overlay content ── */
.qm-search-anim .qm-hex {
  color: #8b7cff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE B — HOME SCREEN STRUCTURAL PORT (v70)

   Rebuild the lobby DOM to match screen_home.jsx exactly.
   Classes namespaced with .elev-home-* to avoid conflicts with the
   legacy lobby styles.
═══════════════════════════════════════════════════════════════════ */

/* The new lobby root — match screen_home.jsx vertical flow.
   v97 — padding-top reduced so the wordmark sits higher on screen while
   still clearing the iPhone notch via safe-area-inset-top.
   v99 — horizontal padding bumped 16 → 22 (mobile). Full-width tiles
   (CREATE ROOM, BROWSE LIVE GAMES, Tournament, Weekly Challenge) were
   reaching the screen edges, making the layout feel crammed. The
   max-width:480px cap already protects desktop, so this is a pure
   mobile breathing-room change.
   Bottom padding respects safe-area-inset-bottom for the home indicator. */
#lobby.elev-home {
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px calc(env(safe-area-inset-bottom, 0px) + 40px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  position: relative;
}

/* Wordmark wrapper (centered). v97 — margin-top shrunk so the logo sits
   closer to the top of the safe area (still below the notch). */
#lobby.elev-home .elev-home-wordmark {
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 4px;
}

/* NavTabs primary row
   v98 — bumped inner padding 6 → 10 and trimmed gap 8 → 6 so the 7 icons
   sit off the pill's inner border instead of kissing it. */
#lobby.elev-home .elev-home-nav {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(29,33,64,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  justify-content: space-between;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 6px 4px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: #a4a9c9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn .lobby-nav-label {
  font-size: 10px;
  letter-spacing: 0.3px;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn:hover {
  background: rgba(255,255,255,0.04);
  color: #f5f6ff;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn.active {
  background: rgba(139,124,255,0.18);
  color: #8b7cff;
}

/* Tagline block */
.elev-home-tagline {
  text-align: center;
  margin-top: 4px;
}
.elev-home-tagline-main {
  font-size: 17px;
  font-weight: 600;
  color: #f5f6ff;
  line-height: 1.3;
  letter-spacing: -0.3px;
}
.elev-home-tagline-sub {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #6a6f8f;
  text-transform: uppercase;
  margin-top: 8px;
}

/* Rank card — tap to open profile */
.elev-home-rank-card {
  background: rgba(29,33,64,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.elev-home-rank-card:hover {
  transform: translateY(-1px);
  border-color: rgba(139,124,255,0.3);
}
.elev-home-rank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.elev-home-rank-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.elev-home-rank-level {
  font-weight: 600;
  font-size: 14px;
  color: #f5f6ff;
}
.elev-home-rank-elo {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #a4a9c9;
}
.elev-home-rank-elo .elev-home-rank-elo-num {
  color: #f5f6ff;
  font-weight: 600;
}

/* Section header */
.elev-home-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a4a9c9;
}
.elev-home-section-header h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.elev-home-section-header button {
  background: none;
  border: none;
  color: #a4a9c9;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

/* Room card (Your rooms section) */
.elev-home-roomcard {
  background: rgba(29,33,64,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid #8b7cff;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 8px;
}
.elev-home-roomcard-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.elev-home-roomcard-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #8b7cff;
}
.elev-home-roomcard-code {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  color: #f5f6ff;
  letter-spacing: 2px;
  margin-left: 4px;
}
.elev-home-roomcard-meta {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 10px;
  color: #6a6f8f;
  letter-spacing: 0.8px;
}
.elev-home-roomcard-waiting {
  font-size: 13px;
  color: #a4a9c9;
  margin-bottom: 10px;
}
.elev-home-roomcard-actions {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 8px;
}

/* Name input field — matches design */
.elev-home-name-field {
  background: rgba(29,33,64,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 0 14px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.elev-home-name-field:focus-within {
  border-color: rgba(139,124,255,0.6);
  box-shadow: 0 0 0 3px rgba(139,124,255,0.15);
}
.elev-home-name-field svg {
  color: #6a6f8f;
  flex-shrink: 0;
}
.elev-home-name-field input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  height: auto !important;
  color: #f5f6ff !important;
  font-size: 16px !important;
  box-shadow: none !important;
}

/* v116 — Profile identity chip: shown above Quick Match when a profile
   exists, replacing the "Your Name" input. Tap anywhere to open the
   profile editor. Avatar + name on the left, level/elo beneath, pencil
   icon on the right to telegraph edit affordance. */
.elev-home-identity-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(29,33,64,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px 14px;
  min-height: 52px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.elev-home-identity-chip:hover,
.elev-home-identity-chip:focus-visible {
  background: rgba(40,46,84,0.82);
  border-color: rgba(139,124,255,0.45);
  outline: none;
}
.elev-home-identity-chip:active {
  transform: scale(0.985);
}
.elev-home-identity-avatar {
  font-size: 28px;
  line-height: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,24,48,0.65);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.elev-home-identity-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.elev-home-identity-name {
  font-size: 16px;
  font-weight: 700;
  color: #f5f6ff;
  letter-spacing: 0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elev-home-identity-meta {
  font-size: 11px;
  font-weight: 600;
  color: #a4a9c9;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.elev-home-identity-edit {
  color: #6a6f8f;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.18s ease, color 0.18s ease;
}
.elev-home-identity-chip:hover .elev-home-identity-edit {
  opacity: 1;
  color: rgba(139,124,255,0.9);
}

/* Player count row (2-6 hex tiles) */
.elev-home-player-count {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  padding-top: 4px;
}
.elev-home-player-count-label {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #6a6f8f;
  text-transform: uppercase;
  margin-right: 4px;
}

/* 2x2 mode grid */
.elev-home-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Mode tile (VS BOT, LOCAL, CREATE ROOM)
   v98 — added side padding so the icon + label never touch the tile border
   at shorter widths (was only safe because content is centered). */
.elev-home-mode-tile {
  background: rgba(29,33,64,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  height: 54px;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.elev-home-mode-tile:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.elev-home-mode-tile-icon {
  font-size: 16px;
}
/* Variant accents */
.elev-home-mode-tile[data-accent="cyan"]   { color: #62e9ff; box-shadow: inset 0 0 0 1px rgba(98,233,255,0.22); }
.elev-home-mode-tile[data-accent="pink"]   { color: #ff7cc4; box-shadow: inset 0 0 0 1px rgba(255,124,196,0.22); }
.elev-home-mode-tile[data-accent="mint"]   { color: #4dd6a8; box-shadow: inset 0 0 0 1px rgba(77,214,168,0.22); }
.elev-home-mode-tile[data-accent="gold"]   { color: #f5cb5c; box-shadow: inset 0 0 0 1px rgba(245,203,92,0.22); }
.elev-home-mode-tile[data-accent="purple"] { color: #8b7cff; box-shadow: inset 0 0 0 1px rgba(139,124,255,0.22); }

/* Code-join combo (input + button)
   v98 — CODE placeholder was flush to inner-left border; bumped input pad
   14 → 18 and widened the Join tap target 70 → 82 so the label has room. */
.elev-home-codejoin {
  display: flex;
  background: rgba(29,33,64,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  height: 54px;
}
.elev-home-codejoin input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0 18px !important;
  height: auto !important;
  color: #f5f6ff !important;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  box-shadow: none !important;
}
.elev-home-codejoin input::placeholder {
  color: #6a6f8f;
  letter-spacing: 2px;
}
.elev-home-codejoin button {
  width: 82px;
  background: rgba(77,214,168,0.12);
  border: none;
  border-left: 1px solid rgba(77,214,168,0.25);
  cursor: pointer;
  color: #4dd6a8;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.15s ease;
}
.elev-home-codejoin button:hover {
  background: rgba(77,214,168,0.22);
}
.elev-home-codejoin--full { width: 100%; }

/* v153.78 — Create Open Game block. Promotes the most underused
   multiplayer entry point (a publicly-listed room people can find +
   a friend can join via code). Single tile spans full width with a
   bold title + subtitle so the value prop reads at a glance. */
.elev-home-create-open {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.elev-home-create-open-btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(124,111,247,0.18), rgba(255,124,196,0.10));
  border: 1px solid rgba(124,111,247,0.42);
  border-radius: 14px;
  color: #f5f6ff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  width: 100%;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  box-shadow: 0 8px 22px -14px rgba(124,111,247,0.55);
}
.elev-home-create-open-btn:hover {
  background: linear-gradient(135deg, rgba(124,111,247,0.28), rgba(255,124,196,0.16));
  border-color: rgba(124,111,247,0.65);
}
.elev-home-create-open-btn:active { transform: translateY(1px); }
.elev-home-create-open-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(124,111,247,0.22);
  color: #cdc4ff;
  flex-shrink: 0;
}
.elev-home-create-open-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.elev-home-create-open-title {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', var(--elev-font, sans-serif));
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
}
.elev-home-create-open-sub {
  font-size: 11.5px;
  color: var(--elev-ink-dim, #a4a9c9);
  line-height: 1.35;
}
.elev-home-create-open-cta {
  font-family: var(--elev-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  color: #cdc4ff;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .elev-home-create-open-btn { padding: 12px 14px; gap: 10px; }
  .elev-home-create-open-icon { width: 38px; height: 38px; }
  .elev-home-create-open-title { font-size: 15px; }
  .elev-home-create-open-cta { display: none; }
}

/* Browse live games row
   v98 — was padding 0 16px; icon hugged the border. Bumped to 20px so the
   ◉ and the count pill both sit off the edges. */
.elev-home-browse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 58px;
  width: 100%;
  background: rgba(77,214,168,0.06);
  border: 1px solid rgba(77,214,168,0.2);
  border-radius: 14px;
  cursor: pointer;
  color: #4dd6a8;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.8px;
  transition: background 0.15s ease, border-color 0.2s ease;
}
.elev-home-browse:hover {
  background: rgba(77,214,168,0.12);
  border-color: rgba(77,214,168,0.35);
}
.elev-home-browse-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.elev-home-browse-icon { font-size: 18px; }
.elev-home-browse-pill {
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  background: #4dd6a8;
  color: #0a0a1a;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 11px;
}
.elev-home-browse-pill.empty {
  background: rgba(77,214,168,0.2);
  color: rgba(77,214,168,0.65);
}

/* Quest tile (Daily Puzzle, Tournament, Weekly)
   v98 — bumped height + side padding so the label + icon don't sit on the
   button's border, matching the increased padding on the other tiles. */
.elev-home-quest-tile {
  height: 54px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 14px;
  transition: transform 0.12s ease, filter 0.2s ease;
}
.elev-home-quest-tile:hover { transform: translateY(-1px); filter: brightness(1.1); }
.elev-home-quest-tile[data-color="purple"] { background: rgba(139,124,255,0.05); border: 1px solid rgba(139,124,255,0.22); color: #8b7cff; }
.elev-home-quest-tile[data-color="pink"]   { background: rgba(255,124,196,0.05); border: 1px solid rgba(255,124,196,0.22); color: #ff7cc4; }
.elev-home-quest-tile[data-color="gold"]   { background: rgba(245,203,92,0.05); border: 1px solid rgba(245,203,92,0.22); color: #f5cb5c; grid-column: 1 / -1; }

/* How to Play — tertiary */
.elev-home-howtoplay {
  background: transparent;
  border: none;
  color: #a4a9c9;
  font-size: 13px;
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.elev-home-howtoplay:hover { color: #f5f6ff; }

/* v153.78 — Beta Modes section. Collapsible drawer at lobby bottom
   so experimental modes (Hex Hunt for now) are discoverable but
   visually de-emphasized. Header is intentionally muted; the open
   state slides the tiles in below. */
.elev-beta-section {
  width: 100%;
  margin-top: 6px;
}
.elev-beta-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #a4a9c9;
  font: 600 12.5px var(--elev-font, 'Inter', sans-serif);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.elev-beta-toggle:hover { background: rgba(255,255,255,0.05); color: #f5f6ff; }
.elev-beta-toggle.is-open { background: rgba(124,111,247,0.08); border-color: rgba(124,111,247,0.22); color: #f5f6ff; }
.elev-beta-toggle-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.elev-beta-pill {
  font-family: var(--elev-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,217,61,0.14);
  color: #ffd93d;
  font-weight: 700;
}
.elev-beta-toggle-chev {
  transition: transform 0.22s ease;
}
.elev-beta-toggle.is-open .elev-beta-toggle-chev { transform: rotate(180deg); }
.elev-beta-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  animation: betaSlideIn 0.24s ease-out;
}
@keyframes betaSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.elev-beta-tile { opacity: 0.92; }
.elev-beta-tile:hover { opacity: 1; }
.elev-beta-tile-pill {
  font-family: var(--elev-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(98,233,255,0.16);
  color: #9ce0ee;
  margin-left: 6px;
  font-weight: 700;
}
.elev-beta-list-note {
  font-size: 11px;
  color: var(--elev-ink-dim, #a4a9c9);
  opacity: 0.72;
  text-align: center;
  padding: 4px 8px 0;
  line-height: 1.45;
}

/* Season strip */
.elev-home-season-strip {
  margin-top: 4px;
  padding: 12px 14px;
  background: rgba(29,33,64,0.7);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.elev-home-season-strip:hover { border-color: rgba(139,124,255,0.3); }
.elev-home-season-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.elev-home-season-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b7cff 0%, #ff7cc4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.elev-home-season-title {
  font-size: 13px;
  font-weight: 600;
  color: #f5f6ff;
}
.elev-home-season-sub {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 10px;
  color: #6a6f8f;
  letter-spacing: 1px;
}
.elev-home-season-hexes {
  display: flex;
  gap: 4px;
}
.elev-home-season-hex {
  width: 18px;
  height: 20px;
}

/* Hero Quick Match — now scoped cleaner (replaces earlier .elev-quick-match) */
.elev-home-quick-match {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 68px;
  margin-top: 4px;
  border: none;
  border-radius: 18px;
  padding: 0 20px;
  background: linear-gradient(135deg, #ffb85c 0%, #ff8a4c 50%, #ff5a2c 100%);
  color: #1a1105;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.5px;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(120,50,10,0.5),
    0 14px 30px rgba(255,138,76,0.35),
    0 0 0 1px rgba(255,255,255,0.15) inset;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.elev-home-quick-match::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.2) 0.5px, transparent 1.5px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.2) 0.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}
.elev-home-quick-match:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.elev-home-quick-match:active { transform: translateY(0); filter: brightness(0.95); }
.elev-home-quick-match > * { position: relative; z-index: 1; }

/* Rank tier icons inside new badge (override legacy emoji sizing) */
.elev-home-rank-badge-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Responsive — on wider screens give the lobby room to breathe. v154.40
 * widened: was capped at 520px which left ~900px of empty space on either
 * side on a typical 1440px desktop, making the layout feel cramped + lost.
 * Bumped to 760px so the hero PLAY button, mode tiles, and chips have real
 * width on desktop without losing the centered-column feel. */
@media (min-width: 720px) {
  #lobby.elev-home { max-width: 760px; }
}
/* On very wide displays push the hero PLAY button + mode tiles into a
 * more deliberate scale so they don't look microscopic on a 27" monitor. */
@media (min-width: 1100px) {
  #lobby.elev-home { max-width: 820px; }
  body.home-redesign-v1 .elev-home-quick-match {
    font-size: 22px !important;
    padding: 26px 36px !important;
  }
  body.home-redesign-v1 .elev-home-mode-tile {
    min-height: 88px;
    font-size: 14px;
  }
}

/* ── Rank badge in HUD ── */
.rank-badge.bronze {
  background: rgba(210,145,108,0.12) !important;
  border: 1px solid rgba(210,145,108,0.4) !important;
  color: #d2916c !important;
}
.rank-badge.silver {
  background: rgba(200,207,224,0.12) !important;
  border: 1px solid rgba(200,207,224,0.4) !important;
  color: #c8cfe0 !important;
}
.rank-badge.gold {
  background: rgba(245,203,92,0.14) !important;
  border: 1px solid rgba(245,203,92,0.45) !important;
  color: #f5cb5c !important;
}
.rank-badge.platinum {
  background: rgba(147,245,208,0.14) !important;
  border: 1px solid rgba(147,245,208,0.45) !important;
  color: #93f5d0 !important;
}
.rank-badge.diamond {
  background: rgba(139,215,255,0.14) !important;
  border: 1px solid rgba(139,215,255,0.45) !important;
  color: #8bd7ff !important;
}
.rank-badge.master {
  background: rgba(255,107,168,0.14) !important;
  border: 1px solid rgba(255,107,168,0.45) !important;
  color: #ff6ba8 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE B — SHOP STRUCTURAL PORT (v71)
   Matches /design-exports/src/screen_shop.jsx
═══════════════════════════════════════════════════════════════ */

/* Header */
.elev-shop .shop-header.elev-shop-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.elev-shop-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 700; color: #f5f7ff;
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif);
  letter-spacing: -0.3px;
}
.elev-shop-right {
  display: flex; align-items: center; gap: 8px;
}
.shop-coins.elev-shop-coins {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(29,33,64,0.7);
  border: 1px solid rgba(255,200,87,0.3) !important;
  border-radius: 999px;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 13px; font-weight: 700; color: #ffc857 !important;
}
.elev-shop-close {
  width: 36px; height: 36px;
  background: rgba(29,33,64,0.6) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  color: rgba(200,210,240,0.7) !important;
  font-size: 20px; line-height: 1;
}

/* Tabs — underline pill style */
.elev-shop-tabs {
  display: flex !important; gap: 4px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 0 16px !important;
  margin-bottom: 4px;
  overflow-x: auto;
  background: transparent !important;
}
.shop-tab.elev-shop-tab {
  flex: 1 !important;
  padding: 12px 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  cursor: pointer;
  color: rgba(160,170,200,0.75) !important;
  font-family: var(--font-display, -apple-system, sans-serif);
  font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.shop-tab.elev-shop-tab:hover { color: #f5f7ff !important; }
.shop-tab.elev-shop-tab.active {
  color: #ff8a4c !important;
  border-bottom-color: #ff8a4c !important;
}
.elev-shop-tab-icon { font-size: 14px; line-height: 1; }

/* Shop body — remove padding around inner grids; children own their spacing */
.elev-shop .shop-body { padding: 16px !important; }

/* Badges */
.elev-shop-badge {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 7px; border-radius: 999px;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #fff;
  z-index: 2;
}
.elev-shop-badge-new       { background: #ff8a7a; }
.elev-shop-badge-hot       { background: #ff6b6b; }
.elev-shop-badge-legendary { background: linear-gradient(135deg, #ffc857, #ff8a4c); color: #1a1105; }

/* Shared card text */
.elev-shop-card-name {
  font-weight: 700; font-size: 14px; color: #f5f7ff;
  font-family: var(--font-display, -apple-system, sans-serif);
  letter-spacing: -0.2px;
}
.elev-shop-card-name.center { text-align: center; }
.elev-shop-card-desc {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; color: rgba(160,170,200,0.7); margin-top: 2px;
  letter-spacing: 0.2px; text-align: center;
  line-height: 1.4;
}

/* Action buttons */
.elev-shop-equip-btn {
  margin-top: 10px; width: 100%; height: 32px;
  background: rgba(77,214,168,0.13);
  border: 1px solid rgba(77,214,168,0.55);
  border-radius: 8px; color: #4dd6a8;
  font-family: var(--font-display, sans-serif);
  font-weight: 700; font-size: 12px;
  cursor: pointer; letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: background .15s, border-color .15s;
}
.elev-shop-equip-btn:hover {
  background: rgba(77,214,168,0.2);
  border-color: #4dd6a8;
}
.elev-shop-price-btn {
  margin-top: 10px; width: 100%; height: 32px;
  background: rgba(29,33,64,0.7);
  border: 1px solid rgba(255,200,87,0.35);
  border-radius: 8px; color: #ffc857;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-weight: 700; font-size: 12px;
  cursor: pointer; letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all .15s;
}
.elev-shop-price-btn.can-buy:hover {
  background: rgba(255,200,87,0.18);
  border-color: rgba(255,200,87,0.6);
}
.elev-shop-price-btn.cant-buy {
  opacity: 0.45; cursor: not-allowed;
  border-color: rgba(255,255,255,0.08);
  color: rgba(160,170,200,0.6);
}
.elev-shop-price-btn.cant-buy path { fill: rgba(160,170,200,0.5) !important; }
.elev-shop-equipped-pill {
  margin-top: 10px; width: 100%; height: 32px;
  background: transparent;
  border: 1px solid #4dd6a8;
  border-radius: 8px; color: #4dd6a8;
  font-family: var(--font-display, sans-serif);
  font-weight: 700; font-size: 12px; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center;
}
.elev-shop-equipped-pill.mt8 { margin-top: 8px; }
.elev-shop-starter-pill {
  margin-top: 10px; width: 100%; height: 32px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 8px; color: rgba(160,170,200,0.6);
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-weight: 600; font-size: 11px; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}
.elev-shop-starter-pill.mt8 { margin-top: 8px; }

/* ─ COLORS tab ─ */
.elev-shop-grid-colors {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.elev-shop-color-card {
  background: rgba(29,33,64,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px; text-align: center; position: relative;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.elev-shop-color-card.equipped {
  border-color: #4dd6a8;
  box-shadow: 0 0 20px rgba(77,214,168,0.2);
}
.elev-shop-color-hex {
  display: flex; justify-content: center; margin-bottom: 12px;
}

/* ─ THEMES tab ─ */
.elev-shop-grid-themes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.elev-shop-theme-card {
  background: rgba(29,33,64,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.elev-shop-theme-card.equipped {
  border-color: #4dd6a8;
  box-shadow: 0 0 16px rgba(77,214,168,0.22);
}
.elev-shop-theme-header {
  height: 80px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
/* v153.55 — Canvas-preview header. Taller than the static gradient header
   (120px vs 80px) so the live theme background has room to breathe. The
   canvas itself fills the header; lock pill + badge overlay on top. */
.elev-shop-theme-header.elev-shop-theme-header-canvas {
  height: 120px;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
}
.elev-shop-theme-header.elev-shop-theme-header-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.elev-shop-theme-body { padding: 12px; }
.elev-shop-theme-body .elev-shop-card-desc { text-align: left; }
.elev-shop-theme-body .elev-shop-card-name { text-align: left; }
.elev-shop-theme-lock {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.55);
  border-radius: 999px;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; font-weight: 700; color: #ffc857;
  letter-spacing: 0.5px;
  z-index: 2;
}

/* ─ EFFECTS tab ─ */
.elev-shop-list-effects {
  display: flex; flex-direction: column; gap: 8px;
}
.elev-shop-effect-row {
  background: rgba(29,33,64,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--fx, #ff8a4c);
  border-radius: 14px;
  padding: 14px;
  display: flex; align-items: center; gap: 12px;
  transition: border-color .2s;
}
.elev-shop-effect-row.equipped {
  border-color: var(--fx, #ff8a4c);
}
.elev-shop-effect-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--fx) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--fx) 40%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.elev-shop-effect-body { flex: 1; min-width: 0; }
.elev-shop-effect-title {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display, sans-serif);
  font-weight: 700; font-size: 14px; color: #f5f7ff;
  position: relative;
}
.elev-shop-effect-title .elev-shop-badge {
  position: static; padding: 1px 6px; font-size: 9px;
}
.elev-shop-effect-body .elev-shop-card-desc {
  text-align: left; margin-top: 2px;
}
.elev-shop-effect-action { flex-shrink: 0; }
.elev-shop-effect-action .elev-shop-equip-btn,
.elev-shop-effect-action .elev-shop-price-btn {
  margin-top: 0; width: auto; padding: 0 14px;
}
.elev-shop-equipped-inline {
  font-family: var(--font-display, sans-serif);
  font-weight: 700; font-size: 11px; letter-spacing: 1px;
}

/* ─ SKINS tab ─ */
.elev-shop-grid-skins {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.elev-shop-skin-card {
  background: rgba(29,33,64,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px;
  position: relative; text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.elev-shop-skin-card.equipped {
  border-color: #4dd6a8;
  box-shadow: 0 0 16px rgba(77,214,168,0.22);
}
.elev-shop-skin-preview {
  display: flex; justify-content: center; margin-bottom: 10px;
}
.elev-shop-skin-preview canvas {
  width: 70px; height: 70px;
}

/* Graceful fallback for color-mix (older webviews) */
@supports not (background: color-mix(in srgb, red, blue)) {
  .elev-shop-effect-icon {
    background: rgba(255,138,76,0.18);
    border-color: rgba(255,138,76,0.4);
  }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE B — PROFILE HERO PORT (v72)
   Matches /design-exports/src/screen_profile.jsx
═══════════════════════════════════════════════════════════════ */

.elev-profile-hero {
  position: relative;
  flex-shrink: 0;
  /* v153.112 — Top padding now respects iPhone safe-area-inset-top so the
     close button isn't shoved under the notch / Dynamic Island. The bottom-
     sheet card on iOS expands to height:100% (full screen), which put the
     close button RIGHT under the camera cutout. Was 16px → now max(16px,
     safe-area-top + 8px) which gives breathing room without leaving an
     ugly gap on devices without a notch. */
  padding: max(16px, calc(env(safe-area-inset-top, 0px) + 10px)) 16px 14px;
  background: linear-gradient(180deg, rgba(139,124,255,0.16) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.elev-profile-hero-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.elev-profile-hero-label {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: 3px;
  color: rgba(160,170,200,0.7);
  text-transform: uppercase;
}
.elev-profile-close {
  width: 36px !important; height: 36px !important;
  background: rgba(29,33,64,0.7) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  color: rgba(200,210,240,0.7) !important;
  font-size: 20px !important; line-height: 1 !important;
}

.elev-profile-hero-card {
  display: flex; gap: 14px; align-items: center;
  padding: 0;
  margin-bottom: 16px;
}
.elev-profile-avatar {
  position: relative;
  width: 92px; height: 106px;
  flex-shrink: 0;
}
.elev-profile-avatar-emoji {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
  pointer-events: none;
}
.elev-profile-online-dot {
  position: absolute; bottom: 8px; right: 8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #4dd6a8;
  border: 2px solid #0d0f22;
  box-shadow: 0 0 8px #4dd6a8;
}

.elev-profile-identity {
  flex: 1; min-width: 0;
}
.elev-profile-name {
  font-family: var(--font-display, -apple-system, 'SF Pro Display', sans-serif);
  font-size: 22px; font-weight: 800;
  color: #f5f7ff;
  letter-spacing: -0.3px;
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.elev-profile-pills {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.elev-profile-streak-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 8px; height: 22px;
  background: rgba(255,138,76,0.14);
  border: 1px solid rgba(255,138,76,0.35);
  border-radius: 999px;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 700;
  color: #ff8a4c;
}
.elev-profile-rank-num {
  display: inline-flex; align-items: center;
  padding: 0 8px; height: 22px;
  background: rgba(29,33,64,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: rgba(200,210,240,0.75);
}

.elev-profile-xp {
  margin-top: 10px;
}
.elev-profile-xp-bar {
  height: 6px;
  background: rgba(0,0,0,0.35);
  border-radius: 3px;
  overflow: hidden;
}
.elev-profile-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b7cff 0%, #ff8a4c 100%);
  box-shadow: 0 0 12px rgba(139,124,255,0.5);
  transition: width .4s ease;
  border-radius: 3px;
}
.elev-profile-xp-label {
  margin-top: 5px;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.8px;
  color: rgba(160,170,200,0.65);
}

/* Stat hexes grid */
.elev-profile-stat-hexes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}
.elev-profile-hex-stat {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.elev-profile-hex-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.elev-profile-hex-body {
  position: relative;
  text-align: center;
  padding: 4px;
}
.elev-profile-hex-value {
  font-family: var(--font-display, -apple-system, sans-serif);
  font-weight: 800;
  font-size: 22px;
  color: var(--c, #8b7cff);
  line-height: 1;
}
.elev-profile-hex-label {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; letter-spacing: 1.5px;
  color: rgba(160,170,200,0.65);
  margin-top: 3px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE B — FRIENDS / SOCIAL PORT (v73)
   Matches /design-exports/src/screen_friends.jsx
═══════════════════════════════════════════════════════════════ */

.friends-header.elev-friends-header {
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.elev-friends-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display, -apple-system, 'SF Pro Display', sans-serif);
  font-size: 22px; font-weight: 700; color: #f5f7ff;
  letter-spacing: -0.3px;
}
.elev-friends-count {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 9px; min-width: 24px;
  background: #8b7cff;
  border-radius: 999px;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 700; color: #fff;
  letter-spacing: 0.5px;
}
.elev-friends-close {
  width: 36px !important; height: 36px !important;
  background: rgba(29,33,64,0.7) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  color: rgba(200,210,240,0.7) !important;
  font-size: 20px !important; line-height: 1 !important;
}

/* Capsule-pill tabs — scoped under .elev-friends so no global leak */
.elev-friends .friends-tabs.elev-friends-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 14px 16px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding-bottom: 14px !important;
  overflow-x: auto;
  scrollbar-width: none;
  background: transparent !important;
}
.elev-friends .friends-tabs.elev-friends-tabs::-webkit-scrollbar { display: none; }
.elev-friends .friends-tab.elev-friends-tab {
  padding: 8px 14px !important;
  background: rgba(29,33,64,0.7) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  color: rgba(160,170,200,0.75) !important;
  font-family: var(--font-display, sans-serif);
  font-weight: 600 !important; font-size: 12px !important;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.elev-friends .friends-tab.elev-friends-tab:hover {
  color: #f5f7ff !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.elev-friends .friends-tab.elev-friends-tab.active {
  background: #8b7cff !important;
  border-color: #8b7cff !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(139,124,255,0.35);
}
.elev-friends .friends-tab.elev-friends-tab .tab-badge {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; font-weight: 700;
  margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Friend rows — restyle to match screen_friends.jsx */
.elev-friends .friend-row {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 12px !important;
  background: rgba(29,33,64,0.7) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.elev-friends .friend-row:hover {
  border-color: rgba(139,124,255,0.3) !important;
  background: rgba(29,33,64,0.85) !important;
}
.elev-friends .friend-avatar {
  position: relative;
  width: 44px !important; height: 44px !important;
  border-radius: 12px !important;
  background: rgba(10,15,30,0.6) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px !important;
  flex-shrink: 0;
}
.elev-friends .friend-info {
  flex: 1; min-width: 0;
}
.elev-friends .friend-name {
  font-family: var(--font-display, sans-serif) !important;
  font-weight: 700 !important; font-size: 14px !important;
  color: #f5f7ff !important;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.elev-friends .friend-status {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
  font-size: 11px !important;
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.elev-friends .friend-actions {
  display: flex; gap: 6px; align-items: center;
}
.elev-friends .btn-invite {
  padding: 7px 12px !important;
  background: #8b7cff !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: var(--font-display, sans-serif) !important;
  font-weight: 700 !important; font-size: 11px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase;
  cursor: pointer;
}
.elev-friends .btn-invite:hover {
  background: #9c8fff !important;
}
.elev-friends .btn-remove {
  width: 30px !important; height: 30px !important;
  background: rgba(10,15,30,0.6) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: rgba(200,210,240,0.6) !important;
  font-size: 14px !important;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.elev-friends .btn-remove:hover {
  background: rgba(255,107,168,0.15) !important;
  border-color: rgba(255,107,168,0.35) !important;
  color: #ff6ba8 !important;
}

/* Add-friend section */
.elev-friends .my-tag-display,
.elev-friends .friend-add-section {
  background: rgba(29,33,64,0.7) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  padding: 16px !important;
}
.elev-friends .tag-label,
.elev-friends .friend-add-section label {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: rgba(160,170,200,0.7) !important;
  text-transform: uppercase;
  margin-bottom: 8px !important;
}
.elev-friends .tag-value {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
  font-size: 18px !important; font-weight: 700 !important;
  color: #f5f7ff !important;
  letter-spacing: 3px !important;
  padding: 10px 14px !important;
  background: rgba(10,15,30,0.6) !important;
  border-radius: 10px !important;
  border: 1px dashed rgba(139,124,255,0.4) !important;
}
.elev-friends .tag-copy,
.elev-friends .friend-add-row button {
  background: #8b7cff !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: var(--font-display, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}
.elev-friends .friend-add-row input {
  background: rgba(10,15,30,0.6) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  color: #f5f7ff !important;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
  letter-spacing: 2px !important;
}
.elev-friends .friend-add-row input:focus {
  border-color: rgba(139,124,255,0.5) !important;
  outline: none;
}

/* Empty states */
.elev-friends .friends-empty {
  padding: 40px 20px !important;
  color: rgba(160,170,200,0.7) !important;
  text-align: center;
  font-family: var(--font-display, sans-serif);
}
.elev-friends .friends-empty .empty-icon {
  font-size: 44px !important;
  margin-bottom: 14px !important;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════
 * Phase B v73 — Quests (Daily Puzzle / Weekly Challenge / Tournament)
 * Scoped to .elev-quest-* — preserves existing IDs & wiring.
 * ═══════════════════════════════════════════ */

/* Shared QuestHeader */
.elev-quest-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.elev-quest-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.elev-quest-head-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.elev-quest-head-title {
  font-family: var(--font-display, sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #fff;
  line-height: 1.1;
}
.elev-quest-head-sub {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(160,170,200,0.55);
  margin-top: 3px;
}
.elev-quest-close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(180,190,220,0.7) !important;
  font-size: 18px !important;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elev-quest-close:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

/* ─── Daily Puzzle ─── */
.elev-puzzle .elev-quest-head-icon {
  background: rgba(181,101,255,0.13);
  border: 1px solid rgba(181,101,255,0.33);
}
.elev-puzzle-streak-banner {
  margin: 14px 16px 0;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,138,76,0.22), rgba(255,61,0,0.14));
  border: 1px solid rgba(255,138,76,0.33);
  display: flex;
  align-items: center;
  gap: 14px;
}
.elev-puzzle-streak-icon {
  font-size: 38px;
  filter: drop-shadow(0 2px 10px rgba(255,100,0,0.6));
  flex-shrink: 0;
}
.elev-puzzle-streak-meta {
  flex: 1;
  min-width: 0;
}
.elev-puzzle-streak-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 2px;
  color: #ff8a4c;
  text-transform: uppercase;
  font-weight: 700;
}
.elev-puzzle-streak-value {
  font-family: var(--font-display, sans-serif);
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-top: 2px;
}
.elev-puzzle-streak-value-unit {
  font-size: 13px;
  font-weight: 500;
  color: rgba(160,170,200,0.65);
  margin-left: 2px;
}
.elev-puzzle-streak-chip {
  padding: 7px 11px;
  background: rgba(0,0,0,0.28);
  border-radius: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: #fff;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* ─── Weekly Challenge ─── */
.elev-wc .elev-quest-head-icon {
  background: rgba(255,200,87,0.13);
  border: 1px solid rgba(255,200,87,0.4);
}
.elev-wc-task-card {
  margin: 14px 0 0;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,200,87,0.18), rgba(255,138,76,0.09));
  border: 1px solid rgba(255,200,87,0.28);
}
.elev-wc-task-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 2px;
  color: #ffc857;
  text-transform: uppercase;
  font-weight: 700;
}
.elev-wc-task-desc {
  font-family: var(--font-display, sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-top: 6px;
  line-height: 1.35;
}
.elev-wc-progress-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 14px;
}
.elev-wc-progress-big {
  font-family: var(--font-display, sans-serif);
  font-size: 44px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.5px;
}
.elev-wc-progress-total {
  font-size: 18px;
  color: rgba(160,170,200,0.65);
  font-weight: 500;
}
.elev-wc-progress-bar {
  margin-top: 10px;
  height: 9px;
  background: rgba(0,0,0,0.3);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.elev-wc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff8a4c, #ffc857);
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(255,200,87,0.55);
  position: relative;
  transition: width 0.4s ease;
}

/* ─── Tournament ─── */
.elev-tourn .elev-quest-head-icon {
  background: rgba(240,110,170,0.14);
  border: 1px solid rgba(240,110,170,0.38);
}
.elev-tourn-hero {
  margin: 14px 0 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #b565ff 0%, #f06eaa 50%, #ffc857 100%);
  padding: 18px;
}
.elev-tourn-hero-tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(10,10,26,0.72);
  font-weight: 700;
  text-transform: uppercase;
}
.elev-tourn-hero-title {
  font-family: var(--font-display, sans-serif);
  font-size: 24px;
  font-weight: 900;
  color: #0a0a1a;
  margin-top: 3px;
  letter-spacing: -0.5px;
}
.elev-tourn-hero-stats {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.elev-tourn-hero-stat {
  padding: 6px 10px;
  background: rgba(0,0,0,0.22);
  border-radius: 8px;
}
.elev-tourn-hero-stat-k {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(10,10,26,0.65);
  font-weight: 700;
  text-transform: uppercase;
}
.elev-tourn-hero-stat-v {
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 13px;
  color: #0a0a1a;
  margin-top: 1px;
}

/* ═══════════════════════════════════════════
 * v154.22 — Big text stingers (in-match drama, no win telegraph)
 * ═══════════════════════════════════════════
 * Pool of 3 stinger nodes inside #gameStingerOverlay. Each fires
 * via .game-stinger.show; the keyframe slides in from off-screen,
 * holds 400ms at full size, fades out. Pointer-events: none so the
 * stingers never block taps on the board underneath.
 *
 * Design intent: celebrate the play you JUST made — BLOCKED!, FORK!,
 * STREAK!, ON FIRE! — without ever telegraphing win-state. Stingers
 * use Big Shoulders Display 900-weight at 64px on mobile, 80px on
 * desktop, with chunky letter-spacing and a colored stroke that
 * subtly tints with the player's color.
 */
#gameStingerOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60; /* over canvas, under modals (which are 100+) */
  overflow: hidden;
  /* Center the stingers vertically in the top third — keeps them away
     from the chain HUD at bottom and the hud-top stats bar. */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 22vh;
}
.game-stinger {
  position: absolute;
  font-family: var(--elev-display, 'Big Shoulders Display', 'Rajdhani', sans-serif);
  font-weight: 900;
  font-size: clamp(48px, 9vw, 84px);
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0) rotate(-3deg) scale(0.6);
  /* Glow + shadow so the text reads cleanly on any backdrop. The text
     color picks up a tint via the .stinger-tint-* helper classes below. */
  text-shadow:
    0 0 14px rgba(255,255,255,0.55),
    0 0 28px rgba(255,255,255,0.25),
    0 2px 0 rgba(0,0,0,0.6),
    0 6px 18px rgba(0,0,0,0.45);
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.25);
  pointer-events: none;
  will-change: transform, opacity;
}
.game-stinger.show {
  animation: gameStingerFly 950ms cubic-bezier(.18,.86,.31,1.04) forwards;
}
@keyframes gameStingerFly {
  0%   { opacity: 0; transform: translateX(-40vw) rotate(-12deg) scale(0.55); }
  18%  { opacity: 1; transform: translateX(2vw)   rotate(-4deg)  scale(1.10); }
  28%  { transform: translateX(0)                  rotate(-3deg)  scale(1.0);  }
  78%  { opacity: 1; transform: translateX(0)      rotate(-3deg)  scale(1.0);  }
  100% { opacity: 0; transform: translateX(2vw)    rotate(-1deg)  scale(0.92); }
}
/* Color tints — applied to the .game-stinger as a modifier so the stinger
   text picks up the relevant player's color subtly. The shadow stack stays
   white-ish for legibility; only the stroke + glow shift. */
.game-stinger.stinger-block {
  color: #ff7c7c;
  text-shadow:
    0 0 14px rgba(255,124,124,0.55),
    0 0 28px rgba(255,80,80,0.25),
    0 2px 0 rgba(0,0,0,0.6),
    0 6px 18px rgba(0,0,0,0.45);
}
.game-stinger.stinger-fork {
  color: #ffd93d;
  text-shadow:
    0 0 14px rgba(255,217,61,0.55),
    0 0 28px rgba(255,200,40,0.25),
    0 2px 0 rgba(0,0,0,0.6),
    0 6px 18px rgba(0,0,0,0.45);
}
.game-stinger.stinger-streak {
  color: #7ce0ff;
  text-shadow:
    0 0 14px rgba(124,224,255,0.55),
    0 0 28px rgba(60,200,255,0.25),
    0 2px 0 rgba(0,0,0,0.6),
    0 6px 18px rgba(0,0,0,0.45);
}
.game-stinger.stinger-fire {
  color: #ffae3d;
  text-shadow:
    0 0 16px rgba(255,174,61,0.65),
    0 0 32px rgba(255,140,40,0.35),
    0 2px 0 rgba(0,0,0,0.6),
    0 6px 18px rgba(0,0,0,0.45);
}
/* Reduce motion — fade instead of fly, half duration. */
@media (prefers-reduced-motion: reduce) {
  .game-stinger.show { animation: gameStingerFadeOnly 450ms ease-out forwards; }
  @keyframes gameStingerFadeOnly {
    0% { opacity: 0; transform: scale(0.9) rotate(-2deg); }
    20%, 70% { opacity: 1; transform: scale(1.0) rotate(-2deg); }
    100% { opacity: 0; transform: scale(0.98) rotate(-2deg); }
  }
}

/* ═══════════════════════════════════════════
 * Phase B v73 — In-Game HUD (screen_game.jsx port)
 * Scoped to .elev-game — preserves canvas + game loop + animations.
 * ═══════════════════════════════════════════ */

/* "Longest line" progress strip */
.elev-game-chain-strip {
  position: absolute;
  top: calc(env(safe-area-inset-top, 12px) + 58px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: rgba(20,23,35,0.94);
  border: 1px solid rgba(56,61,106,0.42);
  border-radius: 14px;
  z-index: 10;
  min-width: 220px;
  max-width: calc(100% - 32px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  pointer-events: none;
  opacity: 0.94;
  transition: opacity 0.4s ease;
}
.hud-fade .elev-game-chain-strip {
  opacity: 0.22;
}
.elev-game-chain-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(160,170,200,0.65);
  text-transform: uppercase;
  font-weight: 700;
  flex-shrink: 0;
}
.elev-game-chain-segs {
  flex: 1;
  display: flex;
  gap: 3px;
  min-width: 90px;
}
.elev-game-chain-seg {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.elev-game-chain-count {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Active player subtle polish — elevated drop shadow on active HUD card */
.elev-game .hud-player.active {
  box-shadow: 0 0 18px var(--accent-glow, rgba(124,111,247,0.45)),
              0 2px 12px rgba(0,0,0,0.24),
              inset 0 0 12px rgba(124,111,247,0.06) !important;
}

/* Mobile: shift strip below the hud-top pill */
@media (max-width: 480px) {
  .elev-game-chain-strip {
    top: calc(env(safe-area-inset-top, 10px) + 50px);
    padding: 6px 10px;
    min-width: 200px;
  }
  .elev-game-chain-label { font-size: 8px; letter-spacing: 1.5px; }
  .elev-game-chain-count { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   v74 — Matchmaking screen (Quick Match overlay port)
   Source: design-exports/src/screen_matchmaking.jsx
   ═══════════════════════════════════════════════════════════ */

.elev-mm-overlay {
  /* Inherits .modal-overlay positioning; we style the inner card. */
}

.elev-mm-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 32px 22px 22px;
  background: linear-gradient(180deg, rgba(20,23,41,0.96) 0%, rgba(13,15,28,0.98) 100%);
  border: 1px solid var(--elev-line, rgba(255,255,255,0.06));
  border-radius: var(--elev-r3, 20px);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(139,124,255,0.08),
    0 0 50px rgba(139,124,255,0.18);
  overflow: hidden;
  isolation: isolate;
}

/* decorative nebula blobs behind card content */
.elev-mm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 320px at 10% -10%, rgba(139,124,255,0.18), transparent 60%),
    radial-gradient(360px 280px at 110% 110%, rgba(255,124,196,0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.elev-mm-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.elev-mm-head { text-align: center; }
.elev-mm-kicker {
  font-family: var(--elev-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--elev-primary, #8b7cff);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.elev-mm-title {
  font-family: var(--elev-font, "Space Grotesk", sans-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--elev-ink, #f5f6ff);
  line-height: 1.15;
}
.elev-mm-sub {
  font-family: var(--elev-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
  color: var(--elev-ink-dim, #a4a9c9);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.elev-mm-loader-mount {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stat pills row (RANGE / REGION / AVG WAIT) */
.elev-mm-stats {
  display: flex;
  gap: 8px;
  width: 100%;
}
.elev-mm-pill {
  flex: 1;
  padding: 10px 12px;
  background: var(--elev-bg2, #141729);
  border: 1px solid var(--elev-line, rgba(255,255,255,0.06));
  border-top: 2px solid var(--elev-primary, #8b7cff);
  border-radius: var(--elev-r2, 14px);
  min-width: 0;
}
.elev-mm-pill--cyan   { border-top-color: var(--elev-cyan, #62e9ff); }
.elev-mm-pill--mint   { border-top-color: var(--elev-mint, #4dd6a8); }
.elev-mm-pill-label {
  font-family: var(--elev-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--elev-ink-mute, #6a6f8f);
  text-transform: uppercase;
}
.elev-mm-pill-val {
  font-family: var(--elev-font, "Space Grotesk", sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--elev-ink, #f5f6ff);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Candidate avatars strip */
.elev-mm-candidates {
  width: 100%;
  padding: 14px;
  background: var(--elev-bg2, #141729);
  border: 1px solid var(--elev-line, rgba(255,255,255,0.06));
  border-radius: var(--elev-r3, 20px);
}
.elev-mm-candidates-head {
  font-family: var(--elev-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--elev-ink-mute, #6a6f8f);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.elev-mm-candidates-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* v153: hex SVG candidate slot (was circular emoji chip).
   Renders an outlined hex; fills purple with subtle glow when .on. */
.elev-mm-chip {
  width: 28px;
  height: 32px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  opacity: 0.55;
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}
.elev-mm-chip svg { width: 100%; height: 100%; display: block; }
.elev-mm-chip svg polygon {
  fill: transparent;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 1;
  transition: fill 0.4s ease, stroke 0.4s ease;
}
.elev-mm-chip.on {
  opacity: 1;
  transform: scale(1.04);
  filter: drop-shadow(0 0 4px rgba(124,111,247,0.55));
}
.elev-mm-chip.on svg polygon {
  fill: rgba(124,111,247,0.42);
  stroke: rgba(139,124,255,0.85);
}

/* Player-count picker (setup phase) */
.elev-mm-picker {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.elev-mm-picker-btn {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--elev-bg2, #141729);
  border: 1px solid var(--elev-line, rgba(255,255,255,0.06));
  color: var(--elev-ink-dim, #a4a9c9);
  font-family: var(--elev-mono, "JetBrains Mono", ui-monospace, monospace);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
}
.elev-mm-picker-btn:hover { transform: translateY(-1px); }
.elev-mm-picker-btn.active {
  background: color-mix(in srgb, var(--elev-primary, #8b7cff) 14%, transparent);
  border-color: var(--elev-primary, #8b7cff);
  color: var(--elev-ink, #f5f6ff);
  box-shadow: 0 6px 18px rgba(139,124,255,0.28);
}

/* Primary CTA (search) */
.elev-mm-cta {
  position: relative;
  width: 100%;
  height: 56px;
  border: none;
  cursor: pointer;
  border-radius: var(--elev-r3, 20px);
  color: #1a1105;
  font-family: var(--elev-font, "Space Grotesk", sans-serif);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.6px;
  background: linear-gradient(135deg, #ff8a4c 0%, #ffc857 100%);
  box-shadow:
    0 2px 0 rgba(120,50,10,0.5),
    0 14px 30px rgba(255,138,76,0.35);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.elev-mm-cta[disabled] { opacity: 0.6; cursor: not-allowed; }

.elev-mm-secondary {
  height: 44px;
  padding: 0 26px;
  border-radius: var(--elev-r2, 14px);
  border: 1px solid var(--elev-line, rgba(255,255,255,0.06));
  background: transparent;
  color: var(--elev-ink-dim, #a4a9c9);
  font-family: var(--elev-font, "Space Grotesk", sans-serif);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.elev-mm-secondary:hover {
  color: var(--elev-ink, #f5f6ff);
  border-color: var(--elev-line-strong, rgba(255,255,255,0.12));
  background: rgba(255,255,255,0.03);
}

/* Opponent found card */
.elev-mm-opp {
  width: 100%;
  padding: 16px;
  background: var(--elev-bg2, #141729);
  border: 1px solid var(--elev-line, rgba(255,255,255,0.06));
  border-radius: var(--elev-r3, 20px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: elevMmOppIn 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
@keyframes elevMmOppIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.elev-mm-opp-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.elev-mm-opp-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--elev-bg3, #1d2140);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border: 1px solid var(--elev-line-strong, rgba(255,255,255,0.12));
  flex-shrink: 0;
}
.elev-mm-opp-meta { flex: 1; min-width: 0; }
.elev-mm-opp-name {
  font-family: var(--elev-font, "Space Grotesk", sans-serif);
  font-weight: 800;
  font-size: 17px;
  color: var(--elev-ink, #f5f6ff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elev-mm-opp-rank {
  font-family: var(--elev-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  color: var(--elev-ink-dim, #a4a9c9);
  margin-top: 2px;
  letter-spacing: 0.5px;
}
.elev-mm-opp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.elev-mm-opp-stat {
  text-align: center;
  padding: 8px 4px;
  background: var(--elev-bg3, #1d2140);
  border: 1px solid var(--elev-line, rgba(255,255,255,0.06));
  border-radius: 10px;
}
.elev-mm-opp-stat-val {
  font-family: var(--elev-font, "Space Grotesk", sans-serif);
  font-weight: 800;
  font-size: 18px;
  color: var(--elev-ink, #f5f6ff);
}
.elev-mm-opp-stat-val--accent { color: var(--elev-primary, #8b7cff); }
.elev-mm-opp-stat-val--gold   { color: var(--elev-gold, #ffc857); }
.elev-mm-opp-stat-label {
  font-family: var(--elev-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 9px;
  color: var(--elev-ink-mute, #6a6f8f);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

.elev-mm-found-kicker {
  font-family: var(--elev-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--elev-mint, #4dd6a8);
  text-transform: uppercase;
  text-align: center;
}

/* Countdown phase */
.elev-mm-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0 4px;
}
.elev-mm-countdown-label {
  font-family: var(--elev-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--elev-primary, #8b7cff);
  text-transform: uppercase;
  text-align: center;
}

/* Phase visibility — simple scoped show/hide */
.elev-mm-phase { width: 100%; display: none; flex-direction: column; align-items: center; gap: 22px; }
.elev-mm-phase.is-active { display: flex; }

/* CSS custom prop aliases → match HB tokens */
.elev-mm-card {
  --elev-primary: #8b7cff;
  --elev-cyan: #62e9ff;
  --elev-mint: #4dd6a8;
  --elev-gold: #ffc857;
  --elev-ink: #f5f6ff;
  --elev-ink-dim: #a4a9c9;
  --elev-ink-mute: #6a6f8f;
  --elev-bg2: #141729;
  --elev-bg3: #1d2140;
  --elev-line: rgba(255,255,255,0.06);
  --elev-line-strong: rgba(255,255,255,0.12);
  --elev-font: "Space Grotesk", -apple-system, system-ui, sans-serif;
  --elev-mono: "JetBrains Mono", ui-monospace, monospace;
  --elev-r2: 14px;
  --elev-r3: 20px;
}

@media (max-width: 420px) {
  .elev-mm-card { padding: 24px 16px 18px; max-width: 92vw; }
  .elev-mm-title { font-size: 22px; }
  .elev-mm-loader-mount { min-height: 200px; }
}

/* ═══════════════════════════════════════════════════════════
   v75 — Profile full body (tabbed: Overview / Achievements / Settings)
   Source: design-exports/src/screen_profile.jsx
   ═══════════════════════════════════════════════════════════ */

/* Tab switcher — segmented control */
.elev-pf-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  background: #141729;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
}
.elev-pf-tab {
  flex: 1;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: #a4a9c9;
  font-family: "Space Grotesk", -apple-system, system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.elev-pf-tab:hover { color: #f5f6ff; }
.elev-pf-tab.active {
  background: #8b7cff;
  color: #fff;
  box-shadow: 0 4px 14px rgba(139,124,255,0.35);
}

/* Tab panes */
.elev-pf-pane { display: none; flex-direction: column; gap: 18px; }
.elev-pf-pane.is-active { display: flex; }

/* Section header (reused) */
.elev-pf-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.elev-pf-section-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: #6a6f8f;
  text-transform: uppercase;
}
.elev-pf-section-action {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: #8b7cff;
  letter-spacing: 1px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}
.elev-pf-section-action:hover { color: #f5f6ff; }

/* Recent form strip */
.elev-pf-form {
  padding: 14px;
  background: #141729;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 4px;
}
.elev-pf-form-cell {
  flex: 1;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 12px;
}
.elev-pf-form-cell--w {
  background: rgba(77,214,168,0.13);
  border: 1px solid rgba(77,214,168,0.33);
  color: #4dd6a8;
}
.elev-pf-form-cell--l {
  background: rgba(255,107,107,0.13);
  border: 1px solid rgba(255,107,107,0.33);
  color: #ff6b6b;
}
.elev-pf-form-cell--none {
  background: #1d2140;
  border: 1px solid rgba(255,255,255,0.06);
  color: #6a6f8f;
}

/* Achievements preview grid (Overview tab) */
.elev-pf-ach-preview {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.elev-pf-ach-chip {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
  background: #1d2140;
  border: 1px solid rgba(255,255,255,0.06);
  opacity: 0.35;
  filter: grayscale(1);
}
.elev-pf-ach-chip.is-unlocked {
  opacity: 1;
  filter: none;
}
.elev-pf-ach-chip[data-color]{
  /* overridden per-element via inline style when unlocked */
}

/* Loadout row (3 equipped slots + shop button) */
.elev-pf-loadout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.elev-pf-slot {
  position: relative;
  padding: 12px 10px;
  background: #141729;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  overflow: hidden;
}
.elev-pf-slot::before {
  content: "";
  position: absolute;
  top: -10px; right: -10px;
  width: 50px; height: 50px;
  background: radial-gradient(circle, var(--slot-color, rgba(139,124,255,0.2)), transparent);
  pointer-events: none;
}
.elev-pf-slot-icon { font-size: 28px; position: relative; }
.elev-pf-slot-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #6a6f8f;
  margin-top: 4px;
  text-transform: uppercase;
  position: relative;
}
.elev-pf-slot-name {
  font-family: "Space Grotesk", -apple-system, system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #f5f6ff;
  margin-top: 1px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shop button (inline action) */
.elev-pf-shop-btn {
  background: #8b7cff;
  color: #fff;
  border: none;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(139,124,255,0.3);
}
.elev-pf-shop-btn:hover { filter: brightness(1.08); }

/* Achievements list (full tab) */
.elev-pf-ach-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.elev-pf-ach-row {
  padding: 12px;
  background: #141729;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid var(--ach-color, #8b7cff);
  display: flex;
  align-items: center;
  gap: 12px;
}
.elev-pf-ach-row.is-unlocked {
  border-color: color-mix(in srgb, var(--ach-color, #8b7cff) 40%, transparent);
  border-left-color: var(--ach-color, #8b7cff);
}
.elev-pf-ach-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #1d2140;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  filter: grayscale(1) opacity(0.6);
  flex-shrink: 0;
}
.elev-pf-ach-row.is-unlocked .elev-pf-ach-icon {
  background: color-mix(in srgb, var(--ach-color, #8b7cff) 13%, transparent);
  border-color: var(--ach-color, #8b7cff);
  filter: none;
}
.elev-pf-ach-body { flex: 1; min-width: 0; }
.elev-pf-ach-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.elev-pf-ach-title {
  font-weight: 700;
  font-size: 13px;
  color: #f5f6ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.elev-pf-ach-badge {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  color: var(--ach-color, #8b7cff);
  letter-spacing: 1px;
  flex-shrink: 0;
}
.elev-pf-ach-desc {
  font-size: 11px;
  color: #6a6f8f;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  margin-top: 1px;
}
.elev-pf-ach-bar {
  margin-top: 6px;
  height: 4px;
  background: #2a2f52;
  border-radius: 2px;
  overflow: hidden;
}
.elev-pf-ach-fill {
  height: 100%;
  background: var(--ach-color, #8b7cff);
  border-radius: 2px;
  transition: width 0.35s ease;
}
.elev-pf-ach-row.is-unlocked .elev-pf-ach-fill {
  box-shadow: 0 0 8px var(--ach-color, #8b7cff);
}
.elev-pf-ach-counts {
  margin-top: 3px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  color: #6a6f8f;
  letter-spacing: 1px;
}

@media (max-width: 400px) {
  .elev-pf-ach-preview { grid-template-columns: repeat(6, 1fr); }
  .elev-pf-loadout { grid-template-columns: 1fr 1fr; }
  .elev-pf-slot:last-child { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════
   v76 — FRIENDS FULL BODY (design port)
   Everything scoped under .elev-friends so no global bleed.
   ═══════════════════════════════════════════════════════════ */

/* Row base — used for friends / recently-played list rows */
.elev-friends .elev-fr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 8px 12px;
  background: linear-gradient(135deg, rgba(20, 22, 42, 0.55), rgba(15, 17, 35, 0.4));
  border: 1px solid rgba(139, 124, 255, 0.14);
  border-radius: 14px;
  position: relative;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.elev-friends .elev-fr-row:hover {
  background: linear-gradient(135deg, rgba(32, 34, 62, 0.65), rgba(24, 26, 50, 0.5));
  border-color: rgba(139, 124, 255, 0.32);
}
.elev-friends .elev-fr-row.is-online {
  border-color: rgba(77, 214, 168, 0.28);
}
.elev-friends .elev-fr-row.is-online::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: linear-gradient(180deg, #4dd6a8, #62e9ff);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(77, 214, 168, 0.55);
}
.elev-friends .elev-fr-avatar {
  position: relative;
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139, 124, 255, 0.18), rgba(98, 233, 255, 0.1));
  border: 1px solid rgba(139, 124, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}
.elev-friends .elev-fr-dot {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #0f1123;
  background: #4a4e6a;
}
.elev-friends .elev-fr-dot.is-online {
  background: #4dd6a8;
  box-shadow: 0 0 6px rgba(77, 214, 168, 0.75);
}
.elev-friends .elev-fr-dot.is-recent {
  background: #ffc857;
  box-shadow: 0 0 5px rgba(255, 200, 87, 0.55);
}
.elev-friends .elev-fr-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.elev-friends .elev-fr-name {
  font-weight: 700;
  font-size: 14px;
  color: #e8ecff;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.elev-friends .elev-fr-status {
  font-size: 11px;
  color: #8a90b4;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.elev-friends .elev-fr-status.is-online { color: #4dd6a8; }
.elev-friends .elev-fr-status.is-in-game { color: #62e9ff; }
.elev-friends .elev-fr-streak {
  font-size: 10px;
  color: #ffc857;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.5px;
}

/* Action buttons — color-coded per design */
.elev-friends .elev-fr-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.elev-friends .elev-fr-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
  font-family: inherit;
  white-space: nowrap;
}
.elev-friends .elev-fr-action:active { transform: scale(0.96); }
.elev-friends .elev-fr-action--challenge {
  background: linear-gradient(135deg, #8b7cff, #6d5fd6);
  color: #fff;
  box-shadow: 0 0 12px rgba(139, 124, 255, 0.35);
}
.elev-friends .elev-fr-action--challenge:hover {
  box-shadow: 0 0 16px rgba(139, 124, 255, 0.55);
}
.elev-friends .elev-fr-action--spectate {
  background: rgba(98, 233, 255, 0.12);
  color: #62e9ff;
  border-color: rgba(98, 233, 255, 0.35);
}
.elev-friends .elev-fr-action--spectate:hover {
  background: rgba(98, 233, 255, 0.22);
}
.elev-friends .elev-fr-action--join {
  background: rgba(77, 214, 168, 0.15);
  color: #4dd6a8;
  border-color: rgba(77, 214, 168, 0.38);
}
.elev-friends .elev-fr-action--join:hover {
  background: rgba(77, 214, 168, 0.25);
  box-shadow: 0 0 12px rgba(77, 214, 168, 0.35);
}
.elev-friends .elev-fr-action--message {
  background: rgba(139, 124, 255, 0.12);
  color: #8b7cff;
  border-color: rgba(139, 124, 255, 0.32);
}
.elev-friends .elev-fr-action--ghost {
  background: transparent;
  color: #8a90b4;
  border-color: rgba(139, 124, 255, 0.18);
  width: 32px;
  padding: 0;
}
.elev-friends .elev-fr-action--ghost:hover {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.35);
  background: rgba(255, 107, 107, 0.08);
}

/* Feed items — left border + hex stamp icon */
.elev-friends .elev-fr-feed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 12px;
  padding: 11px 14px 11px 16px;
  background: linear-gradient(135deg, rgba(20, 22, 42, 0.5), rgba(15, 17, 35, 0.35));
  border: 1px solid rgba(139, 124, 255, 0.12);
  border-left: 3px solid var(--feed-accent, #8b7cff);
  border-radius: 12px;
  position: relative;
}
.elev-friends .elev-fr-feed-item.is-win { --feed-accent: #4dd6a8; }
.elev-friends .elev-fr-feed-item.is-loss { --feed-accent: #ff6b6b; }
.elev-friends .elev-fr-feed-item.is-online { --feed-accent: #62e9ff; }
.elev-friends .elev-fr-feed-item.is-rank { --feed-accent: #ffc857; }
.elev-friends .elev-fr-feed-stamp {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.elev-friends .elev-fr-feed-stamp svg {
  width: 28px; height: 28px;
  filter: drop-shadow(0 0 4px var(--feed-accent, rgba(139, 124, 255, 0.6)));
}
.elev-friends .elev-fr-feed-emoji {
  position: absolute;
  font-size: 13px;
  line-height: 1;
}
.elev-friends .elev-fr-feed-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #e8ecff;
  letter-spacing: 0.15px;
}
.elev-friends .elev-fr-feed-text b {
  font-weight: 700;
  color: #fff;
}
.elev-friends .elev-fr-feed-time {
  font-size: 10px;
  color: #6a6f8f;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Leaderboard / bulletin rows */
.elev-friends .elev-fr-bulletin {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.06), rgba(20, 22, 42, 0.5));
  border: 1px solid rgba(255, 200, 87, 0.22);
  border-radius: 14px;
  position: relative;
}
.elev-friends .elev-fr-bulletin-body {
  flex: 1;
  min-width: 0;
}
.elev-friends .elev-fr-bulletin-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.elev-friends .elev-fr-bulletin-name {
  font-weight: 700;
  font-size: 13px;
  color: #e8ecff;
}
.elev-friends .elev-fr-bulletin-time {
  font-size: 10px;
  color: #6a6f8f;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.5px;
}
.elev-friends .elev-fr-bulletin-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: #8a90b4;
  letter-spacing: 0.2px;
}

/* Requests — rows with accept/decline */
.elev-friends .elev-fr-req-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(77, 214, 168, 0.06), rgba(20, 22, 42, 0.5));
  border: 1px solid rgba(77, 214, 168, 0.2);
  border-radius: 14px;
}
.elev-friends .elev-fr-req-accept {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 14px;
  background: linear-gradient(135deg, #4dd6a8, #3cb88c);
  color: #06201a;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(77, 214, 168, 0.4);
  font-family: inherit;
}
.elev-friends .elev-fr-req-accept:hover {
  box-shadow: 0 0 18px rgba(77, 214, 168, 0.6);
}
.elev-friends .elev-fr-req-reject {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  color: #8a90b4;
  border: 1px solid rgba(139, 124, 255, 0.22);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.elev-friends .elev-fr-req-reject:hover {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.4);
  background: rgba(255, 107, 107, 0.08);
}

/* Add friend — friend-code card + input card */
.elev-friends .elev-fr-addwrap {
  padding: 14px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.elev-friends .elev-fr-addcard {
  padding: 16px;
  background: linear-gradient(135deg, rgba(20, 22, 42, 0.55), rgba(15, 17, 35, 0.4));
  border: 1px solid rgba(139, 124, 255, 0.18);
  border-radius: 16px;
}
.elev-friends .elev-fr-addcard-label {
  font-size: 10px;
  font-weight: 700;
  color: #8a90b4;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.elev-friends .elev-fr-codewrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.elev-friends .elev-fr-code {
  flex: 1;
  padding: 14px 16px;
  background: rgba(10, 12, 28, 0.55);
  border: 1px dashed rgba(139, 124, 255, 0.38);
  border-radius: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 17px;
  font-weight: 700;
  color: #8b7cff;
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
}
.elev-friends .elev-fr-code-copy {
  padding: 0 18px;
  height: 48px;
  background: rgba(139, 124, 255, 0.14);
  color: #8b7cff;
  border: 1px solid rgba(139, 124, 255, 0.3);
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
}
.elev-friends .elev-fr-code-copy:hover {
  background: rgba(139, 124, 255, 0.22);
}
.elev-friends .elev-fr-addrow {
  display: flex;
  gap: 8px;
}
.elev-friends .elev-fr-addinput {
  flex: 1;
  padding: 12px 14px;
  background: rgba(10, 12, 28, 0.55);
  border: 1px solid rgba(139, 124, 255, 0.22);
  border-radius: 12px;
  color: #e8ecff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.2px;
  outline: none;
  transition: border-color 0.15s ease;
}
.elev-friends .elev-fr-addinput:focus {
  border-color: rgba(139, 124, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(139, 124, 255, 0.12);
}
.elev-friends .elev-fr-addsend {
  padding: 0 18px;
  background: linear-gradient(135deg, #8b7cff, #6d5fd6);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.4px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 0 12px rgba(139, 124, 255, 0.3);
}
.elev-friends .elev-fr-addsend:hover {
  box-shadow: 0 0 18px rgba(139, 124, 255, 0.5);
}

/* Section headers (for tabs with top CTA like bulletin) */
.elev-friends .elev-fr-section-head {
  padding: 12px 14px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.elev-friends .elev-fr-section-title {
  font-size: 10px;
  font-weight: 700;
  color: #8a90b4;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.elev-friends .elev-fr-post-cta {
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.18), rgba(255, 200, 87, 0.08));
  color: #ffc857;
  border: 1px solid rgba(255, 200, 87, 0.32);
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  cursor: pointer;
  font-family: inherit;
}
.elev-friends .elev-fr-post-cta:hover {
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.28), rgba(255, 200, 87, 0.14));
}

@media (max-width: 400px) {
  .elev-friends .elev-fr-action {
    padding: 0 8px;
    font-size: 11px;
  }
  .elev-friends .elev-fr-code {
    font-size: 14px;
    letter-spacing: 2.5px;
    padding: 12px 10px;
  }
}

/* ═══════════════════════════════════════════════════════════
   v77 — IN-GAME PLAYER HUD polish (design port)
   Layers on top of existing .hud-player without rewriting the
   markup or removing any functional pills (chain/effect/skin/bot).
   ═══════════════════════════════════════════════════════════ */

/* Active player — nebula glow + left accent rail */
.hud-player.active {
  position: relative;
  background: linear-gradient(135deg, rgba(139, 124, 255, 0.12), rgba(20, 23, 35, 0.94)) !important;
  box-shadow:
    0 0 20px rgba(139, 124, 255, 0.35),
    0 0 40px rgba(98, 233, 255, 0.12),
    0 2px 12px rgba(0, 0, 0, 0.3) !important;
}
.hud-player.active::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #8b7cff, #62e9ff);
  box-shadow: 0 0 8px rgba(139, 124, 255, 0.7);
  animation: hudActiveRail 1.8s ease-in-out infinite;
}
@keyframes hudActiveRail {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; transform: scaleY(1.04); }
}

/* Turn timer — upgrade the fixed pill into an animated glass pill */
.turn-timer {
  background: linear-gradient(135deg, rgba(139, 124, 255, 0.18), rgba(10, 12, 28, 0.75)) !important;
  border: 1px solid rgba(139, 124, 255, 0.35) !important;
  color: #e8ecff !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 0 12px rgba(139, 124, 255, 0.25);
}

/* Subtle pulse on the active player's dot */
.hud-player.active .dot {
  animation: hudDotPulse 1.4s ease-in-out infinite;
}
@keyframes hudDotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* Emoji chip — give the emoji a subtle container glow so it reads as a chip */
.hud-player > span[style*="font-size:14px"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: rgba(139, 124, 255, 0.1);
  border: 1px solid rgba(139, 124, 255, 0.2);
  line-height: 1;
}
.hud-player.active > span[style*="font-size:14px"] {
  background: rgba(98, 233, 255, 0.15);
  border-color: rgba(98, 233, 255, 0.35);
  box-shadow: 0 0 6px rgba(98, 233, 255, 0.35);
}

/* Bot badge pill — more design-accurate */
.hud-player span[style*="background:rgba(124,111,247,0.25)"] {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

/* When it's someone else's turn, dim non-active HUD players slightly */
.hud-players:has(.hud-player.active) .hud-player:not(.active) {
  opacity: 0.78;
  transition: opacity 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════
   v79/v81 nav + player-picker override blocks removed in v83.
   All nav + player-count + in-game HUD styling is now owned by
   the consolidated v83 block at the end of this file.
   ═══════════════════════════════════════════════════════════ */

/* v81 block removed in v83 — cosmic-glass styling replaced by
   the consolidated flat-design block at the end of this file. */

/* ═══════════════════════════════════════════════════════════
   v83 — ELEVATED NAV + HUD OVERLAP PASS
   Final, consolidated nav + player-count + in-game HUD block.
   Matches Claude Design JSX (theme.jsx, ui.jsx, screen_home.jsx,
   screen_game.jsx) — flat dark panels (#141729), 1px line
   borders, #8b7cff active. Navbar is visually elevated (shadow,
   breathing height) and fully responsive: mobile / tablet / PC.
   In-game HUD has overlap guards for every breakpoint.
   ═══════════════════════════════════════════════════════════ */

/* ── Lobby nav — ELEVATED flat panel with purple active pill ── */
/* Container: dark panel, outlined, subtle lift shadow so the nav
   reads as a floating card rather than a cramped strip.
   `overflow: visible` defeats the legacy `overflow-x:auto` that
   was swallowing taps on some tabs. */
#lobby .lobby-nav,
#lobby.elev-home .elev-home-nav {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px !important;
  gap: 4px !important;
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.03) inset,
    0 10px 28px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: 68px; /* v153.42 — bumped from 60 to fit icon + label */
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: auto !important;
  flex-wrap: nowrap !important;
  position: relative;
  z-index: 5;
}

/* Each tab — equal flex share, centered, no fixed px width so it
   adapts from phone (7 tabs ≈ 46px) to tablet (≈ 62px) to PC.
   v153.42 — Switched from row to column layout to make room for the
   small text label under each icon. Without labels new users couldn't
   tell shop from settings from stats. */
#lobby.elev-home .elev-home-nav .lobby-nav-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 56px !important;
  padding: 6px 2px 4px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: #a4a9c9 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease !important;
  position: relative;
  cursor: pointer;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(139, 124, 255, 0.25);
  z-index: 1;
}
/* Make sure the SVG inside the button doesn't intercept the tap
   with a different pointer target. */
#lobby.elev-home .elev-home-nav .lobby-nav-btn svg,
#lobby.elev-home .elev-home-nav .lobby-nav-btn .lobby-nav-icon {
  pointer-events: none !important;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn .lobby-nav-label {
  display: block !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
  color: inherit !important;
  opacity: 0.85 !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn .lobby-nav-icon {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2 !important;
  color: currentColor !important;
  filter: none !important;
  flex-shrink: 0 !important;
  transition: transform 0.12s ease;
}
/* v153.135 — Profile button now shows the user's avatar instead of a
   shield. Same 20×20 footprint as the SVG nav icons so the layout
   doesn't shift, with a slight emoji scale-up since 20px emojis read
   smaller than 20px line icons. */
#lobby.elev-home .elev-home-nav .lobby-nav-btn .lobby-nav-avatar {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.12s ease;
  pointer-events: none !important;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn .lobby-nav-avatar svg {
  display: block;
  pointer-events: none !important;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn .lobby-nav-avatar-emoji {
  font-size: 18px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
  pointer-events: none !important;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn:hover .lobby-nav-avatar {
  transform: translateY(-1px) scale(1.05);
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f5f6ff !important;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn:hover .lobby-nav-icon {
  transform: translateY(-1px);
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn:active {
  transform: scale(0.95);
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn.active {
  background: #8b7cff !important;
  color: #fff !important;
  box-shadow:
    0 4px 14px rgba(139, 124, 255, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  border: none !important;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn.active::after {
  display: none !important;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn.active .lobby-nav-icon {
  color: #fff !important;
  filter: none !important;
}

/* Avatar chip overlaid on the Profile tab when user has profile */
#lobby.elev-home .elev-home-nav .lobby-nav-btn .lobby-nav-avatar-chip,
.lobby-nav-avatar-chip {
  position: absolute;
  top: 3px !important;
  right: 5px !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 9px !important;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(139, 124, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 0 4px rgba(139, 124, 255, 0.5) !important;
  pointer-events: none;
}

/* Nav-badge unread dot (friends / requests) */
#lobby.elev-home .elev-home-nav .lobby-nav-btn.nav-badge::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 6px rgba(255, 107, 107, 0.8);
  display: none;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn.nav-badge.has-unread::before {
  display: block;
}

/* ── Nav RESPONSIVE BREAKPOINTS ── */
/* Tiny phones (iPhone SE 320px): keep nav from squashing */
@media (max-width: 360px) {
  #lobby .lobby-nav,
  #lobby.elev-home .elev-home-nav {
    padding: 5px !important;
    gap: 2px !important;
    border-radius: 16px !important;
    min-height: 54px;
  }
  #lobby.elev-home .elev-home-nav .lobby-nav-btn {
    height: 44px !important;
    border-radius: 11px !important;
  }
  #lobby.elev-home .elev-home-nav .lobby-nav-btn .lobby-nav-icon {
    width: 18px !important;
    height: 18px !important;
  }
}
/* Standard phones */
@media (min-width: 361px) and (max-width: 480px) {
  #lobby.elev-home .elev-home-nav .lobby-nav-btn {
    height: 46px !important;
  }
}
/* Tablet — more breathing room, bigger tap targets */
@media (min-width: 769px) {
  #lobby .lobby-nav,
  #lobby.elev-home .elev-home-nav {
    padding: 8px !important;
    gap: 6px !important;
    border-radius: 20px !important;
    min-height: 68px;
  }
  #lobby.elev-home .elev-home-nav .lobby-nav-btn {
    height: 52px !important;
    border-radius: 14px !important;
  }
  #lobby.elev-home .elev-home-nav .lobby-nav-btn .lobby-nav-icon {
    width: 22px !important;
    height: 22px !important;
  }
}
/* Desktop / iPad Pro */
@media (min-width: 1024px) {
  #lobby .lobby-nav,
  #lobby.elev-home .elev-home-nav {
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 22px !important;
    min-height: 76px;
    box-shadow:
      0 2px 0 rgba(255, 255, 255, 0.04) inset,
      0 14px 40px rgba(0, 0, 0, 0.45) !important;
  }
  #lobby.elev-home .elev-home-nav .lobby-nav-btn {
    height: 56px !important;
    border-radius: 15px !important;
  }
  #lobby.elev-home .elev-home-nav .lobby-nav-btn .lobby-nav-icon {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ── Player count hex tiles — exact HexTile design (pointy-top hex SVG) ── */
.elev-home-player-count {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 4px 0 !important;
  flex-wrap: nowrap !important;
}
.elev-home-player-count-label {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: #6a6f8f !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-right: 4px !important;
}
/* Hex button — transparent; shape comes from the inline SVG */
.elev-home-player-count .qm-player-opt {
  position: relative !important;
  width: 42px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: filter 0.18s ease, transform 0.12s ease !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}
.elev-home-player-count .qm-player-opt .qm-hex-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  display: block !important;
}
.elev-home-player-count .qm-player-opt .qm-hex-shape {
  fill: #1d2140;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
  transition: fill 0.18s ease, stroke 0.18s ease, stroke-width 0.18s ease;
}
.elev-home-player-count .qm-player-opt .qm-hex-label {
  position: relative !important;
  z-index: 1 !important;
  font-family: "Space Grotesk", -apple-system, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #a4a9c9 !important;
  line-height: 1 !important;
  transition: color 0.18s ease !important;
  pointer-events: none;
}
/* hover */
.elev-home-player-count .qm-player-opt:hover .qm-hex-shape {
  fill: #2a2f52;
  stroke: rgba(255, 255, 255, 0.14);
}
.elev-home-player-count .qm-player-opt:hover .qm-hex-label {
  color: #f5f6ff !important;
}
.elev-home-player-count .qm-player-opt:active {
  transform: scale(0.94);
}
/* active */
.elev-home-player-count .qm-player-opt.active {
  filter: drop-shadow(0 0 8px #8b7cff);
}
.elev-home-player-count .qm-player-opt.active .qm-hex-shape {
  fill: #8b7cff;
  stroke: #62e9ff;
  stroke-width: 1.5;
}
.elev-home-player-count .qm-player-opt.active .qm-hex-label {
  color: #fff !important;
}
.elev-home-player-count .qm-player-opt.active::before {
  display: none !important;
  animation: none !important;
}
@media (max-width: 360px) {
  .elev-home-player-count {
    gap: 4px !important;
  }
  .elev-home-player-count .qm-player-opt {
    width: 38px !important;
    height: 44px !important;
  }
  .elev-home-player-count .qm-player-opt .qm-hex-label {
    font-size: 14px !important;
  }
  .elev-home-player-count-label {
    letter-spacing: 1.5px !important;
    margin-right: 2px !important;
  }
}

/* ── Mode tiles — flat dark with inset accent ring ── */
.elev-home-mode-tile {
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  height: 52px !important;
  font-family: "Space Grotesk", -apple-system, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  transition: transform 0.12s ease, filter 0.15s ease !important;
}
.elev-home-mode-tile:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* ── Rank banner card — flat ── */
.elev-home-rank-card {
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
  padding: 14px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Quest tiles (Daily/Tournament/Weekly) — thin outlined ── */
.elev-home-quest-tile {
  border-radius: 14px !important;
  height: 52px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: "Space Grotesk", -apple-system, system-ui, sans-serif !important;
}

/* ── Name input field — flat dark ── */
.elev-home-name-field {
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  height: 52px !important;
  padding: 0 14px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Code/Join row ── */
.elev-home-codejoin {
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  height: 52px !important;
}

/* ── Season strip — flat ── */
.elev-home-season-strip {
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Aux strip — simple ghost pills (unchanged intent, flat) ── */
.elev-home-aux-nav {
  gap: 8px !important;
  margin-top: 2px !important;
}
.elev-home-aux-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #6a6f8f !important;
  font-size: 10px !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 1px !important;
  padding: 5px 11px !important;
  border-radius: 9px !important;
  height: 28px;
}
.elev-home-aux-btn:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #a4a9c9 !important;
}

/* ═══ In-game HUD — flat panels matching screen_game.jsx ═══
   Strip all backdrop-filter glass, gradients, inner sheens.
   Each panel: bg #141729, 1px line border, simple shadow. */

.elev-game .hud-top {
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 8px 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}
.elev-game .hud-top::before {
  display: none !important;
}
.elev-game .hud-top .moves-badge {
  background: rgba(139, 124, 255, 0.12) !important;
  border: 1px solid rgba(139, 124, 255, 0.3) !important;
  color: #d4d9ff !important;
}

.elev-game .hud-room {
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 11px !important;
  padding: 7px 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #a4a9c9 !important;
}
.elev-game .hud-room strong {
  color: #8b7cff !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
}

.elev-game .hud-zoom {
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  gap: 3px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.elev-game .hud-zoom button {
  background: transparent !important;
  color: #f5f6ff !important;
  border-radius: 10px !important;
}
.elev-game .hud-zoom button:hover {
  background: rgba(139, 124, 255, 0.15) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.elev-game .hud-zoom button:active {
  background: rgba(139, 124, 255, 0.25) !important;
  transform: scale(0.92);
}

.elev-game .hud-center {
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  gap: 3px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.elev-game .hud-center button {
  background: transparent !important;
  color: #f5f6ff !important;
  border-radius: 10px !important;
}
.elev-game .hud-center button:hover {
  background: rgba(139, 124, 255, 0.15) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.elev-game .hud-center button:active {
  background: rgba(139, 124, 255, 0.25) !important;
  transform: scale(0.92);
}
.elev-game .hud-center .chat-badge {
  background: #ff6b6b !important;
  box-shadow: 0 0 6px rgba(255, 107, 107, 0.5) !important;
}

/* Player cards — flat, accent border + glow when active */
.elev-game .hud-players .hud-player {
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.25s ease;
}
.elev-game .hud-players .hud-player.active,
.elev-game .hud-players .hud-player.current-turn {
  box-shadow: 0 0 20px rgba(139, 124, 255, 0.2), 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

/* Longest-line / chain strip — flat */
.elev-game .elev-game-chain-strip {
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.elev-game .elev-game-chain-label {
  color: #6a6f8f !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
}

/* Undo button — design variant */
.elev-game .undo-btn {
  background: #1d2140 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f5f6ff !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hex tooltip — flat */
.elev-game .hex-tooltip {
  background: #141729 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  color: #f5f6ff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════
   v83 — In-game HUD OVERLAP GUARDS
   The base HUD is positioned absolutely around the board:
     .hud-room   top-left
     .hud-top    top-center  (max-width: calc(100% - 170px))
     .hud-players top-right (or bottom-right in landscape phone)
     .hud-center bottom-left
     .hud-zoom   bottom-right
     .elev-game-chain-strip  top-center below hud-top
   These rules keep every panel from colliding at any width.
   ═══════════════════════════════════════════════════════════ */

/* v94 — turn indicator lives on the LEFT so it never collides with the
   player column on the right. Room pill stacks below it (see base CSS). */
.elev-game .hud-top {
  left: max(12px, env(safe-area-inset-left, 12px)) !important;
  transform: none !important;
  max-width: calc(60% - 20px) !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden !important;
}

/* Keep the longest-line strip below hud-top and constrain its
   width so it stays between room chip and players column. */
.elev-game .elev-game-chain-strip {
  max-width: calc(100% - 40px) !important;
  width: auto !important;
  box-sizing: border-box;
}

/* Portrait phones — tighter positions, smaller hud-top (left-anchored in v94) */
@media (max-width: 480px) {
  .elev-game .hud-top {
    max-width: calc(55% - 16px) !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
  .elev-game .hud-room {
    padding: 6px 10px !important;
    font-size: 11px !important;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .elev-game .hud-players {
    max-width: 160px;
  }
  .elev-game .elev-game-chain-strip {
    max-width: calc(100% - 28px) !important;
    padding: 6px 10px !important;
  }
}

/* Very small phones — hide the label on the chain strip so the
   6-segment progress never gets clipped. */
@media (max-width: 360px) {
  .elev-game .hud-top {
    max-width: calc(52% - 14px) !important;
    padding: 6px 10px !important;
  }
  .elev-game .hud-room {
    padding: 5px 9px !important;
    max-width: 96px;
  }
  .elev-game .elev-game-chain-strip .elev-game-chain-label {
    display: none !important;
  }
}

/* Landscape phone — players column moves to bottom-right, so we
   have 3 panels competing for the bottom: center-left, players
   center, zoom right. Force them into a single row with gaps
   that do not overlap, and narrow hud-top's top zone. */
@media (orientation: landscape) and (max-height: 500px) {
  .elev-game .hud-top {
    max-width: calc(60% - 16px) !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
  }
  .elev-game .hud-players {
    flex-direction: row !important;
    gap: 4px !important;
    max-width: calc(100% - 160px);
    left: 50%;
    right: auto !important;
    transform: translateX(-50%);
    justify-content: center;
  }
  .elev-game .hud-players .hud-player {
    padding: 5px 9px !important;
    font-size: 11px !important;
  }
  /* Zoom and action bar stay pinned to their corners — shrink
     padding so thumbs don't collide when the board is small. */
  .elev-game .hud-zoom,
  .elev-game .hud-center {
    padding: 3px !important;
  }
}

/* Tablet / iPad — more room; hud-top can be wider. */
@media (min-width: 769px) and (orientation: portrait) {
  .elev-game .hud-top {
    max-width: calc(55% - 20px) !important;
  }
  .elev-game .hud-players {
    max-width: 240px;
  }
}

/* Desktop — left-anchored turn indicator, generous max-width. */
@media (min-width: 1024px) {
  .elev-game .hud-top {
    max-width: calc(50% - 24px) !important;
  }
  .elev-game .hud-players {
    max-width: 280px;
  }
  .elev-game .hud-room {
    max-width: 200px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v84 — LOBBY BREATHING ROOM
   Fix crowding around the edges + give "Your Name" section top
   padding so it isn't jammed against the navbar above it.
═══════════════════════════════════════════════════════════════════ */

/* v97 — reduced top padding so the "Hex Battle" wordmark sits higher on
   screen (still clears the iPhone notch via safe-area-inset-top). */
#lobby.elev-home {
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px calc(env(safe-area-inset-bottom, 0px) + 44px) !important;
  gap: 18px !important;
}

@media (min-width: 600px) {
  #lobby.elev-home {
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 24px calc(env(safe-area-inset-bottom, 0px) + 48px) !important;
    gap: 20px !important;
  }
}

@media (min-width: 769px) {
  #lobby.elev-home {
    padding: calc(env(safe-area-inset-top, 0px) + 26px) 32px calc(env(safe-area-inset-bottom, 0px) + 56px) !important;
    gap: 22px !important;
  }
}

/* Push "Your Name" (and every section header) away from the edges */
#lobby.elev-home .elev-home-section-header {
  margin: 4px 4px 12px 4px !important;
}

/* Name field a touch more inset so the input doesn't hug the rounded edge */
#lobby.elev-home .elev-home-name-field {
  margin: 0 2px !important;
}

/* Stop mode/quest tiles + CTA buttons from touching the panel edge */
#lobby.elev-home .elev-home-browse,
#lobby.elev-home .elev-home-quick-match,
#lobby.elev-home .elev-home-quest-tile,
#lobby.elev-home .elev-home-howtoplay,
#lobby.elev-home .elev-home-resume-bar {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v85 — YOUR NAME SPACING + NAV RESTRUCTURE + POST-GAME FIX
═══════════════════════════════════════════════════════════════════ */

/* Menu card child preserves flex column layout so post-game return from
   showCard('menuCard') doesn't collapse into a crowded block. */
#lobby.elev-home #menuCard {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* "Your Name" section — real breathing room. Wraps the section-header
   + name-field in a proper panel-like block with top margin so it sits
   off the navbar cleanly. */
#lobby.elev-home #menuCard > div:has(> .elev-home-name-field),
#lobby.elev-home .elev-home-name-field {
  box-sizing: border-box;
}

#lobby.elev-home #menuCard .elev-home-section-header {
  margin: 14px 2px 10px 2px !important;
  padding: 0 !important;
}

/* First section header in menuCard — the one above "Your Name" — gets
   extra top-padding so it doesn't hug the navbar/resume banner. */
#lobby.elev-home #menuCard > div:first-of-type .elev-home-section-header,
#lobby.elev-home #menuCard .resume-banner ~ div .elev-home-section-header {
  margin-top: 8px !important;
}

/* Name field stable height + extra inside padding */
#lobby.elev-home .elev-home-name-field {
  margin: 0 2px !important;
  padding: 10px 14px !important;
  min-height: 48px;
}

#lobby.elev-home .elev-home-name-field input {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Admin button in main nav — subtle shield tint so it reads as
   "elevated / admin-only" without screaming. */
#lobby.elev-home .elev-home-nav .lobby-nav-btn.is-admin {
  color: #ffb864 !important;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn.is-admin:hover {
  background: rgba(255, 184, 100, 0.12) !important;
  color: #ffcf8a !important;
}
#lobby.elev-home .elev-home-nav .lobby-nav-btn.is-admin.active {
  background: rgba(255, 184, 100, 0.18) !important;
}

/* Wordmark — give it breathing space from the navbar below */
#lobby.elev-home .elev-home-wordmark {
  margin-bottom: 4px !important;
  padding: 2px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v86 — YOUR NAME center + sub-card full-page feel + nav icon swap
═══════════════════════════════════════════════════════════════════ */

/* Center "Your Name" and every other section header text. Was using
   justify-content:space-between which pushed a single h3 child flush
   left. Center it so it reads balanced above the name input. */
#lobby.elev-home .elev-home-section-header {
  justify-content: center !important;
  text-align: center !important;
}
#lobby.elev-home .elev-home-section-header h3 {
  text-align: center !important;
  width: 100%;
}

/* Sub-card mode (Play vs Bot / Host / Join / Local / Browse) — hide all
   lobby chrome above the active sub-card so it looks like a fresh page
   instead of scrolling through banners. */
#lobby.elev-home.lobby-in-subcard .elev-home-tagline,
#lobby.elev-home.lobby-in-subcard #lobbyStreakBadge,
#lobby.elev-home.lobby-in-subcard #lobbyRankBanner,
#lobby.elev-home.lobby-in-subcard .elev-home-season-card,
#lobby.elev-home.lobby-in-subcard .elev-home-aux-nav,
#lobby.elev-home.lobby-in-subcard .elev-home-wordmark,
#lobby.elev-home.lobby-in-subcard .elev-home-nav {
  display: none !important;
}

/* v89 — Active sub-card becomes a true full-page overlay. Position:fixed
   breaks it out of #lobby's scroll container so "Play vs Bot" feels like
   navigating to a new page instead of scrolling down the home screen.
   Uses same background as the lobby so it reads seamless. */
#lobby.elev-home.lobby-in-subcard .lobby-card:not(#menuCard) {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  overflow-x: hidden;
  /* v93 — top padding respects iPhone notch so the Back button inside the
     sub-card lands inside the touch area, not under the status bar. */
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 20px calc(env(safe-area-inset-bottom, 0px) + 44px);
  margin: 0;
  max-width: none;
  width: 100vw;
  /* v153.1 — 100dvh respects iOS Safari's dynamic viewport (collapsing
     bottom address bar). Was 100vh, which left content hidden behind the
     bar when it expanded. Falls back to 100vh for browsers without dvh. */
  height: 100vh;
  height: 100dvh;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(124,111,247,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(96,165,250,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(244,114,182,0.06) 0%, transparent 60%),
    #13162b;
  animation: subcardSlideIn 0.25s cubic-bezier(0.22, 0.68, 0, 1.1) both;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 600px) {
  #lobby.elev-home.lobby-in-subcard .lobby-card:not(#menuCard) {
    padding: calc(env(safe-area-inset-top, 0px) + 26px) 24px calc(env(safe-area-inset-bottom, 0px) + 48px);
  }
}
@media (min-width: 769px) {
  #lobby.elev-home.lobby-in-subcard .lobby-card:not(#menuCard) {
    padding: calc(env(safe-area-inset-top, 0px) + 30px) 32px calc(env(safe-area-inset-bottom, 0px) + 56px);
  }
}
@keyframes subcardSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   v87 — UNIFIED HEX STYLE SHOP (colors + skins in one grid)
═══════════════════════════════════════════════════════════════════ */

/* Skin cards in the merged grid get a subtle purple rim so they read
   as "premium" vs. the cheaper color cards, without fighting the
   existing equipped-green ring. */
.elev-shop-color-card.is-skin {
  background: linear-gradient(180deg, rgba(109,94,245,0.08) 0%, rgba(29,33,64,0.7) 60%);
  border-color: rgba(165,148,255,0.18);
}
.elev-shop-color-card.is-skin.equipped {
  border-color: #4dd6a8;
}

/* Canvas preview inside a merged tile — keep the hex-size the same as
   the SVG so rows align. */
.elev-shop-color-card.is-skin .shop-preview-canvas {
  display: block;
  margin: 0 auto;
}

/* ═══ v92 — HB Back Button (shared affordance) ══════════════════════
   Ported from Claude Design hb_back_button.jsx. Three variants:
   .hb-back--glass (default) · .hb-back--ghost · .hb-back--pill
   .card-back-btn is also restyled below so existing lobby sub-card
   back buttons inherit the new look automatically. */
.hb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-width: 36px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.1px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: transform .15s cubic-bezier(.2,.8,.3,1), background .18s, box-shadow .18s, border-color .18s;
  /* glass is the default look */
  background: rgba(20, 23, 41, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f5f6ff;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 3px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.hb-back svg { flex-shrink: 0; transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.hb-back:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15); }
.hb-back:hover svg { transform: translateX(-1px); }
.hb-back:active { transform: scale(0.96); }

.hb-back--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(245,246,255,0.85);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.hb-back--ghost:hover { background: rgba(255,255,255,0.06); box-shadow: none; }

.hb-back--pill {
  background: #1d2140;
  border: 1px solid rgba(255,255,255,0.08);
  color: #f5f6ff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.hb-back--pill:hover { background: #2a2f52; box-shadow: 0 6px 18px rgba(0,0,0,0.4); }

.hb-back--sm { height: 32px; min-width: 32px; padding: 0 12px 0 10px; }
.hb-back--lg { height: 44px; min-width: 44px; padding: 0 16px 0 14px; font-size: 14px; }

/* Icon-only: no label = no side padding */
.hb-back--icon { padding: 0; }

/* Upgrade the existing lobby sub-card back buttons to the glass style
   without needing markup changes beyond swapping "← Back" for an SVG. */
.card-back-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 12px !important;
  border-radius: 999px !important;
  font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif !important;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.1px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  background: rgba(20, 23, 41, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #f5f6ff !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 3px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  margin-bottom: 14px !important;
  transition: transform .15s cubic-bezier(.2,.8,.3,1), background .18s, box-shadow .18s;
}
.card-back-btn svg { flex-shrink: 0; transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.card-back-btn:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15); }
.card-back-btn:hover svg { transform: translateX(-1px); }
.card-back-btn:active { transform: scale(0.96); }

/* ═══════════════════════════════════════════════════════════════
   v153.42 — PROGRESSIVE-DISCLOSURE LOBBY (3 user states)
   ─────────────────────────────────────────────────────────────
   Most home-screen clutter is fine for returning users but hostile
   to first-timers (decision paralysis + ranked Quick Match as their
   first match against placement opponents).
   _lobbyJourneyState() picks one of:
     journey-new       — tutorial not done, 0 games
     journey-early     — tutorial done OR played but <5 ranked games
     journey-returning — full UI (5+ ranked games)
   The class is applied to #lobby and these rules show/hide CTAs.
   ═══════════════════════════════════════════════════════════════ */

/* ── journey-new: brand-new download. ONE primary action: tutorial. ──
   Hide everything except identity + tutorial CTA + skip link.
   The tagline + sub still show because they help with first-impression
   marketing copy (App Store reviewer state). */
#lobby.journey-new .elev-home-quick-match,
#lobby.journey-new .elev-home-player-count,
#lobby.journey-new .elev-home-mode-grid,
#lobby.journey-new .elev-home-browse,
#lobby.journey-new .elev-home-quest-tile,
#lobby.journey-new .elev-home-howtoplay,
#lobby.journey-new #lobbyProgressSection,
#lobby.journey-new #lobbyProgressContent,
#lobby.journey-new #lobbyRankBanner,
#lobby.journey-new #lobbyStreakBadge {
  display: none !important;
}
/* v153.82 — Beta Modes section override. The journey-new rule above
   hides .elev-home-quest-tile globally, but the Hex Hunt tile inside
   the Beta drawer uses that same class — without this override, the
   drawer would expand to an empty list. Force the tile inside
   .elev-beta-list to ignore the hide rule for ALL journey states. */
#lobby .elev-beta-list .elev-home-quest-tile {
  display: flex !important;
}
/* Beta section header is also explicitly visible in every journey
   state — it's small + collapsed by default so it doesn't compete
   with the new-user welcome flow but stays discoverable. */
#lobby .elev-beta-section {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════
   v153.82 — New User Welcome Overlay.
   ─────────────────────────────────────────────────────────────
   Full-bleed overlay that fires once on first cold-boot to walk
   the user through (1) name (2) link account [+1000 coins]
   (3) tutorial — plus quick-skip CTAs to Quick Match or Bot.
   ═══════════════════════════════════════════════════════════════ */
.hb-welcome-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 22px 22px;
  background: linear-gradient(180deg, rgba(20,24,56,0.96), rgba(14,18,42,0.96));
  border: 1px solid rgba(124,111,247,0.55);
  border-radius: 22px;
  box-shadow: 0 18px 48px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(98,233,255,0.08) inset;
  text-align: center;
  animation: modalSlideUp .42s cubic-bezier(0.22, 0.68, 0, 1.1);
}
.hb-welcome-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 50%, rgba(98,233,255,0.22), rgba(98,233,255,0));
  color: #62e9ff;
  filter: drop-shadow(0 8px 22px rgba(98,233,255,0.45));
  margin-bottom: -2px;
}
.hb-welcome-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #62e9ff;
  opacity: 0.85;
}
.hb-welcome-title {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', sans-serif);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.01em;
  color: #f5f6ff;
  line-height: 1.05;
  margin-top: 2px;
}
.hb-welcome-sub {
  font-size: 13px;
  color: #a4a9c9;
  line-height: 1.45;
  margin-bottom: 6px;
}
.hb-welcome-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.hb-welcome-step {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #f5f6ff;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.hb-welcome-step.is-action:hover {
  background: rgba(124,111,247,0.12);
  border-color: rgba(124,111,247,0.42);
}
.hb-welcome-step.is-action:active { transform: translateY(1px); }
.hb-welcome-step--primary {
  background: linear-gradient(135deg, rgba(124,111,247,0.22), rgba(255,124,196,0.14));
  border-color: rgba(124,111,247,0.55);
}
.hb-welcome-step--primary:hover {
  background: linear-gradient(135deg, rgba(124,111,247,0.32), rgba(255,124,196,0.20));
}
.hb-welcome-step.is-done {
  background: rgba(107,203,119,0.10);
  border-color: rgba(107,203,119,0.42);
  opacity: 0.85;
}
.hb-welcome-step-icon {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', sans-serif);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
.hb-welcome-step.is-done .hb-welcome-step-icon { color: #6bcb77; }
.hb-welcome-step-body { min-width: 0; }
.hb-welcome-step-title {
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.hb-welcome-step-sub {
  font-size: 12px;
  color: #a4a9c9;
  margin-top: 2px;
  line-height: 1.4;
}
.hb-welcome-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,217,61,0.18);
  color: #ffd93d;
  text-transform: uppercase;
}
.hb-welcome-step-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #cdc4ff;
  white-space: nowrap;
}
.hb-welcome-name-chip {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  margin-left: 2px;
  border-radius: 5px;
  background: rgba(98,233,255,0.14);
  color: #9ce0ee;
  border: 1px solid rgba(98,233,255,0.32);
}

.hb-welcome-skip-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
  justify-content: center;
}
.hb-welcome-skip-label {
  font-size: 11px;
  color: #6a6f8f;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  width: 100%;
  text-align: center;
  margin-bottom: 2px;
}
.hb-welcome-skip-btn {
  flex: 1;
  min-width: 130px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #f5f6ff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hb-welcome-skip-btn:hover {
  background: rgba(124,111,247,0.14);
  border-color: rgba(124,111,247,0.42);
}
.hb-welcome-dismiss {
  margin-top: 6px;
  background: transparent;
  border: none;
  color: #6a6f8f;
  font-size: 11.5px;
  cursor: pointer;
  padding: 4px 8px;
}
.hb-welcome-dismiss:hover { color: #a4a9c9; }
@media (max-width: 380px) {
  .hb-welcome-card { padding: 22px 16px 18px; }
  .hb-welcome-title { font-size: 22px; }
  .hb-welcome-step { padding: 12px 12px; gap: 10px; grid-template-columns: 32px 1fr auto; }
  .hb-welcome-step-cta { display: none; }
}
/* Make the tutorial CTA bigger + warmer for the new-state hero. */
#lobby.journey-new .tutorial-cta {
  padding: 22px 18px !important;
  margin-top: 8px !important;
  background: linear-gradient(135deg, rgba(124, 111, 247, 0.18), rgba(255, 124, 196, 0.14)) !important;
  border: 1.5px solid rgba(124, 111, 247, 0.42) !important;
  box-shadow: 0 8px 32px rgba(124, 111, 247, 0.28) !important;
  animation: jnewPulse 2.4s ease-in-out infinite;
}
#lobby.journey-new .tutorial-cta-icon {
  font-size: 28px !important;
}
#lobby.journey-new .tutorial-cta-title {
  font-size: 17px !important;
}
#lobby.journey-new .tutorial-cta-sub {
  font-size: 13px !important;
}
@keyframes jnewPulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(124, 111, 247, 0.28); }
  50%      { box-shadow: 0 8px 36px rgba(255, 124, 196, 0.34); }
}
/* Skip link: re-style as a friendly "Just play a quick game" alt path
   (NOT the alarming "Skip to Quick Match" wording). */
#lobby.journey-new #lobbyTutorialSkip {
  margin-top: 4px !important;
  opacity: 0.78;
  text-decoration: underline;
  font-size: 12px !important;
}

/* ── journey-early: tutorial done but still learning. Big VS BOT. ──
   Hide tournament + weekly challenge + browse live (returning-player
   features). Hide the CASUAL tile (LOCAL) since it's confusing for
   solo learners. Quick Match + player count visible but secondary. */
#lobby.journey-early #lobbyProgressSection,
#lobby.journey-early #lobbyProgressContent {
  display: none !important;
}
#lobby.journey-early .elev-home-quest-tile {
  display: none !important;
}
#lobby.journey-early .elev-home-browse {
  display: none !important;
}
/* Make VS BOT visually dominant. The mode-grid is ordered VS BOT
   first then LOCAL — we promote VS BOT to a full-row hero and keep
   LOCAL inside its 2x2 next to CREATE ROOM. */
#lobby.journey-early .elev-home-mode-grid:first-of-type {
  grid-template-columns: 1fr !important;
}
#lobby.journey-early .elev-home-mode-grid:first-of-type .elev-home-mode-tile[data-accent="cyan"] {
  font-size: 17px !important;
  padding: 22px !important;
  background: linear-gradient(135deg, rgba(0, 220, 240, 0.18), rgba(124, 111, 247, 0.14)) !important;
  border: 1.5px solid rgba(0, 220, 240, 0.42) !important;
  box-shadow: 0 6px 22px rgba(0, 220, 240, 0.22) !important;
}
#lobby.journey-early .elev-home-mode-grid:first-of-type .elev-home-mode-tile[data-accent="cyan"] .elev-home-mode-tile-icon {
  font-size: 22px !important;
}
/* The LOCAL tile in the first grid is hidden — for early users solo
   bot-vs-self play makes no sense before they've grasped the rules. */
#lobby.journey-early .elev-home-mode-grid:first-of-type .elev-home-mode-tile[data-accent="pink"] {
  display: none !important;
}
/* Quick Match in early state: smaller + amber, with PLACEMENT badge
   updated by JS (_updateQuickMatchBadge). */
#lobby.journey-early .elev-home-quick-match {
  padding: 14px 16px !important;
  font-size: 14px !important;
  background: linear-gradient(135deg, #d4751a, #b85d12) !important;
}

/* ── journey-returning: full UI. Tournament + Weekly Challenge are
   useful but rarely used; tighten their visual weight a hair so they
   don't compete with the primary play CTAs. ──────────────────────── */
#lobby.journey-returning .elev-home-quest-tile {
  font-size: 13px;
  padding: 10px 14px;
  opacity: 0.92;
}

/* ── v153.90 — Daily Puzzle pill fully hidden. Was previously shown only
   to journey-returning. Removed per Michael's call: lobby is cleaner,
   the puzzle archive still lives in /puzzles for the few users who
   bookmarked it but it doesn't take up a homescreen slot anymore. ── */
#dailyPuzzlePill { display: none !important; }
#dailyPuzzlePill.solved {
  opacity: 0.78;
  border-color: rgba(107, 203, 119, 0.4);
}
.daily-puzzle-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #7c6ff7);
  box-shadow: 0 0 8px rgba(124, 111, 247, 0.7);
  margin-left: auto;
  animation: dailyPuzzlePulse 1.8s ease-in-out infinite;
}
#dailyPuzzlePill.solved .daily-puzzle-pill-dot {
  background: rgba(107, 203, 119, 0.7);
  box-shadow: none;
  animation: none;
}
@keyframes dailyPuzzlePulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ═══════════════════════════════════════════════════════════════
   v153.44 — De-AI-slop pass: visual cleanup
   ─────────────────────────────────────────────────────────────
   Hex avatar (live SVG glyph) replaces emoji avatars in player chips.
   Contains its own padding/centering since avatars now hold SVG, not
   text glyphs. Styles below also tighten the bare signup card and the
   home button labels to match the more confident voice.
   ═══════════════════════════════════════════════════════════════ */

.hex-avatar-svg {
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
/* When an avatar host contains the SVG, drop its emoji-sized font
   styling so the SVG paints crisp without an extra baseline. */
.elev-home-identity-avatar:has(.hex-avatar-svg),
.lobby-identity-avatar:has(.hex-avatar-svg) {
  font-size: 0 !important;
  background: rgba(20,24,48,0.45);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Bare signup card (only shows on the rare fallback path now that
   auto-username covers first-launch). Strip all the Stripe-styled
   onboarding chrome and leave a single field + button.

   v153.63 — Layout rebuilt as a true 1fr auto grid. Pre-fix the
   field was inside a flex row but the .signup-card-cta inherited a
   `width: 100%` from the original Stripe-styled rule (line 2037),
   which squashed the input flex child to ~0px and made Continue take
   the whole row. Grid template gives the input a guaranteed 1fr
   minimum width and the CTA exactly its content width. */
.signup-card.signup-card-bare {
  padding: 12px 14px;
  background: rgba(18, 21, 38, 0.6);
  border: 1px solid rgba(255,255,255,0.06);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border-radius: 14px;
}
.signup-card.signup-card-bare::before { display: none; }
.signup-card.signup-card-bare .signup-card-field {
  margin: 0;
  min-width: 0; /* let the input shrink inside grid track */
  padding: 10px 12px;
}
.signup-card.signup-card-bare .signup-card-field input {
  width: 100%;
}
.signup-card.signup-card-bare .signup-card-cta {
  /* Override the global .signup-card-cta { width:100% } from inline
     <style> so Continue stays a content-sized button in the grid. */
  width: auto !important;
  padding: 11px 18px;
  font-size: 13px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* Quest tiles — tighter type, shed the always-uppercase shouting */
#lobby.elev-home .elev-home-quest-tile {
  text-transform: none;
  letter-spacing: 0.1px;
  font-weight: 600;
  font-size: 13px;
}
/* Mode tiles — same treatment */
#lobby.elev-home .elev-home-mode-tile {
  text-transform: none;
  letter-spacing: 0.1px;
  font-weight: 600;
  font-size: 14px;
}
/* Browse / live row */
#lobby.elev-home .elev-home-browse {
  text-transform: none;
  letter-spacing: 0.1px;
}
/* How-to-play link */
#lobby.elev-home .elev-home-howtoplay {
  text-transform: none;
  letter-spacing: 0.2px;
  opacity: 0.72;
  font-weight: 500;
}

/* v153.45 — Win overlay hero glyph. Replaces the #winEmoji <h1> emoji
   slot with a custom SVG container. The 8em sizing matches the prior
   visual weight of the 🏆 emoji so the win card layout doesn't reflow. */
.win-hero-glyph {
  width: 120px;
  height: 120px;
  margin: 0 auto 14px;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4));
}
.win-hero-glyph svg { display: block; width: 100%; height: 100%; }

/* Tighten win-card button stack (no longer fights emoji prefixes for
   horizontal space). */
.win-actions .btn {
  text-transform: none;
  letter-spacing: 0.2px;
  font-weight: 600;
}

/* v153.47 — Bot personality glyph host element. The inline SVG inside
   sizes itself to 100% of the host so callers control size by setting
   the host's width/height (typical 22-32px in lobby pickers). */
.bot-glyph svg { width: 100%; height: 100%; display: block; }
.hud-bot-glyph svg { width: 100%; height: 100%; display: block; }

/* Achievement icon hosts cascade currentColor through to the SVG so
   the locked vs unlocked state recolors the mark automatically. */
.elev-pf-ach-icon svg,
.elev-pf-ach-chip svg { display: block; }

/* ═══════════════════════════════════════════════════════════════
   v153.59 — WIN OVERLAY MATCH-END PACING
   ─────────────────────────────────────────────────────────────
   Strict button hierarchy: ONE giant primary CTA (Play Again /
   Rematch), ONE smaller secondary (Find Next Match), tertiary row
   of three small icon-buttons (Share / View / Lobby). Replaces the
   prior 4-7 equal-weight grid that forced a decision tree after
   every match.
   ═══════════════════════════════════════════════════════════════ */

.win-actions.win-actions-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

/* Primary keep-playing CTA — full width, generous height, the
   single most-tapped button of the whole app. */
.win-actions-v2 .win-cta-primary {
  width: 100%;
  padding: 18px 22px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 0;
}

/* Secondary CTA — smaller, less weight, but still clearly tappable */
.win-actions-v2 .win-cta-secondary {
  width: 100%;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 0;
}

/* Tertiary row — three to four small icon buttons, equal width */
.win-tertiary-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.win-tertiary-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.10s ease;
}
.win-tertiary-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text);
  border-color: rgba(255,255,255,0.14);
}
.win-tertiary-btn:active {
  transform: scale(0.96);
}
.win-tertiary-btn svg {
  display: block;
  flex-shrink: 0;
}
.win-tertiary-btn span {
  white-space: nowrap;
}

/* v153.60 — Admin status pills (replaces inline emoji in status labels:
   🏁 Done, ⏳ Waiting, 🟢 Playing, plus new LIVE BOT). All flat, no
   emoji — same de-AI-slop pass as the rest of the UI. */
.admin-status-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: middle;
}
.admin-status-pill.is-done    { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); }
.admin-status-pill.is-waiting { background: rgba(255,217,61,0.16); color: #f7c948; }
.admin-status-pill.is-playing { background: rgba(107,203,119,0.18); color: #6bcb77; }
.admin-status-pill.is-live-bot{ background: rgba(124,111,247,0.20); color: #b4a8ff; }

/* ═══════════════════════════════════════════════════════════════
   v153.62 — VISUAL POLISH PASS
   ─────────────────────────────────────────────────────────────
   Goals:
   1. The board is the star — quieter chrome around it
   2. Unified button system (.hb-btn--*) replacing one-off pills
   3. Reduce neon-card-soup with consistent surface tokens
   4. Win screen reads as a result, not a generic modal
   5. Shop tiles feel collectible (rarity bands, equipped/locked)
   6. Tabular numerals on every mutable number
   7. Mobile-first composition fixes
   ═══════════════════════════════════════════════════════════════ */

/* ─── Polish-pass tokens (additive — never overrides existing :root) ── */
:root {
  /* Surface tokens — quieter than ad-hoc rgba() everywhere */
  --hb-surface-1: rgba(255,255,255,0.03);   /* lightest panel */
  --hb-surface-2: rgba(255,255,255,0.05);   /* default panel */
  --hb-surface-3: rgba(255,255,255,0.08);   /* hover/active */
  --hb-stroke-1: rgba(255,255,255,0.06);    /* default border */
  --hb-stroke-2: rgba(255,255,255,0.12);    /* emphasized border */
  --hb-stroke-3: rgba(255,255,255,0.20);    /* strong border */

  /* Brand accent tokens (anchor on the canonical purple/pink per CLAUDE.md) */
  --hb-purple: #7c6ff7;
  --hb-pink: #ff7cc4;
  --hb-purple-dim: rgba(124,111,247,0.18);
  --hb-pink-dim: rgba(255,124,196,0.18);
  --hb-grad-brand: linear-gradient(135deg, #7c6ff7 0%, #ff7cc4 100%);

  /* Rarity tokens (no rainbow — sit inside the brand palette) */
  --hb-rarity-common: #8a90a8;
  --hb-rarity-rare: #62b6ff;
  --hb-rarity-epic: #b565ff;
  --hb-rarity-legendary: #ffc857;

  /* Reusable geometry */
  --hb-radius-sm: 8px;
  --hb-radius-md: 12px;
  --hb-radius-lg: 16px;

  /* Standard heights for the unified button system */
  --hb-btn-h: 44px;     /* primary / default */
  --hb-btn-h-sm: 36px;  /* secondary / dense rows */
  --hb-btn-h-icon: 40px;/* square icon-only */

  /* Transitions tightened to a single spec */
  --hb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ─── Tabular nums everywhere a number can change ────────────────────
   Mutable numerics (Hex Power, coins, XP, win counts, timer, score
   chips, shop prices, rank badges) must lock width so values stop
   "wiggling" on every increment. Pre-fix: only a few elements opted
   in via .tabular-nums or inline style. ───────────────────────────── */
.elev-home-rank-elo-num,
.win-score-chip strong,
#chipMetaElo,
#chipMetaLvl,
#chipTotalCoins,
.coin-num,
.xp-num,
.elev-home-season-sub,
.win-cta-primary,
.elev-mm-pill-val,
#qmTimer,
#qmCandCount,
.hb-mono,
[data-mono],
.elev-shop-price,
.shop-coin-text {
  font-family: var(--elev-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ─── Unified button system (.hb-btn) ────────────────────────────────
   One scale, one radius, predictable interaction states. Replaces the
   ad-hoc inline-style buttons across modals, settings, and shop. The
   existing .elev-home-* tile classes stay (they have data-accent
   variants the home grid relies on); .hb-btn is for everywhere else. */
.hb-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--hb-btn-h);
  padding: 0 18px;
  border-radius: var(--hb-radius-md);
  border: 1px solid var(--hb-stroke-2);
  background: var(--hb-surface-2);
  color: var(--elev-ink, #f5f6ff);
  font-family: var(--elev-font, 'Space Grotesk', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  transition: background 140ms var(--hb-ease),
              border-color 140ms var(--hb-ease),
              transform 80ms var(--hb-ease),
              box-shadow 140ms var(--hb-ease);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.hb-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.hb-btn:hover { background: var(--hb-surface-3); border-color: var(--hb-stroke-3); }
.hb-btn:active { transform: translateY(1px); }
.hb-btn:focus-visible {
  outline: 2px solid var(--hb-purple);
  outline-offset: 2px;
}
.hb-btn:disabled,
.hb-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.hb-btn--primary {
  background: var(--hb-grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(124,111,247,0.55),
              0 1px 0 rgba(255,255,255,0.15) inset;
}
.hb-btn--primary:hover {
  background: var(--hb-grad-brand);
  filter: brightness(1.06);
  border-color: transparent;
  box-shadow: 0 12px 28px -8px rgba(124,111,247,0.65),
              0 1px 0 rgba(255,255,255,0.2) inset;
}

.hb-btn--ghost {
  background: transparent;
  border-color: var(--hb-stroke-2);
  color: var(--elev-ink-dim, #a4a9c9);
}
.hb-btn--ghost:hover {
  background: var(--hb-surface-1);
  color: var(--elev-ink, #f5f6ff);
}

.hb-btn--danger {
  background: rgba(255,107,107,0.12);
  border-color: rgba(255,107,107,0.35);
  color: #ff8585;
}
.hb-btn--danger:hover {
  background: rgba(255,107,107,0.18);
  border-color: rgba(255,107,107,0.55);
  color: #ffacac;
}

.hb-btn--sm {
  height: var(--hb-btn-h-sm);
  font-size: 13px;
  padding: 0 14px;
  border-radius: var(--hb-radius-sm);
}

.hb-btn--icon {
  width: var(--hb-btn-h-icon);
  height: var(--hb-btn-h-icon);
  padding: 0;
  border-radius: var(--hb-radius-md);
}
.hb-btn--icon svg { width: 18px; height: 18px; }

.hb-btn--block { width: 100%; }

/* ─── Reusable surface card (.hb-card) ────────────────────────────────
   A quieter, intentional alternative to the half-dozen one-off
   floating gradient cards. Use for groupings that don't have a
   dedicated component already. */
.hb-card {
  background: var(--hb-surface-2);
  border: 1px solid var(--hb-stroke-1);
  border-radius: var(--hb-radius-lg);
  padding: 16px;
}
.hb-card--quiet {
  background: var(--hb-surface-1);
  border-color: var(--hb-stroke-1);
}
.hb-card--accent {
  border-color: rgba(124,111,247,0.32);
  box-shadow: 0 0 0 1px rgba(124,111,247,0.12) inset;
}

/* Section header used inside .hb-card and elsewhere */
.hb-section-title {
  font-family: var(--elev-font, 'Space Grotesk', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--elev-ink-mute, #6a6f8f);
  margin: 0 0 10px;
}

/* ─── Win screen: tighter hierarchy, full-bleed score breakdown ─────
   The win-card was floating with too much chrome. Pull it tighter
   on mobile, group related metrics, and let the primary CTA breathe. */
.win-card {
  /* Quieter inner padding, tighter on mobile so result moments aren't
     fighting the safe-area chrome. */
  padding: 22px 20px 20px !important;
  gap: 12px !important;
}
.win-hero-glyph {
  width: 96px;
  height: 96px;
  margin: 0 auto 4px !important;
}
.winner-name {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', var(--elev-font, sans-serif)) !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  letter-spacing: 0.01em !important;
  text-align: center;
}
.win-how {
  text-align: center;
  font-size: 13px;
  color: var(--elev-ink-dim, #a4a9c9);
  margin: -2px 0 6px;
}
/* Score chip row — switch from gradient pill mush to a quiet stat
   row where the player number dominates and the name is supporting. */
.win-scores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.win-score-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--hb-surface-2);
  border: 1px solid var(--hb-stroke-1);
  border-left-width: 3px; /* color stripe lives here, not in glow */
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.win-score-chip strong {
  font-size: 14px;
  font-weight: 700;
  margin-left: 2px;
}
.win-next-goal {
  text-align: center;
  font-size: 13px;
  color: var(--elev-ink-dim, #a4a9c9);
  background: var(--hb-surface-1);
  border: 1px solid var(--hb-stroke-1);
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: 4px;
}
.win-next-goal strong {
  color: var(--elev-ink, #f5f6ff);
  font-family: var(--elev-mono, monospace);
  font-variant-numeric: tabular-nums;
}
/* v153.133 — Victory FX attribution caption on the win/loss overlay.
   Sits between the winner-name headline and the win-how line. Tints
   its left border with the winner's color so it visually pairs with
   the headline. Hidden when no equipped FX (or default fallback). */
.win-vfx-attribution {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px auto 8px;
  padding: 8px 14px;
  max-width: 320px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--wva-accent, var(--accent));
  border-radius: 0 10px 10px 0;
  font-size: 12px;
  letter-spacing: 0.4px;
}
.win-vfx-attribution .wva-label {
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.6px;
}
.win-vfx-attribution .wva-name {
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
}

/* v153.133 — End-game CTAs now THEME-BIND. Was hardcoded to brand
   purple (--hb-grad-brand + rgba(124,111,247,...) shadow), so swapping
   to Lava/Arctic/Synthwave still showed cosmic-purple buttons —
   broken visual continuity with the freshly equipped theme. Now: the
   primary CTA fills with var(--accent), uses a layered overlay
   gradient for sculpted depth (white sheen top, soft shadow bottom),
   and the box-shadow + bottom inset bevel use var(--accent-glow).
   Both CSS vars are reset on every applyTheme() call, so each theme
   visually owns the moment.

   Why the overlay-gradient trick instead of color-mix? color-mix is
   iOS 16.4+ only; targeting iOS 16.0 minimum, so a fixed white→black
   overlay over the solid accent gives the same sculpted feel without
   the version risk. */
.win-cta-primary {
  height: 56px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.18) 100%),
    var(--accent) !important;
  border: none !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
  box-shadow:
    0 14px 32px -10px var(--accent-glow, rgba(124,111,247,0.55)),
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 -2px 0 rgba(0,0,0,0.18) inset !important;
  transition: transform 100ms ease, box-shadow 160ms ease, filter 140ms ease !important;
}
.win-cta-primary:hover {
  filter: brightness(1.08) !important;
  box-shadow:
    0 16px 36px -8px var(--accent-glow, rgba(124,111,247,0.7)),
    0 1px 0 rgba(255,255,255,0.32) inset,
    0 -2px 0 rgba(0,0,0,0.18) inset !important;
}
.win-cta-primary:active {
  transform: scale(0.985) translateY(1px) !important;
  filter: brightness(0.96) !important;
  box-shadow:
    0 6px 16px -6px var(--accent-glow, rgba(124,111,247,0.55)),
    0 1px 0 rgba(255,255,255,0.20) inset !important;
}

/* Secondary CTA — outlined, accent-on-hover so it visibly pairs with
   the primary CTA's theme color without competing for attention. */
.win-cta-secondary {
  height: 44px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  color: var(--elev-ink, #f5f6ff) !important;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease !important;
}
.win-cta-secondary:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
/* color-mix fallback for older iOS — use a flat tint via rgba accent */
@supports not (background: color-mix(in srgb, red, blue)) {
  .win-cta-secondary:hover {
    background: var(--accent-glow, rgba(124,111,247,0.18)) !important;
  }
}
.win-cta-secondary:active {
  transform: scale(0.985) !important;
}

.win-tertiary-row {
  margin-top: 8px !important;
  gap: 6px !important;
}
.win-tertiary-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--elev-ink-dim, #a4a9c9) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease !important;
}
.win-tertiary-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .win-tertiary-btn:hover {
    background: var(--accent-glow, rgba(124,111,247,0.14)) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }
}
.win-tertiary-btn:active {
  transform: scale(0.96) !important;
}

/* ─── Shop tile polish — collectibles, not data rows ─────────────
   Rarity treatment lives on the tile's left border + top-right
   chip. Equipped state gets a clear ribbon + accent border.
   Locked items dim out + show a lock chip. */
[class*="elev-shop-"][class*="-card"] {
  position: relative;
  border-radius: 14px;
  transition: border-color 160ms var(--hb-ease),
              transform 100ms var(--hb-ease),
              box-shadow 200ms var(--hb-ease);
}
[class*="elev-shop-"][class*="-card"]:hover {
  transform: translateY(-1px);
}
[class*="elev-shop-"][class*="-card"].equipped {
  border-color: var(--hb-purple) !important;
  box-shadow: 0 0 0 1px var(--hb-purple-dim) inset,
              0 8px 22px -10px rgba(124,111,247,0.45);
}
[class*="elev-shop-"][class*="-card"].equipped::after {
  content: 'EQUIPPED';
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--hb-purple);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
}
[class*="elev-shop-"][class*="-card"].locked {
  filter: grayscale(0.4);
  opacity: 0.7;
}
[class*="elev-shop-"][class*="-card"][data-rarity="rare"]    { box-shadow: inset 3px 0 0 var(--hb-rarity-rare); }
[class*="elev-shop-"][class*="-card"][data-rarity="epic"]    { box-shadow: inset 3px 0 0 var(--hb-rarity-epic); }
[class*="elev-shop-"][class*="-card"][data-rarity="legendary"]{ box-shadow: inset 3px 0 0 var(--hb-rarity-legendary); }

.shop-rarity-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--hb-surface-2);
  color: var(--elev-ink-dim);
}
.shop-rarity-pill[data-rarity="rare"]      { background: rgba(98,182,255,0.18);  color: #a8d8ff; }
.shop-rarity-pill[data-rarity="epic"]      { background: rgba(181,101,255,0.18); color: #d8b3ff; }
.shop-rarity-pill[data-rarity="legendary"] { background: rgba(255,200,87,0.18);  color: #ffd980; }

/* Coin price block uses the brand coin SVG (see #hbCoinIcon symbol).
   Numeral is mono with tabular nums for steady width as price
   counters tick. */
.shop-coin-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
.shop-coin-text svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--hb-rarity-legendary); }

/* ─── Reduce neon-card-soup: quiet a few of the busiest surfaces ──
   Existing classes stay (don't break theme themes) — these rules
   override only the noisy gradient/glow defaults. Targets identified
   in the survey: rank card, season strip, save-progress banner,
   resume banner, room cards. */
.elev-home-rank-card {
  background: var(--hb-surface-1) !important;
  border: 1px solid var(--hb-stroke-1) !important;
  box-shadow: none !important;
}
.save-progress-banner {
  background: var(--hb-surface-2) !important;
  border: 1px solid var(--hb-stroke-1) !important;
  box-shadow: none !important;
}
.resume-banner {
  background: var(--hb-surface-2) !important;
  border: 1px solid var(--hb-stroke-2) !important;
  box-shadow: none !important;
}
.elev-home-season-strip {
  background: var(--hb-surface-1) !important;
  border: 1px solid var(--hb-stroke-1) !important;
  box-shadow: none !important;
}
/* Quest tiles: drop the saturated gradient backgrounds in favor of a
   single quiet surface + a colored 3px left rim for category. Reads
   as a list of related actions, not five competing CTAs. */
.elev-home-quest-tile {
  background: var(--hb-surface-2) !important;
  border: 1px solid var(--hb-stroke-1) !important;
  border-left: 3px solid var(--hb-stroke-2) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}
.elev-home-quest-tile[data-color="pink"]   { border-left-color: var(--hb-pink) !important; }
.elev-home-quest-tile[data-color="gold"]   { border-left-color: var(--hb-rarity-legendary) !important; }
.elev-home-quest-tile[data-color="cyan"]   { border-left-color: var(--elev-cyan) !important; }
.elev-home-quest-tile[data-color="purple"] { border-left-color: var(--hb-purple) !important; }
.elev-home-quest-tile:hover {
  background: var(--hb-surface-3) !important;
  border-color: var(--hb-stroke-2) !important;
  border-left-color: inherit !important;
}

/* ─── Profile chip — use brand mono for the Hex Power numeric ──── */
#chipMetaElo strong { color: var(--elev-ink, #f5f6ff); }

/* ─── Mobile composition fixes ────────────────────────────────────
   These fix specific clipping/overflow patterns at iPhone 14 widths
   (390px) that the survey or visual QA flagged. */
@media (max-width: 480px) {
  /* Win card never exceeds the viewport at small widths */
  .win-card {
    width: calc(100vw - 28px) !important;
    max-width: 380px !important;
  }
  /* Tertiary row icon buttons stay readable on narrow screens */
  .win-tertiary-row {
    flex-wrap: wrap;
    justify-content: center;
  }
  .win-tertiary-btn {
    min-width: 64px;
  }
  /* Lobby quest tiles don't squash their label on narrow widths */
  .elev-home-quest-tile {
    font-size: 13px !important;
    padding: 11px 14px !important;
  }
  /* Win primary CTA always stays full-width on mobile */
  .win-cta-primary { width: 100%; }
  .win-cta-secondary { width: 100%; }
  /* Daily puzzle pill doesn't push past viewport */
  #dailyPuzzlePill { width: 100%; }
}

/* ─── Reusable SVG sprite glyphs (used by JS to inline the brand
       glyph language without a per-call literal). The actual <symbol>
       defs live in index.html — these are the consumer rules so all
       brand glyphs share size/color hooks. ─────────────────────── */
.hb-glyph {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  fill: currentColor;
  flex-shrink: 0;
}
.hb-glyph--coin    { color: var(--hb-rarity-legendary); }
.hb-glyph--xp      { color: var(--hb-purple); }
.hb-glyph--trophy  { color: var(--hb-rarity-legendary); }
.hb-glyph--lock    { color: var(--elev-ink-mute, #6a6f8f); }
.hb-glyph--check   { color: var(--hb-purple); }
.hb-glyph--streak  { color: var(--elev-orange, #ff8a4c); }

/* ═══════════════════════════════════════════════════════════════
   v153.69 — MYSTERY CHEST OVERLAY
   ─────────────────────────────────────────────────────────────
   Pops up after every win celebration. Closed chest pulses gently
   inviting a tap; tap → wobble + glow burst + lid pop + radial
   particle burst → reward cards stagger in with bounce → claim.
   Tier color is set inline via --hb-chest-color from JS (matches
   the rarity ladder: bronze / silver / gold / diamond purple-pink
   — Diamond uses the brand grad). The whole effect uses
   currentColor on the SVG so a single CSS var paints all the
   gradients consistently per tier.
   ═══════════════════════════════════════════════════════════════ */

.hb-chest-overlay {
  position: fixed;
  inset: 0;
  z-index: 240; /* above #winOverlay (200ish), below tier-up VFX */
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.92) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hbChestOverlayFade 0.32s ease-out forwards;
  padding: 20px;
  /* tier color override target — JS sets this per-roll */
  --hb-chest-color: #d2916c;
}
@keyframes hbChestOverlayFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.hb-chest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 340px;
  width: 100%;
  padding: 20px;
  text-align: center;
  animation: hbChestCardEnter 0.42s cubic-bezier(0.22, 0.68, 0, 1.1) forwards;
  transform: scale(0.86);
  opacity: 0;
}
@keyframes hbChestCardEnter {
  0%   { transform: scale(0.86); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1.0);  opacity: 1; }
}

.hb-chest-tier-pill {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', var(--elev-font, sans-serif));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hb-chest-color);
  background: color-mix(in srgb, var(--hb-chest-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hb-chest-color) 35%, transparent);
  padding: 6px 14px;
  border-radius: 999px;
}

.hb-chest-streak-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--elev-orange, #ff8a4c);
  background: rgba(255,138,76,0.14);
  border: 1px solid rgba(255,138,76,0.32);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hb-chest-art {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  color: var(--hb-chest-color); /* drives currentColor in the SVG */
  /* gentle 2s breathing pulse while closed; killed by .opening */
  animation: hbChestIdle 2s ease-in-out infinite;
}
.hb-chest-art:focus-visible {
  outline: 2px solid var(--hb-chest-color);
  outline-offset: 6px;
  border-radius: 50%;
}
@keyframes hbChestIdle {
  0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 6px 18px color-mix(in srgb, currentColor 35%, transparent)); }
  50%      { transform: scale(1.025) translateY(-2px); filter: drop-shadow(0 12px 28px color-mix(in srgb, currentColor 55%, transparent)); }
}

.hb-chest-svg {
  display: block;
  position: relative;
  z-index: 2;
}
.hb-chest-glow-halo {
  transform-origin: center;
  animation: hbChestGlowPulse 2s ease-in-out infinite;
}
@keyframes hbChestGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.18); }
}

/* v153.70 — Open animation, two-piece chest version. The closed-state
   inner light is hidden by default; .open reveals it + the rays. The
   lid pops up + rotates back like a real chest opening, exposing the
   bright treasure light inside.
   Sequence (class toggles driven by openWinChest in index.html):
     .opening    → 0.35s wobble + scale-up
     .open       → 0.55s lid pop + inner light bloom + ray fan +
                    halo burst + latch trajectory + confetti (diamond) */

/* Default-hidden layers that only animate in on .open */
.hb-chest-inner-light { opacity: 0; transform-origin: center; transform: scale(0.4); }
.hb-chest-rays        { opacity: 0; transform-origin: center; }
.hb-chest-confetti    { display: none; pointer-events: none; }

.hb-chest-art.opening {
  animation: hbChestWobble 0.35s ease-in-out forwards;
}
@keyframes hbChestWobble {
  0%   { transform: rotate(0)     scale(1); }
  20%  { transform: rotate(-6deg) scale(1.02); }
  45%  { transform: rotate(6deg)  scale(1.05); }
  70%  { transform: rotate(-3deg) scale(1.08); }
  100% { transform: rotate(0)     scale(1.10); }
}

/* Halo burst — radiates outward as the lid pops */
.hb-chest-art.open .hb-chest-glow-halo {
  animation: hbChestHaloBurst 0.65s cubic-bezier(0.22,0.68,0,1.1) forwards;
}
@keyframes hbChestHaloBurst {
  0%   { opacity: 1;   transform: scale(1); }
  60%  { opacity: 1;   transform: scale(2.5); }
  100% { opacity: 0;   transform: scale(3.0); }
}

/* Latch trajectory — flies up + spins + fades. Detached from the lid
   visually so it reads like a lock that just popped. Travels with the
   lid for the first 100ms, then breaks free. */
.hb-chest-art.open .hb-chest-latch {
  animation: hbChestLatchPop 0.7s cubic-bezier(0.22,0.68,0,1.1) forwards;
}
@keyframes hbChestLatchPop {
  0%   { transform: translateY(0)    rotate(0)     scale(1);   opacity: 1; }
  20%  { transform: translateY(-6px) rotate(-15deg) scale(1.1); opacity: 1; }
  60%  { transform: translateY(-30px) rotate(60deg) scale(0.95); opacity: 0.8; }
  100% { transform: translateY(-72px) rotate(140deg) scale(0.45); opacity: 0; }
}

/* Lid pop — the centerpiece. Lifts up + rotates back ~32° on the
   front-edge pivot so it reads like a chest lid hinging open. */
.hb-chest-art.open .hb-chest-lid {
  animation: hbChestLidOpen 0.55s cubic-bezier(0.22,0.68,0,1.1) forwards;
  transform-origin: center 0; /* pivot at the seam, centered */
}
@keyframes hbChestLidOpen {
  0%   { transform: translateY(0)    rotate(0); }
  60%  { transform: translateY(-26px) rotate(-34deg); }
  100% { transform: translateY(-22px) rotate(-30deg); }
}

/* Body subtle reaction — small downward press to sell the lid weight
   leaving, then settles back to rest. */
.hb-chest-art.open .hb-chest-body {
  animation: hbChestBodyOpen 0.55s cubic-bezier(0.22,0.68,0,1.1) forwards;
  transform-origin: center 42px;
}
@keyframes hbChestBodyOpen {
  0%   { transform: scaleY(1); }
  30%  { transform: scaleY(0.96); }
  100% { transform: scaleY(1); }
}

/* Inner treasure light — blooms out the moment the lid lifts */
.hb-chest-art.open .hb-chest-inner-light {
  animation: hbChestInnerBloom 0.7s cubic-bezier(0.22,0.68,0,1.1) 0.10s forwards;
}
@keyframes hbChestInnerBloom {
  0%   { opacity: 0;   transform: scale(0.4); }
  40%  { opacity: 1;   transform: scale(1.25); }
  100% { opacity: 0.85; transform: scale(1.05); }
}

/* Light rays — fan out from the chest mouth */
.hb-chest-art.open .hb-chest-rays {
  animation: hbChestRaysFan 0.85s cubic-bezier(0.22,0.68,0,1.1) 0.18s forwards;
}
@keyframes hbChestRaysFan {
  0%   { opacity: 0;   transform: scale(0.6); }
  50%  { opacity: 0.85; transform: scale(1.05); }
  100% { opacity: 0.4; transform: scale(1.15); }
}

/* Seam fades on open — the visible "gap" reads from the lid+light delta */
.hb-chest-art.open .hb-chest-seam {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Burst particles — 8 hex dots that radiate outward when chest opens */
.hb-chest-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.hb-chest-burst span {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: currentColor;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: 0;
  color: var(--hb-chest-color);
}
.hb-chest-art.open .hb-chest-burst span {
  animation: hbChestParticle 0.7s cubic-bezier(0.22,0.68,0,1.1) forwards;
}
.hb-chest-art.open .hb-chest-burst span:nth-child(1) { --bx:  100px; --by:    0; animation-delay: 0.05s; }
.hb-chest-art.open .hb-chest-burst span:nth-child(2) { --bx:   71px; --by:  71px; animation-delay: 0.07s; }
.hb-chest-art.open .hb-chest-burst span:nth-child(3) { --bx:    0;   --by: 100px; animation-delay: 0.09s; }
.hb-chest-art.open .hb-chest-burst span:nth-child(4) { --bx:  -71px; --by:  71px; animation-delay: 0.11s; }
.hb-chest-art.open .hb-chest-burst span:nth-child(5) { --bx: -100px; --by:    0; animation-delay: 0.13s; }
.hb-chest-art.open .hb-chest-burst span:nth-child(6) { --bx:  -71px; --by: -71px; animation-delay: 0.15s; }
.hb-chest-art.open .hb-chest-burst span:nth-child(7) { --bx:    0;   --by:-100px; animation-delay: 0.17s; }
.hb-chest-art.open .hb-chest-burst span:nth-child(8) { --bx:   71px; --by: -71px; animation-delay: 0.19s; }
@keyframes hbChestParticle {
  0%   { opacity: 1; transform: translate(0, 0)            scale(0.4); }
  60%  { opacity: 1; transform: translate(var(--bx), var(--by)) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.6); }
}

/* ── Diamond-tier confetti ──────────────────────────────────────
   Only visible when the chest art has the .is-diamond modifier.
   14 little hex sparkles drift down + spin, staggered. Strictly
   ornamental — Diamond is the ~1% rarest tier, so when it hits
   the player should feel something extra is happening. */
.hb-chest-art.is-diamond .hb-chest-confetti { display: block; position: absolute; inset: -40px -10px -40px -10px; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span {
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: 0;
  animation: hbChestConfetti 1.6s cubic-bezier(0.22, 0.68, 0, 1.1) forwards;
}
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(1)  { left:  6%; background: #8bd7ff; --rot:  120deg; animation-delay: 0.20s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(2)  { left: 14%; background: #fff8d6; --rot: -160deg; animation-delay: 0.32s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(3)  { left: 22%; background: #b9f2ff; --rot:   90deg; animation-delay: 0.18s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(4)  { left: 30%; background: #ff7cc4; --rot: -120deg; animation-delay: 0.42s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(5)  { left: 38%; background: #8bd7ff; --rot:  200deg; animation-delay: 0.26s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(6)  { left: 46%; background: #fff8d6; --rot: -100deg; animation-delay: 0.36s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(7)  { left: 54%; background: #7c6ff7; --rot:  140deg; animation-delay: 0.22s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(8)  { left: 62%; background: #b9f2ff; --rot: -180deg; animation-delay: 0.30s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(9)  { left: 70%; background: #ff7cc4; --rot:   80deg; animation-delay: 0.40s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(10) { left: 78%; background: #8bd7ff; --rot: -140deg; animation-delay: 0.24s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(11) { left: 86%; background: #fff8d6; --rot:  160deg; animation-delay: 0.44s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(12) { left: 94%; background: #b9f2ff; --rot: -110deg; animation-delay: 0.28s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(13) { left: 50%; background: #fff8d6; --rot:  220deg; animation-delay: 0.16s; }
.hb-chest-art.is-diamond.open .hb-chest-confetti span:nth-child(14) { left: 18%; background: #ff7cc4; --rot: -200deg; animation-delay: 0.48s; }
@keyframes hbChestConfetti {
  0%   { opacity: 0; transform: translateY(-30px) rotate(0); }
  20%  { opacity: 1; transform: translateY(20px) rotate(calc(var(--rot) * 0.3)); }
  100% { opacity: 0; transform: translateY(260px) rotate(var(--rot)); }
}

/* ── Reward value count-up styling ──────────────────────────────
   The .hb-chest-reward-value gets `data-target="N"` set by JS, then
   _animateCountUp tweens textContent from 0 to N. While counting,
   the value gets a subtle scale pulse to sell the "number going up"
   energy. */
.hb-chest-reward-value.is-counting {
  animation: hbChestCountPulse 0.7s ease-in-out forwards;
}
@keyframes hbChestCountPulse {
  0%   { transform: scale(1); color: var(--elev-ink, #f5f6ff); }
  35%  { transform: scale(1.18); color: #fff; text-shadow: 0 0 12px var(--hb-chest-color); }
  100% { transform: scale(1); color: var(--elev-ink, #f5f6ff); text-shadow: none; }
}

.hb-chest-tap-hint {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.62);
  margin-top: 2px;
  animation: hbChestHintPulse 1.6s ease-in-out infinite;
}
@keyframes hbChestHintPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.hb-chest-art.opening + .hb-chest-tap-hint,
.hb-chest-art.open    + .hb-chest-tap-hint { display: none; }

/* Reward cards — populated by openWinChest, slide+bounce in with stagger */
.hb-chest-rewards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}
.hb-chest-rewards:empty { display: none; }
.hb-chest-reward {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 16px;
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  animation: hbChestRewardIn 0.42s cubic-bezier(0.22, 0.68, 0, 1.1) forwards;
}
.hb-chest-reward:nth-child(1) { animation-delay: 0.10s; }
.hb-chest-reward:nth-child(2) { animation-delay: 0.22s; }
.hb-chest-reward:nth-child(3) { animation-delay: 0.34s; }
@keyframes hbChestRewardIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.hb-chest-reward-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hb-chest-reward-body {
  flex: 1;
  text-align: left;
  font-family: var(--elev-font, sans-serif);
}
.hb-chest-reward-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--elev-ink-mute, #6a6f8f);
}
.hb-chest-reward-value {
  font-family: var(--elev-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  color: var(--elev-ink, #f5f6ff);
  line-height: 1.1;
}
.hb-chest-reward-bonus {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--elev-orange, #ff8a4c);
  background: rgba(255,138,76,0.15);
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.hb-chest-claim {
  margin-top: 8px;
  width: 100%;
  max-width: 240px;
  opacity: 0;
  animation: hbChestClaimIn 0.32s ease 0.55s forwards;
}
@keyframes hbChestClaimIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Mobile tightening — keep the chest readable on iPhone widths */
@media (max-width: 480px) {
  .hb-chest-card { max-width: calc(100vw - 32px); padding: 16px; }
  .hb-chest-svg { width: 156px; height: 156px; }
  .hb-chest-reward { padding: 10px 14px; gap: 10px; }
  .hb-chest-reward-value { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   v153.72 — HEX HUNT OVERLAY
   ─────────────────────────────────────────────────────────────
   Phase-aware HUD chrome that floats over the canvas hexhunt.js
   paints into. Five panels live inside #hexHuntOverlay:
     • .hh-top         — phase title + battle hud (always visible)
     • .hh-setup-dock  — bottom card during setup
     • .hh-handoff-panel — opaque privacy screen between turns
     • .hh-win-panel   — endgame card
   Each toggles via display:none|flex from hhRenderUI(). Shares
   the unified .hb-btn system for primary/ghost actions.
   ═══════════════════════════════════════════════════════════════ */

#hexHuntOverlay {
  position: fixed;
  inset: 0;
  z-index: 70; /* above canvas (1) + HUD chrome (10), below win flash (95) */
  pointer-events: none; /* sub-panels re-enable per-element */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--elev-font, 'Space Grotesk', sans-serif);
  color: var(--elev-ink, #f5f6ff);
}
#hexHuntOverlay > * { pointer-events: auto; }

/* v153.72 — When Hex Hunt is up, suppress the standard game HUD
   chrome (zoom controls, pause/express center buttons, hex
   placement tooltip, player chips, room code pill, turn-status
   bar). HH owns the screen. The body[data-hh="on"] flag is
   toggled by hhStart/hhExit. */
body[data-hh="on"] .hud-zoom,
body[data-hh="on"] .hud-center,
body[data-hh="on"] .hex-tooltip,
body[data-hh="on"] .hud-players,
body[data-hh="on"] .hud-room,
body[data-hh="on"] .turn-status-bar,
body[data-hh="on"] .hud-top,
body[data-hh="on"] #yourTurnFlash,
body[data-hh="on"] .undo-btn { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   v153.79 — Hex Hunt design tokens.
   ─────────────────────────────────────────────────────────────
   A nautical-but-not-cheesy palette: deep midnight blue base,
   coral/pink for enemy waters (where you fire), purple-cyan for
   your fleet (defensive). All other HH classes consume these vars
   so a future re-skin only needs to touch this block.
   ═══════════════════════════════════════════════════════════════ */
#hexHuntOverlay {
  --hh-ink:        #f5f6ff;
  --hh-ink-dim:   #a4a9c9;
  --hh-ink-mute:  #6a6f8f;
  --hh-bg-dark:   #08081e;
  --hh-bg-mid:    #14182f;
  --hh-bg-card:   rgba(20, 24, 56, 0.82);
  --hh-rim:        rgba(124, 111, 247, 0.32);
  --hh-rim-strong: rgba(124, 111, 247, 0.55);
  --hh-enemy:        #ff7cc4;             /* enemy waters (firing target) */
  --hh-enemy-soft:  rgba(255, 124, 196, 0.22);
  --hh-enemy-rim:   rgba(255, 124, 196, 0.52);
  --hh-mine:        #62e9ff;              /* your fleet (defensive) */
  --hh-mine-soft:  rgba(98, 233, 255, 0.18);
  --hh-mine-rim:   rgba(98, 233, 255, 0.45);
  --hh-hit:        #ff5a3a;              /* hit / impact */
  --hh-miss:       rgba(255, 255, 255, 0.55);
  --hh-sunk:       #ff3a30;              /* sunk ship outline */
  --hh-gold:       #ffd93d;              /* placement preview / streak */
  --hh-mint:       #6bcb77;              /* placed / committed */
  --hh-pink-glow:  0 0 16px rgba(255,124,196,0.45);
  --hh-cyan-glow:  0 0 16px rgba(98,233,255,0.45);
  --hh-card-shadow: 0 18px 42px -16px rgba(0,0,0,0.7);
  --hh-radius:     14px;
  --hh-radius-lg:  18px;
}

/* ── Top status bar ────────────────────────────────────── */
.hh-top {
  padding: max(12px, env(safe-area-inset-top, 12px)) 16px 14px;
  background: linear-gradient(180deg, rgba(8,8,30,0.94) 0%, rgba(8,8,30,0.68) 70%, rgba(8,8,30,0) 100%);
  position: relative;
}
/* v153.79 — Subtle sonar pulse decoration inside the top bar.
   Pure CSS, no JS. Keeps the empty space at the top from feeling
   bare during waiting/setup phases. */
.hh-top::before {
  content: "";
  position: absolute;
  top: 50%; right: 22px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(98,233,255,0.18);
  box-shadow: 0 0 0 4px rgba(98,233,255,0.10);
  transform: translateY(-50%);
  animation: hhSonarPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hhSonarPulse {
  0%, 100% { opacity: 0.35; transform: translateY(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateY(-50%) scale(1.18); }
}
.hh-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 460px;
  margin: 0 auto;
}
.hh-exit-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.hh-exit-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }
.hh-top-titles { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hh-top-spacer { width: 36px; flex-shrink: 0; }
/* v153.79 — Mode wordmark above the phase label. Tiny, all-caps,
   letter-spaced — sets the editorial Battleship tone. */
.hh-top-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--elev-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--hh-mine);
  opacity: 0.85;
  line-height: 1;
}
.hh-top-wordmark::before,
.hh-top-wordmark::after {
  content: "";
  display: inline-block;
  width: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.55;
}
.hh-phase-label {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', var(--elev-font, sans-serif));
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.015em;
  line-height: 1.1;
  color: var(--hh-ink, #f5f6ff);
}
.hh-sub-label {
  font-size: 12px;
  color: var(--hh-ink-dim, #a4a9c9);
  margin-top: 1px;
  letter-spacing: 0.02em;
}

/* v153.79 — Battle HUD redesign. Larger names, color-coded sides
   (you = mint/cyan, opponent = pink/coral), and ship state shown as
   four hex pips that fill in as the opposite player sinks them.
   Pip colors invert based on side so a quick glance tells you who's
   ahead in the duel. */
.hh-battle-hud {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  max-width: 460px;
  margin: 12px auto 0;
  padding: 12px 14px;
  background: var(--hh-bg-card);
  border: 1px solid rgba(124,111,247,0.28);
  border-radius: var(--hh-radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--hh-card-shadow);
}
.hh-battle-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 10px;
}
.hh-battle-side--left {
  background: linear-gradient(180deg, var(--hh-mine-soft), transparent);
  border-left: 2px solid var(--hh-mine-rim);
}
.hh-battle-side--right {
  text-align: right;
  align-items: flex-end;
  background: linear-gradient(180deg, var(--hh-enemy-soft), transparent);
  border-right: 2px solid var(--hh-enemy-rim);
}
.hh-battle-name {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', var(--elev-font, sans-serif));
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hh-battle-side--left  .hh-battle-name { color: var(--hh-mine); text-shadow: 0 0 12px rgba(98,233,255,0.35); }
.hh-battle-side--right .hh-battle-name { color: var(--hh-enemy); text-shadow: 0 0 12px rgba(255,124,196,0.35); }
.hh-battle-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  line-height: 1;
}
.hh-battle-side--right .hh-battle-stat { justify-content: flex-end; }
.hh-stat-label {
  color: var(--hh-ink-mute, #6a6f8f);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 9px;
}
.hh-stat-val {
  font-family: var(--elev-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--hh-ink, #f5f6ff);
  font-size: 11px;
}
/* v153.79 — Ship-pip indicator. Four hex pips per side; each one
   fills (and dims to red) when the opposite player sinks it. The
   render path inside hexhunt.js writes them inline based on
   per-ship .sunk state. */
.hh-ship-pips {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hh-ship-pip {
  width: 12px; height: 13px;
  display: inline-block;
  position: relative;
  background: currentColor;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: 0.32;
  transition: opacity 0.32s ease, transform 0.32s ease, filter 0.32s ease;
}
.hh-battle-side--left  .hh-ship-pip { color: var(--hh-mine); }
.hh-battle-side--right .hh-ship-pip { color: var(--hh-enemy); }
.hh-ship-pip[data-sunk="1"] {
  opacity: 1;
  color: var(--hh-sunk) !important;
  filter: drop-shadow(0 0 4px rgba(255,58,48,0.55));
  transform: scale(0.92);
}
.hh-battle-vs {
  flex-shrink: 0;
  align-self: center;
  font-family: var(--elev-mono, monospace);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--hh-ink-mute, #6a6f8f);
  text-transform: uppercase;
  padding: 0 4px;
  position: relative;
}
.hh-battle-vs::before,
.hh-battle-vs::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 1px; height: 6px;
  background: currentColor;
  opacity: 0.55;
}
.hh-battle-vs::before { top: -10px; }
.hh-battle-vs::after  { bottom: -10px; }

/* ── Setup dock — v153.79 redesign ─────────────────────────
   Larger ship cards with size-as-pips visualization (each cell of
   the ship is a tiny hex), color states for placed/active/queued,
   and a subtle progress bar above the dock so the player always
   knows where they are in setup. */
.hh-setup-dock {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px max(20px, env(safe-area-inset-bottom, 20px));
  background: linear-gradient(0deg, rgba(8,8,30,0.94) 0%, rgba(8,8,30,0.72) 60%, rgba(8,8,30,0) 100%);
}
/* v153.79 — fleet progress bar across the top of the dock. CSS-only
   driven via --hh-fleet-pct set on .hh-dock-ships parent in JS. */
.hh-dock-progress {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.hh-dock-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--hh-mine), var(--hh-gold));
  border-radius: inherit;
  transition: width 0.42s cubic-bezier(0.22, 0.68, 0, 1.1);
  box-shadow: 0 0 8px rgba(98,233,255,0.55);
}
.hh-dock-ships {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 460px;
  margin: 0 auto;
}
.hh-dock-ship {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 9px 12px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  min-width: 70px;
  position: relative;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.hh-dock-ship::after {
  /* tiny size badge in the corner */
  content: attr(data-size);
  position: absolute;
  top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(8,8,30,0.92);
  border: 1px solid currentColor;
  color: var(--hh-ink-dim);
  font-family: var(--elev-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hh-dock-ship.placed {
  background: rgba(107,203,119,0.12);
  border-color: rgba(107,203,119,0.42);
}
.hh-dock-ship.placed::after { color: var(--hh-mint); }
.hh-dock-ship.active {
  background: linear-gradient(180deg, rgba(255,217,61,0.20), rgba(255,217,61,0.08));
  border-color: rgba(255,217,61,0.65);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -10px rgba(255,217,61,0.55), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.hh-dock-ship.active::after { color: var(--hh-gold); border-color: var(--hh-gold); }
.hh-dock-ship-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hh-ink-dim, #a4a9c9);
}
.hh-dock-ship.placed .hh-dock-ship-name { color: var(--hh-mint); }
.hh-dock-ship.active .hh-dock-ship-name { color: var(--hh-gold); }
.hh-dock-ship-cells {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.hh-dock-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.hh-dock-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(124,111,247,0.22), rgba(124,111,247,0.10));
  border: 1px solid rgba(124,111,247,0.42);
  color: #cdc4ff;
  font-family: var(--elev-font, sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 80ms ease, box-shadow 160ms ease;
  box-shadow: 0 6px 14px -8px rgba(124,111,247,0.55);
}
.hh-dock-btn:hover {
  background: linear-gradient(180deg, rgba(124,111,247,0.32), rgba(124,111,247,0.16));
  border-color: rgba(124,111,247,0.65);
}
.hh-dock-btn:active { transform: translateY(1px); }
.hh-dock-btn--ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: var(--hh-ink-dim, #a4a9c9);
  box-shadow: none;
}
.hh-dock-btn--ghost:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}
.hh-rotate-axis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: rgba(255,255,255,0.10);
  font-size: 13px;
  font-weight: 700;
  margin-left: 2px;
}

/* ── Handoff privacy screen — full opaque blocker ──────── */
/* ── Handoff + waiting panels — v153.79 redesign ──────────
   Concentric sonar pulse rings behind the glyph give the screen
   ambient motion without animating the entire card. The card
   itself uses a deeper midnight + cyan rim treatment. */
.hh-handoff-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(20,28,76,0.96) 0%, rgba(6,8,24,0.99) 70%),
    rgba(6,8,24,0.99);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: hhFadeIn 0.3s ease-out;
  padding: 24px;
  overflow: hidden;
}
/* Decorative sonar rings filling the dim background */
.hh-handoff-panel::before,
.hh-handoff-panel::after {
  content: "";
  position: absolute;
  top: 38%; left: 50%;
  width: 260px; height: 260px;
  margin-top: -130px; margin-left: -130px;
  border-radius: 50%;
  border: 1px solid var(--hh-mine-rim);
  opacity: 0;
  pointer-events: none;
  animation: hhSonarRing 4.5s ease-out infinite;
}
.hh-handoff-panel::after { animation-delay: 2.25s; }
@keyframes hhSonarRing {
  0%   { opacity: 0;    transform: scale(0.4); }
  20%  { opacity: 0.45; }
  100% { opacity: 0;    transform: scale(2.2); }
}
@keyframes hhFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.hh-handoff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: 340px;
  padding: 36px 28px;
  background: linear-gradient(180deg, rgba(20,24,56,0.92), rgba(14,18,42,0.92));
  border: 1px solid var(--hh-rim-strong);
  border-radius: var(--hh-radius-lg);
  box-shadow: var(--hh-card-shadow), 0 0 0 1px rgba(98,233,255,0.08) inset;
  animation: hhCardEnter 0.42s cubic-bezier(0.22, 0.68, 0, 1.1);
  position: relative;
  z-index: 1;
}
@keyframes hhCardEnter {
  0%   { transform: scale(0.86); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}
.hh-handoff-glyph {
  color: var(--hh-mine);
  filter: drop-shadow(0 6px 22px rgba(98,233,255,0.52));
  animation: hhHandoffPulse 2.2s ease-in-out infinite;
}
@keyframes hhHandoffPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.hh-handoff-name {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', var(--elev-font, sans-serif));
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.015em;
  color: var(--hh-ink, #f5f6ff);
  line-height: 1.1;
}
.hh-handoff-sub {
  font-size: 13px;
  color: var(--hh-ink-dim, #a4a9c9);
  max-width: 260px;
  line-height: 1.5;
}
.hh-handoff-cta {
  margin-top: 10px;
  width: 100%;
  max-width: 240px;
}
/* v153.79 — Room code in the waiting panel gets a copy button.
   Wrapped in a flex row so they line up cleanly. */
.hh-waiting-code-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.hh-waiting-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(98,233,255,0.12);
  border: 1px solid var(--hh-mine-rim);
  color: var(--hh-mine);
  cursor: pointer;
  transition: background 160ms ease, transform 80ms ease;
}
.hh-waiting-copy:hover { background: rgba(98,233,255,0.22); }
.hh-waiting-copy:active { transform: translateY(1px); }
.hh-waiting-copy.is-copied {
  background: rgba(107,203,119,0.20);
  color: var(--hh-mint);
  border-color: rgba(107,203,119,0.55);
}

/* ── Win panel ─────────────────────────────────────────── */
.hh-win-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(20,24,64,0.78) 0%, rgba(8,10,22,0.94) 80%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 24px;
}
.hh-win-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: 340px;
  padding: 32px 24px;
  background: rgba(20,24,48,0.85);
  border: 1px solid rgba(124,111,247,0.32);
  border-radius: 22px;
  box-shadow: 0 18px 48px -16px rgba(0,0,0,0.65);
  animation: hhCardEnter 0.42s cubic-bezier(0.22, 0.68, 0, 1.1);
}
.hh-win-glyph {
  color: var(--hb-purple, #7c6ff7);
  filter: drop-shadow(0 8px 22px rgba(124,111,247,0.55));
}
.hh-win-name {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', sans-serif);
  font-weight: 700;
  font-size: 26px;
}
.hh-win-sub {
  font-size: 13px;
  color: var(--elev-ink-dim, #a4a9c9);
}
.hh-win-cta {
  width: 100%;
  max-width: 240px;
}

/* v153.73 — VICTORY / DEFEAT pill at the top of the win card. Color-coded
   so a glance tells the player which result they're looking at. The pill
   sits above the trophy glyph to set the tone before any text reads. */
.hh-win-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--elev-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(124,111,247,0.18);
  border: 1px solid rgba(124,111,247,0.55);
  color: #cdc4ff;
  animation: hhTagPop 0.6s cubic-bezier(0.22, 0.68, 0, 1.4);
}
.hh-win-tag[data-result="win"] {
  background: linear-gradient(135deg, rgba(255,210,90,0.28), rgba(255,160,80,0.18));
  border-color: rgba(255,210,90,0.7);
  color: #ffe6a8;
  text-shadow: 0 0 10px rgba(255,210,90,0.45);
}
.hh-win-tag[data-result="loss"] {
  background: rgba(255,124,196,0.14);
  border-color: rgba(255,124,196,0.45);
  color: #ffb8d6;
}
@keyframes hhTagPop {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.6); }
  60%  { opacity: 1; transform: translateY(0) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* v153.73 — Recap stats block. Two-column comparison (winner | vs | loser)
   with hits / shots / accuracy rows. Mono font on values keeps the digits
   tabular so the side-by-side reads cleanly. */
.hh-win-stats {
  width: 100%;
  margin-top: 4px;
  padding: 12px 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
}
.hh-win-stats-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.hh-win-stats-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.hh-win-stats-name {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', var(--elev-font, sans-serif));
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--elev-ink, #f5f6ff);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hh-win-stats-side[data-result="win"] .hh-win-stats-name {
  color: #ffe6a8;
  text-shadow: 0 0 8px rgba(255,210,90,0.35);
}
.hh-win-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 4px 10px;
  align-items: center;
}
.hh-win-stats-grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.hh-win-stats-label {
  font-family: var(--elev-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--elev-ink-dim, #a4a9c9);
}
.hh-win-stats-val {
  font-family: var(--elev-mono, 'JetBrains Mono', monospace);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15px;
  color: var(--elev-ink, #f5f6ff);
}
.hh-win-stats-vs {
  font-family: var(--elev-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--elev-ink-dim, #a4a9c9);
  opacity: 0.72;
}

/* Mobile compactness */
@media (max-width: 480px) {
  .hh-dock-ship { min-width: 56px; padding: 6px 8px; }
  .hh-dock-ship-name { font-size: 10px; }
  .hh-handoff-card { padding: 24px 18px; }
  .hh-win-card { padding: 24px 18px; }
  .hh-win-stats { padding: 10px 6px; }
  .hh-win-stats-row { gap: 6px; }
  .hh-win-stats-grid { gap: 3px 6px; }
  .hh-win-stats-val { font-size: 14px; }
  .hh-win-stats-name { font-size: 12px; }
}

/* ── v153.73 — How-to-play modal (3-step intro) ──────────── */
.hh-howto-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(20,24,64,0.85) 0%, rgba(8,10,22,0.96) 80%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 20px;
  z-index: 4; /* above the rest of the overlay panels */
  animation: hhFadeIn 0.32s ease-out;
}
.hh-howto-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 380px;
  padding: 26px 22px;
  background: rgba(20,24,48,0.92);
  border: 1px solid rgba(124,111,247,0.32);
  border-radius: 22px;
  box-shadow: 0 18px 48px -16px rgba(0,0,0,0.7);
  animation: hhCardEnter 0.42s cubic-bezier(0.22, 0.68, 0, 1.1);
}
.hh-howto-title {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', var(--elev-font, sans-serif));
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  letter-spacing: 0.01em;
}
.hh-howto-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hh-howto-step {
  display: grid;
  grid-template-columns: auto 48px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
}
.hh-howto-step-num {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hb-purple, #7c6ff7);
  color: #fff;
  font-family: var(--elev-mono, monospace);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.hh-howto-step-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
}
.hh-howto-step-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--elev-ink, #f5f6ff);
}
.hh-howto-step-sub {
  font-size: 12px;
  color: var(--elev-ink-dim, #a4a9c9);
  line-height: 1.45;
  margin-top: 3px;
}
.hh-howto-cta {
  width: 100%;
  margin-top: 4px;
}
@media (max-width: 480px) {
  .hh-howto-card { padding: 22px 16px; }
  .hh-howto-step { padding: 10px; gap: 10px; grid-template-columns: auto 42px 1fr; }
  .hh-howto-step-glyph { width: 42px; height: 42px; }
}

/* ── v153.74 — Hex Hunt online: waiting code + launcher modal ───── */
.hh-waiting-code {
  font-family: var(--elev-mono, 'JetBrains Mono', monospace);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: 0.42em;
  padding: 12px 20px 12px 28px; /* extra left padding cancels the trailing letter-space */
  margin-top: 10px;
  background: rgba(98,233,255,0.10);
  border: 1px solid rgba(98,233,255,0.36);
  border-radius: 12px;
  color: #9ce0ee;
  text-shadow: 0 0 12px rgba(98,233,255,0.45);
  user-select: all;
  -webkit-user-select: all;
}

.hh-launcher-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,10,22,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 20px;
  animation: hhFadeIn 0.28s ease-out;
}
.hh-launcher-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px;
  background: rgba(20,24,48,0.94);
  border: 1px solid rgba(124,111,247,0.32);
  border-radius: 22px;
  box-shadow: 0 18px 48px -16px rgba(0,0,0,0.7);
  animation: hhCardEnter 0.42s cubic-bezier(0.22, 0.68, 0, 1.1);
}
/* v153.79 — Mode mark + eyebrow above the launcher title. The mark
   uses the cyan/mine accent to match the in-game header; combined
   with the small all-caps eyebrow it sets the editorial tone before
   the user reads any option text. */
.hh-launcher-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  margin: 0 auto -2px;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 50%, rgba(98,233,255,0.18), rgba(98,233,255,0));
  color: #62e9ff;
  filter: drop-shadow(0 6px 18px rgba(98,233,255,0.35));
}
.hh-launcher-eyebrow {
  font-family: var(--elev-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  color: #62e9ff;
  opacity: 0.85;
  margin-top: 4px;
}
.hh-launcher-title {
  font-family: var(--font-heading, 'Unbounded', 'Rajdhani', var(--elev-font, sans-serif));
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.05;
  margin-top: -2px;
}
.hh-launcher-sub {
  font-size: 13px;
  color: var(--elev-ink-dim, #a4a9c9);
  text-align: center;
  line-height: 1.45;
}
.hh-launcher-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hh-launcher-opt {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--elev-ink, #f5f6ff);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.hh-launcher-opt:hover, .hh-launcher-opt:focus-visible {
  background: rgba(124,111,247,0.10);
  border-color: rgba(124,111,247,0.4);
  outline: none;
}
/* v153.76 — Featured launcher option (Solo vs AI). Subtle gold rim
   to mark it as the recommended starting point for new players. */
.hh-launcher-opt--featured {
  background: linear-gradient(180deg, rgba(255,217,61,0.08), rgba(255,217,61,0.02));
  border-color: rgba(255,217,61,0.32);
}
.hh-launcher-opt--featured:hover, .hh-launcher-opt--featured:focus-visible {
  background: linear-gradient(180deg, rgba(255,217,61,0.14), rgba(255,217,61,0.04));
  border-color: rgba(255,217,61,0.55);
}
.hh-launcher-opt--featured .hh-launcher-opt-icon {
  background: rgba(255,217,61,0.18);
  color: #ffd93d;
}
.hh-launcher-opt:active { transform: translateY(1px); }
.hh-launcher-opt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(124,111,247,0.18);
  color: #cdc4ff;
  flex-shrink: 0;
}
.hh-launcher-opt-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hh-launcher-opt-sub {
  font-size: 12px;
  color: var(--elev-ink-dim, #a4a9c9);
  line-height: 1.4;
  margin-top: 3px;
}
.hh-launcher-pill {
  font-family: var(--elev-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(98,233,255,0.18);
  color: #9ce0ee;
  font-weight: 700;
}
.hh-launcher-join-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.hh-launcher-join-row input {
  flex: 1;
  font-family: var(--elev-mono, 'JetBrains Mono', monospace);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.36em;
  padding: 12px 14px 12px 20px;
  background: rgba(0,0,0,0.36);
  border: 1px solid rgba(124,111,247,0.32);
  border-radius: 12px;
  color: var(--elev-ink, #f5f6ff);
  text-transform: uppercase;
  text-align: center;
  outline: none;
}
.hh-launcher-join-row input:focus {
  border-color: rgba(124,111,247,0.7);
  box-shadow: 0 0 0 3px rgba(124,111,247,0.18);
}
.hh-launcher-close {
  width: 100%;
}
@media (max-width: 480px) {
  .hh-launcher-card { padding: 20px 16px; }
  .hh-launcher-opt { padding: 12px; gap: 10px; }
  .hh-launcher-opt-icon { width: 40px; height: 40px; }
  .hh-waiting-code { font-size: 32px; padding: 10px 16px 10px 22px; }
}

/* v153.63 — Profile recent-form empty state. The placeholder ten "·"
   dots read as broken on a fresh profile; this replaces them with ten
   hex outlines (brand-language) plus a one-line invitation. Sits inside
   the same .elev-pf-form host so layout is unchanged when results land. */
.elev-pf-form-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.elev-pf-form-empty-hex {
  flex-shrink: 0;
  opacity: 0.55;
}
.elev-pf-form-empty-hint {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 12px;
  color: var(--elev-ink-mute, #6a6f8f);
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   v153.139 — SHOP DOPAMINE LAYER
   ─────────────────────────────────────────────────────────────
   Goal: every shop interaction should reward the eye + nervous
   system. Tiles respond to touch (lift + scale), purchases stage
   a multi-beat celebration (scale punch + glow ring + confetti
   particles + "UNLOCKED!" floater + animated coin counter
   countdown), legendary tiles get an ambient sparkle, and each
   tab shows a collection progress bar so players can see how
   close they are to "complete" — a strong target-setting drive.
   ═══════════════════════════════════════════════════════════════ */

/* ── Universal tile interactions ────────────────────────────── */
/* Apply to every shop tile type via shared selector list. Hover
   lifts + scales slightly + grows shadow. Active presses down. */
.elev-shop-color-card,
.elev-shop-skin-card,
.elev-shop-theme-card,
.elev-shop-effect-row {
  transition:
    transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 180ms ease;
}
.elev-shop-color-card:hover,
.elev-shop-skin-card:hover,
.elev-shop-theme-card:hover,
.elev-shop-effect-row:hover {
  transform: translateY(-2px) scale(1.012);
  box-shadow:
    0 14px 28px -10px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.elev-shop-color-card:active,
.elev-shop-skin-card:active,
.elev-shop-theme-card:active,
.elev-shop-effect-row:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 80ms;
}

/* ── Just-unlocked celebration on purchase ──────────────────── */
@keyframes shopJustUnlockedPunch {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.06); }
  60%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes shopJustUnlockedGlow {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 200, 87, 0.85),
      0 0 0 0 rgba(255, 200, 87, 0.55) inset;
  }
  60% {
    box-shadow:
      0 0 0 18px rgba(255, 200, 87, 0),
      0 0 0 6px rgba(255, 200, 87, 0.15) inset;
  }
  100% {
    box-shadow:
      0 0 0 30px rgba(255, 200, 87, 0),
      0 0 0 0 rgba(255, 200, 87, 0) inset;
  }
}
.just-unlocked {
  animation:
    shopJustUnlockedPunch 540ms cubic-bezier(0.2, 0.7, 0.2, 1),
    shopJustUnlockedGlow 1100ms ease-out !important;
  z-index: 5;
  position: relative;
}

/* "UNLOCKED!" floater — rises from the tile center, fades out */
@keyframes shopUnlockedFloat {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  18%  { transform: translate(-50%, -55%) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, -120%) scale(0.95); opacity: 0; }
}
.shop-unlocked-floater {
  position: fixed;
  font-family: var(--elev-display, 'Big Shoulders Display', sans-serif);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: #ffe28a;
  text-shadow:
    0 0 18px rgba(255, 200, 87, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 9999;
  animation: shopUnlockedFloat 1.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  white-space: nowrap;
}

/* Confetti micro-burst particles — radiate from tile center */
@keyframes shopConfettiFly {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  100% {
    transform:
      translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)))
      rotate(var(--rot));
    opacity: 0;
  }
}
.shop-confetti-particle {
  position: fixed;
  width: 6px;
  height: 10px;
  border-radius: 1.5px;
  pointer-events: none;
  z-index: 9998;
  animation: shopConfettiFly 1.4s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
  will-change: transform, opacity;
}

/* Coin deduct floater — "−500" rises from coin counter, fades */
@keyframes shopCoinDeductFloat {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  20%  { transform: translate(-50%, -90%) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(0.9); opacity: 0; }
}
.shop-coin-deduct-floater {
  position: fixed;
  font-family: var(--elev-display, 'Big Shoulders Display', sans-serif);
  font-weight: 800;
  font-size: 18px;
  color: #ff7c8a;
  text-shadow:
    0 0 12px rgba(255, 124, 138, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 9999;
  animation: shopCoinDeductFloat 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

/* Coin counter — when actively animating, give it a subtle pulse so
   the eye locks onto it. The .coin-pulsing class is added by the
   _animateCoinCount helper while a transition is in flight. */
@keyframes shopCoinCounterPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}

/* ── Legendary tile ambient sparkle ─────────────────────────── */
/* CSS-only — pseudo-elements + keyframes generate two tiny gold
   sparkles that drift around the tile corner. Cheap because it's
   pure compositor-driven transform/opacity. */
@keyframes shopLegendarySparkle {
  0%, 100% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20%  { opacity: 1; }
  50%  { transform: translate(8px, -6px) scale(1.1); opacity: 0.9; }
  80%  { opacity: 0.5; }
}
.elev-shop-color-card.legendary,
.elev-shop-skin-card.legendary,
.elev-shop-theme-card.legendary,
.elev-shop-effect-row.legendary,
[class*="legendary"]:not(.elev-shop-badge) {
  /* No-op base — sparkles live on tiles that explicitly set the badge.
     We anchor them via the tile's existing badge element. */
}
/* Two drifting sparkles per legendary badge — pure CSS. */
.elev-shop-badge-legendary {
  position: relative;
}
.elev-shop-badge-legendary::before,
.elev-shop-badge-legendary::after {
  content: '✦';
  position: absolute;
  font-size: 10px;
  color: #ffe28a;
  text-shadow: 0 0 6px rgba(255, 200, 87, 0.9);
  pointer-events: none;
  animation: shopLegendarySparkle 2.8s ease-in-out infinite;
  will-change: transform, opacity;
}
.elev-shop-badge-legendary::before {
  top: -4px;
  left: -8px;
  animation-delay: 0s;
}
.elev-shop-badge-legendary::after {
  top: -2px;
  right: -10px;
  animation-delay: 1.4s;
}

/* ── Collection progress bar ────────────────────────────────── */
.shop-collection-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--elev-ink-dim, #a4a9c9);
}
.shop-collection-progress .scp-label {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.shop-collection-progress .scp-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.shop-collection-progress .scp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent, #7c6ff7), #ffc857);
  border-radius: 999px;
  transition: width 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 0 0 12px var(--accent-glow, rgba(124, 111, 247, 0.55));
}
.shop-collection-progress .scp-pct {
  flex-shrink: 0;
  color: #ffe28a;
  font-variant-numeric: tabular-nums;
}
/* When collection is complete (100%), the bar pulses softly */
@keyframes shopCollectionComplete {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 200, 87, 0.5); }
  50%      { box-shadow: 0 0 22px rgba(255, 200, 87, 0.85); }
}
.shop-collection-progress.is-complete .scp-fill {
  background: linear-gradient(90deg, #ffc857, #ff7cc4);
  animation: shopCollectionComplete 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   v153.140 — CONSTANT DOPAMINE LAYER
   ─────────────────────────────────────────────────────────────
   Universal coin shower (every coin grant), navbar pulse on
   landing, daily login modal, free chest, win streak escalation,
   level-up celebration, achievement toast upgrade, NEW badges.
   ═══════════════════════════════════════════════════════════════ */

/* ── Coin shower: individual coin elements ──────────────────── */
/* Each coin is an absolutely-positioned 16px hex SVG that arcs from
   source point to navbar coin pill. Transform driven so it stays on
   the GPU compositor — cheap even with 12 coins flying at once. */
.coin-shower-coin {
  position: fixed;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  pointer-events: none;
  z-index: 9999;
  filter: drop-shadow(0 0 6px rgba(255, 200, 87, 0.6))
          drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
  will-change: transform, opacity;
}

/* Landing pulse on the navbar coin counter — fires when each coin
   arrives. Brief scale bump so the eye locks onto the growing total. */
@keyframes coinLandPulse {
  0%   { transform: scale(1); color: inherit; }
  35%  { transform: scale(1.18); color: #ffe28a; }
  100% { transform: scale(1); color: inherit; }
}
.snc-num.coin-land-pulse,
#navShopCoinsNum.coin-land-pulse {
  animation: coinLandPulse 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
  display: inline-block;
}

/* ── Daily login modal ──────────────────────────────────────── */
.daily-login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 18, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: dailyLoginFadeIn 240ms ease-out;
}
@keyframes dailyLoginFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.daily-login-card {
  /* v153.144 — Was hardcoded cosmic gradient. Now pulls from theme
     surface tokens so the card tints to whichever theme is equipped.
     Gold accent border stays — daily-reward IS gold-themed regardless. */
  background: linear-gradient(160deg, var(--surface, #1a1230) 0%, var(--surface2, #261848) 100%);
  border: 1px solid rgba(255, 200, 87, 0.30);
  border-radius: 22px;
  padding: 24px 22px 22px;
  max-width: 380px;
  width: 100%;
  box-shadow:
    0 30px 70px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 50px rgba(255, 200, 87, 0.18);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: dailyLoginCardIn 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes dailyLoginCardIn {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* Subtle radial sheen on the card so it feels luxe, not flat */
.daily-login-card::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 30% 0%, rgba(255, 200, 87, 0.18), transparent 50%);
  pointer-events: none;
}
.daily-login-card > * { position: relative; z-index: 1; }
.daily-login-streak-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 200, 87, 0.16);
  border: 1px solid rgba(255, 200, 87, 0.4);
  color: #ffe28a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.daily-login-title {
  font-family: var(--elev-display, 'Big Shoulders Display', sans-serif);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 0.04em;
  color: #fff5e0;
  text-shadow: 0 2px 14px rgba(255, 200, 87, 0.4);
  margin: 4px 0 4px;
  line-height: 1.05;
}
.daily-login-sub {
  color: var(--text-dim, #a4a9c9);
  font-size: 13px;
  margin-bottom: 18px;
}
/* 7-day calendar grid */
.daily-login-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
.daily-login-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: all 180ms ease;
  position: relative;
}
.daily-login-day .dld-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim, #a4a9c9);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.daily-login-day .dld-amount {
  font-size: 12px;
  font-weight: 800;
  color: #ffd56b;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.daily-login-day.is-claimed {
  background: rgba(107, 203, 119, 0.10);
  border-color: rgba(107, 203, 119, 0.35);
  opacity: 0.75;
}
.daily-login-day.is-claimed .dld-amount {
  color: #6bcb77;
  text-decoration: line-through;
  text-decoration-color: rgba(107, 203, 119, 0.5);
}
.daily-login-day.is-today {
  background: linear-gradient(180deg, rgba(255, 200, 87, 0.22), rgba(255, 200, 87, 0.06));
  border-color: rgba(255, 200, 87, 0.7);
  box-shadow: 0 0 18px rgba(255, 200, 87, 0.3);
  transform: translateY(-2px) scale(1.06);
}
.daily-login-day.is-today .dld-num,
.daily-login-day.is-today .dld-amount {
  color: #ffe28a;
}
.daily-login-day.is-future {
  opacity: 0.5;
}
.daily-login-day.is-bonus {
  /* Day 7 — visually elevated as the streak target */
  background: linear-gradient(180deg, rgba(255, 124, 196, 0.12), rgba(255, 200, 87, 0.06));
  border-color: rgba(255, 124, 196, 0.35);
}
.daily-login-claim-btn {
  width: 100%;
  padding: 16px 22px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1230;
  background: linear-gradient(180deg, #ffe28a 0%, #ffc857 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow:
    0 12px 30px -10px rgba(255, 200, 87, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -2px 0 rgba(0, 0, 0, 0.18) inset;
  transition: transform 100ms ease, filter 140ms ease;
}
.daily-login-claim-btn:hover {
  filter: brightness(1.08);
}
.daily-login-claim-btn:active {
  transform: scale(0.98);
}
.daily-login-tomorrow {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-dim, #a4a9c9);
  letter-spacing: 0.4px;
}
.daily-login-tomorrow strong {
  color: #ffd56b;
  font-weight: 800;
}

/* ── Free chest button on lobby ─────────────────────────────── */
.free-chest-btn {
  position: fixed;
  bottom: 92px;
  right: 14px;
  width: 60px;
  height: 60px;
  /* v153.144 — Theme-bound surface so the chest doesn't sit on a
     cosmic-blue card while the lobby behind shows e.g. lava cracks. */
  background: linear-gradient(180deg, var(--surface2, #2a1a30) 0%, var(--surface, #1a1023) 100%);
  border: 1px solid rgba(255, 200, 87, 0.30);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  transition: transform 160ms ease, box-shadow 200ms ease, border-color 200ms ease;
  font-family: inherit;
  color: var(--text-dim, #a4a9c9);
  padding: 0;
}
.free-chest-btn .fcb-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.free-chest-btn .fcb-status {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.free-chest-btn.is-ready {
  background: linear-gradient(180deg, #4a3010 0%, #2e1f08 100%);
  border-color: rgba(255, 200, 87, 0.65);
  color: #ffe28a;
  animation: freeChestReady 1.6s ease-in-out infinite;
}
@keyframes freeChestReady {
  0%, 100% {
    box-shadow:
      0 8px 22px -8px rgba(255, 200, 87, 0.6),
      0 0 0 0 rgba(255, 200, 87, 0.35);
  }
  50% {
    box-shadow:
      0 8px 22px -8px rgba(255, 200, 87, 0.8),
      0 0 0 8px rgba(255, 200, 87, 0);
  }
}
.free-chest-btn.is-ready .fcb-icon {
  animation: freeChestBob 1.6s ease-in-out infinite;
}
@keyframes freeChestBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.free-chest-btn:active { transform: scale(0.94); }

/* ── Win streak escalation banner ───────────────────────────── */
@keyframes winStreakIn {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  35%  { transform: scale(1.15) rotate(0deg); opacity: 1; }
  60%  { transform: scale(0.95) rotate(0deg); opacity: 1; }
  85%  { transform: scale(1.02) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.win-streak-banner {
  display: inline-block;
  margin: 6px auto 4px;
  padding: 7px 18px;
  background: linear-gradient(135deg, var(--ws-c1, #ff7cc4) 0%, var(--ws-c2, #ffc857) 100%);
  color: #fff;
  font-family: var(--elev-display, 'Big Shoulders Display', sans-serif);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  box-shadow:
    0 8px 22px -8px rgba(255, 200, 87, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  animation: winStreakIn 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.win-streak-banner.tier-double { --ws-c1: #62e9ff; --ws-c2: #6bcb77; }
.win-streak-banner.tier-triple { --ws-c1: #ff7cc4; --ws-c2: #ffc857; }
.win-streak-banner.tier-streak { --ws-c1: #ffc857; --ws-c2: #ff6b6b; }

/* ── Level-up celebration overlay ───────────────────────────── */
.levelup-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: levelupFlash 1500ms ease-out forwards;
}
@keyframes levelupFlash {
  0%   { background: rgba(255, 200, 87, 0); }
  20%  { background: rgba(255, 200, 87, 0.18); }
  100% { background: rgba(255, 200, 87, 0); }
}
.levelup-banner {
  font-family: var(--elev-display, 'Big Shoulders Display', sans-serif);
  font-weight: 900;
  font-size: 56px;
  letter-spacing: 0.08em;
  color: #fff5e0;
  text-shadow:
    0 0 28px rgba(255, 200, 87, 0.95),
    0 4px 12px rgba(0, 0, 0, 0.55);
  animation: levelupBannerIn 1500ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes levelupBannerIn {
  0%   { transform: scale(0.4); opacity: 0; }
  20%  { transform: scale(1.15); opacity: 1; }
  60%  { transform: scale(1); opacity: 1; }
  85%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* ── Achievement toast upgrade ──────────────────────────────── */
.achievement-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  /* v153.144 — Theme-bound surface (was hardcoded cosmic plum). */
  background: linear-gradient(180deg, var(--surface2, #2a1a30) 0%, var(--surface, #1a1023) 100%);
  border: 1px solid rgba(255, 200, 87, 0.55);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 380px;
  box-shadow:
    0 16px 40px -12px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(255, 200, 87, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  z-index: 10001;
  animation: achievementToastIn 380ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
             achievementToastOut 460ms ease-in forwards 3.4s;
}
@keyframes achievementToastIn {
  to { transform: translateX(-50%) translateY(0); }
}
@keyframes achievementToastOut {
  to { transform: translateX(-50%) translateY(-150%); opacity: 0; }
}
.achievement-toast .at-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.25), rgba(255, 124, 196, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffe28a;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(255, 200, 87, 0.4);
}
.achievement-toast .at-body { flex: 1; min-width: 0; }
.achievement-toast .at-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffe28a;
  margin-bottom: 2px;
}
.achievement-toast .at-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text, #fff);
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.achievement-toast .at-desc {
  font-size: 12px;
  color: var(--text-dim, #a4a9c9);
  margin-top: 2px;
}

/* ── NEW! badge pulse on shop tiles ─────────────────────────── */
@keyframes shopNewItemPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 124, 196, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 124, 196, 0.35); }
}
[data-shop-item-id].is-new-unseen {
  animation: shopNewItemPulse 1.8s ease-in-out infinite;
}

/* Red dot on the shop nav button — wired up by _refreshShopNewBadge */
.shop-nav-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d6d;
  box-shadow: 0 0 0 2px rgba(20, 14, 30, 0.95), 0 0 8px rgba(255, 77, 109, 0.7);
  animation: shopNewDotPulse 1.6s ease-in-out infinite;
}
@keyframes shopNewDotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HOME SCREEN REDESIGN — v154 Phase 1
 *
 * Goal: stop covering the live animated demo backdrop with menu chrome.
 * Strategy: glass panels, corner controls, single hero CTA, secondary modes
 * demoted to a quieter row. All gated behind body.home-redesign-v1 so a
 * single class toggle reverts to the prior layout.
 *
 * Reads-as-AI-slop tells we're killing:
 *  - 7-icon top nav rail (looks like a settings panel, not a game)
 *  - Profile chip dominating the hero space (player isn't here for stats)
 *  - Three near-equal-weight cards stacked with no visual hierarchy
 *  - Solid panels obscuring the already-present live game backdrop
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Top-line: hide the legacy nav rail; promote corner controls + overflow.
 * The pre-existing rule at line ~4826 uses `#lobby.elev-home .elev-home-nav`
 * with `display: flex !important` — higher specificity (ID-anchored) wins
 * even with !important, so we bump our selector to match. */
body.home-redesign-v1 #lobby.elev-home .elev-home-nav.lobby-nav,
body.home-redesign-v1 #lobby .lobby-nav { display: none !important; }

body.home-redesign-v1 #lobby.elev-home {
  /* v154.3 — Reserve a clear header band for the corner pills before the
   * wordmark begins, with comfortable breathing room (was 84px → 28px gap;
   * now 116px → ~60px gap). Pills max out at top:14 + height:42 = 56px;
   * the rest is breathing room so the wordmark never reads as "stacked
   * into the corner pill row." */
  padding-top: 116px !important;
  padding-bottom: 32px !important;
}

/* Narrow viewports (phones in portrait): shrink the corner pills so they
 * don't extend toward the centered wordmark and create a horizontal-overlap
 * read. At ≤560px the pills go from generous-paddding to compact: smaller
 * avatar, tighter copy, no "HP" suffix on the power number. */
@media (max-width: 560px) {
  body.home-redesign-v1 .lobby-corner-identity-half { padding: 4px 9px; }
  body.home-redesign-v1 .lobby-corner-identity-profile { padding-left: 4px; padding-right: 9px; }
  body.home-redesign-v1 .lobby-corner-identity-shop { padding-left: 9px; padding-right: 11px; }
  body.home-redesign-v1 .lobby-corner-identity-avatar { width: 24px; height: 24px; font-size: 13px; }
  body.home-redesign-v1 .lobby-corner-identity-power { font-size: 11px; }
  body.home-redesign-v1 .lobby-corner-identity-coins { font-size: 12px; }
  body.home-redesign-v1 .lobby-corner-btn { width: 36px; height: 36px; }
  body.home-redesign-v1 .lobby-corner-btn svg { width: 18px; height: 18px; }
  /* Wordmark also: tighten on narrow widths so its visible content sits
   * cleanly between the two pill columns. */
  body.home-redesign-v1 .elev-home-wordmark { transform: scale(0.92); transform-origin: top center; }
}

/* Very narrow viewports (≤380px, e.g. iPhone SE): hide the "HP" suffix
 * entirely so just the number shows in the pill. The label is implicit
 * once the user has spent any time with the game. */
@media (max-width: 380px) {
  body.home-redesign-v1 .lobby-corner-identity-power::after {
    /* Use ::after to override the inline " HP" — actually we render
     * .power as `<strong>1000</strong> HP` so the literal HP is in
     * a text node; can't strip it via ::after alone. Instead fall back
     * to scaling the whole pill smaller. */
  }
  body.home-redesign-v1 .lobby-corner-identity { transform: scale(0.92); transform-origin: top left; }
  body.home-redesign-v1 .lobby-corner-controls { transform: scale(0.92); transform-origin: top right; }
}

/* ── Corner controls (top-right): settings gear + overflow ── */
.lobby-corner-controls {
  display: none;
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 14px));
  right: max(14px, env(safe-area-inset-right, 14px));
  z-index: 30;
  gap: 8px;
  align-items: center;
}
body.home-redesign-v1 .lobby-corner-controls { display: flex; }

.lobby-corner-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(20, 14, 30, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f5f6ff;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.lobby-corner-btn:hover {
  background: rgba(40, 30, 60, 0.7);
  border-color: rgba(139,124,255,0.4);
  transform: translateY(-1px);
}
.lobby-corner-btn svg { width: 20px; height: 20px; }

/* v154.40 — Corner-button text labels. Hidden by default (mobile keeps
 * the compact icon-only buttons), shown on tablet/desktop where the
 * extra horizontal real estate exists AND where the icons alone read
 * as "mystery cluster in the corner" rather than recognizable nav.
 * Joined to the icon inside the same pill (no separate hit target). */
.lobby-corner-btn-label {
  display: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-left: 6px;
  font-family: inherit;
  color: inherit;
}
@media (min-width: 768px) {
  body.home-redesign-v1 .lobby-corner-btn {
    width: auto;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 22px;
    gap: 0;
  }
  body.home-redesign-v1 .lobby-corner-btn .lobby-corner-btn-label {
    display: inline-block;
  }
  body.home-redesign-v1 .lobby-corner-controls {
    gap: 10px;
  }
}
/* Bigger still on desktop displays so the nav reads as deliberate
 * top-bar furniture instead of corner clutter. */
@media (min-width: 1024px) {
  body.home-redesign-v1 .lobby-corner-btn {
    height: 46px;
    padding: 0 16px;
    border-radius: 23px;
  }
  body.home-redesign-v1 .lobby-corner-btn svg { width: 22px; height: 22px; }
  body.home-redesign-v1 .lobby-corner-btn-label { font-size: 14px; }
}

/* v154.7 — Friends online-count badge on the corner Friends button.
 * Shows in the top-right corner of the button, brand-purple pill with
 * the online count. Hidden when 0; pulses subtly when ≥1. */
.lobby-corner-btn { position: relative; }
.lobby-corner-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b7cff, #ff7cc4);
  color: #fff;
  font: 700 10px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  box-shadow: 0 0 0 2px rgba(20,14,30,0.95), 0 0 12px rgba(139,124,255,0.5);
  pointer-events: none;
}
@keyframes friendsBadgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
.lobby-corner-badge[data-online="true"] {
  animation: friendsBadgePulse 2.4s ease-in-out infinite;
}

/* ── Identity pill (top-left): two click targets in one badge.
 * v154.2 — Split: left half (avatar + HP) → profile, right half (coins) → shop.
 * Visually unified with a single border + backdrop blur and a hairline divider;
 * each half lights up independently on hover so the two-target affordance
 * is discoverable without explanation. */
.lobby-corner-identity {
  display: none;
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 14px));
  left: max(14px, env(safe-area-inset-left, 14px));
  z-index: 30;
  align-items: stretch;
  border-radius: 999px;
  background: rgba(20, 14, 30, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  color: #f5f6ff;
  overflow: hidden; /* keep the inner halves within the rounded outer */
  transition: border-color 0.18s ease, transform 0.12s ease;
}
body.home-redesign-v1 .lobby-corner-identity { display: inline-flex; }
.lobby-corner-identity:hover { border-color: rgba(139,124,255,0.4); }

.lobby-corner-identity-half {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  color: inherit;
  font: inherit;
  transition: background 0.16s ease;
}
.lobby-corner-identity-half:hover { background: rgba(139,124,255,0.14); }
.lobby-corner-identity-half:active { transform: scale(0.98); }
.lobby-corner-identity-half:focus-visible {
  outline: 2px solid rgba(139,124,255,0.55);
  outline-offset: -2px;
}

.lobby-corner-identity-profile { padding-left: 6px; padding-right: 12px; }
.lobby-corner-identity-shop {
  padding-left: 11px; padding-right: 14px;
  border-left: 1px solid rgba(255,255,255,0.14);
}
.lobby-corner-identity-shop:hover {
  /* coin-tinted hover so the shop affordance reads as "currency" not just "tap" */
  background: rgba(245,203,92,0.14);
}

.lobby-corner-identity-avatar {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #8b7cff, #ff7cc4);
  font-size: 15px;
  flex-shrink: 0;
}
.lobby-corner-identity-power {
  font-variant-numeric: tabular-nums;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, "Menlo", monospace;
  letter-spacing: 0.5px;
  font-size: 12px;
  color: #d8d2ff;
}
.lobby-corner-identity-power strong {
  color: #f5f6ff;
  font-weight: 700;
}
.lobby-corner-identity-coins {
  display: inline-flex; align-items: center; gap: 5px;
  font-variant-numeric: tabular-nums;
  color: #f5cb5c;
  font-size: 13px;
  font-weight: 700;
}
.lobby-corner-identity-coins svg { width: 14px; height: 14px; }

/* ── Overflow tray (slide-up sheet from bottom) ── */
.lobby-overflow-tray {
  position: fixed;
  inset: 0 0 0 0;
  z-index: 100;
  display: none;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: flex-end;
  justify-content: center;
}
.lobby-overflow-tray.show { display: flex; }
.lobby-overflow-sheet {
  width: 100%;
  max-width: 480px;
  background: rgba(15, 10, 28, 0.96);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px 24px 0 0;
  padding: 18px 18px max(28px, env(safe-area-inset-bottom, 18px));
  display: flex; flex-direction: column; gap: 4px;
  animation: trayUp 0.24s cubic-bezier(0.2, 0.85, 0.4, 1.0);
}
@keyframes trayUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.lobby-overflow-sheet-handle {
  width: 44px; height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  margin: 0 auto 14px;
}
.lobby-overflow-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px 12px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: #f5f6ff;
  font: 600 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.lobby-overflow-item:hover, .lobby-overflow-item:focus-visible {
  background: rgba(139,124,255,0.10);
  outline: none;
}
.lobby-overflow-item svg { width: 22px; height: 22px; color: #a4a9c9; flex-shrink: 0; }
.lobby-overflow-item .lobby-overflow-item-meta {
  margin-left: auto;
  font-size: 12px;
  color: #a4a9c9;
  font-variant-numeric: tabular-nums;
}

/* ── Glass treatment: panels become translucent so backdrop shows through ── */
body.home-redesign-v1 .elev-home-rank-card { display: none !important; }
/* The on-home rank card is now redundant with the corner identity pill. */

/* v154.2 — Profile chip card is fully hidden on home. The corner identity
 * pill (avatar + HP + coins/shop) covers identity reachability; players
 * aren't here to look at their own stats, they're here to play. The chip
 * stays in the DOM (handlers like onTurnStripClick still read its IDs)
 * but is hidden as a visual surface on home.
 *
 * Live-game reentry is already covered by #rejoinBanner above the chip,
 * so we don't need to surface the in-chip turn strip here. */
body.home-redesign-v1 .elev-home-identity-chip {
  display: none !important;
}

/* The wordmark — keep it, but float it gently above the demo. */
body.home-redesign-v1 .elev-home-wordmark {
  background: transparent !important;
  border: none !important;
  margin-bottom: 28px;
}

/* Hero CTA — Quick Match. v154.7 simplified back from the v154.5 stacked-
 * subtitle version: HP/player-count/ranked-state were already shown in the
 * corner pill + picker + the existing .ranked-pill, so the subtitle was
 * triple-redundant clutter. Now just bolt + big "Play" + the existing
 * Placement/Ranked pill in the corner. Slightly bigger than original
 * (84px vs 76px) but no longer screaming. */
body.home-redesign-v1 .elev-home-quick-match {
  min-height: 84px !important;
  font-size: 24px !important;
  border-radius: 22px !important;
  padding: 0 26px !important;
  box-shadow:
    0 18px 60px rgba(139,124,255,0.32),
    0 4px 18px rgba(255,124,196,0.18),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
  margin-top: 8px !important;
  gap: 12px !important;
}
body.home-redesign-v1 .elev-home-quick-match svg { width: 26px !important; height: 26px !important; }

/* v154.5 — Events 2-tile row (Tournament | Weekly). Matches the visual
 * rhythm of the Bot Match | Pass & Play row above, replacing two
 * separate full-width rows. Tighter home stack, more deliberate
 * hierarchy: hero PLAY → Bot/Pass row → Events row → Friend → Modes. */
body.home-redesign-v1 .elev-home-events-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 0 !important;
}
body.home-redesign-v1 .elev-home-events-tile {
  position: relative;
}
body.home-redesign-v1 .elev-home-events-tile #weeklyRankChip {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  margin-left: 0 !important;
}

/* v154.5 — Tips overlay. Dim italic text below the wordmark, fades in/out
 * every ~9s. Pointer-events disabled so it never blocks taps to anything
 * underneath it. Positioned absolutely so it doesn't push other content. */
.lobby-tip-mount {
  display: none;
  pointer-events: none;
  width: 100%;
  text-align: center;
  margin: 6px 0 4px 0;
  /* Fit up to two lines of 12.5px italic text without clipping. */
  min-height: 38px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
body.home-redesign-v1 .lobby-tip-mount { display: block; }
.lobby-tip-mount.show {
  opacity: 1;
  transform: translateY(0);
}
.lobby-tip-text {
  font: italic 500 12.5px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  color: rgba(245, 246, 255, 0.55);
  letter-spacing: 0.2px;
  padding: 0 24px;
  line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
  .lobby-tip-mount { transition: opacity 0.2s ease; transform: none !important; }
}

/* Tutorial CTA — same hero treatment when it's the visible primary */
body.home-redesign-v1 .tutorial-cta {
  background: linear-gradient(135deg, rgba(139,124,255,0.22), rgba(255,124,196,0.18)) !important;
  border: 1px solid rgba(139,124,255,0.45) !important;
  min-height: 86px !important;
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  box-shadow:
    0 14px 44px rgba(139,124,255,0.22),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
body.home-redesign-v1 .tutorial-cta-skip {
  opacity: 0.6;
  font-size: 12px !important;
}

/* Mode tiles — drop them to translucent secondary surfaces */
body.home-redesign-v1 .elev-home-mode-tile {
  background: rgba(20, 14, 30, 0.40) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* Create Game / Join Code / Find a Game — same translucent treatment */
body.home-redesign-v1 .elev-home-create-open-btn,
body.home-redesign-v1 .elev-home-codejoin,
body.home-redesign-v1 .elev-home-browse,
body.home-redesign-v1 .save-progress-banner,
body.home-redesign-v1 #resumeBanner,
body.home-redesign-v1 #rejoinBanner {
  background: rgba(20, 14, 30, 0.42) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
}

/* Player count picker — v154.7: removed the glass square background that
 * was leaking visible square edges around each hex SVG. The hex shape is
 * the affordance; let the SVG be the only visible element. */
body.home-redesign-v1 .elev-home-player-count .qm-player-opt {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Backdrop reveal: ensure the lobby root is fully transparent so the live
 * demo canvas behind it is unobscured. */
body.home-redesign-v1 #lobby.elev-home {
  background: transparent !important;
}

/* Subtle vertical fade at top + bottom so wordmark and CTAs read against
 * any backdrop (light or dark hex captures). Doesn't block backdrop —
 * just gives the foreground enough contrast. */
body.home-redesign-v1 #lobby.elev-home::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,8,20,0.55), rgba(10,8,20,0));
  z-index: 1;
}
body.home-redesign-v1 #lobby.elev-home::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(10,8,20,0.55), rgba(10,8,20,0));
  z-index: 1;
}

/* v154.4 — Skip-tutorial link reframed + visually demoted.
 * Was: full-width centered hero-adjacent link reading "Skip tutorial — go
 * straight to Quick Match" (a downgrade frame). Now: small, dim, right-
 * aligned self-id link "I already know how to play →" that doesn't compete
 * with the tutorial hero CTA. */
body.home-redesign-v1 #lobbyTutorialSkip.tutorial-cta-skip {
  display: block !important;
  margin: 6px 4px 4px auto !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(245, 246, 255, 0.55) !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  text-align: right !important;
  width: auto !important;
  letter-spacing: 0.2px !important;
  cursor: pointer;
  transition: color 0.16s ease;
}
body.home-redesign-v1 #lobbyTutorialSkip.tutorial-cta-skip:hover {
  color: rgba(245, 246, 255, 0.85) !important;
}
/* Hide entirely once the tutorial has been completed — the skip link only
 * exists to relieve the tutorial-CTA from feeling forced. After tutorial
 * the hero PLAY button is the answer; no need to keep advertising "skip." */
body.home-redesign-v1 #lobbyTutorialSkip.tutorial-cta-skip[data-tutorial-done="true"] {
  display: none !important;
}

/* v154.4 — Hide legacy friend-play surfaces on home. They're consolidated
 * into the new #playFriendsBtn + slide-up sheet. Kept in DOM so existing
 * JS that reads/writes #createRoomBtn / #joinCode / #browseGamesBtn keeps
 * working — only their on-home rendering is suppressed. */
body.home-redesign-v1 [data-legacy-friend-surface="hidden"] {
  display: none !important;
}

/* Play-with-a-friend full-width button (lives where the three legacy rows used to). */
.elev-home-play-friends {
  display: none;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(20, 14, 30, 0.42);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  color: #f5f6ff;
  font: 600 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
body.home-redesign-v1 .elev-home-play-friends { display: flex; }
.elev-home-play-friends:hover {
  background: rgba(40, 30, 60, 0.55);
  border-color: rgba(139,124,255,0.32);
  transform: translateY(-1px);
}
.elev-home-play-friends-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(139,124,255,0.18);
  color: #b3a8ff;
  flex-shrink: 0;
}
.elev-home-play-friends-body {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.elev-home-play-friends-title {
  font: 700 16px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  color: #f5f6ff;
}
.elev-home-play-friends-sub {
  font: 500 12px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  color: rgba(245,246,255,0.6);
}
.elev-home-play-friends-cta {
  font: 600 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  color: #b3a8ff;
  white-space: nowrap;
  margin-left: auto;
}

/* Play-with-a-friend slide-up sheet — reuses .lobby-overflow-tray + sheet
 * shell from the overflow tray for animation/dismiss/blur consistency. */
.lobby-play-friends-sheet { padding-top: 14px !important; }
.lobby-play-friends-title {
  font: 700 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  color: rgba(245,246,255,0.7);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 12px;
}
.lobby-play-friends-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #f5f6ff;
  font: 600 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.lobby-play-friends-row:hover, .lobby-play-friends-row:focus-visible {
  background: rgba(139,124,255,0.10);
  border-color: rgba(139,124,255,0.22);
  outline: none;
}
.lobby-play-friends-row.primary {
  background: linear-gradient(135deg, rgba(139,124,255,0.18), rgba(255,124,196,0.12));
  border-color: rgba(139,124,255,0.32);
}
.lobby-play-friends-row.primary:hover { background: linear-gradient(135deg, rgba(139,124,255,0.28), rgba(255,124,196,0.18)); }
.pf-row-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: #b3a8ff;
  flex-shrink: 0;
}
.pf-row-icon svg { width: 18px; height: 18px; }
.pf-row-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pf-row-title { font: 700 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; }
.pf-row-sub { font: 500 12px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; color: rgba(245,246,255,0.6); }
.pf-row-cta { font: 600 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; color: #b3a8ff; margin-left: auto; }
.pf-row-count {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(139,124,255,0.18);
  color: #b3a8ff;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.lobby-play-friends-row.pf-row-input {
  background: rgba(20,14,30,0.55);
  border-color: rgba(255,255,255,0.10);
  cursor: default;
  padding: 10px 12px;
}
.lobby-play-friends-row.pf-row-input:hover { background: rgba(20,14,30,0.55); border-color: rgba(255,255,255,0.10); }
#pfJoinCode {
  flex: 1;
  background: transparent !important;
  border: none !important;
  color: #f5f6ff !important;
  font: 700 16px "JetBrains Mono", "SF Mono", ui-monospace, "Menlo", monospace !important;
  letter-spacing: 3px !important;
  padding: 6px 4px !important;
  text-transform: uppercase;
  outline: none;
  min-width: 0;
}
#pfJoinCode::placeholder { color: rgba(245,246,255,0.35); letter-spacing: 1.5px; font-weight: 600; }
.pf-row-join {
  background: linear-gradient(135deg, #8b7cff, #6d5ef5) !important;
  border: none;
  color: #fff;
  font: 700 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.pf-row-join:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* v154.4 — Bottom-right float audit. The free-chest claim button is genuinely
 * gameplay-relevant (daily currency reward) so it stays visible on home, but
 * shrunk so it doesn't compete with the hero CTA when "is-ready" + glowing.
 * The feedback FAB (chat bubble) is a meta dev-contact control — it earned
 * no permanent home real estate and was moved into the overflow tray as a
 * "Send feedback" item. */
/* v154.11 — Free-chest button polish.
 *
 * v154.4 shrunk the button frame from 60×60 → 44×44 but the inner icon was
 * still font-size:22px (the original size, scaled for 60×60). At 44×44 a
 * 22px emoji visually overflows its container — the 🎁 glyph almost hangs
 * outside the rounded box. Also: v154.4 tried to hide the "TAP" sub-label
 * via a `.free-chest-tap-label` selector that doesn't exist (the real label
 * is `.fcb-status`), so the label was never actually hidden.
 *
 * This pass: properly scale the icon for the new frame size, tighten the
 * spacing so icon + status sit centered, and only suppress the "TAP" text
 * when the chest is READY (the pulse animation does that job). When locked,
 * keep the countdown timer visible — it's useful info, not noise. */
body.home-redesign-v1 #freeChestBtn.free-chest-btn {
  width: 46px !important;
  height: 46px !important;
  bottom: max(18px, env(safe-area-inset-bottom, 18px)) !important;
  /* Lighter rounded square — softer than the original sharp 14px corners. */
  border-radius: 13px !important;
  padding: 4px 0 !important;
}
body.home-redesign-v1 #freeChestBtn.free-chest-btn .fcb-icon {
  /* Down from 22px → 18px so the glyph sits comfortably within the 46px
   * frame with breathing room on all sides. Tighter line-height + bottom
   * margin keeps the icon + status stack vertically centered. */
  font-size: 18px !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}
body.home-redesign-v1 #freeChestBtn.free-chest-btn .fcb-status {
  /* Down from 9px → 8px with tighter letter-spacing so the countdown
   * ("23h 49m") fits inside the narrower frame without truncating. */
  font-size: 8px !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
}
/* When the chest is ready, hide the "TAP" sub-label — the pulsing ring
 * + bobbing icon already signal claimable, and the label was the loudest
 * AI-slop tell in the bottom-right corner. The status element stays in
 * DOM (offset reserved) so the layout doesn't shift when state flips. */
body.home-redesign-v1 #freeChestBtn.free-chest-btn.is-ready .fcb-status {
  visibility: hidden !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * v154.13 — MOVE A: Global grain texture overlay.
 *
 * Single 128×128 transparent PNG (6.9KB), tileable, applied via body::after
 * with mix-blend-mode: overlay at 6% opacity. Sits above all content with
 * pointer-events:none so it never blocks interaction.
 *
 * WHY: Texture is the single biggest "made by humans" signal in 2026 mobile
 * UI. AI tooling defaults to smooth-and-clean; intentional grain reads as a
 * designer's hand. Replaces the perceptual weight that the 135° purple→pink
 * gradient used to do — we're keeping that gradient only on the victory hero
 * + a few standout moments (Move A part 2: gradient demotion below).
 *
 * Reduced-motion users: opt out via body.no-grain (added by the existing
 * `prefers-reduced-motion: reduce` listener). Tier-1 low-end devices: opt
 * out via body.no-grain (perf gate). Grain is decorative; turning it off
 * doesn't change information density. */
body.home-redesign-v1::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url('/assets/textures/grain.png');
  background-repeat: repeat;
  background-size: 128px 128px;
  mix-blend-mode: overlay;
  opacity: 0.07;
  z-index: 9999;
}
@media (prefers-reduced-motion: reduce) {
  /* Grain isn't motion, but accessibility profile users often prefer flat
   * surfaces over textured. Skip when the system requests reduced motion. */
  body.home-redesign-v1::after { display: none; }
}
body.no-grain::after { display: none !important; }

/* ═════════════════════════════════════════════════════════════════════════
 * v154.14 — Demo backdrop legibility fix.
 *
 * The animated lobby backdrop (#menuBg) starts mostly empty but after a few
 * minutes of self-play the demo board fills with colorful captures. Once
 * full, the saturated red/blue/purple hex captures compete with the
 * foreground UI — the "HEX BATTLE" wordmark blends into pink captures, the
 * italic tip becomes hard to read, and the menu cards look washed out.
 *
 * Three reinforcements to make the backdrop alive WITHOUT competing:
 *
 * (1) Saturation/brightness clamp on #menuBg. The board stays visible and
 *     animated, but captures are toned down so they read as ambient,
 *     not as content fighting for the eye. ~60% saturation + 70%
 *     brightness lands the demo in "atmospheric" territory without
 *     hiding it entirely.
 *
 * (2) Strengthen the top + bottom gradient scrims from 0.55 → 0.75 alpha
 *     so the wordmark + season strip have a cleaner spotlight to sit in.
 *
 * (3) Bump glass panel fills from 0.42 → 0.55 alpha so menu cards stand
 *     out more aggressively against the busiest backdrop states. Just
 *     enough to read as foreground, still translucent enough to feel like
 *     glass over the live demo.
 * ═════════════════════════════════════════════════════════════════════════ */

body.home-redesign-v1 #menuBg {
  filter: saturate(0.55) brightness(0.7);
  /* will-change keeps the filter on the compositor thread so it doesn't
   * block the demo's rAF loop on lower-end devices. */
  will-change: filter;
}

/* Strengthen the top + bottom gradient scrims */
body.home-redesign-v1 #lobby.elev-home::before {
  height: 200px !important;
  background: linear-gradient(180deg, rgba(10,8,20,0.78), rgba(10,8,20,0)) !important;
}
body.home-redesign-v1 #lobby.elev-home::after {
  height: 240px !important;
  background: linear-gradient(0deg, rgba(10,8,20,0.78), rgba(10,8,20,0)) !important;
}

/* Bump glass panel fills from 0.42 → 0.55 — selective: cards that need
 * legibility get the upgrade; the corner pill stays lighter because it
 * has its own backdrop blur and sits over the gradient scrims. */
body.home-redesign-v1 .elev-home-identity-chip,
body.home-redesign-v1 .elev-home-create-open-btn,
body.home-redesign-v1 .elev-home-codejoin,
body.home-redesign-v1 .elev-home-browse,
body.home-redesign-v1 .save-progress-banner,
body.home-redesign-v1 #resumeBanner,
body.home-redesign-v1 #rejoinBanner,
body.home-redesign-v1 .elev-home-mode-tile,
body.home-redesign-v1 .elev-home-play-friends {
  background: rgba(20, 14, 30, 0.55) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * v154.13 — MOVE B: Big Shoulders Display on display surfaces.
 *
 * Big Shoulders is a tall, narrow, geometric face with industrial posture —
 * already loaded for the wordmark. Promoting it to every display surface
 * (PLAY label, hero titles, section kickers, mode-tile labels, big stat
 * numbers) gives the app a single distinctive type signal vs the previous
 * Space Grotesk wallpaper. Body/labels stay system-stack for legibility.
 *
 * The font has a specific cap height + sidebearing that needs slightly
 * tighter letter-spacing than the previous face to avoid "ALL CAPS YELLING"
 * — applied per surface below. ═════════════════════════════════════════ */

/* Hero PLAY label */
body.home-redesign-v1 .elev-home-quick-match > span:not(.ranked-pill):not(.hero-play-stack) {
  font-family: var(--elev-display) !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
body.home-redesign-v1 .hero-play-title {
  font-family: var(--elev-display) !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* Tutorial CTA — START HERE kicker + Play the tutorial title */
body.home-redesign-v1 .tutorial-cta-kicker,
body.home-redesign-v1 .tutorial-cta-sub strong {
  font-family: var(--elev-display) !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Mode tile labels (Bot Match | Pass & Play, Tournament | Weekly) */
body.home-redesign-v1 .elev-home-mode-tile,
body.home-redesign-v1 .elev-home-events-tile,
body.home-redesign-v1 .elev-home-quest-tile {
  font-family: var(--elev-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

/* "Play with a friend" title + "Open" CTA */
body.home-redesign-v1 .elev-home-play-friends-title,
body.home-redesign-v1 .elev-home-play-friends-cta {
  font-family: var(--elev-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
}

/* Play-with-a-friend sheet title + row titles */
body.home-redesign-v1 .lobby-play-friends-title,
body.home-redesign-v1 .pf-row-title,
body.home-redesign-v1 .pf-row-cta,
body.home-redesign-v1 .pf-row-join {
  font-family: var(--elev-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
body.home-redesign-v1 .pf-row-title { text-transform: uppercase; }
body.home-redesign-v1 .pf-row-join { text-transform: uppercase; }

/* Overflow tray menu items */
body.home-redesign-v1 .lobby-overflow-item {
  font-family: var(--elev-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

/* Section labels (the small "STARTHERE", "YOU", "OPPONENT", etc. above
 * config rows). They already use letter-spacing — just swap the family. */
body.home-redesign-v1 .vsbot-section-label,
body.home-redesign-v1 .section-label,
body.home-redesign-v1 .elev-section-label {
  font-family: var(--elev-display) !important;
  font-weight: 900 !important;
}

/* Big numbers: hex power in the corner pill, coin balance.
 * Keep tabular-nums + JetBrains Mono on STATIC counters where alignment
 * matters; promote Big Shoulders for HEADLINE numbers (e.g., wins, level,
 * hex power on win screen). */
body.home-redesign-v1 .lobby-corner-identity-power strong {
  font-family: var(--elev-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.4px !important;
}

/* Hex Hunt EARLY ACCESS pill — already uppercase, just tighten the face */
.elev-tile-pill--early {
  font-family: var(--elev-display) !important;
  font-weight: 700 !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * v154.13 — MOVE C: Hex motif in the chrome.
 *
 * Defines a reusable --hex-clip polygon (flat-top hex) and applies it to a
 * handful of structural anchors: the corner-pill avatar (was a circle), the
 * Hex Hunt early-access pill, and the corner identity coins tile's icon
 * frame. NOT applied to the PLAY button (full hex-clip would clip the text
 * + lose tap area on narrow viewports) — instead we hint at hex via an
 * inset hex outline overlay on PLAY.
 *
 * The 2/3/4/5/6 player-count picker is ALREADY hex-SVG, so no work there.
 *
 * Selective application: 4-5 anchor surfaces. Don't expand to modal frames,
 * sheets, or tile cards — over-application reads as "novelty UI." The point
 * is recognition ("oh this is the hex game"), not gimmick. */

:root {
  --hex-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Corner identity pill — the AVATAR (was a 28px circle). Hex it out so the
 * first thing the user sees on home is a brand-purple hex glyph instead of
 * a generic circle. The half-button's own click target is unchanged. */
body.home-redesign-v1 .lobby-corner-identity-avatar {
  clip-path: var(--hex-clip);
  border-radius: 0 !important;
  /* Slight upscale + adjusted aspect for the hex silhouette */
  width: 30px !important;
  height: 32px !important;
  background: linear-gradient(135deg, #8b7cff 0%, #6d5ef5 55%, #ff7cc4 100%);
}

/* Hex Hunt EARLY ACCESS pill — hex it out so the in-development signal
 * itself uses the brand motif. Tighter padding to compensate for the hex
 * sidebearing eating horizontal space. */
.elev-tile-pill--early {
  clip-path: var(--hex-clip);
  border-radius: 0 !important;
  padding: 3px 11px !important;
  /* The amber background needs a real fill (clip-path eats borders) */
  background: linear-gradient(135deg, rgba(255,175,64,0.32), rgba(255,140,56,0.42)) !important;
  border: none !important;
}

/* PLAY button — instead of a destructive full clip-path (which would lose
 * tap area + clip the "Play" text), add an INSET hex outline overlay that
 * floats above the button. The button stays rectangular; the hex outline
 * sells the motif. Uses ::before so the existing ::before pattern dots
 * (line 2562) need to not collide — actually let me use ::after since the
 * pattern dots use ::before. Wait: pattern dots also use ::after for some
 * variants. Use an explicit child div instead — added later. For now: just
 * a thin hex overlay via box-shadow trick. Skip the inset hex for v154.13;
 * the player-count picker hexes directly below the button already carry
 * the hex visual weight. */

/* Coin tile in the corner identity pill — the SVG coin icon is already
 * circular. Add a hex outline behind it as a brand stamp. */
body.home-redesign-v1 .lobby-corner-identity-coins svg {
  /* Layer a hex backdrop using a CSS gradient mask. Cheap, no extra DOM. */
  background: linear-gradient(135deg, rgba(245,203,92,0.18), rgba(245,203,92,0.08));
  clip-path: var(--hex-clip);
  padding: 1px;
  width: 16px !important;
  height: 18px !important;
}

/* Stat tiles in the profile modal Overview tab — currently rectangles with
 * hex outline inside. Make the frame itself hex-clipped so the stat (WINS,
 * GAMES, POWER, BEST) reads as a hex badge, not a square card with a hex
 * inside it. NOTE: this only applies if .stat-card is the relevant class;
 * over-broad selectors will catch unintended elements. Scoped narrowly. */
#profileModal .profile-stats .stat-card,
#profileModal .stat-card[data-elev-hex] {
  clip-path: var(--hex-clip);
  border-radius: 0 !important;
  /* Hex needs more vertical room than the original square — bump padding. */
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  /* Solid fill so the stat number reads clearly inside the hex */
  background: rgba(20, 14, 30, 0.7) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * v154.12 — Home-screen polish pass
 *
 * (1) How to play link — was a transparent text+icon row at the bottom of
 *     the home that read as "forgotten" rather than "deliberate." Upgraded
 *     to a small outlined pill with a subtle hover state. Still quiet
 *     (it's a tertiary action) but reads as a proper affordance now.
 *
 * (2) Friends pending-request indicator — the corner Friends pill stays the
 *     same neutral pill color in idle state. When friend_requests has 1+
 *     pending entries (refreshCornerFriendsBadge sets data-online="true" on
 *     the badge), the parent button also gets a brand-purple tint on its
 *     icon + border so the pill itself reads as "you have something here,"
 *     not just the badge digit.
 *
 * (3) Hex Hunt EARLY ACCESS pill — same shape/dimensions as the existing
 *     "2 PLAYERS" pill but tinted amber so it reads as a status flag, not
 *     metadata. Sits BEFORE the player-count pill so the first thing the
 *     eye lands on is "this is still being built."
 * ═════════════════════════════════════════════════════════════════════════ */

/* (1) How to play */
body.home-redesign-v1 .elev-home-howtoplay {
  display: inline-flex !important;
  align-self: center !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(245, 246, 255, 0.7) !important;
  font: 600 12.5px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif !important;
  letter-spacing: 0.3px !important;
  margin-top: 8px !important;
  gap: 8px !important;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
}
body.home-redesign-v1 .elev-home-howtoplay:hover,
body.home-redesign-v1 .elev-home-howtoplay:focus-visible {
  background: rgba(139, 124, 255, 0.10) !important;
  border-color: rgba(139, 124, 255, 0.32) !important;
  color: #f5f6ff !important;
  transform: translateY(-1px);
  outline: none;
}
body.home-redesign-v1 .elev-home-howtoplay svg {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

/* (2) Friends pending-request — parent button gets brand-purple tint when
 *     the badge has data-online="true". Selector :has() is supported in all
 *     modern WebKit / Capacitor WKWebView; falls back gracefully (no tint)
 *     in older browsers. */
.lobby-corner-btn#lobbyCornerFriendsBtn:has(.lobby-corner-badge[data-online="true"]) {
  background: rgba(139, 124, 255, 0.22);
  border-color: rgba(139, 124, 255, 0.55);
  color: #d8d2ff;
  box-shadow: 0 0 16px rgba(139, 124, 255, 0.28);
}
.lobby-corner-btn#lobbyCornerFriendsBtn:has(.lobby-corner-badge[data-online="true"]) svg {
  filter: drop-shadow(0 0 6px rgba(139, 124, 255, 0.5));
}

/* (3) Hex Hunt EARLY ACCESS pill — amber-tinted so it reads as a
 *     status badge, separate from the neutral 2 PLAYERS metadata pill. */
.elev-tile-pill--early {
  background: rgba(255, 175, 64, 0.18) !important;
  color: #ffc774 !important;
  border: 1px solid rgba(255, 175, 64, 0.42) !important;
  /* Keep typography in line with .elev-beta-tile-pill but tighter so
   * "Early Access" fits on one line without truncating. */
  letter-spacing: 0.10em !important;
  font-size: 8.5px !important;
  padding: 2px 6px !important;
  margin-right: 4px;
}
body.home-redesign-v1 #feedbackFab.feedback-fab { display: none !important; }

/* v154.6 — Bot lobby: combined profile + hex-skin card.
 * Was two separate stacked cards (profile chip + hex preview row), pushing
 * the actual game-config affordances (Game Mode / Opponent / Difficulty /
 * Start) below the fold. Combined into one horizontally-split card with
 * two click targets — same pattern as the home corner pill. */
.bot-identity-combined {
  display: none; /* shown via JS when MY_PROFILE.name exists */
  align-items: stretch;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 14px;
  background: rgba(20, 14, 30, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: border-color 0.16s ease;
}
.bot-identity-combined:hover { border-color: rgba(139,124,255,0.32); }

.bot-identity-half {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 50%;
  min-width: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background 0.14s ease;
}
.bot-identity-half:hover { background: rgba(139,124,255,0.10); }
.bot-identity-half:active { transform: scale(0.99); }
.bot-identity-half:focus-visible {
  outline: 2px solid rgba(139,124,255,0.55);
  outline-offset: -2px;
}
.bot-identity-skin-half {
  border-left: 1px solid rgba(255,255,255,0.08);
  flex: 0 1 auto;
  min-width: 130px;
  max-width: 50%;
}
.bot-identity-skin-half:hover {
  /* coin/cosmetic-tinted hover — matches the home corner pill's shop side */
  background: rgba(245,203,92,0.12);
}

/* Profile half — keep the existing avatar / name / meta visual language
 * but make sure it doesn't blow out horizontally inside its half. */
.bot-identity-profile-half .lobby-identity-avatar {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.bot-identity-profile-half .lobby-identity-text {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1; min-width: 0;
}
.bot-identity-profile-half .lobby-identity-name {
  font: 700 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  color: #f5f6ff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bot-identity-profile-half .lobby-identity-meta {
  font: 500 11px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  color: rgba(245,246,255,0.68);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bot-identity-profile-half .lobby-identity-meta .dot { opacity: 0.4; margin: 0 4px; }

/* Skin half — small hex tile + skin name. The chevron hints at "tap to change". */
.bot-identity-skin-half .hex-preview-tile {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.bot-identity-skin-half .hex-preview-info {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.bot-identity-skin-half .hex-preview-skin-label {
  font: 700 9px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  color: rgba(245,246,255,0.5);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.bot-identity-skin-half .hex-preview-name {
  font: 600 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  color: #f5f6ff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bot-identity-skin-half .hex-preview-chevron {
  font: 700 18px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  color: rgba(245,246,255,0.4);
  margin-left: 4px;
}

/* Narrow viewports: stack the two halves vertically with a horizontal divider
 * instead of vertical, so neither half gets cramped. */
@media (max-width: 380px) {
  .bot-identity-combined { flex-direction: column; }
  .bot-identity-skin-half {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    max-width: none;
  }
}

/* Reduce-motion: skip backdrop blurs (they're expensive; reader doesn't
 * need them when motion preference is reduced) */
@media (prefers-reduced-motion: reduce) {
  body.home-redesign-v1 .elev-home-identity-chip,
  body.home-redesign-v1 .elev-home-mode-tile,
  body.home-redesign-v1 .elev-home-create-open-btn,
  body.home-redesign-v1 .elev-home-codejoin,
  body.home-redesign-v1 .elev-home-browse,
  body.home-redesign-v1 .lobby-corner-btn,
  body.home-redesign-v1 .lobby-corner-identity,
  body.home-redesign-v1 .tutorial-cta {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 10, 28, 0.78) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   v154.42 — NOTIFICATIONS INBOX SHEET
   Bell button (corner) + slide-up sheet listing accumulated notifications.
   Reuses .lobby-overflow-tray/-sheet for the panel chrome.
   ═══════════════════════════════════════════════════════════════════════ */
#notifInbox.show {
  display: flex !important;
}
.notif-inbox-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
  text-align: left;
  position: relative;
}
.notif-inbox-row:hover, .notif-inbox-row:focus-visible {
  background: rgba(139,124,255,0.10);
  border-color: rgba(139,124,255,0.30);
  outline: none;
}
.notif-inbox-row.unread {
  background: rgba(124,111,247,0.10);
  border-color: rgba(124,111,247,0.32);
}
.notif-inbox-row-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: #c0b8ff;
}
.notif-inbox-row-body { flex: 1; min-width: 0; }
.notif-inbox-row-title {
  font: 600 14px "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #f5f6ff;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.notif-inbox-dot {
  width: 6px; height: 6px;
  background: #ff7cc4;
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(255,124,196,0.7);
  display: inline-block;
}
.notif-inbox-row-desc {
  font: 400 13px "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: rgba(245,246,255,0.78);
  line-height: 1.35;
  word-break: break-word;
}
.notif-inbox-row-meta {
  font: 500 11px "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: rgba(255,255,255,0.42);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.notif-inbox-row-x {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  color: rgba(255,255,255,0.55);
  font: 600 16px/1 "Inter", sans-serif;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.notif-inbox-row-x:hover { background: rgba(255,255,255,0.10); color: #fff; }