:root {
  color-scheme: dark;
  --brand-color: #ff2a6d;

  /* Core Night-Arena Surfaces */
  --bg-abyss: #070814;
  --bg-dark: #0d1024;
  --bg-panel: #161b38;
  --bg-card: #212850;
  --bg-card-elevated: #2a3363;

  /* Glassmorphism Surfaces */
  --glass-hud: rgba(16, 20, 44, 0.84);
  --glass-sheet: rgba(20, 25, 52, 0.94);
  --glass-border: rgba(255, 255, 255, 0.16);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.25);

  /* Thai Pop-Arcade Accents & 3D Lips */
  --accent-primary: #ff2a6d;
  --accent-primary-hi: #ff6b9d;
  --lip-primary: #b80d48;

  --accent-secondary: #ffc800;
  --accent-secondary-hi: #ffe169;
  --lip-gold: #c28300;

  --accent-cyan: #00f5d4;
  --lip-cyan: #009e88;

  --accent-purple: #9d4edd;
  --lip-purple: #5a189a;

  --lip-card: #11152e;

  /* Text & Borders */
  --text-main: #ffffff;
  --text-muted: #aeb8dc;
  --border-subtle: rgba(255, 255, 255, 0.14);
  --font-thai: 'Kanit', system-ui, -apple-system, sans-serif;

  /* Fluid Type Scale */
  --fs-title-lg: clamp(1.08rem, 4.2vw, 1.3rem);
  --fs-title-md: clamp(0.94rem, 3.6vw, 1.1rem);
  --fs-body: clamp(0.75rem, 2.8vw, 0.84rem);
  --fs-caption: clamp(0.64rem, 2.4vw, 0.72rem);
}

:where(html, body, div, header, nav, main, footer, dialog, h1, h2, p, ul, li, button, input, select, label, details, summary, span, strong, small, canvas, progress) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  accent-color: var(--brand-color);
  background:
    radial-gradient(circle at 50% 0%, rgba(157, 78, 221, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(255, 42, 109, 0.22) 0%, transparent 50%),
    linear-gradient(180deg, #16113a 0%, #070814 100%);
  color: var(--text-main);
  font-family: var(--font-thai);
  line-height: 1.35;
  letter-spacing: 0.01em;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  user-select: none;
}

.app-shell {
  width: 100%;
  max-width: 455px;
  height: 100dvh;
  max-height: 932px;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.78), 0 0 0 1px var(--glass-border);
  overflow: hidden;
}

@media (min-width: 500px) {
  .app-shell {
    height: 96dvh;
    border-radius: 28px;
  }
}

/* =========================================================
   Context-Aware Chrome Hiding (>85% Canvas Viewport in Battle)
   ========================================================= */
.app-shell:is([data-phase="trap_place"], [data-phase="brawl"]) .mode-tabs,
.app-shell:is([data-phase="trap_place"], [data-phase="brawl"]) .bottom-bar,
.app-shell:is([data-game-phase="TRAP_PICK"], [data-game-phase="AIMING"], [data-game-phase="SIMULATING"]) .mode-tabs,
.app-shell:is([data-game-phase="TRAP_PICK"], [data-game-phase="AIMING"], [data-game-phase="SIMULATING"]) .bottom-bar {
  display: none;
}

/* Hide Power Tuner while in Lobby so Lobby Card has full breathing room */
.app-shell:is([data-phase="lobby"], [data-game-phase="LOBBY"]) .power-tuner-bar {
  display: none;
}

/* Prevent accidental HUD taps while thumb is actively dragging slingshot */
.app-shell[data-game-phase="AIMING"] .party-bar,
.app-shell[data-game-phase="AIMING"] .power-tuner-bar {
  opacity: 0.32;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* =========================================================
   Top Status & Currency Bar (Glassmorphic Arcade Header)
   ========================================================= */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 11px;
  background: var(--glass-hud);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), var(--inner-highlight);
  z-index: 10;
}

.brand-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 2px 6px 2px 2px;
  border-radius: 10px;
  transition: transform 0.08s ease, background 0.15s ease;
}

.brand-badge:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.06);
}

.brand-icon {
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 6px rgba(255, 42, 109, 0.55));
}

.brand-text h1 {
  font-size: clamp(0.9rem, 3.5vw, 1.02rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.ver-tag {
  background: linear-gradient(180deg, var(--accent-secondary-hi), var(--accent-secondary));
  color: #1a1100;
  font-size: 0.56rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 6px;
  box-shadow: 0 2px 0 var(--lip-gold);
  vertical-align: middle;
}

.brand-text .subtitle {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--accent-cyan);
  display: block;
}

.stats-pills {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(33, 40, 80, 0.88);
  backdrop-filter: blur(8px);
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  border: 1px solid var(--glass-border);
  box-shadow: 0 3px 0 var(--lip-card), var(--inner-highlight);
}

.pill-coins {
  cursor: pointer;
  background: linear-gradient(135deg, rgba(64, 43, 18, 0.92), rgba(43, 31, 77, 0.92));
  border-color: rgba(255, 200, 0, 0.55);
  box-shadow: 0 3px 0 #593d00, var(--inner-highlight);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.pill-coins:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #593d00;
}

.plus-badge {
  background: var(--accent-secondary);
  color: #111;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
}

.icon-btn {
  background: linear-gradient(180deg, var(--bg-card-elevated), var(--bg-card));
  border: 1px solid var(--glass-border);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 var(--lip-card), var(--inner-highlight);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.icon-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--lip-card);
}

