/* ==========================================================================
   DESIGN SYSTEM & VARIABLES
   ========================================================================== */
:root {
  /* Color Palette - Melnibone Dark Gray & Green Theme */
  --bg-primary: #1b1c21;
  --bg-secondary: #22242b;
  --bg-tertiary: #2a2c35;
  --bg-glass: rgba(34, 36, 43, 0.7);
  --bg-glass-card: rgba(42, 44, 53, 0.45);
  
  --border-light: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(27, 122, 53, 0.5);
  --border-glow: 0 0 15px rgba(27, 122, 53, 0.15);
  
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  
  /* Brand / State Colors */
  --color-accent: #1b7a35; /* Melnibone Green */
  --color-accent-glow: rgba(27, 122, 53, 0.4);
  --color-success: #10b981; /* Emerald */
  --color-danger: #ef4444; /* Rose */
  --color-warning: #f59e0b; /* Amber */
  --color-gold: #d4af37;
  
  /* MTG Mana Colors */
  --mana-w: #f9fafb; /* White */
  --mana-u: #3b82f6; /* Blue */
  --mana-b: #111827; /* Black */
  --mana-r: #ef4444; /* Red */
  --mana-g: #22c55e; /* Green */
  --mana-m: #d97706; /* Multicolored / Gold */
  --mana-c: #9ca3af; /* Colorless */
  
  /* Layout Dimensions */
  --header-height: 56px;
  --nav-height: 64px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  
  /* System Defaults */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Outfit', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   RESET & MOBILE BASE STYLES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* Disable tap highlight on mobile */
}

html, body {
  width: 100%;
  height: 100%;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px; /* Prevents zoom on iOS inputs */
  overflow: hidden; /* App shell doesn't scroll globally, views scroll individually */
  position: fixed; /* Prevents bounce scroll on iOS */
  top: 0;
  left: 0;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: -webkit-fill-available; /* Fill viewport on iOS */
  padding-bottom: var(--safe-area-bottom);
}

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

/* ==========================================================================
   APP HEADER
   ========================================================================== */
.app-header {
  height: var(--header-height);
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  z-index: 100;
  padding: 0 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.5px;
}

.logo-accent {
  color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-accent), #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Icon containers: keep the injected SVG inside its span so it scales with the
   span's size (inline style or sizing class) and stays vertically aligned with
   adjacent text instead of overflowing to its native 24x24. */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}

[data-icon] > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.icon-btn:active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  transform: scale(0.95);
}

#quick-reset-btn {
  display: none; /* Only visible during active game */
}

/* ==========================================================================
   APP SHELL / VIEW ROUTING
   ========================================================================== */
.app-main {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: calc(100vh - var(--header-height) - var(--nav-height) - var(--safe-area-bottom));
}

.app-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px 40px 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.app-view.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 10;
}

/* View Header Details */
.view-header {
  margin-bottom: 24px;
}

.view-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.view-header p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ==========================================================================
   UI COMPONENTS & BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition-normal);
  width: 100%;
  min-height: 48px;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-accent), #4f46e5);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-primary:active {
  transform: scale(0.98);
  filter: brightness(0.9);
}

.btn-glowing {
  position: relative;
  overflow: hidden;
}

.btn-glowing::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.btn-glowing:active::after {
  opacity: 1;
}

.btn-secondary {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
}

.btn-secondary:active {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(0.98);
}

