.game-screen{

  position:relative;

  width:100vw;
  height:100dvh;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:22px;

  background:
    radial-gradient(
      circle at center,
      rgba(18,22,34,0.28),
      rgba(4,6,12,0.82)
    ),
    url("../../assets/img/world/game-bg.webp")
    center center / cover no-repeat;
}

.game-entering .game-top-hud{
  opacity:0;
  transform:translate3d(-22px, 0, 0);
}

.game-entering .game-board{
  opacity:0;
  transform:translate3d(0, 12px, 0) scale(0.98);
}

.game-entering .game-bottom-hud{
  opacity:0;
  transform:translate3d(0, 26px, 0);
}

.game-top-hud,
.game-board,
.game-bottom-hud{
  transition:
    opacity 150ms ease,
    transform 170ms cubic-bezier(0.18, 0.9, 0.26, 1);
}

.game-entering.game-enter-hud .game-top-hud,
.game-entering.game-enter-board .game-board,
.game-entering.game-enter-boosters .game-bottom-hud{
  opacity:1;
  transform:translate3d(0, 0, 0) scale(1);
}


.game-hud{

  display:flex;

  align-items:center;
  justify-content:center;

  gap:8px;

  padding:
    14px 24px;

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      rgba(34,22,12,0.88),
      rgba(14,10,6,0.94)
    );

  border:
    1px solid rgba(255,210,120,0.24);

  box-shadow:
    0 12px 34px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.08);

  backdrop-filter:
    blur(6px);

  font-size:18px;

  color:#ffe9ba;

  text-shadow:
    0 2px 4px rgba(0,0,0,0.55);

  z-index:10;
}
.game-board{

  position:relative;

  display:grid;

  grid-template-columns:
    repeat(8, 42px);

  grid-template-rows:
    repeat(8, 42px);

  gap:5px;

  padding:18px;

  border-radius:30px;
  outline:
  1px solid rgba(255,255,255,0.04);
  background:
    linear-gradient(
      180deg,
      rgba(62,36,18,0.74),
      rgba(18,10,6,0.88)
    );

  border:
    2px solid rgba(255,220,140,0.32);

 box-shadow:

  0 34px 70px rgba(0,0,0,0.72),

  0 0 0 2px rgba(255,220,140,0.06),

  0 0 54px rgba(255,170,60,0.14),

  inset
  0 1px 0 rgba(255,255,255,0.12),

  inset
  0 -14px 28px rgba(0,0,0,0.34),

  inset
  0 0 24px rgba(255,180,80,0.06);
  touch-action:none;

  overflow:visible;

  z-index:5;

  backdrop-filter:
    blur(3px);
}




/* =========================================
   BIG HINT
========================================= */

.tile.big-hint {
  animation:
    bigHintPulse 1.2s ease-in-out;
}