/* =========================================================
   Mode Switcher Segmented Dock (3 Tabs)
   ========================================================= */
.mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 5px 10px 7px;
  background: #0b0e21;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

.tab-btn {
  background: rgba(33, 40, 80, 0.55);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 6px;
  border-radius: 11px;
  font-family: var(--font-thai);
  font-size: var(--fs-caption);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--lip-card);
  transition: transform 0.08s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.15s ease;
}

.tab-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--lip-card);
}

.tab-btn.active {
  background: linear-gradient(180deg, var(--accent-primary-hi) 0%, var(--accent-primary) 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow:
    0 3px 0 var(--lip-primary),
    0 4px 14px rgba(255, 42, 109, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* =========================================================
   Nitro Slingshot Power Tuner Bar
   ========================================================= */
.power-tuner-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 5px 11px;
  background: linear-gradient(90deg, rgba(14, 18, 40, 0.96), rgba(26, 20, 52, 0.96));
  border-bottom: 1px solid rgba(255, 200, 0, 0.28);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  font-size: var(--fs-caption);
  z-index: 8;
}

.power-label {
  white-space: nowrap;
  color: var(--text-muted);
  font-weight: 700;
}

.power-label strong {
  color: var(--accent-secondary);
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255, 200, 0, 0.4);
}

#powerSlider {
  flex: 1;
  min-width: 68px;
  height: 10px;
  cursor: pointer;
  accent-color: var(--brand-color);
  border-radius: 999px;
}

.power-presets {
  display: flex;
  gap: 4px;
}

.preset-chip {
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  min-height: 28px;
  padding: 3px 8px;
  font-family: var(--font-thai);
  font-size: 0.66rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--lip-card);
  transition: transform 0.08s ease, background 0.12s ease;
}

.preset-chip:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--lip-card);
}

.preset-chip.active {
  background: linear-gradient(180deg, var(--accent-secondary-hi), var(--accent-secondary));
  color: #1a1100;
  border-color: #fff;
  box-shadow: 0 2px 0 var(--lip-gold), 0 0 10px rgba(255, 200, 0, 0.5);
}

progress {
  width: 100%;
  height: 10px;
  accent-color: var(--brand-color);
  border-radius: 999px;
}

/* Fallback for older browsers without accent-color (modern-web-guidance: brand-consistent-forms) */
@supports not (accent-color: var(--brand-color)) {
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, var(--brand-color) var(--progress, 0%), #ccc var(--progress, 0%));
    border-radius: 4px;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--brand-color, #ff2a6d);
    cursor: pointer;
    margin-top: -4px;
  }

  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: #ccc;
    border-radius: 4px;
  }

  input[type="range"]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--brand-color, #ff2a6d);
    cursor: pointer;
  }

  input[type="range"]::-moz-range-progress {
    background-color: var(--brand-color, #ff2a6d);
    height: 8px;
    border-radius: 4px;
  }

  progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: #ccc;
    height: 8px;
    border-radius: 4px;
  }

  progress::-webkit-progress-bar {
    background-color: #ccc;
    border-radius: 4px;
  }

  progress::-webkit-progress-value {
    background-color: var(--brand-color, #ff2a6d);
    border-radius: 4px;
  }

  progress::-moz-progress-bar {
    background-color: var(--brand-color, #ff2a6c);
    border-radius: 4px;
  }
}

/* =========================================================
   Main Interactive Stage & HiDPI Canvas
   ========================================================= */
.stage-container {
  flex: 1;
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at 50% 45%, #192042 0%, #0b0e1f 100%);
}

#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}

#gameCanvas:active {
  cursor: grabbing;
}

/* =========================================================
   HUD Overlay (Top Floating Pills + Bottom Thumb Dock)
   ========================================================= */
.hud-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
}

.hud-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.phase-banner {
  background: var(--glass-hud);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  padding: 5px 11px;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), var(--inner-highlight);
}

.phase-tag {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--accent-secondary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.phase-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.timer-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-primary-hi), var(--accent-primary));
  border: 2.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 0 var(--lip-primary), 0 6px 16px rgba(255, 42, 109, 0.55);
  flex-shrink: 0;
}

/* Boss HP Bar */
.boss-hp-bar {
  background: rgba(38, 10, 42, 0.92);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--accent-primary);
  padding: 5px 10px;
  border-radius: 13px;
  box-shadow: 0 6px 18px rgba(255, 42, 109, 0.35), var(--inner-highlight);
}

.boss-hp-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--accent-secondary);
  margin-bottom: 3px;
}

