/* Тема Dracula: https://draculatheme.com */
:root {
  --dracula-bg: #282a36;
  --dracula-current: #44475a;
  --dracula-fg: #f8f8f2;
  --dracula-comment: #6272a4;
  --dracula-cyan: #8be9fd;
  --dracula-green: #50fa7b;
  --dracula-orange: #ffb86c;
  --dracula-pink: #ff79c6;
  --dracula-purple: #bd93f9;
  --dracula-red: #ff5555;
  --dracula-yellow: #f1fa8c;

  --grass: #44475a;
  --grass-light: #6272a4;
  --grass-dark: #282a36;
  --accent: #bd93f9;
  --accent-glow: rgba(189, 147, 249, 0.28);
  --accent2: #f1fa8c;
  --white: #f8f8f2;
  --card-bg: rgba(40, 42, 54, 0.94);
  --border: rgba(189, 147, 249, 0.32);
  --btn-on-accent: #282a36;
}

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

body {
  font-family: 'Roboto Condensed', sans-serif;
  background: var(--grass-dark);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(189, 147, 249, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 121, 198, 0.08) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(98, 114, 164, 0.04) 60px, rgba(98, 114, 164, 0.04) 61px),
    repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(98, 114, 164, 0.03) 60px, rgba(98, 114, 164, 0.03) 61px),
    linear-gradient(160deg, #1e1f29 0%, #282a36 50%, #1e1f29 100%);
  z-index: -1;
}

/* ===== LOGIN SCREEN ===== */
#login-screen {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #1e1f29 0%, #282a36 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.login-box {
  background: rgba(68, 71, 90, 0.85);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 40px;
  width: 100%; max-width: 380px;
  text-align: center;
  box-shadow: 0 0 60px rgba(189, 147, 249, 0.15);
  backdrop-filter: blur(10px);
}
.login-ball { font-size: 3rem; margin-bottom: 16px; animation: spin 8s linear infinite; display: block; }
.login-title { font-family: 'Oswald', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--accent); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 6px; }
.login-sub { color: rgba(255,255,255,0.35); font-size: 0.85rem; margin-bottom: 28px; letter-spacing: 1px; }
.login-input {
  width: 100%;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid rgba(189, 147, 249, 0.25);
  border-radius: 8px;
  color: var(--white);
  padding: 13px 16px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1rem; text-align: center; letter-spacing: 3px;
  margin-bottom: 14px; transition: border-color .2s;
}
.login-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.login-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--dracula-purple), #7b68c9);
  color: var(--btn-on-accent); border: none; border-radius: 8px; padding: 13px;
  font-family: 'Oswald', sans-serif; font-size: 1rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all .2s;
}
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--accent-glow); }
.login-error {
  background: rgba(231,76,60,0.15); border: 1px solid rgba(231,76,60,0.4);
  border-radius: 6px; padding: 8px 12px; font-size: 0.85rem;
  color: #ff8a80; margin-top: 10px; display: none;
}

/* ===== HEADER ===== */
.app-header {
  background: linear-gradient(90deg, #1e1f29, #282a36, #1e1f29);
  border-bottom: 1.5px solid var(--accent);
  padding: 13px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  box-shadow: 0 2px 20px rgba(189, 147, 249, 0.12);
}
.header-left { display: flex; align-items: center; gap: 12px; }
.app-header h1 { font-family: 'Oswald', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; }
.ball-icon { font-size: 1.7rem; animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.logout-btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.35); border-radius: 6px; padding: 5px 11px;
  font-size: 0.72rem; font-family: 'Oswald', sans-serif; letter-spacing: 1px; cursor: pointer; transition: all .2s;
}
.logout-btn:hover { color: #ff8a80; border-color: rgba(231,76,60,0.4); }

/* ===== STEP BAR ===== */
.steps-bar {
  display: flex; background: rgba(0,0,0,0.5);
  border-bottom: 1px solid var(--border); overflow-x: auto;
}
.step-item {
  flex: 1; min-width: 90px; padding: 8px 6px; text-align: center;
  font-family: 'Oswald', sans-serif; font-size: 0.67rem; letter-spacing: 1px;
  color: rgba(255,255,255,0.28); border-right: 1px solid var(--border); transition: all .3s;
}
.step-item.active { color: var(--accent); background: rgba(189, 147, 249, 0.1); }
.step-item.done { color: var(--dracula-green); }
.step-item .step-num { display: block; font-size: 1.05rem; font-weight: 700; }

/* ===== PANELS ===== */
.panel { display: none; padding: 18px; animation: fadeIn .3s ease; }
.panel.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; } }