.btn-danger {
  background: linear-gradient(135deg, var(--color-danger), #b91c1c);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

.btn-danger:active {
  transform: scale(0.98);
  filter: brightness(0.9);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.btn-full {
  width: 100%;
}

.btn-label-file {
  cursor: pointer;
}

/* Form Styles */
.input-group {
  margin-bottom: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-group label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.input-group input, .select-input {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text-primary);
  width: 100%;
  transition: var(--transition-fast);
  font-size: 1rem;
}

.select-input option {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.input-group input:focus, .select-input:focus {
  border-color: var(--color-accent);
  background-color: rgba(99, 102, 241, 0.03);
  box-shadow: var(--border-glow);
}

/* Autocomplete Wrappers */
.autocomplete-wrapper {
  position: relative;
  width: 100%;
}

.suggestions-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  max-height: 200px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  display: none;
}

.suggestions-dropdown.active {
  display: block;
  animation: slideDropdown 0.15s cubic-bezier(0, 0, 0.2, 1);
}

@keyframes slideDropdown {
  from { transform: translateY(-5px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.suggestion-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:active, .suggestion-item.highlighted {
  background-color: rgba(99, 102, 241, 0.15);
  color: var(--text-primary);
}

.suggestion-item-art {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  object-fit: cover;
  background-color: var(--bg-secondary);
}

#view-setup {
  display: block;
}

.setup-form {
  display: block;
}

.players-setup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media(min-width: 640px) {
  .players-setup-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.player-setup-card {
  position: relative;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: var(--transition-normal);
  min-height: 250px;
}

.player-setup-card:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--border-glow);
  /* Lift the active card (and its open suggestion dropdown) above sibling cards
     so the commander dropdown is not covered by the next card's background. */
  z-index: 30;
}

.player-setup-card .card-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center 25%;
  opacity: 0.12;
  filter: blur(1px) brightness(0.6);
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--transition-slow), filter var(--transition-slow);
  border-radius: inherit;
}

.player-setup-card.has-commander .card-bg-overlay {
  opacity: 0.35;
  filter: blur(2px) brightness(0.7);
}

.player-setup-card > * {
  position: relative;
  z-index: 2;
}

/* The input group currently being edited must sit above its sibling children
   (the other input group, commander badge) so its dropdown is fully visible. */
.player-setup-card > .input-group:focus-within {
  z-index: 40;
}

.player-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.commander-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.05);
  margin-top: 8px;
  align-self: flex-start;
  display: none;
}

.commander-badge.active {
  display: inline-block;
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

/* ==========================================================================
   SCREEN 2: ACTIVE GAME / LIFE TRACKER
   ========================================================================== */
#view-active {
  padding: 0; /* Fullscreen styling */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.life-tracker-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  background-color: var(--border-light);
  overflow: hidden;
  height: 100%; /* Top bar is hidden in-game; grid uses the full area */
  /* Prevent accidental text selection / long-press callout during fast tapping. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Landscape grid or tablet grid */
@media(min-width: 600px) {
  .life-tracker-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

.player-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  background-color: var(--bg-secondary);
  transition: background-color var(--transition-normal);
}

/* Player Panel Background Card Crop */
.player-panel-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center 25%;
  opacity: 0.25;
  filter: blur(1.5px) brightness(0.4) saturate(1.1);
  pointer-events: none;
  z-index: 0;
}

.player-panel-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Dead/Eliminated player panel overlay styling */
.player-panel.eliminated {
  background-color: rgba(10, 10, 12, 0.9) !important;
}

.player-panel.eliminated .player-panel-bg {
  opacity: 0.05;
  filter: grayscale(100%) blur(5px);
}

.player-panel.eliminated .life-val,
.player-panel.eliminated .player-panel-name {
  color: var(--text-muted);
  text-decoration: line-through;
}

.player-panel.eliminated .skull-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.5rem;
  color: rgba(239, 68, 68, 0.4);
  pointer-events: none;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
  animation: heartbeat 2s infinite;
}

.player-panel.eliminated .skull-overlay span {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
}

@keyframes heartbeat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}

/* Panel Header */
.player-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.player-panel-identity {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.player-panel-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-panel-commander {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.player-panel-companion {
  font-size: 0.68rem;
  color: var(--color-gold);
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Tap-to-edit identity affordance */
.player-edit-trigger {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background-color var(--transition-fast);
}
.player-edit-trigger:hover,
.player-edit-trigger:active {
  background-color: rgba(255, 255, 255, 0.08);
}
.player-edit-pencil {
  display: inline-block;
  width: 12px;
  height: 12px;
  opacity: 0.55;
  vertical-align: baseline;
}
.player-panel-commander .commander-prompt {
  color: var(--color-accent);
  font-style: italic;
}
.player-panel-commander .cmd-amp {
  opacity: 0.6;
  padding: 0 2px;
}

/* In-game identity modal: keep it scrollable on short screens */
#modal-player-edit .modal-content {
  max-height: 90vh;
  overflow-y: auto;
}
#modal-player-edit .input-group { margin-bottom: 0; }
#modal-player-edit .suggestions-dropdown { text-align: left; }

/* Direct-log in-modal player entry rows */
.direct-entry-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.15);
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}
.direct-entry-num {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-accent);
}

