:root {
  --bg1: #3a0ca3;
  --bg2: #f72585;
  --accent: #ffd166;
  --button: #ff006e;
  --button-dark: #a50047;
  --button-light: #ff4d94;
  --text: #ffffff;
  --rim: #ffc300;
  --rim-dark: #997500;
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  --w: min(86vh, 54vw);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg1);
  color: var(--text);
  font-family: var(--body);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ---------- Fondo animado ---------- */
.bg {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  background-size: 200% 200%;
  animation: bgShift 16s ease-in-out infinite;
  overflow: hidden;
}
@keyframes bgShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: drift 22s ease-in-out infinite;
}
.b1 { width: 45vmax; height: 45vmax; background: var(--accent); top: -15vmax; left: -10vmax; opacity: 0.35; }
.b2 { width: 40vmax; height: 40vmax; background: var(--bg2); bottom: -15vmax; right: -10vmax; animation-delay: -7s; }
.b3 { width: 30vmax; height: 30vmax; background: #4cc9f0; top: 40%; left: 35%; opacity: 0.3; animation-delay: -14s; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(6vw, 4vh) scale(1.1); }
  66% { transform: translate(-4vw, 6vh) scale(0.92); }
}
.shapes span {
  position: absolute;
  opacity: 0.22;
  animation: floaty linear infinite;
}
@keyframes floaty {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

/* ---------- Layout ---------- */
.app {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3vw;
  padding: max(2vh, env(safe-area-inset-top)) 4vw max(2vh, env(safe-area-inset-bottom));
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.6vh;
  animation: rise 0.9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(30px); }
}

.logo-badge {
  width: min(24vh, 22vw);
  aspect-ratio: 1;
  border-radius: 28%;
  background: rgba(255, 255, 255, 0.95);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 0 0 6px rgba(255,255,255,.25), 0 20px 50px rgba(0,0,0,.3);
  animation: bob 4s ease-in-out infinite;
}
.logo-badge img { width: 88%; height: 88%; object-fit: contain; }
.logo-fallback { font-size: min(13vh, 12vw); line-height: 1; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

.store-name {
  margin: 0.6vh 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, min(6.4vh, 4.6vw), 72px);
  line-height: 1.05;
  letter-spacing: 0.5px;
  max-width: 18ch;
  background: linear-gradient(90deg, #fff, var(--accent), #fff, var(--accent), #fff);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.18)) drop-shadow(0 10px 22px rgba(0,0,0,.25));
}
@keyframes shimmer { to { background-position: 250% center; } }

.slogan {
  margin: 0;
  font-size: clamp(16px, min(2.8vh, 2vw), 28px);
  font-weight: 600;
  opacity: 0.95;
  max-width: 28ch;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.slogan:empty, .hint:empty { display: none; }

/* ---------- Botón girar ---------- */
.spin-btn {
  position: relative;
  margin-top: 2.5vh;
  border: 0;
  cursor: pointer;
  padding: 0;
  border-radius: 999px;
  background: var(--button-dark);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  font-family: var(--display);
  transition: transform .12s ease, filter .2s;
  animation: pulse 1.8s ease-in-out infinite;
}
.spin-btn-label {
  display: block;
  padding: 2.4vh 9vh;
  border-radius: 999px;
  font-size: clamp(26px, min(5.4vh, 4vw), 60px);
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  background: linear-gradient(180deg, var(--button-light), var(--button));
  transform: translateY(-8px);
  text-shadow: 0 3px 0 rgba(0,0,0,.2);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35);
  transition: transform .12s ease;
}
.spin-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 4px solid var(--accent);
  opacity: 0;
  animation: ring 1.8s ease-out infinite;
}
.spin-btn:active .spin-btn-label { transform: translateY(-2px); }
.spin-btn:disabled { cursor: default; animation: none; filter: saturate(.6) brightness(.9); }
.spin-btn:disabled::after { animation: none; }
.spin-btn:disabled .spin-btn-label { transform: translateY(-3px); }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes ring {
  0% { opacity: .9; transform: scale(.95); }
  100% { opacity: 0; transform: scale(1.25); }
}

