:root{
  --page:#e7d8b4; --text:#22160c; --muted:#6a5638;
  --ink:#1c120a; --wood:#5b3a1d; --wood2:#8b5a2b; --parch:#f4e6c3;
  --gold:#f2a93b; --ember:#d8432a; --leaf:#3f7a3a; --stone:#d9c9a3;
  --ok:#2f7d3a; --bad:#c0392b;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --page:#0f2419; --text:#f4e6c3; --muted:#b8a57c; }
}
:root[data-theme="dark"]{ --page:#0f2419; --text:#f4e6c3; --muted:#b8a57c; }
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;color:var(--text);font-family:"Figtree",system-ui,sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased;
  background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--leaf) 30%,var(--page)),var(--page)) fixed,var(--page)}
h1,h2,h3,.slab{font-family:"Alfa Slab One",Georgia,serif;font-weight:400;letter-spacing:.005em}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
img{max-width:100%}

/* Botón tallado */
.carved{
  font-family:"Alfa Slab One",Georgia,serif;font-size:1.05rem;color:#2a1605;
  background:linear-gradient(180deg,#ffd27a,var(--gold) 45%,#d9771f);
  border:3px solid var(--ink);border-radius:12px;padding:.8rem 1.4rem;
  box-shadow:0 4px 0 var(--ink),inset 0 2px 0 rgba(255,255,255,.5);transition:transform .08s,box-shadow .08s;
}
.carved:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink),inset 0 2px 0 rgba(255,255,255,.5)}
.carved:disabled{filter:grayscale(.6);opacity:.6;cursor:default}
.carved.red{background:linear-gradient(180deg,#ff8a5c,var(--ember) 55%,#9c2415);color:#fff4e0}
.carved.green{background:linear-gradient(180deg,#8cc46a,var(--leaf) 60%,#24501f);color:#fff4e0}

/* Cabecera */
header{max-width:30rem;margin:0 auto;padding:1rem 1rem .5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
header img{height:2.1rem;width:auto;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.icon-btn{width:2.6rem;height:2.6rem;border-radius:50%;border:3px solid currentColor;background:transparent;display:grid;place-items:center;flex:none}
.icon-btn svg{width:1.1rem;height:1.1rem}

/* Panel de pruebas (solo visible con ?debug en la URL) */
.dev-jump{position:fixed;top:.5rem;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.75);color:#fff;
  padding:.4rem .7rem;border-radius:10px;font-size:.8rem}
.dev-jump input{width:3.2rem;font:inherit;border-radius:6px;border:0;padding:.2rem .3rem}
.dev-jump button{padding:.3rem .6rem;font-size:.8rem}

/* Tablero con marco de madera */
.board-wrap{max-width:30rem;margin:0 auto;padding:.5rem 1rem 8rem}
.board{
  padding:12px;border:3px solid var(--ink);border-radius:20px;
  background:
    repeating-linear-gradient(92deg,rgba(0,0,0,.12) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(88deg,rgba(255,255,255,.06) 0 1px,transparent 1px 13px),
    linear-gradient(180deg,var(--wood2),var(--wood));
  box-shadow:0 8px 0 var(--ink),inset 0 0 0 2px rgba(255,210,122,.35);
}
.board svg{display:block;width:100%;height:auto;border-radius:10px;border:3px solid var(--ink)}
#token{transition:transform .28s cubic-bezier(.3,1.6,.5,1)}

/* Barra inferior */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,var(--wood2),var(--wood));border-top:3px solid var(--ink);color:#f4e6c3}
.bar-in{max-width:30rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.bag{display:flex;align-items:center;gap:.4rem}
.bag-label{font-size:.8rem;opacity:.85;margin-right:.2rem;line-height:1.1}
.slot{width:2.4rem;height:2.4rem;border:2.5px dashed rgba(244,230,195,.55);border-radius:10px;display:grid;place-items:center;font-size:1.25rem;color:rgba(244,230,195,.7);font-weight:700}
.slot.filled{border:2.5px solid var(--ink);background:var(--parch)}
.slot.new{animation:pop .45s ease;box-shadow:0 0 0 3px var(--gold),0 0 18px var(--gold)}
@media (max-width:420px){
  .bar-in{gap:.5rem}
  .slot{width:2.1rem;height:2.1rem;font-size:1.1rem;border-radius:8px}
  #slots{gap:.3rem!important}
  .dice{padding:.65rem .9rem;font-size:.95rem}
  .dice .face{font-size:1.35rem}
}
.bag{min-width:0}
.bag-count{font-family:"Alfa Slab One",Georgia,serif;font-size:.95rem;opacity:1;color:var(--gold)}
.flyer{position:fixed;z-index:60;font-size:1.8rem;pointer-events:none;transition:transform .7s cubic-bezier(.5,-.3,.6,1),opacity .7s}
.dice{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.dice .face{position:relative;top:-.34rem;width:1.6rem;height:1.6rem;font-size:1.6rem;line-height:1;font-family:system-ui;display:grid;place-items:center}
.dice-lottie{display:none;position:absolute;inset:-.3rem}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.2)}100%{transform:scale(1)}}

/* Tarjeta de pergamino */
.overlay{position:fixed;inset:0;z-index:20;background:rgba(8,14,9,.6);display:none;align-items:flex-end;justify-content:center;
  padding:1rem;padding-top:calc(1rem + env(safe-area-inset-top,0px));padding-bottom:calc(5.6rem + env(safe-area-inset-bottom,0px))}
.overlay.on{display:flex}
.card{width:100%;max-width:26rem;max-height:100%;overflow-y:auto;color:var(--ink);
  background:radial-gradient(circle at 20% 10%,#fbf1d6,var(--parch) 50%,#e6cf9c);
  border:3px solid var(--ink);border-radius:16px;box-shadow:0 8px 0 var(--ink);animation:deal .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes deal{from{transform:translateY(40px) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
.band{padding:.6rem 1rem;border-bottom:3px solid var(--ink);font-family:"Alfa Slab One",Georgia,serif;display:flex;justify-content:space-between;align-items:center;color:#fff4e0}
.band #bandNum{font-family:"Figtree",sans-serif;font-weight:600;font-size:.85rem;opacity:.9}
.card[data-kind="recuerdo"] .band{background:linear-gradient(180deg,#e2583a,#a8301c)}
.card[data-kind="pista"] .band{background:linear-gradient(180deg,#e89a2c,#b8641a)}
.card[data-kind="especial"] .band{background:linear-gradient(180deg,#4f8f45,#2c5a27)}
.card-body{padding:1rem 1.1rem 1.25rem}
.card h2{font-size:1.35rem;line-height:1.2;margin:.2rem 0 .9rem}
.card p{margin:.3rem 0 .8rem}

/* Tambor visto desde arriba: el parche hace de pantalla */
.drumtop{display:none;position:relative;width:min(100%,16.5rem);aspect-ratio:1;margin:0 auto 1.1rem;filter:drop-shadow(0 6px 0 var(--ink))}
.drumtop.on{display:block}
.rim{position:absolute;inset:0}
.rim svg{display:block;width:100%;height:100%}
.skin{position:absolute;z-index:1;inset:7%;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 35%,#6fae5c,#3f7a3a 55%,#1f4a26 100%);
  box-shadow:inset 0 0 0 3px #1c120a,inset 0 0 34px rgba(10,40,10,.6)}
.skin::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 62% 70%,rgba(0,0,0,.18),transparent 30%),radial-gradient(circle at 30% 60%,rgba(0,0,0,.1),transparent 22%)}
.skin.beat{animation:thump .2s ease-out}
.skin.hum{animation:hum 1.6s ease-in-out infinite}
@keyframes thump{0%{transform:scale(1.04);filter:brightness(1.08)}100%{transform:none}}
@keyframes hum{50%{transform:scale(1.015)}}
.skin-msg{position:relative;z-index:1;text-align:center;padding:0 17%;color:#fff;font-family:"Alfa Slab One",Georgia,serif;font-size:1.05rem;line-height:1.2}
.skin-msg small{display:block;font-family:"Figtree",sans-serif;font-size:.85rem;color:#e4f3dd;margin-top:.35rem;line-height:1.3}
.skin-msg .big-ico{font-size:2.4rem;line-height:1;margin-bottom:.4rem}
.skin-msg .eq{display:flex;gap:4px;justify-content:center;height:24px;align-items:flex-end;margin-bottom:.5rem}
.skin-msg .eq i{width:6px;background:var(--ember);border-radius:2px;animation:eq .6s ease-in-out infinite alternate}
.skin-msg .eq i:nth-child(2){animation-delay:.15s;background:var(--gold)}.skin-msg .eq i:nth-child(3){animation-delay:.3s;background:var(--leaf)}.skin-msg .eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{from{height:4px}to{height:24px}}
.ytbox{position:absolute;z-index:0;inset:7%;border-radius:50%;overflow:hidden;pointer-events:none;background:#000}
.ytbox iframe,.ytbox #yt{width:100%;height:100%;border:0;display:block}

.polaroid{background:#fff;padding:.5rem .5rem 1.4rem;border:2px solid var(--ink);width:min(100%,10.5rem);margin:0 auto 1rem;transform:rotate(-2.5deg);box-shadow:4px 4px 0 var(--ink)}
.polaroid img{display:block;width:100%;aspect-ratio:1;object-fit:cover}

.opts{display:grid;gap:.5rem}
.opt{text-align:left;padding:.75rem .9rem;border:2.5px solid var(--ink);border-radius:10px;background:#fffaf0;font-weight:500;color:var(--ink)}
.opt:hover:not(:disabled){background:#ffe9b8}
.opt:disabled{cursor:default}
.opt.right{background:#cdeac2;border-color:var(--ok)}
.opt.wrong{background:#f6c8bf;border-color:var(--bad)}
.opt.faded{opacity:.45}
.feedback{font-family:"Alfa Slab One",Georgia,serif;font-size:1.1rem;margin:1rem 0 .3rem;display:none}
.feedback.on{display:block;animation:pop .35s ease}
.story{display:none;color:#5a4526}
.story.on{display:block}
.found{display:none;align-items:center;gap:.7rem;background:#ffe9b8;border:2.5px solid var(--ink);border-radius:10px;padding:.6rem .8rem;margin:.6rem 0}
.found.on{display:flex;animation:pop .45s ease}
.found b{font-size:1.8rem}
.card-actions{margin-top:1rem;display:none}
.card-actions.on{display:block}

/* Pantallas completas */
.full{position:fixed;inset:0;z-index:30;display:none;overflow-y:auto;
  background:radial-gradient(80% 60% at 50% 35%,#24502a,#0b1a10 75%);color:#f4e6c3;
  padding:calc(2rem + env(safe-area-inset-top,0px)) 1.25rem calc(2rem + env(safe-area-inset-bottom,0px))}
.full.on{display:block}
.full-in{max-width:28rem;margin:0 auto;width:100%;min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:1.2rem;text-align:center}
.full p{margin:0;font-size:1.08rem}
.full .muted{color:#b8a57c}
#intro{padding:0}
#introBlur{min-height:100%;padding:calc(2rem + env(safe-area-inset-top,0px)) 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;justify-content:center;filter:blur(18px);transition:filter 1.2s ease}
#intro.awake #introBlur{filter:blur(0)}
.logo-big{width:100%;max-height:34vh;object-fit:contain;filter:drop-shadow(0 6px 0 rgba(0,0,0,.5));transform-origin:50% 60%}
.logo-big.hit{animation:hit .22s ease-out}
@keyframes hit{0%{transform:scale(1.07) rotate(-.6deg)}100%{transform:none}}
#intro .full-in>*:not(.logo-big){opacity:0;pointer-events:none;transition:opacity .9s ease .15s}
#intro.awake .full-in>*:not(.logo-big){opacity:1;pointer-events:auto}
.tap-hint{position:absolute;left:1.25rem;right:1.25rem;bottom:calc(2rem + env(safe-area-inset-bottom,0px));
  z-index:5;display:flex;flex-direction:column;gap:.4rem;text-align:center;color:#f4e6c3;text-shadow:0 2px 6px rgba(0,0,0,.8)}
.tap-hint[hidden]{display:none}
.tap-hint p{margin:0;font-size:1.05rem}
.tap-hint p+p{color:#d8c79a;font-size:.92rem}
.leaves{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.85}
.leaves svg{width:100%;height:100%}
.step{display:none;flex-direction:column;gap:1.1rem;align-items:center}
.step.on{display:flex;animation:deal .4s ease}
.big{font-size:clamp(2rem,9vw,3rem);line-height:1.05;margin:0}
.ticket{background:radial-gradient(circle at 20% 10%,#fbf1d6,var(--parch) 50%,#e6cf9c);color:var(--ink);border:3px solid var(--ink);border-radius:16px;box-shadow:0 8px 0 #000;padding:1.25rem;width:100%;text-align:left}
.ticket h3{font-size:1.7rem;line-height:1.1;margin:0 0 .5rem}
.ticket ul{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.35rem}
.ticket li{padding-left:1.7rem;position:relative}
.ticket li span{position:absolute;left:0}
.sign{font-family:"Alfa Slab One",Georgia,serif;margin-top:1rem!important}
.drum{font-size:3rem;animation:shake .12s linear infinite}
@keyframes shake{0%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}100%{transform:rotate(-8deg)}}
.confetti{position:fixed;top:-20px;width:9px;height:18px;z-index:40;pointer-events:none;animation:fall linear forwards;border-radius:50% 0}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}