:root {
  --draw-panel: linear-gradient(180deg, rgba(15, 30, 53, 0.96), rgba(10, 18, 31, 0.97));
  --draw-border: 1px solid rgba(232, 244, 255, 0.12);
  --draw-shadow: 0 24px 54px rgba(3, 9, 19, 0.42);
}

body[data-page-key="play-hat-trick-draw"] .page-content {
  padding-bottom: 196px;
}

.draw-page-shell {
  display: grid;
  gap: 20px;
}

.draw-topbar,
.draw-board-card,
.draw-info-card,
.draw-result-card,
.draw-legal-card {
  background: var(--draw-panel);
  border: var(--draw-border);
  border-radius: 24px;
  box-shadow: var(--draw-shadow);
}

.draw-topbar {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.draw-topbar-item {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(232, 244, 255, 0.04);
  border: 1px solid rgba(232, 244, 255, 0.08);
}

.draw-topbar-item-badges {
  align-content: start;
}

.draw-topbar-label,
.draw-time-label,
.draw-rule-list li,
.draw-result-copy,
.draw-overtime-copy,
.draw-history-item span,
.draw-history-item small {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-stone);
}

.draw-topbar-value,
.draw-time-value,
.draw-reward-value {
  font-family: "Space Mono", monospace;
  font-size: clamp(1rem, 2vw, 1.24rem);
}

.draw-badge-gallery,
.draw-reward-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.draw-badge-pill,
.draw-earned-badge,
.draw-picked-pill,
.draw-day-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.draw-badge-pill,
.draw-earned-badge {
  background: rgba(254, 203, 2, 0.14);
  border: 1px solid rgba(254, 203, 2, 0.32);
  color: var(--color-sweden-yellow);
}

.draw-badge-pill.is-empty,
.draw-earned-badge.is-muted {
  background: rgba(232, 244, 255, 0.06);
  border-color: rgba(232, 244, 255, 0.12);
  color: var(--color-stone);
}

.draw-main-grid,
.draw-panel-grid,
.draw-side-column {
  display: grid;
  gap: 20px;
}

.draw-board-card,
.draw-info-card,
.draw-result-card,
.draw-legal-card {
  padding: 22px;
}

.draw-board-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.draw-board-head h1,
.draw-selection-head h2,
.draw-info-card h2,
.draw-result-head h2,
.draw-legal-card h2 {
  margin: 0 0 10px;
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.02;
}

.draw-lead {
  margin: 0;
  color: rgba(232, 244, 255, 0.84);
}

.draw-time-card {
  display: grid;
  gap: 6px;
  min-width: min(100%, 280px);
  padding: 16px;
  border-radius: 18px;
  background: rgba(27, 94, 32, 0.16);
  border: 1px solid rgba(27, 94, 32, 0.3);
}

.draw-time-copy {
  color: rgba(232, 244, 255, 0.72);
}

.draw-arena {
  display: grid;
  gap: 20px;
}

.draw-selection-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(0, 91, 187, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(10, 18, 31, 0.92), rgba(15, 30, 53, 0.88));
  border: 1px solid rgba(232, 244, 255, 0.08);
}

.draw-selection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.draw-selection-head h2 {
  font-size: clamp(1.55rem, 3vw, 2rem);
}

.draw-selection-copy {
  margin: 0;
  color: rgba(232, 244, 255, 0.8);
}

.draw-day-chip {
  background: rgba(232, 244, 255, 0.06);
  border: 1px solid rgba(232, 244, 255, 0.14);
  color: var(--color-stone);
}

.draw-day-chip.is-sunday {
  background: rgba(27, 94, 32, 0.2);
  border-color: rgba(27, 94, 32, 0.42);
  color: #a4f0ab;
}

.draw-number-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.draw-number-button {
  position: relative;
  min-height: 72px;
  border-radius: 18px;
  border: 1px solid rgba(232, 244, 255, 0.12);
  background: rgba(232, 244, 255, 0.04);
  color: var(--color-ice-white);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base),
    opacity var(--transition-base);
}

.draw-number-button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(0, 91, 187, 0.44);
  background: rgba(0, 91, 187, 0.12);
}

.draw-number-button.is-selected {
  background: rgba(0, 91, 187, 0.24);
  border-color: rgba(0, 91, 187, 0.72);
  box-shadow: inset 0 0 0 1px rgba(0, 91, 187, 0.26);
}

.draw-number-button.is-drawn {
  border-color: rgba(254, 203, 2, 0.38);
}

