:root {
  --bg: #0a0e14;
  --bg-panel: #111820;
  --bg-input: #0d1219;
  --cyan: #39c5cf;
  --cyan-dim: #2a9299;
  --yellow: #f0c040;
  --green: #3dd68c;
  --red: #f07178;
  --magenta: #c678dd;
  --dim: #5c6773;
  --text: #e6e1cf;
  --border: #1f2833;
  --card-red: #f07178;
  --card-black: #e6e1cf;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", Consolas, monospace;
  --felt: #1a5c3a;
  --felt-dark: #0d3d28;
  --felt-light: #247a4f;
  --gold: #ffd700;
  --gold-dim: #c9a800;
  --chrome: #3a4555;
  --chrome-light: #5a6a7f;
  --chrome-dark: #1a2230;
  --machine-glow: rgba(255, 215, 0, 0.35);
  --roulette-red: #c41e3a;
  --roulette-black: #1a1a2e;
  --roulette-green: #0d6b3a;
  --rewards-speed-mult: 1;

  /* Viewport fit — shared by terminal, overlays, Rewards Phone */
  --app-vh: 100vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-pad-x: 1rem;
  --overlay-inset: 1.5rem;
  --overlay-max-h: calc(var(--app-vh) - var(--overlay-inset) - var(--safe-top) - var(--safe-bottom));
  --app-fab-clearance: 5.5rem;
}

@supports (height: 100dvh) {
  :root {
    --app-vh: 100dvh;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: var(--app-vh);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.5;
}

body {
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--cyan) 8%, transparent) 0%, transparent 60%),
    var(--bg);
}

#app {
  max-width: 960px;
  margin: 0 auto;
  padding-top: max(1.5rem, var(--safe-top));
  padding-right: max(var(--app-pad-x), var(--safe-right));
  padding-bottom: max(3rem, calc(var(--safe-bottom) + var(--app-fab-clearance)));
  padding-left: max(var(--app-pad-x), var(--safe-left));
}

.banner {
  border-top: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  padding: 0.75rem 0;
  text-align: center;
  margin: 1rem 0;
}

.banner h1,
.banner h2 {
  margin: 0;
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.subtitle {
  color: var(--magenta);
  margin: 1rem 0 0.5rem;
  font-weight: 600;
}

.chip-line {
  color: var(--yellow);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0.5rem 0;
}

.chip-line-wrap .bank-line {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.staff-manifest-list .staff-custom-badge {
  color: var(--green);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.staff-context-input {
  width: 100%;
  min-height: 6rem;
  font: inherit;
}

.racing-names-input,
.staff-context-input {
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.5rem;
}

.welcome-line {
  margin: 0.25rem 0;
}

.success {
  color: var(--green);
}

.jackpot-win {
  color: var(--gold, #ffd700);
  font-weight: 700;
}

.jackpot-line {
  color: var(--gold, #ffd700);
  font-weight: 600;
}

.error {
  color: var(--red);
}

.dim {
  color: var(--dim);
}

.card-red {
  color: var(--card-red);
}

.card-hidden {
  color: var(--dim);
}

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.menu-list li {
  margin: 0.35rem 0;
}

.menu-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.menu-btn:hover,
.menu-btn:focus-visible {
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border-color: var(--cyan-dim);
  outline: none;
}

.menu-btn .num {
  color: var(--cyan);
  margin-right: 0.5rem;
}

.menu-btn.back {
  color: var(--dim);
}

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.btn {
  background: var(--bg-input);
  border: 1px solid var(--cyan-dim);
  border-radius: 3px;
  color: var(--cyan);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}

.btn:hover,
.btn:focus-visible {
  background: color-mix(in srgb, var(--cyan) 15%, transparent);
  outline: none;
}

.btn.primary {
  background: color-mix(in srgb, var(--cyan) 20%, transparent);
  border-color: var(--cyan);
}

.btn.danger {
  border-color: var(--red);
  color: var(--red);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.form-row {
  margin: 0.75rem 0;
}

.form-row label {
  display: block;
  color: var(--dim);
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
}

.form-row input,
.form-row select {
  width: 100%;
  max-width: 280px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  padding: 0.45rem 0.6rem;
}

.form-row input:focus,
.form-row select:focus {
  border-color: var(--cyan-dim);
  outline: none;
}

.log-area {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.75rem 1rem;
  max-height: 320px;
  overflow-y: auto;
  font-size: 0.9rem;
  margin: 1rem 0;
}

.log-area .line {
  margin: 0.2rem 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.table-display {
  margin: 1rem 0;
}

.seat-line {
  margin: 0.35rem 0;
  padding: 0.25rem 0;
}

.seat-line.highlight {
  color: var(--yellow);
}

.seat-line.highlight::before {
  content: ">> ";
  color: var(--yellow);
}

.dealer-line {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}

.reels {
  font-size: 2rem;
  text-align: center;
  padding: 1.5rem;
  letter-spacing: 0.5rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 1rem 0;
}

.ledger-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ledger-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.ledger-table th,
.ledger-table td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.ledger-table th {
  color: var(--dim);
  font-weight: 600;
}

.stats-grid {
  display: grid;
  gap: 0.5rem;
}

.stat-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.event-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
}

.event-card .sport {
  color: var(--cyan);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.pending-tickets {
  margin: 1rem 0;
}

.ticket {
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  border-left: 3px solid var(--cyan);
  padding: 0.5rem 0.75rem;
  margin: 0.35rem 0;
  font-size: 0.9rem;
}

.sportsbook-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 0.75rem;
  flex-wrap: wrap;
}

.sportsbook-tab {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--dim);
  padding: 0.45rem 0.9rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition: border-color 0.15s, color 0.15s;
}

.sportsbook-tab.active {
  border-color: var(--cyan);
  color: var(--cyan);
}

.sportsbook-tab:hover {
  border-color: var(--cyan);
}

.sport-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0;
}

.filter-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
}

.filter-chip.active {
  border-color: var(--yellow);
  color: var(--yellow);
}

.volatility-banner {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.35);
  color: var(--red);
  padding: 0.6rem 0.85rem;
  margin: 0.75rem 0;
  font-size: 0.82rem;
  border-radius: 3px;
}

.event-card--expanded {
  border-color: color-mix(in srgb, var(--cyan) 35%, transparent);
}

.event-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.event-status {
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  border: 1px solid var(--border);
  color: var(--dim);
}

.event-status.live {
  border-color: var(--green);
  color: var(--green);
}

.event-lines {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.event-props {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  font-size: 0.8rem;
}

.market-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  margin: 0.5rem 0;
}

.market-card:hover {
  border-color: color-mix(in srgb, var(--cyan) 40%, transparent);
}

.market-category {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.35rem;
}

.market-question {
  font-weight: 600;
  margin-bottom: 0.6rem;
  line-height: 1.35;
}

.prob-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 107, 107, 0.25);
  margin-bottom: 0.5rem;
}

.prob-yes {
  background: var(--green);
  transition: width 0.2s;
}

.prob-no {
  background: var(--red);
  flex: 1;
}

.market-prices {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--dim);
  margin-bottom: 0.6rem;
}

.market-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.outcome-chip {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  padding: 0.35rem 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.outcome-chip.yes {
  border-color: rgba(80, 200, 120, 0.5);
  color: var(--green);
}

.outcome-chip.no {
  border-color: rgba(255, 107, 107, 0.5);
  color: var(--red);
}

.outcome-chip:hover {
  box-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 25%, transparent);
}

.outcome-chip.yes:hover {
  box-shadow: 0 0 10px rgba(80, 200, 120, 0.35);
}

.outcome-chip.no:hover {
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.35);
}

.event-bet-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.live-badge {
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 600;
}

.unified-slip {
  margin: 1rem 0;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--cyan) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.sportsbook-loading {
  color: var(--dim);
  padding: 1rem 0;
  text-align: center;
}

.settings-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
}

.settings-bar label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--dim);
}

.settings-bar input[type="checkbox"] {
  accent-color: var(--cyan);
}

.footer-note {
  margin-top: 2rem;
  text-align: center;
  color: var(--dim);
  font-size: 0.8rem;
}

.loading-screen {
  text-align: center;
  padding: 3rem 1rem;
}

.loading-pulse {
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: 0.9rem;
}

.status-banner.success {
  border-color: var(--green);
  color: var(--green);
}

.status-banner.error {
  border-color: var(--red);
  color: var(--red);
}

.status-dismiss {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  opacity: 0.7;
}

.status-dismiss:hover {
  opacity: 1;
}

.tier-experience-banner {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(17, 24, 32, 0.95) 0%, rgba(26, 34, 48, 0.95) 100%);
}

.tier-experience-label {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
}

.tier-experience-tagline {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--text);
}

.tier-experience-meta {
  margin: 0;
  font-size: 0.8rem;
}

.tier-experience-banner--gold .tier-experience-label,
.tier-experience-banner--platinum .tier-experience-label {
  color: var(--gold);
}

.tier-experience-banner--noir .tier-experience-label {
  color: var(--magenta);
}

.tier-experience-banner--chairman {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(40, 32, 8, 0.95) 0%, rgba(17, 24, 32, 0.98) 55%, rgba(60, 20, 40, 0.9) 100%);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.15);
}

.tier-experience-banner--chairman .tier-experience-label {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
}

.tier-experience-banner--chairman .tier-experience-tagline {
  color: #fff8dc;
}

.hub-features {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0;
  font-size: 0.85rem;
}

.hub-feature {
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--cyan-dim);
  background: color-mix(in srgb, var(--cyan) 5%, transparent);
}

.hub-feature strong {
  color: var(--cyan);
}

.hotel-panel {
  border-left: 3px solid var(--gold-dim, #c4a030);
}

/* Hotel dining cards */
.dining-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.dining-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 160ms ease, transform 160ms ease;
}

.dining-card:hover {
  border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
  transform: translateY(-1px);
}

.dining-card .action-bar {
  margin-top: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
  .dining-card {
    transition: none;
  }

  .dining-card:hover {
    transform: none;
  }
}