@keyframes bigHintPulse {

  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  35% {
    transform: scale(1.14);
    filter:
      brightness(1.28)
      saturate(1.18);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
.level-result.hidden {
  display: none;
}
/* =========================================
   OBSTACLE ASSET LAYERS
========================================= */

.tile-obstacle-asset {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 6;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:
    drop-shadow(0 6px 5px rgba(0,0,0,0.28))
    saturate(1.08)
    contrast(1.04);
}

.tile-obstacle-block {
  background-image: url("../../assets/img/obstacle/block.webp");
}

.tile-obstacle-ice {
  background-image: url("../../assets/img/obstacle/ice.webp");
  opacity: 0.96;
  filter:
    drop-shadow(0 5px 5px rgba(0,45,95,0.30))
    saturate(1.12)
    brightness(1.06);
}

/* =========================================
   JS MOTION LOCK
========================================= */
.tile.is-moving,
.tile.is-falling {

  animation:none !important;

  transition:none;

  overflow:visible;

  transform-style:flat;

  backface-visibility:hidden;

  -webkit-backface-visibility:hidden;
}


.piece-renderer {
  position: relative;
}

.piece-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transform-origin: center center;
}

.board-slot {
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto;
}

.board-slot::before,
.board-slot::after {
  content: none !important;
  display: none !important;
}

.board-piece {
  position: absolute !important;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: visible;
  border-radius: 11px;
  transform-origin: center center;
  will-change: transform;
  box-sizing: border-box;
}

.board-piece.gravity-motion-land {
  animation:
    gravityCloneLand 130ms cubic-bezier(0.18, 0.9, 0.24, 1.28);
}

.board-piece.pre-explode {
  animation:
    piecePreExplode 118ms ease-out;
}

.board-piece.hit-pop {
  animation:
    pieceHitPop 122ms ease-out;
}

.board-piece.break-flash {
  animation:
    pieceBreakFlash 132ms ease-out;
}

.board-piece.special-burst {
  animation:
    pieceSpecialBurst 150ms ease-out;
  z-index: 12;
}

.board-piece.match-link {
  filter:
    brightness(1.18)
    saturate(1.12);
}

.game-board.board-impact-soft .piece-layer {
  animation:
    boardImpactSoft 190ms cubic-bezier(0.18, 0.9, 0.24, 1.18);
}

.game-board.board-impact-strong .piece-layer,
.game-board.combo-cinema-hit .piece-layer {
  animation:
    boardImpactStrong 280ms cubic-bezier(0.16, 0.9, 0.2, 1.16);
}

@keyframes boardImpactSoft {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  38% {
    transform: translate3d(0, 2px, 0) scale(1.006);
  }

  70% {
    transform: translate3d(0, -1px, 0) scale(0.998);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes boardImpactStrong {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  22% {
    transform: translate3d(-2px, 3px, 0) scale(1.012);
  }

  44% {
    transform: translate3d(2px, -2px, 0) scale(0.996);
  }

  68% {
    transform: translate3d(-1px, 1px, 0) scale(1.004);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes piecePreExplode {
  0% {
    transform: var(--piece-transform, translate3d(0,0,0)) scale(1);
    filter: brightness(1);
  }

  48% {
    transform: var(--piece-transform, translate3d(0,0,0)) scale(0.9);
    filter:
      brightness(1.22)
      saturate(1.12);
  }

  100% {
    transform: var(--piece-transform, translate3d(0,0,0)) scale(1.08);
    filter:
      brightness(1.42)
      saturate(1.18);
  }
}

@keyframes pieceHitPop {
  0% {
    filter: brightness(1);
  }

  42% {
    filter:
      brightness(1.22)
      saturate(1.12);
  }

  100% {
    filter: brightness(1);
  }
}

@keyframes pieceBreakFlash {
  0% {
    opacity: 1;
    filter: brightness(1);
  }

  58% {
    opacity: 0.86;
    filter:
      brightness(1.55)
      saturate(1.22);
  }

  100% {
    opacity: 0.18;
    filter:
      brightness(1.9)
      saturate(1.05);
  }
}

@keyframes pieceSpecialBurst {
  0% {
    filter: brightness(1);
  }

  42% {
    filter:
      brightness(1.45)
      saturate(1.25);
  }

  100% {
    filter: brightness(1);
  }
}

@keyframes gravityCloneLand {
  0% {
    transform: translate3d(var(--land-x, 0), var(--land-y, 0), 0) scale(1, 1);
    filter: brightness(1);
  }

  44% {
    transform: translate3d(var(--land-x, 0), var(--land-y, 0), 0) scale(1.045, 0.955);
    filter: brightness(1.1);
  }

  100% {
    transform: translate3d(var(--land-x, 0), var(--land-y, 0), 0) scale(1, 1);
    filter: brightness(1);
  }
}
.game-board::before{

  content:"";

  position:absolute;

  inset:-52px;

  border-radius:52px;

  background:
    radial-gradient(
      circle,
      rgba(255,190,80,0.24),
      rgba(255,120,20,0.0) 68%
    );

  z-index:-2;

  filter:
    blur(38px);

  opacity:1;

  pointer-events:none;
}
.game-screen::before{

  content:"";

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at center,
      rgba(255,180,80,0.06),
      rgba(0,0,0,0.0) 32%
    ),
    radial-gradient(
      circle at center,
      rgba(0,0,0,0.0) 45%,
      rgba(0,0,0,0.58) 100%
    );

  backdrop-filter:
    blur(0px);

  z-index:0;

  pointer-events:none;
}
/* ===================================================== */
/* GAME HUD NUEVO */
/* ===================================================== */

.game-top-hud{

  position:relative;

  width:min(560px, 92vw);

  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  z-index:20;
}

/* ===================================================== */
/* PANELES */
/* ===================================================== */

.game-hud-panel{

  min-width:136px;

  padding:
    12px 16px;

  border-radius:22px;

  background:
    radial-gradient(circle at 50% 18%, rgba(255,214,121,0.20), rgba(255,214,121,0) 42%),
    linear-gradient(180deg, rgba(80,46,20,0.88), rgba(36,20,10,0.92));

  border:
    2px solid rgba(255,210,120,0.30);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -5px 12px rgba(0,0,0,0.24);

  backdrop-filter:
    blur(4px);
}

/* ===================================================== */
/* GOALS */
/* ===================================================== */

.game-goals-panel{

  display:flex;

  align-items:center;
  justify-content:flex-start;
}

.game-goals-list{

  display:flex;

  align-items:center;

  gap:16px;
}

/* ===================================================== */
/* PIRATA */
/* ===================================================== */

.game-pirate-panel{

  position:relative;

  width:128px;
  height:148px;

  margin-top:-12px;

  display:flex;

  align-items:center;
  justify-content:center;

  z-index:4;

  border-radius:28px;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 8%,
      rgba(255,238,178,0.34),
      rgba(255,207,118,0.16) 32%,
      rgba(255,207,118,0) 56%
    ),
    linear-gradient(
      180deg,
      rgba(132,86,45,0.88) 0%,
      rgba(69,39,20,0.92) 54%,
      rgba(18,10,6,0.96) 100%
    );

  border:
    2px solid rgba(255,212,128,0.46);

  box-shadow:
    0 12px 24px rgba(0,0,0,0.36),
    inset 0 2px 0 rgba(255,244,196,0.24),
    inset 0 -10px 16px rgba(19,8,4,0.38);
}

.game-pirate-img{

  width:122px;
  max-height:140px;

  object-fit:contain;
  transform:
    translateY(8px);

  transition:
    opacity 120ms ease,
    filter 180ms ease,
    transform 180ms ease;

  filter:
    drop-shadow(
      0 8px 14px rgba(0,0,0,0.48)
    );
}
/* ===================================================== */
/* SCORE PANEL */
/* ===================================================== */

.game-score-panel{

  width:148px;
  min-height:90px;

  padding:
    18px 18px;

  border-radius:28px;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:18px;

  background:
    linear-gradient(
      180deg,
      rgba(42,22,10,0.96),
      rgba(10,6,4,0.98)
    );

  border:
    2px solid rgba(255,190,90,0.22);

  box-shadow:
    0 12px 26px rgba(0,0,0,0.34);
}

.game-score-row{

  width:100%;

  display:flex;

  align-items:center;
  justify-content:center;
}
.game-score-label{

  display:none;
}

.game-score-number{

  font-size:40px;

  line-height:1;

  font-weight:600;

  color:#fff2b2;

  text-shadow:
    0 3px 6px rgba(0,0,0,0.5),
    0 0 18px rgba(255,210,90,0.22);
}

/* ===================================================== */
/* BOARD */
/* ===================================================== */

.game-board{

  margin-top:-12px;
}

/* ===================================================== */
/* SETTINGS */
/* ===================================================== */

.game-settings-btn{

  border:
    1px solid rgba(120,220,255,0.12);
}

/* ===================================================== */
/* VIDAS */
/* ===================================================== */

.game-lives{

  display:flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  margin-top:-6px;

  z-index:20;
}

.game-coins-hud{

  height:34px;
  min-width:84px;

  margin-left:6px;
  padding:0 10px 0 7px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      rgba(112,66,26,0.94),
      rgba(41,22,8,0.96)
    );

  border:
    1px solid rgba(255,215,95,0.5);

  box-shadow:
    0 7px 14px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

.game-coins-icon{

  width:28px;
  height:28px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 3px 5px rgba(0,0,0,0.48)
    );
}

.game-coins-count{

  color:#fff0b2;

  font-size:18px;
  font-weight:900;

  text-shadow:
    0 2px 3px rgba(0,0,0,0.72),
    0 0 8px rgba(255,213,89,0.22);
}

.game-coins-hud.coin-pop{

  animation:
    coinHudPop 420ms ease-out;
}

.game-flying-coin{

  position:fixed;
  left:0;
  top:0;

  width:34px;
  height:34px;

  z-index:12000;

  object-fit:contain;
  pointer-events:none;

  transform:
    translate(-50%, -50%);

  filter:
    drop-shadow(
      0 6px 8px rgba(0,0,0,0.42)
    );

  animation:
    flyingCoinToHud 820ms cubic-bezier(0.18, 0.82, 0.22, 1)
    forwards;
}

@keyframes flyingCoinToHud{

  0%{
    opacity:0;
    transform:
      translate(
        calc(-50% + var(--coin-start-x)),
        calc(-50% + var(--coin-start-y))
      )
      scale(0.55)
      rotate(-14deg);
  }

  22%{
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--coin-start-x)),
        calc(-50% + var(--coin-start-y) - 34px)
      )
      scale(1.28)
      rotate(10deg);
  }

  100%{
    opacity:0.92;
    transform:
      translate(
        calc(-50% + var(--coin-end-x)),
        calc(-50% + var(--coin-end-y))
      )
      scale(0.28)
      rotate(28deg);
  }
}

@keyframes coinHudPop{

  0%{
    transform:scale(1);
  }

  48%{
    transform:scale(1.12);
    box-shadow:
      0 10px 18px rgba(0,0,0,0.38),
      0 0 18px rgba(255,213,89,0.54),
      inset 0 1px 0 rgba(255,255,255,0.18);
  }

  100%{
    transform:scale(1);
  }
}

/* =====================================================
   RESULT OVERLAY POLISH
===================================================== */

.level-result{

  position:fixed;

  inset:0;

  z-index:10000;

  display:flex;

  align-items:center;
  justify-content:center;

 background:
  radial-gradient(
    circle at 50% 42%,
    rgba(255,180,80,0.08),
    rgba(0, 0, 0, 0.18) 72%
  ) !important;
backdrop-filter:none;

}

.level-result-box{

  position:relative;

  width:min(390px, 88vw) !important;

  padding:34px 30px 28px !important;

  border-radius:28px !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(194,143,78,0.96),
      rgba(92,54,22,0.98) 48%,
      rgba(29,16,8,0.98)
    ) !important;

  border:
    2px solid rgba(255,215,116,0.64);

  box-shadow:
    0 24px 56px rgba(0,0,0,0.64),
    0 0 24px rgba(255,186,64,0.16),
    inset 0 2px 0 rgba(255,255,255,0.22),
    inset 0 -20px 34px rgba(0,0,0,0.30) !important;

  text-align:center;

  overflow:hidden;

  animation:
    resultBoxIn 360ms cubic-bezier(.2,.9,.25,1.18) both;
}

.level-result-box::before{

  content:"";

  position:absolute;
  left:18px;
  right:18px;
  top:12px;

  height:3px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,235,156,0.78),
      transparent
    );
}

.level-result-box h2{

  margin:0 0 12px !important;

  color:#fff0b2;

  font-size:31px !important;
  font-weight:900;

  letter-spacing:0;

  text-shadow:
    0 3px 0 rgba(88,42,9,0.92),
    0 0 14px rgba(255,221,106,0.35);
}

.level-result-box p{

  max-width:300px;

  margin:0 auto 22px !important;

  color:#ffe9bb;

  font-size:19px;
  font-weight:800;
  line-height:1.18;

  opacity:1 !important;

  text-shadow:
    0 2px 4px rgba(0,0,0,0.62);
}