.card-field {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px; backdrop-filter: blur(8px);
  margin-bottom: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.section-title {
  font-family: 'Oswald', sans-serif; font-size: 0.95rem;
  color: var(--accent); letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 12px; display: flex; align-items: center; gap: 7px;
}

/* ===== BUTTONS ===== */
.opt-btn {
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.11);
  color: var(--white); border-radius: 8px; padding: 9px 18px;
  font-family: 'Oswald', sans-serif; font-size: 0.95rem; letter-spacing: 1px;
  cursor: pointer; transition: all .2s; min-width: 55px; text-align: center;
}
.opt-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.opt-btn.selected { background: var(--accent); color: var(--btn-on-accent); border-color: var(--accent); font-weight: 700; }

.btn-grass {
  background: linear-gradient(135deg, var(--grass-light), var(--grass));
  color: var(--white); border: 1px solid rgba(189, 147, 249, 0.22);
  border-radius: 8px; padding: 10px 22px;
  font-family: 'Oswald', sans-serif; font-size: 0.92rem;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all .2s;
}
.btn-grass:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(189, 147, 249, 0.2); }

.btn-accent {
  background: linear-gradient(135deg, var(--dracula-purple), #9d7ed8);
  color: var(--btn-on-accent); border: none; border-radius: 8px; padding: 10px 24px;
  font-family: 'Oswald', sans-serif; font-size: 0.92rem;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  font-weight: 700; transition: all .2s; box-shadow: 0 4px 14px rgba(189, 147, 249, 0.25);
}
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(189, 147, 249, 0.4); }

/* ===== PLAYER CHIPS ===== */
.player-input-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.player-chip {
  background: rgba(189, 147, 249, 0.08); border: 1px solid rgba(189, 147, 249, 0.22);
  border-radius: 20px; padding: 4px 11px; font-size: 0.8rem;
  display: flex; align-items: center; gap: 5px;
}
.remove-btn { background:none; border:none; color:inherit; cursor:pointer; opacity:.4; font-size:.8rem; padding:0; line-height:1; }
.remove-btn:hover { opacity:1; }

.field-input {
  background: rgba(0,0,0,0.35); border: 1.5px solid rgba(189, 147, 249, 0.2);
  border-radius: 8px; color: var(--white); padding: 9px 13px;
  font-family: 'Roboto Condensed', sans-serif; font-size: 0.93rem;
  transition: border-color .2s; width: 100%;
}
.field-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 8px var(--accent-glow); }
.field-input::placeholder { color:rgba(255,255,255,0.22); }

/* ===== DICE ===== */
.dice-wrap { text-align:center; padding:14px; }
.dice { font-size:4.2rem; cursor:pointer; display:inline-block; transition:transform .1s; filter:drop-shadow(0 0 14px var(--accent-glow)); user-select:none; }
.dice:hover { transform:scale(1.07); }
.dice.rolling { animation:diceRoll 0.6s ease; }
@keyframes diceRoll {
  0%{transform:rotate(0deg) scale(1);} 25%{transform:rotate(90deg) scale(1.2);}
  50%{transform:rotate(180deg) scale(0.9);} 75%{transform:rotate(270deg) scale(1.1);}
  100%{transform:rotate(360deg) scale(1);}
}

/* ===== PICK PATTERN ===== */
.pattern-preset {
  padding: 5px 11px; border-radius: 6px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.45);
  cursor: pointer; font-family: 'Oswald', sans-serif; font-size: 0.76rem;
  letter-spacing: 1px; transition: all .2s; white-space: nowrap;
}
.pattern-preset:hover, .pattern-preset.selected { border-color:var(--accent); color:var(--accent); background:rgba(189, 147, 249, 0.1); }

.pick-sequence-vis { display:flex; flex-wrap:wrap; gap:4px; }
.psv-item {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:.8rem; font-weight:700;
  border:2px solid; transition:all .3s;
}
.psv-item.current { transform:scale(1.28); box-shadow:0 0 10px currentColor; }
.psv-item.done-pick { opacity:.28; }