/* Ghost Spectator Banner */
.ghost-haunt-banner {
  background: linear-gradient(135deg, rgba(157, 78, 221, 0.94), rgba(255, 42, 109, 0.94));
  border: 1.5px solid #fff;
  border-radius: 13px;
  padding: 6px 10px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(157, 78, 221, 0.55);
}

.ghost-haunt-banner strong {
  display: block;
  font-size: 0.8rem;
}

.ghost-haunt-banner span {
  font-size: 0.68rem;
}

/* 8-Trap Tactile Arcade Deck (Anchored to Bottom Thumb Zone!) */
.trap-toolbar {
  pointer-events: auto;
  margin-top: auto;
  background: rgba(14, 18, 42, 0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(0, 245, 212, 0.5);
  border-radius: 16px;
  padding: 7px 9px 9px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.68),
    0 0 16px rgba(0, 245, 212, 0.15),
    var(--inner-highlight);
}

.trap-toolbar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--accent-cyan);
  font-weight: 800;
  margin-bottom: 5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.trap-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.trap-chip {
  position: relative;
  background: linear-gradient(180deg, #2b3569 0%, #1d244b 100%);
  color: #e8edff;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  padding: 5px 3px 4px;
  min-height: 44px;
  font-family: var(--font-thai);
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 3px 0 #0e1229, inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.08s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
}

.trap-chip span {
  font-size: 1.15rem;
  line-height: 1.1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trap-chip:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0e1229;
}

.trap-chip.active {
  background: linear-gradient(180deg, rgba(0, 245, 212, 0.34) 0%, rgba(16, 62, 78, 0.95) 100%);
  color: #ffffff;
  border-color: var(--accent-cyan);
  box-shadow:
    0 3px 0 var(--lip-cyan),
    0 0 12px rgba(0, 245, 212, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.trap-chip.active span {
  transform: scale(1.14);
}

.trap-chip.active::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
}

/* Single-Row Horizontal Swipeable Trap Strip in UGC Editor so Arena & Goal Star stay 100% clear! */
.app-shell:is([data-phase="ugc_edit"], [data-game-phase="UGC"]) .trap-items {
  display: flex;
  overflow-x: auto;
  gap: 6px;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.app-shell:is([data-phase="ugc_edit"], [data-game-phase="UGC"]) .trap-items::-webkit-scrollbar {
  display: none;
}

.app-shell:is([data-phase="ugc_edit"], [data-game-phase="UGC"]) .trap-chip {
  flex: 0 0 70px;
}

/* UGC Controls Bottom Dock */
.ugc-controls {
  pointer-events: auto;
  margin-top: auto;
  background: rgba(16, 20, 44, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), var(--inner-highlight);
}

.trap-toolbar:not(.hidden) + .ugc-controls:not(.hidden) {
  margin-top: 0;
}

.ugc-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
}

.verify-badge {
  font-size: 0.66rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

.verify-badge.unverified {
  background: rgba(255, 200, 0, 0.16);
  color: var(--accent-secondary);
  border: 1px solid rgba(255, 200, 0, 0.35);
}

.verify-badge.verified {
  background: rgba(0, 245, 212, 0.18);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 245, 212, 0.45);
}

.ugc-action-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 7px;
}

/* Party Taunt & Ghost Sabotage Bottom Pill */
.party-bar {
  pointer-events: auto;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--glass-hud);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), var(--inner-highlight);
}

.cooldown-indicator {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--accent-cyan);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.taunt-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.taunt-btn {
  background: linear-gradient(180deg, var(--bg-card-elevated), var(--bg-card));
  border: 1px solid var(--glass-border);
  color: #fff;
  border-radius: 999px;
  min-width: 34px;
  min-height: 32px;
  padding: 4px 7px;
  font-family: var(--font-thai);
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--lip-card);
  transition: transform 0.08s ease;
}

.taunt-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--lip-card);
}

.btn-sabotage {
  background: linear-gradient(180deg, var(--accent-secondary-hi), #fb5607);
  color: #111;
  font-weight: 900;
  font-size: 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 0 #9e3600;
}

/* =========================================================
   Stage Overlay Modals: Zero-Scroll Progressive Disclosure Lobby
   ========================================================= */
.stage-modal {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(22, 27, 56, 0.82), rgba(7, 8, 20, 0.92));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  z-index: 20;
}

.hidden {
  display: none !important;
}

.lobby-card {
  background: linear-gradient(180deg, #1b2246 0%, #131836 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 2px solid rgba(255, 200, 0, 0.6);
  border-radius: 22px;
  padding: 12px 13px;
  width: 100%;
  max-width: 405px;
  max-height: 98%;
  overflow-y: auto;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.75),
    var(--inner-highlight);
  text-align: center;
  scrollbar-width: thin;
}

.lobby-header-compact {
  margin-bottom: 8px;
}

.badge-viral {
  display: inline-block;
  background: rgba(255, 200, 0, 0.16);
  color: var(--accent-secondary);
  border: 1px solid rgba(255, 200, 0, 0.45);
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 3px;
}