#level-result-btn{

  min-width:168px;
  min-height:54px;

  padding:0 28px !important;

  border:0;
  border-radius:999px !important;

  cursor:pointer;

  color:#3b1d03 !important;

  font-size:19px !important;
  font-weight:900 !important;

  background:
    linear-gradient(
      180deg,
      #fff079,
      #ffc719 48%,
      #c47a0a
    ) !important;

  border:
    1px solid rgba(255,246,151,0.78) !important;

  box-shadow:
    0 9px 18px rgba(0,0,0,0.36),
    0 0 18px rgba(255,209,55,0.26),
    inset 0 2px 0 rgba(255,255,255,0.45),
    inset 0 -5px 0 rgba(129,68,4,0.22);

  text-shadow:
    0 1px 0 rgba(255,246,170,0.65);
}

#level-result-btn:hover{

  transform:
    translateY(-2px);

  filter:
    brightness(1.06)
    saturate(1.08);
}

.result-win .level-result-box,
.result-world .level-result-box{
  width:min(520px, 90vw) !important;
  min-height:0;
  padding:22px 28px 28px !important;
}

.result-media-wrap{
  position:relative;
  width:100%;
  height:158px;
  margin:0 auto 8px;
  overflow:hidden;
  pointer-events:none;
}

.result-win-image{
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  width:auto;
  height:128px;
  max-width:70%;
  transform:translate(-50%, -50%) scale(0.84);
  opacity:0;
  object-fit:contain;
  filter:
    drop-shadow(0 14px 20px rgba(0,0,0,0.48))
    drop-shadow(0 0 18px rgba(255,220,100,0.24));
}

.result-cannon{
  position:absolute;
  top:58%;
  z-index:3;
  width:min(176px, 30vw);
  opacity:0;
  object-fit:contain;
  filter:
    drop-shadow(0 18px 18px rgba(0,0,0,0.46));
}

.result-cannon-left{
  left:-18px;
  transform:
    translate(-32px, -50%)
    rotate(-7deg)
    scale(0.84);
}

.result-cannon-right{
  right:-18px;
  transform:
    translate(32px, -50%)
    rotate(7deg)
    scale(0.84);
}

.result-win-burst,
.result-win-smoke{
  position:absolute;
  left:50%;
  top:52%;
  z-index:2;
  border-radius:50%;
  transform:translate(-50%, -50%) scale(0.1);
  opacity:0;
  pointer-events:none;
}

.result-win-burst{
  width:230px;
  height:118px;
  background:
    radial-gradient(circle, rgba(255,246,166,0.92), rgba(255,134,32,0.55) 34%, rgba(255,134,32,0) 68%);
}

.result-win-smoke{
  width:300px;
  height:136px;
  background:
    radial-gradient(circle at 45% 45%, rgba(230,214,180,0.34), rgba(72,54,38,0.28) 45%, rgba(0,0,0,0) 72%);
  filter:blur(8px);
}

.result-confetti-wrap{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
}

.result-confetti{
  position:absolute;
  left:50%;
  top:48%;
  width:10px;
  height:15px;
  border-radius:2px;
  opacity:0;
  transform:
    translate(-50%, -50%)
    rotate(0deg)
    scale(0.5);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.22);
}