.hint {
  margin: 1vh 0 0;
  font-size: clamp(14px, 2.2vh, 22px);
  font-weight: 600;
  opacity: .85;
}

/* ---------- Ruleta ---------- */
.stage { display: grid; place-items: center; }
.wheel-wrap {
  position: relative;
  width: var(--w);
  aspect-ratio: 1;
  animation: popIn 1s cubic-bezier(.2,1.4,.4,1) .15s both;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.6) rotate(-40deg); }
}
.wheel-glow {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 65%);
  animation: glow 3s ease-in-out infinite;
}
@keyframes glow { 50% { transform: scale(1.06); opacity: .6; } }

.wheel {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  border-radius: 50%;
  box-shadow: 0 25px 60px rgba(0,0,0,.45), 0 0 0 calc(var(--w) * .012) rgba(255,255,255,.5);
  will-change: transform;
}

.lights {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--w) * .006) rgba(255,255,255,.4);
}
.lights::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg, var(--rim), #fff3b0, var(--rim), var(--rim-dark), var(--rim), #fff3b0, var(--rim), var(--rim-dark), var(--rim));
  -webkit-mask: radial-gradient(closest-side, transparent 90.5%, #000 91.5%);
  mask: radial-gradient(closest-side, transparent 90.5%, #000 91.5%);
}
.bulb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--w) * .032);
  height: calc(var(--w) * .032);
  margin: calc(var(--w) * -.016);
  border-radius: 50%;
  background: #fff8d6;
  box-shadow: 0 0 6px 2px #fff3a0, 0 0 16px 4px var(--accent);
  animation: blink 1s steps(1) infinite;
}
.bulb.alt { animation-delay: .5s; }
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: .25; box-shadow: none; }
}
.wheel-wrap.spinning .bulb { animation-duration: .22s; }
.wheel-wrap.spinning .bulb.alt { animation-delay: .11s; }
.wheel-wrap.won .bulb { animation: winBlink .3s steps(1) infinite; }
@keyframes winBlink {
  0% { opacity: 1; background: #fff; }
  50% { opacity: .5; background: var(--accent); }
}

.hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #f1ecff);
  border: calc(var(--w) * .014) solid var(--rim);
  box-shadow: 0 6px 18px rgba(0,0,0,.4), inset 0 -4px 10px rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 2;
}
.hub img { width: 80%; height: 80%; object-fit: contain; }
.hub-fallback {
  font-size: calc(var(--w) * .085);
  color: var(--button);
  line-height: 1;
}

.pointer {
  position: absolute;
  top: -3.5%;
  left: 50%;
  width: 13%;
  transform: translateX(-50%);
  transform-origin: 50% 32%;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.4));
  z-index: 3;
}

/* ---------- Controles ---------- */
/* Controles (música, pantalla completa, administración) */
.controls {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  z-index: 5;
}
.ctrl {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 20px;
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.ctrl:hover { background: rgba(255,255,255,.28); }
.ctrl:active { transform: scale(.92); }
.ctrl.off { opacity: .55; text-decoration: line-through; }

/* ---------- Destello ---------- */
.flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}
.flash.on { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Modal de resultado ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(20, 5, 45, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .3s ease both;
}
.modal[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }
.modal-rays {
  position: absolute;
  width: 160vmax;
  height: 160vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 230, 120, .22) 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 45%);
  mask: radial-gradient(circle, #000 0, transparent 45%);
  animation: spinRays 18s linear infinite;
  pointer-events: none;
}
.modal.lose .modal-rays { display: none; }
@keyframes spinRays { to { transform: rotate(360deg); } }