.player-panel-stats-pill {
  display: flex;
  gap: 8px;
}

.stats-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.stats-badge.active-tax {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.stats-badge.active-poison {
  border-color: var(--mana-g);
  color: var(--mana-g);
}

/* Panel Main Life Counter Area */
.player-panel-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto 0;
  width: 100%;
}

.life-val-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.life-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.8rem;
  line-height: 1;
  text-shadow: 0 4px 10px rgba(0,0,0,0.5);
  text-align: center;
}

/* Transient running-total of recent life changes, shown right of the number. */
.life-delta {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 8px;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s ease;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.life-delta.show { opacity: 1; }
.life-delta.positive { color: var(--color-success); }
.life-delta.negative { color: var(--color-danger); }

/* Life Adjustment Buttons */
.life-adjust-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
  /* Mobile touch reliability: no 300ms delay / double-tap zoom, no text
     selection or long-press callout when tapping rapidly. */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.life-adjust-btn:active {
  transform: scale(0.85);
  background: rgba(255, 255, 255, 0.15);
}

/* Panel Footer Controls Drawer Toggle */
.player-panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.drawer-toggle {
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-fast);
}

.drawer-toggle:active {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

/* Multi-Counter Drawer Panel — full-screen overlay covering the whole game
   screen, opened from a player's "Zähler" button. */
.drawer-content {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-tertiary);
  z-index: 1000;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -5px 25px rgba(0,0,0,0.6);
  visibility: hidden;
}

.drawer-content.active {
  transform: translateY(0);
  visibility: visible;
}

/* Orient the counter overlay to the player's seat so it opens facing the same
   direction as their playfield. */
.drawer-content.drawer-180 {
  transform: rotate(180deg) translateY(120%);
}
.drawer-content.drawer-180.active {
  transform: rotate(180deg);
}

/* Sideways (90°) seat: swap width/height so the rotated overlay still fills the
   screen, then rotate -90° to match the seat. */
.drawer-content.drawer-cw {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vw;
  transform: translate(-50%, -50%) rotate(-90deg) translateY(120%);
}
.drawer-content.drawer-cw.active {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
}

.drawer-header h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-accent);
}

.drawer-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox: hide scrollbar */
  /* Multi-column so 4-player commander-damage lists don't require scrolling.
     Columns keep a fixed max width and the whole block is centered in the
     overlay both horizontally and vertically. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
  grid-auto-rows: min-content;
  justify-content: center;        /* horizontal centering of the columns */
  align-content: safe center;     /* vertical centering; falls back to top if it overflows */
  gap: 10px;
  padding-bottom: 8px;
}

/* Section headings span the full width of the grid. */
.drawer-scroll h4 {
  grid-column: 1 / -1;
  margin: 4px 0 0 0 !important;
  text-align: center;
}

.drawer-scroll::-webkit-scrollbar {
  display: none; /* WebKit: hide scrollbar */
}

.counter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.03);
}

.counter-row-label {
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
}

.counter-row-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.counter-adjust {
  display: flex;
  align-items: center;
  gap: 12px;
}

.counter-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  width: 24px;
  text-align: center;
}

.counter-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.counter-btn:active {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(0.9);
}

.active-game-footer {
  padding: 8px 16px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  height: 64px;
  display: flex;
  align-items: center;
}

/* ==========================================================================
   SCREEN 3: GAME HISTORY
   ========================================================================== */
.history-controls {
  margin-bottom: 16px;
}

.search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-bar input {
  padding-left: 44px;
  background-color: var(--bg-secondary);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--transition-normal);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  position: relative;
}

.history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

/* Left column: date on top, duration below. */
.history-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  flex: 0 0 auto;
}
.history-card-date {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Right column: season (league) on top, winner below — right aligned. */
.history-card-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.history-card-league-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winner-badge { flex: 0 0 auto; }

.history-card-meta .icon-calendar {
  width: 14px;
  height: 14px;
}

.winner-badge {
  background: rgba(212, 175, 55, 0.15);
  color: var(--color-gold);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-shadow: 0 0 5px rgba(212, 175, 55, 0.2);
}

.history-players-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-player-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  border-left: 3px solid transparent;
}