.result-confetti-1{ background:#ff4747; --x:-190px; --y:-88px; --r:-220deg; }
.result-confetti-2{ background:#ffd739; --x:-146px; --y:-122px; --r:170deg; }
.result-confetti-3{ background:#42d878; --x:-92px; --y:-98px; --r:250deg; }
.result-confetti-4{ background:#31a9ff; --x:-44px; --y:-132px; --r:-160deg; }
.result-confetti-5{ background:#c957ff; --x:16px; --y:-118px; --r:210deg; }
.result-confetti-6{ background:#ff8a2b; --x:74px; --y:-130px; --r:-240deg; }
.result-confetti-7{ background:#ffe45f; --x:132px; --y:-106px; --r:190deg; }
.result-confetti-8{ background:#31e1d4; --x:186px; --y:-84px; --r:-210deg; }
.result-confetti-9{ background:#ff4fa3; --x:-180px; --y:-12px; --r:260deg; }
.result-confetti-10{ background:#7af05e; --x:-126px; --y:18px; --r:-180deg; }
.result-confetti-11{ background:#ffde44; --x:-70px; --y:38px; --r:240deg; }
.result-confetti-12{ background:#48b7ff; --x:-18px; --y:50px; --r:-260deg; }
.result-confetti-13{ background:#ff6742; --x:44px; --y:46px; --r:220deg; }
.result-confetti-14{ background:#b863ff; --x:94px; --y:28px; --r:-190deg; }
.result-confetti-15{ background:#41dc73; --x:142px; --y:0; --r:250deg; }
.result-confetti-16{ background:#ffcf36; --x:190px; --y:-24px; --r:-230deg; }
.result-confetti-17{ background:#2fc8ff; --x:-222px; --y:-54px; --r:205deg; }
.result-confetti-18{ background:#ff5571; --x:224px; --y:-56px; --r:-205deg; }

.level-result-box.result-scene-start .result-win-image{
  animation:
    resultWinImageIn 520ms ease-out forwards;
}

.level-result-box.result-scene-start .result-cannon-left{
  animation:
    resultCannonLeftIn 680ms cubic-bezier(.18,.88,.22,1.18) forwards;
}

.level-result-box.result-scene-start .result-cannon-right{
  animation:
    resultCannonRightIn 680ms cubic-bezier(.18,.88,.22,1.18) forwards;
}

.level-result-box.result-scene-fire .result-cannon-left{
  animation:
    resultCannonLeftIn 680ms cubic-bezier(.18,.88,.22,1.18) forwards,
    resultCannonLeftFire 260ms ease-out 690ms 1;
}

.level-result-box.result-scene-fire .result-cannon-right{
  animation:
    resultCannonRightIn 680ms cubic-bezier(.18,.88,.22,1.18) forwards,
    resultCannonRightFire 260ms ease-out 690ms 1;
}

.level-result-box.result-scene-fire .result-win-burst{
  animation:
    resultWinBurst 560ms ease-out 660ms forwards;
}

.level-result-box.result-scene-fire .result-win-smoke{
  animation:
    resultWinSmoke 980ms ease-out 720ms forwards;
}

.level-result-box.result-scene-fire .result-confetti{
  animation:
    resultConfettiFly 980ms cubic-bezier(.16,.84,.28,1) 660ms forwards;
}

.level-result-box.result-scene-fire .result-confetti:nth-child(2n){
  animation-duration:1120ms;
}

.level-result-box.result-scene-fire .result-confetti:nth-child(3n){
  animation-delay:720ms;
}

.result-lose .level-result-box{
  animation:
    resultBoxIn 320ms ease-out both,
    resultLoseShake 420ms ease-out 120ms 1;
}

.result-lose .level-result-box h2{
  color:#ffd1b5;
  text-shadow:
    0 3px 0 rgba(67,16,8,0.92),
    0 0 14px rgba(255,84,50,0.28);
}

.result-world-scene{
  position:relative;
  width:100%;
  height:260px;
  margin:0 auto 8px;
  overflow:hidden;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(18,58,88,0.84), rgba(5,20,42,0.94));
  box-shadow:
    inset 0 0 44px rgba(0,0,0,0.48),
    0 10px 24px rgba(0,0,0,0.28);
}

.result-world-scene::before{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-16%;
  height:48%;
  background:
    radial-gradient(ellipse at center, rgba(89,198,224,0.48), rgba(22,96,140,0.54) 44%, rgba(3,25,54,0.86) 82%);
  animation:
    resultSeaMove 3.2s ease-in-out infinite;
}

.result-world-ship{
  position:absolute;
  left:-38%;
  bottom:30px;
  z-index:4;
  width:min(330px, 45vw);
  opacity:0;
  object-fit:contain;
  filter:
    drop-shadow(0 24px 26px rgba(0,0,0,0.48));
}

.result-world-dock{
  position:absolute;
  right:-28%;
  bottom:14px;
  z-index:3;
  width:min(360px, 46vw);
  opacity:0;
  object-fit:contain;
  filter:
    drop-shadow(0 22px 24px rgba(0,0,0,0.42));
}

.result-world-title{
  position:absolute;
  left:50%;
  top:33%;
  z-index:6;
  width:min(360px, 54vw);
  opacity:0;
  transform:translate(-50%, -50%) scale(0.78);
  object-fit:contain;
  filter:
    drop-shadow(0 0 22px rgba(255,210,100,0.32));
}

.result-world-pulse,
.result-world-rays,
.result-world-fog{
  position:absolute;
  pointer-events:none;
  opacity:0;
}

.result-world-pulse{
  left:50%;
  top:34%;
  z-index:2;
  width:340px;
  height:150px;
  border-radius:50%;
  transform:translate(-50%, -50%) scale(0.8);
  background:
    radial-gradient(ellipse, rgba(255,218,117,0.30), rgba(255,160,40,0) 70%);
}

.result-world-rays{
  inset:0;
  z-index:5;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,236,174,0.36), rgba(255,236,174,0) 30%);
}

.result-world-fog{
  left:-8%;
  right:-8%;
  bottom:0;
  z-index:5;
  height:84px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(217,224,212,0.26), rgba(255,255,255,0));
  filter:blur(10px);
}

.level-result-box.result-world-start .result-world-ship{
  animation:
    resultWorldShipIn 920ms ease-out forwards;
}

.level-result-box.result-world-start .result-world-dock{
  animation:
    resultWorldDockIn 900ms ease-out forwards;
}

.level-result-box.result-world-arrive .result-world-title{
  animation:
    resultWorldTitleIn 620ms cubic-bezier(.18,.92,.22,1.24) forwards;
}

.level-result-box.result-world-arrive .result-world-pulse{
  animation:
    resultWorldPulse 2.4s ease-in-out infinite;
}

.level-result-box.result-world-arrive .result-world-rays{
  animation:
    resultWorldFlash 780ms ease-out forwards;
}

.level-result-box.result-world-arrive .result-world-fog{
  opacity:1;
}

@keyframes resultBoxIn{
  from{
    opacity:0;
    transform:translateY(18px) scale(0.92);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes resultWinImageIn{
  from{
    opacity:0;
    transform:translate(-50%, -42%) scale(0.72);
  }
  to{
    opacity:1;
    transform:translate(-50%, -50%) scale(0.92);
  }
}

@keyframes resultCannonLeftIn{
  to{
    opacity:1;
    transform:translate(0, -50%) rotate(-7deg) scale(1);
  }
}

@keyframes resultCannonRightIn{
  to{
    opacity:1;
    transform:translate(0, -50%) rotate(7deg) scale(1);
  }
}

@keyframes resultCannonLeftFire{
  50%{
    transform:translate(-18px, -50%) rotate(-10deg) scale(1.03);
  }
}

@keyframes resultCannonRightFire{
  50%{
    transform:translate(18px, -50%) rotate(10deg) scale(1.03);
  }
}

@keyframes resultWinBurst{
  0%{
    opacity:0;
    transform:translate(-50%, -50%) scale(0.1);
  }
  35%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translate(-50%, -50%) scale(1.7);
  }
}

@keyframes resultWinSmoke{
  0%{
    opacity:0;
    transform:translate(-50%, -50%) scale(0.4);
  }
  35%{
    opacity:0.72;
  }
  100%{
    opacity:0;
    transform:translate(-50%, -68%) scale(1.45);
  }
}

@keyframes resultConfettiFly{
  0%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(0.45);
  }
  14%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:
      translate(
        calc(-50% + var(--x)),
        calc(-50% + var(--y))
      )
      rotate(var(--r))
      scale(1);
  }
}

@keyframes resultLoseShake{
  0%, 100%{ transform:translateX(0); }
  20%{ transform:translateX(-7px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(3px); }
}

@keyframes resultSeaMove{
  50%{
    transform:translateX(3%) translateY(-4px);
  }
}

@keyframes resultWorldShipIn{
  0%{
    left:-38%;
    opacity:0;
    transform:translateY(8px) rotate(-3deg) scale(0.94);
  }
  20%{
    opacity:1;
  }
  100%{
    left:10%;
    opacity:1;
    transform:translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes resultWorldDockIn{
  to{
    right:-4%;
    opacity:1;
    transform:scale(1);
  }
}

@keyframes resultWorldTitleIn{
  to{
    opacity:1;
    transform:translate(-50%, -50%) scale(1.08);
  }
}

@keyframes resultWorldPulse{
  0%, 100%{
    opacity:0.42;
    transform:translate(-50%, -50%) scale(0.95);
  }
  50%{
    opacity:0.78;
    transform:translate(-50%, -50%) scale(1.18);
  }
}

@keyframes resultWorldFlash{
  0%{
    opacity:0;
  }
  35%{
    opacity:1;
  }
  100%{
    opacity:0.18;
  }
}

/* ===================================================== */
/* HIDDEN */
/* ===================================================== */

.game-hidden-value{

  display:none;
}
.game-settings-overlay.hidden{

  display:none;
}

.game-settings-overlay{

  position:fixed;

  inset:0;

  z-index:9999;

  display:flex;

  align-items:center;
  justify-content:center;

  background:
    radial-gradient(
      circle at center,
      rgba(30,18,10,0.58),
      rgba(0,0,0,0.82)
    );

  backdrop-filter:
    blur(3px);
}

.game-settings-box{

  position:relative;

  width:min(360px, 86vw);

  display:flex;

  flex-direction:column;

  gap:16px;

  padding:34px 24px 24px;

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(42,25,12,0.96),
      rgba(12,8,5,0.98)
    );

  border:
    2px solid rgba(255,210,120,0.26);

  box-shadow:
    0 24px 54px rgba(0,0,0,0.58),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.game-settings-close{

  position:absolute;

  right:14px;
  top:12px;

  width:38px;
  height:38px;

  border:0;
  border-radius:50%;

  cursor:pointer;

  font-size:28px;
  font-weight:900;

  color:#ffe7a6;

  background:
    rgba(0,0,0,0.32);

  box-shadow:
    0 5px 12px rgba(0,0,0,0.35);
}

.game-settings-action{

  min-height:58px;

  border:0;
  border-radius:18px;

  cursor:pointer;

  font-size:18px;
  font-weight:900;

  color:#ffe7a6;

  background:
    linear-gradient(
      180deg,
      rgba(116,70,28,0.96),
      rgba(54,30,12,0.96)
    );

  border:
    1px solid rgba(255,220,140,0.24);

  box-shadow:
    0 8px 18px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

@keyframes shopReadyPulse{
  0%{
    box-shadow:
      0 8px 18px rgba(0,0,0,0.34),
      0 0 0 rgba(255,210,70,0),
      inset 0 1px 0 rgba(255,255,255,0.10);
  }

  50%{
    box-shadow:
      0 12px 24px rgba(0,0,0,0.42),
      0 0 24px rgba(255,210,70,0.68),
      inset 0 1px 0 rgba(255,255,255,0.22);
  }

  100%{
    box-shadow:
      0 8px 18px rgba(0,0,0,0.34),
      0 0 0 rgba(255,210,70,0),
      inset 0 1px 0 rgba(255,255,255,0.10);
  }
}

.game-shop-panel.hidden{
  display:none;
}

.game-shop-panel{
  position:absolute;
  inset:18px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:56px 20px 20px;
  border-radius:26px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(190,137,72,0.95),
      rgba(93,54,21,0.98) 48%,
      rgba(28,15,7,0.98)
    );
  border:2px solid rgba(255,214,118,0.62);
  box-shadow:
    0 22px 48px rgba(0,0,0,0.62),
    inset 0 2px 0 rgba(255,255,255,0.22),
    inset 0 -18px 30px rgba(0,0,0,0.28);
}

.game-shop-close{
  position:absolute;
  top:12px;
  left:14px;
  height:36px;
  padding:0 18px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  color:#fff2bd;
  font-size:15px;
  font-weight:900;
  background:
    linear-gradient(
      180deg,
      rgba(91,50,18,0.96),
      rgba(34,18,8,0.98)
    );
  border:1px solid rgba(255,219,125,0.42);
  box-shadow:
    0 7px 15px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

.game-shop-title{
  color:#fff0b2;
  font-size:24px;
  font-weight:900;
  text-align:center;
  text-shadow:
    0 3px 0 rgba(77,36,8,0.9),
    0 0 12px rgba(255,218,102,0.34);
}

.game-shop-coins{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  color:#ffe9a4;
  font-size:18px;
  font-weight:900;
  background:
    rgba(34,18,7,0.48);
  border:1px solid rgba(255,220,140,0.28);
  text-shadow:0 2px 4px rgba(0,0,0,0.7);
}

.game-shop-buy{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border-radius:17px;
  cursor:pointer;
  color:#fff2b5;
  font-size:17px;
  font-weight:900;
  background:
    linear-gradient(
      180deg,
      rgba(126,73,25,0.98),
      rgba(48,25,10,0.98)
    );
  border:1px solid rgba(255,219,115,0.42);
  box-shadow:
    0 8px 16px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.13);
  text-shadow:0 2px 4px rgba(0,0,0,0.72);
}

.game-shop-buy span{
  min-width:50px;
  padding:5px 9px;
  border-radius:999px;
  color:#2d1605;
  background:
    linear-gradient(
      180deg,
      #ffe990,
      #d99b32
    );
  text-align:center;
  text-shadow:none;
}

.game-shop-buy:disabled{
  cursor:default;
  opacity:0.46;
  filter:
    grayscale(0.36)
    brightness(0.78);
}
.game-life{

  position:relative;

  width:34px;
  height:34px;

  display:block;
}

.game-life img{

  width:100%;
  height:100%;

  object-fit:contain;

  filter:
    drop-shadow(
      0 4px 8px rgba(0,0,0,0.42)
    );
}

.game-life.lost img{

  opacity:0.28;

  filter:
    grayscale(0.82)
    brightness(0.52)
    drop-shadow(
      0 3px 6px rgba(0,0,0,0.38)
    );

  transform:
    scale(0.88);
}

.game-life.lost::after{

  content:"";

  position:absolute;

  inset:-2px;

  background:
    url("../../assets/img/ui/life-skull-x.webp")
    center center / contain no-repeat;

  pointer-events:none;
}
.game-goal-item{

  position:relative;

  width:64px;
  height:64px;

  flex:none;

  display:flex;

  align-items:center;
  justify-content:center;
}

.game-goal-item > img{

  width:54px;
  height:54px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 5px 10px rgba(0,0,0,0.44)
    );
}

.game-goal-item strong{

  position:absolute;

  right:-4px;
  bottom:-2px;

  min-width:32px;
  height:24px;

  padding:0 8px;

  border-radius:999px;

  display:flex;

  align-items:center;
  justify-content:center;

  font-size:14px;
  font-weight:900;

  color:#fff3c4;

  background:
    linear-gradient(
      180deg,
      rgba(78,44,18,0.98),
      rgba(24,12,6,0.98)
    );

  border:
    1px solid rgba(255,220,120,0.24);

  box-shadow:
    0 5px 10px rgba(0,0,0,0.34);
}

.game-hidden-value{

  display:none !important;
}
.game-board-shadow{

  position:absolute;

  left:50%;
  bottom:-34px;

  width:92%;
  height:46px;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    rgba(0,0,0,0.48);

  filter:
    blur(22px);

  z-index:-3;

  pointer-events:none;
}
.tile{
  position:relative;
  overflow:hidden;
}

.tile.red{
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.16) 24%, rgba(255,255,255,0) 42%),
    linear-gradient(145deg, #ff6b58 0%, #f13d2f 48%, #9f1a14 100%);
}

.tile.blue{
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.18) 24%, rgba(255,255,255,0) 42%),
    linear-gradient(145deg, #57c9ff 0%, #248ed9 48%, #115087 100%);
}

.tile.green{
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.16) 24%, rgba(255,255,255,0) 42%),
    linear-gradient(145deg, #57ee8f 0%, #22c967 48%, #117339 100%);
}

.tile.yellow{
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.64) 0%, rgba(255,255,255,0.20) 24%, rgba(255,255,255,0) 42%),
    linear-gradient(145deg, #ffe75a 0%, #f5c400 50%, #a86f00 100%);
}

.tile.purple{
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.56) 0%, rgba(255,255,255,0.16) 24%, rgba(255,255,255,0) 42%),
    linear-gradient(145deg, #c971f0 0%, #9948c8 48%, #56206f 100%);
}

.tile.orange{
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.16) 24%, rgba(255,255,255,0) 42%),
    linear-gradient(145deg, #ffb24d 0%, #f07822 48%, #9e3d08 100%);
}

.board-piece.red{
  background:
    url("../../assets/img/tiles/red.webp")
    center / contain
    no-repeat;
}

.board-piece.blue{
  background:
    url("../../assets/img/tiles/blue.webp")
    center / contain
    no-repeat;
}

.board-piece.green{
  background:
    url("../../assets/img/tiles/green.webp")
    center / contain
    no-repeat;
}

.board-piece.yellow{
  background:
    url("../../assets/img/tiles/yellow.webp")
    center / contain
    no-repeat;
}

.board-piece.purple{
  background:
    url("../../assets/img/tiles/purple.webp")
    center / contain
    no-repeat;
}

.board-piece.orange{
  background:
    url("../../assets/img/tiles/orange.webp")
    center / contain
    no-repeat;
}

.board-piece[data-special]{
  background:
    radial-gradient(circle at 50% 42%, rgba(255,240,155,0.26), rgba(255,120,20,0.12) 42%, rgba(18,8,6,0.88) 100%) !important;
  border:
    1px solid rgba(255,220,120,0.38);
  box-shadow:
    inset 0 5px 10px rgba(255,255,255,0.16),
    inset 0 -8px 14px rgba(0,0,0,0.50),
    0 0 12px rgba(255,175,55,0.22),
    0 6px 10px rgba(0,0,0,0.34);
}

.board-piece.block,
.board-piece.ice{
  background:
    transparent !important;
}
.tile-obstacle-asset{
  z-index:5;
}

.tile-special-asset{
  position:absolute;
  inset:0;
  z-index:6;

  border-radius:12px;

  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  filter:
    drop-shadow(0 4px 4px rgba(0,0,0,0.36))
    saturate(1.08)
    contrast(1.04);

  pointer-events:none;
}

.tile[data-special]{
  background:
    radial-gradient(circle at 50% 42%, rgba(255,240,155,0.26), rgba(255,120,20,0.12) 42%, rgba(18,8,6,0.88) 100%) !important;
  border:
    1px solid rgba(255,220,120,0.38);
  box-shadow:
    inset 0 5px 10px rgba(255,255,255,0.16),
    inset 0 -8px 14px rgba(0,0,0,0.50),
    0 0 12px rgba(255,175,55,0.22),
    0 6px 10px rgba(0,0,0,0.34);
}

.tile[data-special]:not(.block):not(.ice)::after{
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.30), rgba(0,0,0,0));
}

.tile.block,
.tile.ice{
  background:
    transparent !important;
}

.tile-obstacle-block,
.tile-obstacle-ice{

  background-color:
    transparent !important;
}
/* =========================================
   BOOSTER HUD 3D POLISH
========================================= */

.game-bottom-hud{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  z-index:20;
}

.game-booster-btn{
  position:relative;
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  min-width:88px;
  min-height:88px;
  max-width:88px;
  max-height:88px;
  overflow:visible;
  isolation:isolate;
  flex:0 0 88px;
  padding:0;
  cursor:pointer;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 58%, rgba(255,214,104,0.14), rgba(39,20,8,0.08) 48%, rgba(0,0,0,0) 72%);
  border:
    1px solid rgba(255,220,130,0.10);
  box-shadow:
    0 7px 14px rgba(0,0,0,0.22),
    inset 0 0 18px rgba(255,210,105,0.05);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.game-booster-btn:hover{
  transform:
    translateY(-4px);
  box-shadow:
    0 12px 22px rgba(0,0,0,0.38),
    0 0 18px rgba(255,190,90,0.18),
    inset 0 0 20px rgba(255,230,130,0.08);
}

.game-booster-btn.active{
  transform:
    translateY(-6px)
    scale(1.08);
  border:
    1px solid rgba(255,240,140,0.58);
  box-shadow:
    0 0 22px rgba(255,210,80,0.45),
    0 10px 20px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.game-booster-btn.empty{
  opacity:0.68;
  filter:
    grayscale(0.38)
    brightness(0.72);
}

.game-booster-btn.shop-ready,
.game-settings-shop-btn.shop-ready{
  animation:
    shopReadyPulse 1.05s ease-in-out infinite;
  border-color:
    rgba(255,226,98,0.72) !important;
}

.game-booster-btn:not(.empty):not(.game-settings-btn)::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 54%, rgba(255,240,154,0.58), rgba(255,97,32,0.28) 34%, rgba(255,23,10,0.08) 58%, rgba(0,0,0,0) 74%);
  filter:
    blur(5px)
    saturate(1.28);
  opacity:0.92;
  animation:
    boosterHudAura 1.6s ease-in-out infinite;
}

.game-booster-btn:not(.empty):not(.game-settings-btn)::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:8px;
  height:24px;
  z-index:1;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center, rgba(255,222,86,0.72), rgba(255,93,20,0.28) 46%, rgba(0,0,0,0) 72%);
  filter:
    blur(3px);
  opacity:0.9;
  transform:
    perspective(90px)
    rotateX(58deg);
  animation:
    boosterHudRing 1.25s ease-in-out infinite;
}

.game-booster-btn img{
  position:relative;
  grid-area:1 / 1;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  filter:
    drop-shadow(0 8px 7px rgba(0,0,0,0.56))
    drop-shadow(0 0 8px rgba(255,190,60,0.28))
    saturate(1.14)
    contrast(1.05);
}

#btn-booster-hammer img{
  width:112%;
  height:112%;
  border-radius:50%;
  transform:
    translateY(-2px)
    rotate(-3deg);
  object-fit:cover;
  -webkit-mask-image:
    radial-gradient(circle at 50% 50%, #000 0 50%, rgba(0,0,0,0.86) 62%, rgba(0,0,0,0) 78%);
  mask-image:
    radial-gradient(circle at 50% 50%, #000 0 50%, rgba(0,0,0,0.86) 62%, rgba(0,0,0,0) 78%);
  filter:
    drop-shadow(0 9px 8px rgba(0,0,0,0.62))
    drop-shadow(0 0 10px rgba(255,190,60,0.45))
    saturate(1.18)
    contrast(1.06);
}
#btn-booster-random img{
  width:100%;
  height:100%;
  border-radius:50%;
  transform:
    translateY(-3px);
  -webkit-mask-image:
    radial-gradient(circle at 50% 50%, #000 0 58%, rgba(0,0,0,0.88) 68%, rgba(0,0,0,0) 82%);
  mask-image:
    radial-gradient(circle at 50% 50%, #000 0 58%, rgba(0,0,0,0.88) 68%, rgba(0,0,0,0) 82%);
}

#btn-booster-bomb img,
#btn-booster-blast img{
  width:100%;
  height:100%;
}

.game-booster-count{
  position:absolute;
  right:4px;
  bottom:2px;
  z-index:4;
  min-width:26px;
  height:22px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#fff1b8;
  font-size:15px;
  font-weight:900;
  text-shadow:0 2px 3px rgba(0,0,0,0.9);
  background:
    linear-gradient(
      180deg,
      rgba(76,39,13,0.96),
      rgba(22,12,6,0.96)
    );
  border:1px solid rgba(255,210,95,0.52);
  box-shadow:
    0 4px 9px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.16);
}

.game-booster-btn.empty:not(.game-settings-btn)::before,
.game-booster-btn.empty:not(.game-settings-btn)::after{
  display:none;
}

.game-booster-btn.empty:not(.game-settings-btn) img{
  filter:
    grayscale(0.34)
    brightness(0.72)
    drop-shadow(0 5px 6px rgba(0,0,0,0.46));
}

.game-settings-btn::before,
.game-settings-btn::after{
  display:none;
}

@keyframes boosterHudAura{
  0%,
  100%{
    opacity:0.72;
    transform:scale(0.94);
  }

  50%{
    opacity:1;
    transform:scale(1.05);
  }
}

@keyframes boosterHudRing{
  0%,
  100%{
    opacity:0.68;
    transform:
      perspective(90px)
      rotateX(58deg)
      scale(0.9);
  }

  50%{
    opacity:0.98;
    transform:
      perspective(90px)
      rotateX(58deg)
      scale(1.08);
  }
}

.random-preview-overlay{

  position:fixed;

  pointer-events:none;

  border-radius:18px;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.88) 0%,
      rgba(255,255,255,0.34) 42%,
      rgba(255,255,255,0) 72%
    );

  box-shadow:
    0 0 12px rgba(255,255,255,0.95),
    0 0 26px rgba(120,220,255,0.75);

  animation:
    randomPreviewOverlayPulse 220ms ease-in-out infinite;

  z-index:99999;
}

@keyframes randomPreviewOverlayPulse{

  0%{
    transform:scale(0.92);
    opacity:0.45;
  }

  50%{
    transform:scale(1.08);
    opacity:1;
  }

  100%{
    transform:scale(0.92);
    opacity:0.45;
  }
}
/* =====================================================
   HUD TOP POLISH
===================================================== */

.game-top-hud{
  width:min(640px, 92vw) !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:18px !important;
}

.game-goals-panel,
.game-score-panel{
  width:172px !important;
  min-width:172px !important;
  height:118px !important;
  min-height:118px !important;
  box-sizing:border-box !important;
  padding:12px 16px 14px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,220,0.55), rgba(255,238,170,0.18) 34%, rgba(255,238,170,0) 56%),
    linear-gradient(180deg, rgba(182,132,72,0.92), rgba(105,62,30,0.95)) !important;
  border:2px solid rgba(255,222,140,0.58) !important;
  box-shadow:
    0 12px 22px rgba(0,0,0,0.34),
    inset 0 2px 0 rgba(255,255,255,0.34),
    inset 0 -7px 12px rgba(74,34,14,0.34) !important;
}

