:root{
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --fibers:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.02 .4' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --ink:#2b1b10;
  --card:#c8925a;
  --card-d:#9c6a3a;
  --cream:#fff6e4;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#24160e}
body{font-family:"Baloo 2",system-ui,sans-serif;color:var(--cream);overscroll-behavior:none;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ---------- POD (the hub) ---------- */
.pod{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr auto;
  padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  overflow:hidden;
  background:
    var(--noise),
    repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 3px,transparent 3px 9px),
    radial-gradient(120% 90% at 50% 10%,#d7a56c 0%,#b07a45 45%,#6e4526 100%);
}
/* felt backdrop panel, like the inside of the pod */
.pod__felt{position:absolute;inset:clamp(8px,2vw,22px);border-radius:clamp(22px,4vw,48px);
  background:var(--noise),var(--fibers),radial-gradient(110% 80% at 50% 35%,#5a3d7a 0%,#3b2656 55%,#23153a 100%);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.18),inset 0 18px 40px rgba(0,0,0,.55),inset 0 -10px 30px rgba(255,255,255,.06),0 4px 0 #8a5a30,0 10px 22px rgba(0,0,0,.45);
}
.pod__stitch{position:absolute;inset:calc(clamp(8px,2vw,22px) + 12px);border-radius:clamp(14px,3.4vw,38px);
  border:3px dashed rgba(255,232,200,.55);pointer-events:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}
.pod>header,.pod>main,.pod>footer{position:relative;z-index:2}

/* ---------- TITLE (cardboard letters) ---------- */
.top{display:flex;align-items:flex-start;justify-content:center;padding-top:clamp(18px,3.2vh,40px);gap:14px}
.title{margin:0;text-align:center;line-height:.9;font-family:"Lilita One","Baloo 2",sans-serif;font-weight:400;letter-spacing:.02em}
.title__row{display:flex;justify-content:center;gap:.04em;font-size:clamp(20px,3.2vw,34px)}
.title__row--big{font-size:clamp(46px,8.4vw,96px);margin-top:.06em}
.l{display:inline-block;position:relative;color:var(--c,#ffd23f);
  -webkit-text-stroke:.07em var(--ink);paint-order:stroke fill;
  text-shadow:0 .06em 0 var(--ink),0 .1em 0 #fff6e4,0 .16em .1em rgba(0,0,0,.45);
  transform:rotate(var(--r,0deg)) translateY(var(--y,0px));
  animation:letterBob 3.6s ease-in-out infinite;animation-delay:var(--d,0s);transition:transform .35s var(--ease-spring)}
.l--sp{width:.3em}
.l:hover{transform:rotate(calc(var(--r) * -2)) translateY(-.12em) scale(1.12)}
@keyframes letterBob{0%,100%{translate:0 0}50%{translate:0 -.06em}}

.score{position:absolute;right:clamp(26px,4vw,56px);top:clamp(30px,4.4vh,54px);display:flex;align-items:center;gap:8px;
  font-family:"Lilita One";font-size:clamp(18px,2.2vw,26px);padding:6px 14px 6px 8px;border-radius:999px;
  background:var(--noise),#fff6e4;color:var(--ink);box-shadow:0 3px 0 #b88a55,0 6px 12px rgba(0,0,0,.35);transform:rotate(3deg)}
.score__bubble{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#9fe3ff 19% 45%,#2f9bd6 75%);box-shadow:inset 0 0 0 2px var(--ink)}
.score.bump{animation:bump .4s var(--ease-spring)}
@keyframes bump{40%{transform:rotate(-4deg) scale(1.25)}}

/* ---------- STAGE ---------- */
.stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(12px,3vw,48px);
  padding:0 clamp(24px,5vw,80px);min-height:0}

/* ---------- GUMBALL ---------- */
.hero{position:relative;display:grid;place-items:center;min-height:0}
.gumball{position:relative;width:min(36vw,58vh,440px);aspect-ratio:1;display:block;touch-action:manipulation}
.gumball__body{position:absolute;inset:0;transform-origin:50% 100%;
  transform:translate(var(--gx,0px),var(--gy,0px)) rotate(var(--gr,0deg)) scale(var(--gsx,1),var(--gsy,1));will-change:transform}
.gumball__sticker{position:absolute;inset:0;border-radius:50%;
  background:#fffdf6;padding:3.2%;
  box-shadow:0 0 0 3px rgba(0,0,0,.08),0 10px 0 -2px #d9cfbd,0 18px 30px rgba(0,0,0,.5);
  animation:idle 3.2s ease-in-out infinite}
.gumball__sticker>img:first-child{width:100%;height:100%;display:block;border-radius:50%;pointer-events:none}
/* head layer = same pixels lifted off the sticker for a 3D pop-out */
.gumball__head{position:absolute;left:calc(3.2% + 93.6% * .2402);top:calc(3.2% + 93.6% * .0692);width:calc(93.6% * .5731);
  pointer-events:none;filter:drop-shadow(0 6px 4px rgba(0,0,0,.45));transform-origin:50% 90%;animation:headTilt 3.2s ease-in-out infinite}
.gumball__sticker::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.35) 0%,transparent 28%,transparent 70%,rgba(0,0,0,.15) 100%)}
.gumball__stand{position:absolute;left:50%;bottom:-9%;width:44%;height:16%;transform:translateX(-50%);
  background:var(--noise),repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 7px),linear-gradient(#d6a26a,#a9733f);
  clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);border-radius:4px;z-index:-1}
.gumball__shadow{position:absolute;left:50%;bottom:-13%;width:70%;height:8%;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(rgba(0,0,0,.55),transparent 70%);z-index:-2;animation:shadow 3.2s ease-in-out infinite}
@keyframes idle{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-3.5%) rotate(1.5deg)}}
@keyframes headTilt{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg) translateY(-1.5%)}}
@keyframes shadow{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(.86);opacity:.7}}
.gumball.wave .gumball__sticker{animation:wave 1s ease-in-out}
@keyframes wave{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}