.history-player-row.is-winner {
  border-left-color: var(--color-gold);
  background: rgba(212, 175, 55, 0.03);
}

.history-player-info {
  display: flex;
  flex-direction: column;
}

.history-player-name {
  font-weight: 600;
}

.history-player-points {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-gold);
}

.history-player-commander {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.history-player-stats {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: right;
  display: flex;
  flex-direction: column;
}

.history-player-stats .elim-label {
  font-size: 0.7rem;
  color: var(--color-danger);
  font-weight: 600;
}

.history-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 10px;
  margin-top: 4px;
}

/* Game pending admin validation */
/* Not-yet-validated games stand out with an amber border + subtle tint. */
.history-card.is-pending {
  border-color: rgba(245, 158, 11, 0.45);
  background-color: rgba(245, 158, 11, 0.06);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(245, 158, 11, 0.12);
}

.history-card-pending-badge {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-shadow: 0 0 5px rgba(245, 158, 11, 0.15);
}

.history-card-pending-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
}

.btn-validate-game {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-fast);
  margin-right: auto;
}

.btn-validate-game:active {
  background: rgba(34, 197, 94, 0.22);
}

.btn-delete-game {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.08);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-fast);
}

.btn-delete-game:active {
  background: rgba(239, 68, 68, 0.2);
}

.btn-edit-match {
  color: var(--color-accent);
  background: rgba(99, 102, 241, 0.12);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-fast);
  margin-left: auto;
}

.btn-edit-match:active {
  background: rgba(99, 102, 241, 0.24);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
}

.empty-icon {
  margin-bottom: 16px;
  width: 48px;
  height: 48px;
  color: var(--text-muted);
}

.empty-state h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.empty-state p {
  font-size: 0.85rem;
}

/* ==========================================================================
   SCREEN 4: STATISTICS
   ========================================================================== */
.stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.summary-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.summary-val {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-accent);
}

.summary-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.stats-section-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  margin-bottom: 20px;
}

.stats-section-card h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.leaderboard-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(168, 85, 247, 0.2);
  transform: translateX(4px);
  box-shadow: -4px 0 12px -2px rgba(168, 85, 247, 0.15);
}

.leaderboard-rank-info {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 60%;
  flex: 1;
  min-width: 0;
}

.rank-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--bg-tertiary);
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Top-3 highlight: medal-coloured rank badge, left accent & subtle tint. */
.leaderboard-item.rank-1 {
  border-left: 3px solid var(--color-gold);
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.14), rgba(255, 255, 255, 0.02) 55%);
}
.leaderboard-item.rank-2 {
  border-left: 3px solid #c4ccd6;
  background: linear-gradient(90deg, rgba(196, 204, 214, 0.12), rgba(255, 255, 255, 0.02) 55%);
}
.leaderboard-item.rank-3 {
  border-left: 3px solid #cd7f32;
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.14), rgba(255, 255, 255, 0.02) 55%);
}

.leaderboard-item.rank-1 .rank-badge {
  background-color: var(--color-gold);
  color: #1b1c21;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
}
.leaderboard-item.rank-2 .rank-badge {
  background-color: #c4ccd6;
  color: #1b1c21;
}
.leaderboard-item.rank-3 .rank-badge {
  background-color: #cd7f32;
  color: #1b1c21;
}

.rank-medal {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}

.leaderboard-item-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.leaderboard-item-name {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-item-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.leaderboard-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  min-width: 75px;
}

.leaderboard-pct {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-success);
}

.leaderboard-ratio {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* XP Column and Badge Styling */
.leaderboard-xp-col {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.xp-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.15);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.xp-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.leaderboard-item:hover .xp-badge {
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.4), inset 0 0 4px rgba(168, 85, 247, 0.2);
  transform: scale(1.08) rotate(2deg);
}

.xp-badge .xp-val {
  font-family: 'Outfit', var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #f3e8ff; /* extremely light purple */
  text-shadow: 0 0 5px rgba(168, 85, 247, 0.6);
  line-height: 1;
  margin-top: 1px;
}