.game-hud-title{
  width:100% !important;
  margin:0 0 2px !important;
  padding:0 !important;
  display:block !important;
  flex:none !important;
  text-align:center !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
  color:#fff6c8 !important;
  text-shadow:
    0 2px 0 rgba(82,42,14,0.72),
    0 0 8px rgba(255,234,150,0.36) !important;
}

.game-goals-visual{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  flex:none !important;
}

.game-score-panel{
  align-items:center !important;
  padding-top:14px !important;
}

.game-score-row{
  width:100% !important;
  justify-content:center !important;
}

.game-score-progress{
  font-size:30px !important;
  white-space:nowrap !important;
}

.hud-bitmap-number{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:0;
  line-height:1;
  white-space:nowrap;
}

.hud-digit-img{
  display:block;
  width:auto;
  height:1em;
  object-fit:contain;
  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.55))
    drop-shadow(0 0 7px rgba(127,237,255,.35));
}

.hud-digit-separator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff6bf;
  font-weight:900;
  line-height:.9;
  text-shadow:
    0 2px 2px rgba(0,0,0,.75),
    0 0 7px rgba(255,226,130,.35);
  transform:translateY(-1px);
}

#moves.hud-bitmap-number{
  min-height:44px;
}

#moves .hud-digit-img{
  height:43px;
}

