/* =========================================================
   UGA PUZZLE — estilos aislados del minijuego
   ========================================================= */
.uga-puzzle-page{background:var(--sky);--puzzle-coral:#F47B68;--puzzle-blue:#73D6EA;--puzzle-cream:#FFF9E8}
.puzzle-main{position:relative;z-index:2;isolation:isolate;overflow:hidden;background:transparent}
.uga-puzzle-page > .grass{z-index:1}
.puzzle-shell{position:relative;padding:30px 0 90px;min-height:760px}
.puzzle-wrap{position:relative;z-index:3;width:min(1180px,calc(100% - 36px));margin:0 auto}
.puzzle-back{display:flex;align-items:center;width:max-content;min-height:46px;margin:0 0 18px auto;padding:8px 18px;border:3px solid var(--ink);border-radius:999px;background:var(--cream);font-family:var(--font-display);font-weight:700;text-decoration:none;box-shadow:0 5px 0 rgba(90,51,32,.16)}
.puzzle-back::before{content:"←";margin-right:8px;font-size:1.25em}

.puzzle-header{text-align:center;margin:0 auto 18px}
.puzzle-title-cloud{position:relative;display:inline-grid;place-items:center;min-width:0;padding:0;background:none;border-radius:0;box-shadow:none;isolation:isolate}
.puzzle-title-cloud::before,.puzzle-title-cloud::after{content:none}
.puzzle-kicker{margin:0 0 1px;color:var(--orange-deep);font-family:var(--font-display);font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.puzzle-title-cloud h1{position:relative;z-index:1;isolation:isolate;display:inline-block;padding:.14em .08em;font-size:clamp(2.1rem,6vw,4rem);color:var(--ink)}
.puzzle-title-cloud 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;pointer-events:none}
.puzzle-intro{margin:18px auto 0;max-width:34ch;color:var(--ink);font-family:var(--font-display);font-size:clamp(1.05rem,2.3vw,1.35rem);font-weight:600}

.puzzle-toolbar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 auto 16px}
.puzzle-level{display:flex;gap:8px;padding:6px;background:rgba(255,255,255,.55);border-radius:999px}
.puzzle-chip,.puzzle-sound{min-height:48px;border:3px solid var(--ink);border-radius:999px;background:var(--cream);padding:8px 18px;font-family:var(--font-display);font-weight:700;box-shadow:0 4px 0 rgba(90,51,32,.16);transition:transform .16s ease,background-color .2s ease,box-shadow .16s ease}
.puzzle-chip.is-active{background:var(--orange);color:var(--ink)}
.puzzle-sound{display:inline-flex;align-items:center;gap:8px}
.puzzle-sound[aria-pressed="true"]{background:#C8EE92}
.puzzle-chip:hover,.puzzle-sound:hover{transform:translateY(-2px)}
.puzzle-chip:active,.puzzle-sound:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(90,51,32,.16)}
.puzzle-sound-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff}

.puzzle-card{position:relative;z-index:2;padding:24px;border-radius:44px;background:rgba(255,252,240,.94);box-shadow:0 14px 0 rgba(90,51,32,.12);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.9,.25,1.15)}
.puzzle-card[data-state="loading"]{opacity:.65}
.puzzle-card[data-state="changing"]{opacity:0;transform:translateY(10px) scale(.985)}
.puzzle-card[data-state="complete"]{box-shadow:0 14px 0 rgba(124,198,58,.28)}
.puzzle-emotion-heading{display:flex;justify-content:center;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;font-family:var(--font-display);font-size:clamp(1.05rem,2.5vw,1.35rem)}
.puzzle-emotion-heading strong{padding:5px 14px;border-radius:999px;background:#FFE58A;color:var(--ink)}

.puzzle-playfield{position:relative;display:grid;grid-template-columns:minmax(300px,1fr) minmax(280px,.75fr);gap:24px;min-height:520px}
.puzzle-board{position:relative;align-self:center;justify-self:center;width:min(100%,520px);aspect-ratio:1;border:5px solid var(--ink);border-radius:36px;overflow:hidden;background:#D8F7F7;box-shadow:0 9px 0 rgba(90,51,32,.16)}
.puzzle-reference{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:.16;filter:saturate(.7);user-select:none;pointer-events:none}
.puzzle-slots{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--puzzle-cols,2),1fr);grid-template-rows:repeat(var(--puzzle-rows,2),1fr)}
.puzzle-slot{position:relative;border:2px dashed rgba(90,51,32,.22)}
.puzzle-slot::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.42);transform:translate(-50%,-50%)}
.puzzle-slot.is-filled::after{opacity:0}