.xp-badge .xp-lbl {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c084fc; /* purple accent */
  line-height: 1;
  margin-top: 2px;
}

/* Color Distribution styling */
.color-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.color-bar-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}

.color-dot.W { background-color: #f6f6f6; box-shadow: 0 0 8px #fff; }
.color-dot.U { background-color: #3b82f6; box-shadow: 0 0 8px #3b82f6; }
.color-dot.B { background-color: #1a1a1a; box-shadow: 0 0 8px #000; border-color: #444; }
.color-dot.R { background-color: #ef4444; box-shadow: 0 0 8px #ef4444; }
.color-dot.G { background-color: #22c55e; box-shadow: 0 0 8px #22c55e; }
.color-dot.C { background-color: #7c8594; box-shadow: 0 0 8px #7c8594; }

.color-bar-label {
  font-size: 0.85rem;
  width: 50px;
  font-weight: 500;
}

.color-bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.color-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease-out;
}

.color-bar-val {
  font-size: 0.85rem;
  font-weight: 600;
  width: 28px;
  text-align: right;
}

/* ==========================================================================
   SCREEN 5: SETTINGS
   ========================================================================== */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-card h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
}

.settings-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 14px;
  border-radius: var(--radius-md);
}

.setting-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.setting-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.setting-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.settings-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.border-danger {
  border-color: rgba(239, 68, 68, 0.2);
}

.text-danger {
  color: var(--color-danger);
}

/* ==========================================================================
   BOTTOM NAVIGATION BAR
   ========================================================================== */
.app-bottom-nav {
  height: var(--nav-height);
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
  padding-bottom: var(--safe-area-bottom);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  color: var(--text-secondary);
  gap: 4px;
  transition: var(--transition-fast);
}

.nav-item.active {
  color: var(--color-accent);
}

.nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon svg {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-item.active .nav-icon svg {
  transform: scale(1.1) translateY(-2px);
  filter: drop-shadow(0 0 6px var(--color-accent-glow));
}

.nav-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   MODAL WINDOWS & TOASTS
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  padding: 20px;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 24px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.6);
  transform: scale(0.95);
  transition: transform var(--transition-normal);
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

/* Glassmorphism utility */
.modal-content.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.08);
}

.modal-content h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
}

.modal-content p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
  margin-top: -8px;
}

.modal-winner-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}

.winner-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.winner-option:active {
  background-color: rgba(255, 255, 255, 0.07);
}

.winner-option.selected {
  border-color: var(--color-gold);
  background-color: rgba(212, 175, 55, 0.1);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
}

.winner-option-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.winner-option.selected .winner-option-radio {
  border-color: var(--color-gold);
}

.winner-option.selected .winner-option-radio::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-gold);
}

