:root {
  --black: #0a0a0a;
  --black-2: #141414;
  --black-3: #1c1c1c;
  --yellow: #ffd400;
  --yellow-2: #ffe566;
  --orange: #ff6a00;
  --orange-2: #ff8a1f;
  --white: #fff8e8;
  --muted: #c9b48a;
}

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

html, body {
  height: 100%;
  background: var(--black);
  color: var(--white);
  font-family: Manrope, system-ui, sans-serif;
}

.tv {
  overflow: hidden;
}

.board {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: 9vh 1fr 20vh;
  gap: 1.4vh;
  padding: 1.8vh 1.8vw 1.6vh;
  background:
    radial-gradient(80vw 50vh at 8% -10%, rgba(255, 212, 0, 0.16), transparent 55%),
    radial-gradient(70vw 45vh at 100% 110%, rgba(255, 106, 0, 0.18), transparent 50%),
    var(--black);
}

.tv-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2vw;
}

.brand {
  font-family: Oswald, sans-serif;
  font-size: clamp(28px, 3.2vw, 72px);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.live {
  font-family: Manrope, sans-serif;
  font-size: clamp(12px, 1vw, 22px);
  letter-spacing: 0.14em;
  background: var(--orange);
  color: var(--black);
  padding: 0.35em 0.7em;
  border-radius: 999px;
  font-weight: 800;
  animation: pulse 1.6s ease-in-out infinite;
}

.period, .clock {
  font-size: clamp(22px, 2.2vw, 48px);
  font-weight: 800;
  color: var(--yellow);
}

.clock { justify-self: end; }
.period { justify-self: center; }

.heroes {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 1.25fr;
  gap: 1.2vw;
  min-height: 0;
}

.card {
  background: linear-gradient(180deg, #1a1a1a, #101010);
  border: 2px solid #2a2a2a;
  border-radius: 1.4vw;
  padding: 2vh 1.6vw;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.podium { justify-content: space-between; }

.alltime {
  border-color: var(--yellow);
  box-shadow: 0 0 0 1px rgba(255, 212, 0, 0.2), 0 1.5vh 4vh rgba(255, 212, 0, 0.12);
}

.month {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.25), 0 1.5vh 4vh rgba(255, 106, 0, 0.14);
}

.kicker {
  font-size: clamp(16px, 1.35vw, 32px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.crown {
  font-size: clamp(36px, 4vw, 84px);
  line-height: 1;
}

.alltime .crown, .alltime .name { color: var(--yellow); }
.month .crown, .month .name { color: var(--orange-2); }

.name {
  font-family: Oswald, sans-serif;
  font-size: clamp(48px, 6.4vw, 140px);
  line-height: 0.9;
  text-transform: uppercase;
}

.podium .amount {
  font-family: Oswald, sans-serif;
  font-size: clamp(36px, 4.4vw, 96px);
  color: var(--white);
  letter-spacing: 0.02em;
}

.others { overflow: hidden; }
.others-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 1.2vh;
  min-height: 0;
  margin-top: 1.4vh;
}

.other-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1vw;
}

.other-name {
  font-family: Oswald, sans-serif;
  font-size: clamp(28px, 3.1vw, 68px);
  text-transform: uppercase;
  line-height: 1;
}

.other-amount {
  font-family: Oswald, sans-serif;
  font-size: clamp(24px, 2.5vw, 54px);
  color: var(--yellow);
  white-space: nowrap;
}

.bar {
  height: 1.1vh;
  background: #2a2a2a;
  border-radius: 99px;
  margin-top: 0.7vh;
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  border-radius: 99px;
}

.empty { color: var(--muted); font-size: 2vw; padding-top: 4vh; }

.total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  padding: 0 2.2vw;
  border-radius: 1.4vw;
  background: linear-gradient(90deg, var(--yellow) 0%, var(--orange) 100%);
  color: var(--black);
}

.total .kicker {
  color: #3a2200;
  font-size: clamp(18px, 1.8vw, 42px);
  max-width: 28vw;
}

.total .amount {
  font-family: Oswald, sans-serif;
  font-size: clamp(48px, 7.2vw, 160px);
  line-height: 1;
  letter-spacing: 0.01em;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.admin-body {
  min-height: 100%;
  background:
    radial-gradient(50vw 40vh at 100% 0%, rgba(255, 106, 0, 0.18), transparent 50%),
    radial-gradient(40vw 30vh at 0% 100%, rgba(255, 212, 0, 0.12), transparent 50%),
    var(--black);
  padding: 4vh 4vw;
}

.login-card, .panel, .manage {
  max-width: 1100px;
}

.login-card {
  width: min(460px, 92vw);
  margin: 12vh auto 0;
  background: var(--black-2);
  border: 2px solid #2d2d2d;
  border-radius: 24px;
  padding: 36px;
  display: grid;
  gap: 16px;
}

.login-card h1, .manage h1, .panel h2 {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  font-size: 42px;
}

label, .field {
  display: grid;
  gap: 8px;
  font-weight: 700;
  color: var(--muted);
}

input[type="text"], input[type="password"], input[type="number"], input[type="date"] {
  background: var(--black);
  border: 2px solid #333;
  color: var(--white);
  border-radius: 14px;
  padding: 14px 16px;
  font: inherit;
  font-size: 22px;
}

input:focus {
  outline: none;
  border-color: var(--yellow);
}

button, .primary {
  background: var(--yellow);
  color: var(--black);
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

button:hover, .primary:hover { background: var(--yellow-2); }

.ghost-link, .manage-head a {
  color: var(--orange-2);
  font-weight: 800;
  text-decoration: none;
}

.flash {
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
}

.flash.success { background: #1d3a12; color: #d6ffb0; }
.flash.error { background: #3a1212; color: #ffd0d0; }

.manage { margin: 0 auto; display: grid; gap: 24px; }

.manage-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
}

.manage-head nav { display: flex; gap: 22px; font-size: 20px; }

.panel {
  background: var(--black-2);
  border: 2px solid #2d2d2d;
  border-radius: 24px;
  padding: 28px;
}

.sale-form { display: grid; gap: 22px; }

.manager-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pick {
  background: var(--black);
  color: var(--white);
  border: 2px solid #3a3a3a;
}

.pick.active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--black);
}

.inline-form { display: flex; gap: 10px; }
.inline-form input { flex: 1; }

.table-wrap { overflow-x: auto; margin-top: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 18px; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid #2a2a2a; }
th { color: var(--muted); }

.danger {
  background: transparent;
  color: var(--orange);
  padding: 6px 10px;
}

.muted { color: var(--muted); }

@media (max-width: 1100px) {
  .tv { overflow: auto; }
  .board { height: auto; min-height: 100vh; grid-template-rows: auto auto auto; }
  .tv-header, .heroes, .total { display: flex; flex-direction: column; }
  .name, .podium .amount, .total .amount { font-size: 64px; }
  .total { padding: 24px; }
}