/* Estilos originales de la ruleta Disfruttalo */
*{box-sizing:border-box}
body{margin:0;background:#fff8ee;color:#37251f;font-family:system-ui,-apple-system,sans-serif;min-height:100svh;display:grid;place-items:center;padding:24px 16px}
main{width:100%;max-width:420px;text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:11px;font-weight:800;color:#b15b3e}
h1{font-size:clamp(32px,9vw,42px);line-height:1.1;margin:14px 0}
p{line-height:1.6;color:#79645a}
.card{background:#fff;border:1px solid #eaded2;border-radius:28px;padding:26px 22px;box-shadow:0 15px 50px #7a42200a}
label{display:block;text-align:left;font-weight:700;margin:26px 0 10px}
input{width:100%;font-size:24px;text-align:center;padding:15px;border:2px solid #e8dcd0;border-radius:15px;color:#37251f;background:#fffdf9}
input:focus{outline:3px solid #ffd49d;border-color:#b05a3d}
button{border:0;border-radius:16px;background:#8f412b;color:white;font:750 17px system-ui;width:100%;padding:18px;margin-top:18px;cursor:pointer;box-shadow:0 6px 0 #66301f}
button:disabled{background:#c5b8ac;box-shadow:none;cursor:default}
button:focus-visible{outline:3px solid #df9e39;outline-offset:5px}
[hidden]{display:none!important}
.error{color:#aa2929;min-height:24px;font-size:14px}
.wheel-wrap{position:relative;width:min(100%,350px);aspect-ratio:1;margin:30px auto;--wheel-label-distance:96px}
.pointer{position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:2;width:32px;height:38px;background:#37251f;clip-path:polygon(0 0,100% 0,50% 100%)}
.wheel{width:100%;height:100%;border-radius:50%;border:9px solid #fff;background:conic-gradient(#ffc766 0deg 120deg,#a6d4b7 120deg 240deg,#eaa48f 240deg 360deg);box-shadow:0 0 0 2px #e6d5c3,0 14px 36px #6b3a2420;position:relative;transition:transform 4.5s cubic-bezier(.12,.75,.13,1)}
.label{position:absolute;left:50%;top:50%;width:100px;margin-left:-50px;margin-top:-24px;font-size:16px;font-weight:800;line-height:1.25}
.again{transform:rotate(60deg) translateY(calc(-1 * var(--wheel-label-distance))) rotate(-60deg)}
.ice{transform:rotate(180deg) translateY(calc(-1 * var(--wheel-label-distance))) rotate(-180deg);font-size:48px}
.lose{transform:rotate(300deg) translateY(calc(-1 * var(--wheel-label-distance))) rotate(-300deg)}
.hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;background:#fff8ee;border:6px solid white;border-radius:50%;display:grid;place-items:center;font-size:22px}
.status{min-height:52px;margin:10px 0;font-weight:650}
.note{font-size:12px;margin-top:24px;color:#958176}
dialog{border:0;border-radius:30px;padding:32px 24px;max-width:380px;width:calc(100% - 32px);text-align:center;background:#fffaf1;color:#37251f;box-shadow:0 25px 100px #37251f40}
dialog::backdrop{background:#37251fbb;backdrop-filter:blur(6px)}
dialog h2{font-size:32px;margin:14px 0}
.big-ice{font-size:88px}
dialog strong{display:block;font-size:21px;line-height:1.4}
.voucher{padding:16px;border:2px dashed #b6cdb4;border-radius:16px;background:#eff5eb;margin-top:24px;font-weight:700}
a.review{display:block;background:#8f412b;color:white;text-decoration:none;padding:17px;border-radius:16px;margin-top:24px;font-weight:750}
.privacy{font-size:12px;color:#79645a}
button.retry{box-shadow:none;background:transparent;color:#8f412b;font-size:14px;padding:10px}
@media(prefers-reduced-motion:reduce){.wheel{transition-duration:.1s}}

/* Logo: proporción original 2:1, sin distorsión y sin ocupar toda la pantalla */
.brand{display:flex;align-items:center;justify-content:center;margin:0 auto 4px}
.brand-logo{display:block;width:clamp(160px,54vw,225px);max-width:100%;height:auto;object-fit:contain}

/* Selector de idioma */
.language-controls{display:flex;justify-content:flex-end;margin:0 0 .2rem}
.language-controls select{max-width:100%;border:1px solid rgba(117,68,35,.25);border-radius:999px;padding:.4rem .65rem;background:#fffaf5;color:#6a3e22;font:inherit;font-size:.875rem;cursor:pointer}
.language-controls select:focus-visible{outline:3px solid #df9e39;outline-offset:3px}

/* Aprovechar la altura en pantallas de móvil sin cortar la ruleta */
@media(max-width:480px){
  body{padding:12px}
  h1{font-size:clamp(27px,7.5vw,36px);margin:8px 0}
  #game>p{margin:8px 0}
  .wheel-wrap{width:min(100%,330px,42svh);margin:16px auto;--wheel-label-distance:clamp(60px,23vw,96px)}
  .label{width:92px;margin-left:-46px;font-size:clamp(12px,3.7vw,16px)}
  .ice{font-size:clamp(36px,11vw,48px)}
  .status{min-height:44px;margin:8px 0;font-size:14px}
  #spin{margin-top:8px;padding:15px}
  dialog{padding:18px 16px;max-height:calc(100svh - 24px);overflow-y:auto}
  .big-ice{font-size:64px;line-height:1}
  dialog h2{font-size:clamp(24px,7vw,30px);margin:9px 0}
  dialog strong{font-size:18px;line-height:1.35}
  .voucher{padding:12px;margin-top:14px}
  dialog p{margin:10px 0;line-height:1.4}
  a.review{margin-top:14px;padding:14px}
  dialog .privacy{margin:8px 0 0}
}
@media(max-width:480px) and (max-height:650px){
  .brand-logo{width:clamp(145px,44vw,185px)}
  .wheel-wrap{width:min(100%,330px,39svh);margin:12px auto}
  .status{min-height:38px}
}