.winner-option-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.winner-option-name {
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.winner-option-commander {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.modal-actions .btn {
  flex: 1;
}

/* TOASTS */
.toast-container {
  position: fixed;
  bottom: calc(var(--nav-height) + 16px + var(--safe-area-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
  width: 90%;
  max-width: 320px;
  pointer-events: none;
}

.toast {
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), toastOut 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.7s forwards;
}

.toast.toast-success {
  border-left: 4px solid var(--color-success);
}

.toast.toast-error {
  border-left: 4px solid var(--color-danger);
}

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

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

/* Tooltip (mainly for desktop screens simulated fallback) */
.tooltip {
  position: relative;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   MULTIPLAYER SYNC & VARIABLE PLAYER GRID STYLES
   ========================================================================== */

/* Fullscreen Active Game Mode */
body.in-game .app-header,
body.in-game .app-bottom-nav {
  display: none !important;
}

body.in-game .app-main {
  height: 100vh !important;
  height: -webkit-fill-available !important;
}

body.in-game #view-active {
  padding: 0 !important;
}

/* Compact Active Game Status Bar */
.active-game-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  padding: 0 16px;
  height: 38px;
  min-height: 38px;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* The top bar is replaced in-game by the central menu button. */
body.in-game .active-game-bar { display: none; }

/* Central menu button — placed where all playfields meet. */
.center-menu-btn {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent; /* invisible circle — only the gear is shown */
  border: none;
  box-shadow: none;
  /* Slightly darker gold than --color-gold */
  color: #b8901f;
  align-items: center;
  justify-content: center;
  z-index: 60;
  /* Subtle shadow so the icon stays legible over any panel art */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
  transition: transform var(--transition-fast);
}
body.in-game .center-menu-btn { display: flex; }
.center-menu-btn:active { transform: translate(-50%, -50%) scale(0.9); }
.center-menu-btn span[data-icon],
.center-menu-btn svg { width: 34px; height: 34px; }

/* Game-menu overlay: wide & short so it fits landscape without scrolling. */
.game-menu-content {
  max-width: 560px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
}
.game-menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.game-menu-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.game-menu-head-text h2 { text-align: left; }
.game-menu-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
/* PIN badge on the right of the header */
.game-menu-pin-badge {
  flex-shrink: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  padding: 6px 14px;
  border-radius: 14px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.game-menu-pin-badge strong {
  color: var(--color-gold);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 1px;
  margin-left: 4px;
}
/* Buttons in a 2-column grid to keep the overlay short. */
.modal-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-actions-grid .btn { margin: 0; }
@media (max-width: 480px) {
  .modal-actions-grid { grid-template-columns: 1fr; }
}

.active-pin-badge {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.active-pin-badge strong {
  color: var(--color-gold);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.5px;
}

.active-game-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Active Game List & PIN inputs in Setup Screen */
.active-games-panel {
  transition: padding 0.3s ease, margin 0.3s ease;
}

.active-games-panel.collapsed {
  padding-bottom: 12px;
}

.active-games-panel h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
  transition: margin-bottom 0.3s ease, border-bottom-color 0.3s ease;
}

.active-games-panel.collapsed h2 {
  margin-bottom: 0;
  border-bottom-color: rgba(255, 255, 255, 0);
}

.panel-collapsible-content {
  max-height: 400px;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 1;
}

.active-games-panel.collapsed .panel-collapsible-content {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.active-games-panel.collapsed #active-games-toggle-icon {
  transform: rotate(-90deg);
}

.active-games-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}

.active-game-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: var(--transition-fast);
}

.active-game-item:active {
  background: rgba(255, 255, 255, 0.06);
}

.active-game-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.active-game-item-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.active-game-item-players {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
}

.active-game-item-action {
  flex-shrink: 0;
}

.join-pin-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}

.join-pin-row input {
  flex: 1;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 1.1rem;
}

.empty-list-text {
  text-align: center;
  font-size: 0.85rem;
  padding: 20px;
}

/* Dynamic Grid layouts for variable player count */
.life-tracker-grid.grid-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

/* 3 players: P1 (top-left, rotated 180°) faces P3 (bottom-left, upright);
   P2 sits sideways in the full-height right column. */
.life-tracker-grid.grid-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.life-tracker-grid.grid-3 .player-panel:nth-child(1) { grid-column: 1; grid-row: 1; }
.life-tracker-grid.grid-3 .player-panel:nth-child(3) { grid-column: 1; grid-row: 2; }
.life-tracker-grid.grid-3 .player-panel:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }

.life-tracker-grid.grid-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.life-tracker-grid.grid-5 {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
}

.life-tracker-grid.grid-5 .player-panel:nth-child(1),
.life-tracker-grid.grid-5 .player-panel:nth-child(2),
.life-tracker-grid.grid-5 .player-panel:nth-child(3) {
  grid-column: span 2;
}

.life-tracker-grid.grid-5 .player-panel:nth-child(4),
.life-tracker-grid.grid-5 .player-panel:nth-child(5) {
  grid-column: span 3;
}

.life-tracker-grid.grid-6 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* Individual Panel Rotation Support */
.player-panel.rotated .player-panel-content,
.player-panel.rotated .player-panel-bg {
  transform: rotate(180deg);
}
/* Sideways seat (e.g. P2 in 3-player mode) — JS (applySidewaysSeats) sets the
   final sized transform; this is just the pre-paint fallback. */
.player-panel.rotated-cw .player-panel-content,
.player-panel.rotated-cw .player-panel-bg {
  transform: rotate(-90deg);
}