.lobby-card h2 {
  font-size: var(--fs-title-lg);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

/* 1. Selected Skin & Province Row */
.profile-config-row {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: 7px;
  margin-bottom: 8px;
}

.skin-preview-box {
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, var(--bg-card-elevated), var(--bg-card));
  border: 1px solid var(--glass-border);
  padding: 6px 8px;
  border-radius: 13px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 3px 0 var(--lip-card), var(--inner-highlight);
  transition: transform 0.08s ease;
}

.skin-preview-box:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--lip-card);
}

.skin-avatar {
  font-size: 1.35rem;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.skin-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.skin-info strong {
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skin-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-muted);
}

.province-box {
  background: linear-gradient(180deg, var(--bg-card-elevated), var(--bg-card));
  border: 1px solid var(--glass-border);
  padding: 4px 8px;
  border-radius: 13px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 3px 0 var(--lip-card), var(--inner-highlight);
}

.province-box select,
.rule-cell select {
  background: #10142c;
  color: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 3px 5px;
  font-family: var(--font-thai);
  font-size: 0.7rem;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
}

/* 2. Sub-mode Selector: 2-Column Ergonomic Cards */
.submode-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 8px;
  text-align: left;
}

.radio-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  background: linear-gradient(180deg, var(--bg-card-elevated), var(--bg-card));
  border: 2px solid var(--glass-border);
  padding: 8px 9px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--lip-card), var(--inner-highlight);
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}

.radio-card:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--lip-card);
}

.radio-card input {
  display: none;
}

.radio-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mode-tag {
  font-size: 0.56rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.2);
  color: var(--accent-secondary);
  border: 1px solid rgba(255, 200, 0, 0.45);
}

.mode-tag-cyan {
  background: rgba(0, 245, 212, 0.18);
  color: var(--accent-cyan);
  border-color: rgba(0, 245, 212, 0.45);
}

.radio-card.active {
  border-color: var(--accent-primary);
  background: linear-gradient(180deg, rgba(255, 42, 109, 0.25) 0%, rgba(33, 40, 80, 0.95) 100%);
  box-shadow:
    0 4px 0 var(--lip-primary),
    0 0 16px rgba(255, 42, 109, 0.3),
    var(--inner-highlight);
}

.radio-icon {
  font-size: 1.25rem;
}

.radio-card strong {
  display: block;
  font-size: 0.76rem;
  line-height: 1.2;
}

.radio-card small {
  display: block;
  font-size: 0.62rem;
  color: var(--text-muted);
  line-height: 1.25;
  margin-top: 2px;
}

/* 3. Progressive Disclosure Drawers (<details class="lobby-drawer">) */
.lobby-drawer {
  background: rgba(13, 16, 36, 0.85);
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  margin-bottom: 7px;
  text-align: left;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.drawer-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
  background: rgba(33, 40, 80, 0.45);
  transition: background 0.15s ease;
}

.drawer-summary::-webkit-details-marker {
  display: none;
}

.drawer-summary:hover {
  background: rgba(42, 51, 99, 0.65);
}

.drawer-hint {
  font-size: 0.63rem;
  font-weight: 700;
  color: var(--accent-cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lobby-drawer[open] .drawer-summary {
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(0, 245, 212, 0.1);
}

/* Match Rules Grid inside Drawer */
.match-rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
  text-align: left;
}

.rule-cell {
  background: rgba(24, 29, 58, 0.9);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  padding: 5px 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rule-cell span {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
}

.btn-boss-shortcut {
  background: linear-gradient(180deg, #d91b7a, #9d1765);
  color: #fff;
  width: 100%;
  box-shadow: 0 2px 0 #5e0939;
}

/* Real-Time Room Panel inside Drawer */
.realtime-room-box {
  padding: 8px;
  text-align: left;
}

.room-code-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  margin-bottom: 6px;
}

.room-code-row input {
  width: 64px;
  background: var(--bg-card);
  color: var(--accent-secondary);
  border: 1px solid rgba(255, 200, 0, 0.45);
  border-radius: 8px;
  padding: 4px 5px;
  font-family: var(--font-thai);
  font-weight: 900;
  font-size: 0.78rem;
  text-align: center;
  text-transform: uppercase;
}

.room-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.roster-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-card);
  border: 1px solid rgba(0, 245, 212, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.64rem;
  font-weight: 700;
}

.roster-badge.bot {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
}

/* Perk Cards */
.lobby-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 9px;
}

.perk-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.perk-card {
  background: linear-gradient(180deg, var(--bg-card-elevated), var(--bg-card));
  border: 1.5px solid rgba(0, 245, 212, 0.45);
  border-radius: 14px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-thai);
  box-shadow: 0 4px 0 var(--lip-card), var(--inner-highlight);
  transition: transform 0.08s ease, border-color 0.15s ease;
}

.perk-card:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--lip-card);
}

.perk-icon {
  font-size: 1.55rem;
}

/* =========================================================
   Tactile 3D Arcade Buttons
   ========================================================= */