.modal-card {
  position: relative;
  width: min(560px, 100%);
  padding: 34px 28px 30px;
  border-radius: 32px;
  text-align: center;
  color: #2b2140;
  background: linear-gradient(180deg, #ffffff, #fff4fb);
  box-shadow: 0 0 0 8px rgba(255,255,255,.35), 0 30px 80px rgba(0,0,0,.45);
  animation: cardIn .7s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: scale(.4) rotate(-8deg); }
}
.modal-icon {
  font-size: 84px;
  line-height: 1;
  margin-top: -82px;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.3));
  animation: iconBounce 1.2s ease-in-out infinite;
}
@keyframes iconBounce {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); }
  50% { transform: translateY(-14px) rotate(6deg) scale(1.08); }
}
.modal-title {
  margin: 12px 0 4px;
  font-family: var(--display);
  font-size: clamp(34px, 7vw, 54px);
  font-weight: 700;
  color: var(--button);
  letter-spacing: 1px;
}
.modal-msg {
  margin: 0;
  font-size: clamp(17px, 3vw, 22px);
  font-weight: 600;
  color: #5b4f73;
}
.modal-prize {
  margin: 14px auto 22px;
  padding: 14px 22px;
  border-radius: 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 7vw, 52px);
  line-height: 1.1;
  color: #fff;
  background: linear-gradient(135deg, var(--button), var(--bg1));
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
  animation: prizeZoom .8s cubic-bezier(.2,1.6,.4,1) .25s both;
}
.modal-prize:empty { display: none; }
@keyframes prizeZoom { from { transform: scale(0); } }
.modal-btn {
  border: 0;
  cursor: pointer;
  padding: 14px 44px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(180deg, var(--button-light), var(--button));
  box-shadow: 0 6px 0 var(--button-dark), 0 12px 24px rgba(0,0,0,.2);
  transition: transform .1s;
}
.modal-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--button-dark); }
.modal.lose .modal-title { color: #7b5cd6; }
.modal.lose .modal-card { animation-name: cardInSoft; }
@keyframes cardInSoft { from { opacity: 0; transform: translateY(40px) scale(.9); } }

/* ---------- Pantalla de inicio ---------- */
.start {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  cursor: pointer;
  transition: opacity .5s ease, visibility .5s;
}
.start.gone { opacity: 0; visibility: hidden; }
.start-card { text-align: center; }
.start-wheel {
  font-size: 120px;
  animation: spinSlow 4s linear infinite;
  display: inline-block;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
.start h2 {
  font-family: var(--display);
  font-size: clamp(30px, 6vw, 56px);
  margin: 16px 0 8px;
}
.start p {
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 700;
  animation: breathe 1.6s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .45; } }

/* ---------- Aviso ---------- */
.toast {
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translate(-50%, -150%);
  z-index: 30;
  max-width: calc(100% - 32px);
  padding: 14px 22px;
  border-radius: 16px;
  background: #2b2140;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  visibility: hidden;
  transition: transform .35s cubic-bezier(.2,1.2,.4,1), visibility 0s .35s;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }

/* ---------- Vertical (tablet/teléfono de pie) ---------- */
@media (orientation: portrait) {
  :root { --w: min(88vw, 54vh); }
  .app {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.6vh;
    text-align: center;
  }
  .brand { display: contents; }
  .stage { order: 1; margin: 1.5vh 0; }
  .spin-btn, .hint { order: 2; }
  .logo-badge { width: min(12vh, 24vw); }
  .store-name { font-size: clamp(26px, min(4.6vh, 8vw), 60px); margin: 0; }
  .spin-btn { margin-top: 0; }
  .spin-btn-label { padding: 2vh 10vw; font-size: clamp(26px, min(4.4vh, 8vw), 56px); }
}

@media (prefers-reduced-motion: reduce) {
  .blob, .shapes span, .logo-badge, .store-name, .spin-btn, .spin-btn::after, .wheel-glow { animation: none; }
}