/* ─── RESET & BASE ──────────────────────────────────────────────────────── */

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

/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────── */

:root {
  --bg-deep:        #070a0f;
  --bg-panel:       #0c1117;
  --bg-card:        #101820;
  --bg-hover:       #152030;
  --bg-selected:    #0e1f10;

  --gold-bright:    #c8a84b;
  --gold-light:     #eedfa0;
  --gold-dark:      #7a5c1e;
  --gold-dim:       #3a2c0e;

  --blue-bright:    #1e90ff;
  --blue-dim:       #061832;
  --red-bright:     #e03030;
  --red-dim:        #200808;

  --border-selected: #3a7a3a;
  --bg-selected-border: #3a7a3a;

  --text-primary:   #ddd4c0;
  --text-secondary: #7a6a50;
  --text-muted:     #3a3020;

  --font-title: 'Cinzel', 'Georgia', serif;
  --font-body:  'Inter', 'Segoe UI', system-ui, sans-serif;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

/* ─── BODY ──────────────────────────────────────────────────────────────── */

body {
  background-color: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ─── UTILITY ───────────────────────────────────────────────────────────── */

.hidden {
  display: none !important;
}

/* ─── FETCH WARNING BANNER ──────────────────────────────────────────────── */

.fetch-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: #1a1000;
  border-bottom: 1px solid #7a5000;
  color: #c8880a;
  font-size: 13px;
}

.fetch-warning code {
  background: #2a1800;
  padding: 1px 6px;
  border-radius: 3px;
}

.fetch-warning button {
  background: none;
  border: none;
  color: #c8880a;
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  flex-shrink: 0;
}

/* ─── HEADER ─────────────────────────────────────────────────────────────── */

.app-header {
  padding: 28px 20px 20px;
  text-align: center;
}

.header-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), var(--gold-bright), var(--gold-dark), transparent);
  margin: 10px 0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 0;
}

.header-sword {
  font-size: 22px;
  opacity: 0.7;
}

.app-title {
  font-family: var(--font-title);
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold-bright);
  text-shadow: 0 0 30px rgba(200, 168, 75, 0.4);
}

/* ─── MAIN LAYOUT ───────────────────────────────────────────────────────── */

.app-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─── PANELS ─────────────────────────────────────────────────────────────── */

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.panel-title {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 6px;
}

.panel-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* ─── PLAYER LIST ───────────────────────────────────────────────────────── */

.player-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.loading-state {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-secondary);
  padding: 30px;
  font-size: 14px;
}

/* ─── PLAYER CARD ───────────────────────────────────────────────────────── */

.player-card {
  background: var(--bg-card);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  user-select: none;
  position: relative;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.player-card:hover {
  background: var(--bg-hover);
  border-color: var(--gold-dark);
  transform: translateY(-2px);
}

.player-card.selected {
  background: var(--bg-selected);
  border-color: var(--border-selected);
  box-shadow: 0 0 10px rgba(58, 122, 58, 0.25);
}

.player-card.selected::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 9px;
  color: var(--border-selected);
  font-size: 13px;
  font-weight: 700;
}

.player-name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.3;
}

/* ─── SELECTION ACTIONS ─────────────────────────────────────────────────── */

.selection-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.selection-buttons {
  display: flex;
  gap: 8px;
}

.selection-count {
  font-size: 13px;
  color: var(--text-secondary);
}

.selection-count span {
  color: var(--gold-bright);
  font-weight: 600;
}

/* ─── OPTIONS PANEL ─────────────────────────────────────────────────────── */

.panel-options {
  padding: 20px 24px;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 8px;
}

.toggle-input {
  display: none;
}

.toggle-switch {
  width: 44px;
  height: 24px;
  background: var(--gold-dim);
  border-radius: 12px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--text-secondary);
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s, background 0.2s;
}

.toggle-input:checked + .toggle-switch {
  background: var(--gold-dark);
}

.toggle-input:checked + .toggle-switch::after {
  transform: translateX(20px);
  background: var(--gold-bright);
}

.toggle-text {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.toggle-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 56px;
}

/* ─── BUTTONS ─────────────────────────────────────────────────────────────── */