.btn-primary,
.btn-primary-xl,
.btn-secondary,
.btn-mini,
.btn-buy-iap,
.btn-buy-coins,
.btn-ad-reward {
  position: relative;
  font-family: var(--font-thai);
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 13px;
  cursor: pointer;
  padding: 9px 12px;
  font-size: var(--fs-body);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  transition: transform 0.08s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.08s ease, filter 0.15s ease;
}

.btn-primary,
.btn-primary-xl {
  background: linear-gradient(180deg, var(--accent-primary-hi) 0%, var(--accent-primary) 100%);
  color: #fff;
  box-shadow:
    0 4px 0 var(--lip-primary),
    0 8px 18px rgba(255, 42, 109, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn-primary:hover:not(:disabled),
.btn-primary-xl:hover:not(:disabled) {
  filter: brightness(1.06);
}

.btn-primary:active:not(:disabled),
.btn-primary-xl:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 var(--lip-primary),
    0 3px 8px rgba(255, 42, 109, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-secondary {
  background: linear-gradient(180deg, var(--bg-card-elevated) 0%, var(--bg-card) 100%);
  color: #fff;
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 0 var(--lip-card), var(--inner-highlight);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--lip-card);
}

.btn-mini {
  padding: 4px 8px;
  font-size: 0.68rem;
  border-radius: 8px;
  box-shadow: 0 2px 0 var(--lip-card);
}

.btn-mini:active:not(:disabled) {
  transform: translateY(2px);
}

.btn-danger {
  background: rgba(255, 42, 109, 0.22);
  color: #ff8fa3;
  border: 1px solid rgba(255, 42, 109, 0.45);
}

.btn-xl,
.btn-primary-xl {
  width: 100%;
  padding: 11px 16px;
  font-size: clamp(0.94rem, 3.6vw, 1.04rem);
  font-weight: 900;
  border-radius: 15px;
  box-shadow:
    0 5px 0 var(--lip-primary),
    0 10px 24px rgba(255, 42, 109, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
  animation: ctaPulseGlow 2.4s infinite ease-in-out;
}

.btn-xl:active:not(:disabled),
.btn-primary-xl:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--lip-primary), 0 4px 10px rgba(255, 42, 109, 0.35);
}

@keyframes ctaPulseGlow {
  0%, 100% {
    box-shadow:
      0 5px 0 var(--lip-primary),
      0 8px 20px rgba(255, 42, 109, 0.45),
      inset 0 2px 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow:
      0 5px 0 var(--lip-primary),
      0 10px 28px rgba(255, 42, 109, 0.75),
      0 0 12px rgba(255, 200, 0, 0.35),
      inset 0 2px 0 rgba(255, 255, 255, 0.65);
  }
}

.btn-full {
  width: 100%;
}

/* =========================================================
   Bottom Quick Navigation Dock (4 Tactile Pills)
   ========================================================= */
.bottom-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 6px 9px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #0b0e21;
  border-top: 1px solid var(--glass-border);
}

.nav-pill {
  background: linear-gradient(180deg, var(--bg-card-elevated) 0%, var(--bg-card) 100%);
  color: #fff;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  padding: 6px 3px;
  font-family: var(--font-thai);
  font-size: 0.66rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: 0 3px 0 var(--lip-card), var(--inner-highlight);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.nav-pill:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--lip-card);
}

/* =========================================================
   Native <dialog closedby="any"> Mobile Sheet & Card Polish
   ========================================================= */