.speech{position:absolute;z-index:3;top:-2%;right:-2%;max-width:min(240px,46vw);padding:10px 16px;
  font-weight:800;font-size:clamp(14px,1.6vw,19px);line-height:1.15;color:var(--ink);
  background:var(--noise),#fff;border-radius:22px 22px 22px 6px;box-shadow:0 0 0 3px var(--ink),0 6px 0 3px rgba(0,0,0,.25);
  transform:rotate(4deg) scale(var(--ss,1));transform-origin:0 100%;transition:transform .3s var(--ease-spring)}
.speech::after{content:"";position:absolute;left:10px;bottom:-14px;border:9px solid transparent;border-top:14px solid #fff;filter:drop-shadow(0 3px 0 var(--ink))}
.speech.pop{--ss:1.12}

.deco{position:absolute;pointer-events:none}
.deco--star{left:4%;top:8%;font-size:clamp(28px,4vw,52px);color:#ffd23f;-webkit-text-stroke:2px var(--ink);transform:rotate(-14deg);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(346deg)}}
.deco--tape{left:8%;bottom:10%;width:90px;height:26px;background:rgba(255,246,200,.6);transform:rotate(-24deg);
  clip-path:polygon(0 8%,6% 0,12% 10%,18% 0,24% 8%,100% 0,100% 100%,94% 92%,88% 100%,82% 92%,0 100%)}

/* ---------- MENU (felt patches) ---------- */
.menu{display:flex;flex-direction:column;gap:clamp(10px,2vh,20px);align-items:flex-start;padding-right:clamp(0px,2vw,30px)}
.item{--c:#e8562a;position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;
  width:min(100%,420px);padding:clamp(10px,1.6vh,16px) 22px clamp(10px,1.6vh,16px) 16px;text-decoration:none;color:#fff;
  border-radius:18px 14px 20px 12px;
  background:var(--noise),var(--fibers),radial-gradient(120% 140% at 30% 20%,color-mix(in srgb,var(--c) 80%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000));
  box-shadow:0 5px 0 color-mix(in srgb,var(--c) 55%,#000),0 12px 18px rgba(0,0,0,.4);
  transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot,0deg)) scale(var(--sc,1));will-change:transform;outline:none;touch-action:manipulation}
.item::before{content:"";position:absolute;inset:7px;border-radius:12px 9px 14px 8px;border:2.5px dashed rgba(255,255,255,.75);pointer-events:none}
.item:nth-child(1){--c:#e8562a;margin-left:2%}
.item:nth-child(2){--c:#2f9bd6;margin-left:9%}
.item:nth-child(3){--c:#6fb534;margin-left:4%}
.item:nth-child(4){--c:#e9a92a;margin-left:11%}
.item__icon{grid-row:1/3;width:clamp(44px,5.2vw,62px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
  background:var(--noise),#fff6e4;box-shadow:inset 0 0 0 3px var(--ink),0 3px 0 rgba(0,0,0,.3);transform:rotate(-6deg)}
.item__icon svg{width:72%;height:72%}
.item--play .item__icon svg path{fill:#e8562a}
.item__label{font-family:"Lilita One";font-size:clamp(24px,3vw,38px);line-height:1;letter-spacing:.01em;
  -webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}
.item__sub{font-weight:700;font-size:clamp(12px,1.3vw,15px);opacity:.92;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.item__pin{position:absolute;right:14px;top:-9px;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 15%,#ff5a7a 18% 60%,#b0173a 100%);box-shadow:0 0 0 2.5px var(--ink),0 3px 3px rgba(0,0,0,.4)}
.item:focus-visible{box-shadow:0 0 0 4px #fff,0 0 0 8px var(--ink),0 12px 18px rgba(0,0,0,.4)}

/* ---------- HINT BAR ---------- */
.hints{display:flex;justify-content:center;gap:clamp(12px,3vw,34px);align-items:center;padding:6px 0 clamp(18px,3vh,34px);
  font-weight:800;font-size:clamp(12px,1.3vw,15px);color:rgba(255,246,228,.85);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.btn{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;font-style:normal;margin-right:4px;
  background:#1d1328;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 2px 0 #000}
.btn--x{color:#8fb6ff}.btn--o{color:#ff7a8a}
.hints__tap{opacity:.75}

/* ---------- PRIZE BUBBLES ---------- */
.bubbles{position:absolute;inset:0;z-index:1;pointer-events:none}
.bubble{position:absolute;bottom:-60px;width:var(--s);height:var(--s);border-radius:50%;pointer-events:auto;cursor:pointer;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 10%,rgba(255,255,255,.25) 13% 40%,rgba(160,220,255,.25) 60%,rgba(120,190,255,.55) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 0 12px rgba(140,210,255,.35);
  animation:rise var(--t) linear forwards,sway 3s ease-in-out infinite}
.bubble::after{content:"";position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 15%,var(--bc) 25% 70%);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35)}
@keyframes rise{to{transform:translateY(calc(-100dvh - 120px))}}
@keyframes sway{50%{margin-left:18px}}
.popfx{position:absolute;z-index:5;pointer-events:none;font-family:"Lilita One";font-size:22px;color:#ffd23f;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;animation:popfx .8s ease-out forwards}
@keyframes popfx{to{transform:translateY(-50px) scale(1.4);opacity:0}}

/* ---------- PANEL (popit) ---------- */
.panel-wrap{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(20,10,30,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.panel-wrap[hidden]{display:none}
.panel{position:relative;width:min(560px,100%);max-height:85dvh;overflow:auto;padding:30px 28px 28px;color:var(--ink);border-radius:26px 20px 28px 18px;
  background:var(--noise),repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 2px,transparent 2px 8px),linear-gradient(#e2b47d,#c48d55);
  box-shadow:0 8px 0 #8a5a30,0 20px 40px rgba(0,0,0,.6);animation:panelIn .5s var(--ease-spring)}
.panel::before{content:"";position:absolute;inset:10px;border:3px dashed rgba(60,30,10,.4);border-radius:18px;pointer-events:none}
@keyframes panelIn{from{transform:scale(.4) rotate(-12deg);opacity:0}}
.panel__title{margin:0 0 12px;font-family:"Lilita One";font-weight:400;font-size:clamp(30px,6vw,44px);color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}
.panel__body{font-weight:700;font-size:17px;line-height:1.4}
.panel__big{font-size:22px}
.panel__close{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;background:#ff5a7a;color:#fff;font-weight:800;font-size:20px;box-shadow:0 0 0 3px var(--ink),0 4px 0 var(--ink);z-index:2}
.gallery{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.polaroid{margin:0;width:140px;padding:8px 8px 4px;background:#fff;box-shadow:0 6px 12px rgba(0,0,0,.35);transform:rotate(var(--r,-3deg))}
.polaroid:nth-child(2){--r:4deg}.polaroid:nth-child(3){--r:-1deg}
.polaroid img{width:100%;aspect-ratio:1;object-fit:contain;background:#3b2656;display:block}
.polaroid figcaption{text-align:center;font-weight:800;padding:4px 0}
.polaroid--empty span{display:grid;place-items:center;aspect-ratio:1;background:#eee;font-size:48px;color:#bbb}
.toggle{display:flex;align-items:center;gap:12px;margin:12px 0;font-size:20px;cursor:pointer}
.toggle input{position:absolute;opacity:0}
.toggle__knob{width:62px;height:34px;border-radius:999px;background:#8a5a30;box-shadow:inset 0 0 0 3px var(--ink);position:relative;transition:background .2s}
.toggle__knob::after{content:"";position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff6e4;box-shadow:0 0 0 3px var(--ink);transition:transform .3s var(--ease-spring)}
.toggle input:checked+.toggle__knob{background:#6fb534}
.toggle input:checked+.toggle__knob::after{transform:translateX(28px)}
.toggle input:focus-visible+.toggle__knob{outline:3px solid #fff}

/* ---------- RESPONSIVE (phone) ---------- */
@media (max-width:760px), (max-aspect-ratio:4/5){
  .top{padding-top:clamp(22px,3.5vh,36px)}
  .score{position:fixed;top:auto;right:max(32px,calc(env(safe-area-inset-right) + 24px));bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px));font-size:15px;padding:3px 10px 3px 5px;z-index:4}
  .score__bubble{width:18px;height:18px}
  .stage{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:0 18px;gap:8px;align-content:center}
  .gumball{width:min(64vw,34dvh,320px)}
  .speech{top:-4%;right:0;max-width:52vw;font-size:14px;padding:8px 12px}
  .deco--tape{display:none}
  .menu{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;padding:0 4px 4px;align-items:stretch}
  .item{width:100%;margin:0!important;grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;text-align:center;padding:14px 8px 12px;row-gap:2px}
  .item__icon{grid-row:auto;width:46px}
  .item__label{font-size:clamp(20px,6.2vw,26px)}
  .item__sub{font-size:11.5px}
  .hints{padding-bottom:22px;font-size:11.5px;gap:12px;justify-content:flex-start;padding-left:14px}
  .hints__tap{display:none}
}

/* reduced motion (system or toggle) */
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;animation-iteration-count:1!important}}
.no-motion *{animation:none!important}

/* ===== SOLO "GRAJ" CENTERPIECE ===== */
.menu--solo{position:relative;align-items:center;justify-content:center;padding:0;display:flex}
.menu--solo::before{content:"";position:absolute;left:50%;top:50%;width:min(620px,130%);aspect-ratio:1;translate:-50% -50%;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,90,.20) 0 10deg,transparent 10deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:burst 30s linear infinite}
@keyframes burst{to{rotate:360deg}}
.menu--solo .item{z-index:1;margin:0!important;width:min(100%,470px);grid-template-columns:auto 1fr;column-gap:20px;
  padding:clamp(20px,3.2vh,30px) 34px clamp(20px,3.2vh,30px) 24px;border-radius:30px 24px 34px 22px;
  box-shadow:0 8px 0 color-mix(in srgb,var(--c) 50%,#000),0 22px 34px rgba(0,0,0,.5),0 0 0 6px rgba(255,246,228,.12);
  animation:breathe 2.4s ease-in-out infinite}
.menu--solo .item::before{inset:10px;border-radius:22px 17px 25px 15px;border-width:3.5px}
.menu--solo .item::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.28),transparent 35%,transparent 70%,rgba(0,0,0,.18))}
.menu--solo .item__icon{width:clamp(78px,8.5vw,108px);box-shadow:inset 0 0 0 4px var(--ink),0 5px 0 rgba(0,0,0,.3);animation:iconSpin 2.4s ease-in-out infinite}
.menu--solo .item__label{font-size:clamp(58px,7.6vw,96px);-webkit-text-stroke:8px var(--ink);text-shadow:0 6px 0 var(--ink)}
.menu--solo .item__sub{font-size:clamp(14px,1.6vw,19px);margin-top:2px}
.menu--solo .item__pin{width:30px;height:30px;right:22px;top:-12px}
.menu--solo .item:nth-child(1){--c:#e8562a}
@keyframes breathe{0%,100%{scale:1}50%{scale:1.035}}
@keyframes iconSpin{0%,100%{rotate:-8deg}50%{rotate:6deg}}

/* tiny icon toggles */
.toggles{position:absolute;left:clamp(30px,4vw,58px);top:clamp(30px,4.4vh,54px);display:flex;gap:8px;transform:rotate(-3deg)}
.tbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--noise),#fff6e4;box-shadow:0 3px 0 #b88a55,0 6px 10px rgba(0,0,0,.35);transition:transform .25s var(--ease-spring)}
.tbtn:hover{transform:scale(1.12) rotate(-6deg)}.tbtn:active{transform:scale(.9)}
.tbtn svg{width:24px;height:24px}
.tbtn .off{display:none}
.tbtn[aria-pressed="false"]{opacity:.65}
.tbtn[aria-pressed="false"] .off{display:inline}.tbtn[aria-pressed="false"] .on{display:none}
.tbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}

@media (max-width:760px), (max-aspect-ratio:4/5){
  .stage{grid-template-rows:minmax(0,1fr) auto;gap:18px}
  .gumball{width:min(72vw,40dvh,340px)}
  .menu--solo{display:flex;padding:0 4px 8px}
  .menu--solo::before{width:120vw}
  .menu--solo .item{width:100%;grid-template-columns:auto 1fr;grid-template-rows:auto auto;justify-items:start;text-align:left;padding:18px 22px 18px 18px;column-gap:16px}
  .menu--solo .item__icon{grid-row:1/3;width:76px}
  .menu--solo .item__label{font-size:clamp(50px,15vw,64px);-webkit-text-stroke:7px var(--ink)}
  .menu--solo .item__sub{font-size:14px}
  .toggles{position:fixed;left:auto;top:auto;right:max(100px,calc(env(safe-area-inset-right) + 92px));bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px));z-index:4;gap:6px}
  .tbtn{width:32px;height:32px}.tbtn svg{width:19px;height:19px}
}
@media (max-width:760px), (max-aspect-ratio:4/5){
  .stage{grid-template-rows:auto auto;align-content:space-evenly;gap:26px}
  .menu--solo{padding-bottom:18px}
  .hints{padding-bottom:26px}
}