/* ==== Brawlhalla-inspired palette ====
   deep navy blues + valhalla orange/gold */
:root {
  --bg-dark: #0d1626;
  --bg: #14213d;
  --bg-light: #1d2f52;
  --panel: #1a2949;
  --border: #2e4370;
  --orange: #f6931e;
  --orange-light: #ffb347;
  --gold: #ffc843;
  --text: #eaf0ff;
  --text-dim: #8fa3c8;
  --danger: #e5484d;
  --item-size: 110px;
}

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

body {
  font-family: 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
  background: radial-gradient(ellipse at top, var(--bg-light) 0%, var(--bg) 45%, var(--bg-dark) 100%);
  min-height: 100vh;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hidden { display: none !important; }

/* ==== Header ==== */
header {
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
}

h1 {
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.accent { color: var(--orange); }

.header-buttons { display: flex; gap: .5rem; }

.icon-btn {
  background: var(--panel);
  border: 2px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.icon-btn:hover { transform: translateY(-2px); border-color: var(--orange); }

/* ==== Main ==== */
main {
  width: 100%;
  max-width: 900px;
  padding: 1rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==== Loader ==== */
.loader { text-align: center; margin-top: 4rem; color: var(--text-dim); }
.spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  border: 4px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#game {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==== Roulette ==== */
.roulette-wrap { width: 100%; margin-top: 1rem; }

.pointer {
  width: 0; height: 0;
  margin: 0 auto;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}
.pointer-top { border-top: 14px solid var(--gold); margin-bottom: 4px; }
.pointer-bottom { border-bottom: 14px solid var(--gold); margin-top: 4px; }

.roulette-window {
  position: relative;
  width: 100%;
  height: calc(var(--item-size) + 30px);
  overflow: hidden;
  background: var(--bg-dark);
  border: 3px solid var(--border);
  border-radius: 14px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .6);
}

.roulette-track {
  display: flex;
  align-items: center;
  height: 100%;
  will-change: transform;
}

.roulette-item {
  flex: 0 0 var(--item-size);
  height: var(--item-size);
  margin: 0 5px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.roulette-item img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  pointer-events: none;
}
.roulette-item.hit {
  border-color: var(--gold);
  box-shadow: 0 0 18px var(--orange);
  animation: hit-flash .5s ease;
}
@keyframes hit-flash {
  0% { background: var(--orange); }
  100% { background: var(--panel); }
}

.roulette-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  pointer-events: none;
}
.roulette-fade-left { left: 0; background: linear-gradient(90deg, var(--bg-dark), transparent); }
.roulette-fade-right { right: 0; background: linear-gradient(-90deg, var(--bg-dark), transparent); }

/* ==== Winner reveal ==== */
.winner {
  position: relative;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.winner-rays {
  position: absolute;
  width: 320px;
  height: 320px;
  background: conic-gradient(
    from 0deg,
    rgba(246, 147, 30, .25) 0deg 15deg, transparent 15deg 30deg,
    rgba(246, 147, 30, .25) 30deg 45deg, transparent 45deg 60deg,
    rgba(246, 147, 30, .25) 60deg 75deg, transparent 75deg 90deg,
    rgba(246, 147, 30, .25) 90deg 105deg, transparent 105deg 120deg,
    rgba(246, 147, 30, .25) 120deg 135deg, transparent 135deg 150deg,
    rgba(246, 147, 30, .25) 150deg 165deg, transparent 165deg 180deg,
    rgba(246, 147, 30, .25) 180deg 195deg, transparent 195deg 210deg,
    rgba(246, 147, 30, .25) 210deg 225deg, transparent 225deg 240deg,
    rgba(246, 147, 30, .25) 240deg 255deg, transparent 255deg 270deg,
    rgba(246, 147, 30, .25) 270deg 285deg, transparent 285deg 300deg,
    rgba(246, 147, 30, .25) 300deg 315deg, transparent 315deg 330deg,
    rgba(246, 147, 30, .25) 330deg 345deg, transparent 345deg 360deg
  );
  border-radius: 50%;
  animation: rays-rotate 12s linear infinite;
  mask-image: radial-gradient(circle, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, black 30%, transparent 70%);
}
@keyframes rays-rotate { to { transform: rotate(360deg); } }

.winner-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, var(--bg-light), var(--panel));
  border: 3px solid var(--gold);
  border-radius: 18px;
  padding: 1.4rem 2.2rem 1.1rem;
  text-align: center;
  animation: winner-pop .6s cubic-bezier(.34, 1.56, .64, 1) both,
             winner-glow 2s ease-in-out .6s infinite alternate;
}
@keyframes winner-pop {
  0% { transform: scale(0) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes winner-glow {
  from { box-shadow: 0 0 15px rgba(246, 147, 30, .4); }
  to   { box-shadow: 0 0 40px rgba(255, 200, 67, .8); }
}

.winner-card img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5));
}

.winner-name {
  margin-top: .6rem;
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

/* ==== Buttons ==== */
.actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: .8rem 2.4rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(180deg, var(--orange-light), var(--orange));
  color: #2b1500;
  box-shadow: 0 4px 0 #b06004, 0 6px 16px rgba(246, 147, 30, .35);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); }

.btn-secondary {
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--border);
}
.btn-secondary:hover { border-color: var(--orange); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 2px solid var(--danger);
}
.btn-danger:hover { background: var(--danger); color: #fff; }

.hint { margin-top: 1rem; color: var(--text-dim); font-size: .85rem; }

/* ==== Modals ==== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 20, .75);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
}

.modal-box {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 1.3rem;
  animation: modal-in .25s ease;
}
@keyframes modal-in {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .4rem;
}
.modal-header h2 { text-transform: uppercase; letter-spacing: 1px; font-size: 1.2rem; }
.modal-sub { color: var(--text-dim); font-size: .85rem; margin-bottom: 1rem; }
.modal-footer { margin-top: 1rem; display: flex; justify-content: center; }

/* ==== Ban grid ==== */
.ban-grid {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: .5rem;
  padding-right: .3rem;
}

.ban-item {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: .35rem;
  text-align: center;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
  user-select: none;
}
.ban-item:hover { transform: translateY(-2px); border-color: var(--orange); }
.ban-item img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.ban-item span {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ban-item.banned { border-color: var(--danger); }
.ban-item.banned img { filter: grayscale(1) brightness(.45); }
.ban-item.banned span { color: var(--danger); text-decoration: line-through; }
.ban-item.banned::after {
  content: 'BANNI';
  display: block;
  font-size: .6rem;
  font-weight: 800;
  color: var(--danger);
  letter-spacing: 1px;
}

/* ==== Stats ==== */
.stats-list { overflow-y: auto; display: flex; flex-direction: column; gap: .45rem; padding-right: .3rem; }

.stat-row { display: flex; align-items: center; gap: .7rem; }
.stat-row img { width: 38px; height: 38px; object-fit: contain; }
.stat-row .stat-name { width: 110px; font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-bar-wrap { flex: 1; background: var(--bg-dark); border-radius: 6px; height: 16px; overflow: hidden; }
.stat-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  border-radius: 6px;
  min-width: 3px;
  transition: width .4s ease;
}
.stat-row .stat-count { width: 34px; text-align: right; font-weight: 700; color: var(--gold); }
.stats-empty { color: var(--text-dim); text-align: center; padding: 2rem 0; }

/* ==== Responsive ==== */
@media (max-width: 600px) {
  :root { --item-size: 84px; }
  h1 { font-size: 1.15rem; }
  .winner-card img { width: 130px; height: 130px; }
  .winner-name { font-size: 1.2rem; }
}