dialog {
  margin: auto;
  background: linear-gradient(180deg, #1d2449 0%, #121631 100%);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 2px solid rgba(0, 245, 212, 0.45);
  border-radius: 24px;
  width: 95%;
  max-width: 425px;
  max-height: 88dvh;
  padding: 0;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

@media (max-width: 480px) {
  dialog {
    margin: auto auto 0 auto;
    width: 100%;
    max-width: 100%;
    border-radius: 26px 26px 0 0;
    border-bottom: none;
    max-height: 90dvh;
  }
}

dialog::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  margin: 8px auto 2px;
}

dialog[open] {
  animation: sheetPopUp 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sheetPopUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

dialog::backdrop {
  background: radial-gradient(circle at 50% 30%, rgba(22, 27, 56, 0.72), rgba(4, 6, 16, 0.88));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dialog-inner {
  padding: 8px 15px 18px;
  overflow-y: auto;
  max-height: calc(88dvh - 18px);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.dialog-header {
  position: sticky;
  top: -8px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #1d2449 75%, rgba(29, 36, 73, 0));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dialog-header h2 {
  font-size: var(--fs-title-md);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.close-x {
  background: linear-gradient(180deg, #323c70, #212850);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 900;
  font-size: 0.85rem;
  box-shadow: 0 3px 0 var(--lip-card), var(--inner-highlight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.08s ease;
}

.close-x:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--lip-card);
}

.dialog-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.38;
}

/* Shop Subtabs */
.shop-subtabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.shop-tab {
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
  padding: 7px 6px;
  border-radius: 11px;
  font-family: var(--font-thai);
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--lip-card);
}

.shop-tab.active {
  background: rgba(0, 245, 212, 0.22);
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 3px 0 var(--lip-cyan);
}

/* Viral Result Card inside Dialog */
.result-card-capture {
  background: linear-gradient(145deg, #251942 0%, #161b33 100%);
  border: 2px solid var(--accent-secondary);
  border-radius: 18px;
  padding: 13px 11px;
  text-align: center;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.result-badge {
  display: inline-block;
  background: var(--accent-secondary);
  color: #111;
  font-weight: 900;
  font-size: 0.74rem;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}

.result-RankTitle {
  color: var(--accent-cyan);
  font-weight: 800;
  font-size: 0.86rem;
  margin-bottom: 9px;
}

.result-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 9px;
}

.stat-box {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  padding: 6px 4px;
}

.stat-val {
  display: block;
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
}

.stat-lbl {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.result-quote {
  font-size: 0.76rem;
  font-style: italic;
  color: #ffe5ec;
  background: rgba(255, 42, 109, 0.16);
  padding: 6px 9px;
  border-radius: 10px;
}

.monetization-prompt {
  margin-bottom: 10px;
}

.btn-ad-reward {
  width: 100%;
  background: linear-gradient(180deg, #00b4d8, #0077b6);
  color: #fff;
  box-shadow: 0 4px 0 #023e8a, var(--inner-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.ad-badge {
  background: var(--accent-secondary);
  color: #111;
  font-size: 0.64rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 6px;
  text-shadow: none;
}

.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
}

.dialog-actions-triple {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 6px;
}

/* Shop Grid & IAP */
.skin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.skin-item {
  background: linear-gradient(180deg, var(--bg-card-elevated) 0%, var(--bg-card) 100%);
  border: 2px solid var(--glass-border);
  border-radius: 14px;
  padding: 8px 5px;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-thai);
  color: #fff;
  box-shadow: 0 4px 0 var(--lip-card), var(--inner-highlight);
  transition: transform 0.08s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.skin-item:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--lip-card);
}

.skin-item.selected {
  border-color: var(--accent-cyan);
  background: linear-gradient(180deg, rgba(0, 245, 212, 0.24) 0%, rgba(33, 40, 80, 0.95) 100%);
  box-shadow:
    0 4px 0 var(--lip-cyan),
    0 0 15px rgba(0, 245, 212, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.skin-item-icon {
  font-size: 1.5rem;
  display: block;
}

.skin-item-name {
  font-size: 0.68rem;
  font-weight: 700;
  display: block;
}

.skin-item-status {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--accent-secondary);
}

.iap-bundles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.iap-card {
  background: linear-gradient(180deg, var(--bg-card-elevated), var(--bg-card));
  border: 1px solid rgba(255, 200, 0, 0.4);
  border-radius: 14px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 3px 0 var(--lip-card);
}

.iap-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--accent-secondary);
}

.iap-card strong {
  display: block;
  font-size: 0.76rem;
}

.iap-card small {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.btn-buy-iap,
.btn-buy-coins {
  background: linear-gradient(180deg, var(--accent-secondary-hi), var(--accent-secondary));
  color: #1a1100;
  border-color: #fff;
  box-shadow: 0 3px 0 var(--lip-gold);
  padding: 6px 10px;
  font-weight: 900;
  font-size: 0.72rem;
  white-space: nowrap;
  text-shadow: none;
}

/* Community UGC Hub Cards, Season Pass & Leaderboard */
.hub-challenge-list,
.sp-tiers-list,
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hub-card {
  background: linear-gradient(180deg, var(--bg-card-elevated), var(--bg-card));
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  padding: 9px 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 0 var(--lip-card);
}

.hub-card strong {
  font-size: 0.82rem;
  color: var(--accent-cyan);
  display: block;
}

.hub-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.hub-hall {
  font-size: 0.68rem;
  color: var(--accent-secondary);
  font-weight: 700;
}

.sp-progress-box {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  padding: 10px;
  margin-bottom: 10px;
}

.sp-level-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.82rem;
}

.sp-tier-row {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
}

.lb-row {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  padding: 8px 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.lb-row.mine {
  border-color: var(--accent-cyan);
  background: rgba(0, 245, 212, 0.16);
}

.share-url-box {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.share-url-box input {
  flex: 1;
  background: #101326;
  border: 1px solid var(--glass-border);
  color: var(--accent-cyan);
  padding: 7px 9px;
  border-radius: 9px;
  font-family: var(--font-thai);
  font-size: 0.74rem;
}

.help-list {
  padding-left: 18px;
  font-size: 0.78rem;
  line-height: 1.48;
  color: #e2e8f0;
  margin-bottom: 12px;
}

.help-list li {
  margin-bottom: 6px;
}

/* Toast Notification */
.toast-container {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}

.toast {
  background: rgba(16, 20, 44, 0.96);
  color: #fff;
  border: 1.5px solid var(--accent-cyan);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  animation: popIn 0.2s ease-out;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Playful, readable game UI. The tool dock occupies layout space outside Canvas. */
:root { --accent-cyan: #a0ebd2; --accent-primary: #ff8caa; --text-muted: #b9c3dc; }
body { background: radial-gradient(ellipse at 30% 10%, #343259, transparent 65%), #13182d; }
.app-shell { max-width: 480px; background: #151c33; }
.top-bar { background: #151c33; min-height: 64px; }
.brand-icon { width: 38px; height: 42px; }
.brand-text h1 { font-weight: 700; }
.ver-tag { background: #a0ebd2; color: #253648; font-size: 9px; }
.subtitle { font-size: 11px; color: #b8c9dc; }
.pill-streak { display: none; }
.icon-btn { min-width: 36px; min-height: 36px; }
.control-hint { display: none; }
.stage-container { min-height: 0; background: radial-gradient(ellipse at 50% 40%, #293653, #172039); }
.stage-modal { background: rgba(18,25,46,.76); padding: 14px; }
.lobby-card { border: 1px solid #56627b; border-radius: 24px; background: linear-gradient(155deg,#2d3853,#202a43); box-shadow: 0 12px 36px #0a102844; padding: 18px; }
.lobby-header-compact { text-align: center; }
.badge-viral { background: transparent; border: 0; color: #a0ebd2; font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.hero-mascot { display: block; width: 104px; height: 104px; margin: 8px auto 0; filter: drop-shadow(0 8px 0 #151d3240); transform: rotate(-9deg); }
.lobby-header-compact h2 { margin-top: 6px; font-size: 24px; line-height: 1.25; }
.lobby-tagline { color: #c0cbe1; font-size: 13px; margin: 6px 0 16px; }
.profile-config-row { display: none; }
.submode-selector { gap: 10px; }
.radio-card { padding: 12px; min-height: 108px; border-radius: 17px; background: #303c57; box-shadow: none; }
.radio-card.active { background: #405263; border-color: #a0ebd2; box-shadow: inset 0 0 0 1px #a0ebd2; }
.mode-icon { width: 42px; height: 42px; }
.mode-tag { background: #1e2b45; color: #cfdfed; font-size: 9px; letter-spacing: .08em; }
.radio-card strong { font-size: 15px; }
.radio-card small { font-size: 11px; color: #c0cbe1; }
.drawer-summary { min-height: 44px; }
.drawer-hint { font-size: 10px; }
.btn-primary { background: #ff9caa; color: #292e48; border-color: #ffc7cb; box-shadow: 0 4px 0 #bd647f; text-shadow: none; }
.btn-primary:hover { background: #ffb3bd; }
.btn-glow { animation: none; }
.btn-primary-xl { font-size: 19px; min-height: 54px; margin-top: 10px; }
.text-button { border: 0; background: transparent; color: #c4d1e5; font: inherit; font-size: 12px; padding: 10px 12px; min-height: 42px; cursor: pointer; }
#btnTutorialLobby { display: block; margin: 6px auto 0; }
.bottom-bar { background: #151c33; }
.nav-pill { box-shadow: none; background: #242e48; font-size: 10px; min-height: 38px; }
.phase-banner { background: #19243ad9; border-color: #55617d; max-width: calc(100% - 56px); padding: 8px 10px; }
.phase-title { font-size: 12px; font-weight: 500; }
.phase-tag { color: #a0ebd2; font-size: 11px; }
.timer-circle { background: #344663; border-color: #8296b5; box-shadow: none; width: 46px; height: 46px; }
.interaction-dock { flex: 0 0 auto; padding: 8px 12px 10px; background: #18223a; border-top: 1px solid #41516a; }
.interaction-dock:has(.trap-toolbar.hidden):has(.ugc-controls.hidden) { display: none; }
.trap-toolbar { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.trap-toolbar-label { font-size: 12px; font-weight: 500; color: #eef4fa; margin: 0; }
.trap-description { color: #a0ebd2; font-size: 11px; margin: 2px 0 7px; }
.trap-items, .app-shell[data-phase="ugc_edit"] .trap-items { display: flex; overflow-x: auto; gap: 7px; padding: 0 0 5px; scrollbar-width: thin; }
.trap-chip, .app-shell[data-phase="ugc_edit"] .trap-chip { flex: 0 0 70px; min-height: 68px; padding: 5px 3px; background: #2a3752; box-shadow: none; border-radius: 13px; font-size: 10px; font-weight: 500; }
.trap-chip img { width: 37px; height: 37px; }
.trap-chip.active { background: #37594f; border-color: #a0ebd2; box-shadow: inset 0 0 0 1px #a0ebd2; }
.trap-chip.hidden { display: none; }
.app-shell[data-mode="arena"][data-phase="trap_place"] .trap-chip { flex: 1; }
.app-shell[data-mode="tutorial"] .trap-items { justify-content: center; }
.ugc-controls { margin: 6px 0 0; padding: 8px 0 0; border: 0; border-top: 1px solid #43516c; background: transparent; box-shadow: none; }
.ugc-action-row { grid-template-columns: 1fr 1fr; }
.ugc-action-row button { min-height: 40px; font-size: 12px; }
.ugc-stats-row { flex-wrap: wrap; }
.editor-tools { display: flex; gap: 6px; }
.editor-tools button { flex: 1; min-height: 34px; background: #293750; border: 1px solid #52637c; color: #dbe5f3; border-radius: 9px; font: inherit; font-size: 12px; cursor: pointer; }
.editor-tools .active { background: #a0ebd2; color: #203940; }
.party-bar { padding: 8px 10px; border-radius: 14px; background: #17233bdd; box-shadow: none; min-height: 44px; }
.cooldown-indicator { font-size: 12px; font-weight: 500; }
.app-shell[data-play-style="solo"] .taunt-buttons { display: none; }
.app-shell[data-phase="trap_place"] .party-bar,
.app-shell[data-phase="ready"] .party-bar { display: none !important; }
.app-shell[data-phase="brawl"] .interaction-dock:has(.trap-toolbar.hidden),
.app-shell[data-phase="ready"] .interaction-dock:has(.trap-toolbar.hidden) { display: flex; height: 132px; align-items: center; justify-content: center; }
.app-shell[data-phase="brawl"] .interaction-dock:after,
.app-shell[data-phase="ready"] .interaction-dock:after { content: 'ลากสวนทางที่จะไป แล้วปล่อย\A ลากสั้น = เบา   ·   ลากยาว = แรง'; white-space: pre-line; color: #bccae0; text-align: center; font-size: 13px; line-height: 1.9; }
.app-shell[data-mode="arena"][data-play-style="solo"][data-turn-mode="realtime"][data-phase="brawl"] .interaction-dock:after { content: 'ลากเล็ง = เกมช้าลง · ปล่อยเพื่อดีด\A เส้นเหลือง = บอตกำลังจะพุ่ง'; }
.app-shell[data-phase="ready"] .mode-tabs, .app-shell[data-phase="ready"] .bottom-bar,
.app-shell[data-mode="tutorial"] .mode-tabs, .app-shell[data-mode="tutorial"] .bottom-bar { display: none; }
.app-shell[data-mode="tutorial"] .hud-top-row, .app-shell[data-mode="tutorial"] .party-bar { display: none; }
.tutorial-coach { position: absolute; top: 12px; left: 16px; right: 16px; text-align: center; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tutorial-coach strong { font-size: 19px; }
.tutorial-coach p { font-size: 12px; color: #c4d3e7; }
.tutorial-coach button { pointer-events: auto; }
.step-chip { font-size: 11px; color: #a0ebd2; letter-spacing: .08em; }
.tutorial-coach #btnSkipTutorial { position: absolute; top: -10px; right: -8px; font-size: 10px; }
.app-shell[data-tutorial-step="done"] .tutorial-coach { top: 25%; padding: 22px 15px; background: #263952f5; border: 1px solid #a0ebd2; border-radius: 22px; }
.app-shell[data-tutorial-step="done"] .tutorial-coach strong { font-size: 24px; }
.dialog-actions-triple { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#btnNextRound { grid-column: 1 / -1; grid-row: 1; min-height: 54px; font-size: 19px; }
#btnResultHome { grid-column: 1 / -1; grid-row: 3; background: transparent; border: 0; box-shadow: none; }
.monetization-prompt { margin: 8px 0; }
.btn-ad-reward { background: #293751; color: #c4d1e2; border: 1px solid #4c5a74; box-shadow: none; font-size: 11px; min-height: 38px; }
.ad-badge { background: #465b70; color: #e5f1ff; font-size: 10px; }
.result-card-capture { border: 0; background: #25334d; padding: 16px; }
.result-card-capture h2 { font-size: 21px; }
.result-quote { background: transparent; color: #c4d1e2; font-style: normal; font-size: 12px; }
.hub-sample { display: inline-block; border: 1px solid #5f718b; border-radius: 6px; color: #c2cfe1; padding: 2px 5px; font-size: 10px; margin-bottom: 4px; }
.help-list { font-size: 14px; line-height: 1.65; }
.help-list li { margin: 12px 0; }
.hidden { display: none !important; }
.app-shell[data-play-style="solo"] #realtimeRoomDrawer { display: none; }
.app-shell[data-mode="ugc"] .bottom-bar { display: none; }
.app-shell[data-mode="ugc"] .hud-overlay { padding-top: 6px; }
.app-shell[data-mode="ugc"] .phase-title { font-size: 11px; }
.lobby-card { max-height: 100%; scrollbar-width: thin; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, [role="button"]:focus-visible { outline: 3px solid #c4f7e4; outline-offset: 3px; }
@media (max-height: 740px) {
  .hero-mascot { width: 64px; height: 64px; margin-top: 0; }
  .lobby-card { padding: 12px; }
  .lobby-header-compact h2 { font-size: 21px; }
  .lobby-tagline { margin-bottom: 10px; }
  .radio-card { min-height: 88px; padding: 8px; }
  .mode-icon { width: 30px; height: 30px; }
  .tutorial-coach strong { font-size: 16px; }
}
@media (max-width: 370px) { .stats-pills { gap: 3px; } .brand-text h1 { font-size: 14px; } .pill { padding: 4px 6px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; } }