.dining-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.dining-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.dining-price {
  margin-left: auto;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.amenities-panel {
  border-left: 3px solid var(--teal-accent, #2a9d8f);
}

.amenities-panel.gentlemans-club {
  border-left-color: rgba(212, 175, 55, 0.85);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(120, 40, 60, 0.18), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(40, 20, 50, 0.22), transparent 50%),
    rgba(18, 10, 16, 0.35);
}

.gc-meter {
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  letter-spacing: 0.08em;
  font-size: 1.1rem;
  padding: 0.65rem 0.75rem;
  margin: 0.75rem 0;
  color: #e8c547;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(232, 197, 71, 0.28);
}

.amenities-shortcuts {
  margin-top: 0.75rem;
  border-left: 3px solid var(--teal-accent, #2a9d8f);
}

.amenities-shortcuts .inline-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.amenities-shortcuts .menu-btn {
  font-size: 0.9rem;
}

.store-items .menu-btn {
  text-align: left;
  white-space: normal;
  line-height: 1.35;
}

.hotel-status {
  margin: 1rem 0;
  padding: 0.75rem;
  background: rgba(232, 197, 71, 0.06);
  border: 1px solid rgba(232, 197, 71, 0.2);
}

.hotel-status p {
  margin: 0.35rem 0;
}

.hotel-room-view {
  min-height: 12rem;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.hotel-room-view.resort-time-0 {
  box-shadow: inset 0 0 40px rgba(255, 200, 120, 0.08);
}

.hotel-room-view.resort-time-1 {
  box-shadow: inset 0 0 40px rgba(255, 230, 150, 0.06);
}

.hotel-room-view.resort-time-2 {
  box-shadow: inset 0 0 50px rgba(180, 80, 255, 0.1);
  border-color: rgba(180, 80, 255, 0.25);
}

.hotel-room-view.resort-time-3 {
  box-shadow: inset 0 0 60px rgba(40, 120, 200, 0.12);
  border-color: rgba(40, 120, 200, 0.3);
}

.tv-glow {
  box-shadow: inset 0 0 30px rgba(100, 180, 255, 0.15);
}

.minibar-neon {
  box-shadow: inset 0 0 24px rgba(255, 60, 120, 0.12);
}

.concierge-nudge {
  font-style: italic;
  margin-bottom: 0.5rem;
}

.room-schematic {
  margin: 1rem 0;
  padding: 0.75rem;
  border: 1px dashed rgba(232, 197, 71, 0.25);
  border-radius: 4px;
}

.room-schematic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.room-schematic-zone {
  padding: 0.65rem;
  background: rgba(232, 197, 71, 0.08);
  border: 1px solid rgba(232, 197, 71, 0.25);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
}

.room-schematic-zone:hover {
  background: rgba(232, 197, 71, 0.16);
}

.world-cycle-banner,
.world-cycle-hud {
  margin: 0.75rem 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(232, 197, 71, 0.2);
  border-radius: 4px;
}

.world-cycle-hud {
  background: rgba(232, 197, 71, 0.05);
}

.world-cycle-banner.resort-time-2,
.world-cycle-hud.resort-time-2 {
  border-color: rgba(180, 80, 255, 0.25);
}

.world-cycle-banner.resort-time-3,
.world-cycle-hud.resort-time-3 {
  border-color: rgba(40, 120, 200, 0.3);
  background: rgba(40, 120, 200, 0.06);
}

.resort-completion-panel {
  margin: 1rem 0;
  padding: 0.75rem;
  background: rgba(232, 197, 71, 0.04);
  border: 1px solid rgba(232, 197, 71, 0.15);
}

.resort-completion-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.resort-completion-list li {
  padding: 0.25rem 0;
}

.event-hint {
  font-style: italic;
  opacity: 0.85;
}

.room-amenities-summary {
  margin: 0.75rem 0;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid rgba(232, 197, 71, 0.35);
  font-style: italic;
}

.room-events-unlocked,
.room-events-locked {
  margin: 1rem 0;
}

.room-events-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.room-events-list li {
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(232, 197, 71, 0.1);
  font-size: 0.92em;
  line-height: 1.4;
}

.room-events-list li:last-child {
  border-bottom: none;
}

.pool-complex-panel,
.pool-zone-view {
  min-height: 12rem;
}

.pool-complex-panel .subtitle {
  color: var(--gold, #e8c547);
}

.hotel-log {
  max-height: 10rem;
  overflow-y: auto;
  margin: 0.75rem 0;
}

.guest-directory-panel {
  max-width: 42rem;
}

.guest-directory-book {
  margin: 1rem 0;
}

.guest-directory-intro,
.guest-directory-count {
  margin: 0.35rem 0 0.75rem;
}

.guest-directory-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid rgba(232, 197, 71, 0.25);
  background: rgba(10, 14, 20, 0.55);
}

.guest-directory-entry {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(232, 197, 71, 0.12);
}

.guest-directory-entry:last-child {
  border-bottom: none;
}

.guest-directory-entry.seed {
  border-left: 2px solid rgba(232, 197, 71, 0.45);
}

.guest-directory-name {
  display: block;
  font-weight: 600;
  color: var(--gold, #e8c547);
}

.guest-directory-date {
  display: block;
  font-size: 0.85em;
  margin-top: 0.15rem;
}

.guest-directory-note {
  margin: 0.35rem 0 0;
  font-size: 0.9em;
  font-style: italic;
}

.guest-directory-sign {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(232, 197, 71, 0.2);
}

.guest-directory-input {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem 0.65rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text, #e6e1cf);
  background: rgba(10, 14, 20, 0.8);
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
  border-radius: 2px;
}

.guest-directory-input:focus {
  outline: none;
  border-color: var(--cyan, #39c5cf);
}

.guest-directory-input:disabled {
  opacity: 0.55;
}

.guest-directory-feedback {
  margin-top: 0.5rem;
  min-height: 0;
}

.warning {
  color: var(--gold, #e8c547);
}

/* Error & placeholder screens (404, offline, maintenance, in-app not-found) */
.error-screen {
  text-align: center;
  margin: 2rem auto;
  max-width: 640px;
}

.error-screen .banner {
  margin-top: 0;
}

.error-code {
  color: var(--yellow);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 1.25rem 0 0.5rem;
}

.error-message {
  color: var(--text);
  margin: 0.5rem 0 1rem;
  line-height: 1.6;
}

.error-ascii {
  color: var(--cyan);
  font-size: 0.75rem;
  line-height: 1.35;
  margin: 1rem auto;
  overflow-x: auto;
  white-space: pre;
  text-align: center;
}

.error-slots {
  font-size: 2.25rem;
  letter-spacing: 0.6rem;
  color: var(--magenta);
  margin: 1.25rem 0;
  user-select: none;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 1.5rem 0 1rem;
}

.error-actions .btn-link {
  display: inline-block;
  background: var(--bg-input);
  border: 1px solid var(--cyan-dim);
  border-radius: 3px;
  color: var(--cyan);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
  text-decoration: none;
  transition: background 0.15s;
}

.error-actions .btn-link:hover,
.error-actions .btn-link:focus-visible {
  background: color-mix(in srgb, var(--cyan) 15%, transparent);
  outline: none;
}

.error-actions .btn-link.primary {
  background: color-mix(in srgb, var(--cyan) 20%, transparent);
  border-color: var(--cyan);
}

.placeholder-badge {
  display: inline-block;
  color: var(--magenta);
  border: 1px solid var(--magenta);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

/* ── Video casino machine cabinet (bar-top multi-game aesthetic) ── */

.video-machine {
  --machine-accent: var(--gold);
  --machine-felt: var(--felt);
  max-width: 820px;
  margin: 1rem auto;
  background: linear-gradient(180deg, var(--chrome-light) 0%, var(--chrome) 8%, var(--chrome-dark) 100%);
  border: 3px solid var(--chrome-dark);
  border-radius: 12px;
  box-shadow:
    0 0 0 2px var(--chrome),
    0 8px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.video-machine--blackjack { --machine-accent: var(--gold); --machine-felt: var(--felt); }
.video-machine--holdem { --machine-accent: #5eb8ff; --machine-felt: #1a4a5c; }
.video-machine--roulette { --machine-accent: var(--red); --machine-felt: #3a1520; }

.machine-cabinet-top {
  flex-shrink: 0;
  background: linear-gradient(180deg, #2a3545 0%, var(--chrome-dark) 100%);
  padding: 0.6rem 1rem 0.5rem;
  border-bottom: 2px solid var(--chrome);
  text-align: center;
  overflow: hidden;
}

.machine-marquee {
  color: var(--machine-accent);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow:
    0 0 8px var(--machine-glow),
    0 0 16px rgba(255, 215, 0, 0.15);
  animation: marquee-glow 2.4s ease-in-out infinite;
}

@keyframes marquee-glow {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.machine-brand {
  color: var(--dim);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.machine-screen {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0.75rem;
  padding: 0.5rem;
  background: #080c10;
  border: 3px inset var(--chrome-dark);
  border-radius: 6px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.8);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.machine-screen-inner {
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--cyan) 4%, transparent) 0%, transparent 50%),
    #0a0e14;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1rem 1.1rem;
  min-height: clamp(140px, 28vh, 200px);
}

.video-machine .panel {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0.5rem 0;
}

.machine-screen-label {
  color: var(--machine-accent);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.5rem 0;
}

.machine-footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--chrome-dark);
  border-top: 2px solid var(--chrome);
}

.machine-footer .chip-line {
  margin: 0;
  font-size: 0.95rem;
}

.machine-led {
  color: var(--machine-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--machine-accent);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
}

.machine-controls {
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-dark) 100%);
  border-top: 1px solid var(--chrome-light);
}

.machine-controls .action-bar {
  margin: 0;
}

.machine-controls .btn {
  background: linear-gradient(180deg, #2a3545 0%, #1a2230 100%);
  border-color: var(--chrome-light);
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
  box-shadow: 0 2px 0 var(--chrome-dark);
}

.machine-controls .btn:hover,
.machine-controls .btn:focus-visible {
  background: linear-gradient(180deg, #3a4a5f 0%, #2a3545 100%);
  border-color: var(--machine-accent);
  color: var(--machine-accent);
}

.machine-controls .btn.primary {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.08) 100%);
  border-color: var(--gold);
  color: var(--gold);
}

.video-machine--holdem .machine-controls .btn.primary {
  background: linear-gradient(180deg, rgba(94, 184, 255, 0.25) 0%, rgba(94, 184, 255, 0.08) 100%);
  border-color: #5eb8ff;
  color: #5eb8ff;
}

.video-machine--roulette .machine-controls .btn.primary {
  background: linear-gradient(180deg, rgba(240, 113, 120, 0.25) 0%, rgba(240, 113, 120, 0.08) 100%);
  border-color: var(--red);
  color: var(--red);
}

.dealer-panel {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-left: 3px solid var(--machine-accent);
  border-radius: 3px;
  padding: 0.65rem 0.85rem;
  margin: 0.75rem 0;
}

.dealer-panel .subtitle {
  margin: 0 0 0.25rem;
  color: var(--machine-accent);
  font-size: 0.9rem;
}

.dealer-panel .dim {
  margin: 0.15rem 0;
  font-size: 0.82rem;
}

.machine-status {
  color: var(--dim);
  font-size: 0.82rem;
  margin: 0.35rem 0;
  padding: 0.35rem 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}

.machine-log {
  background: #060a0e;
  border: 1px inset var(--chrome-dark);
  border-radius: 3px;
  padding: 0.6rem 0.75rem;
  max-height: 140px;
  overflow-y: auto;
  font-size: 0.78rem;
  margin: 0.75rem 0;
}

.machine-log .line {
  margin: 0.15rem 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Felt table surfaces ── */

.felt-table {
  background:
    radial-gradient(ellipse at 50% 30%, var(--felt-light) 0%, var(--machine-felt) 55%, var(--felt-dark) 100%);
  border: 3px solid var(--felt-dark);
  border-radius: 8px;
  padding: 1rem;
  margin: 0.75rem 0;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ── Playing card sprites (Kenney CC0) + deal/flip animations ── */

.card-row,
.card-row--sprites {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.playing-card {
  --deal-delay: 0ms;
  position: relative;
  width: 3.1rem;
  height: 4.2rem;
  flex: 0 0 auto;
  perspective: 480px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.playing-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 4px;
  background: transparent;
  user-select: none;
  pointer-events: none;
}

.playing-card__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.playing-card--empty {
  opacity: 0.35;
  filter: none;
}

.playing-card--empty img {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
}

.playing-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.playing-card__inner .playing-card__face,
.playing-card__inner .playing-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.playing-card__inner .playing-card__face {
  transform: rotateY(180deg);
}

/* Deal: slide + pop in */
.playing-card--deal {
  animation: card-deal 0.38s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
  animation-delay: var(--deal-delay);
}

@keyframes card-deal {
  0% {
    opacity: 0;
    transform: translateY(-18px) scale(0.72) rotate(-8deg);
  }
  70% {
    opacity: 1;
    transform: translateY(2px) scale(1.04) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* Flip reveal: back → face */
.playing-card--flip .playing-card__inner {
  animation: card-flip 0.55s ease both;
  animation-delay: var(--deal-delay);
}

@keyframes card-flip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

/* Court cards idle shimmer for engagement */
.playing-card--court.playing-card--face > img,
.playing-card--court .playing-card__face {
  animation: card-court-glow 1.8s ease-in-out infinite;
}

@keyframes card-court-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14) saturate(1.08); }
}

.playing-card--back img {
  animation: card-back-pulse 2.4s ease-in-out infinite;
}

@keyframes card-back-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .playing-card--deal,
  .playing-card--flip .playing-card__inner,
  .playing-card--court.playing-card--face > img,
  .playing-card--court .playing-card__face,
  .playing-card--back img {
    animation: none !important;
  }
}

/* Legacy text chip fallbacks (unused by sprite path, kept for safety) */
.card-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 3.2rem;
  padding: 0.2rem 0.35rem;
  background: linear-gradient(145deg, #f8f4e8 0%, #e8e0d0 100%);
  border: 1px solid #b8b0a0;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1a2e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.card-chip--red { color: var(--roulette-red); }
.card-chip--black { color: #1a1a2e; }
.card-chip--hidden {
  background: linear-gradient(145deg, #2a3545 0%, #1a2230 100%);
  color: var(--cyan);
  border-color: var(--chrome);
  font-size: 0.8rem;
}
.card-chip--empty {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  box-shadow: none;
  color: transparent;
}

/* ── Blackjack table layout ── */

.bj-table-layout {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bj-dealer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.bj-role-label {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 4.5rem;
}

.bj-hand-value {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: 600;
}

.bj-seats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bj-seat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
}

.bj-seat--active {
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}

.bj-seat-info {
  min-width: 8rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

.bj-seat-name {
  color: #fff;
  font-weight: 600;
}

.bj-seat-meta {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
}

.bj-seat-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  margin-left: 0.25rem;
}

.bj-seat-badge--bust { background: var(--red); color: #fff; }
.bj-seat-badge--bj { background: var(--gold); color: #1a1a2e; }
.bj-seat-badge--surrender { background: var(--dim); color: #fff; }

/* ── Texas Hold'em table layout ── */

.holdem-table-layout {
  position: relative;
  min-height: clamp(140px, 28vh, 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.holdem-pot {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.holdem-board {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem;
}

.holdem-street {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.holdem-street-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  width: 100%;
}

.holdem-street-step {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.2);
}

.holdem-street-step--done {
  color: rgba(180, 230, 180, 0.9);
  border-color: rgba(120, 200, 120, 0.35);
}

.holdem-street-step--active {
  color: #111;
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 700;
}

.holdem-street-step--upcoming {
  opacity: 0.7;
}

.holdem-players {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}

.holdem-players--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.holdem-raise-controls {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.holdem-raise-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.holdem-raise-input {
  width: 5.5rem;
  min-width: 4.5rem;
}

.holdem-action-bar {
  flex-wrap: wrap;
  align-items: center;
}

.holdem-seat--allin {
  border-color: rgba(255, 140, 80, 0.55);
}

.holdem-seat {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.45rem 0.55rem;
  font-size: 0.75rem;
}

.holdem-seat--you {
  border-color: rgba(94, 184, 255, 0.4);
}

.holdem-seat--active {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
  background: rgba(255, 215, 0, 0.08);
}

.holdem-seat--folded {
  opacity: 0.45;
}

.holdem-seat-name {
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.2rem;
}

.holdem-seat-stack {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.68rem;
}

.holdem-hole-cards {
  margin-top: 0.3rem;
}

.holdem-hole-cards .card-chip {
  min-width: 2rem;
  height: 2.6rem;
  font-size: 0.8rem;
}

.holdem-rank-ref {
  font-size: 0.72rem;
  line-height: 1.5;
  columns: 2;
  column-gap: 1rem;
}

/* ── Roulette machine display ── */

.roulette-display {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.roulette-wheel-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.roulette-wheel-wrap {
  position: relative;
  width: 160px;
  height: 160px;
}

.roulette-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--roulette-green) 0deg 9.7deg,
    var(--roulette-red) 9.7deg 19.4deg,
    var(--roulette-black) 19.4deg 29.1deg,
    var(--roulette-red) 29.1deg 38.8deg,
    var(--roulette-black) 38.8deg 48.5deg,
    var(--roulette-red) 48.5deg 58.2deg,
    var(--roulette-black) 58.2deg 67.9deg,
    var(--roulette-red) 67.9deg 77.6deg,
    var(--roulette-black) 77.6deg 87.3deg,
    var(--roulette-red) 87.3deg 97deg,
    var(--roulette-black) 97deg 106.7deg,
    var(--roulette-red) 106.7deg 116.4deg,
    var(--roulette-black) 116.4deg 126.1deg,
    var(--roulette-red) 126.1deg 135.8deg,
    var(--roulette-black) 135.8deg 145.5deg,
    var(--roulette-red) 145.5deg 155.2deg,
    var(--roulette-black) 155.2deg 164.9deg,
    var(--roulette-red) 164.9deg 174.6deg,
    var(--roulette-black) 174.6deg 184.3deg,
    var(--roulette-red) 184.3deg 194deg,
    var(--roulette-black) 194deg 203.7deg,
    var(--roulette-red) 203.7deg 213.4deg,
    var(--roulette-black) 213.4deg 223.1deg,
    var(--roulette-red) 223.1deg 232.8deg,
    var(--roulette-black) 232.8deg 242.5deg,
    var(--roulette-red) 242.5deg 252.2deg,
    var(--roulette-black) 252.2deg 261.9deg,
    var(--roulette-red) 261.9deg 271.6deg,
    var(--roulette-black) 271.6deg 281.3deg,
    var(--roulette-red) 281.3deg 291deg,
    var(--roulette-black) 291deg 300.7deg,
    var(--roulette-red) 300.7deg 310.4deg,
    var(--roulette-black) 310.4deg 320.1deg,
    var(--roulette-red) 320.1deg 329.8deg,
    var(--roulette-black) 329.8deg 339.5deg,
    var(--roulette-red) 339.5deg 349.2deg,
    var(--roulette-black) 349.2deg 360deg
  );
  border: 4px solid var(--gold-dim);
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(255, 215, 0, 0.2);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.roulette-wheel--spinning {
  animation: wheel-spin 1.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes wheel-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(1080deg); }
}

.roulette-wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid var(--gold);
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.roulette-result-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.roulette-result-ball--red { background: var(--roulette-red); }
.roulette-result-ball--black { background: var(--roulette-black); }
.roulette-result-ball--green { background: var(--roulette-green); }

.roulette-result-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.roulette-bet-mat {
  background: var(--machine-felt);
  border: 2px solid var(--felt-dark);
  border-radius: 4px;
  padding: 0.4rem;
  font-size: 0.7rem;
}

.roulette-mat-zero {
  text-align: center;
  margin-bottom: 0.3rem;
}

.roulette-mat-zero button,
.roulette-mat-cell button {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  padding: 0.25rem 0;
  width: 100%;
  transition: background 0.15s, box-shadow 0.15s;
}

.roulette-mat-zero button {
  background: var(--roulette-green);
  color: #fff;
}

.roulette-mat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.roulette-mat-cell button {
  color: #fff;
}

.roulette-mat-cell--red button { background: var(--roulette-red); }
.roulette-mat-cell--black button { background: var(--roulette-black); }

.roulette-mat-zero button:hover,
.roulette-mat-cell button:hover,
.roulette-mat-zero button.selected,
.roulette-mat-cell button.selected {
  box-shadow: 0 0 8px var(--gold);
  border-color: var(--gold);
}

.roulette-outside-bets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.roulette-outside-bets .form-row {
  margin: 0;
}

.roulette-outside-bets select {
  max-width: 100%;
  font-size: 0.78rem;
}

.roulette-session {
  color: var(--dim);
  font-size: 0.82rem;
  margin: 0.5rem 0;
}

.roulette-history {
  margin: 0.35rem 0 0.65rem;
  padding: 0.45rem 0.55rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.roulette-history-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.35rem;
}

.roulette-history-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scroll-behavior: smooth;
}

.roulette-history-empty {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.roulette-history-chip {
  flex: 0 0 auto;
  min-width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.roulette-history-chip--red { background: var(--roulette-red); }
.roulette-history-chip--black { background: var(--roulette-black); }
.roulette-history-chip--green { background: var(--roulette-green); }

.roulette-history-chip--enter {
  animation: roulette-history-enter 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.roulette-history--pulse .roulette-history-track {
  animation: roulette-history-track-shift 0.45s ease-out;
}

@keyframes roulette-history-enter {
  0% {
    transform: translateX(-120%) scale(0.55);
    opacity: 0;
  }
  60% {
    transform: translateX(0) scale(1.12);
    opacity: 1;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes roulette-history-track-shift {
  0% { transform: translateX(-0.6rem); }
  100% { transform: translateX(0); }
}

.machine-game-nav {
  display: flex;
  gap: 0.35rem;
  margin: 0.5rem 0 0.75rem;
  justify-content: center;
}

.machine-game-tab {
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--chrome);
  border-radius: 3px;
  color: var(--dim);
  cursor: default;
}

.machine-game-tab--active {
  color: var(--machine-accent);
  border-color: var(--machine-accent);
  background: rgba(255, 215, 0, 0.08);
}

.video-machine--holdem .machine-game-tab--active {
  background: rgba(94, 184, 255, 0.08);
}

.video-machine--roulette .machine-game-tab--active {
  background: rgba(240, 113, 120, 0.08);
}


/* ── Themed slot machine cabinets ── */

.slot-floor {
  max-width: 960px;
  margin: 0 auto;
}

.slot-floor-intro {
  color: var(--dim);
  font-size: 0.85rem;
  margin: 0.5rem 0 1rem;
  text-align: center;
}

.slot-category {
  margin: 1.5rem 0 0.75rem;
}

.slot-category-title {
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.slot-machine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}

.slot-machine-card {
  --slot-accent: var(--gold);
  --slot-bg: #1a2230;
  background: var(--slot-bg);
  border: 2px solid var(--chrome);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  position: relative;
  overflow: hidden;
}

.slot-machine-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  pointer-events: none;
}

.slot-machine-card:hover,
.slot-machine-card:focus-visible {
  border-color: var(--slot-accent);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.15);
  transform: translateY(-2px);
  outline: none;
}

.slot-machine-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.slot-machine-card-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.slot-machine-card-name {
  color: var(--slot-accent);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin: 0;
}

.slot-machine-card-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--slot-accent);
  border-radius: 2px;
  color: var(--slot-accent);
  white-space: nowrap;
}

.slot-machine-card-tagline {
  color: var(--dim);
  font-size: 0.75rem;
  margin: 0.25rem 0 0.5rem;
  line-height: 1.4;
}

.slot-machine-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: var(--dim);
}

.slot-machine-card-bet {
  color: var(--yellow);
  font-weight: 600;
}

.slot-machine-card-jackpot {
  color: var(--gold);
  font-weight: 700;
}

.slot-machine-card-playstyle {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.35rem;
  font-style: italic;
}

/* Card theme previews */
.slot-theme-classic-gold { --slot-accent: #f0c040; --slot-bg: #2a1f14; }
.slot-theme-classic-gold::before { background: linear-gradient(135deg, #f0c040 0%, transparent 60%); }

.slot-theme-high-limit { --slot-accent: #d4d8e0; --slot-bg: #0a0a12; }
.slot-theme-high-limit::before { background: repeating-linear-gradient(45deg, #333 0, #333 2px, transparent 2px, transparent 8px); }

.slot-theme-megabucks { --slot-accent: #3dd68c; --slot-bg: #0a2018; }
.slot-theme-megabucks::before { background: radial-gradient(circle at 80% 20%, #3dd68c 0%, transparent 50%); }

.slot-theme-wheel { --slot-accent: #c678dd; --slot-bg: #2a1040; }
.slot-theme-wheel::before { background: conic-gradient(from 0deg, #c678dd, #f0c040, #39c5cf, #c678dd); }

.slot-theme-blazin { --slot-accent: #ff6b35; --slot-bg: #2a1008; }
.slot-theme-blazin::before { background: linear-gradient(180deg, #ff6b35 0%, transparent 70%); }

.slot-theme-buffalo { --slot-accent: #e8a838; --slot-bg: #3a2818; }
.slot-theme-buffalo::before { background: linear-gradient(180deg, #ff8844 0%, #3a2818 80%); }

.slot-theme-monte-carlo { --slot-accent: #ffd700; --slot-bg: #1a1520; }
.slot-theme-monte-carlo::before { background: linear-gradient(135deg, #ffd700 0%, transparent 40%); }

.slot-theme-super-spin { --slot-accent: #5eb8ff; --slot-bg: #0a1830; }
.slot-theme-super-spin::before { background: radial-gradient(circle, #5eb8ff 0%, transparent 60%); }

.slot-theme-red-hot { --slot-accent: #f07178; --slot-bg: #2a0808; }
.slot-theme-red-hot::before { background: linear-gradient(90deg, #c41e3a, #ff6b35); }

.slot-theme-double-jp { --slot-accent: #ffd700; --slot-bg: #1a1808; }
.slot-theme-double-jp::before { background: linear-gradient(180deg, #ffd700 0%, #ff6b35 50%, transparent 100%); }

.slot-theme-spooky { --slot-accent: #9b59b6; --slot-bg: #120818; }
.slot-theme-spooky::before { background: radial-gradient(ellipse at 50% 0%, #9b59b6 0%, transparent 70%); }

.slot-theme-oz { --slot-accent: #3dd68c; --slot-bg: #0a2818; }
.slot-theme-oz::before { background: linear-gradient(90deg, #f0c040 0%, #f0c040 8%, transparent 8%, transparent 16%, #f0c040 16%, #f0c040 24%, transparent 24%); }

.slot-theme-emerald { --slot-accent: #2ecc71; --slot-bg: #081810; }
.slot-theme-emerald::before { background: radial-gradient(circle at 30% 70%, #2ecc71 0%, transparent 50%); }

.slot-theme-tiger-dragon { --slot-accent: #e74c3c; --slot-bg: #1a1008; }
.slot-theme-tiger-dragon::before { background: linear-gradient(90deg, #e74c3c 0%, #e74c3c 50%, #f0c040 50%, #f0c040 100%); opacity: 0.08; }

/* Slot cabinet (play screen) */
.slot-cabinet {
  --slot-accent: var(--gold);
  --slot-glow: rgba(255, 215, 0, 0.3);
  max-width: 640px;
  margin: 1rem auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.slot-cabinet-topper {
  padding: 0.65rem 1rem 0.5rem;
  text-align: center;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

.slot-cabinet-name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slot-accent);
  text-shadow: 0 0 10px var(--slot-glow);
}

.slot-cabinet-tagline {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.2rem;
  font-style: italic;
}

.slot-cabinet-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-top: 0.4rem;
}

.slot-cabinet-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--slot-accent);
  border-radius: 2px;
  color: var(--slot-accent);
}

.slot-cabinet-screen {
  padding: 1rem;
  background: #060a0e;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.slot-jackpot-ticker {
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  padding: 0.5rem;
  margin-bottom: 0.75rem;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--gold-dim);
  border-radius: 4px;
  animation: jackpot-pulse 2s ease-in-out infinite;
}

.slot-jackpot-ticker--hit {
  animation: jackpot-hit-flash 0.9s ease-in-out 3;
  border-color: var(--gold);
}

@keyframes jackpot-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 215, 0, 0.2); }
  50% { box-shadow: 0 0 16px rgba(255, 215, 0, 0.4); }
}

@keyframes jackpot-hit-flash {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 28px rgba(255, 215, 0, 0.75), 0 0 48px rgba(255, 180, 0, 0.25);
    transform: scale(1.02);
  }
}

.slot-reel-window {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  margin: 0.75rem 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 3px inset rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.slot-reel-window--active-spin {
  box-shadow: inset 0 0 24px rgba(255, 215, 0, 0.06);
}

.slot-reel-window-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 215, 0, 0.12) 48%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 215, 0, 0.12) 52%,
    transparent 65%
  );
  background-size: 220% 100%;
  animation: slot-win-shimmer 2.4s ease-in-out infinite;
}

@keyframes slot-win-shimmer {
  0% { background-position: 120% 0; opacity: 0; }
  15% { opacity: 1; }
  45% { background-position: -20% 0; opacity: 1; }
  60%, 100% { background-position: -20% 0; opacity: 0; }
}

.slot-reel {
  width: clamp(3.25rem, 12vw, 5rem);
  height: clamp(4.25rem, 16vw, 6.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a2230 0%, #0a0e14 20%, #0a0e14 80%, #1a2230 100%);
  border: 2px solid var(--chrome);
  border-radius: 4px;
  font-size: clamp(1.35rem, 4.5vw, 2rem);
  font-weight: 700;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  position: relative;
}

.slot-reel::before,
.slot-reel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 20%;
  z-index: 1;
  pointer-events: none;
}

.slot-reel::before {
  top: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

.slot-reel::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

.slot-reel-symbol {
  position: relative;
  z-index: 0;
}

.slot-reel.slot-reel--spinning .slot-reel-symbol {
  animation: reel-blur 0.22s linear infinite;
  animation-delay: var(--reel-delay, 0s);
}

.slot-reel:nth-child(1).slot-reel--spinning .slot-reel-symbol { animation-duration: calc(0.18s * var(--rewards-speed-mult, 1)); }
.slot-reel:nth-child(2).slot-reel--spinning .slot-reel-symbol { animation-duration: calc(0.22s * var(--rewards-speed-mult, 1)); }
.slot-reel:nth-child(3).slot-reel--spinning .slot-reel-symbol { animation-duration: calc(0.26s * var(--rewards-speed-mult, 1)); }

@keyframes reel-blur {
  0% { transform: translateY(-35%); opacity: 0.45; filter: blur(1px); }
  50% { transform: translateY(8%); opacity: 1; filter: blur(0); }
  100% { transform: translateY(40%); opacity: 0.45; filter: blur(1px); }
}

.slot-reel--landed {
  animation: reel-land 0.48s cubic-bezier(0.22, 1.15, 0.36, 1) both;
}

@keyframes reel-land {
  0% { transform: translateY(-6px) scale(1.04); }
  55% { transform: translateY(2px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

.slot-reel-window--win .slot-reel {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.35), inset 0 0 12px rgba(0, 0, 0, 0.6);
}

.slot-reel-window--win .slot-reel--winner .slot-reel-symbol {
  animation: slot-symbol-glow 1.8s ease-in-out infinite;
}

@keyframes slot-symbol-glow {
  0%, 100% {
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.35);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 14px rgba(255, 215, 0, 0.65), 0 0 24px rgba(255, 180, 0, 0.25);
    transform: scale(1.06);
  }
}

.slot-reel-window--win-small {
  animation: slot-win-pulse-small 2.2s ease-in-out infinite;
}

@keyframes slot-win-pulse-small {
  0%, 100% { box-shadow: inset 0 0 0 rgba(255, 215, 0, 0), 0 0 0 rgba(255, 215, 0, 0); }
  50% { box-shadow: inset 0 0 18px rgba(255, 215, 0, 0.08), 0 0 14px rgba(255, 215, 0, 0.18); }
}

.slot-reel-window--win-big {
  animation: slot-win-pulse-big 1.6s ease-in-out infinite;
}

@keyframes slot-win-pulse-big {
  0%, 100% {
    box-shadow: inset 0 0 12px rgba(255, 215, 0, 0.1), 0 0 16px rgba(255, 215, 0, 0.22);
    border-color: rgba(255, 215, 0, 0.45);
  }
  50% {
    box-shadow: inset 0 0 28px rgba(255, 215, 0, 0.18), 0 0 32px rgba(255, 215, 0, 0.42);
    border-color: rgba(255, 215, 0, 0.85);
  }
}

.slot-reel-window--win-big .slot-reel--winner .slot-reel-symbol {
  animation: slot-symbol-glow-big 1.2s ease-in-out infinite;
}

@keyframes slot-symbol-glow-big {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    transform: scale(1.04);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.85), 0 0 36px rgba(255, 140, 0, 0.35);
    transform: scale(1.1);
  }
}

.slot-reel-window--win-jackpot {
  animation: slot-win-pulse-jackpot 1.1s ease-in-out infinite;
}

@keyframes slot-win-pulse-jackpot {
  0%, 100% {
    box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.15), 0 0 24px rgba(255, 215, 0, 0.35);
  }
  50% {
    box-shadow: inset 0 0 40px rgba(255, 215, 0, 0.28), 0 0 48px rgba(255, 180, 0, 0.55);
  }
}

.slot-cabinet--celebrate .slot-cabinet-screen {
  transition: box-shadow 0.3s ease;
}

.slot-cabinet--celebrate-small .slot-cabinet-screen {
  box-shadow: inset 0 0 30px rgba(61, 214, 140, 0.06);
}

.slot-cabinet--celebrate-big .slot-cabinet-screen {
  box-shadow: inset 0 0 40px rgba(255, 215, 0, 0.1);
  animation: cabinet-screen-glow 2s ease-in-out infinite;
}

.slot-cabinet--celebrate-jackpot .slot-cabinet-screen {
  box-shadow: inset 0 0 50px rgba(255, 215, 0, 0.15);
  animation: cabinet-screen-glow-jackpot 1.2s ease-in-out infinite;
}

@keyframes cabinet-screen-glow {
  0%, 100% { box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.08); }
  50% { box-shadow: inset 0 0 50px rgba(255, 215, 0, 0.16); }
}

@keyframes cabinet-screen-glow-jackpot {
  0%, 100% { box-shadow: inset 0 0 40px rgba(255, 215, 0, 0.12); }
  50% { box-shadow: inset 0 0 70px rgba(255, 200, 0, 0.28); }
}

.slot-cabinet--celebrate .slot-cabinet-name {
  animation: slot-marquee-celebrate 2.4s ease-in-out infinite;
}

@keyframes slot-marquee-celebrate {
  0%, 100% { text-shadow: 0 0 10px var(--slot-glow); }
  50% { text-shadow: 0 0 18px var(--slot-glow), 0 0 28px rgba(255, 215, 0, 0.35); }
}

.slot-result {
  text-align: center;
  font-size: 0.85rem;
  margin: 0.5rem 0;
  min-height: 1.25rem;
}

.slot-result--spinning {
  color: var(--yellow);
  letter-spacing: 0.04em;
  animation: slot-spin-text 1.2s ease-in-out infinite;
}

@keyframes slot-spin-text {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.slot-win-callout {
  text-align: center;
  margin: 0.65rem 0 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  animation: slot-win-callout-in 0.55s cubic-bezier(0.22, 1.1, 0.36, 1) both;
}

@keyframes slot-win-callout-in {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.slot-win-callout-amount {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
}

.slot-win-callout-detail {
  font-size: 0.78rem;
  opacity: 0.88;
}

.slot-win-callout--small {
  border-color: rgba(61, 214, 140, 0.35);
  box-shadow: 0 0 12px rgba(61, 214, 140, 0.12);
}

.slot-win-callout--small .slot-win-callout-amount {
  color: var(--green);
  animation: slot-amount-pulse-small 2s ease-in-out infinite;
}

@keyframes slot-amount-pulse-small {
  0%, 100% { text-shadow: 0 0 6px rgba(61, 214, 140, 0.25); }
  50% { text-shadow: 0 0 12px rgba(61, 214, 140, 0.45); }
}

.slot-win-callout--big {
  border-color: rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.18);
}

.slot-win-callout--big .slot-win-callout-amount {
  color: var(--gold);
  font-size: 1.3rem;
  animation: slot-amount-pulse-big 1.5s ease-in-out infinite;
}

@keyframes slot-amount-pulse-big {
  0%, 100% { text-shadow: 0 0 8px rgba(255, 215, 0, 0.35); transform: scale(1); }
  50% { text-shadow: 0 0 18px rgba(255, 215, 0, 0.65); transform: scale(1.03); }
}

.slot-win-callout--jackpot {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.12) 0%, rgba(0, 0, 0, 0.45) 100%);
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.28);
  animation: slot-win-callout-in 0.55s cubic-bezier(0.22, 1.1, 0.36, 1) both,
    slot-jackpot-callout-glow 1.2s ease-in-out 0.55s infinite;
}

@keyframes slot-jackpot-callout-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.25); }
  50% { box-shadow: 0 0 36px rgba(255, 215, 0, 0.5); }
}

.slot-win-callout--jackpot .slot-win-callout-amount {
  color: var(--gold);
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: slot-amount-pulse-jackpot 1s ease-in-out infinite;
}

@keyframes slot-amount-pulse-jackpot {
  0%, 100% {
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 24px rgba(255, 215, 0, 0.85), 0 0 40px rgba(255, 140, 0, 0.35);
    transform: scale(1.05);
  }
}

.slot-win-callout--jackpot .slot-win-callout-detail {
  color: var(--gold);
  font-weight: 600;
  opacity: 1;
}

.slot-paytable-panel {
  margin: 0.75rem 0;
  padding: 0.6rem 0.75rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.slot-paytable-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slot-accent);
  margin-bottom: 0.4rem;
}

.slot-paytable-grid {
  display: grid;
  gap: 0.2rem;
  font-size: 0.72rem;
}

.slot-paytable-row {
  display: flex;
  justify-content: space-between;
  padding: 0.15rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.slot-paytable-row--jackpot {
  color: var(--gold);
  font-weight: 700;
}

.slot-paytable-mult {
  color: var(--yellow);
  font-weight: 600;
}

.slot-cabinet-base {
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-dark) 100%);
  border-top: 2px solid var(--chrome-light);
}

.slot-cabinet-base .chip-line {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.slot-cabinet-base .form-row label {
  font-size: 0.75rem;
}

.slot-bet-row .bet-stepper {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  max-width: 320px;
}

.slot-bet-row .bet-stepper-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: auto;
  text-align: center;
}

.slot-bet-row .bet-step-btn {
  flex: 0 0 auto;
  min-width: 2.5rem;
  padding: 0.45rem 0.55rem;
}

.slot-bet-row .bet-max-btn {
  min-width: 3rem;
  font-size: 0.7rem;
}

.slot-cabinet-base .btn {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Per-theme cabinet chrome */
.slot-cabinet.slot-theme-classic-gold {
  --slot-accent: #f0c040; --slot-glow: rgba(240, 192, 64, 0.35);
  background: linear-gradient(180deg, #4a3520 0%, #2a1f14 15%, #1a1510 100%);
  border: 3px solid #8b6914;
}
.slot-cabinet.slot-theme-classic-gold .slot-reel-window { background: #1a1008; border-color: #8b6914; }

.slot-cabinet.slot-theme-high-limit {
  --slot-accent: #d4d8e0; --slot-glow: rgba(212, 216, 224, 0.3);
  background: linear-gradient(180deg, #3a3a48 0%, #0a0a12 15%, #050508 100%);
  border: 3px solid #888;
}
.slot-cabinet.slot-theme-high-limit .slot-reel { border-color: #aaa; background: linear-gradient(180deg, #1a1a28 0%, #050508 50%, #1a1a28 100%); }

.slot-cabinet.slot-theme-megabucks {
  --slot-accent: #3dd68c; --slot-glow: rgba(61, 214, 140, 0.35);
  background: linear-gradient(180deg, #1a4030 0%, #0a2018 15%, #051008 100%);
  border: 3px solid #2a8060;
}
.slot-cabinet.slot-theme-megabucks .slot-jackpot-ticker { color: #3dd68c; border-color: #2a8060; }
.slot-cabinet.slot-theme-megabucks .slot-reel-window { background: #051008; border-color: #2a8060; }

.slot-cabinet.slot-theme-wheel {
  --slot-accent: #c678dd; --slot-glow: rgba(198, 120, 221, 0.35);
  background: linear-gradient(180deg, #4a2060 0%, #2a1040 15%, #1a0828 100%);
  border: 3px solid #8040a0;
}
.slot-cabinet.slot-theme-wheel .slot-reel-window { border-color: #8040a0; border-radius: 50px; }

.slot-cabinet.slot-theme-blazin {
  --slot-accent: #ff6b35; --slot-glow: rgba(255, 107, 53, 0.4);
  background: linear-gradient(180deg, #4a1808 0%, #2a1008 15%, #1a0804 100%);
  border: 3px solid #cc4400;
}
.slot-cabinet.slot-theme-blazin .slot-cabinet-name { animation: blazin-flicker 1.5s ease-in-out infinite; }
@keyframes blazin-flicker {
  0%, 100% { text-shadow: 0 0 8px rgba(255, 107, 53, 0.5); }
  50% { text-shadow: 0 0 20px rgba(255, 107, 53, 0.8); }
}

.slot-cabinet.slot-theme-buffalo {
  --slot-accent: #e8a838; --slot-glow: rgba(232, 168, 56, 0.35);
  background: linear-gradient(180deg, #6a4020 0%, #3a2818 15%, #2a1810 100%);
  border: 3px solid #a06020;
}
.slot-cabinet.slot-theme-buffalo .slot-reel-window {
  background: linear-gradient(180deg, #ff8844 0%, #3a2818 30%, #3a2818 70%, #884422 100%);
  border-color: #a06020;
}

.slot-cabinet.slot-theme-monte-carlo {
  --slot-accent: #ffd700; --slot-glow: rgba(255, 215, 0, 0.35);
  background: linear-gradient(180deg, #3a3048 0%, #1a1520 15%, #100810 100%);
  border: 3px solid #c9a800;
}
.slot-cabinet.slot-theme-monte-carlo .slot-cabinet-topper {
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.08), transparent);
}

.slot-cabinet.slot-theme-super-spin {
  --slot-accent: #5eb8ff; --slot-glow: rgba(94, 184, 255, 0.35);
  background: linear-gradient(180deg, #1a3060 0%, #0a1830 15%, #050818 100%);
  border: 3px solid #3080c0;
}
.slot-cabinet.slot-theme-super-spin .slot-cabinet-name { animation: marquee-glow 1.8s ease-in-out infinite; }

.slot-cabinet.slot-theme-red-hot {
  --slot-accent: #f07178; --slot-glow: rgba(240, 113, 120, 0.4);
  background: linear-gradient(180deg, #4a0808 0%, #2a0808 15%, #1a0404 100%);
  border: 3px solid #c41e3a;
}
.slot-cabinet.slot-theme-red-hot .slot-reel { color: #f07178; }

.slot-cabinet.slot-theme-double-jp {
  --slot-accent: #ffd700; --slot-glow: rgba(255, 215, 0, 0.4);
  background: linear-gradient(180deg, #3a3010 0%, #1a1808 15%, #100c04 100%);
  border: 3px solid #ffd700;
}

.slot-cabinet.slot-theme-spooky {
  --slot-accent: #9b59b6; --slot-glow: rgba(155, 89, 182, 0.4);
  background: linear-gradient(180deg, #2a1040 0%, #120818 15%, #080410 100%);
  border: 3px solid #6a3080;
}
.slot-cabinet.slot-theme-spooky .slot-reel-window {
  background: radial-gradient(ellipse at 50% 0%, #2a1040 0%, #080410 70%);
  border-color: #6a3080;
}
.slot-cabinet.slot-theme-spooky .slot-cabinet-name { animation: spooky-glow 3s ease-in-out infinite; }
@keyframes spooky-glow {
  0%, 100% { text-shadow: 0 0 8px rgba(155, 89, 182, 0.4); }
  50% { text-shadow: 0 0 18px rgba(155, 89, 182, 0.7); }
}

.slot-cabinet.slot-theme-oz {
  --slot-accent: #3dd68c; --slot-glow: rgba(61, 214, 140, 0.35);
  background: linear-gradient(180deg, #1a4830 0%, #0a2818 15%, #051810 100%);
  border: 3px solid #2a9060;
}
.slot-cabinet.slot-theme-oz .slot-cabinet-topper {
  background: repeating-linear-gradient(90deg, #f0c040 0, #f0c040 12px, #0a2818 12px, #0a2818 24px);
  background-size: 24px 4px;
  background-position: bottom;
  background-repeat: repeat-x;
}

.slot-cabinet.slot-theme-emerald {
  --slot-accent: #2ecc71; --slot-glow: rgba(46, 204, 113, 0.35);
  background: linear-gradient(180deg, #0a3020 0%, #081810 15%, #040c08 100%);
  border: 3px solid #1a8050;
}
.slot-cabinet.slot-theme-emerald .slot-reel-window { border-color: #1a8050; }

.slot-cabinet.slot-theme-tiger-dragon {
  --slot-accent: #f0c040; --slot-glow: rgba(240, 192, 64, 0.35);
  background: linear-gradient(90deg, #2a1008 0%, #2a1008 50%, #1a1808 50%, #1a1808 100%);
  border: 3px solid #c04020;
}
.slot-cabinet.slot-theme-tiger-dragon .slot-cabinet-topper {
  background: linear-gradient(90deg, rgba(231, 76, 60, 0.15) 0%, rgba(231, 76, 60, 0.15) 50%, rgba(240, 192, 64, 0.15) 50%);
}
.slot-cabinet.slot-theme-tiger-dragon .slot-reel-window {
  border-image: linear-gradient(90deg, #e74c3c, #f0c040) 1;
}

/* ── Horse racing paddock & equestrian sprites ── */

/* ── Horse Stables ── */
.horse-stables-intro {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--dim);
  margin: 0 0 0.25rem;
  max-width: 72ch;
}

.horse-stables-label {
  color: #c8a860;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 1rem 0 0.4rem;
}

/* Pasture — open green field grid */
.horse-pasture {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(60, 200, 100, 0.12) 0%, transparent 60%),
    repeating-linear-gradient(
      0deg,
      rgba(44, 128, 64, 0.1) 0px,
      rgba(44, 128, 64, 0.1) 3px,
      rgba(56, 148, 76, 0.06) 3px,
      rgba(56, 148, 76, 0.06) 7px
    ),
    linear-gradient(180deg, #152a18 0%, #0d1e10 100%);
  border: 2px solid #2a5030;
  border-radius: 10px;
  margin: 0.5rem 0 1.25rem;
}

.horse-pasture-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.85rem 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(80, 180, 100, 0.14);
  border-radius: 8px;
  transition: border-color 0.15s, transform 0.12s;
}

.horse-pasture-card:hover {
  border-color: rgba(120, 220, 140, 0.35);
  transform: translateY(-2px);
}

.horse-pasture-name {
  color: #d8f0d8;
  font-size: 0.73rem;
  font-weight: 700;
  text-align: center;
}

.horse-pasture-coat {
  color: #7ab890;
  font-size: 0.6rem;
  font-style: italic;
  text-align: center;
}

/* Stalls — wooden barn grid */
.horse-stalls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  padding: 1rem;
  background:
    repeating-linear-gradient(
      -55deg,
      rgba(100, 60, 20, 0.07) 0px,
      rgba(100, 60, 20, 0.07) 3px,
      transparent 3px,
      transparent 14px
    ),
    linear-gradient(180deg, #14100a 0%, #0e0c06 100%);
  border: 2px solid #3d2a12;
  border-radius: 10px;
  margin: 0.5rem 0 1.25rem;
}

.horse-stall-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  padding: 0.5rem 0.4rem 0.8rem;
  background: linear-gradient(180deg, rgba(90, 55, 18, 0.45) 0%, rgba(55, 32, 10, 0.65) 100%);
  border: 2px solid #6b4220;
  border-top: 5px solid #9b6830;
  border-radius: 0 0 6px 6px;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.horse-stall-card:hover {
  border-color: #c8a048;
  box-shadow: 0 0 14px rgba(200, 160, 70, 0.18);
}

.horse-stall-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
  padding: 0 0.1rem;
}

.horse-stall-num {
  color: #c8a060;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.horse-stall-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ab870;
  box-shadow: 0 0 5px rgba(74, 184, 112, 0.6);
}

.horse-stall-name {
  color: #f4e4c0;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  margin-top: 0.15rem;
}

.horse-stall-coat {
  color: #b89060;
  font-size: 0.61rem;
  font-style: italic;
  text-align: center;
}

.horse-stall-note {
  color: #806845;
  font-size: 0.59rem;
  text-align: center;
  line-height: 1.4;
  margin-top: 0.1rem;
  padding: 0 0.15rem;
}

@media (max-width: 600px) {
  .horse-pasture,
  .horse-stalls-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
  }
}

.racing-pavilion {
  max-width: 960px;
  margin: 0 auto;
}

.racing-paddock-label {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0.75rem 0 0.4rem;
}

.racing-roster-note {
  font-size: 0.82rem;
  margin: 0.25rem 0 0.5rem;
}

.racing-paddock {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 0.65rem;
  padding: 0.85rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(61, 214, 140, 0.1) 0%, transparent 55%),
    repeating-linear-gradient(
      90deg,
      rgba(42, 104, 56, 0.15) 0px,
      rgba(42, 104, 56, 0.15) 4px,
      rgba(50, 120, 64, 0.1) 4px,
      rgba(50, 120, 64, 0.1) 8px
    ),
    linear-gradient(180deg, #1a3020 0%, #0d2018 100%);
  border: 2px solid var(--felt-dark);
  border-radius: 8px;
  margin: 0.5rem 0 1rem;
}

.horse-paddock-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.65rem 0.45rem 0.75rem;
  background:
    radial-gradient(ellipse at 50% 85%, rgba(42, 104, 56, 0.35) 0%, transparent 70%),
    rgba(0, 0, 0, 0.28);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.horse-paddock-card:hover,
.horse-paddock-card--selected {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
  transform: translateY(-2px);
}

.horse-sprite-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  max-width: 100%;
  height: auto;
  min-width: 48px;
  min-height: 36px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.horse-paddock-num {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
}

.horse-paddock-name {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}

.horse-paddock-sprite-label {
  color: var(--dim);
  font-size: 0.6rem;
  font-style: italic;
  text-align: center;
}

.horse-paddock-odds {
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 600;
}

.racing-finish-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.75rem;
  margin: 0.5rem 0 0.75rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}

.racing-finish-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 80px;
}

.racing-finish-pos {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.85rem;
}

.racing-finish-name {
  font-size: 0.72rem;
  text-align: center;
}

.racing-finish-silks {
  font-size: 0.62rem;
  text-align: center;
}

/* ── Atari / electric table race cabinet ── */

.race-cabinet {
  margin: 0.75rem 0 1rem;
  padding: 10px;
  background: linear-gradient(180deg, #4a3020 0%, #2a1808 55%, #1a0c04 100%);
  border: 4px solid #7a5830;
  border-radius: 14px;
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 160, 0.15),
    inset 0 -4px 12px rgba(0, 0, 0, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.35);
}

.race-cabinet-marquee {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ffd040;
  text-shadow: 0 0 8px rgba(255, 208, 64, 0.45);
  margin-bottom: 6px;
  animation: race-marquee-glow 2s ease-in-out infinite;
}

@keyframes race-marquee-glow {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.race-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 5px 10px;
  margin-bottom: 6px;
  background: linear-gradient(180deg, #f0e4cc 0%, #d8c8a8 100%);
  border: 2px solid #8a7050;
  border-radius: 4px;
  color: #2a2010;
  font-size: 0.68rem;
  font-weight: 600;
  font-family: "JetBrains Mono", monospace;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.race-status-left {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.race-status-right {
  flex-shrink: 0;
  color: #5a4020;
  font-weight: 700;
}

.race-cabinet-screen {
  padding: 4px;
  background: #101010;
  border: 3px solid #222;
  border-radius: 6px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.race-track-canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.race-cabinet-controls {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.race-cabinet--finished .race-cabinet-marquee {
  color: #80ff90;
  text-shadow: 0 0 10px rgba(80, 255, 120, 0.5);
}

.race-settle-body {
  margin: 0.5rem 0;
}

.race-results-panel {
  margin-top: 1rem;
  transition: opacity 0.4s ease;
}

.race-results-panel.is-hidden {
  display: none;
}

.racing-name-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.75rem 0;
}

.racing-name-chip {
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border: 1px solid var(--cyan-dim);
  border-radius: 12px;
}

.racing-names-input {
  width: 100%;
  min-height: 140px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.6rem 0.75rem;
  resize: vertical;
}

.racing-names-input:focus {
  border-color: var(--cyan-dim);
  outline: none;
}

@media (max-width: 600px) {
  #app {
    --app-pad-x: 0.75rem;
    padding-top: max(1rem, var(--safe-top));
    padding-right: max(var(--app-pad-x), var(--safe-right));
    padding-bottom: max(2rem, calc(var(--safe-bottom) + var(--app-fab-clearance)));
    padding-left: max(var(--app-pad-x), var(--safe-left));
  }

  .reels {
    font-size: 1.5rem;
    letter-spacing: 0.25rem;
  }

  .action-bar {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .error-slots {
    font-size: 1.75rem;
    letter-spacing: 0.35rem;
  }

  .error-ascii {
    font-size: 0.65rem;
  }

  .video-machine {
    margin: 0.5rem 0;
    border-radius: 8px;
  }

  .machine-screen {
    margin: 0.5rem;
    padding: 0.35rem;
  }

  .machine-screen-inner {
    padding: 0.75rem;
  }

  .card-chip {
    min-width: 2rem;
    height: 2.8rem;
    font-size: 0.85rem;
  }

  .roulette-display {
    grid-template-columns: 1fr;
  }

  .roulette-wheel-wrap {
    width: 130px;
    height: 130px;
  }

  .holdem-rank-ref {
    columns: 1;
  }

  .holdem-players--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .holdem-raise-controls {
    width: 100%;
  }

  .holdem-raise-input {
    flex: 1 1 5rem;
  }

  .machine-controls .btn {
    width: 100%;
  }

  .slot-machine-grid {
    grid-template-columns: 1fr;
  }

  .slot-reel {
    width: 4rem;
    height: 5.5rem;
    font-size: 1.5rem;
  }

  .racing-paddock {
    grid-template-columns: repeat(2, 1fr);
  }

  .dining-grid {
    grid-template-columns: 1fr;
  }

  .settings-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .hub-features {
    display: none;
  }
}

/* Tablet — 601px to 900px */
@media (min-width: 601px) and (max-width: 900px) {
  #app {
    padding-top: max(1.25rem, var(--safe-top));
    padding-right: max(1rem, var(--safe-right));
    padding-bottom: max(2.5rem, calc(var(--safe-bottom) + var(--app-fab-clearance)));
    padding-left: max(1rem, var(--safe-left));
  }

  .dining-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .roulette-display {
    grid-template-columns: 1fr;
  }

  .video-machine {
    margin: 0.75rem 0;
  }

  .horse-pasture,
  .horse-stalls-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .racing-paddock {
    grid-template-columns: repeat(3, 1fr);
  }

  .slot-machine-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* Scale root font slightly on small phones */
@media (max-width: 400px) {
  html, body {
    font-size: 13px;
  }

  .banner-title {
    font-size: 1.1rem;
  }
}

/* ── Equestrian Arena ───────────────────────────────────────────────────────── */

.equestrian-arena {
  max-width: 820px;
  margin: 0 auto;
}

.equestrian-entries {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.75rem 0 1rem;
}

.equestrian-entry-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  border-left: 3px solid var(--gold);
  flex-wrap: wrap;
}

.eq-num {
  font-weight: 700;
  color: var(--gold);
  min-width: 2rem;
  font-size: 0.9rem;
}

.eq-names {
  flex: 1;
  font-size: 0.9rem;
  min-width: 180px;
}

.eq-scores {
  font-size: 0.8rem;
  opacity: 0.7;
}

.eq-odds {
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 3rem;
  text-align: right;
}

.eq-settle-body {
  margin: 0.5rem 0;
}

@media (max-width: 600px) {
  .equestrian-entry-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .eq-odds {
    text-align: left;
  }
}


/* ── Craps machine ── */

.video-machine--craps {
  --machine-accent: #f0a060;
}

.video-machine--craps .machine-game-tab--active {
  background: rgba(240, 160, 96, 0.12);
}

.craps-dice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
  min-height: 4rem;
}

.craps-dice--idle {
  opacity: 0.45;
  font-size: 2rem;
}

.craps-die {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f7f2e8;
  color: #1a1a1a;
  border-radius: 0.45rem;
  font-weight: 800;
  font-size: 1.35rem;
  border: 2px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

.craps-total {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.craps-point-lamp {
  text-align: center;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.craps-sides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

/* ── Lottery counter ── */

.lottery-panel {
  max-width: 960px;
  margin: 0 auto;
}

.lottery-cabinet {
  --lottery-accent: var(--gold);
  --lottery-glow: rgba(255, 215, 0, 0.3);
  max-width: 920px;
  margin: 0.75rem auto 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, #1a2230 0%, #0c121a 100%);
  border: 2px solid var(--chrome);
  position: relative;
}

.lottery-cabinet-topper {
  padding: 0.7rem 1rem 0.55rem;
  text-align: center;
  border-bottom: 2px solid rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, #2a3344 0%, #161c28 100%);
}

.lottery-cabinet-name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lottery-accent);
  text-shadow: 0 0 10px var(--lottery-glow);
}

.lottery-cabinet-sub {
  color: var(--dim);
  font-size: 0.72rem;
  margin-top: 0.2rem;
  letter-spacing: 0.04em;
}

.lottery-cabinet-screen {
  padding: 0.85rem 1rem 1rem;
  position: relative;
  min-height: 12rem;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--cyan) 8%, transparent) 0%, transparent 55%),
    rgba(0, 0, 0, 0.25);
}

.lottery-cabinet-base {
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-dark) 100%);
  border-top: 2px solid var(--chrome-light);
}

.lottery-cabinet--celebrate-small .lottery-cabinet-screen {
  box-shadow: inset 0 0 30px rgba(61, 214, 140, 0.08);
}

.lottery-cabinet--celebrate-big .lottery-cabinet-screen {
  box-shadow: inset 0 0 40px rgba(255, 215, 0, 0.12);
  animation: lottery-screen-glow 2s ease-in-out infinite;
}

.lottery-cabinet--celebrate-jackpot .lottery-cabinet-screen {
  box-shadow: inset 0 0 50px rgba(255, 215, 0, 0.18);
  animation: lottery-screen-glow-jackpot 1.2s ease-in-out infinite;
}

.lottery-cabinet--celebrate .lottery-cabinet-name {
  animation: lottery-marquee-celebrate 2.4s ease-in-out infinite;
}

@keyframes lottery-screen-glow {
  0%, 100% { box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.08); }
  50% { box-shadow: inset 0 0 50px rgba(255, 215, 0, 0.16); }
}

@keyframes lottery-screen-glow-jackpot {
  0%, 100% { box-shadow: inset 0 0 40px rgba(255, 215, 0, 0.12); }
  50% { box-shadow: inset 0 0 64px rgba(255, 215, 0, 0.28); }
}

@keyframes lottery-marquee-celebrate {
  0%, 100% { text-shadow: 0 0 10px var(--lottery-glow); }
  50% { text-shadow: 0 0 18px var(--lottery-glow), 0 0 28px rgba(255, 215, 0, 0.35); }
}

.lottery-panel .lottery-ticket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.55rem;
  margin: 0.75rem 0 1rem;
}

.lottery-ticket-card {
  text-align: left;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 4px;
  padding: 0.65rem 0.75rem;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.lottery-ticket-card:hover:not(:disabled),
.lottery-ticket-card:focus-visible:not(:disabled) {
  border-color: var(--gold);
  transform: translateY(-1px);
  outline: none;
}

.lottery-ticket-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.lottery-ticket-card--active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.35), 0 0 14px rgba(255, 215, 0, 0.12);
}

.lottery-ticket-card--premium {
  border-color: color-mix(in srgb, var(--cyan) 35%, transparent);
  background: linear-gradient(160deg, rgba(20, 40, 48, 0.9) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.lottery-ticket-card--premium.lottery-ticket-card--active {
  border-color: #39c5cf;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 40%, transparent), 0 0 16px color-mix(in srgb, var(--cyan) 15%, transparent);
}

.lottery-ticket-card--mega {
  border-color: rgba(240, 192, 64, 0.35);
}

.lottery-ticket-name {
  font-weight: 700;
  color: #fff;
}

.lottery-ticket-price {
  color: var(--gold);
  font-size: 0.85rem;
  margin: 0.15rem 0 0.2rem;
}

.lottery-ticket-scale {
  color: var(--cyan, #39c5cf);
  font-size: 0.68rem;
  margin-bottom: 0.25rem;
}

.lottery-result {
  margin: 0.75rem 0;
  min-height: 2.5rem;
}

.lottery-draw {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
}

.lottery-lucky-selector,
.lottery-mega-selectors {
  margin: 0.75rem 0 1rem;
}

.lottery-selector-label {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.lottery-selector-summary {
  color: var(--dim);
  font-size: 0.78rem;
  margin-bottom: 0.45rem;
}

.lottery-selector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.lottery-pick-slots {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}

.lottery-pick-slot {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: var(--dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  cursor: pointer;
}

.lottery-pick-slot--filled {
  border-style: solid;
  border-color: var(--gold);
  color: #fff;
  background: rgba(255, 215, 0, 0.12);
}

.lottery-digit-pad,
.lottery-ball-grid {
  display: grid;
  gap: 0.35rem;
}

.lottery-digit-pad {
  grid-template-columns: repeat(5, minmax(0, 2.6rem));
  max-width: 16rem;
}

.lottery-ball-grid {
  grid-template-columns: repeat(auto-fill, minmax(2.15rem, 1fr));
  max-width: 100%;
}

.lottery-ball-grid--powerball {
  max-width: 22rem;
}

.lottery-ball {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: radial-gradient(circle at 30% 25%, #3a4658 0%, #1a2230 70%);
  color: #e8eef6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.lottery-ball:hover:not(:disabled),
.lottery-ball:focus-visible:not(:disabled) {
  border-color: var(--gold);
  transform: translateY(-1px);
  outline: none;
}

.lottery-ball:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.lottery-ball--selected {
  border-color: var(--gold);
  background: radial-gradient(circle at 30% 25%, #f0c040 0%, #a67c00 75%);
  color: #1a1200;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

.lottery-ball--powerball.lottery-ball--selected {
  border-color: #ff5a5a;
  background: radial-gradient(circle at 30% 25%, #ff7a7a 0%, #b01010 75%);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 80, 80, 0.4);
}

.lottery-draw-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.55rem 0;
}

.lottery-draw-ball {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #1a2230;
  color: var(--dim);
}

.lottery-draw-ball--revealed {
  color: #fff;
  border-color: var(--gold);
  background: radial-gradient(circle at 30% 25%, #4a5870 0%, #1a2230 70%);
  animation: lottery-ball-pop 0.45s cubic-bezier(0.22, 1.1, 0.36, 1) both;
  animation-delay: var(--ball-delay, 0s);
}

.lottery-draw-ball--powerball.lottery-draw-ball--revealed {
  border-color: #ff5a5a;
  background: radial-gradient(circle at 30% 25%, #ff7a7a 0%, #8a1010 75%);
  box-shadow: 0 0 12px rgba(255, 80, 80, 0.35);
}

.lottery-draw-ball--pending {
  opacity: 0.45;
}

@keyframes lottery-ball-pop {
  0% { opacity: 0; transform: scale(0.6) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.lottery-draw-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 16, 0.72);
  z-index: 5;
  animation: lottery-overlay-in 0.25s ease-out both;
}

@keyframes lottery-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lottery-draw-overlay-card {
  min-width: min(90%, 22rem);
  padding: 1.1rem 1.25rem 1.25rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: linear-gradient(180deg, #1c2534 0%, #0e141c 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  text-align: center;
}

.lottery-draw-overlay-title {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}

.lottery-scratch-hint {
  margin: 0.75rem 0;
}

.lottery-scratch-card {
  position: relative;
  width: min(100%, 16rem);
  margin: 0.65rem auto;
  aspect-ratio: 1.6;
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  overflow: hidden;
  background: #141a24;
}

.lottery-scratch-symbols {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 1.6rem;
  z-index: 1;
}

.lottery-scratch-symbol {
  animation: lottery-ball-pop 0.4s cubic-bezier(0.22, 1.1, 0.36, 1) both;
  animation-delay: var(--sym-delay, 0s);
}

.lottery-scratch-foil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(125deg, rgba(220, 220, 230, 0.55) 0%, rgba(160, 170, 190, 0.75) 40%, rgba(240, 240, 250, 0.4) 100%);
  transition: clip-path 0.7s ease, opacity 0.7s ease;
  clip-path: inset(0 0 0 0);
}

.lottery-scratch-card--revealed .lottery-scratch-foil {
  clip-path: inset(0 0 0 100%);
  opacity: 0;
  pointer-events: none;
}

.lottery-scratch-card--foil .lottery-scratch-symbols {
  filter: blur(1px);
  opacity: 0.35;
}

.lottery-scratch-card--revealed .lottery-scratch-symbols {
  filter: none;
  opacity: 1;
}

.lottery-win-callout {
  text-align: center;
  margin: 0.65rem 0 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  animation: lottery-win-callout-in 0.55s cubic-bezier(0.22, 1.1, 0.36, 1) both;
}

@keyframes lottery-win-callout-in {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.lottery-win-callout-amount {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
}

.lottery-win-callout-detail {
  font-size: 0.78rem;
  opacity: 0.88;
}

.lottery-win-callout--small {
  border-color: rgba(61, 214, 140, 0.35);
  box-shadow: 0 0 12px rgba(61, 214, 140, 0.12);
}

.lottery-win-callout--small .lottery-win-callout-amount {
  color: var(--green);
}

.lottery-win-callout--big {
  border-color: rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.18);
}

.lottery-win-callout--big .lottery-win-callout-amount {
  color: var(--gold);
  font-size: 1.3rem;
}

.lottery-win-callout--jackpot {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.12) 0%, rgba(0, 0, 0, 0.45) 100%);
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.28);
  animation: lottery-win-callout-in 0.55s cubic-bezier(0.22, 1.1, 0.36, 1) both,
    lottery-jackpot-callout-glow 1.2s ease-in-out 0.55s infinite;
}

@keyframes lottery-jackpot-callout-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.25); }
  50% { box-shadow: 0 0 36px rgba(255, 215, 0, 0.5); }
}

.lottery-win-callout--jackpot .lottery-win-callout-amount {
  color: var(--gold);
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .lottery-digit-pad {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: none;
  }

  .lottery-ball {
    width: 100%;
    min-height: 2.15rem;
    height: auto;
    aspect-ratio: 1;
  }
}

/* ── Prediction market board ── */

.prediction-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0.75rem;
}

.prediction-chip {
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.prediction-chip--active {
  border-color: var(--gold);
  color: #111;
  background: var(--gold);
  font-weight: 700;
}

.prediction-card {
  border-left: 3px solid rgba(255, 215, 0, 0.35);
}

.prediction-card--history {
  border-left-color: #6ec6ff;
}

.prediction-card--easter-eggs {
  border-left-color: #ff7eb6;
}

/* ── Trading Floor market ticker ── */

.market-ticker-host {
  margin: 0.55rem 0 0.85rem;
}

.market-ticker {
  border: 1px solid rgba(255, 215, 0, 0.22);
  background:
    linear-gradient(180deg, rgba(12, 28, 22, 0.95), rgba(6, 14, 12, 0.98)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015) 0 2px,
      transparent 2px 6px
    );
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.market-ticker-scope-hint {
  margin: 0.35rem 0 0.15rem;
  font-size: 0.78rem;
}

.market-ticker__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.65rem 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.market-ticker__scope {
  margin-left: auto;
  color: var(--gold, #ffd700);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.market-ticker__live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #3dcc8c;
  font-weight: 700;
}

.market-ticker__live::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #3dcc8c;
  box-shadow: 0 0 0 0 rgba(61, 204, 140, 0.7);
  animation: market-ticker-pulse 1.4s ease-out infinite;
}

@keyframes market-ticker-pulse {
  0% { box-shadow: 0 0 0 0 rgba(61, 204, 140, 0.55); }
  70% { box-shadow: 0 0 0 0.45rem rgba(61, 204, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 204, 140, 0); }
}

.market-ticker__tape {
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.28);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.market-ticker__track {
  display: inline-flex;
  gap: 1.25rem;
  padding: 0.4rem 0;
  white-space: nowrap;
  animation: market-ticker-scroll 55s linear infinite;
  will-change: transform;
}

.market-ticker__track:hover {
  animation-play-state: paused;
}

@keyframes market-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.market-ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}

.market-ticker__class {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
  min-width: 1.6rem;
}

.market-ticker__item--crypto .market-ticker__class { color: #39c5cf; }
.market-ticker__item--commodities .market-ticker__class { color: #e8a838; }
.market-ticker__item--nyse .market-ticker__class { color: #9ab0ff; }

.market-ticker__sym {
  color: var(--gold, #ffd700);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.market-ticker__px {
  color: rgba(255, 255, 255, 0.9);
}

.market-ticker__chg {
  font-size: 0.7rem;
}

.market-ticker__chg--week {
  opacity: 0.85;
}

.market-ticker__tf-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.market-ticker__tf {
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
}

.market-ticker__tf.is-active {
  color: #0a1210;
  background: var(--gold, #ffd700);
  border-color: rgba(255, 230, 150, 0.5);
}

.market-ticker__tf-hint {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.market-ticker__badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255, 215, 0, 0.35);
  color: var(--gold, #ffd700);
  border-radius: 2px;
  vertical-align: middle;
}

.market-ticker__activity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin-top: 0.35rem;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
}

.market-ticker__activity-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
}

.market-ticker__print {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.market-ticker__print--up { color: #3dcc8c; }
.market-ticker__print--down { color: #ff6b6b; }

.market-ticker--compact .market-ticker__canvas {
  height: 64px;
}

.market-ticker-host--pretrade {
  margin-bottom: 0.75rem;
}

.market-ticker__chg.is-up,
.market-ticker__chart-px.is-up,
.market-ticker__item--up .market-ticker__px {
  color: #3dcc8c;
}

.market-ticker__chg.is-down,
.market-ticker__chart-px.is-down,
.market-ticker__item--down .market-ticker__px {
  color: #ff6b6b;
}

.market-ticker__chart-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.2rem;
  padding: 0.45rem 0.65rem 0.55rem;
}

.market-ticker__chart-meta {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
}

.market-ticker__canvas {
  width: 100%;
  height: 88px;
  display: block;
}

@media (max-width: 520px) {
  .market-ticker__canvas {
    height: 56px;
  }

  .market-ticker__item {
    font-size: 0.7rem;
  }
}

.prediction-blurb {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0.2rem 0;
}

@media (max-width: 720px) {
  .craps-sides {
    grid-template-columns: 1fr;
  }
}

/* ─── Cabinet title / attract scene (web terminal) ───────────────────────── */

.cabinet-title-root {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  padding:
    max(0.75rem, var(--safe-top))
    max(0.75rem, var(--safe-right))
    max(0.75rem, var(--safe-bottom))
    max(0.75rem, var(--safe-left));
  overflow: auto;
  justify-content: center;
  padding: 1rem;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(240, 192, 64, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(26, 92, 58, 0.35) 0%, transparent 55%),
    #070a0f;
}

.cabinet-title {
  width: min(100%, 520px);
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.cabinet-title--out {
  opacity: 0;
  transform: scale(1.03);
}

.cabinet-title-bezel {
  position: relative;
  border: 10px solid var(--chrome-dark);
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--chrome-light) 0%, var(--chrome) 12%, var(--chrome-dark) 100%);
  box-shadow:
    0 0 0 2px #0a0c10,
    0 18px 48px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 10px 10px 14px;
}

.cabinet-title-marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  margin: 0 0 8px;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  background: linear-gradient(180deg, #1a1208 0%, #0c0a08 100%);
  border: 1px solid rgba(240, 192, 64, 0.35);
  box-shadow: inset 0 0 18px rgba(240, 192, 64, 0.12);
}

.cabinet-title-marquee-text {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(240, 192, 64, 0.35);
  animation: cabinetMarqueePulse 2.6s ease-in-out infinite;
}

.cabinet-title-screen {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  min-height: min(42vh, 320px);
  max-height: min(62vh, calc(var(--overlay-max-h) - 6rem));
  border: 2px solid #0d1510;
  background: #06140c;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.55);
}

.cabinet-title-felt {
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 45%,
      var(--felt-light) 0%,
      var(--felt) 42%,
      var(--felt-dark) 78%,
      #06140c 100%);
  opacity: 0.92;
  box-shadow: inset 0 0 0 3px rgba(240, 192, 64, 0.18);
}

.cabinet-title-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 3px
  );
  opacity: 0.35;
  mix-blend-mode: multiply;
}

.cabinet-title-glow {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%, rgba(240, 192, 64, 0.16) 0%, transparent 58%);
  animation: cabinetGlowPulse 2.8s ease-in-out infinite;
}

.cabinet-title-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: min(42vh, 320px);
  max-height: min(62vh, calc(var(--overlay-max-h) - 6rem));
  overflow-y: auto;
  padding: 2rem 1.25rem 2.5rem;
}

.cabinet-title-eyebrow {
  margin: 0 0 0.65rem;
  color: rgba(230, 225, 207, 0.55);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: cabinetFadeUp 0.7s ease 0.12s both;
}

.cabinet-title-logo {
  margin: 0 0 0.85rem;
  color: var(--gold);
  font-size: clamp(1.35rem, 4.5vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  animation:
    cabinetFadeUp 0.8s ease 0.32s both,
    cabinetLogoShimmer 2.4s ease 1s infinite;
}

.cabinet-title-rule {
  height: 2px;
  width: 0;
  margin: 0 auto 0.9rem;
  background: linear-gradient(90deg, transparent, var(--gold), var(--cyan), transparent);
  animation: cabinetRuleDraw 0.9s ease 0.7s forwards;
}

.cabinet-title-tagline {
  margin: 0 0 1.25rem;
  color: var(--cyan);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  animation: cabinetFadeUp 0.7s ease 0.95s both;
}

.cabinet-title-games {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.65rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  animation: cabinetFadeUp 0.65s ease 1.15s both;
}

.cabinet-title-games li {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: rgba(230, 225, 207, 0.72);
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  background: rgba(6, 20, 12, 0.55);
  padding: 0.28rem 0.55rem;
  border-radius: 2px;
}

.cabinet-title-hint {
  margin: 0;
  color: var(--dim);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation:
    cabinetFadeUp 0.6s ease 1.3s both,
    cabinetBlink 1.15s step-end 1.85s infinite;
}

.cabinet-title-suits {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.cabinet-title-suits .suit {
  position: absolute;
  font-size: 1.35rem;
  opacity: 0;
  animation: cabinetSuitFloat 3.2s ease-in-out infinite;
}

.cabinet-title-suits .suit-a { left: 10%; top: 16%; color: var(--text); animation-delay: 0.85s; }
.cabinet-title-suits .suit-b { right: 12%; top: 22%; color: var(--card-red); animation-delay: 1.1s; }
.cabinet-title-suits .suit-c { left: 14%; bottom: 18%; color: var(--card-red); animation-delay: 1.35s; }
.cabinet-title-suits .suit-d { right: 14%; bottom: 20%; color: var(--text); animation-delay: 1.55s; }

.cabinet-title-chips {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.cabinet-title-chips .chip-disk {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  opacity: 0;
  animation: cabinetChipFloat 3.4s ease-in-out infinite;
}

.cabinet-title-chips .chip-a {
  left: 22%;
  top: 28%;
  background: radial-gradient(circle at 35% 35%, #6ae0ea, #1a6a72);
  animation-delay: 1s;
}

.cabinet-title-chips .chip-b {
  right: 20%;
  top: 36%;
  background: radial-gradient(circle at 35% 35%, #ffe08a, #a88410);
  animation-delay: 1.25s;
}

.cabinet-title-chips .chip-c {
  left: 48%;
  bottom: 14%;
  background: radial-gradient(circle at 35% 35%, #f09098, #8a3038);
  animation-delay: 1.5s;
}

.cabinet-title-rail {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: 10px;
  padding: 0 0.35rem;
}

.cabinet-title-rail-lamp {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0c040, #8a7010);
  opacity: 0.55;
  animation: cabinetRailLamp 1.8s ease-in-out infinite;
}

.cabinet-title-rail-lamp:nth-child(2) { animation-delay: 0.15s; }
.cabinet-title-rail-lamp:nth-child(3) { animation-delay: 0.3s; }
.cabinet-title-rail-lamp:nth-child(4) { animation-delay: 0.45s; }
.cabinet-title-rail-lamp:nth-child(5) { animation-delay: 0.6s; }

/* Static boot fallback in index.html — same silhouette before JS mounts. */
.loading-screen--cabinet {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(240, 192, 64, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(26, 92, 58, 0.35) 0%, transparent 55%),
    #070a0f;
}

.loading-screen--cabinet .cabinet-title-bezel {
  width: min(100%, 520px);
}

.loading-screen--cabinet .cabinet-title-screen {
  min-height: min(36vh, 260px);
  max-height: min(52vh, calc(var(--overlay-max-h) - 5rem));
}

.loading-screen--cabinet .cabinet-title-content {
  min-height: min(36vh, 260px);
  max-height: min(52vh, calc(var(--overlay-max-h) - 5rem));
}

.loading-screen--cabinet .cabinet-title-hint {
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes cabinetMarqueePulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes cabinetGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes cabinetFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cabinetRuleDraw {
  from { width: 0; opacity: 0.4; }
  to { width: min(240px, 70%); opacity: 1; }
}

@keyframes cabinetLogoShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

@keyframes cabinetBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

@keyframes cabinetSuitFloat {
  0% { opacity: 0; transform: translateY(8px); }
  20% { opacity: 0.4; }
  50% { transform: translateY(-6px); }
  80% { opacity: 0.3; }
  100% { opacity: 0.15; transform: translateY(4px); }
}

@keyframes cabinetChipFloat {
  0% { opacity: 0; transform: translateY(6px) scale(0.9); }
  25% { opacity: 0.7; }
  50% { transform: translateY(-5px) scale(1); }
  100% { opacity: 0.25; transform: translateY(3px) scale(0.95); }
}

@keyframes cabinetRailLamp {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.95; }
}

@media (max-width: 520px) {
  .cabinet-title-bezel {
    border-width: 7px;
    border-radius: 14px;
    padding: 8px;
  }

  .cabinet-title-marquee-text {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
  }

  .cabinet-title-games li {
    font-size: 0.58rem;
  }
}

/* ── Arcade Alley CRT overlay ── */

body.arcade-overlay-active {
  overflow: hidden;
}

.arcade-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9400;
}

.arcade-overlay--open {
  display: block;
}

.arcade-overlay__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(0.75rem, var(--safe-top))
    max(0.75rem, var(--safe-right))
    max(0.75rem, var(--safe-bottom))
    max(0.75rem, var(--safe-left));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse at center, rgba(20, 10, 40, 0.55), rgba(0, 0, 0, 0.92)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px);
}

.arcade-overlay__cabinet {
  width: min(720px, 100%);
  max-height: var(--overlay-max-h);
  overflow: auto;
  border-radius: 10px;
  border: 3px solid #8a8f98;
  background:
    linear-gradient(145deg, rgba(255, 215, 0, 0.08), transparent 42%),
    linear-gradient(180deg, #323640 0%, #1a1e26 38%, #0c0e12 100%);
  box-shadow:
    0 0 0 2px rgba(255, 215, 0, 0.28),
    0 20px 60px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  padding: 0.55rem 0.65rem 0.7rem;
}

.arcade-overlay__marquee {
  background: linear-gradient(90deg, #3a1040, #801040, #3a1040);
  border: 2px solid #ffd700;
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.45rem;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(255, 94, 200, 0.35);
}

.arcade-overlay__marquee-text {
  display: block;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #ffe08a;
  text-shadow: 0 0 8px #ff5ec8, 0 0 18px #ffd700;
  animation: arcade-marquee-shimmer 2.4s linear infinite;
}

@keyframes arcade-marquee-shimmer {
  0%, 100% { opacity: 0.85; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.25); }
}

.arcade-overlay__bezel {
  display: grid;
  grid-template-columns: 88px 1fr 88px;
  gap: 0.4rem;
  align-items: stretch;
}

.arcade-overlay__side {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.7);
}

.arcade-overlay__stat {
  border: 1px solid rgba(255, 215, 0, 0.28);
  background: rgba(0, 0, 0, 0.45);
  padding: 0.3rem 0.35rem;
  border-radius: 3px;
}

.arcade-overlay__classic {
  margin-top: auto;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.arcade-overlay__crt {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(40, 20, 60, 0.35), transparent 55%),
    #020806;
  border: 4px solid #4a5160;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    inset 0 0 48px rgba(0, 0, 0, 0.88),
    inset 0 0 2px rgba(255, 215, 0, 0.18);
  aspect-ratio: 360 / 420;
  max-height: min(60vh, calc(var(--overlay-max-h) - 8rem));
  width: 100%;
}

.arcade-overlay__crt.is-win {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(61, 204, 140, 0.45);
}

.arcade-overlay__crt.is-lose {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(255, 107, 107, 0.35);
}

.arcade-overlay__canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.arcade-overlay__scanlines,
.arcade-overlay__vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
}

.arcade-overlay__scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.055) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.9;
  animation: arcade-scan 6s linear infinite;
}

@keyframes arcade-scan {
  from { transform: translateY(0); }
  to { transform: translateY(3px); }
}

.arcade-overlay__vignette {
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.62) 100%);
}

.arcade-overlay__coin-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #ffd700;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.arcade-overlay__coin-flash.is-on {
  opacity: 1;
  animation: arcade-coin-blink 0.35s steps(2) 2;
}

@keyframes arcade-coin-blink {
  from { opacity: 0.2; }
  to { opacity: 1; }
}

.arcade-overlay__msg {
  margin: 0.4rem 0 0.15rem;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: #ffe08a;
  min-height: 1.2em;
}

.arcade-overlay__controls {
  margin: 0;
  text-align: center;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.5);
}

.arcade-overlay__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.arcade-overlay__exit {
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
}

.arcade-overlay__led {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #3dcc8c;
  box-shadow: 0 0 8px #3dcc8c;
  animation: arcade-led 1.2s ease-in-out infinite;
}

@keyframes arcade-led {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.arcade-overlay__cost {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  color: var(--gold, #ffd700);
}

.arcade-overlay__touch {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.arcade-overlay__dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.arcade-overlay__dpad-mid {
  display: flex;
  gap: 0.25rem;
}

.arcade-touch-btn {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  min-width: 3.2rem;
  padding: 0.55rem 0.7rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.4);
  background: linear-gradient(180deg, #2a3040, #12151c);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

.arcade-touch-btn--primary {
  border-color: #3dcc8c;
  color: #3dcc8c;
}

.arcade-overlay__end-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.arcade-floor .arcade-cabinet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}

.arcade-cabinet-card {
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
  border: 2px solid color-mix(in srgb, var(--arcade-accent, #ffd700) 55%, #444);
  background:
    linear-gradient(180deg, rgba(30, 20, 40, 0.95), rgba(8, 10, 14, 0.98));
  padding: 0.65rem 0.7rem 0.75rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.arcade-cabinet-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 16px color-mix(in srgb, var(--arcade-accent, #ffd700) 35%, transparent);
}

.arcade-cabinet-card__marquee {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arcade-accent, #ffd700);
  margin-bottom: 0.2rem;
}

.arcade-cabinet-card__classic {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.35rem;
}

.arcade-cabinet-card__blurb {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  min-height: 2.6em;
}

.arcade-cabinet-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.45rem;
}

.arcade-cabinet-card__play {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: #111;
  background: var(--arcade-accent, #ffd700);
  padding: 0.2rem 0.45rem;
  border-radius: 2px;
  font-weight: 700;
  animation: arcade-insert 1.4s steps(2) infinite;
}

@keyframes arcade-insert {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.arcade-redeem-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.75rem 0 1rem;
}

.arcade-redeem-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

@media (max-width: 640px) {
  .arcade-overlay__bezel {
    grid-template-columns: 1fr;
  }

  .arcade-overlay__side {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .arcade-overlay__crt {
    max-height: min(52vh, calc(var(--overlay-max-h) - 7rem));
  }
}

/* Short viewports — shrink chrome so menus/cabinets fit without clipping */
@media (max-height: 700px) {
  .banner {
    margin: 0.5rem 0;
    padding: 0.45rem 0;
  }

  .banner h1,
  .banner h2 {
    font-size: 1.15rem;
  }

  .subtitle {
    margin: 0.55rem 0 0.35rem;
  }

  .video-machine {
    max-height: calc(var(--app-vh) - 5.5rem);
    margin: 0.5rem auto;
  }

  .machine-cabinet-top {
    padding: 0.4rem 0.75rem 0.35rem;
  }

  .machine-marquee {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
  }

  .machine-screen {
    margin: 0.45rem;
    max-height: min(48vh, calc(var(--overlay-max-h) - 10rem));
  }

  .machine-screen-inner {
    padding: 0.7rem 0.8rem;
    min-height: clamp(110px, 22vh, 160px);
  }

  .holdem-table-layout {
    min-height: clamp(110px, 22vh, 160px);
  }

  .slot-reel {
    width: clamp(2.75rem, 10vw, 4rem);
    height: clamp(3.5rem, 14vw, 5.25rem);
    font-size: clamp(1.15rem, 3.8vw, 1.6rem);
  }

  .arcade-overlay__crt {
    max-height: min(48vh, calc(var(--overlay-max-h) - 6rem));
  }
}

@media (max-height: 500px), (orientation: landscape) and (max-height: 500px) {
  #app {
    padding-top: max(0.65rem, var(--safe-top));
    padding-bottom: max(1.25rem, calc(var(--safe-bottom) + 4.25rem));
  }

  .banner {
    margin: 0.35rem 0;
    padding: 0.3rem 0;
  }

  .hub-features {
    display: none;
  }

  .video-machine {
    max-height: calc(var(--app-vh) - 3.5rem);
  }

  .machine-screen {
    max-height: min(42vh, calc(var(--overlay-max-h) - 7rem));
  }

  .arcade-overlay__crt {
    max-height: min(40vh, calc(var(--overlay-max-h) - 5rem));
    aspect-ratio: auto;
    height: min(40vh, calc(var(--overlay-max-h) - 5rem));
  }
}

:root {
  --bg: #100c0a;
  --panel: #1a1410;
  --gold: #e8c868;
  --cyan: #39c5cf;
  --green: #3dd68c;
  --red: #f07178;
  --magenta: #c678dd;
  --text: #f0e8d4;
  --dim: #8a7a68;
  --border: #3a2e24;
  --felt: #1a5c3a;
  --font-pixel: "Press Start 2P", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.6;
  overscroll-behavior: none;
  touch-action: none;
}

#game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(232, 200, 104, 0.16) 0%, transparent 42%),
    radial-gradient(ellipse at 20% 80%, rgba(57, 197, 207, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 75%, rgba(232, 140, 80, 0.06) 0%, transparent 38%),
    linear-gradient(180deg, #1a1410 0%, var(--bg) 45%, #0a0806 100%);
}

#game-shell.arcade-cabinet {
  border: 14px solid #1a1520;
  box-shadow:
    inset 0 0 0 4px #3a3048,
    inset 0 0 0 8px #0a0812,
    0 0 0 6px #2a2438,
    0 24px 64px rgba(0, 0, 0, 0.75);
}

#game-shell.arcade-cabinet::before {
  content: "THE MANDALAY BAY";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  font-size: 7px;
  color: var(--gold);
  letter-spacing: 0.12em;
  pointer-events: none;
  opacity: 0.85;
}

#game-shell.konami-mode {
  filter: contrast(1.15) saturate(0.65) hue-rotate(-15deg);
}

#phaser-root {
  position: absolute;
  inset: 0;
}

#phaser-root canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

#hud {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 640px);
  padding: 8px 12px;
  pointer-events: none;
  z-index: 10;
}

#hud .hud-link {
  pointer-events: auto;
}

.hud-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: rgba(20, 16, 31, 0.92);
  border: 2px solid var(--border);
  padding: 8px 10px;
}

.hud-bar span {
  white-space: nowrap;
}

.bj-dealer-tagline {
  color: var(--dim);
  font-size: 8px;
  margin: 0 0 8px;
  font-style: italic;
}

.hud-chips {
  color: var(--gold);
}

.hud-link {
  color: var(--cyan);
  text-decoration: none;
  white-space: nowrap;
}

.hud-link:hover {
  color: var(--gold);
}

.hud-name {
  color: var(--cyan);
}

.hud-hint {
  color: var(--dim);
  font-size: 8px;
}

#dialogue-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}

/* A system toast is informational, not a conversation: the player keeps
   walking, so the overlay must not eat taps meant for the map underneath. */
#dialogue-overlay.dialogue-overlay--toast {
  pointer-events: none;
}

#dialogue-overlay.dialogue-overlay--toast .dialogue-box {
  pointer-events: auto;
  width: min(100%, 520px);
}

.encounter-overlay,
#blackjack-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 8, 18, 0.72);
}

#title-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}

.title-overlay--intro {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(232, 197, 71, 0.12) 0%, transparent 55%),
    var(--bg);
}

.title-overlay--menu {
  background: rgba(10, 8, 18, 0.88);
  backdrop-filter: blur(4px);
}

#dialogue-overlay[hidden],
.encounter-overlay[hidden],
#blackjack-overlay[hidden],
#title-overlay[hidden],
#trainer-card[hidden] {
  display: none !important;
}

.encounter-panel,
.blackjack-panel {
  width: min(100%, 560px);
  max-height: min(90vh, 640px);
  overflow: auto;
  background: var(--panel);
  border: 4px solid var(--text);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5);
  padding: 16px;
}

.encounter-panel h2,
.blackjack-panel h2 {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--gold);
}

.drive-panel {
  width: min(100%, 720px);
  max-height: min(94vh, 760px);
  background: linear-gradient(165deg, #1a1430 0%, #2a1848 45%, #181022 100%);
  border-color: #f0c060;
}

.drive-tagline {
  margin: 0 0 10px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #a8e8ff;
}

.drive-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  image-rendering: auto;
  border: 3px solid #f0c060;
  box-shadow: inset 0 0 0 2px #301820, 0 0 24px rgba(240, 120, 60, 0.25);
  background: #100818;
}

.drive-hud {
  margin: 8px 0 6px;
  font-size: 9px;
  color: #ffe8a0;
}

.drive-controls {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
  margin: 8px 0 12px;
}

.drive-controls button {
  min-height: 44px;
  font-size: 14px;
  touch-action: none;
  user-select: none;
}

.encounter-scroll {
  max-height: 220px;
  overflow: auto;
  margin-bottom: 10px;
}

.slot-reels {
  font-size: 16px;
  text-align: center;
  padding: 12px;
  margin: 8px 0;
  background: #0a0812;
  border: 2px solid var(--border);
  letter-spacing: 0.08em;
}

.roulette-history {
  margin: 8px 0 10px;
  padding: 8px;
  background: #0a0812;
  border: 2px solid var(--border);
}

.roulette-history-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.roulette-history-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
}

.roulette-history-empty {
  font-size: 10px;
  color: var(--dim, #8a8498);
  font-style: italic;
}

.roulette-history-chip {
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--text);
}

.roulette-history-chip--red { background: #c41e3a; }
.roulette-history-chip--black { background: #1a1a2e; }
.roulette-history-chip--green { background: #0d6b3a; }

.roulette-history-chip--enter {
  animation: roulette-history-enter 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.roulette-history--pulse .roulette-history-track {
  animation: roulette-history-track-shift 0.45s ease-out;
}

@keyframes roulette-history-enter {
  0% { transform: translateX(-120%) scale(0.55); opacity: 0; }
  60% { transform: translateX(0) scale(1.12); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes roulette-history-track-shift {
  0% { transform: translateX(-8px); }
  100% { transform: translateX(0); }
}

.bj-status.success { color: var(--green); }

#trainer-card {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 18, 0.8);
  padding: 16px;
}

.trainer-card-panel {
  width: min(100%, 460px);
  background: var(--panel);
  border: 4px solid var(--gold);
  padding: 16px;
}

.trainer-card__header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.trainer-card__portrait {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #0a0812;
  border: 2px solid var(--border);
  padding: 4px;
}

.trainer-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.trainer-card__actions button {
  flex: 1;
  min-width: 120px;
}

.trainer-card-panel ul {
  padding-left: 16px;
  font-size: 8px;
}

.archetype-btn {
  display: block;
  width: 100%;
  margin: 8px 0;
  text-align: left;
  padding: 10px;
  background: var(--panel);
  border: 2px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 9px;
  cursor: pointer;
}

.archetype-btn:hover {
  border-color: var(--gold);
}

.archetype-btn .dim,
.dim {
  color: var(--dim);
  font-size: 8px;
}

/* --- Character creator / wardrobe --- */
.character-creator {
  width: min(100%, 720px);
  max-height: min(92vh, 720px);
  overflow: auto;
}

.character-creator__layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  margin: 12px 0;
}

.character-creator__preview-col {
  text-align: center;
}

.character-creator__preview-frame {
  padding: 12px;
  background: #0a0812;
  border: 4px solid var(--gold);
  box-shadow: inset 0 0 0 2px #2a2438;
}

.character-creator__preview {
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.character-creator__preview-hint {
  margin: 8px 0 0;
}

.character-creator__section {
  margin-bottom: 12px;
}

.character-creator__label {
  margin: 0 0 6px;
  font-size: 8px;
  color: var(--cyan);
}

.character-creator__archetypes {
  display: grid;
  gap: 6px;
}

.character-creator__archetype--active {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold);
}

.character-creator__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.character-creator__swatch {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 3px solid var(--border);
  cursor: pointer;
  image-rendering: pixelated;
}

.character-creator__swatch--active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px #0a0812, 0 0 0 4px var(--gold);
}

.character-creator__bodies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.character-creator__body {
  padding: 2px;
  min-height: 0;
  background: #0a0812;
  border: 3px solid var(--border);
  cursor: pointer;
  line-height: 0;
}

.character-creator__body--active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px #0a0812, 0 0 0 4px var(--gold);
}

.character-creator__body-thumb {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.character-creator__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.character-creator__confirm {
  flex: 1;
  min-width: 180px;
}

.attract-screen {
  text-align: center;
  animation: attractPulse 1.4s ease-in-out infinite;
}

.attract-insert {
  color: var(--gold);
  font-size: 14px;
  margin-bottom: 16px;
}

.attract-blink {
  animation: attractBlink 0.9s steps(2) infinite;
}

@keyframes attractPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes attractBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}

.hud-time {
  color: var(--magenta);
}

.hud-alert {
  color: #ff6b6b;
  animation: hud-alert-pulse 1.4s steps(2, end) infinite;
}

@keyframes hud-alert-pulse {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.45; }
}

.dialogue-box {
  width: min(100%, 640px);
  background: linear-gradient(180deg, #1a1528 0%, var(--panel) 100%);
  border: 4px solid var(--text);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5);
  padding: 12px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.dialogue-box__inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.dialogue-portrait-wrap {
  flex: 0 0 auto;
  padding: 6px;
  background: #0a0812;
  border: 3px solid var(--gold);
  box-shadow: inset 0 0 0 2px #2a2438;
}

.dialogue-portrait {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.dialogue-box__content {
  flex: 1;
  min-width: 0;
}

.dialogue-box--tappable {
  cursor: pointer;
  user-select: none;
}

.touch-hint {
  position: absolute;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  pointer-events: none;
  padding: 8px 14px;
  background: rgba(20, 16, 31, 0.88);
  border: 2px solid var(--border);
  color: var(--dim);
  font-size: 7px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.dialogue-speaker {
  display: inline-block;
  color: #0a0812;
  background: var(--gold);
  padding: 4px 10px;
  margin-bottom: 10px;
  font-size: 9px;
  border: 2px solid #c4a030;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.dialogue-text {
  min-height: 4.2em;
  margin-bottom: 10px;
  font-size: 10px;
  line-height: 1.65;
  color: #f0ece8;
}

.dialogue-choices {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dialogue-choices li {
  margin: 6px 0;
}

.dialogue-choices button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 8px;
  padding: 12px 10px;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}

.dialogue-choices button:hover,
.dialogue-choices button:focus {
  border-color: var(--cyan);
  color: var(--cyan);
}

.dialogue-advance {
  color: var(--dim);
  font-size: 8px;
  text-align: right;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* --- Title intro cinematic --- */
.title-boot-fallback {
  position: relative;
  width: min(100%, 560px);
  text-align: center;
  padding: 32px 20px;
}

.title-boot-fallback .title-intro-eyebrow,
.title-boot-fallback .title-intro-logo,
.title-boot-fallback .title-intro-tagline {
  opacity: 1;
  animation: none;
}

.title-boot-error,
.title-boot-note {
  color: var(--magenta, #c678dd);
  font-size: 8px;
  line-height: 1.6;
  margin: 12px 0 16px;
}

.title-intro {
  position: relative;
  width: min(100%, 560px);
  text-align: center;
  padding: 32px 20px;
  /* Stay readable even if the play class never lands (background tabs / rAF delay). */
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.title-intro--play {
  opacity: 1;
  transform: scale(1);
}

.title-intro--out {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.title-intro-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 40%, rgba(232, 197, 71, 0.18) 0%, transparent 62%);
  animation: titleGlowPulse 2.8s ease-in-out infinite;
  pointer-events: none;
}

.title-intro-content {
  position: relative;
  z-index: 1;
}

.title-intro-eyebrow {
  color: var(--dim);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 12px;
  opacity: 1;
  animation: titleFadeUp 0.7s ease 0.15s both;
}

.title-intro-logo {
  color: var(--gold);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 16px;
  opacity: 1;
  animation: titleFadeUp 0.8s ease 0.35s both, titleLogoShimmer 2.4s ease 1s infinite;
}

.title-intro-rule {
  height: 2px;
  width: 0;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--cyan), transparent);
  animation: titleRuleDraw 0.9s ease 0.75s forwards;
}

.title-intro-tagline {
  color: var(--magenta);
  font-size: 8px;
  margin: 0 0 24px;
  opacity: 1;
  animation: titleFadeUp 0.7s ease 1s both;
}

.title-intro-hint {
  color: var(--dim);
  font-size: 8px;
  margin: 0;
  opacity: 1;
  animation: titleFadeUp 0.6s ease 1.35s both, blink 1.2s step-end 1.8s infinite;
}

.title-intro-chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.title-intro-chips .chip {
  position: absolute;
  font-size: 14px;
  opacity: 0;
  animation: titleChipFloat 3s ease-in-out infinite;
}

.title-intro-chips .chip-a {
  left: 8%;
  top: 18%;
  color: var(--cyan);
  animation-delay: 0.9s;
}

.title-intro-chips .chip-b {
  right: 10%;
  top: 28%;
  color: var(--gold);
  animation-delay: 1.2s;
}

.title-intro-chips .chip-c {
  left: 50%;
  bottom: 8%;
  color: var(--magenta);
  transform: translateX(-50%);
  animation-delay: 1.5s;
}

@keyframes titleGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes titleFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes titleRuleDraw {
  from { width: 0; opacity: 0.4; }
  to { width: min(240px, 70%); opacity: 1; }
}

@keyframes titleLogoShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

@keyframes titleChipFloat {
  0% { opacity: 0; transform: translateY(8px); }
  20% { opacity: 0.45; }
  50% { transform: translateY(-6px); }
  80% { opacity: 0.35; }
  100% { opacity: 0.2; transform: translateY(4px); }
}

/* --- Title menu panel --- */
.title-panel--enter {
  /* Visible by default so a missed rAF never leaves a blank title screen. */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.title-panel--visible {
  opacity: 1;
  transform: translateY(0);
}

.title-resume-block {
  margin: 8px 0 20px;
  padding: 12px;
  border: 2px solid rgba(232, 197, 71, 0.35);
  background: rgba(232, 197, 71, 0.06);
}

.title-resume-label {
  color: var(--gold);
  font-size: 8px;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.title-resume-btn {
  width: 100%;
  background: linear-gradient(180deg, rgba(232, 197, 71, 0.22) 0%, rgba(232, 197, 71, 0.08) 100%);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: inherit;
  font-size: 9px;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  animation: titleResumePulse 2.2s ease-in-out infinite;
}

.title-resume-btn:hover {
  background: rgba(232, 197, 71, 0.28);
  color: var(--text);
}

.title-carry-stats {
  margin: 0.75rem 0 1.25rem;
  color: #c8e8ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  line-height: 1.6;
}

@keyframes titleResumePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 197, 71, 0.25); }
  50% { box-shadow: 0 0 16px 2px rgba(232, 197, 71, 0.18); }
}

.slot-list--stagger li {
  opacity: 0;
  animation: titleFadeUp 0.45s ease forwards;
}

.slot-list--stagger li:nth-child(1) { animation-delay: 0.08s; }
.slot-list--stagger li:nth-child(2) { animation-delay: 0.14s; }
.slot-list--stagger li:nth-child(3) { animation-delay: 0.2s; }
.slot-list--stagger li:nth-child(4) { animation-delay: 0.26s; }
.slot-list--stagger li:nth-child(5) { animation-delay: 0.32s; }
.slot-list--stagger li:nth-child(6) { animation-delay: 0.38s; }

.slot-list button.active-profile {
  border-color: var(--gold);
  color: var(--gold);
}

.title-input {
  width: 100%;
  padding: 8px;
  margin: 8px 0;
  font-family: inherit;
  font-size: 8px;
  background: #0a0812;
  border: 2px solid #2a2438;
  color: #e6e1cf;
}

.title-panel {
  width: min(100%, 520px);
  background: var(--panel);
  border: 4px solid var(--gold);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5);
  padding: 20px;
  max-height: 90vh;
  overflow-y: auto;
}

.title-panel h1 {
  color: var(--gold);
  font-size: 14px;
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.4;
}

.title-panel .subtitle {
  color: var(--magenta);
  text-align: center;
  font-size: 8px;
  margin-bottom: 20px;
}

.title-panel h2 {
  color: var(--cyan);
  font-size: 9px;
  margin: 16px 0 8px;
}

.slot-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.slot-list li {
  margin: 6px 0;
}

.slot-list button,
.title-actions button {
  width: 100%;
  background: var(--bg);
  border: 2px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 8px;
  padding: 10px;
  cursor: pointer;
  text-align: left;
}

.slot-list button:hover,
.title-actions button:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.slot-list .empty {
  color: var(--dim);
}

.title-actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.title-link {
  text-align: center;
  margin-top: 12px;
}

.title-link a {
  color: var(--dim);
  font-size: 8px;
}

.blackjack-panel {
  width: min(100%, 640px);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--panel);
  border: 4px solid var(--felt);
  padding: 16px;
}

.blackjack-panel h2 {
  color: var(--gold);
  font-size: 11px;
  text-align: center;
  margin: 0 0 12px;
}

.bj-chip-line {
  color: var(--gold);
  margin-bottom: 8px;
}

.bj-status {
  color: var(--dim);
  font-size: 8px;
  margin-bottom: 12px;
}

.bj-table {
  background: var(--felt);
  border: 2px solid #0d3d28;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 8px;
}

.bj-dealer {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.bj-row {
  margin: 4px 0;
}

.bj-hand-heading {
  color: var(--gold);
  font-size: 8px;
  margin-bottom: 6px;
}

.bj-dealer--sprites,
.bj-row--sprites,
.holdem-sprite-table {
  margin-bottom: 10px;
}

.blackjack-panel .playing-card,
.holdem-sprite-table .playing-card {
  width: 2.6rem;
  height: 3.5rem;
}

.blackjack-panel .card-row--sprites,
.holdem-sprite-table .card-row--sprites {
  gap: 0.3rem;
  margin-bottom: 6px;
}

.bj-row.highlight {
  color: var(--cyan);
}

.bj-log {
  background: var(--bg);
  border: 2px solid var(--border);
  padding: 8px;
  max-height: 120px;
  overflow-y: auto;
  margin-bottom: 12px;
  font-size: 8px;
}

.bj-log .success { color: var(--green); }
.bj-log .error { color: var(--red); }
.bj-log .dim { color: var(--dim); }

.bj-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bj-actions button,
.bj-form input {
  font-family: inherit;
  font-size: 8px;
}

.bj-actions button {
  background: var(--bg);
  border: 2px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  cursor: pointer;
}

.bj-actions button.primary {
  border-color: var(--gold);
  color: var(--gold);
}

.bj-actions button:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.bj-form {
  margin-bottom: 12px;
}

.bj-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 8px;
}

.bj-form input {
  width: 100%;
  background: var(--bg);
  border: 2px solid var(--border);
  color: var(--text);
  padding: 8px;
}

@media (max-width: 480px) {
  html, body { font-size: 8px; }
  .title-panel h1 { font-size: 11px; }
  .hud-bar {
    gap: 6px;
    padding-bottom: env(safe-area-inset-top);
  }
  .hud-hint {
    display: none;
  }
  .touch-hint {
    display: block;
    font-size: 6px;
  }
  #dialogue-overlay {
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .dialogue-box {
    padding: 10px;
  }
  .dialogue-box__inner {
    gap: 8px;
  }
  .dialogue-portrait-wrap {
    padding: 4px;
  }
  .dialogue-portrait {
    width: 48px;
    height: auto;
  }
  .dialogue-text {
    font-size: 9px;
    min-height: 3.6em;
  }
  .character-creator__layout {
    grid-template-columns: 1fr;
  }
  .character-creator__preview-col {
    order: -1;
  }
  .dialogue-choices button {
    font-size: 7px;
    padding: 14px 10px;
  }
  .hud-name,
  .hud-chips {
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #game-shell.arcade-cabinet {
    border-width: 8px;
  }
  #game-shell.arcade-cabinet::before {
    display: none;
  }
}

@media (min-width: 481px) {
  .touch-hint {
    display: none;
  }
}

/* ─── Thumb controls ───────────────────────────────────────────────────────
   Only mounted on touch devices. Sits under the panels (z-index 20) and hides
   itself whenever one of them takes the screen. */

.touch-pad {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 14;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 max(14px, env(safe-area-inset-left))
    max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 120ms ease-out;
}

.touch-pad--hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.touch-pad__dpad {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(3, 46px);
  gap: 2px;
}

.touch-pad__actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: end;
  justify-items: center;
  gap: 12px;
}

.touch-btn {
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--text);
  background: rgba(20, 16, 31, 0.82);
  border: 3px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
}

.touch-btn.is-pressed {
  background: rgba(232, 197, 71, 0.28);
  border-color: var(--gold);
  transform: translateY(2px);
  box-shadow: none;
}

.touch-btn--up { grid-area: 1 / 2; }
.touch-btn--left { grid-area: 2 / 1; }
.touch-btn--right { grid-area: 2 / 3; }
.touch-btn--down { grid-area: 3 / 2; }

.touch-btn--talk,
.touch-btn--run {
  border-radius: 50%;
  font-size: 14px;
}

.touch-btn--talk {
  grid-area: 2 / 2;
  width: 74px;
  height: 74px;
  color: #0a0812;
  background: rgba(232, 197, 71, 0.88);
  border-color: #c4a030;
}

.touch-btn--run {
  grid-area: 2 / 1;
  width: 56px;
  height: 56px;
  color: var(--cyan);
  border-color: #2a6a70;
}

.touch-btn--menu {
  grid-area: 1 / 1;
  width: 46px;
  height: 46px;
  font-size: 15px;
}

/* Menu rows are keyboard-sized by default; a thumb needs a bigger target. */
@media (pointer: coarse) {
  .menu-panel-list button,
  .terminal-host-mount .menu-btn {
    min-height: 44px;
    align-items: center;
  }
}

/* With a pad on screen, the bottom-right corner belongs to the A button: move
   the hint and the rewards phone out from under the player's thumb. */
body.has-touch-pad .touch-hint {
  top: max(62px, calc(env(safe-area-inset-top) + 62px));
  bottom: auto;
}


body.has-touch-pad #dialogue-overlay.dialogue-overlay--toast {
  padding-bottom: 190px;
}

body.has-touch-pad .rewards-phone-root {
  top: max(62px, calc(env(safe-area-inset-top) + 62px));
  right: max(10px, env(safe-area-inset-right));
  bottom: auto;
}

/* FAB is top-right: open the shell down into the playfield, not off the top. */
body.has-touch-pad .rewards-phone {
  top: 64px;
  bottom: auto;
  max-height: min(320px, calc(100vh - 140px));
}

body.has-touch-pad .rewards-toast {
  top: 60px;
  bottom: auto;
}

body.has-touch-pad .rewards-phone-shell {
  max-height: inherit;
}

body.has-touch-pad .rewards-lcd {
  max-height: min(240px, calc(100vh - 200px));
}

/* The flip phone floats over everything in the terminal build. In here it has
   to sit under the pixel panels, or its badge covers the menu's chip total. */
body .rewards-phone-root {
  z-index: 18;
}

/* While open, stay above the map banner so LCD buttons remain tappable. */
body .rewards-phone-root.is-open {
  z-index: 45;
}

/* Landscape phones have no room for a tall stack. */
@media (orientation: landscape) and (max-height: 480px) {
  .touch-pad__dpad {
    grid-template-columns: repeat(3, 38px);
    grid-template-rows: repeat(3, 38px);
  }
  .touch-btn--talk { width: 60px; height: 60px; }
  .touch-btn--run { width: 46px; height: 46px; }
  .touch-btn--menu { width: 42px; height: 42px; }
}

/* ─── Hosted terminal screens ──────────────────────────────────────────────
   Shared docs/js/ui renderers mounted inside an encounter panel. The terminal
   stylesheet supplies layout; these rules re-skin it for the pixel cabinet. */

#terminal-overlay,
#menu-overlay {
  align-items: center;
  background: rgba(10, 8, 18, 0.82);
}

.encounter-panel--terminal {
  width: min(100%, 720px);
  max-height: min(92vh, 720px);
  padding: 0;
  display: flex;
  flex-direction: column;
  border-color: var(--gold);
}

.terminal-host-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #0a0812;
  border-bottom: 3px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.terminal-host-exit {
  background: transparent;
  border: 2px solid var(--red);
  color: var(--red);
  font-family: var(--font-pixel);
  font-size: 8px;
  padding: 4px 8px;
  cursor: pointer;
}

.terminal-host-exit:hover {
  background: var(--red);
  color: #0a0812;
}

.terminal-host-mount {
  overflow: auto;
  padding: 4px 12px 12px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 13px;
  line-height: 1.5;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Terminal widgets adopt the cabinet palette. */
.terminal-host-mount .panel,
.terminal-host-mount .hub-features {
  background: rgba(20, 16, 31, 0.85);
  border: 2px solid var(--border);
  border-radius: 0;
  margin: 8px 0;
  padding: 10px;
}

.terminal-host-mount .banner {
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  margin: 8px 0;
}

.terminal-host-mount .banner h1,
.terminal-host-mount .banner h2 {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--gold);
}

.terminal-host-mount .subtitle {
  color: var(--cyan);
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.04em;
}

.terminal-host-mount .menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.terminal-host-mount .menu-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  padding: 7px 9px;
  margin: 4px 0;
  cursor: pointer;
}

.terminal-host-mount .menu-btn:hover,
.terminal-host-mount .menu-btn:focus {
  border-color: var(--cyan);
  color: var(--cyan);
}

.terminal-host-mount .menu-btn.back {
  border-color: #3a3048;
  color: var(--dim);
}

.terminal-host-mount .menu-btn .num {
  color: var(--gold);
}

.terminal-host-mount .btn {
  background: var(--panel);
  border: 2px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 0;
  cursor: pointer;
}

.terminal-host-mount .btn.primary {
  border-color: var(--gold);
  color: var(--gold);
}

.terminal-host-mount .btn.danger {
  border-color: var(--red);
  color: var(--red);
}

.terminal-host-mount .chip-line,
.terminal-host-mount .hud-chips {
  color: var(--gold);
}

.terminal-host-mount .log-area,
.terminal-host-mount .machine-log {
  background: #0a0812;
  border: 2px solid var(--border);
  max-height: 180px;
}

.terminal-host-mount .status-banner {
  border: 2px solid var(--cyan);
  border-radius: 0;
}

.terminal-host-mount .settings-bar {
  display: none;
}

/* The cabinet is small — keep big terminal art from blowing out the panel. */
.terminal-host-mount .slot-cabinet,
.terminal-host-mount .video-machine,
.terminal-host-mount .race-track-view {
  transform-origin: top center;
  max-width: 100%;
}

/* ── START menu ────────────────────────────────────────────────────────── */

.menu-panel {
  width: min(100%, 560px);
  max-height: min(92vh, 680px);
  padding: 0;
  display: flex;
  flex-direction: column;
  border-color: var(--cyan);
}

.menu-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #0a0812;
  border-bottom: 3px solid var(--cyan);
  color: var(--cyan);
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.menu-panel-header .menu-chips {
  color: var(--gold);
}

.menu-panel-body {
  overflow: auto;
  padding: 10px 12px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  line-height: 1.5;
}

.menu-panel-body h3 {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--gold);
  margin: 10px 0 6px;
  letter-spacing: 0.04em;
}

.menu-panel-body p {
  margin: 3px 0;
}

.menu-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-panel-list button {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 9px;
  margin: 3px 0;
  cursor: pointer;
}

.menu-panel-list button .num {
  color: var(--gold);
  font-family: var(--font-pixel);
  font-size: 7px;
}

.menu-panel-list button .menu-detail {
  margin-left: auto;
  color: var(--dim);
  font-size: 11px;
}

.menu-panel-list button:hover,
.menu-panel-list button:focus,
.menu-panel-list button.selected {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(38, 198, 218, 0.08);
}

.menu-quest-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-quest-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  border-left: 3px solid var(--border);
  padding: 5px 8px;
  margin: 4px 0;
  background: rgba(20, 16, 31, 0.7);
}

.menu-quest-list li.quest-complete {
  border-left-color: var(--green, #7bd88f);
  opacity: 0.75;
}

.menu-quest-list li.quest-locked {
  border-left-style: dashed;
  opacity: 0.6;
}

.menu-quest-list .menu-detail {
  margin-left: auto;
  color: var(--gold);
  font-size: 11px;
}

.menu-quest-list .dim {
  flex-basis: 100%;
  color: var(--dim);
  font-size: 11px;
}

.menu-dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 5px;
}

.menu-dex-entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 2px solid var(--border);
  padding: 5px 7px;
  font-size: 11px;
  color: var(--dim);
}

.menu-dex-entry.found {
  border-color: var(--gold);
  color: var(--text);
}

.menu-dex-entry .dim {
  font-size: 10px;
  color: var(--dim);
}

.menu-status {
  margin-top: 10px;
  border-top: 2px solid var(--border);
  padding-top: 6px;
  color: var(--cyan);
  font-size: 11px;
}

.menu-panel-footer {
  padding: 8px 12px;
  border-top: 3px solid var(--cyan);
  background: #0a0812;
}

.menu-panel-footer button {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--dim);
  font-family: var(--font-pixel);
  font-size: 8px;
  padding: 5px 9px;
  cursor: pointer;
}

.menu-panel-footer button:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ── Map-name placard ──────────────────────────────────────────────────── */

#map-banner {
  position: absolute;
  top: 74px;
  left: 50%;
  z-index: 40;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 14px;
  background: rgba(10, 8, 18, 0.92);
  border: 3px solid var(--gold);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translate(-50%, -14px);
}

#map-banner strong {
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.06em;
}

#map-banner span {
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 7px;
  color: var(--cyan);
  letter-spacing: 0.04em;
}

.map-banner--in {
  animation: map-banner-in 320ms steps(6) forwards;
}

.map-banner--out {
  animation: map-banner-out 380ms steps(6) forwards;
}

@keyframes map-banner-in {
  from { opacity: 0; transform: translate(-50%, -14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes map-banner-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -14px); }
}

@media (prefers-reduced-motion: reduce) {
  .map-banner--in,
  .map-banner--out {
    animation-duration: 1ms;
  }
}

/* Intoxication screen glitch / distortion — intensity scales with --intox-level (0–100). */

:root {
  --intox-level: 0;
  --intox-norm: 0;
  --intox-blur: 0;
  --intox-shake: 0;
  --intox-rgb: 0;
  --intox-scan: 0;
  --intox-hue: 0;
}

#app,
#game-shell {
  position: relative;
  /* Soft landing when max intoxication settles back to sober. */
  transition: filter 0.7s ease;
}

.intox-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 9998;
  overflow: hidden;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 0.45s ease;
}

.intox-active > .intox-overlay,
.intox-active.intox-overlay {
  opacity: calc(var(--intox-scan, 0) + 0.05);
}

.intox-overlay__scanlines {
  position: absolute;
  inset: -4px;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 255, 200, calc(var(--intox-scan, 0) * 0.35)) 2px,
    rgba(0, 255, 200, calc(var(--intox-scan, 0) * 0.35)) 3px
  );
  animation: intox-scan-drift calc(12s - var(--intox-norm, 0) * 8s) linear infinite;
}

.intox-overlay__rgb {
  position: absolute;
  inset: 0;
  opacity: calc(var(--intox-rgb, 0) * 0.045);
  mix-blend-mode: screen;
}

.intox-overlay__rgb--r {
  background: rgba(255, 40, 80, 0.5);
  transform: translate(calc(var(--intox-rgb, 0) * 0.6px), calc(var(--intox-rgb, 0) * -0.4px));
  animation: intox-rgb-jitter calc(0.35s - var(--intox-norm, 0) * 0.2s) steps(2) infinite;
}

.intox-overlay__rgb--g {
  background: rgba(40, 255, 120, 0.35);
  transform: translate(calc(var(--intox-rgb, 0) * -0.5px), calc(var(--intox-rgb, 0) * 0.3px));
  animation: intox-rgb-jitter calc(0.42s - var(--intox-norm, 0) * 0.18s) steps(2) infinite reverse;
}

.intox-overlay__rgb--b {
  background: rgba(60, 140, 255, 0.45);
  transform: translate(calc(var(--intox-rgb, 0) * 0.35px), calc(var(--intox-rgb, 0) * 0.55px));
  animation: intox-rgb-jitter calc(0.28s - var(--intox-norm, 0) * 0.15s) steps(3) infinite;
}

.intox-overlay__noise {
  position: absolute;
  inset: -20%;
  opacity: calc(var(--intox-norm, 0) * 0.12);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255, 0, 128, 0.06) 0, transparent 40%);
  animation: intox-noise-pulse calc(2.4s - var(--intox-norm, 0) * 1.6s) ease-in-out infinite alternate;
}

/* Distort the viewport content beneath the overlay. */
.intox-active#app,
.intox-active#game-shell,
#app.intox-active,
#game-shell.intox-active {
  animation: intox-view-shake calc(0.8s - var(--intox-norm, 0) * 0.55s) steps(2) infinite;
  filter:
    blur(calc(var(--intox-blur, 0) * 0.35px))
    hue-rotate(calc(var(--intox-hue, 0) * 1deg))
    saturate(calc(1 + var(--intox-norm, 0) * 0.35));
}

html.intox-active body {
  animation: intox-view-shake calc(0.8s - var(--intox-norm, 0) * 0.55s) steps(2) infinite;
}

/* Tier art direction: buzzed warmth → drunk neon → blackout crush */
.intox-tier-1.intox-active#app,
.intox-tier-1.intox-active#game-shell {
  filter:
    blur(calc(var(--intox-blur, 0) * 0.2px))
    sepia(calc(var(--intox-norm, 0) * 0.18))
    saturate(calc(1 + var(--intox-norm, 0) * 0.2));
}

.intox-tier-2.intox-active#app,
.intox-tier-2.intox-active#game-shell {
  filter:
    blur(calc(var(--intox-blur, 0) * 0.3px))
    hue-rotate(calc(var(--intox-hue, 0) * 0.7deg))
    saturate(calc(1 + var(--intox-norm, 0) * 0.3));
}

.intox-tier-3.intox-active#app,
.intox-tier-3.intox-active#game-shell,
.intox-tier-4.intox-active#app,
.intox-tier-4.intox-active#game-shell,
.intox-tier-5.intox-active#app,
.intox-tier-5.intox-active#game-shell {
  animation:
    intox-view-shake calc(0.55s - var(--intox-norm, 0) * 0.35s) steps(3) infinite,
    intox-view-glitch calc(4s - var(--intox-norm, 0) * 3s) steps(1) infinite;
}

.intox-tier-4.intox-active > .intox-overlay {
  background: radial-gradient(ellipse at 50% 40%, rgba(80, 20, 90, 0.12), transparent 70%);
}

.intox-tier-5.intox-active#app,
.intox-tier-5.intox-active#game-shell {
  filter:
    blur(calc(var(--intox-blur, 0) * 0.55px))
    hue-rotate(calc(var(--intox-hue, 0) * 1.4deg))
    saturate(calc(1 + var(--intox-norm, 0) * 0.55))
    contrast(calc(1 + var(--intox-norm, 0) * 0.15))
    brightness(calc(1 - var(--intox-norm, 0) * 0.12));
}

.intox-tier-5.intox-active > .intox-overlay {
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.05), rgba(20, 0, 30, 0.35));
}

@keyframes intox-view-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(calc(var(--intox-shake, 0) * 0.25px), calc(var(--intox-shake, 0) * -0.35px)); }
  50% { transform: translate(calc(var(--intox-shake, 0) * -0.35px), calc(var(--intox-shake, 0) * 0.2px)); }
  75% { transform: translate(calc(var(--intox-shake, 0) * 0.15px), calc(var(--intox-shake, 0) * 0.35px)); }
}

@keyframes intox-view-glitch {
  0%, 92%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0) skew(0deg);
  }
  93% {
    clip-path: inset(8% 0 62% 0);
    transform: translate(calc(var(--intox-shake, 0) * -1.2px), 0) skew(-0.6deg);
  }
  94% {
    clip-path: inset(48% 0 18% 0);
    transform: translate(calc(var(--intox-shake, 0) * 1.4px), 0) skew(0.8deg);
  }
  95% {
    clip-path: inset(72% 0 4% 0);
    transform: translate(calc(var(--intox-shake, 0) * -0.8px), 0) skew(-0.3deg);
  }
}

@keyframes intox-rgb-jitter {
  0% { transform: translate(0, 0); }
  50% { transform: translate(calc(var(--intox-rgb, 0) * 1px), calc(var(--intox-rgb, 0) * -1px)); }
  100% { transform: translate(calc(var(--intox-rgb, 0) * -0.6px), calc(var(--intox-rgb, 0) * 0.8px)); }
}

@keyframes intox-scan-drift {
  from { transform: translateY(0); }
  to { transform: translateY(6px); }
}

@keyframes intox-noise-pulse {
  from { opacity: calc(var(--intox-norm, 0) * 0.08); transform: scale(1); }
  to { opacity: calc(var(--intox-norm, 0) * 0.16); transform: scale(1.03) rotate(0.4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .intox-active#app,
  .intox-active#game-shell,
  html.intox-active body {
    animation: none;
  }

  .intox-overlay__rgb,
  .intox-overlay__scanlines,
  .intox-overlay__noise {
    animation: none;
  }

  .intox-active#app,
  .intox-active#game-shell {
    filter: none;
  }

  .intox-active > .intox-overlay {
    opacity: calc(var(--intox-norm, 0) * 0.15);
  }
}

/* MGM Rewards flip-phone — shared by digital casino + pixel RPG */

.rewards-phone-root {
  position: fixed;
  z-index: 1200;
  pointer-events: none;
  bottom: max(16px, var(--safe-bottom, 0px));
  right: max(16px, var(--safe-right, 0px));
}

.rewards-phone-root.compact {
  bottom: max(12px, var(--safe-bottom, 0px));
  right: max(12px, var(--safe-right, 0px));
}

.rewards-phone-root * {
  pointer-events: auto;
}

.rewards-phone-fab {
  position: relative;
  width: 52px;
  height: 52px;
  border: 2px solid #5a5040;
  border-radius: 8px;
  background: linear-gradient(145deg, #c8c8d0 0%, #888890 100%);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  font-family: inherit;
}

.rewards-phone-fab:hover {
  filter: brightness(1.08);
}

.rewards-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #f07178;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-family: "JetBrains Mono", "Press Start 2P", monospace;
}

.rewards-badge[hidden] {
  display: none;
}

.rewards-toast {
  position: absolute;
  bottom: 60px;
  right: 0;
  max-width: 240px;
  padding: 8px 10px;
  background: rgba(20, 16, 31, 0.95);
  border: 2px solid #e8c547;
  color: #e6e1cf;
  font-size: 9px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-family: "JetBrains Mono", "Press Start 2P", monospace;
}

.rewards-toast[hidden] {
  display: none;
}

.rewards-phone {
  position: absolute;
  bottom: 64px;
  right: 0;
}

.rewards-phone-shell {
  width: 148px;
  max-height: calc(var(--app-vh, 100dvh) - var(--safe-bottom, 0px) - 5rem);
  padding: 8px 6px 12px;
  background: linear-gradient(160deg, #d8d8e0 0%, #909098 55%, #686870 100%);
  border-radius: 14px 14px 18px 18px;
  border: 2px solid #505058;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rewards-phone-hinge {
  flex-shrink: 0;
  width: 28px;
  height: 4px;
  margin: 0 auto 6px;
  background: #606068;
  border-radius: 2px;
}

.rewards-lcd {
  background: #1a3d2a;
  border: 2px inset #0d2818;
  border-radius: 4px;
  padding: 6px;
  flex: 1 1 auto;
  min-height: clamp(120px, 26vh, 200px);
  max-height: min(280px, calc(var(--app-vh, 100dvh) - var(--safe-bottom, 0px) - 10rem));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #7cfc7c;
  font-family: "Press Start 2P", "JetBrains Mono", monospace;
  font-size: 6px;
  line-height: 1.7;
}

.rewards-lcd-header {
  text-align: center;
  color: #e8c547;
  margin-bottom: 6px;
  font-size: 7px;
  letter-spacing: 1px;
}

.rewards-lcd-body {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 4px;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.rewards-lcd-body p {
  margin: 0 0 4px;
}

.rewards-lcd-body p.dim {
  color: #5a9c5a;
}

.rewards-lcd-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 4px;
}

.rewards-tab {
  flex: 1 1 40%;
  min-width: 40px;
  padding: 3px 2px;
  font-size: 5px;
  background: #0d2818;
  border: 1px solid #3a7c4a;
  color: #7cfc7c;
  cursor: pointer;
  font-family: inherit;
}

.rewards-tab.active {
  background: #2a5c3a;
  color: #e8c547;
}

.rewards-lcd-close {
  margin-top: 4px;
  text-align: center;
}

.rewards-lcd-close button {
  font-size: 6px;
  padding: 4px 8px;
  background: #0d2818;
  border: 1px solid #3a7c4a;
  color: #7cfc7c;
  cursor: pointer;
  font-family: inherit;
}

.rewards-progress {
  height: 6px;
  background: #0d2818;
  border: 1px solid #3a7c4a;
  margin: 4px 0;
}

.rewards-progress-fill {
  height: 100%;
  background: #e8c547;
}

.rewards-member-card {
  border: 1px solid #e8c547;
  padding: 6px;
  text-align: center;
  background: rgba(0, 0, 0, 0.25);
}

.rewards-tier {
  color: #e8c547;
  font-size: 8px;
  margin-bottom: 4px;
}

.rewards-comp-row,
.rewards-note {
  border-bottom: 1px solid #2a5c3a;
  padding: 4px 0;
  margin-bottom: 4px;
}

.rewards-note {
  cursor: pointer;
}

.rewards-note.read {
  opacity: 0.65;
}

.rewards-comp-row button,
.rewards-lcd-body button {
  margin-top: 4px;
  font-size: 5px;
  padding: 3px 6px;
  background: #0d2818;
  border: 1px solid #e8c547;
  color: #e8c547;
  cursor: pointer;
  font-family: inherit;
}

.rewards-member-cost {
  margin-top: 4px;
  font-size: 5px;
  color: #5a9c5a;
}

.rewards-member-room {
  margin-top: 4px;
  font-size: 6px;
  color: #e8c547;
  letter-spacing: 0.02em;
}

.rewards-member-card--noir {
  border-color: #c678dd;
}

.rewards-member-card--chairman {
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
  background: rgba(40, 32, 8, 0.35);
}

.rewards-tier-chairman .rewards-lcd-header {
  color: #ffd700;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.35);
}

.rewards-contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 2px 0;
  padding: 4px 3px;
  font-size: 5px;
  text-align: left;
  background: #0d2818;
  border: 1px solid #3a7c4a;
  color: #7cfc7c;
  cursor: pointer;
  font-family: inherit;
}

.rewards-contact-row:hover {
  background: #2a5c3a;
}

.rewards-contact-unread {
  min-width: 12px;
  padding: 0 3px;
  border-radius: 6px;
  background: #f07178;
  color: #fff;
  font-size: 5px;
  text-align: center;
}

.rewards-thread-log {
  max-height: 110px;
  overflow-y: auto;
  margin: 4px 0;
  padding: 2px;
  border: 1px inset #0d2818;
}

.rewards-rapport-line {
  font-size: 5px;
  color: #e8c547 !important;
  margin-bottom: 2px;
}

.rewards-dialogue-prompt {
  font-size: 5px;
  margin-top: 4px;
}

.rewards-dialogue-choice {
  width: 100%;
  text-align: left;
  font-size: 5px;
  line-height: 1.4;
  padding: 3px 4px;
  background: rgba(232, 197, 71, 0.12);
  border-color: #e8c547;
}

.rewards-text-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  max-height: 72px;
  overflow-y: auto;
}

.rewards-text-option {
  width: 100%;
  text-align: left;
  font-size: 5px;
  line-height: 1.4;
  padding: 2px 4px;
}

.rewards-text-option--custom {
  border-color: #c678dd;
  color: #e6c8ff;
}

.rewards-intox-line {
  color: #f0c040 !important;
  font-size: 5px;
}

.rewards-text-option--intox {
  border-color: #e8a838;
  color: #ffe8a0;
  background: rgba(232, 168, 56, 0.1);
}

.rewards-msg {
  margin: 2px 0;
  padding: 2px;
  font-size: 5px;
  line-height: 1.5;
  word-break: break-word;
}

.rewards-msg--out {
  color: #a8d8a8;
  text-align: right;
}

.rewards-msg--in {
  color: #7cfc7c;
}

.rewards-thread-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 4px 0;
}

.rewards-thread-actions button {
  flex: 1 1 45%;
}

.rewards-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
}

.rewards-home-actions button {
  flex: 1 1 40%;
  min-width: 42px;
}

.rewards-phone-sounds {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(120, 160, 120, 0.35);
}

.rewards-sound-toggle,
.rewards-ringtone-option,
.rewards-call-choice,
.rewards-call-hangup {
  display: block;
  width: 100%;
  margin: 3px 0;
  text-align: left;
}

.rewards-ringtone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 4px 0;
}

.rewards-ringtone-option {
  flex: 1 1 40%;
  min-width: 48px;
  width: auto;
}

.rewards-ringtone-option.active {
  outline: 1px solid rgba(160, 220, 160, 0.8);
  font-weight: 600;
}

.rewards-call-body .rewards-call-connecting {
  margin: 8px 0;
  animation: rewards-call-pulse 1.1s ease-in-out infinite;
}

.rewards-call-live {
  color: #7dba7d;
}

.rewards-call-line {
  margin: 6px 0 8px;
}

@keyframes rewards-call-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Responsive: keep the FAB reachable on narrow screens */
@media (max-width: 480px) {
  .rewards-phone-root {
    bottom: max(10px, var(--safe-bottom, 0px));
    right: max(10px, var(--safe-right, 0px));
  }

  .rewards-phone-fab {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

@media (max-height: 500px), (orientation: landscape) and (max-height: 500px) {
  .rewards-phone-shell {
    max-height: calc(var(--app-vh, 100dvh) - var(--safe-bottom, 0px) - 3.5rem);
  }

  .rewards-lcd {
    min-height: 100px;
    max-height: min(220px, calc(var(--app-vh, 100dvh) - var(--safe-bottom, 0px) - 7rem));
  }
}

/*
 * Desktop / laptop web terminal — enlarge the flip phone so LCD text, threads,
 * and redeem options are readable. Touch RPG layout keeps its own constraints.
 */
@media (min-width: 768px) {
  body:not(.has-touch-pad) .rewards-phone-shell {
    width: 224px;
    padding: 12px 10px 16px;
    border-radius: 18px 18px 22px 22px;
  }

  body:not(.has-touch-pad) .rewards-phone-hinge {
    width: 40px;
    height: 5px;
    margin-bottom: 8px;
  }

  body:not(.has-touch-pad) .rewards-lcd {
    padding: 8px;
    min-height: clamp(180px, 34vh, 320px);
    max-height: min(420px, calc(var(--app-vh, 100dvh) - var(--safe-bottom, 0px) - 10rem));
    font-size: 9px;
    line-height: 1.65;
  }

  body:not(.has-touch-pad) .rewards-lcd-header {
    font-size: 10px;
    margin-bottom: 8px;
  }

  body:not(.has-touch-pad) .rewards-tab {
    font-size: 7px;
    padding: 5px 3px;
    min-width: 48px;
  }

  body:not(.has-touch-pad) .rewards-lcd-close button,
  body:not(.has-touch-pad) .rewards-comp-row button,
  body:not(.has-touch-pad) .rewards-lcd-body button {
    font-size: 8px;
    padding: 5px 8px;
  }

  body:not(.has-touch-pad) .rewards-contact-row {
    font-size: 8px;
    padding: 6px 5px;
  }

  body:not(.has-touch-pad) .rewards-contact-unread {
    font-size: 7px;
    min-width: 14px;
  }

  body:not(.has-touch-pad) .rewards-thread-log {
    max-height: 160px;
  }

  body:not(.has-touch-pad) .rewards-text-options {
    max-height: 120px;
  }

  body:not(.has-touch-pad) .rewards-msg,
  body:not(.has-touch-pad) .rewards-text-option,
  body:not(.has-touch-pad) .rewards-dialogue-choice,
  body:not(.has-touch-pad) .rewards-dialogue-prompt,
  body:not(.has-touch-pad) .rewards-rapport-line,
  body:not(.has-touch-pad) .rewards-intox-line {
    font-size: 8px;
  }

  body:not(.has-touch-pad) .rewards-tier {
    font-size: 11px;
  }

  body:not(.has-touch-pad) .rewards-member-cost,
  body:not(.has-touch-pad) .rewards-member-room {
    font-size: 8px;
  }

  body:not(.has-touch-pad) .rewards-toast {
    max-width: 280px;
    font-size: 11px;
    padding: 10px 12px;
  }

  body:not(.has-touch-pad) .rewards-phone-fab {
    width: 58px;
    height: 58px;
    font-size: 24px;
  }
}

@media (min-width: 1100px) {
  body:not(.has-touch-pad) .rewards-phone-shell {
    width: 260px;
  }

  body:not(.has-touch-pad) .rewards-lcd {
    min-height: clamp(220px, 38vh, 360px);
    max-height: min(480px, calc(var(--app-vh, 100dvh) - var(--safe-bottom, 0px) - 10rem));
    font-size: 10px;
  }

  body:not(.has-touch-pad) .rewards-lcd-header {
    font-size: 11px;
  }

  body:not(.has-touch-pad) .rewards-tab {
    font-size: 8px;
  }

  body:not(.has-touch-pad) .rewards-thread-log {
    max-height: 190px;
  }

  body:not(.has-touch-pad) .rewards-text-options {
    max-height: 140px;
  }
}

/*
 * RPG touch layout parks the FAB at the top (see rpg.css). Open the flip shell
 * downward and drop toasts under the FAB so neither leaves the viewport.
 */
body.has-touch-pad .rewards-phone {
  top: 64px;
  bottom: auto;
}

body.has-touch-pad .rewards-toast {
  top: 60px;
  bottom: auto;
}

/* Resort dining overlay — first-person eating POV + capacity minigame */

:root {
  --dining-bg: #120c0a;
  --dining-felt: #1a1410;
  --dining-gold: #d4a84b;
  --dining-cream: #f3e6d0;
  --dining-wine: #8b1e3f;
  --dining-teal: #2a6f6f;
  --dining-ember: #c45c26;
  --dining-fpv-wood: #3a2418;
  --dining-fpv-cloth: #1e1410;
}

body.dining-overlay-active {
  overflow: hidden;
}

.dining-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: none;
  pointer-events: none;
}

.dining-overlay--open {
  display: block;
  pointer-events: auto;
}

.dining-overlay__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding:
    max(0.75rem, var(--safe-top, 0px))
    max(0.75rem, var(--safe-right, 0px))
    max(0.75rem, var(--safe-bottom, 0px))
    max(0.75rem, var(--safe-left, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 168, 75, 0.18) 0%, transparent 55%),
    linear-gradient(160deg, #1b100c 0%, #0a0807 45%, #14100e 100%);
  animation: dining-fade-in 280ms ease-out;
}

.dining-overlay__shell {
  width: min(1080px, 100%);
  max-height: var(--overlay-max-h, calc(100dvh - 1.5rem));
  overflow: auto;
  margin: auto;
  background:
    linear-gradient(180deg, rgba(243, 230, 208, 0.06), transparent 40%),
    var(--dining-felt);
  border: 1px solid rgba(212, 168, 75, 0.35);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  padding: 1.25rem 1.25rem 1rem;
  color: var(--dining-cream);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* FPV table shell: edge-to-edge stage + side menu */
.dining-overlay__shell--fpv {
  width: min(1280px, 100%);
  max-height: var(--overlay-max-h, calc(100dvh - 1.5rem));
  height: var(--overlay-max-h, calc(100dvh - 1.5rem));
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(212, 168, 75, 0.4);
}

.dining-motif--wine-tower {
  background-image:
    linear-gradient(180deg, rgba(139, 30, 63, 0.2), transparent 50%),
    linear-gradient(180deg, rgba(243, 230, 208, 0.06), transparent 40%);
}

.dining-motif--poolside {
  background-image:
    linear-gradient(180deg, rgba(42, 111, 111, 0.25), transparent 50%),
    linear-gradient(180deg, rgba(243, 230, 208, 0.06), transparent 40%);
}

.dining-motif--steakhouse {
  background-image:
    linear-gradient(180deg, rgba(196, 92, 38, 0.22), transparent 50%),
    linear-gradient(180deg, rgba(243, 230, 208, 0.06), transparent 40%);
}

.dining-overlay__shell--fpv.dining-motif--wine-tower,
.dining-overlay__shell--fpv.dining-motif--poolside,
.dining-overlay__shell--fpv.dining-motif--steakhouse {
  background-image: none;
  background-color: #0c0806;
}

.dining-overlay__eyebrow {
  margin: 0;
  color: var(--dining-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.dining-overlay__title {
  margin: 0.35rem 0;
  color: var(--dining-cream);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.dining-overlay__tagline {
  margin: 0 0 0.75rem;
  color: rgba(243, 230, 208, 0.75);
  max-width: 52rem;
  line-height: 1.45;
}

.dining-overlay__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1rem;
}

.dining-venue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}

.dining-venue-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid rgba(212, 168, 75, 0.3);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.dining-venue-card:hover,
.dining-venue-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--dining-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  outline: none;
}

.dining-venue-card__icon {
  font-size: 1.6rem;
}

.dining-venue-card__hi {
  margin-top: 0.4rem;
  color: var(--dining-gold);
  font-size: 0.85rem;
}

/* ——— FPV layout ——— */
.dining-fpv-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.9fr);
  max-height: 100%;
  height: 100%;
}

.dining-fpv-layout__stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #0a0604;
}

.dining-fpv-layout__panel {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1rem 0.85rem;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(180deg, rgba(243, 230, 208, 0.07), transparent 30%),
    rgba(18, 12, 10, 0.96);
  border-left: 1px solid rgba(212, 168, 75, 0.28);
}

.dining-fpv-layout__panel .dining-overlay__tagline {
  font-size: 0.82rem;
  margin-bottom: 0.35rem;
}

.dining-fpv-layout__panel .dining-menu-columns {
  flex: 1;
}

/* ——— First-person stage ——— */
.dining-fpv {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.dining-fpv__sky {
  position: absolute;
  inset: 0 0 42% 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 200, 120, 0.12), transparent 50%),
    linear-gradient(180deg, #1a1210 0%, #2a1814 40%, #3a2218 100%);
}

.dining-fpv--wine-tower .dining-fpv__sky {
  background:
    radial-gradient(ellipse at 50% 10%, rgba(139, 30, 63, 0.35), transparent 55%),
    linear-gradient(180deg, #140a10 0%, #2a1018 45%, #3a1820 100%);
}

.dining-fpv--poolside .dining-fpv__sky {
  background:
    radial-gradient(ellipse at 70% 10%, rgba(80, 180, 200, 0.25), transparent 50%),
    linear-gradient(180deg, #0e1a1c 0%, #1a3034 40%, #244040 100%);
}

.dining-fpv--steakhouse .dining-fpv__sky {
  background:
    radial-gradient(ellipse at 40% 15%, rgba(196, 92, 38, 0.22), transparent 50%),
    linear-gradient(180deg, #120c08 0%, #2a1810 40%, #3a2414 100%);
}

.dining-fpv__room {
  position: absolute;
  inset: 0 0 38% 0;
  perspective: 900px;
}

.dining-fpv__backwall {
  position: absolute;
  inset: 8% 6% 20%;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 220, 160, 0.03) 0 2px,
      transparent 2px 28px
    ),
    linear-gradient(180deg, rgba(60, 36, 28, 0.85), rgba(30, 18, 14, 0.95));
  border: 1px solid rgba(212, 168, 75, 0.12);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.45);
  transform: rotateX(4deg);
}

.dining-fpv--wine-tower .dining-fpv__backwall {
  background:
    repeating-linear-gradient(90deg, rgba(212, 168, 75, 0.06) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(60, 16, 32, 0.92), rgba(20, 8, 14, 0.96));
  border-color: rgba(192, 80, 110, 0.25);
}

.dining-fpv--poolside .dining-fpv__backwall {
  background:
    linear-gradient(180deg, rgba(40, 90, 100, 0.35), rgba(20, 40, 45, 0.55)),
    linear-gradient(180deg, rgba(30, 55, 58, 0.9), rgba(12, 24, 28, 0.95));
  border-color: rgba(80, 180, 180, 0.22);
  box-shadow: inset 0 0 60px rgba(40, 140, 160, 0.15);
}

.dining-fpv--steakhouse .dining-fpv__backwall {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 14px),
    linear-gradient(180deg, rgba(50, 28, 16, 0.92), rgba(18, 10, 6, 0.96));
  border-color: rgba(196, 92, 38, 0.28);
}

/* ——— Per-venue scenery overlays ——— */
.dining-venue-scenery {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.dining-venue-scenery__label {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 230, 208, 0.55);
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(212, 168, 75, 0.2);
  background: rgba(8, 4, 2, 0.35);
  white-space: nowrap;
}

/* Aureole — four-story wine tower + wine angel */
.dining-venue-scenery--aureole .dining-venue-scenery__tower {
  position: absolute;
  left: 50%;
  top: 6%;
  bottom: 28%;
  width: min(28%, 140px);
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, transparent, rgba(212, 168, 75, 0.15) 8%, rgba(212, 168, 75, 0.15) 92%, transparent),
    repeating-linear-gradient(
      180deg,
      rgba(80, 20, 40, 0.7) 0 10px,
      rgba(40, 10, 20, 0.85) 10px 12px
    );
  border: 1px solid rgba(212, 168, 75, 0.35);
  box-shadow:
    0 0 40px rgba(139, 30, 63, 0.45),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
  border-radius: 4px 4px 0 0;
}

.dining-venue-scenery__tower-glow {
  position: absolute;
  inset: -10% -30%;
  background: radial-gradient(ellipse at 50% 40%, rgba(180, 60, 90, 0.35), transparent 65%);
  animation: dining-tower-pulse 4s ease-in-out infinite;
}

.dining-venue-scenery__bottle {
  position: absolute;
  width: 10px;
  height: 22px;
  left: 18%;
  top: 12%;
  background: linear-gradient(180deg, #3a1020, #1a0810 70%, #8b1e3f);
  border-radius: 2px 2px 4px 4px;
  box-shadow: 0 0 6px rgba(139, 30, 63, 0.5);
}

.dining-venue-scenery__bottle--2 { left: 42%; top: 28%; background: linear-gradient(180deg, #2a1830, #100818 70%, #6a2040); }
.dining-venue-scenery__bottle--3 { left: 68%; top: 16%; height: 18px; }
.dining-venue-scenery__bottle--4 { left: 30%; top: 48%; height: 20px; background: linear-gradient(180deg, #402018, #180c08 70%, #a84828); }

.dining-venue-scenery__cable {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 2px;
  height: 55%;
  background: linear-gradient(180deg, rgba(212, 168, 75, 0.7), rgba(212, 168, 75, 0.15));
  transform: translateX(-50%);
}

.dining-venue-scenery__angel {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 22px;
  height: 38px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(243, 230, 208, 0.75), rgba(180, 140, 100, 0.5));
  clip-path: polygon(35% 0, 65% 0, 78% 22%, 70% 22%, 85% 100%, 15% 100%, 30% 22%, 22% 22%);
  filter: drop-shadow(0 0 8px rgba(255, 200, 160, 0.45));
  animation: dining-angel-sway 5s ease-in-out infinite;
}

.dining-venue-scenery__velvet {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 22%;
  height: 12%;
  background:
    repeating-linear-gradient(90deg, rgba(80, 16, 36, 0.5) 0 12px, rgba(50, 10, 24, 0.55) 12px 24px),
    linear-gradient(180deg, rgba(90, 20, 40, 0.4), transparent);
  border-top: 1px solid rgba(212, 168, 75, 0.2);
}

.dining-venue-scenery--aureole .dining-venue-scenery__label {
  color: rgba(240, 180, 200, 0.7);
  border-color: rgba(192, 80, 110, 0.35);
}

/* Border Grill — poolside windows + lazy river */
.dining-venue-scenery--border .dining-venue-scenery__window {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 8%;
  bottom: 30%;
  border: 3px solid rgba(200, 180, 140, 0.35);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(40, 160, 180, 0.2);
  background: linear-gradient(180deg, #4a90a8 0%, #2a6878 40%, #1a4850 100%);
}

.dining-venue-scenery__sky-wash {
  position: absolute;
  inset: 0 0 45%;
  background: linear-gradient(180deg, #87ceeb 0%, #5aa8c0 100%);
}

.dining-venue-scenery__sun {
  position: absolute;
  top: 10%;
  right: 18%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c0 0%, #f0c060 45%, transparent 70%);
  box-shadow: 0 0 30px rgba(255, 200, 80, 0.65);
}

.dining-venue-scenery__water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  background:
    linear-gradient(180deg, rgba(60, 180, 200, 0.85), rgba(20, 90, 110, 0.95));
}

.dining-venue-scenery__wave {
  position: absolute;
  left: -10%;
  bottom: 28%;
  width: 120%;
  height: 18%;
  background: radial-gradient(ellipse at 50% 50%, rgba(180, 240, 255, 0.45), transparent 70%);
  animation: dining-wave-drift 4.5s ease-in-out infinite;
}

.dining-venue-scenery__wave--2 {
  bottom: 18%;
  opacity: 0.6;
  animation-delay: -2s;
}

.dining-venue-scenery__palm {
  position: absolute;
  bottom: 35%;
  left: 8%;
  width: 8px;
  height: 45%;
  background: linear-gradient(180deg, #3a6820, #1a3810);
  border-radius: 4px;
}

.dining-venue-scenery__palm::before {
  content: "";
  position: absolute;
  top: -8%;
  left: -18px;
  width: 44px;
  height: 28px;
  background: radial-gradient(ellipse at 50% 80%, #4a8828, transparent 70%);
}

.dining-venue-scenery__palm--2 {
  left: auto;
  right: 12%;
  height: 38%;
}

.dining-venue-scenery__tile {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 20%;
  height: 10%;
  background:
    repeating-linear-gradient(
      90deg,
      #c45c26 0 14px,
      #e8c878 14px 28px,
      #2a6f6f 28px 42px,
      #f0e0c0 42px 56px
    );
  opacity: 0.55;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

.dining-venue-scenery--border .dining-venue-scenery__label {
  color: rgba(180, 230, 230, 0.75);
  border-color: rgba(80, 180, 180, 0.4);
}

/* Stripsteak — leather booth + open-grill embers */
.dining-venue-scenery--strip .dining-venue-scenery__booth {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 12%;
  bottom: 32%;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(196, 92, 38, 0.15), transparent 50%),
    linear-gradient(180deg, #2a1810 0%, #1a100c 60%, #120c08 100%);
  border: 1px solid rgba(196, 92, 38, 0.25);
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.45);
}

.dining-venue-scenery--strip .dining-venue-scenery__booth::before,
.dining-venue-scenery--strip .dining-venue-scenery__booth::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 22%;
  height: 55%;
  background: linear-gradient(180deg, #4a2818, #1a0c08);
  border: 1px solid rgba(120, 60, 30, 0.4);
  border-radius: 6px 6px 0 0;
}

.dining-venue-scenery--strip .dining-venue-scenery__booth::before { left: 8%; }
.dining-venue-scenery--strip .dining-venue-scenery__booth::after { right: 8%; }

.dining-venue-scenery__grill {
  position: absolute;
  left: 50%;
  bottom: 34%;
  width: min(36%, 160px);
  height: 18%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #1a0c08, #0a0604);
  border: 1px solid rgba(196, 92, 38, 0.45);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(196, 92, 38, 0.35);
}

.dining-venue-scenery__ember {
  position: absolute;
  bottom: 10%;
  left: 20%;
  width: 18px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff9040, #c45c26 50%, transparent 70%);
  animation: dining-ember 1.6s ease-in-out infinite alternate;
}

.dining-venue-scenery__ember--2 {
  left: 45%;
  width: 22px;
  height: 16px;
  animation-delay: -0.5s;
}

.dining-venue-scenery__ember--3 {
  left: 68%;
  width: 16px;
  animation-delay: -1s;
}

.dining-venue-scenery__spark {
  position: absolute;
  left: 50%;
  bottom: 40%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff6a0;
  box-shadow: 0 0 6px #ff9040;
  animation: dining-spark 2.2s ease-out infinite;
}

.dining-venue-scenery__brass {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 26%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d4a84b 20%, #f0d080 50%, #d4a84b 80%, transparent);
  opacity: 0.55;
  box-shadow: 0 0 12px rgba(212, 168, 75, 0.4);
}

.dining-venue-scenery--strip .dining-venue-scenery__label {
  color: rgba(240, 180, 120, 0.75);
  border-color: rgba(196, 92, 38, 0.4);
}

.dining-fpv__lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dining-fpv__pendant {
  position: absolute;
  top: 6%;
  left: 28%;
  width: 18px;
  height: 48px;
  background: linear-gradient(180deg, #2a1810, #d4a84b 40%, #f0d080 55%, transparent 70%);
  filter: drop-shadow(0 0 18px rgba(240, 200, 100, 0.55));
  animation: dining-pendant-glow 3.2s ease-in-out infinite;
}

.dining-fpv__pendant--2 {
  left: auto;
  right: 30%;
  animation-delay: -1.4s;
}

.dining-fpv__candle {
  position: absolute;
  bottom: 28%;
  left: 42%;
  width: 8px;
  height: 22px;
  background: linear-gradient(180deg, #f5e6c8, #e8c878);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 20px rgba(255, 180, 80, 0.65);
}

.dining-fpv__candle::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 1px;
  width: 6px;
  height: 10px;
  background: radial-gradient(ellipse at 50% 70%, #fff6a0, #ff8a30 60%, transparent 70%);
  animation: dining-flame 0.9s ease-in-out infinite alternate;
}

.dining-fpv__candle--2 {
  left: auto;
  right: 38%;
}

.dining-fpv__diners {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dining-fpv__sil {
  position: absolute;
  bottom: 22%;
  left: 18%;
  width: 42px;
  height: 78px;
  background: linear-gradient(180deg, rgba(40, 24, 20, 0.55), rgba(10, 6, 4, 0.75));
  clip-path: polygon(35% 0, 65% 0, 78% 28%, 72% 28%, 85% 100%, 15% 100%, 28% 28%, 22% 28%);
  opacity: 0.55;
}

.dining-fpv__sil--r {
  left: auto;
  right: 16%;
  opacity: 0.4;
  transform: scaleX(-1);
}

.dining-fpv__table {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  perspective: 1000px;
}

.dining-fpv__tablecloth {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 0;
  height: 100%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(20, 12, 8, 0.35) 12%, transparent 13%),
    linear-gradient(180deg, #4a3020 0%, #2a1810 28%, #1a100c 70%, #120c0a 100%);
  transform: rotateX(52deg) translateY(-6%);
  transform-origin: center top;
  box-shadow:
    inset 0 40px 60px rgba(255, 200, 120, 0.06),
    0 -20px 60px rgba(0, 0, 0, 0.5);
  border-top: 2px solid rgba(212, 168, 75, 0.25);
}

.dining-fpv--poolside .dining-fpv__tablecloth {
  background:
    linear-gradient(180deg, transparent 0%, rgba(20, 40, 40, 0.35) 12%, transparent 13%),
    repeating-linear-gradient(90deg, rgba(42, 111, 111, 0.12) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #2a4a48 0%, #1a3030 30%, #122020 70%, #0c1414 100%);
  border-top-color: rgba(80, 180, 180, 0.35);
}

.dining-fpv--wine-tower .dining-fpv__tablecloth {
  background:
    linear-gradient(180deg, transparent 0%, rgba(40, 10, 20, 0.4) 12%, transparent 13%),
    radial-gradient(ellipse at 50% 0%, rgba(139, 30, 63, 0.2), transparent 50%),
    linear-gradient(180deg, #3a1a24 0%, #241018 30%, #160c10 70%, #0e080a 100%);
  border-top-color: rgba(192, 80, 110, 0.4);
}

.dining-fpv--steakhouse .dining-fpv__tablecloth {
  background:
    linear-gradient(180deg, transparent 0%, rgba(20, 12, 8, 0.4) 12%, transparent 13%),
    repeating-linear-gradient(90deg, rgba(80, 40, 20, 0.15) 0 3px, transparent 3px 18px),
    linear-gradient(180deg, #4a3020 0%, #2a1810 28%, #1a100c 70%, #120c0a 100%);
  border-top-color: rgba(196, 92, 38, 0.4);
}

/* Venue panel chrome */
.dining-fpv-layout__panel--wine-tower {
  background:
    linear-gradient(180deg, rgba(139, 30, 63, 0.18), transparent 28%),
    rgba(18, 10, 14, 0.97);
  border-left-color: rgba(192, 80, 110, 0.35);
}

.dining-fpv-layout__panel--poolside {
  background:
    linear-gradient(180deg, rgba(42, 111, 111, 0.2), transparent 28%),
    rgba(10, 16, 18, 0.97);
  border-left-color: rgba(80, 180, 180, 0.35);
}

.dining-fpv-layout__panel--steakhouse {
  background:
    linear-gradient(180deg, rgba(196, 92, 38, 0.16), transparent 28%),
    rgba(16, 10, 6, 0.97);
  border-left-color: rgba(196, 92, 38, 0.35);
}

.dining-fpv-layout__panel--wine-tower .dining-overlay__eyebrow { color: #e090a8; }
.dining-fpv-layout__panel--poolside .dining-overlay__eyebrow { color: #6ec8c8; }
.dining-fpv-layout__panel--steakhouse .dining-overlay__eyebrow { color: #e09860; }

.dining-fpv--poolside .dining-fpv__pendant {
  background: linear-gradient(180deg, #1a3030, #6ec8c8 40%, #a8e8e8 55%, transparent 70%);
  filter: drop-shadow(0 0 18px rgba(110, 200, 200, 0.55));
}

.dining-fpv--wine-tower .dining-fpv__pendant {
  background: linear-gradient(180deg, #2a1018, #c06080 40%, #f0a0b8 55%, transparent 70%);
  filter: drop-shadow(0 0 18px rgba(192, 80, 110, 0.55));
}

.dining-fpv--steakhouse .dining-fpv__candle {
  box-shadow: 0 0 24px rgba(255, 140, 60, 0.75);
}

.dining-fpv--poolside .dining-fpv__candle {
  display: none;
}

.dining-fpv__place {
  position: absolute;
  inset: 8% 8% 18%;
  z-index: 2;
}

.dining-fpv__plate-well {
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(72%, 340px);
  aspect-ratio: 4 / 3;
  transform: translateX(-54%);
}

.dining-fpv__plate-empty {
  position: absolute;
  inset: 18% 10% 10%;
  display: grid;
  place-items: center;
  transition: opacity 280ms ease;
}

.dining-fpv__plate-empty.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.dining-fpv__plate-ring {
  width: 78%;
  aspect-ratio: 1.4;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 40% 35%, #fff8ee, #e0c8a0 55%, #a08060 100%);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    inset 0 2px 8px rgba(255, 255, 255, 0.35);
}

.dining-fpv__plate-hint {
  position: absolute;
  bottom: 18%;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243, 230, 208, 0.45);
}

.dining-fpv__food {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.92);
  transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

.dining-fpv__food.is-served {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.dining-fpv__food.is-bitten {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45)) brightness(0.92) saturate(0.9);
  transform: translate3d(0, 2px, 0) scale(0.97);
}

.dining-fpv__food .dining-sprite-svg {
  width: 100%;
  height: auto;
  max-height: 100%;
  image-rendering: auto;
}

.dining-fpv__glass-well {
  position: absolute;
  right: 2%;
  top: 4%;
  width: min(28%, 120px);
  aspect-ratio: 5 / 7;
}

.dining-fpv__glass-empty {
  position: absolute;
  inset: 10% 20% 5%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 40%, rgba(255, 255, 255, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px 6px 10px 10px;
  opacity: 0.35;
  clip-path: polygon(20% 0, 80% 0, 90% 85%, 70% 100%, 30% 100%, 10% 85%);
  transition: opacity 280ms ease;
}

.dining-fpv__glass-empty.is-hidden {
  opacity: 0;
}

.dining-fpv__drink {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.9);
  transition: opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}

.dining-fpv__drink.is-served {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.dining-fpv__drink .dining-sprite-svg {
  width: 90%;
  height: auto;
  max-height: 100%;
}

.dining-fpv__utensils {
  position: absolute;
  left: 4%;
  top: 30%;
  width: 18%;
  height: 50%;
  pointer-events: none;
}

.dining-fpv__fork,
.dining-fpv__knife {
  position: absolute;
  width: 10px;
  height: 70%;
  border-radius: 2px;
  background: linear-gradient(180deg, #e8e0d0, #9a9080);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.dining-fpv__fork {
  left: 20%;
  transform: rotate(-12deg);
}

.dining-fpv__fork::before {
  content: "";
  position: absolute;
  top: -2%;
  left: -4px;
  width: 18px;
  height: 22%;
  background: repeating-linear-gradient(90deg, #e8e0d0 0 3px, transparent 3px 5px);
}

.dining-fpv__knife {
  left: 55%;
  transform: rotate(14deg);
  background: linear-gradient(180deg, #f0ece4, #8a8070 55%, #5a4030 55%, #3a2818);
}

.dining-fpv__hands {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  z-index: 4;
  pointer-events: none;
}

.dining-fpv__arm {
  position: absolute;
  bottom: -8%;
  width: 42%;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 200, 160, 0.25), transparent 50%),
    linear-gradient(180deg, #c49a78 0%, #8a6048 40%, #5a3a28 100%);
  border-radius: 40% 40% 0 0;
  box-shadow: inset 0 12px 24px rgba(255, 220, 180, 0.15);
  transition: transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.dining-fpv__arm--left {
  left: -6%;
  transform: rotate(8deg) translateY(12%);
  clip-path: ellipse(70% 90% at 60% 100%);
}

.dining-fpv__arm--right {
  right: -6%;
  transform: rotate(-8deg) translateY(12%);
  clip-path: ellipse(70% 90% at 40% 100%);
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 200, 160, 0.2), transparent 50%),
    linear-gradient(180deg, #b89070 0%, #7a5440 40%, #4a3020 100%);
}

.dining-fpv__hands.is-biting .dining-fpv__arm--left {
  transform: rotate(2deg) translateY(-18%) translateX(8%);
}

.dining-fpv__hands.is-biting .dining-fpv__arm--right {
  transform: rotate(-4deg) translateY(-10%) translateX(-4%);
}

.dining-fpv__hands.is-sipping .dining-fpv__arm--right {
  transform: rotate(-22deg) translateY(-42%) translateX(-18%);
}

.dining-fpv__bite {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: min(38%, 180px);
  aspect-ratio: 1;
  transform: translate3d(-50%, 40px, 0) scale(0.55);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55));
}

.dining-fpv__bite.is-active {
  animation: dining-bite-lift 780ms cubic-bezier(0.18, 0.85, 0.22, 1) forwards;
}

.dining-fpv__bite--sip.is-active {
  animation: dining-sip-lift 680ms cubic-bezier(0.18, 0.85, 0.22, 1) forwards;
}

.dining-fpv__bite .dining-sprite-svg {
  width: 100%;
  height: auto;
}

.dining-fpv__food.dining-fpv__anim-arrive,
.dining-fpv__drink.dining-fpv__anim-arrive {
  animation: dining-serve-in 420ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.dining-fpv__food.dining-fpv__anim-bite {
  animation: dining-plate-nudge 820ms ease both;
}

.dining-fpv__drink.dining-fpv__anim-sip {
  animation: dining-glass-tip 720ms ease both;
}

.dining-fpv__vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(8, 4, 2, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 25%, transparent 70%, rgba(0, 0, 0, 0.45) 100%);
}

.dining-fpv__caption {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  z-index: 7;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(243, 230, 208, 0.85);
  background: rgba(10, 6, 4, 0.55);
  border: 1px solid rgba(212, 168, 75, 0.25);
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.dining-fpv--consuming .dining-fpv__caption {
  color: var(--dining-gold);
  border-color: rgba(212, 168, 75, 0.5);
}

/* HUD / menu (panel) */
.dining-hud {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.dining-meter__label {
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
  color: rgba(243, 230, 208, 0.85);
}

.dining-meter__track {
  height: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.dining-meter__fill {
  height: 100%;
  border-radius: inherit;
  transition: width 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: width;
}

.dining-meter--fullness .dining-meter__fill {
  background: linear-gradient(90deg, #c45c26, #d4a84b);
}

.dining-meter--composure .dining-meter__fill {
  background: linear-gradient(90deg, #2a6f6f, #6ec8c8);
}

.dining-hud__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  font-size: 0.9rem;
}

.dining-hud__risk {
  color: #f0a0a8;
}

.dining-message {
  margin: 0.25rem 0 0.75rem;
  padding: 0.65rem 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid var(--dining-gold);
  transition: background-color 200ms ease;
}

.dining-pace-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.dining-pace-btn {
  font: inherit;
  color: var(--dining-cream);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(243, 230, 208, 0.2);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.dining-pace-btn.is-active {
  border-color: var(--dining-gold);
  color: var(--dining-gold);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 75, 0.35);
}

.dining-pace-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dining-menu-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}

.dining-menu-section h3 {
  margin: 0 0 0.5rem;
  color: var(--dining-gold);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dining-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, background-color 140ms ease;
}

.dining-menu-item:hover:not(:disabled),
.dining-menu-item:focus-visible:not(:disabled) {
  border-color: rgba(212, 168, 75, 0.55);
  transform: translateX(2px);
  outline: none;
  background: rgba(40, 24, 16, 0.55);
}

.dining-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dining-menu-item__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.dining-menu-item__price {
  color: var(--dining-gold);
  white-space: nowrap;
}

.dining-menu-item p {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
}

.dining-overlay__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(212, 168, 75, 0.2);
}

.dining-overlay__shell--fpv .dining-overlay__footer {
  margin-top: auto;
  padding: 0.75rem 0 0;
}

.dining-overlay__exit {
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #120c0a;
  background: var(--dining-gold);
  border: none;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

.dining-overlay__exit--primary {
  background: linear-gradient(180deg, #e0bc6a, #d4a84b);
}

/* Encounter interrupt */
.dining-encounter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 6, 5, 0.72);
  animation: dining-fade-in 220ms ease-out;
  z-index: 2;
}

.dining-encounter__silhouettes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dining-encounter__sil {
  position: absolute;
  bottom: 12%;
  left: 50%;
  width: 120px;
  height: 220px;
  transform: translateX(-50%) scale(0.85);
  opacity: 0;
  background: linear-gradient(180deg, rgba(243, 230, 208, 0.15), rgba(0, 0, 0, 0.55));
  clip-path: polygon(35% 0, 65% 0, 78% 28%, 72% 28%, 85% 100%, 15% 100%, 28% 28%, 22% 28%);
  animation: dining-sil-enter 480ms ease-out forwards;
}

.dining-encounter__sil--celebrity {
  background: linear-gradient(180deg, rgba(212, 168, 75, 0.45), rgba(0, 0, 0, 0.55));
}

.dining-encounter__sil--escort {
  background: linear-gradient(180deg, rgba(192, 96, 140, 0.4), rgba(0, 0, 0, 0.55));
}

.dining-encounter__sil--staff {
  background: linear-gradient(180deg, rgba(110, 200, 200, 0.35), rgba(0, 0, 0, 0.55));
}

.dining-encounter__card {
  position: relative;
  width: min(480px, 100%);
  background: #1c1410;
  border: 1px solid rgba(212, 168, 75, 0.5);
  padding: 1.25rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.dining-encounter__card--enter {
  animation: dining-card-enter 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dining-encounter__cat {
  margin: 0 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--dining-gold);
}

.dining-encounter__card h3 {
  margin: 0 0 0.5rem;
  color: var(--dining-cream);
}

.dining-encounter__choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.dining-encounter__choice {
  font: inherit;
  text-align: left;
  color: var(--dining-cream);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(243, 230, 208, 0.2);
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}

.dining-encounter__choice:hover,
.dining-encounter__choice:focus-visible {
  border-color: var(--dining-gold);
  outline: none;
}

.dining-settled-list {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  line-height: 1.7;
}

.chip-pulse {
  display: inline-block;
  transition: color 160ms ease;
}

.chip-pulse--up {
  animation: chip-flash-up 600ms ease;
}

.chip-pulse--down {
  animation: chip-flash-down 600ms ease;
}

#app.view-transition > .panel,
#app.view-transition > div {
  animation: view-panel-in 220ms ease-out;
}

@keyframes dining-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dining-sil-enter {
  from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(0.8); }
  to { opacity: 0.9; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes dining-card-enter {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes chip-flash-up {
  0% { color: #e6c86a; text-shadow: 0 0 12px rgba(230, 200, 106, 0.7); transform: scale(1.08); }
  100% { color: inherit; text-shadow: none; transform: scale(1); }
}

@keyframes chip-flash-down {
  0% { color: #f07178; text-shadow: 0 0 10px rgba(240, 113, 120, 0.55); transform: scale(1.05); }
  100% { color: inherit; text-shadow: none; transform: scale(1); }
}

@keyframes view-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dining-pendant-glow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(240, 200, 100, 0.45)); opacity: 0.9; }
  50% { filter: drop-shadow(0 0 26px rgba(255, 220, 140, 0.75)); opacity: 1; }
}

@keyframes dining-flame {
  from { transform: scaleY(1) translateX(0); opacity: 0.85; }
  to { transform: scaleY(1.15) translateX(1px); opacity: 1; }
}

@keyframes dining-serve-in {
  0% { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.86); }
  60% { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.03); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes dining-bite-lift {
  0% { opacity: 0; transform: translate3d(-50%, 36px, 0) scale(0.5); }
  25% { opacity: 1; transform: translate3d(-50%, 8px, 0) scale(0.85); }
  70% { opacity: 1; transform: translate3d(-50%, -48px, 0) scale(1.15); }
  100% { opacity: 0; transform: translate3d(-50%, -90px, 0) scale(0.7); }
}

@keyframes dining-sip-lift {
  0% { opacity: 0; transform: translate3d(-20%, 20px, 0) scale(0.55) rotate(0deg); }
  30% { opacity: 1; transform: translate3d(-10%, -10px, 0) scale(0.9) rotate(-8deg); }
  70% { opacity: 1; transform: translate3d(10%, -55px, 0) scale(1.05) rotate(-18deg); }
  100% { opacity: 0; transform: translate3d(18%, -88px, 0) scale(0.75) rotate(-22deg); }
}

@keyframes dining-plate-nudge {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  35% { transform: translate3d(0, -6px, 0) scale(0.96); }
  60% { transform: translate3d(0, 2px, 0) scale(0.98); }
}

@keyframes dining-glass-tip {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  40% { transform: translate3d(-8px, -18px, 0) rotate(-16deg) scale(1.05); }
  70% { transform: translate3d(-4px, -10px, 0) rotate(-10deg) scale(1.02); }
}

@keyframes dining-tower-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes dining-angel-sway {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  50% { transform: translateX(-42%) translateY(6px) rotate(3deg); }
}

@keyframes dining-wave-drift {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50% { transform: translateX(4%); opacity: 0.85; }
}

@keyframes dining-ember {
  from { transform: scale(0.9); opacity: 0.7; filter: brightness(0.9); }
  to { transform: scale(1.15); opacity: 1; filter: brightness(1.25); }
}

@keyframes dining-spark {
  0% { transform: translate(-50%, 0) scale(1); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-50%, -28px) scale(0.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dining-overlay__backdrop,
  .dining-encounter,
  .dining-encounter__sil,
  .dining-encounter__card--enter,
  .chip-pulse--up,
  .chip-pulse--down,
  #app.view-transition > .panel,
  #app.view-transition > div,
  .dining-fpv__pendant,
  .dining-fpv__candle::after,
  .dining-fpv__bite.is-active,
  .dining-fpv__bite--sip.is-active,
  .dining-fpv__food.dining-fpv__anim-arrive,
  .dining-fpv__drink.dining-fpv__anim-arrive,
  .dining-fpv__food.dining-fpv__anim-bite,
  .dining-fpv__drink.dining-fpv__anim-sip,
  .dining-venue-scenery__tower-glow,
  .dining-venue-scenery__angel,
  .dining-venue-scenery__wave,
  .dining-venue-scenery__ember,
  .dining-venue-scenery__spark {
    animation: none !important;
  }

  .dining-venue-card,
  .dining-menu-item,
  .dining-meter__fill,
  .dining-fpv__food,
  .dining-fpv__drink,
  .dining-fpv__arm {
    transition: none !important;
  }
}

@media (max-width: 900px) {
  .dining-fpv-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(120px, 38%) minmax(0, 1fr);
    min-height: 0;
  }

  .dining-fpv-layout__stage {
    min-height: 120px;
    max-height: none;
  }

  .dining-fpv-layout__panel {
    max-height: none;
    border-left: none;
    border-top: 1px solid rgba(212, 168, 75, 0.28);
  }
}

@media (max-height: 500px), (orientation: landscape) and (max-height: 500px) {
  .dining-overlay__shell--fpv {
    height: var(--overlay-max-h, calc(100dvh - 1rem));
  }

  .dining-fpv-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(96px, 34%) minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .dining-overlay__backdrop {
    padding: 0.35rem;
  }

  .dining-overlay__shell {
    padding: 0.9rem;
  }

  .dining-overlay__shell--fpv {
    padding: 0;
  }

  .dining-menu-item__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .dining-fpv__caption {
    font-size: 0.65rem;
  }
}

/* Resort bar overlay — first-person drink POV at every lounge */

:root {
  --bar-bg: #0c0a10;
  --bar-rail: #3a2818;
  --bar-gold: #d4a84b;
  --bar-cream: #f0e6d4;
  --bar-neon: #e84888;
  --bar-ice: #88c8e8;
}

body.bar-overlay-active {
  overflow: hidden;
}

.bar-overlay {
  position: fixed;
  inset: 0;
  z-index: 9250;
  display: none;
  pointer-events: none;
}

.bar-overlay--open {
  display: block;
  pointer-events: auto;
}

body.pool-overlay-active .bar-overlay.bar-overlay--open {
  z-index: 9350;
}

.bar-overlay__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding:
    max(0.75rem, var(--safe-top, 0px))
    max(0.75rem, var(--safe-right, 0px))
    max(0.75rem, var(--safe-bottom, 0px))
    max(0.75rem, var(--safe-left, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 168, 75, 0.15) 0%, transparent 55%),
    linear-gradient(165deg, #141018 0%, #08060a 50%, #100c14 100%);
  animation: bar-fade-in 260ms ease-out;
}

@keyframes bar-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bar-overlay__shell {
  width: min(1080px, 100%);
  max-height: var(--overlay-max-h, calc(100dvh - 1.5rem));
  overflow: auto;
  margin: auto;
  background: linear-gradient(180deg, rgba(240, 230, 212, 0.05), transparent 35%), #141018;
  border: 1px solid rgba(212, 168, 75, 0.3);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  padding: 1.25rem;
  color: var(--bar-cream);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.bar-overlay__shell--fpv {
  width: min(1280px, 100%);
  max-height: var(--overlay-max-h, calc(100dvh - 1.5rem));
  height: var(--overlay-max-h, calc(100dvh - 1.5rem));
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bar-overlay__header {
  margin-bottom: 1rem;
}

.bar-overlay__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bar-gold);
  margin: 0 0 0.35rem;
}

.bar-overlay__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: #fff;
}

.bar-overlay__tagline {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 0.85;
}

.bar-overlay__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.78rem;
}

.bar-overlay__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(212, 168, 75, 0.2);
}

.bar-overlay__exit {
  background: transparent;
  border: 1px solid rgba(212, 168, 75, 0.5);
  color: var(--bar-gold);
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.bar-overlay__exit--primary {
  background: rgba(212, 168, 75, 0.15);
}

.bar-overlay__exit:hover {
  background: rgba(212, 168, 75, 0.25);
}

/* Venue lobby grid */
.bar-venue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.bar-venue-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(212, 168, 75, 0.25);
  color: var(--bar-cream);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 160ms, transform 160ms;
}

.bar-venue-card:hover:not(:disabled) {
  border-color: var(--bar-gold);
  transform: translateY(-2px);
}

.bar-venue-card--locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.bar-venue-card__icon {
  font-size: 1.5rem;
}

.bar-venue-card--sound-lounge { border-left: 3px solid #e84888; }
.bar-venue-card--frozen-rail { border-left: 3px solid #48c8e8; }
.bar-venue-card--live-lounge { border-left: 3px solid #c87830; }
.bar-venue-card--lobby-bar { border-left: 3px solid #d4a84b; }
.bar-venue-card--skyline { border-left: 3px solid #6888c8; }
.bar-venue-card--velvet { border-left: 3px solid #6a1848; }
.bar-venue-card--pool-deck { border-left: 3px solid #38a878; }
.bar-venue-card--noir { border-left: 3px solid #282028; }

/* FPV layout */
.bar-fpv-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr min(340px, 38%);
  max-height: 100%;
  height: 100%;
}

.bar-fpv-layout__stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.bar-fpv-layout__panel {
  padding: 1rem 1.1rem;
  background: rgba(8, 6, 12, 0.92);
  border-left: 1px solid rgba(212, 168, 75, 0.2);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* First-person bar stage */
.bar-fpv {
  position: absolute;
  inset: 0;
  perspective: 900px;
}

.bar-fpv__ambient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 200, 120, 0.12), transparent 60%);
  pointer-events: none;
}

.bar-fpv__room {
  position: absolute;
  inset: 0 0 38%;
  background: linear-gradient(180deg, #1a1420 0%, #0e0a14 100%);
}

.bar-fpv__backbar {
  position: absolute;
  top: 8%;
  left: 5%;
  right: 5%;
  height: 55%;
  background: linear-gradient(180deg, #2a1c14 0%, #1a100c 100%);
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 -8px 24px rgba(0, 0, 0, 0.5);
}

.bar-fpv__mirror {
  position: absolute;
  top: 12%;
  left: 15%;
  right: 15%;
  height: 35%;
  background: linear-gradient(135deg, rgba(200, 220, 240, 0.15), rgba(100, 120, 140, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.bar-fpv__bottle-row {
  position: absolute;
  bottom: 8%;
  left: 8%;
  right: 8%;
  height: 45%;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 28px,
    rgba(180, 140, 80, 0.15) 28px,
    rgba(180, 140, 80, 0.15) 32px
  );
}

.bar-fpv__pendants {
  position: absolute;
  top: 4%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 20%;
}

.bar-fpv__light {
  width: 12px;
  height: 28px;
  background: linear-gradient(180deg, #f0d878, #a87820);
  border-radius: 2px;
  box-shadow: 0 0 18px rgba(240, 200, 100, 0.5);
  animation: bar-light-flicker 4s ease-in-out infinite;
}

.bar-fpv__light--2 { animation-delay: 1.8s; }

@keyframes bar-light-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.bar-fpv__rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  transform: rotateX(8deg);
  transform-origin: bottom center;
}

.bar-fpv__rail-wood {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #5a3820 0%, #3a2414 40%, #2a180c 100%);
  border-top: 3px solid #8a6840;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
}

.bar-fpv__mat {
  position: absolute;
  top: 12%;
  left: 8%;
  right: 8%;
  height: 55%;
  background: #1a1410;
  border-radius: 2px;
  opacity: 0.6;
}

.bar-fpv__glass-well {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 200px;
  z-index: 2;
}

.bar-fpv__glass-empty {
  position: absolute;
  inset: 20% 25%;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.bar-fpv__glass-empty.is-hidden { display: none; }

.bar-fpv__drink {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 280ms ease;
}

.bar-fpv__drink.is-served .bar-sprite-svg {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

.bar-fpv__drink.bar-fpv__anim-arrive {
  animation: bar-drink-arrive 420ms ease-out;
}

@keyframes bar-drink-arrive {
  from { transform: translateY(24px) scale(0.9); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.bar-fpv__napkin {
  position: absolute;
  bottom: 18%;
  right: 22%;
  width: 48px;
  height: 48px;
  background: #f0e8d8;
  transform: rotate(12deg);
  opacity: 0.85;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}

.bar-fpv__hands {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  pointer-events: none;
  z-index: 3;
}

.bar-fpv__arm {
  position: absolute;
  bottom: 0;
  width: 38%;
  height: 80%;
  background: linear-gradient(180deg, #c8a080 0%, #a87858 100%);
  border-radius: 40% 40% 0 0;
  opacity: 0.9;
}

.bar-fpv__arm--left {
  left: 8%;
  transform: rotate(-8deg);
}

.bar-fpv__arm--right {
  right: 8%;
  transform: rotate(8deg);
}

.bar-fpv__hands.is-sipping .bar-fpv__arm--right {
  animation: bar-sip-arm 680ms ease-in-out;
}

@keyframes bar-sip-arm {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  40% { transform: rotate(-4deg) translateY(-18px); }
}

.bar-fpv__sip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}

.bar-fpv__sip.is-active {
  animation: bar-sip-pop 680ms ease-out forwards;
}

@keyframes bar-sip-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.8); }
  30% { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.05); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.9); }
}

.bar-fpv__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
  z-index: 5;
}

.bar-fpv__caption {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 230, 212, 0.7);
  z-index: 6;
  white-space: nowrap;
}

/* Motif scenery */
.bar-scenery {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bar-scenery__neon {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  color: var(--bar-neon);
  text-shadow: 0 0 12px currentColor;
  opacity: 0.85;
}

.bar-scenery--sound .bar-scenery__dancefloor {
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 25%;
  background: repeating-linear-gradient(45deg, #1a1020, #1a1020 8px, #221428 8px, #221428 16px);
  opacity: 0.6;
}

.bar-scenery--frozen .bar-scenery__blender {
  position: absolute;
  top: 30%;
  right: 18%;
  width: 40px;
  height: 50px;
  background: #c0c8d0;
  border-radius: 4px;
}

.bar-scenery--skyline .bar-scenery__strip {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(180deg, transparent, rgba(80, 60, 120, 0.4));
  box-shadow: inset 0 -20px 40px rgba(255, 180, 80, 0.15);
}

.bar-scenery--pool .bar-scenery__water {
  position: absolute;
  bottom: 15%;
  left: 5%;
  right: 5%;
  height: 30%;
  background: linear-gradient(180deg, #2888a8, #186878);
  opacity: 0.5;
  animation: bar-water-shimmer 6s ease-in-out infinite;
}

@keyframes bar-water-shimmer {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.6; }
}

.bar-scenery--noir .bar-scenery__velvet-wall {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a0808, #141010);
}

.bar-scenery--noir .bar-scenery__candle {
  position: absolute;
  top: 25%;
  left: 20%;
  width: 6px;
  height: 20px;
  background: #f0d878;
  box-shadow: 0 0 20px #f0a040;
}

/* Motif panel tints */
.bar-motif--sound-lounge .bar-fpv-layout__panel {
  background: linear-gradient(180deg, rgba(232, 72, 136, 0.08), rgba(8, 6, 12, 0.95));
}

.bar-motif--frozen-rail .bar-fpv-layout__panel {
  background: linear-gradient(180deg, rgba(72, 200, 232, 0.08), rgba(8, 6, 12, 0.95));
}

.bar-motif--pool-deck .bar-fpv-layout__panel {
  background: linear-gradient(180deg, rgba(56, 168, 120, 0.1), rgba(8, 6, 12, 0.95));
}

.bar-motif--noir .bar-fpv-layout__panel {
  background: linear-gradient(180deg, rgba(40, 32, 40, 0.5), rgba(4, 2, 6, 0.98));
}

/* Menu + HUD */
.bar-hud {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.65rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(212, 168, 75, 0.15);
  font-size: 0.72rem;
}

.bar-hud__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
}

.bar-hud__chips {
  margin-left: auto;
  color: var(--bar-gold);
}

.bar-message {
  font-size: 0.8rem;
  margin: 0 0 0.75rem;
  min-height: 2.4em;
  line-height: 1.4;
}

.bar-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  overflow-y: auto;
}

.bar-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 168, 75, 0.18);
  color: var(--bar-cream);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}

.bar-menu-item:hover:not(:disabled) {
  border-color: var(--bar-gold);
  background: rgba(212, 168, 75, 0.08);
}

.bar-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bar-menu-item__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.bar-menu-item__price {
  color: var(--bar-gold);
  font-size: 0.85rem;
}

/* Encounters */
.bar-encounter {
  position: fixed;
  inset: 0;
  z-index: 9300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  padding: 1rem;
}

.bar-encounter__card {
  max-width: 420px;
  padding: 1.25rem;
  background: #1a1418;
  border: 1px solid var(--bar-gold);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.bar-encounter__cat {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bar-neon);
  margin: 0 0 0.5rem;
}

.bar-encounter__choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.bar-encounter__choice {
  padding: 0.55rem 0.75rem;
  background: rgba(212, 168, 75, 0.1);
  border: 1px solid rgba(212, 168, 75, 0.35);
  color: var(--bar-cream);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.bar-encounter__choice:hover {
  background: rgba(212, 168, 75, 0.2);
}

@media (max-width: 900px) {
  .bar-fpv-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(120px, 38%) minmax(0, 1fr);
  }

  .bar-fpv-layout__stage {
    min-height: 120px;
  }

  .bar-fpv-layout__panel {
    border-left: none;
    border-top: 1px solid rgba(212, 168, 75, 0.2);
    max-height: none;
  }
}

@media (max-height: 500px), (orientation: landscape) and (max-height: 500px) {
  .bar-overlay__shell--fpv {
    height: var(--overlay-max-h, calc(100dvh - 1rem));
  }

  .bar-fpv-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(96px, 34%) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bar-fpv__light,
  .bar-scenery--pool .bar-scenery__water,
  .bar-fpv__drink.bar-fpv__anim-arrive,
  .bar-fpv__hands.is-sipping .bar-fpv__arm--right,
  .bar-fpv__sip.is-active {
    animation: none !important;
  }
}

/* Mandalay Beach / Pool Complex overlay — sun, desert, turquoise water */

:root {
  --pool-sky: #1a3a52;
  --pool-sky-hot: #3d6f8c;
  --pool-sun: #ffb347;
  --pool-sun-core: #ffe08a;
  --pool-water: #1a8a9a;
  --pool-water-deep: #0d4a58;
  --pool-sand: #c4a06a;
  --pool-desert: #8a5a32;
  --pool-gold: #e8c547;
  --pool-foam: #d8f0f4;
  --pool-ink: #071018;
  --pool-panel: rgba(8, 18, 26, 0.88);
  --pool-text: #e8f4f6;
}

body.pool-overlay-active {
  overflow: hidden;
}

.pool-overlay-host {
  display: none !important;
}

.pool-overlay {
  position: fixed;
  inset: 0;
  z-index: 9250;
  display: none;
  pointer-events: none;
}

.pool-overlay--open {
  display: block;
  pointer-events: auto;
}

.pool-overlay--steady .pool-overlay__shell {
  animation: none;
}

.pool-overlay__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding:
    max(0.85rem, var(--safe-top, 0px))
    max(0.85rem, var(--safe-right, 0px))
    max(0.85rem, var(--safe-bottom, 0px))
    max(0.85rem, var(--safe-left, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: pool-fade-in 320ms ease-out;
}

@keyframes pool-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Atmosphere layers ── */

.pool-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.pool-atmosphere__sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 8%, rgba(255, 179, 71, 0.45) 0%, transparent 42%),
    radial-gradient(ellipse at 20% 0%, rgba(57, 197, 207, 0.18) 0%, transparent 40%),
    linear-gradient(180deg, #245a78 0%, var(--pool-sky) 38%, #0e2430 72%, #07141c 100%);
}

.pool-atmosphere__sun {
  position: absolute;
  top: 6%;
  right: 12%;
  width: min(22vw, 9rem);
  height: min(22vw, 9rem);
  animation: pool-sun-pulse 6s ease-in-out infinite;
}

.pool-atmosphere__sun-core {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--pool-sun-core), var(--pool-sun) 55%, #e08a20 100%);
  box-shadow:
    0 0 40px rgba(255, 179, 71, 0.55),
    0 0 90px rgba(255, 140, 40, 0.35);
}

.pool-atmosphere__sun-ray {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 14deg,
    rgba(255, 200, 100, 0.18) 14deg 22deg,
    transparent 22deg 50deg,
    rgba(255, 200, 100, 0.12) 50deg 58deg,
    transparent 58deg 100deg,
    rgba(255, 200, 100, 0.16) 100deg 108deg,
    transparent 108deg
  );
  animation: pool-sun-spin 28s linear infinite;
}

@keyframes pool-sun-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes pool-sun-spin {
  to { transform: rotate(360deg); }
}

.pool-atmosphere__haze {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(196, 160, 106, 0.12) 70%, transparent 100%);
  animation: pool-haze 8s ease-in-out infinite alternate;
}

@keyframes pool-haze {
  from { opacity: 0.55; transform: translateY(0); }
  to { opacity: 0.9; transform: translateY(-1.5%); }
}

.pool-atmosphere__desert {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  height: 28%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(138, 90, 50, 0.35) 40%, rgba(90, 55, 28, 0.55) 100%);
  clip-path: polygon(0 55%, 12% 40%, 28% 58%, 45% 32%, 62% 50%, 78% 28%, 100% 48%, 100% 100%, 0 100%);
  opacity: 0.85;
}

.pool-atmosphere__palms {
  position: absolute;
  inset: 0;
}

.pool-palm {
  position: absolute;
  bottom: 22%;
  width: 2.5rem;
  height: 9rem;
  background: linear-gradient(180deg, transparent 0%, #1a4030 18%, #0d281c 100%);
  border-radius: 40% 40% 10% 10%;
  opacity: 0.55;
  transform-origin: bottom center;
  animation: pool-palm-sway 5.5s ease-in-out infinite;
}

.pool-palm::before {
  content: "";
  position: absolute;
  top: -1.2rem;
  left: 50%;
  width: 4.5rem;
  height: 2.2rem;
  margin-left: -2.25rem;
  background: radial-gradient(ellipse at 50% 100%, #1f5a40 0%, transparent 70%);
  border-radius: 50%;
}

.pool-palm--a { left: 6%; animation-delay: 0s; }
.pool-palm--b { right: 8%; left: auto; animation-delay: -2.2s; height: 7.5rem; opacity: 0.4; }

@keyframes pool-palm-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(3deg); }
}

.pool-atmosphere__water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background:
    linear-gradient(180deg, rgba(26, 138, 154, 0.15) 0%, var(--pool-water) 35%, var(--pool-water-deep) 100%);
  overflow: hidden;
}

.pool-wave {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(216, 240, 244, 0.18);
  animation: pool-wave-drift 7s ease-in-out infinite;
}

.pool-wave--1 { bottom: 55%; animation-duration: 6s; }
.pool-wave--2 { bottom: 35%; opacity: 0.7; animation-duration: 8s; animation-delay: -2s; }
.pool-wave--3 { bottom: 12%; opacity: 0.5; animation-duration: 9.5s; animation-delay: -4s; height: 3rem; }

@keyframes pool-wave-drift {
  0%, 100% { transform: translateX(-2%) scaleY(1); }
  50% { transform: translateX(3%) scaleY(1.15); }
}

.pool-atmosphere__steam {
  position: absolute;
  inset: 30% 10% 25%;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(220, 240, 255, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(200, 230, 240, 0.14) 0%, transparent 45%);
  animation: pool-steam 4s ease-in-out infinite;
  filter: blur(8px);
}

@keyframes pool-steam {
  0%, 100% { opacity: 0.45; transform: translateY(0); }
  50% { opacity: 0.85; transform: translateY(-4%); }
}

.pool-atmosphere__bubbles span {
  position: absolute;
  bottom: 8%;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(180, 230, 255, 0.45);
  animation: pool-bubble 5s linear infinite;
}

.pool-atmosphere__bubbles span:nth-child(1) { left: 18%; animation-delay: 0s; }
.pool-atmosphere__bubbles span:nth-child(2) { left: 34%; animation-delay: -1s; width: 0.3rem; height: 0.3rem; }
.pool-atmosphere__bubbles span:nth-child(3) { left: 52%; animation-delay: -2.2s; }
.pool-atmosphere__bubbles span:nth-child(4) { left: 68%; animation-delay: -0.8s; width: 0.55rem; height: 0.55rem; }
.pool-atmosphere__bubbles span:nth-child(5) { left: 82%; animation-delay: -3.1s; }

@keyframes pool-bubble {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  15% { opacity: 0.7; }
  100% { transform: translateY(-55vh) scale(1.1); opacity: 0; }
}

.pool-atmosphere__neon {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(57, 197, 207, 0.2) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 40%, rgba(232, 197, 71, 0.15) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 80%, rgba(61, 214, 140, 0.12) 0%, transparent 45%);
  animation: pool-neon-shift 3.2s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

@keyframes pool-neon-shift {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

.pool-atmosphere__stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 18px,
    rgba(232, 197, 71, 0.04) 18px,
    rgba(232, 197, 71, 0.04) 36px
  );
  opacity: 0.7;
}

/* Motif backdrop tweaks */
.pool-overlay__backdrop--reef .pool-atmosphere__sky {
  background: linear-gradient(180deg, #0a2a38 0%, #061820 50%, #031018 100%);
}

.pool-overlay__backdrop--reef .pool-atmosphere__sun { opacity: 0.25; }

.pool-overlay__backdrop--rave .pool-atmosphere__sky {
  background: linear-gradient(180deg, #0a1020 0%, #081018 40%, #04080e 100%);
}

.pool-overlay__backdrop--rave .pool-atmosphere__sun { opacity: 0.15; filter: hue-rotate(40deg); }

.pool-overlay__backdrop--steam .pool-atmosphere__water {
  background: linear-gradient(180deg, rgba(180, 210, 220, 0.2) 0%, #2a6a72 40%, #143840 100%);
}

/* FX bursts */
.pool-fx--splash .pool-atmosphere__water {
  animation: pool-splash-burst 0.85s ease-out;
}

@keyframes pool-splash-burst {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.45); }
  100% { filter: brightness(1); }
}

.pool-fx--splash .pool-hero-splash {
  animation: pool-splash-pop 0.7s ease-out;
}

@keyframes pool-splash-pop {
  0% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.4); }
}

.pool-fx--mistime .pool-overlay__shell {
  animation: pool-shake 0.45s ease-out;
}

@keyframes pool-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.pool-fx--ring .pool-zone__hero--wave::after {
  content: "";
  position: absolute;
  inset: 30% 40%;
  border: 2px solid var(--pool-gold);
  border-radius: 50%;
  animation: pool-ring-toss 0.7s ease-out forwards;
}

@keyframes pool-ring-toss {
  0% { transform: translateY(-40%) scale(0.4); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(30%) scale(1); opacity: 0; }
}

.pool-fx--steam .pool-atmosphere__steam {
  animation: pool-steam 1.2s ease-out;
  opacity: 1;
}

.pool-fx--shutter .pool-overlay__shell {
  animation: pool-shutter 0.35s steps(2, end);
}

@keyframes pool-shutter {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(2.2); }
}

.pool-fx--neon .pool-atmosphere__neon {
  animation: pool-neon-hit 0.6s ease-out;
}

@keyframes pool-neon-hit {
  0% { opacity: 0.4; }
  40% { opacity: 1; filter: brightness(1.4); }
  100% { opacity: 0.7; }
}

.pool-fx--sun .pool-atmosphere__sun {
  animation: pool-sun-pulse 0.5s ease-out;
  transform: scale(1.12);
}

.pool-fx--gold .pool-overlay__shell {
  box-shadow: 0 0 0 1px rgba(232, 197, 71, 0.55), 0 24px 80px rgba(0, 0, 0, 0.55);
}

/* ── Shell ── */

.pool-overlay__shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  max-height: min(var(--overlay-max-h, calc(100dvh - 1.7rem)), 100%);
  min-height: min(280px, var(--overlay-max-h, calc(100dvh - 1.7rem)));
  overflow: hidden;
  margin: auto;
  padding: 1.15rem 1.25rem 1rem;
  color: var(--pool-text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background:
    linear-gradient(180deg, rgba(232, 197, 71, 0.08) 0%, transparent 28%),
    var(--pool-panel);
  border: 1px solid rgba(57, 197, 207, 0.35);
  box-shadow:
    0 0 0 1px rgba(232, 197, 71, 0.12),
    0 24px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  animation: pool-shell-in 420ms cubic-bezier(0.22, 1.1, 0.36, 1) both;
}

.pool-overlay__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.15rem;
}

.pool-overlay__header,
.pool-overlay__tagline,
.pool-overlay__message,
.pool-overlay__footer {
  flex-shrink: 0;
}

@keyframes pool-shell-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pool-overlay__shell--wave { border-color: rgba(26, 138, 154, 0.55); }
.pool-overlay__shell--steam { border-color: rgba(180, 210, 220, 0.35); }
.pool-overlay__shell--cabana { border-color: rgba(232, 197, 71, 0.4); }
.pool-overlay__shell--reef { border-color: rgba(80, 180, 220, 0.45); }
.pool-overlay__shell--club { border-color: rgba(255, 179, 71, 0.45); }
.pool-overlay__shell--rave { border-color: rgba(57, 197, 207, 0.5); }
.pool-overlay__shell--reel { border-color: rgba(232, 197, 71, 0.35); }

.pool-overlay__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.35rem;
}

.pool-overlay__eyebrow {
  margin: 0;
  color: var(--pool-gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}

.pool-overlay__title {
  margin: 0.25rem 0 0;
  color: #fff;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 18px rgba(26, 138, 154, 0.35);
}

.pool-overlay__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.9rem;
  align-items: center;
  font-size: 0.78rem;
}

.pool-overlay__chips {
  color: var(--pool-gold);
  font-weight: 700;
}

.pool-overlay__tagline {
  margin: 0 0 0.75rem;
  color: rgba(232, 244, 246, 0.72);
  max-width: 48rem;
  line-height: 1.45;
  font-size: 0.9rem;
}

.pool-overlay__message {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  animation: pool-shell-in 280ms ease-out;
}

.pool-overlay__message.is-ok {
  background: rgba(61, 214, 140, 0.1);
  border: 1px solid rgba(61, 214, 140, 0.35);
  color: #9aecc0;
}

.pool-overlay__message.is-bad {
  background: rgba(240, 113, 120, 0.1);
  border: 1px solid rgba(240, 113, 120, 0.35);
  color: #f0a0a5;
}

.pool-overlay__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(57, 197, 207, 0.18);
}

.pool-overlay__exit {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pool-ink);
  background: linear-gradient(180deg, var(--pool-gold) 0%, #c9a030 100%);
  border: 1px solid rgba(255, 230, 150, 0.35);
  border-radius: 3px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

.pool-overlay__exit:hover,
.pool-overlay__exit:focus-visible {
  filter: brightness(1.08);
  outline: none;
}

.pool-overlay__footer-note {
  font-size: 0.75rem;
}

/* Hub grid */

.pool-hub__summary {
  margin: 0 0 0.5rem;
  font-style: italic;
  border-left: 2px solid rgba(232, 197, 71, 0.4);
  padding-left: 0.65rem;
}

.pool-hub__unlocks {
  margin: 0 0 0.85rem;
  color: #9aecc0;
  font-size: 0.85rem;
}

.pool-zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}

.pool-zone-card {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  text-align: left;
  padding: 0;
  border: 1px solid rgba(57, 197, 207, 0.28);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.32);
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.pool-zone-card:hover,
.pool-zone-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--pool-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  outline: none;
}

.pool-zone-card--visited {
  border-color: rgba(61, 214, 140, 0.35);
}

.pool-zone-card__visual {
  flex: 0 0 4.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(26, 138, 154, 0.35), rgba(8, 24, 32, 0.6));
  position: relative;
  overflow: hidden;
}

.pool-zone-card__visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  background: linear-gradient(180deg, transparent, rgba(216, 240, 244, 0.18));
  animation: pool-wave-drift 5s ease-in-out infinite;
}

.pool-zone-card--wave .pool-zone-card__visual {
  background: linear-gradient(160deg, #1a8a9a, #0d3a48);
}

.pool-zone-card--steam .pool-zone-card__visual {
  background: linear-gradient(160deg, #6a9aa4, #2a4850);
}

.pool-zone-card--cabana .pool-zone-card__visual {
  background:
    repeating-linear-gradient(90deg, #c9a030 0 6px, #1a2230 6px 12px);
}

.pool-zone-card--reef .pool-zone-card__visual {
  background: linear-gradient(180deg, #0a3040, #062028);
}

.pool-zone-card--club .pool-zone-card__visual {
  background: radial-gradient(circle at 50% 20%, #ffb347, #8a4a18 70%);
}

.pool-zone-card--rave .pool-zone-card__visual {
  background: linear-gradient(135deg, #0a2030, #123840 50%, #0a1810);
}

.pool-zone-card--reel .pool-zone-card__visual {
  background: linear-gradient(160deg, #3a3020, #1a1810);
}

.pool-zone-card__icon {
  font-size: 1.45rem;
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
  z-index: 1;
}

.pool-zone-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.75rem 0.7rem 0;
  min-width: 0;
}

.pool-zone-card__tag {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pool-gold);
  font-weight: 700;
}

.pool-zone-card__name {
  font-size: 0.95rem;
  color: #fff;
}

/* Zone interiors */

.pool-zone__hero {
  position: relative;
  height: 6.5rem;
  margin: 0 0 0.85rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pool-zone__hero--wave {
  background:
    linear-gradient(180deg, rgba(36, 90, 120, 0.4) 0%, transparent 40%),
    linear-gradient(180deg, #1a6a7a 45%, #0d3a48 100%);
}

.pool-hero-wave {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 15%;
  height: 2.5rem;
  background: rgba(216, 240, 244, 0.22);
  border-radius: 50%;
  animation: pool-wave-drift 4.5s ease-in-out infinite;
}

.pool-hero-splash {
  position: absolute;
  left: 50%;
  top: 35%;
  width: 4rem;
  height: 4rem;
  margin-left: -2rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 65%);
  opacity: 0;
  pointer-events: none;
}

.pool-zone__hero--steam {
  background:
    radial-gradient(ellipse at 40% 70%, rgba(220, 240, 255, 0.25), transparent 50%),
    linear-gradient(180deg, #3a6068, #1a3438);
}

.pool-zone__hero--cabana {
  background:
    repeating-linear-gradient(90deg, rgba(232, 197, 71, 0.35) 0 14px, rgba(20, 28, 36, 0.85) 14px 28px),
    linear-gradient(180deg, #2a3848, #142028);
}

.pool-zone__hero--reef {
  background: linear-gradient(180deg, #0a2838, #041418);
}

.pool-reef-glass {
  position: absolute;
  inset: 12% 18%;
  border: 2px solid rgba(120, 200, 230, 0.35);
  border-radius: 4px;
  background:
    linear-gradient(120deg, rgba(80, 180, 220, 0.12), transparent 40%),
    rgba(10, 40, 50, 0.55);
  box-shadow: inset 0 0 30px rgba(40, 140, 180, 0.25);
  animation: pool-reef-pulse 3.5s ease-in-out infinite;
}

@keyframes pool-reef-pulse {
  0%, 100% { box-shadow: inset 0 0 24px rgba(40, 140, 180, 0.2); }
  50% { box-shadow: inset 0 0 40px rgba(80, 200, 230, 0.35); }
}

.pool-zone__hero--club {
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 179, 71, 0.55), transparent 40%),
    linear-gradient(180deg, #4a7a90, #1a4050 60%, #c4a06a 61%, #8a6a3a);
}

.pool-zone__hero--rave {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(57, 197, 207, 0.3), transparent 45%),
    radial-gradient(ellipse at 70% 60%, rgba(232, 197, 71, 0.2), transparent 40%),
    linear-gradient(180deg, #0a1424, #061018);
}

.pool-rave-deck {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 18%;
  height: 0.35rem;
  background: linear-gradient(90deg, transparent, var(--pool-gold), var(--pool-water), transparent);
  box-shadow: 0 0 16px rgba(57, 197, 207, 0.45);
  animation: pool-neon-shift 1.8s ease-in-out infinite alternate;
}

.pool-action-block {
  margin: 0 0 1rem;
}

.pool-action-block h3 {
  margin: 0 0 0.25rem;
  color: var(--pool-gold);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pool-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.pool-action-row--stack {
  flex-direction: column;
}

.pool-action-btn {
  font: inherit;
  font-size: 0.82rem;
  color: var(--pool-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(57, 197, 207, 0.3);
  border-radius: 4px;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}

.pool-action-btn:hover:not(:disabled),
.pool-action-btn:focus-visible:not(:disabled) {
  border-color: var(--pool-gold);
  background: rgba(26, 138, 154, 0.2);
  outline: none;
  transform: translateY(-1px);
}

.pool-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pool-action-btn--primary {
  background: linear-gradient(180deg, rgba(26, 138, 154, 0.45), rgba(13, 74, 88, 0.65));
  border-color: rgba(57, 197, 207, 0.55);
  font-weight: 700;
}

.pool-warning {
  color: #f0c040;
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}

.pool-species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.55rem;
}

.pool-species-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  padding: 0.75rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: rgba(0, 20, 30, 0.55);
  border: 1px solid rgba(80, 180, 220, 0.28);
  border-radius: 4px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.pool-species-card:hover,
.pool-species-card:focus-visible {
  border-color: rgba(120, 210, 240, 0.65);
  box-shadow: 0 0 16px rgba(40, 140, 180, 0.25);
  outline: none;
}

.pool-species-card--shot {
  border-color: rgba(61, 214, 140, 0.45);
  background: rgba(20, 50, 40, 0.45);
}

.pool-species-card__mark {
  color: var(--pool-gold);
  font-size: 0.9rem;
}

.pool-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pool-event-list__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(232, 197, 71, 0.12);
  font-size: 0.88rem;
  line-height: 1.4;
}

.pool-event-list__item strong {
  color: var(--pool-gold);
}

.pool-event-list--locked li {
  padding: 0.35rem 0;
  color: var(--dim, #5c6773);
}

.pool-event-locked {
  margin-top: 1rem;
}

.pool-rave-pads .pool-action-btn--primary {
  width: 100%;
  margin-bottom: 0.35rem;
  text-align: center;
}

@media (max-width: 640px) {
  .pool-overlay__backdrop {
    padding: 0.4rem;
  }

  .pool-overlay__shell {
    padding: 0.9rem 0.85rem 0.75rem;
  }

  .pool-zone-card__visual {
    flex-basis: 3.25rem;
  }

  .pool-atmosphere__desert {
    opacity: 0.55;
  }

  .pool-palm {
    display: none;
  }
}

/* Suite balcony POV — Strip vista + smoke-break minigame */

:root {
  --balcony-night: #07101c;
  --balcony-dusk: #12233a;
  --balcony-gold: #e2b45a;
  --balcony-amber: #ff8a3d;
  --balcony-teal: #2ec4b6;
  --balcony-coral: #ff5e7a;
  --balcony-cream: #f4efe4;
  --balcony-glass: rgba(180, 210, 230, 0.18);
  --balcony-font-display: "Cormorant Garamond", "Times New Roman", serif;
  --balcony-font-ui: "Manrope", "Segoe UI", sans-serif;
}

body.balcony-smoke-overlay-active {
  overflow: hidden;
}

.balcony-smoke-overlay {
  position: fixed;
  inset: 0;
  z-index: 9300;
  display: none;
  pointer-events: none;
}

.balcony-smoke-overlay--open {
  display: block;
  pointer-events: auto;
}

.balcony-smoke-overlay--steady .balcony-smoke-overlay__stage {
  animation: none;
}

.balcony-smoke-overlay__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--balcony-night);
  color: var(--balcony-cream);
  font-family: var(--balcony-font-ui);
  animation: balcony-enter 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes balcony-enter {
  from { opacity: 0; transform: scale(1.04); filter: blur(6px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* —— Sky —— */
.balcony-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.balcony-sky__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 70% 18%, rgba(255, 138, 61, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 20% 30%, rgba(46, 196, 182, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, #050914 0%, #0c1a2e 38%, #1a2740 62%, #2a1f18 100%);
}

.balcony-sky__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 28% 12%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 46% 22%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 63% 8%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 78% 16%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 88% 28%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 35% 30%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 55% 14%, rgba(255, 255, 255, 0.6), transparent);
  animation: balcony-twinkle 4.5s ease-in-out infinite alternate;
  opacity: 0.85;
}

@keyframes balcony-twinkle {
  from { opacity: 0.55; }
  to { opacity: 0.95; }
}

.balcony-sky__beam {
  position: absolute;
  left: 18%;
  top: -8%;
  width: 3px;
  height: 58%;
  background: linear-gradient(180deg, rgba(255, 220, 160, 0.75), transparent 85%);
  transform: rotate(-8deg);
  filter: blur(0.5px);
  animation: balcony-beam 6s ease-in-out infinite alternate;
  box-shadow: 0 0 18px 4px rgba(255, 200, 120, 0.25);
}

@keyframes balcony-beam {
  from { opacity: 0.55; }
  to { opacity: 0.95; }
}

.balcony-sky__moon {
  position: absolute;
  top: 12%;
  right: 16%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d8, #e8d49a 55%, #c9a86a);
  box-shadow: 0 0 40px rgba(255, 230, 160, 0.35);
  animation: balcony-moon-drift 12s ease-in-out infinite alternate;
}

@keyframes balcony-moon-drift {
  from { transform: translateY(0); }
  to { transform: translateY(8px); }
}

/* —— Strip skyline —— */
.balcony-strip {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.balcony-strip__horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28%;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(255, 120, 60, 0.18) 40%, rgba(20, 12, 8, 0.55));
}

.balcony-strip__mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34%;
  height: 18%;
  background:
    linear-gradient(160deg, transparent 40%, rgba(20, 28, 40, 0.85) 40%, rgba(20, 28, 40, 0.85) 70%, transparent 70%),
    linear-gradient(-155deg, transparent 35%, rgba(16, 24, 36, 0.9) 35%, rgba(16, 24, 36, 0.9) 65%, transparent 65%);
  opacity: 0.7;
}

.balcony-strip__skyline {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 26%;
  height: 42%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.6%;
  transform-origin: 50% 100%;
  animation: balcony-parallax 14s ease-in-out infinite alternate;
}

@keyframes balcony-parallax {
  from { transform: translateX(-1.2%) scale(1); }
  to { transform: translateX(1.2%) scale(1.015); }
}

.balcony-tower {
  position: relative;
  flex: 0 0 auto;
  height: 55%;
}

.balcony-tower__body {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #1c2433, #0d121c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.balcony-tower__lights {
  position: absolute;
  inset: 8% 12% 4%;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(226, 180, 90, 0.55) 0 2px,
      transparent 2px 10px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(46, 196, 182, 0.25) 0 3px,
      transparent 3px 11px
    );
  opacity: 0.75;
  animation: balcony-window-pulse 2.8s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

@keyframes balcony-window-pulse {
  from { opacity: 0.45; filter: brightness(0.9); }
  to { opacity: 0.9; filter: brightness(1.15); }
}

.tower-pyramid { width: 7%; height: 70%; }
.tower-pyramid .balcony-tower__body {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #3a2a18, #1a120c);
}
.tower-pyramid .balcony-tower__lights {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 200, 120, 0.5), transparent 70%);
}

.tower-sphere { width: 9%; height: 48%; }
.tower-sphere .balcony-tower__body {
  border-radius: 50% 50% 12% 12%;
  background:
    radial-gradient(circle at 40% 35%, rgba(255, 94, 122, 0.55), transparent 45%),
    radial-gradient(circle at 60% 55%, rgba(46, 196, 182, 0.4), transparent 50%),
    linear-gradient(180deg, #243044, #101820);
}

.tower-bellagio { width: 11%; height: 62%; }
.tower-bellagio .balcony-tower__body {
  background: linear-gradient(180deg, #243050, #121a28);
  border-radius: 4px 4px 0 0;
}

.tower-paris { width: 5%; height: 78%; }
.tower-paris .balcony-tower__body {
  clip-path: polygon(50% 0, 70% 18%, 62% 18%, 62% 100%, 38% 100%, 38% 18%, 30% 18%);
  background: linear-gradient(180deg, #d8c4a0, #6a5840);
}
.tower-paris .balcony-tower__lights {
  background: linear-gradient(180deg, rgba(255, 230, 160, 0.7), transparent);
}

.tower-venetian { width: 10%; height: 58%; }
.tower-venetian .balcony-tower__body {
  background: linear-gradient(180deg, #3a2c40, #181220);
}

.tower-aria { width: 8%; height: 72%; }
.tower-aria .balcony-tower__body {
  background: linear-gradient(180deg, #1e3a48, #0c1820);
  transform: perspective(120px) rotateY(-8deg);
}

.tower-mandalay { width: 12%; height: 80%; }
.tower-mandalay .balcony-tower__body {
  background:
    linear-gradient(180deg, rgba(226, 180, 90, 0.35), transparent 30%),
    linear-gradient(180deg, #2a1c14, #0e0a08);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 28px rgba(226, 180, 90, 0.2);
}

.tower-casino { width: 7%; height: 50%; }
.tower-casino .balcony-tower__body {
  background: linear-gradient(180deg, #203040, #101820);
}

.balcony-strip__boulevard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  height: 6%;
  background: linear-gradient(180deg, #1a1410, #0a0806);
  overflow: hidden;
}

.balcony-traffic {
  position: absolute;
  top: 35%;
  height: 2px;
  width: 140%;
  left: -20%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 18px,
    rgba(255, 220, 140, 0.85) 18px 22px,
    transparent 22px 40px,
    rgba(255, 80, 80, 0.7) 40px 43px
  );
}

.balcony-traffic--a { animation: balcony-traffic 9s linear infinite; }
.balcony-traffic--b {
  top: 60%;
  animation: balcony-traffic 12s linear infinite reverse;
  opacity: 0.7;
}

@keyframes balcony-traffic {
  from { transform: translateX(-8%); }
  to { transform: translateX(8%); }
}

.balcony-strip__fountains {
  position: absolute;
  left: 42%;
  bottom: 27%;
  width: 12%;
  height: 8%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(160, 210, 255, 0.45), transparent 70%);
  animation: balcony-fountain 2.2s ease-in-out infinite;
}

@keyframes balcony-fountain {
  0%, 100% { transform: scaleY(0.7); opacity: 0.45; }
  50% { transform: scaleY(1.15); opacity: 0.9; }
}

.balcony-strip__glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20%;
  height: 30%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 140, 60, 0.28), transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* —— Atmosphere / smoke —— */
.balcony-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.balcony-haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(180, 160, 120, 0.35), transparent 55%),
    linear-gradient(180deg, transparent 30%, rgba(40, 30, 20, 0.35));
  transition: opacity 600ms ease;
}

.balcony-smoke-plumes {
  position: absolute;
  left: 52%;
  bottom: 18%;
  width: 40%;
  height: 50%;
}

.plume {
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 210, 190, 0.35), transparent 70%);
  filter: blur(8px);
  animation: balcony-plume 4.5s ease-out infinite;
  opacity: 0;
}

.plume--1 { left: 10%; animation-delay: 0s; }
.plume--2 { left: 28%; animation-delay: 0.7s; width: 60px; height: 60px; }
.plume--3 { left: 40%; animation-delay: 1.4s; }
.plume--4 { left: 55%; animation-delay: 2.1s; width: 70px; height: 70px; }
.plume--5 { left: 18%; animation-delay: 2.8s; }

@keyframes balcony-plume {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  15% { opacity: calc(0.35 + var(--balcony-haze, 0.2)); }
  100% { transform: translate(-40px, -220px) scale(1.8); opacity: 0; }
}

.balcony-smoke-overlay--exhale .balcony-exhale-burst {
  position: absolute;
  left: 48%;
  bottom: 22%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 220, 200, 0.55), transparent 70%);
  filter: blur(10px);
  animation: balcony-exhale 900ms ease-out forwards;
}

@keyframes balcony-exhale {
  0% { transform: scale(0.3); opacity: 0.8; }
  100% { transform: translate(-30px, -160px) scale(2.4); opacity: 0; }
}

/* —— Foreground railing + hands —— */
.balcony-foreground {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.balcony-railing {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
}

.balcony-railing__glass {
  position: absolute;
  left: 0;
  right: 0;
  top: 8%;
  height: 42%;
  background: linear-gradient(
    180deg,
    rgba(200, 220, 240, 0.08),
    rgba(180, 200, 220, 0.16) 40%,
    rgba(40, 50, 60, 0.35)
  );
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(1px);
  box-shadow: inset 0 12px 30px rgba(255, 255, 255, 0.05);
}

.balcony-railing__bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 6%;
  height: 10px;
  background: linear-gradient(180deg, #c9b089, #7a6540);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.balcony-railing__posts {
  position: absolute;
  left: 0;
  right: 0;
  top: 14%;
  bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 7%,
    rgba(180, 160, 120, 0.35) 7% 7.35%
  );
  opacity: 0.55;
}

.balcony-hands {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5rem;
}

.balcony-hand {
  width: 120px;
  height: 90px;
  background: radial-gradient(ellipse at 50% 20%, #d4a574, #8a5a3a 70%);
  border-radius: 40% 40% 20% 20%;
  opacity: 0.92;
  filter: blur(0.2px);
}

.balcony-hand--left {
  transform: rotate(12deg) translateY(18px);
  animation: balcony-hand-breathe 5s ease-in-out infinite;
}

.balcony-hand--right {
  transform: rotate(-10deg) translateY(22px);
  animation: balcony-hand-breathe 5s ease-in-out infinite 0.4s;
}

@keyframes balcony-hand-breathe {
  0%, 100% { transform: rotate(12deg) translateY(18px); }
  50% { transform: rotate(10deg) translateY(12px); }
}

.balcony-hand--right {
  animation-name: balcony-hand-breathe-r;
}

@keyframes balcony-hand-breathe-r {
  0%, 100% { transform: rotate(-10deg) translateY(22px); }
  50% { transform: rotate(-8deg) translateY(14px); }
}

.balcony-joint-wrap {
  position: relative;
  margin-bottom: 3.2rem;
  z-index: 2;
}

.balcony-joint {
  width: 86px;
  height: 14px;
  position: relative;
  transform: rotate(-18deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

.balcony-joint__paper {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #f0e6d0, #c8b896 55%, #a89068);
  box-shadow: inset 0 0 0 1px rgba(80, 60, 40, 0.25);
}

.balcony-joint__ember {
  position: absolute;
  right: -4px;
  top: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff2a8 0%, #ff8a3d 45%, #8b1e00 80%);
  box-shadow: 0 0 12px 4px rgba(255, 120, 40, 0.65);
  animation: balcony-ember 1.1s ease-in-out infinite alternate;
}

@keyframes balcony-ember {
  from { transform: scale(0.9); box-shadow: 0 0 8px 2px rgba(255, 100, 30, 0.5); }
  to { transform: scale(1.15); box-shadow: 0 0 18px 6px rgba(255, 140, 50, 0.8); }
}

.balcony-joint__smoke {
  position: absolute;
  right: 2px;
  top: -28px;
  width: 18px;
  height: 36px;
  background: radial-gradient(ellipse at 50% 100%, rgba(220, 210, 195, 0.55), transparent 70%);
  filter: blur(3px);
  animation: balcony-joint-smoke 2.4s ease-out infinite;
}

@keyframes balcony-joint-smoke {
  0% { transform: translateY(0) scaleX(0.6); opacity: 0.2; }
  40% { opacity: 0.7; }
  100% { transform: translateY(-40px) scaleX(1.4); opacity: 0; }
}

/* —— HUD —— */
.balcony-hud {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto auto;
  align-content: start;
  padding:
    max(clamp(1rem, 3vw, 2rem), var(--safe-top, 0px))
    max(clamp(1rem, 3vw, 2rem), var(--safe-right, 0px))
    max(clamp(1rem, 3vw, 2rem), var(--safe-bottom, 0px))
    max(clamp(1rem, 3vw, 2rem), var(--safe-left, 0px));
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 10, 18, 0.55) 0%, transparent 28%),
    linear-gradient(0deg, rgba(5, 10, 18, 0.72) 0%, transparent 38%);
}

.balcony-hud > * {
  pointer-events: auto;
  max-width: 34rem;
}

.balcony-hud__brand {
  justify-self: start;
}

.balcony-hud__eyebrow {
  margin: 0;
  font-family: var(--balcony-font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--balcony-gold);
}

.balcony-hud__title {
  margin: 0.15rem 0 0;
  font-family: var(--balcony-font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 0.95;
  color: var(--balcony-cream);
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.55);
}

.balcony-hud__meta,
.balcony-hud__tagline,
.balcony-hud__status,
.balcony-hud__hint {
  margin: 0.35rem 0 0;
  color: rgba(244, 239, 228, 0.78);
  font-size: 0.92rem;
}

.balcony-hud__tagline {
  letter-spacing: 0.04em;
  color: rgba(226, 180, 90, 0.9);
}

.balcony-hud__status {
  align-self: end;
  margin-top: auto;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--balcony-cream);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
  max-width: 36rem;
}

.balcony-hud__meters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.85rem;
}

.balcony-meter {
  min-width: 10rem;
  flex: 1;
}

.balcony-meter span {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.7);
  margin-bottom: 0.25rem;
}

.balcony-meter__track {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.balcony-meter__fill {
  height: 100%;
  transition: width 400ms ease;
}

.balcony-meter__fill--ember {
  background: linear-gradient(90deg, #ff8a3d, #e2b45a);
}

.balcony-meter__fill--buzz {
  background: linear-gradient(90deg, #2ec4b6, #7ed6c8);
}

.balcony-hud__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}

.balcony-btn {
  appearance: none;
  border: 1px solid rgba(226, 180, 90, 0.45);
  background: rgba(10, 16, 28, 0.72);
  color: var(--balcony-cream);
  font-family: var(--balcony-font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.balcony-btn:hover:not(:disabled) {
  background: rgba(30, 40, 58, 0.88);
  border-color: var(--balcony-gold);
  transform: translateY(-1px);
}

.balcony-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.balcony-btn--primary {
  background: linear-gradient(180deg, rgba(226, 180, 90, 0.95), rgba(180, 120, 40, 0.95));
  color: #1a1208;
  border-color: transparent;
}

.balcony-btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #f0c878, #c4923a);
}

.balcony-btn--ghost {
  border-color: rgba(244, 239, 228, 0.28);
  background: transparent;
}

.balcony-hud__hint {
  font-size: 0.75rem;
  color: rgba(244, 239, 228, 0.45);
}

@media (max-width: 720px) {
  .balcony-hand { width: 88px; height: 70px; }
  .balcony-joint { width: 70px; }
  .balcony-hud__actions { flex-direction: column; }
  .balcony-btn { width: 100%; }
  .balcony-strip__skyline { height: 36%; bottom: 30%; }
  .balcony-railing { height: 38%; }
}

@media (max-height: 500px), (orientation: landscape) and (max-height: 500px) {
  .balcony-hud {
    padding: 0.55rem 0.85rem;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 0.15rem;
  }

  .balcony-hud__title {
    font-size: clamp(1.35rem, 5vh, 2.1rem);
  }

  .balcony-hud__meta,
  .balcony-hud__tagline,
  .balcony-hud__status,
  .balcony-hud__hint {
    font-size: 0.8rem;
    margin-top: 0.15rem;
  }

  .balcony-hud__status {
    margin-bottom: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .balcony-smoke-overlay__stage,
  .balcony-sky__stars,
  .balcony-sky__beam,
  .balcony-sky__moon,
  .balcony-strip__skyline,
  .balcony-traffic,
  .balcony-strip__fountains,
  .balcony-tower__lights,
  .plume,
  .balcony-joint__ember,
  .balcony-joint__smoke,
  .balcony-hand--left,
  .balcony-hand--right,
  .balcony-smoke-overlay--exhale .balcony-exhale-burst {
    animation: none !important;
  }
}