* { margin:0; padding:0; box-sizing:border-box; }
  html, body {
    height:100%; overflow:hidden;
    font-family: ui-rounded, "Segoe UI", "Comic Sans MS", system-ui, sans-serif;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;
    touch-action:none;
  }
  body { display:flex; flex-direction:column; background:#bfe9ff; }

  /* ============ ESCENARIO ============ */
  #stage {
    position:relative; flex:1; overflow:hidden;
    background: linear-gradient(#7cc9ff 0%, #aee3ff 55%, #d8f3ff 100%);
  }
  .sun {
    position:absolute; top:5%; left:6%;
    width:90px; height:90px; border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #fff6b0, #ffd93d 70%);
    box-shadow: 0 0 60px 20px rgba(255,217,61,.55);
    animation: sunPulse 4s ease-in-out infinite;
  }
  @keyframes sunPulse { 50% { box-shadow: 0 0 80px 30px rgba(255,217,61,.7); } }
  .cloud {
    position:absolute; height:36px; border-radius:20px;
    background:#fff; opacity:.9;
    animation: drift linear infinite;
  }
  .cloud::before, .cloud::after {
    content:""; position:absolute; background:#fff; border-radius:50%;
  }
  .cloud::before { width:44px; height:44px; top:-20px; left:14px; }
  .cloud::after  { width:30px; height:30px; top:-12px; right:14px; }
  @keyframes drift { from { transform:translateX(-160px); } to { transform:translateX(110vw); } }
  .hill {
    position:absolute; bottom:-40px; border-radius:50%;
  }
  .hill.h1 { left:-15%; width:60%; height:180px; background:#8fd66b; }
  .hill.h2 { right:-20%; width:70%; height:220px; background:#a5e07f; }
  #grass {
    position:absolute; left:0; right:0; bottom:0; height:26px;
    background: linear-gradient(#6cc24a, #58a83a);
    border-top: 4px solid #7fd15c;
  }

  /* ============ BOTONES ============ */
  #controls {
    position:absolute; top:12px; right:12px; z-index:50;
    display:flex; gap:12px;
  }
  #modeBar {
    position:absolute; top:12px; left:12px; z-index:50;
    display:flex; gap:12px;
  }
  .ctrl-btn {
    width:68px; height:68px; border-radius:50%;
    border:4px solid #fff; background:rgba(255,255,255,.85);
    font-size:34px; line-height:1; cursor:pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    display:flex; align-items:center; justify-content:center;
    transition: transform .15s;
  }
  .ctrl-btn:active { transform:scale(.88); }
  .mode-btn { opacity:.5; }
  .mode-btn.active {
    opacity:1; border-color:#ffd23f; transform:scale(1.1);
    box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 0 0 4px rgba(255,210,63,.4);
  }
  .mode-btn.active:active { transform:scale(.95); }

  /* ============ ESTRELLAS Y RETO ============ */
  #starBox {
    position:absolute; top:16px; left:50%; transform:translateX(-50%);
    z-index:50; background:rgba(255,255,255,.92);
    border-radius:40px; padding:8px 22px;
    font-size:30px; font-weight:800; color:#f8961e;
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
    display:flex; align-items:center; gap:10px;
  }
  #challenge {
    position:absolute; top:96px; left:50%; transform:translateX(-50%);
    z-index:48; background:#fff; border-radius:40px;
    padding:14px 26px 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
    display:none; flex-direction:column; align-items:center; gap:10px;
    cursor:pointer;
  }
  #challenge.show { display:flex; animation: challengeIn .5s cubic-bezier(.34,1.56,.64,1); }
  @keyframes challengeIn { from { transform:translateX(-50%) scale(.2); } to { transform:translateX(-50%) scale(1); } }
  #challenge .num { font-size:60px; font-weight:800; line-height:1; }
  #challenge .dots { display:grid; grid-template-columns:repeat(5, 20px); gap:7px; }
  #challenge .dot {
    width:20px; height:20px; border-radius:50%;
    border:2px solid rgba(0,0,0,.2);
  }
  .fly-star { position:absolute; font-size:44px; z-index:70; pointer-events:none; }

  /* ============ OPCIONES (La fusión) ============ */
  #choices {
    position:absolute; top:96px; left:50%; transform:translateX(-50%);
    z-index:48; display:none; gap:16px; align-items:flex-end;
  }
  #choices.show { display:flex; animation: challengeIn .5s cubic-bezier(.34,1.56,.64,1); }
  .choice {
    background:#fff; border:4px solid #fff; border-radius:22px;
    min-width:76px; padding:12px 14px;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.2);
    transition: transform .15s;
  }
  .choice:active { transform:scale(.92); }
  .choice.no { animation: wiggle .5s ease; }
  .mini-tower { display:flex; flex-direction:column-reverse; }
  .mini-block {
    border-radius:5px; border:2px solid rgba(0,0,0,.2);
    background-image: linear-gradient(160deg, rgba(255,255,255,.45), rgba(255,255,255,0) 45%);
  }
  .choice-num { font-size:30px; font-weight:800; line-height:1; }

  /* ============ REGALOS (accesorios desbloqueables) ============ */
  #accPanel {
    position:absolute; top:96px; right:12px; z-index:55;
    background:rgba(255,255,255,.96); border-radius:24px; padding:14px;
    display:none; grid-template-columns:repeat(3, 72px); gap:12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
  }
  #accPanel.show { display:grid; }
  .acc-btn {
    width:72px; height:72px; border-radius:18px;
    border:3px solid #eee; background:#fff;
    font-size:32px; line-height:1; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  }
  .acc-btn:active { transform:scale(.9); }
  .acc-btn.sel { border-color:#ffd23f; box-shadow:0 0 0 4px rgba(255,210,63,.4); }
  .acc-btn.locked { opacity:.6; }
  .acc-btn .cost { font-size:13px; font-weight:800; color:#f8961e; }
  .ctrl-btn.pulse { animation: giftPulse 1s ease-in-out 3; }
  @keyframes giftPulse { 50% { transform:scale(1.2) rotate(-8deg); } }
  .hat {
    position:absolute; left:50%; transform:translateX(-50%) rotate(-8deg);
    pointer-events:none; z-index:2; line-height:1;
  }

  @media (max-width: 820px) {
    #modeBar, #controls { flex-wrap:wrap; width:152px; }
    #controls { justify-content:flex-end; }
    #accPanel { top:176px; }
  }

  /* ============ TORRES Y BLOQUES ============ */
  .tower {
    position:absolute; bottom:22px;
    transition: left .25s ease, bottom .3s cubic-bezier(.34,1.56,.64,1);
    z-index:10;
  }
  .tower.lifted {
    transition: none; z-index:40;
    filter: drop-shadow(0 12px 10px rgba(0,0,0,.25));
  }
  .tower.lifted .blocks { transform:rotate(-3deg) scale(1.05); }
  .blocks { position:relative; transition: transform .2s, filter .2s; transform-origin:bottom center; }
  .tower.drop-glow .blocks, .tower.fuse-glow .blocks {
    transform:scale(1.07);
    filter: drop-shadow(0 0 10px rgba(255,255,255,.95)) drop-shadow(0 0 20px rgba(255,210,63,.9));
  }
  .block {
    position:absolute; left:0;
    border-radius:14px;
    border:3px solid rgba(0,0,0,.22);
    background-image: linear-gradient(160deg, rgba(255,255,255,.45), rgba(255,255,255,0) 45%);
    box-shadow: inset 0 -5px 0 rgba(0,0,0,.15);
    cursor:grab;
  }
  .block.pop { animation:pop .35s cubic-bezier(.34,1.56,.64,1); }
  @keyframes pop { 0% { transform:scale(.2); } 70% { transform:scale(1.15); } 100% { transform:scale(1); } }
  .tower.wiggle .blocks { animation: wiggle .5s ease; }
  @keyframes wiggle {
    0%,100% { transform:rotate(0); }
    20% { transform:rotate(-6deg); } 40% { transform:rotate(5deg); }
    60% { transform:rotate(-4deg); } 80% { transform:rotate(2deg); }
  }

  /* carita del monstruo (en el bloque de arriba) */
  .face { position:absolute; inset:0; pointer-events:none; }
  .eye {
    position:absolute; top:18%; width:34%; height:34%;
    background:#fff; border-radius:50%;
    border:2px solid rgba(0,0,0,.25);
    display:flex; align-items:center; justify-content:center;
  }
  .eye .pupil {
    width:45%; height:45%; background:#222; border-radius:50%;
    animation: blink 4.5s infinite;
  }
  @keyframes blink { 0%,94%,100% { transform:scaleY(1); } 97% { transform:scaleY(.1); } }
  .eye.solo { left:33%; }
  .eye.left  { left:12%; }
  .eye.right { right:12%; }
  .mouth {
    position:absolute; bottom:14%; left:30%; width:40%; height:26%;
    border:3px solid rgba(0,0,0,.55); border-top:none;
    border-radius: 0 0 40px 40px;
    background: rgba(255,255,255,.25);
  }

  /* globito con el numeral */
  .badge {
    position:absolute; left:50%;
    transform:translateX(-50%);
    background:#fff; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800;
    box-shadow: 0 3px 8px rgba(0,0,0,.18);
    transition: bottom .3s cubic-bezier(.34,1.56,.64,1);
    pointer-events:none;
  }

  /* ============ BANDEJA ============ */
  #tray {
    position:relative; height:118px; z-index:30;
    background: linear-gradient(#c98d4e, #a96f35);
    border-top:6px solid #e0a866;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 -4px 12px rgba(0,0,0,.15);
  }
  #source { position:relative; width:180px; height:92px; cursor:grab; }
  #source .pile {
    position:absolute; bottom:6px; width:72px; height:72px;
    border-radius:14px; border:3px solid rgba(0,0,0,.22);
    background-image: linear-gradient(160deg, rgba(255,255,255,.45), rgba(255,255,255,0) 45%);
    animation: jiggle 2.2s ease-in-out infinite;
    pointer-events:none;
  }
  #source .pile.p1 { left:8px;  background-color:#e63946; transform:rotate(-7deg); }
  #source .pile.p2 { left:56px; background-color:#ffd23f; transform:rotate(4deg); animation-delay:.3s; bottom:12px; }
  #source .pile.p3 { left:104px; background-color:#3a86ff; transform:rotate(-3deg); animation-delay:.6s; }
  @keyframes jiggle { 50% { margin-bottom:7px; } }
  #source .spark { position:absolute; top:-14px; right:6px; font-size:26px; animation: twinkle 1.6s infinite; pointer-events:none; }
  @keyframes twinkle { 50% { opacity:.3; transform:scale(.8); } }

  /* manita que enseña los gestos */
  #hint {
    position:absolute; z-index:60;
    font-size:52px; pointer-events:none;
    display:none;
  }

  /* bloque fantasma que sigue al dedo */
  #ghost {
    position:fixed; z-index:100; pointer-events:none;
    border-radius:14px; border:3px solid rgba(0,0,0,.22);
    background-image: linear-gradient(160deg, rgba(255,255,255,.45), rgba(255,255,255,0) 45%);
    box-shadow: 0 10px 16px rgba(0,0,0,.25);
    transform: rotate(-5deg) scale(1.05);
  }

  /* ============ PORTADA ============ */
  #intro {
    position:fixed; inset:0; z-index:200;
    background: linear-gradient(#7cc9ff, #d8f3ff);
    display:flex; align-items:center; justify-content:center;
    padding:16px;
    transition: opacity .5s, transform .5s;
  }
  #intro.hide { opacity:0; transform:scale(1.15); pointer-events:none; }
  .intro-card {
    background:rgba(255,255,255,.95); border-radius:32px;
    padding:28px 34px; max-width:520px; width:100%;
    box-shadow: 0 16px 40px rgba(0,0,0,.25);
    display:flex; flex-direction:column; align-items:center; gap:14px;
    text-align:center;
  }
  .intro-card .monster { font-size:64px; line-height:1; animation: introBounce 1.6s ease-in-out infinite; }
  @keyframes introBounce { 50% { transform:translateY(-12px) rotate(-6deg); } }
  .intro-card h1 {
    font-size:38px; color:#5e60ce; letter-spacing:1px;
    text-shadow: 2px 2px 0 #ffd23f;
  }
  .intro-card p { font-size:17px; color:#444; line-height:1.35; }
  .intro-modes {
    display:flex; flex-direction:column; gap:8px;
    text-align:left; font-size:17px; color:#333;
  }
  .intro-modes span { font-size:22px; margin-right:8px; }
  #btnPlay {
    margin-top:6px; border:none; cursor:pointer;
    background: linear-gradient(#56c02b, #3f9c1c);
    color:#fff; font-size:28px; font-weight:800;
    font-family:inherit;
    padding:16px 42px; border-radius:50px;
    box-shadow: 0 6px 0 #2e7a12, 0 10px 18px rgba(0,0,0,.25);
    transition: transform .12s;
  }
  #btnPlay:active { transform:translateY(4px); box-shadow: 0 2px 0 #2e7a12; }

  .confetti-piece { position:absolute; border-radius:3px; pointer-events:none; z-index:45; }
  .poof { position:absolute; font-size:46px; pointer-events:none; z-index:45; animation: poofAnim .6s ease-out forwards; }
  @keyframes poofAnim { to { opacity:0; transform:scale(2.2) translateY(-30px); } }