.btn {
  font-family: var(--font-body);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:active {
  transform: translateY(1px) !important;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--text-secondary);
  padding: 7px 14px;
}

.btn-ghost:hover {
  border-color: var(--gold-dark);
  color: var(--gold-bright);
  background: var(--gold-dim);
}

.btn-sm {
  font-size: 13px;
  padding: 5px 12px;
}

/* ─── ACTION CENTER ─────────────────────────────────────────────────────── */

.action-center {
  text-align: center;
  padding: 8px 0;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-bright) 50%, var(--gold-dark) 100%);
  color: #0a0800;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 16px 44px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gold-bright);
  box-shadow: 0 0 20px rgba(200, 168, 75, 0.2);
  transition: all 0.2s;
}

.btn-primary:hover {
  box-shadow: 0 0 35px rgba(200, 168, 75, 0.5);
  transform: translateY(-3px);
}

.btn-primary.shake {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* ─── ERROR MESSAGE ─────────────────────────────────────────────────────── */

.error-msg {
  background: #200808;
  border: 1px solid #7a1010;
  color: #e06060;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: 12px;
  display: inline-block;
}

/* ─── RESULT SECTION ────────────────────────────────────────────────────── */

.result-section {
  background: var(--bg-panel);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.odd-warning {
  background: #1a1000;
  border: 1px solid #5a3800;
  color: #b07820;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ─── TEAMS CONTAINER ───────────────────────────────────────────────────── */

.teams-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: start;
}

/* ─── TEAM CARD ─────────────────────────────────────────────────────────── */

.team-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--gold-dim);
  animation: slideUp 0.4s ease both;
}

#team-red {
  animation-delay: 0.12s;
}

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

.team-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
}

.team-header--blue {
  background: var(--blue-dim);
  border-bottom: 1px solid rgba(30, 144, 255, 0.3);
}

.team-header--red {
  background: var(--red-dim);
  border-bottom: 1px solid rgba(224, 48, 48, 0.3);
}

.team-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.team-dot--blue {
  background: var(--blue-bright);
  box-shadow: 0 0 8px var(--blue-bright);
}

.team-dot--red {
  background: var(--red-bright);
  box-shadow: 0 0 8px var(--red-bright);
}

.team-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold-light);
}

/* ─── TEAM PLAYER LIST ──────────────────────────────────────────────────── */

.team-player-list {
  list-style: none;
  background: var(--bg-card);
}

.team-player-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--bg-deep);
  animation: fadeIn 0.3s ease both;
  opacity: 0;
}

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

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.player-label {
  font-size: 14px;
  color: var(--text-primary);
}

/* ─── POSITION BADGES ───────────────────────────────────────────────────── */

.position-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}

.pos-top {
  background: #1a2e0c;
  color: #80cc44;
  border: 1px solid #3a5c1a;
}

.pos-jungle {
  background: #0c2418;
  color: #44cc88;
  border: 1px solid #1a5c38;
}

.pos-mid {
  background: #0c1a30;
  color: #4488e0;
  border: 1px solid #1a3860;
}

.pos-adc {
  background: #2e0c0c;
  color: #e06060;
  border: 1px solid #5c1a1a;
}

.pos-support {
  background: #1e0c2e;
  color: #9960e0;
  border: 1px solid #3c1a5c;
}

/* ─── VS DIVIDER ────────────────────────────────────────────────────────── */

.vs-divider {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-bright);
  text-shadow: 0 0 20px rgba(200, 168, 75, 0.5);
  padding-top: 56px;
  letter-spacing: 2px;
  text-align: center;
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */

.app-footer {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 12px;
  border-top: 1px solid var(--gold-dim);
}

.app-footer code {
  color: var(--text-secondary);
  background: var(--bg-panel);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (max-width: 580px) {
  .teams-container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .vs-divider {
    padding: 14px 0;
    border-top: 1px solid var(--gold-dim);
    border-bottom: 1px solid var(--gold-dim);
    margin: 0;
  }

  .player-list {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .btn-primary {
    padding: 14px 28px;
    font-size: 14px;
  }
}