#score.hud-bitmap-number{
  min-height:26px;
  max-width:138px;
  transform:translateY(-4px);
}

#score .hud-digit-img{
  height:22px;
  margin:0 -4px;
}

#score .hud-digit-separator{
  font-size:22px;
  padding:0;
  margin:0 -1px;
}

#goal-block-count.hud-bitmap-number,
#goal-ice-count.hud-bitmap-number{
  min-height:18px;
}

#goal-block-count .hud-digit-img,
#goal-ice-count .hud-digit-img{
  height:18px;
}

#goal-block-count .hud-digit-separator,
#goal-ice-count .hud-digit-separator{
  font-size:16px;
}

.game-booster-count.hud-bitmap-number{
  min-width:20px;
  min-height:18px;
  gap:0;
}

.game-booster-count .hud-digit-img{
  height:14px;
}

.game-coins-count.hud-bitmap-number,
#game-shop-coins.hud-bitmap-number{
  min-height:20px;
  gap:0;
}

.game-coins-count .hud-digit-img,
#game-shop-coins .hud-digit-img{
  height:18px;
}

.game-goal-item strong.hud-bitmap-number{
  display:flex !important;
  min-width:46px;
  width:auto;
  height:24px;
  padding:0 5px;
  gap:0;
}



/* =========================================
   ANDROID FINAL LAYOUT
   Single source of truth for mobile game UI.
========================================= */

