/* ==========================================================================
   Main game menu (index.html) and the room browser (rooms.html)
   ========================================================================== */

.menu-step { margin-top: var(--space-6); }

.menu-step-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.menu-step-head h2 { margin: 0; font-size: var(--font-lg); }
.menu-step-num {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 215, 122, 0.14);
  border: 1px solid var(--hairline-gold);
  color: var(--gold-bright);
  font-size: var(--font-sm);
  font-weight: 800;
}

/* ---------------------------------------------------------------- step 1: games */

.game-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base), background var(--dur-base);
}
.game-card:hover { transform: translateY(-3px); border-color: var(--hairline-gold); }
.game-card.is-active {
  border-color: var(--gold-bright);
  background: rgba(255, 215, 122, 0.1);
  box-shadow: 0 0 0 1px var(--gold-bright) inset;
}
.game-card-icon { font-size: 2rem; line-height: 1; }
.game-card-name { font-weight: 800; font-size: var(--font-base); }
.game-card-sub { font-size: var(--font-xs); color: var(--text-mute); }
.game-card-live { position: absolute; top: 8px; right: 8px; }

/* ---------------------------------------------------------------- step 2: ranks */

.rank-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}
.rank-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base);
}
.rank-card:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--hairline-gold); }
.rank-card.is-active { border-color: var(--gold-bright); background: rgba(255, 215, 122, 0.1); }
.rank-card.is-locked { opacity: 0.5; cursor: not-allowed; }
.rank-card-icon { font-size: 1.7rem; line-height: 1; }
.rank-card-name { font-weight: 800; }
.rank-card-sub { font-size: var(--font-xs); color: var(--text-mute); }
.rank-card-fee {
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--text-dim);
  opacity: 0.8;
}