/* Random starting-player picker overlay */
.dice-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 11, 15, 0.96);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.dice-overlay.active { display: flex; }
.dice-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.dice-spinner {
  width: 64px;
  height: 64px;
  color: var(--color-gold);
  animation: diceSpin 0.55s linear infinite;
}
.dice-overlay.result .dice-spinner {
  animation: none;
  color: var(--color-success);
  transform: scale(1.1);
}
.dice-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  min-height: 1.2em;
  word-break: break-word;
}
.dice-overlay.result .dice-name {
  color: var(--color-gold);
  animation: dicePop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.dice-label {
  font-size: 1rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.dice-overlay.result .dice-label {
  color: var(--color-gold);
  font-weight: 700;
}
.dice-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
}
.dice-overlay.result .dice-hint { opacity: 1; }
@keyframes diceSpin { to { transform: rotate(360deg); } }
@keyframes dicePop { 0% { transform: scale(0.55); } 100% { transform: scale(1); } }

/* Rotate-to-landscape prompt — only while an active game is open in portrait. */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-primary);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
@media (orientation: portrait) {
  body.in-game #rotate-overlay { display: flex; }
}
.rotate-overlay-inner {
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.rotate-overlay-icon {
  width: 64px;
  height: 64px;
  color: var(--color-accent);
  animation: rotateHint 2.2s ease-in-out infinite;
}
.rotate-overlay-inner h2 { font-family: var(--font-display); font-size: 1.5rem; }
.rotate-overlay-inner p { color: var(--text-secondary); font-size: 0.95rem; }
@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
/* The counter overlay is a full-screen, device-oriented panel and must not
   inherit the seat rotation, so no override is needed here. */

/* Active Game Status Bar Menu Button */
.active-menu-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  transition: var(--transition-fast);
  cursor: pointer;
}

.active-menu-btn:active {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  transform: scale(0.95);
}

/* Rotation Button styling */
.rotate-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

.rotate-btn:active {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(0.9) rotate(90deg);
}

/* ==========================================================================
   LEAGUES MANAGER STYLES (SETTINGS CARD)
   ========================================================================== */
.leagues-manager-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.league-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: var(--transition-normal);
}

.league-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(168, 85, 247, 0.2);
}

.league-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.league-item-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.league-item-dates {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.league-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.league-item-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  transition: var(--transition-fast);
  cursor: pointer;
}

.league-item-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  transform: scale(1.05);
}

.league-item-btn.btn-delete:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
  border-color: rgba(239, 68, 68, 0.25);
}

/* History Card League Badge */
.history-card-league-badge {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.25);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  text-shadow: 0 0 5px rgba(168, 85, 247, 0.15);
}

/* Setup Settings Row (Player Count & League Select) */
.setup-settings-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.setup-settings-row .setting-item {
  flex: 1;
  margin-bottom: 0;
  min-width: 0;
}

@media (max-width: 600px) {
  .setup-settings-row {
    flex-direction: column;
    gap: 12px;
  }
}

/* Admin Edit Player Stats Button */
.btn-edit-player-stats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  color: var(--color-accent);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s, color 0.2s;
  border-radius: 4px;
  vertical-align: middle;
}

.btn-edit-player-stats:hover {
  opacity: 1;
  color: var(--color-accent-hover, #c084fc);
  transform: scale(1.15) rotate(30deg);
  background: rgba(168, 85, 247, 0.15);
}

.btn-edit-player-stats span {
  display: inline-block;
  pointer-events: none;
}

/* Reorder players (seating order) modal */
.reorder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 20px 0;
  max-height: 50vh;
  overflow-y: auto;
}

.reorder-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}

.reorder-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.reorder-item-pos {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  color: var(--color-gold);
  font-weight: 700;
  font-size: 0.8rem;
}

.reorder-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.reorder-item-name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reorder-item-commander {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reorder-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.reorder-move {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.reorder-move:active {
  background: rgba(255, 255, 255, 0.14);
}

.reorder-move:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Collapsible settings sections (accordion) */
.settings-card.collapsible > h2 {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
}

.settings-card.collapsible > h2::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg); /* expanded: caret points down */
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-right: 4px;
}

.settings-card.collapsed > h2::after {
  transform: rotate(-45deg); /* collapsed: caret points right */
}

.settings-card-body {
  margin-top: 14px;
}

.settings-card.collapsed > .settings-card-body {
  display: none;
}