.puzzle-tray{position:relative;min-width:0;padding:62px 16px 16px;border:4px solid rgba(90,51,32,.24);border-radius:34px;background:color-mix(in srgb,var(--puzzle-blue) 22%,#fff);box-shadow:inset 0 0 0 7px rgba(255,255,255,.38)}
.puzzle-tray h2{position:absolute;left:50%;top:14px;transform:translateX(-50%);white-space:nowrap;font-size:1rem;color:var(--ink-soft)}
.puzzle-piece-layer{position:absolute;inset:0;z-index:7;pointer-events:none}
.puzzle-piece{position:absolute;left:0;top:0;border:0;border-radius:22px;background-repeat:no-repeat;background-color:#fff;box-shadow:0 8px 0 rgba(90,51,32,.18),0 12px 22px rgba(90,51,32,.13);cursor:grab;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform;transition:transform .34s cubic-bezier(.18,.9,.24,1.18),box-shadow .18s ease,filter .18s ease,opacity .22s ease}
.puzzle-piece:hover{filter:saturate(1.05) brightness(1.02);box-shadow:0 10px 0 rgba(90,51,32,.16),0 15px 25px rgba(90,51,32,.15)}
.puzzle-piece.is-dragging{z-index:20;cursor:grabbing;transition:none;filter:saturate(1.08);box-shadow:0 13px 0 rgba(90,51,32,.14),0 22px 30px rgba(90,51,32,.18)}
.puzzle-piece.is-placed{cursor:default;pointer-events:none;border-radius:0;box-shadow:none;filter:none}
.puzzle-card[data-state="complete"] .puzzle-piece.is-placed{opacity:0;transition-delay:.18s}
.puzzle-piece.is-snapping{animation:puzzleSnap .38s cubic-bezier(.2,.9,.2,1.35)}
@keyframes puzzleSnap{0%{filter:brightness(1.07)}55%{filter:brightness(1.12)}100%{filter:none}}

.puzzle-status{min-height:1.6em;margin:18px 0 8px;text-align:center;color:var(--ink-soft);font-weight:700}
.puzzle-complete{text-align:center;margin:4px auto 12px;animation:puzzlePop .52s cubic-bezier(.17,.88,.25,1.35)}
.puzzle-complete strong{display:inline-block;padding:8px 22px;border-radius:999px;background:#C8EE92;color:var(--ink);font-family:var(--font-display);font-size:clamp(1.3rem,4vw,2rem)}
@keyframes puzzlePop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.puzzle-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.puzzle-actions .btn{justify-content:center;border:3px solid var(--ink);font-weight:700}
.puzzle-action-primary{background:var(--orange)}

.puzzle-finale{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0}
.puzzle-card[data-state="complete"] .puzzle-finale{opacity:1}
.puzzle-spark{position:absolute;color:#FFF8A8;font-size:2.4rem;text-shadow:0 2px 0 rgba(90,51,32,.2);opacity:0}
.puzzle-spark-1{left:12%;top:15%}.puzzle-spark-2{right:11%;top:26%}
.puzzle-card.is-happy[data-state="complete"] .puzzle-reference{animation:happyUga .8s ease-in-out 2;opacity:1;filter:none}
.puzzle-card.is-happy[data-state="complete"] .puzzle-spark{animation:sparkle 1.1s ease-in-out 2}
.puzzle-friend{position:absolute;right:8%;bottom:8%;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:#F5C542;color:#F0725F;font-size:2.3rem;opacity:0}
.puzzle-card.is-sad[data-state="complete"] .puzzle-reference{animation:gentleLift 1.6s ease-in-out 2;opacity:1;filter:none}
.puzzle-card.is-sad[data-state="complete"] .puzzle-friend{animation:friendArrives 1.2s cubic-bezier(.2,.85,.2,1.1) forwards}
.puzzle-breath{position:absolute;left:8%;top:10%;width:75px;height:44px;border-radius:50%;background:rgba(255,255,255,.72);opacity:0}
.puzzle-breath::before,.puzzle-breath::after{content:"";position:absolute;border-radius:50%;background:inherit}
.puzzle-breath::before{width:48px;height:48px;left:20px;top:-20px}.puzzle-breath::after{width:38px;height:38px;right:-10px;top:2px}
.puzzle-card.is-calm[data-state="complete"] .puzzle-reference{animation:calmBreath 3.2s ease-in-out infinite;opacity:1;filter:none}
.puzzle-card.is-calm[data-state="complete"] .puzzle-breath{animation:cloudDrift 3.5s ease-in-out infinite}
@keyframes happyUga{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.6) rotate(0)}45%{opacity:1;transform:scale(1.15) rotate(20deg)}}
@keyframes gentleLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes friendArrives{0%{opacity:0;transform:translate(30px,20px) scale(.6)}70%{transform:translate(0,0) scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes calmBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
@keyframes cloudDrift{0%{opacity:0;transform:translateX(-8px)}35%,70%{opacity:.9}100%{opacity:0;transform:translateX(45px)}}

.puzzle-cloud{position:absolute;z-index:0;width:190px;height:74px;border-radius:999px;background:#BDF5FB;pointer-events:none}
.puzzle-cloud::before,.puzzle-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.puzzle-cloud::before{width:95px;height:95px;left:26px;bottom:8px}.puzzle-cloud::after{width:72px;height:72px;right:18px;bottom:7px}
.puzzle-cloud-a{left:-42px;top:190px;transform:scale(.8)}
.puzzle-cloud-b{right:-35px;top:440px;transform:scale(.55)}

@media (max-width:820px){
  .puzzle-shell{padding-top:18px}
  .puzzle-card{padding:18px;border-radius:32px}
  .puzzle-playfield{grid-template-columns:1fr;gap:18px;min-height:790px}
  .puzzle-board{width:min(100%,500px)}
  .puzzle-tray{width:100%;min-height:260px;padding-top:54px}
}

@media (max-width:560px){
  .puzzle-wrap{width:min(100% - 20px,520px)}
  .puzzle-back{min-height:42px;margin-bottom:10px;font-size:.9rem}
  .puzzle-title-cloud{width:90%}
  .puzzle-intro{margin-top:12px;font-size:1rem}
  .puzzle-toolbar{gap:9px}
  .puzzle-level{width:100%;justify-content:center}
  .puzzle-chip{flex:1;padding-inline:10px}
  .puzzle-sound{min-height:44px;font-size:.9rem}
  .puzzle-card{padding:13px;border-radius:27px}
  .puzzle-emotion-heading{margin-bottom:10px;font-size:1rem}
  .puzzle-playfield{min-height:660px;gap:14px}
  .puzzle-board{border-width:4px;border-radius:27px}
  .puzzle-tray{min-height:230px;padding:50px 10px 10px;border-radius:26px}
  .puzzle-piece{border-radius:16px}
  .puzzle-status{font-size:.9rem;margin-top:12px}
  .puzzle-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .puzzle-actions .btn{width:100%;min-height:52px;padding:10px 12px;text-align:center}
}

@media (max-width:360px){
  .puzzle-playfield{min-height:620px}
  .puzzle-tray{min-height:215px}
  .puzzle-actions{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .puzzle-card,.puzzle-piece,.puzzle-chip,.puzzle-sound,.puzzle-reference,.puzzle-spark,.puzzle-friend,.puzzle-breath{animation:none!important;transition-duration:.01ms!important}
  .puzzle-card[data-state="complete"] .puzzle-reference{opacity:1;filter:none}
  .puzzle-card[data-state="complete"] .puzzle-friend,.puzzle-card[data-state="complete"] .puzzle-breath{opacity:.9}
}