@media (orientation: portrait) and (max-width: 600px){
  .game-screen{
    --android-hud-y:18px;
    --android-board-y:14px;
    --android-boosters-bottom:118px;
    --android-lives-bottom:80px;
    --android-boosters-x:8px;
  }

  .game-top-hud{
    position:relative !important;
    top:var(--android-hud-y) !important;
    margin-top:0 !important;
    width:calc(100vw - 8px) !important;
    max-width:calc(100vw - 8px) !important;
    height:112px !important;
    min-height:112px !important;
    padding:0 4px !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:8px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    transform:none !important;
    contain:none !important;
  }

  .game-hud-panel,
  .game-goals-panel,
  .game-score-panel,
  .game-pirate-panel{
    box-sizing:border-box !important;
    contain:none !important;
    overflow:visible !important;
  }

  .game-goals-panel{
    width:104px !important;
    min-width:104px !important;
    max-width:104px !important;
    height:92px !important;
    min-height:92px !important;
    padding:7px 8px 8px !important;
  }

  .game-pirate-panel{
    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;
    height:86px !important;
    min-height:86px !important;
    padding:0 !important;
    margin-top:0 !important;
    z-index:30 !important;
    overflow:visible !important;
  }

  .game-pirate-img{
    width:108px !important;
    height:108px !important;
    max-height:108px !important;
    object-fit:contain !important;
    transform:translateY(-18px) !important;
  animation:none !important;
  }

  .game-score-panel{
    width:118px !important;
    min-width:118px !important;
    max-width:118px !important;
    height:86px !important;
    min-height:86px !important;
    padding:9px 9px 10px !important;
  }

  .game-hud-title{
    font-size:9px !important;
    line-height:1 !important;
    margin:0 0 3px !important;
    white-space:nowrap !important;
  }

  .game-goals-list,
  .game-goals-visual{
    width:100% !important;
    max-width:none !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    overflow:hidden !important;
  }

  .game-goal-item{
    position:relative !important;
    min-width:0 !important;
    flex:0 0 27px !important;
    width:72px !important;
    display:grid !important;
    grid-template-columns:26px 1fr !important;
    align-items:center !important;
    gap:1px !important;
    overflow:hidden !important;
  }

  .game-goal-item:has(#goal-ice-count){
    order:1 !important;
  }

  .game-goal-item:has(#goal-block-count){
    order:2 !important;
  }

  .game-goal-item strong,
  #goal-block-count,
  #goal-ice-count,
  #moves,
  #score{
    position:relative !important;
    padding:0 !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
  }

  .game-goal-item > img{
    width:25px !important;
    height:25px !important;
  }

  #goal-block-count .hud-digit-img,
  #goal-ice-count .hud-digit-img{
    height:13px !important;
    margin:0 -2px !important;
    filter:
      drop-shadow(1px 0 0 rgba(0,0,0,0.82))
      drop-shadow(2px 1px 1px rgba(0,0,0,0.62))
      drop-shadow(0 0 5px rgba(80,240,255,0.34)) !important;
  }

  #goal-block-count .hud-digit-separator,
  #goal-ice-count .hud-digit-separator{
    font-size:12px !important;
  }

  #moves .hud-digit-img{
    height:42px !important;
    filter:
      drop-shadow(1px 0 0 rgba(0,0,0,0.82))
      drop-shadow(3px 2px 2px rgba(0,0,0,0.68))
      drop-shadow(0 0 6px rgba(255,230,80,0.32)) !important;
  }

  #score.hud-bitmap-number{
    max-width:none !important;
    width:auto !important;
    overflow:visible !important;
    transform:translateY(-3px) !important;
  }

  #score .hud-digit-img{
    height:20px !important;
    margin:0 -3px !important;
    filter:
      drop-shadow(1px 0 0 rgba(0,0,0,0.82))
      drop-shadow(2px 1px 1px rgba(0,0,0,0.64))
      drop-shadow(0 0 5px rgba(120,240,255,0.34)) !important;
  }

  #score .hud-digit-separator{
    font-size:20px !important;
    margin:0 -1px !important;
  }

  #board.game-board{
    --android-tile:min(10.15vw, 40px) !important;
    position:relative !important;
    top:0 !important;
    margin-top:var(--android-board-y) !important;
    display:grid !important;
    grid-template-columns:repeat(8, var(--android-tile)) !important;
    grid-template-rows:repeat(8, var(--android-tile)) !important;
    gap:4px !important;
    padding:8px !important;
    align-items:center !important;
    justify-items:center !important;
    transform:none !important;
  }

  #board.game-board .tile{
    width:var(--android-tile) !important;
    height:var(--android-tile) !important;
    min-width:var(--android-tile) !important;
    min-height:var(--android-tile) !important;
    max-width:var(--android-tile) !important;
    max-height:var(--android-tile) !important;
    aspect-ratio:1 / 1 !important;
    box-sizing:border-box !important;
    position:relative !important;
    border-radius:11px !important;
    transform-origin:center center !important;
    overflow:hidden !important;
  }

  #board.game-board .piece-layer .board-piece{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    pointer-events:none !important;
    transform-origin:center center !important;
    will-change:transform !important;
  }

  #board.game-board .board-slot{
    background:transparent !important;
    box-shadow:none !important;
  }

  #board.game-board .tile-special-asset,
  #board.game-board .tile-obstacle-asset{
    width:100% !important;
    height:100% !important;
    aspect-ratio:1 / 1 !important;
    display:block !important;
    object-fit:contain !important;
  }

  #game-bottom-hud.game-bottom-hud{
    width:calc(100vw - 18px) !important;
    max-width:calc(100vw - 18px) !important;
    left:auto !important;
    right:auto !important;
    margin-left:var(--android-boosters-x) !important;
    padding:0 4px !important;
    gap:7px !important;
    justify-content:center !important;
    align-items:center !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    bottom:
      calc(
        var(--android-boosters-bottom) +
        env(safe-area-inset-bottom)
      ) !important;
    transform:none !important;
  }

  #game-bottom-hud .game-booster-btn{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    max-width:50px !important;
    max-height:50px !important;
    flex:0 0 50px !important;
    padding:0 !important;
    border-radius:13px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    transform:none !important;
  }

  #game-bottom-hud .game-booster-btn img{
    width:88% !important;
    height:88% !important;
    max-width:88% !important;
    max-height:88% !important;
    object-fit:contain !important;
    transform:none !important;
  }

  #game-bottom-hud #btn-booster-hammer img,
  #game-bottom-hud #btn-booster-random img,
  #game-bottom-hud #btn-booster-bomb img,
  #game-bottom-hud #btn-booster-blast img{
    width:94% !important;
    height:94% !important;
    max-width:94% !important;
    max-height:94% !important;
  }

  #game-bottom-hud .game-booster-count{
    right:-2px !important;
    bottom:-2px !important;
    min-width:18px !important;
    height:16px !important;
    padding:0 3px !important;
    border-radius:9px !important;
  }

  #game-bottom-hud .game-booster-count .hud-digit-img{
    height:11px !important;
  }

  #game-lives.game-lives{
    left:auto !important;
    right:auto !important;
    margin-left:0 !important;
    transform:none !important;
    bottom:
      calc(
        var(--android-lives-bottom) +
        env(safe-area-inset-bottom)
      ) !important;
  }
}
/* =========================================
   A1 - MATCH PREMIUM SEGURO
   No toca transform ni scale de board-piece
========================================= */

