:root {
  --orange-1: #e96646;
  --orange-2: #cf5039;
  --red: #e96646;
  --deep-red: #cf5039;
  --yellow: #ffb300;
  --orange: #e96646;
  --cream: #fff4dd;
  --brown: #4b2115;
  --text: #fffaf1;
  --shadow: rgba(57, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: "Londrina Solid", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 205, 111, 0.20), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(255, 244, 221, 0.14), transparent 34%),
    linear-gradient(135deg, var(--orange-1) 0%, var(--orange-2) 52%, #b9412e 100%);
  color: var(--text);
  touch-action: manipulation;
  user-select: none;
}

body::before {
  content: "";
  position: fixed;
  inset: -25vmax;
  background: repeating-conic-gradient(from -8deg, rgba(255,255,255,0.055) 0deg 9deg, transparent 9deg 18deg);
  animation: slowSpin 70s linear infinite;
  pointer-events: none;
}

@keyframes slowSpin { to { transform: rotate(360deg); } }

.game {
  position: relative;
  z-index: 1;
  width: min(100vw, 1024px);
  min-height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  padding: clamp(14px, 2.2vh, 24px) clamp(14px, 2.2vh, 24px) calc(clamp(14px, 2.2vh, 24px) + 64px);
  gap: clamp(6px, 1vh, 12px);
}

.hero {
  text-align: center;
  display: grid;
  justify-items: center;
}
.site-logo {
  display: block;
  max-width: min(310px, 52vw);
  max-height: clamp(58px, 10vh, 104px);
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 8px 18px rgba(70, 0, 0, .25));
}
.eyebrow {
  margin: 0 0 4px;
  color: var(--yellow);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(0.78rem, 1.8vw, 1.05rem);
}
h1 {
  margin: 0;
  font-size: clamp(2.1rem, 6.2vw, 4.8rem);
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 7px 20px var(--shadow);
}
.subtitle {
  margin: 9px auto 0;
  max-width: 760px;
  font-size: clamp(1rem, 2.4vw, 1.55rem);
  opacity: 0.95;
}

.wheel-zone {
  position: relative;
  display: grid;
  place-items: center;
  gap: 12px;
}

.wheel-wrap {
  position: relative;
  width: min(82vh, 88vw, 760px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 26px 34px rgba(58,0,0,.38));
}

#wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(0deg);
  will-change: transform;
}

.pointer {
  position: absolute;
  top: max(6px, 0.7vh);
  z-index: 4;
  width: 0;
  height: 0;
  border-left: clamp(20px, 4vw, 34px) solid transparent;
  border-right: clamp(20px, 4vw, 34px) solid transparent;
  border-top: clamp(42px, 7vw, 64px) solid var(--cream);
  filter: drop-shadow(0 8px 14px rgba(72,0,0,.34));
}
.pointer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(-39px, -6.5vw, -25px);
  transform: translateX(-50%);
  width: clamp(26px, 5vw, 42px);
  height: clamp(10px, 1.8vw, 16px);
  border-radius: 999px;
  background: var(--cream);
}
.pointer::before {
  content: "";
}

.spin-button {
  position: absolute;
  width: clamp(116px, 23%, 176px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 7px solid rgba(255, 179, 0, .93);
  font-family: "Londrina Solid", system-ui, sans-serif;
  background: radial-gradient(circle at 35% 25%, #fff 0 18%, var(--cream) 60%, #f4d8a1 100%);
  color: var(--red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 10px 28px rgba(71,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.75);
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .02em;
}
.spin-button strong { font-size: clamp(1.65rem, 4.6vw, 3.05rem); line-height: .86; }
.spin-button span { font-size: clamp(.68rem, 1.8vw, 1.05rem); color: var(--brown); }
.spin-button .brand { color: var(--orange); }
.spin-button:active { transform: scale(.97); }
.spin-button[disabled] { cursor: not-allowed; opacity: .9; }

.status {
  min-height: 1.4em;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(4px);
  font-weight: 800;
  text-align: center;
}

.bottom-actions {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: none;
  z-index: 12;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(75, 33, 21, .18);
  backdrop-filter: blur(7px);
  box-shadow: 0 12px 26px rgba(56,0,0,.22);
}

.icon-action, .modal-card button {
  border: 0;
  border-radius: 999px;
  background: var(--cream);
  color: var(--deep-red);
  font-family: "Londrina Solid", system-ui, sans-serif;
  font-weight: 900;
  box-shadow: 0 9px 18px rgba(56,0,0,.22);
  cursor: pointer;
}

.icon-action {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}

.ui-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

.ui-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ui-icon svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-icon svg .speaker {
  fill: currentColor;
  stroke: none;
}

.icon-action:active { transform: scale(.94); }
.icon-action.is-off { background: rgba(255, 244, 221, .72); color: #7a4736; }

.modal-card button {
  padding: 13px 22px;
  font-size: 1rem;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(76,0,0,.62);
  backdrop-filter: blur(8px);
}
.modal.show { display: grid; }
.modal-card {
  position: relative;
  width: min(92vw, 560px);
  min-height: 330px;
  overflow: hidden;
  border-radius: 34px;
  padding: 38px 28px 30px;
  text-align: center;
  background: linear-gradient(160deg, #fff8ea, #ffd98c);
  color: var(--brown);
  box-shadow: 0 28px 80px rgba(42,0,0,.55);
  animation: pop .35s ease-out;
}
@keyframes pop { from { transform: scale(.84); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.result-kicker {
  margin: 0;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 900;
}
.modal-card h2 {
  margin: 8px 0 10px;
  color: var(--red);
  font-size: clamp(2.25rem, 7vw, 4.3rem);
  line-height: .95;
  text-transform: uppercase;
}
.modal-card p { font-size: clamp(1.15rem, 3vw, 1.55rem); font-weight: 800; }
.modal-card button { background: var(--red); color: white; margin-top: 14px; }

.confetti i {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 18px;
  border-radius: 2px;
  background: hsl(var(--hue), 90%, 55%);
  animation: fall var(--duration) linear forwards;
  left: var(--left);
}
@keyframes fall {
  to { transform: translateY(430px) rotate(720deg); opacity: .2; }
}

.modal.lose .modal-card { background: linear-gradient(160deg, #fff8ea, #f1e6cf); }
.modal.lose .modal-card h2 { color: #5a3326; }
.modal.lose .confetti { display: none; }

@media (orientation: landscape) and (max-height: 720px) {
  .game { grid-template-rows: auto 1fr; }
  .hero { text-align: center; justify-items: center; padding-left: 0; }
  .site-logo { margin-left: auto; max-width: min(280px, 26vw); max-height: 76px; }
  .wheel-wrap { width: min(84vh, 76vw); }
}