/* =========================================================
   UGA GAMES — shared, isolated visual system
   ========================================================= */
.uga-game-page{background:var(--sky);--ug-coral:#f47b68;--ug-blue:#6fd6e8;--ug-turquoise:#5ed8c8;--ug-green:#9bdd57;--ug-yellow:#ffe184;--ug-purple:#aa83cd;--ug-cream:#fffaf0}
.uga-game-main{position:relative;z-index:2;isolation:isolate;overflow:hidden;background:transparent}
.uga-game-page>.grass{position:relative;z-index:1}
.uga-game-shell{position:relative;min-height:780px;padding:28px 0 100px}
.uga-game-wrap{position:relative;z-index:3;width:min(1180px,calc(100% - 36px));margin:auto}
.uga-game-back{display:flex;align-items:center;width:max-content;min-height:46px;margin:0 0 12px auto;padding:8px 18px;border:3px solid var(--ink);border-radius:999px;background:var(--cream);color:var(--ink);font-family:var(--font-display);font-weight:700;text-decoration:none;box-shadow:0 5px 0 rgba(90,51,32,.16)}
.uga-game-back::before{content:"←";margin-right:8px;font-size:1.25em}
.uga-game-header{text-align:center;margin:0 auto 15px}.uga-game-kicker{margin:0;color:var(--orange-deep);font-family:var(--font-display);font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.uga-game-header h1{position:relative;z-index:1;isolation:isolate;display:inline-block;margin:.05em 0;padding:.12em .08em;color:var(--ink);font-size:clamp(2.2rem,6vw,4.2rem)}
.uga-game-header h1::before{content:"";position:absolute;z-index:-1;left:-.12em;top:50%;width:1.35em;aspect-ratio:1;transform:translate(-8%,-52%) rotate(-11deg);background:#f7c68d;-webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat}
.uga-game-intro{max-width:56ch;margin:8px auto 0;color:var(--ink);font-family:var(--font-display);font-size:clamp(1rem,2.2vw,1.28rem);font-weight:600}
.uga-game-tools{display:flex;justify-content:center;margin:0 0 14px}.uga-sound{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px;border:3px solid var(--ink);border-radius:999px;background:var(--cream);color:var(--ink);font-family:var(--font-display);box-shadow:0 4px 0 rgba(90,51,32,.15)}
.uga-sound>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--ink);color:#fff}.uga-sound[aria-pressed="true"]{background:#c8ee92}
.uga-game-card{position:relative;z-index:4;min-height:500px;padding:22px;border-radius:44px;background:rgba(255,252,240,.95);box-shadow:0 14px 0 rgba(90,51,32,.12);overflow:hidden}
.ug-btn{min-height:52px;padding:10px 24px;border:3px solid var(--ink);border-radius:999px;background:var(--orange);color:var(--ink);font-family:var(--font-display);font-size:1rem;font-weight:800;box-shadow:0 5px 0 rgba(90,51,32,.18);transition:transform .16s ease,box-shadow .16s ease}
.ug-btn:hover{transform:translateY(-2px)}.ug-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(90,51,32,.18)}.ug-btn--cream{background:var(--cream)}
.ug-status{min-height:1.5em;margin:12px 0 0;text-align:center;color:var(--ink-soft);font-family:var(--font-display);font-weight:700}
.uga-game-cloud{position:absolute;z-index:0;width:180px;height:68px;border-radius:999px;background:#bdf5fb;pointer-events:none}.uga-game-cloud::before,.uga-game-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}.uga-game-cloud::before{width:88px;height:88px;left:25px;bottom:7px}.uga-game-cloud::after{width:68px;height:68px;right:17px;bottom:6px}.cloud-a{left:-45px;top:210px;transform:scale(.8)}.cloud-b{right:-40px;top:480px;transform:scale(.58)}

/* Fly the Kite */
.fly-stage{--fly-cloud-x:0px;--fly-hill-x:0px;--fly-ground-x:0px;position:relative;min-height:520px;border-radius:32px;overflow:hidden;background:var(--sky);touch-action:manipulation;cursor:pointer;isolation:isolate}.ug-person{position:relative;width:76px;height:76px;border-radius:48% 48% 45% 45%;background:#ffad91;box-shadow:inset 0 12px #713a2d}.ug-person::before,.ug-person::after{content:"";position:absolute;top:42%;width:7px;height:11px;border-radius:50%;background:#532a16}.ug-person::before{left:27%}.ug-person::after{right:27%}.ug-person.lulu{width:58px;height:65px;background:#ffd458;box-shadow:none}.ug-person.lulu::before,.ug-person.lulu::after{top:38%}.fly-stage.is-fallen .lulu,.fly-stage.is-success .lulu{animation:friendIn .6s ease forwards}.fly-stage.is-fallen .uga{animation:littleSigh 1.5s ease 2}.fly-stage.is-success .uga,.fly-stage.is-success .lulu{animation:happyBounce .65s ease 3}@keyframes kiteTap{0%,100%{transform:scale(1)}45%{transform:scale(.92,1.08)}}@keyframes kiteLoop{50%{transform:translateY(-34px) rotate(190deg) scale(.94)}100%{transform:rotate(360deg)}}@keyframes treeNudge{45%{transform:translate3d(var(--tree-x,0),0,0) rotate(3deg)}}@keyframes friendIn{to{opacity:1;transform:none}}@keyframes littleSigh{50%{transform:translateY(4px) scaleY(.96)}}@keyframes happyBounce{50%{transform:translateY(-10px) scale(1.04)}}@keyframes sparkPop{50%{opacity:1;transform:scale(1.35) rotate(20deg)}}

/* Lulu Piano */
.piano-panel{min-height:500px;display:grid;align-content:center;gap:24px}.piano-mode{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.piano-mode span{padding:8px 16px;border-radius:999px;background:#c8ee92;color:var(--ink);font-family:var(--font-display);font-weight:800}.piano-mode button{border:0;border-radius:999px;padding:8px 16px;color:var(--ink-soft);font-weight:700}
.lulu-keys{display:grid;grid-template-columns:repeat(8,minmax(58px,1fr));align-items:end;gap:clamp(5px,1.2vw,14px);padding:40px 8px 10px}.lulu-key{position:relative;min-width:0;aspect-ratio:.65;border:0;border-radius:46% 46% 38% 38%;background:var(--lulu);box-shadow:inset 0 -12px color-mix(in srgb,var(--lulu),#764426 18%),0 8px 0 rgba(90,51,32,.12);transform-origin:50% 100%;touch-action:none}.lulu-key::before,.lulu-key::after{content:"";position:absolute;top:30%;width:10%;aspect-ratio:.7;border-radius:50%;background:#4b2817}.lulu-key::before{left:29%}.lulu-key::after{right:29%}.lulu-mouth{position:absolute;left:50%;top:50%;width:18%;height:7%;border-radius:0 0 99px 99px;background:#6e3626;transform:translateX(-50%);transition:height .1s}.lulu-note-label{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);font-family:var(--font-display);font-weight:800;color:#5a3320}.lulu-key.is-playing{animation:luluPlay .42s cubic-bezier(.2,.9,.2,1.25);filter:brightness(1.07)}.lulu-key.is-playing .lulu-mouth{height:16%;border-radius:50%}.music-float{position:absolute;z-index:5;left:50%;top:2%;color:var(--ink);font-size:1.7rem;font-weight:800;pointer-events:none;animation:noteFloat .7s ease forwards}
.lulu-key:nth-child(2).is-playing{animation-name:luluTilt}.lulu-key:nth-child(4).is-playing{animation-name:luluStretch}.lulu-key:nth-child(6).is-playing{animation-name:luluSwing}
@keyframes luluPlay{45%{transform:translateY(10px) scale(1.07,.86)}75%{transform:translateY(-7px) scale(.97,1.04)}}@keyframes luluTilt{45%{transform:translateY(8px) rotate(-5deg) scaleY(.9)}}@keyframes luluStretch{45%{transform:translateY(-8px) scale(.94,1.08)}}@keyframes luluSwing{45%{transform:translateY(7px) rotate(5deg) scaleY(.9)}}@keyframes noteFloat{to{opacity:0;transform:translate(-50%,-70px) rotate(12deg)}}

/* Calm Burbu */
.calm-panel{min-height:520px;display:grid;gap:24px;align-items:center}.burbu-scene{position:relative;width:100%;aspect-ratio:2048/1401;border-radius:32px;background:#8ce7f5 url("../img/calm-burbu-background.webp") center/100% 100% no-repeat;overflow:hidden;isolation:isolate}.burbu-pop-layer{position:absolute;z-index:4;inset:0;overflow:hidden;pointer-events:none}.burbu-popcorn{position:absolute;left:50%;top:13.6%;width:var(--pop-size);aspect-ratio:1.61;background:var(--pop-colour);opacity:0;will-change:transform,opacity;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 100'%3E%3Ccircle cx='83' cy='50' r='50'/%3E%3Ccircle cx='30' cy='64' r='30'/%3E%3Ccircle cx='136' cy='61' r='25'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 100'%3E%3Ccircle cx='83' cy='50' r='50'/%3E%3Ccircle cx='30' cy='64' r='30'/%3E%3Ccircle cx='136' cy='61' r='25'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 5px 4px rgba(90,51,32,.13));animation:burbuPopcorn var(--pop-duration) cubic-bezier(.18,.72,.18,1) forwards}.burbu-crater{position:absolute;z-index:3;left:50%;top:13.1%;width:25.2%;height:6.3%;border-radius:50%;background:#ffd0ae;box-shadow:inset 0 -7px #f5b28f,0 7px 10px rgba(135,76,45,.12);transform:translateX(-50%);transform-origin:50% 68%;pointer-events:none}.burbu-crater i{position:absolute;left:14%;right:14%;top:18%;height:42%;border-radius:50%;background:#a66f59;box-shadow:inset 0 5px 0 rgba(87,48,34,.16);transform-origin:50% 50%}.burbu-scene[data-level="4"] .burbu-crater{animation:craterAgitated .52s cubic-bezier(.45,.05,.55,.95) infinite}.burbu-scene[data-level="3"] .burbu-crater{animation:craterAgitated .88s cubic-bezier(.45,.05,.55,.95) infinite}.burbu-scene[data-level="2"] .burbu-crater{animation:craterSettling 1.55s ease-in-out infinite}.burbu-scene[data-level="1"] .burbu-crater{animation:craterCalm 3.4s ease-in-out infinite}.burbu-crater.is-popping i{animation:craterKick .42s cubic-bezier(.16,.88,.32,1.3)}.burbu-crater.is-heart-pop i{animation:craterHeart 1s cubic-bezier(.18,.78,.2,1)}.burbu-heart{position:absolute;z-index:5;left:45.2%;top:3.8%;width:9.6%;height:auto;overflow:visible;fill:#f25f62;filter:drop-shadow(0 7px 5px rgba(99,48,33,.16));opacity:0;transform:translateY(72%) scale(.12,.08);transform-origin:50% 88%;pointer-events:none}.burbu-heart[hidden]{display:none}.burbu-heart.is-visible{opacity:1;transform:translateY(0) scale(1);animation:burbuHeartPop 1.2s cubic-bezier(.16,.82,.24,1.18) both}
.calm-controls{text-align:center}.calm-meter{display:flex;justify-content:center;gap:8px;margin:18px 0}.calm-meter i{width:38px;height:16px;border-radius:999px;background:#d6e7e6;transition:background .6s ease,transform .6s ease}.calm-meter i.is-on:nth-child(1){background:#79d9e8}.calm-meter i.is-on:nth-child(2){background:#f6d56d}.calm-meter i.is-on:nth-child(3){background:#ff914d}.calm-meter i.is-on:nth-child(4){background:#f25f62}.calm-breathe{--breath-colour:#f25f62;position:relative;width:210px;aspect-ratio:1;border:0;background:transparent;color:var(--cream);font-family:var(--font-display);font-weight:800;filter:drop-shadow(0 9px 0 rgba(90,51,32,.15));touch-action:none;transition:transform .35s cubic-bezier(.2,.8,.2,1.15),filter .25s ease}.calm-breathe[data-level="3"]{--breath-colour:#f38a76}.calm-breathe[data-level="2"]{--breath-colour:#79d9e8}.calm-breathe[data-level="1"]{--breath-colour:#a8e7ef}.calm-breathe-head{position:absolute;inset:0;background:var(--breath-colour);transition:background-color .8s ease;-webkit-mask:url("../img/uga-head-breath-mask.webp") center/contain no-repeat;mask:url("../img/uga-head-breath-mask.webp") center/contain no-repeat}.calm-breathe b{position:absolute;z-index:1;left:50%;top:61%;width:66%;transform:translate(-50%,-50%);color:#fffaf0;font-size:clamp(.88rem,2vw,1.08rem);line-height:1.05;text-shadow:0 2px 0 rgba(90,51,32,.32);pointer-events:none}.calm-breathe:hover{transform:translateY(-3px) scale(1.025)}.calm-breathe:active{transform:translateY(2px) scale(.98)}.calm-breathe:focus-visible{outline:4px solid var(--ink);outline-offset:6px}.calm-breathe.is-holding{animation:ugaHeadBreathe 1.45s ease-in-out infinite}.calm-breathe:disabled{cursor:default;filter:drop-shadow(0 6px 0 rgba(90,51,32,.11))}.calm-reset{margin-top:16px}
@keyframes burbuPopcorn{0%{opacity:0;transform:translate3d(-50%,15%,0) scale(.16,.08) rotate(0)}15%{opacity:1;transform:translate3d(-50%,-18%,0) scale(1.18,.82) rotate(-2deg)}31%{opacity:1;transform:translate3d(-50%,-47%,0) scale(.92,1.08) rotate(2deg)}72%{opacity:.9;transform:translate3d(calc(-50% + var(--pop-drift-mid)),var(--pop-rise-mid),0) scale(1.02) rotate(4deg)}100%{opacity:0;transform:translate3d(calc(-50% + var(--pop-drift)),var(--pop-rise),0) scale(.72) rotate(var(--pop-rotation))}}@keyframes craterAgitated{0%,100%{transform:translateX(-50%) rotate(-.4deg) scale(1,.9)}26%{transform:translateX(-50%) rotate(.8deg) scale(1.045,.72)}54%{transform:translateX(-50%) rotate(-.7deg) scale(.97,1.08)}76%{transform:translateX(-50%) rotate(.4deg) scale(1.03,.82)}}@keyframes craterSettling{50%{transform:translateX(-50%) scale(1.015,.88)}}@keyframes craterCalm{50%{transform:translateX(-50%) translateY(1px) scale(1.006,.96)}}@keyframes craterKick{0%,100%{transform:scale(1)}24%{transform:scale(.72,.42)}55%{transform:scale(1.16,1.3)}78%{transform:scale(.94,.82)}}@keyframes craterHeart{0%,100%{transform:scale(1)}24%{transform:scale(.6,.35)}55%{transform:scale(1.24,1.42)}78%{transform:scale(.92,.76)}}@keyframes burbuHeartPop{0%{opacity:0;transform:translateY(72%) scale(.12,.08)}26%{opacity:1;transform:translateY(-12%) scale(1.2,.88) rotate(-3deg)}52%{transform:translateY(3%) scale(.93,1.08) rotate(2deg)}72%{transform:translateY(-3%) scale(1.04,.97) rotate(-1deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@keyframes ugaHeadBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* Uga's Feelings */
.feelings-panel{min-height:540px;display:grid;gap:18px}.feel-scene{position:relative;min-height:270px;border-radius:30px;background:#d8f7f7;overflow:hidden;display:grid;place-items:center;text-align:center}.feel-scene-icon{font-size:clamp(4rem,12vw,7rem);transition:transform .35s ease}.feel-scene p{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);width:max-content;max-width:90%;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.75);font-family:var(--font-display);font-weight:700}.feel-reaction{position:absolute;right:8%;bottom:35px;font-size:3rem;opacity:0;transform:translateY(18px);transition:.5s}.feel-scene.is-correct .feel-reaction{opacity:1;transform:none}.feel-options{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:16px;max-width:820px;width:100%;margin:auto}.feel-face{position:relative;border:0;border-radius:50%;aspect-ratio:1;background:var(--face-bg,#ffe9b5);overflow:hidden;box-shadow:0 8px 0 rgba(90,51,32,.13);transition:transform .25s ease,filter .25s}.feel-face img{width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}.feel-face span{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);padding:3px 11px;border-radius:999px;background:rgba(255,250,240,.9);color:var(--ink);font-family:var(--font-display);font-weight:800;white-space:nowrap}.feel-face:hover{transform:translateY(-4px)}.feel-face.is-wrong{animation:gentleNo .42s ease}.feel-face.is-correct{animation:answerBounce .7s ease}.feel-face.is-hint{filter:brightness(1.08);box-shadow:0 0 0 7px rgba(255,224,112,.55),0 8px 0 rgba(90,51,32,.13)}.feel-actions{text-align:center}.feel-actions[hidden]{display:none}
@keyframes gentleNo{35%{transform:translateX(-5px) rotate(-2deg)}70%{transform:translateX(5px) rotate(2deg)}}@keyframes answerBounce{40%{transform:translateY(-12px) scale(1.07)}70%{transform:translateY(2px) scale(.98)}}

/* Emotion Memory — same soft system as the new Uga games */
.memory-game-card{min-height:560px;display:grid;align-content:center;background:rgba(255,252,240,.96)}
.memory-shell{width:min(820px,100%);margin:auto}.memory-shell .mem-levels{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:0 0 22px}
.memory-shell .mem-level{min-height:46px;padding:8px 18px;border:0;border-radius:999px;background:#fff;color:var(--ink-soft);font-family:var(--font-display);font-weight:800;box-shadow:0 5px 0 rgba(90,51,32,.13);transition:transform .16s ease,background-color .2s ease,box-shadow .16s ease}
.memory-shell .mem-level:hover{transform:translateY(-2px)}.memory-shell .mem-level:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(90,51,32,.13)}
.memory-shell .mem-level[aria-pressed="true"]{background:var(--orange);color:var(--ink);text-shadow:none;box-shadow:0 5px 0 rgba(201,106,22,.55)}
.memory-shell .mem-size{opacity:.6;margin-left:.3em;font-size:.82em}.memory-shell .mem-board{position:relative;width:min(720px,100%);margin:auto}
.memory-shell .memory{display:grid;grid-template-columns:repeat(var(--mem-cols,4),1fr);gap:clamp(8px,1.5vw,15px);width:100%}
.memory-shell .mcard{aspect-ratio:1;border:0;border-radius:clamp(26px,4.2vw,42px);background:none;padding:0;perspective:800px;touch-action:manipulation}
.memory-shell .mcard-in{display:block;position:relative;width:100%;height:100%;border-radius:inherit;transform-style:preserve-3d;transition:transform .48s cubic-bezier(.2,.8,.25,1.1)}
.memory-shell .mcard[data-state="up"] .mcard-in,.memory-shell .mcard[data-state="done"] .mcard-in{transform:rotateY(180deg)}
.memory-shell .mface{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border:0;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.memory-shell .mback{background:var(--orange);box-shadow:inset 0 -8px rgba(201,106,22,.22),0 8px 0 rgba(90,51,32,.13)}
.memory-shell .mback::after{content:"";width:54%;height:54%;background:var(--ink);-webkit-mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;mask:url("../img/uga-paw.svg?v=108") center/contain no-repeat;transform:rotate(-8deg)}
.memory-shell .mfront{transform:rotateY(180deg);background:#fff;box-shadow:0 8px 0 rgba(90,51,32,.11)}.memory-shell .mfront svg{width:86%;height:86%}
.memory-shell .mcard[data-state="down"]:hover .mcard-in{transform:translateY(-4px) scale(1.015)}.memory-shell .mcard[data-state="done"]{opacity:.48}
.memory-shell .memory-status{margin:18px 0 4px}.memory-actions{display:flex;justify-content:center;margin-top:12px}
.memory-shell .mem-win{border-radius:32px;background:radial-gradient(ellipse at center,rgba(255,255,255,.98),rgba(255,250,235,.91));backdrop-filter:none}.memory-shell .mem-win[hidden]{display:none}
.memory-shell .mem-win-face{filter:none}.memory-shell .mem-win-text{color:var(--ink);text-shadow:none}

@media(max-width:760px){.uga-game-shell{padding-top:18px}.uga-game-card{padding:15px;border-radius:32px}.burbu-scene{min-height:0}.lulu-keys{grid-template-columns:repeat(8,minmax(34px,1fr));gap:4px}.lulu-note-label{font-size:.72rem}.fly-stage{min-height:500px}}
@media(max-width:520px){.uga-game-wrap{width:min(100% - 18px,520px)}.uga-game-back{min-height:42px;margin-bottom:8px;font-size:.9rem}.uga-game-header h1{font-size:clamp(2rem,12vw,3.2rem)}.uga-game-intro{font-size:1rem}.uga-game-card{padding:10px;border-radius:26px}.fly-stage{min-height:470px}.lulu-keys{padding:35px 0 8px}.lulu-key{border-radius:45% 45% 36% 36%}.piano-panel{min-height:430px}.feel-options{gap:8px;grid-template-columns:repeat(3,minmax(88px,1fr))}.feel-face span{font-size:.72rem;padding-inline:7px}.feel-scene{min-height:235px}.calm-panel{gap:15px}.calm-breathe{width:155px}.memory-game-card{min-height:430px}.memory-shell .mem-level{flex:1;padding-inline:8px;font-size:.78rem}.memory-shell .memory{gap:7px}.memory-shell .mem-board{width:100%}.memory-shell .mback{box-shadow:inset 0 -5px rgba(201,106,22,.2),0 5px 0 rgba(90,51,32,.11)}.memory-shell .mfront{box-shadow:0 5px 0 rgba(90,51,32,.1)}}
@media(max-width:350px){.feel-face span{font-size:.65rem}.lulu-note-label{font-size:.62rem}}
@media(prefers-reduced-motion:reduce){.uga-game-page *{scroll-behavior:auto!important}.uga-game-card *{animation:none!important;transition-duration:.01ms!important}}

/* =========================================================================
   FLY THE KITE
   -------------------------------------------------------------------------
   Todo el juego se dibuja en el canvas. Aquí solo va lo que está encima:
   el marcador, el panel de inicio y fin, y la pista de abajo.
   ========================================================================= */
.fly-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:70vh;
  border-radius:30px;
  overflow:hidden;
  background:#9FEEFF;
  touch-action:manipulation;
  cursor:pointer;
  user-select:none;
}
/* El escenario recibe el foco al pulsar para poder jugar con teclado.
   El aro se marca solo cuando se llega con el teclado, y con sombra en
   lugar de contorno: al hacer clic no aparece nada. */
.fly-stage:focus{outline:none}
.fly-stage:focus-visible{outline:none;box-shadow:inset 0 0 0 5px rgba(90,51,32,.55)}
.fly-canvas{display:block;width:100%;height:100%}

/* --- marcador --- */
.fly-hud{
  position:absolute;
  top:14px;
  left:16px;
  display:flex;
  gap:10px;
  pointer-events:none;
}
.fly-hud span{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  padding:7px 15px;
  border-radius:999px;
  background:rgba(255,253,246,.9);
  font-family:var(--font-display,inherit);
  font-weight:800;
  color:#7A4A28;
}
.fly-hud b{font-size:1.12rem}
.fly-hud i{font-style:normal;font-size:.82rem;opacity:.7}
.fly-stars b{color:#D79B12}

/* --- panel de inicio y de fin --- */
.fly-panel{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(42,26,15,.36);
}
.fly-panel[hidden]{display:none}
.fly-panel-box{
  width:min(420px,100%);
  padding:24px 24px 26px;
  border-radius:28px;
  background:#FFFDF6;
  text-align:center;
  box-shadow:0 10px 0 rgba(42,83,102,.2);
}
.fly-panel-box strong{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-display,inherit);
  font-weight:800;
  font-size:1.28rem;
  color:#7A4A28;
}
.fly-panel-box p{margin:0 0 6px;color:#8A6449;font-size:1rem;line-height:1.5}
.fly-best{font-family:var(--font-display,inherit);font-weight:800;color:#D79B12 !important}
.fly-panel-box .ug-btn{margin-top:14px}

/* Uga en el panel: contento al empezar, apenado al terminar */
.fly-uga{
  display:block;
  width:74px;
  height:74px;
  margin:0 auto 10px;
  background-color:#8B5E3C;
  -webkit-mask:url("../img/uga-silhouette.png?v=1") center/contain no-repeat;
  mask:url("../img/uga-silhouette.png?v=1") center/contain no-repeat;
  transition:transform .3s ease;
  animation:flyWave 2.6s ease-in-out infinite;
}
.fly-uga.is-sad{animation:none;transform:translateY(4px) rotate(-6deg);opacity:.8}
@keyframes flyWave{
  0%,100%{transform:rotate(-4deg)}
  50%{transform:rotate(4deg)}
}@media (max-width:700px){
  .fly-stage{aspect-ratio:4/3;border-radius:22px}
  .fly-hud{top:10px;left:10px;gap:7px}
  .fly-hud span{padding:6px 12px}
  .fly-panel-box{padding:18px 18px 20px;border-radius:22px}
  .fly-panel-box strong{font-size:1.14rem}
}
@media (prefers-reduced-motion:reduce){
  .fly-uga{animation:none}
}

/* --- Elección de nivel ---------------------------------------------------
   Tres botones en el panel de inicio. No cambian la física de la cometa,
   solo el ritmo del mundo. --- */
.fly-levels{margin:14px 0 4px}
.fly-levels-label{
  margin:0 0 8px !important;
  font-family:var(--font-display,inherit);
  font-weight:800;
  font-size:.94rem;
  color:#7A4A28 !important;
}
.fly-levels-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.fly-level{
  min-height:44px;
  padding:8px 16px;
  border:0;
  border-radius:999px;
  background:#F1E5D6;
  color:#7A4A28;
  font-family:var(--font-display,inherit);
  font-weight:800;
  font-size:.94rem;
  cursor:pointer;
  box-shadow:0 4px 0 rgba(42,83,102,.14);
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.fly-level:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(42,83,102,.14)}
.fly-level.is-on{
  background:var(--orange,#F5943B);
  color:#fff;
  box-shadow:0 4px 0 var(--orange-deep,#E27C24);
}
@media (max-width:700px){
  .fly-level{padding:7px 13px;font-size:.88rem;min-height:42px}
}


/* --- sin destello al pulsar en los juegos --- */
.fly-stage,.uga-game-card,.ug-btn{-webkit-tap-highlight-color:transparent}
.ug-btn:focus{outline:none}
.ug-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(245,148,59,.55)}