.draw-number-button.is-match {
  background: rgba(27, 94, 32, 0.3);
  border-color: rgba(27, 94, 32, 0.72);
  box-shadow:
    0 0 0 2px rgba(27, 94, 32, 0.18),
    inset 0 0 0 1px rgba(27, 94, 32, 0.2);
}

.draw-number-button:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.draw-picked-panel {
  display: grid;
  gap: 14px;
}

.draw-picked-track {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 40px;
}

.draw-picked-pill {
  background: rgba(0, 91, 187, 0.2);
  border: 1px solid rgba(0, 91, 187, 0.44);
  color: var(--color-ice-white);
}

.draw-picked-placeholder {
  color: var(--color-stone);
}

.draw-action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.draw-play-button,
.draw-clear-button {
  min-width: 132px;
}

.draw-rule-list,
.draw-history-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.draw-rule-list li {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(232, 244, 255, 0.04);
  border: 1px solid rgba(232, 244, 255, 0.08);
  color: rgba(232, 244, 255, 0.86);
  text-transform: none;
  letter-spacing: normal;
}

.draw-viktor-slot {
  position: relative;
  min-height: 220px;
  padding: 8px 0 0;
}

.draw-viktor {
  display: grid;
  justify-items: end;
}

.draw-viktor-avatar {
  width: min(100%, 132px);
}

.draw-viktor-bubble {
  max-width: 280px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 16px 16px 4px 16px;
  background: rgba(232, 244, 255, 0.98);
  color: #09111f;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.draw-viktor-bubble.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.draw-result-card {
  display: grid;
  gap: 18px;
}

.draw-result-card.is-win {
  border-color: rgba(27, 94, 32, 0.5);
}

.draw-result-card.is-jackpot,
.draw-result-card.is-overtime {
  box-shadow:
    0 0 0 2px rgba(27, 94, 32, 0.16),
    var(--draw-shadow);
}

.draw-result-card.is-animating {
  border-color: rgba(0, 91, 187, 0.52);
}

.draw-result-head {
  display: grid;
  gap: 6px;
}

.draw-result-head h2 {
  font-size: clamp(1.55rem, 3vw, 2rem);
}

.draw-result-copy {
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}

.draw-reveal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.draw-result-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 18px;
  background: rgba(232, 244, 255, 0.04);
  border: 1px solid rgba(232, 244, 255, 0.08);
  color: rgba(232, 244, 255, 0.78);
}

.draw-ball {
  display: grid;
  place-items: center;
  min-height: 88px;
  border-radius: 22px;
  background: rgba(232, 244, 255, 0.05);
  border: 1px solid rgba(232, 244, 255, 0.12);
  font-family: "Space Mono", monospace;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition:
    opacity 260ms ease,
    transform 260ms ease,
    border-color 260ms ease,
    background 260ms ease;
}

.draw-ball.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.draw-ball.is-match {
  background: rgba(27, 94, 32, 0.28);
  border-color: rgba(27, 94, 32, 0.68);
}

.draw-ball-overtime {
  min-width: 88px;
}

.draw-overtime-panel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(232, 244, 255, 0.04);
  border: 1px solid rgba(232, 244, 255, 0.08);
}

.draw-overtime-label,
.draw-reward-label {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-stone);
}

.draw-reward-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(27, 94, 32, 0.18);
  border: 1px solid rgba(27, 94, 32, 0.38);
}

.draw-history-item,
.draw-history-empty {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(232, 244, 255, 0.04);
  border: 1px solid rgba(232, 244, 255, 0.08);
}

.draw-history-item strong {
  display: block;
  margin-bottom: 4px;
}

.draw-history-item span {
  display: block;
  margin-top: 4px;
  text-transform: none;
  letter-spacing: normal;
}

.draw-history-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.draw-legal-card h2 {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.65rem);
}

body[data-page-key="play-hat-trick-draw"] .play-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
  z-index: 100;
}

@media (min-width: 960px) {
  .draw-topbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .draw-topbar-item-badges {
    grid-column: span 2;
  }

  .draw-main-grid {
    grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.95fr);
    align-items: start;
  }

  .draw-arena {
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
    align-items: start;
  }
}

@media (max-width: 959px) {
  .draw-time-card {
    min-width: 100%;
  }

  .draw-viktor {
    justify-items: center;
  }
}

@media (max-width: 639px) {
  body[data-page-key="play-hat-trick-draw"] .page-content {
    padding-bottom: 214px;
  }

  .draw-board-card,
  .draw-info-card,
  .draw-result-card,
  .draw-legal-card {
    padding: 18px;
  }

  .draw-number-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .draw-number-button {
    min-height: 64px;
  }

  .draw-reveal-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .draw-number-button,
  .draw-ball,
  .draw-viktor-bubble {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}