.board-piece.board-piece-match-premium{

  animation:
    boardPieceMatchPremiumSafe 190ms ease-out forwards;

  filter:
    brightness(1.32)
    saturate(1.18);

  z-index:60 !important;
}

.board-piece.board-piece-match-premium::after{

  content:"";

  position:absolute;
  inset:-6px;

  border-radius:14px;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.55),
      rgba(255,220,120,0.24) 42%,
      rgba(255,220,120,0) 72%
    );

  animation:
    boardPieceMatchPremiumGlow 190ms ease-out forwards;
}

@keyframes boardPieceMatchPremiumSafe{

  0%{
    filter:
      brightness(1)
      saturate(1);
  }

  45%{
    filter:
      brightness(1.42)
      saturate(1.24);
  }

  100%{
    filter:
      brightness(1.05)
      saturate(1.02);
  }
}

@keyframes boardPieceMatchPremiumGlow{

  0%{
    opacity:0;
  }

  35%{
    opacity:1;
  }

  100%{
    opacity:0;
  }
}
/* =========================================
   A4 - SPECIAL ICON BREATH + BACK LIGHT
========================================= */

.board-piece[data-special]{

  overflow:visible;
}

.board-piece[data-special]::before{

  content:"";

  position:absolute;

  inset:-12px;

  border-radius:50%;

  pointer-events:none;

  z-index:1;

  background:
    radial-gradient(
      circle,
      rgba(255,235,140,0.46),
      rgba(255,180,60,0.18) 46%,
      rgba(255,180,60,0) 74%
    );

  animation:
    specialBackLightBreath 1.65s ease-in-out infinite;
}

.board-piece[data-special] .tile-special-asset{

  z-index:8;

  animation:
    specialAssetPulse 1.65s ease-in-out infinite;

  transform-origin:center center;
}

@keyframes specialAssetPulse{

  0%,
  100%{

    transform:
      scale(1);

    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 4px 4px rgba(35, 3, 3, 0.36));
  }

  50%{

    transform:
      scale(1.18);

    filter:
      brightness(1.34)
      saturate(1.18)
      drop-shadow(0 0 10px rgba(255, 169, 140, 0.58));
  }
}

@keyframes specialBackLightBreath{

  0%,
  100%{

    opacity:0.28;

    transform:
      scale(0.82);
  }

  50%{

    opacity:0.9;

    transform:
      scale(1.22);
  }
}
/* =========================================
   A5 - SPECIAL BORN
========================================= */

.board-piece.special-born{

  z-index:80 !important;
}

.board-piece.special-born .tile-special-asset{

  animation:
    specialBornAsset 420ms cubic-bezier(.18,.92,.22,1.18) both;
}

.board-piece.special-born::after{

  content:"";

  position:absolute;

  inset:-14px;

  border-radius:50%;

  pointer-events:none;

  z-index:2;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.84),
      rgba(255,222,120,0.42) 38%,
      rgba(255,160,50,0) 72%
    );

  animation:
    specialBornFlash 420ms ease-out forwards;
}

@keyframes specialBornAsset{

  0%{
    transform:
      scale(0.2)
      rotate(-18deg);

    opacity:0;

    filter:
      brightness(2)
      saturate(1.4);
  }

  45%{
    transform:
      scale(1.34)
      rotate(8deg);

    opacity:1;

    filter:
      brightness(1.75)
      saturate(1.32)
      drop-shadow(0 0 12px rgba(255,235,140,0.74));
  }

  72%{
    transform:
      scale(0.92)
      rotate(-4deg);

    opacity:1;
  }

  100%{
    transform:
      scale(1)
      rotate(0deg);

    opacity:1;

    filter:
      brightness(1.1)
      saturate(1.05)
      drop-shadow(0 4px 4px rgba(0,0,0,0.36));
  }
}

@keyframes specialBornFlash{

  0%{
    opacity:0;
    transform:
      scale(0.2);
  }

  28%{
    opacity:1;
    transform:
      scale(1);
  }

  100%{
    opacity:0;
    transform:
      scale(1.75);
  }
}
/* =========================================
   A6 - SPECIAL PRE FIRE PARA BOARD-PIECE
========================================= */

.board-piece.pre-row-fire,
.board-piece.pre-col-fire{

  animation:
    boardPieceRocketPreFire 180ms ease-out;
}

.board-piece.pre-bomb-fire,
.board-piece.pre-wrap-fire{

  animation:
    boardPieceBombPreFire 220ms cubic-bezier(.18,.92,.22,1.04);
}

.board-piece.pre-color-fire{

  animation:
    boardPieceColorPreFire 260ms ease-out;
}

.board-piece.pre-row-fire .tile-special-asset,
.board-piece.pre-col-fire .tile-special-asset,
.board-piece.pre-bomb-fire .tile-special-asset,
.board-piece.pre-wrap-fire .tile-special-asset,
.board-piece.pre-color-fire .tile-special-asset{

  animation:
    boardPieceSpecialAssetCharge 220ms ease-out;
}

@keyframes boardPieceRocketPreFire{

  0%{
    filter:
      brightness(1)
      saturate(1);
  }

  45%{
    filter:
      brightness(1.55)
      saturate(1.28);
  }

  100%{
    filter:
      brightness(1.12)
      saturate(1.08);
  }
}

@keyframes boardPieceBombPreFire{

  0%{
    filter:
      brightness(1)
      saturate(1);
  }

  40%{
    filter:
      brightness(1.75)
      saturate(1.38);
  }

  100%{
    filter:
      brightness(1.1)
      saturate(1.06);
  }
}

@keyframes boardPieceColorPreFire{

  0%{
    filter:
      brightness(1)
      saturate(1);
  }

  50%{
    filter:
      brightness(1.9)
      saturate(1.5)
      hue-rotate(90deg);
  }

  100%{
    filter:
      brightness(1.15)
      saturate(1.1)
      hue-rotate(0deg);
  }
}

@keyframes boardPieceSpecialAssetCharge{

  0%{
    transform:
      scale(1);

    filter:
      brightness(1)
      saturate(1);
  }

  45%{
    transform:
      scale(1.28);

    filter:
      brightness(1.8)
      saturate(1.36)
      drop-shadow(0 0 12px rgba(255,235,140,0.72));
  }

  100%{
    transform:
      scale(1);

    filter:
      brightness(1.1)
      saturate(1.04);
  }
}
/* =========================================
   A9 - BOOSTER GHOST
========================================= */

.booster-ghost{

  position:fixed;

  left:0;
  top:0;

  width:92px;
  height:92px;

  z-index:13000;

  pointer-events:none;

  opacity:0;

  transform:
    translate(-50%, -50%)
    scale(0.72);

  transition:
    left 220ms cubic-bezier(.18,.92,.22,1),
    top 220ms cubic-bezier(.18,.92,.22,1),
    transform 220ms cubic-bezier(.18,.92,.22,1),
    opacity 160ms ease,
    filter 180ms ease;

  filter:
    drop-shadow(0 10px 14px rgba(0,0,0,0.46))
    drop-shadow(0 0 14px rgba(255,230,120,0.48));
}

.booster-ghost img{

  width:100%;
  height:100%;

  object-fit:contain;

  opacity:0.78;
}

.booster-ghost-active{

  opacity:1;

  transform:
    translate(-50%, -50%)
    scale(1.28);
}

.booster-ghost-fly{

  opacity:1;

  transform:
    translate(-50%, -50%)
    scale(0.74)
    rotate(14deg);

  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,0.48))
    drop-shadow(0 0 18px rgba(255,245,150,0.78));
}