/* The three ranks above Diamond, set apart so they read as a different proposition. */
.special-ladder {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(197, 139, 255, 0.35);
  background: linear-gradient(180deg, rgba(197, 139, 255, 0.09), transparent 70%);
}
.special-ladder-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.special-ladder-title { font-weight: 800; color: #d7b3ff; }

.rank-card.is-special { border-color: rgba(197, 139, 255, 0.4); }
.rank-card.is-special.is-active {
  border-color: #c58bff;
  background: rgba(197, 139, 255, 0.14);
  box-shadow: 0 0 18px rgba(197, 139, 255, 0.2);
}
.rank-card-risk {
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #ffb3b8;
}

/* Risk warning on a room card. */
.table-card-risk {
  margin-bottom: var(--space-2);
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  background: rgba(230, 57, 70, 0.12);
  border: 1px solid rgba(230, 57, 70, 0.3);
  font-size: var(--font-xs);
  color: #ffb3b8;
}
.table-card-risk em { font-style: normal; text-decoration: underline; }

.launch-warning {
  flex-basis: 100%;
  font-size: var(--font-xs);
  color: #ffb3b8;
}

/* ---------------------------------------------------------------- step 3: modes */

.mode-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.mode-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base);
}
.mode-card:hover { transform: translateY(-2px); border-color: var(--hairline-gold); }
.mode-card.is-active { border-color: var(--gold-bright); background: rgba(255, 215, 122, 0.1); }
.mode-card.mode-special.is-active {
  border-color: #c58bff;
  background: rgba(197, 139, 255, 0.12);
  box-shadow: 0 0 18px rgba(197, 139, 255, 0.18);
}
.mode-card-icon { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.mode-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mode-card-name { font-weight: 800; }
.mode-card-sub { font-size: var(--font-xs); color: var(--text-mute); }
.mode-card-count { font-size: var(--font-xs); color: var(--text-dim); flex-shrink: 0; }

/* ---------------------------------------------------------------- launch bar */

.menu-launch {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.launch-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.launch-chip { font-weight: 800; }
.launch-chip.is-special { color: #d7b3ff; }
.launch-sep { color: var(--text-mute); }
.launch-rule {
  flex-basis: 100%;
  font-size: var(--font-xs);
  color: var(--text-mute);
}
.launch-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------------------------------------------------------------- room browser */

.rooms-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.filter-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.filter-label { font-size: var(--font-xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.filter-chip {
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--font-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.filter-chip:hover { color: var(--text); border-color: var(--hairline-gold); }
.filter-chip.is-active { background: rgba(255, 215, 122, 0.16); color: var(--gold-bright); border-color: var(--hairline-gold); }

.rooms-game { margin-bottom: var(--space-6); }
.rooms-game-title { font-size: var(--font-lg); margin: 0 0 var(--space-3); }
.rooms-group { margin-bottom: var(--space-4); }
.rooms-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--hairline);
}
.rooms-group-label { font-size: var(--font-sm); font-weight: 800; color: var(--text-dim); }
.rooms-group.is-special .rooms-group-label { color: #d7b3ff; }
.rooms-group.is-special .rooms-group-head { border-bottom-color: rgba(197, 139, 255, 0.3); }

.table-card.is-special { border-color: rgba(197, 139, 255, 0.4); }
.table-card.is-special:hover { border-color: #c58bff; box-shadow: 0 0 20px rgba(197, 139, 255, 0.16); }
.table-card-rule {
  font-size: var(--font-xs);
  color: #d7b3ff;
  background: rgba(197, 139, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------- special tables (in game) */

.special-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(197, 139, 255, 0.16), rgba(197, 139, 255, 0.04));
  border: 1px solid rgba(197, 139, 255, 0.35);
}
.special-strip-badge {
  font-size: var(--font-xs);
  font-weight: 800;
  color: #d7b3ff;
  letter-spacing: 0.04em;
}
.special-strip-name { color: #efdcff; }
.special-strip-blurb { flex: 1; min-width: 200px; font-size: var(--font-sm); color: var(--text-dim); }
.risk-badge {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(230, 57, 70, 0.18);
  border: 1px solid rgba(230, 57, 70, 0.42);
  color: #ffb3b8;
  font-size: var(--font-xs);
  font-weight: 800;
}
.session-pnl {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: var(--font-sm);
  color: var(--text-dim);
}
.session-pnl.is-win { color: var(--win); }
.session-pnl.is-lose { color: var(--lose); }

.lucky-badge {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(127, 220, 130, 0.16);
  border: 1px solid rgba(127, 220, 130, 0.4);
  color: #bff5c1;
  font-size: var(--font-xs);
  font-weight: 800;
}

/* The lucky number on the roulette board. */
.rl-cell.is-lucky {
  box-shadow: 0 0 0 2px #7fdc82 inset, 0 0 14px rgba(127, 220, 130, 0.5);
  animation: lucky-pulse 1.8s ease-in-out infinite;
}
@keyframes lucky-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #7fdc82 inset, 0 0 10px rgba(127, 220, 130, 0.4); }
  50% { box-shadow: 0 0 0 2px #7fdc82 inset, 0 0 20px rgba(127, 220, 130, 0.7); }
}

.seat-badge.bounty { background: rgba(230, 57, 70, 0.2); color: #ffb3b8; }

/* ---------------------------------------------------------------- artifact rail */

.artifact-bar {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(560px, calc(100vw - 32px));
  padding: 8px var(--space-3);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(30, 20, 40, 0.96), rgba(18, 12, 24, 0.96));
  border: 1px solid rgba(197, 139, 255, 0.35);
  box-shadow: var(--shadow-lg);
}
.artifact-bar-label { font-size: var(--font-xs); font-weight: 800; color: #d7b3ff; flex-shrink: 0; }
.artifact-bar-items { display: flex; flex-wrap: wrap; gap: 5px; }
.artifact-bar-empty { font-size: var(--font-xs); color: var(--text-mute); }
.artifact-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--font-xs);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-base), color var(--dur-base), background var(--dur-base);
}
.artifact-chip:hover { color: var(--text); border-color: rgba(197, 139, 255, 0.5); }
.artifact-chip.is-armed {
  border-color: #c58bff;
  background: rgba(197, 139, 255, 0.2);
  color: #efdcff;
  animation: live-blink 1.8s ease-in-out infinite;
}
.artifact-chip.is-relic { cursor: default; border-color: var(--hairline-gold); color: var(--gold-bright); }
.artifact-qty {
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.4);
  font-size: 0.65rem;
}

@media (max-width: 720px) {
  .artifact-bar { left: var(--space-2); right: var(--space-2); bottom: 76px; max-width: none; }
  .menu-launch { flex-direction: column; align-items: stretch; }
  .launch-actions .btn { flex: 1; }
}