/* ===== TURN BANNER ===== */
.turn-banner {
  border: 1.5px solid var(--accent);
  border-radius: 12px; padding: 13px 18px; margin-bottom: 13px;
  display: flex; align-items: center; gap: 14px;
  animation: pulse-border 2s infinite;
}
@keyframes pulse-border {
  0%,100%{box-shadow:0 0 14px rgba(189, 147, 249, 0.12);}
  50%{box-shadow:0 0 28px rgba(189, 147, 249, 0.3);}
}
.turn-team-color { width:10px; height:38px; border-radius:4px; flex-shrink:0; }
.turn-info { flex:1; }
.turn-label { font-family:'Oswald',sans-serif; font-size:.68rem; color:rgba(255,255,255,0.38); letter-spacing:2px; text-transform:uppercase; }
.turn-captain { font-family:'Oswald',sans-serif; font-size:1.25rem; font-weight:700; color:var(--white); }
.turn-team { font-size:.82rem; color:rgba(255,255,255,0.45); }
.turn-pick-badge { font-family:'Oswald',sans-serif; font-size:1.9rem; font-weight:700; color:var(--accent); text-align:center; min-width:55px; }
.turn-pick-badge small { display:block; font-size:.62rem; color:rgba(255,255,255,0.32); letter-spacing:1px; }

/* ===== DRAFT ===== */
.draft-arena { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:start; }
@media(max-width:768px){.draft-arena{grid-template-columns:1fr;}}

.draft-pool-title { font-family:'Oswald',sans-serif; color:rgba(255,255,255,0.38); font-size:.72rem; letter-spacing:2px; text-transform:uppercase; margin-bottom:9px; text-align:center; }
.draft-player-item {
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  border-radius:6px; border:1px solid transparent; cursor:default;
  transition:all .18s; margin-bottom:3px; background:rgba(255,255,255,0.023); font-size:.85rem;
}
.draft-player-item.available { cursor:pointer; border-color:rgba(255,255,255,0.06); }
.draft-player-item.available:hover { background:rgba(189, 147, 249, 0.12); border-color:var(--accent); transform:translateX(4px); }
.draft-player-item.picked { opacity:.23; cursor:default; text-decoration:line-through; }
.player-num { font-family:'Oswald',sans-serif; font-size:.68rem; color:rgba(255,255,255,0.22); width:17px; text-align:right; }

.draft-center { display:flex; flex-direction:column; align-items:center; gap:5px; padding-top:18px; }

/* ===== TEAM CARDS ===== */
.team-card { background:var(--card-bg); border-radius:10px; overflow:hidden; margin-bottom:10px; border:1px solid var(--tc,#333); }
.team-header {
  padding:9px 13px; font-family:'Oswald',sans-serif; font-size:.95rem; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--tc,#888);
}
.team-body { padding:9px 13px; }
.team-player-row { display:flex; align-items:center; gap:7px; padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:.82rem; }
.team-player-row:last-child { border-bottom:none; }
.captain-badge { background:var(--accent2); color:var(--btn-on-accent); font-size:.58rem; font-weight:700; padding:1px 5px; border-radius:3px; font-family:'Oswald',sans-serif; letter-spacing:1px; }
.pick-order-badge { font-size:.65rem; color:rgba(255,255,255,0.26); font-family:'Oswald',sans-serif; margin-left:auto; }
.team-card.is-picking .team-header { background:rgba(189, 147, 249, 0.08); }

/* ===== RESULTS ===== */
.results-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:13px; }

.team-colors-0{--tc:#ff5555;}
.team-colors-1{--tc:#8be9fd;}
.team-colors-2{--tc:#bd93f9;}
.team-colors-3{--tc:#ffb86c;}

.alert-field { background:rgba(255,85,85,0.12); border:1px solid rgba(255,85,85,0.35); border-radius:7px; padding:8px 13px; font-size:.85rem; color:#ff9e9e; margin-top:8px; }
.badge-round { display:inline-block; background:rgba(189, 147, 249, 0.1); border:1px solid var(--border); border-radius:4px; padding:2px 8px; font-family:'Oswald',sans-serif; font-size:.7rem; letter-spacing:1px; color:rgba(248,248,242,0.45); }
.player-add-row { display:flex; gap:7px; margin-bottom:9px; }

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.2);}
::-webkit-scrollbar-thumb{background:var(--dracula-comment);border-radius:3px;}