:root{
  --scene-w: min(100vw, 1536px);
  --gold:#d6b06a;
  --gold-soft:#f2d28a;
  --ink:#070503;
  --panel:rgba(7,5,3,.70);
  --danger:#b32032;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;background:#050405;color:#f5eee2;
  font-family:Georgia,'Times New Roman',serif;display:grid;place-items:center;overflow:hidden;
}
.game-shell{width:100%;height:100vh;position:relative;overflow:hidden;background:#000}
.scene{position:absolute;inset:0;margin:auto;width:var(--scene-w);aspect-ratio:16/9;overflow:hidden;user-select:none;background:#000;z-index:0}
.board-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0}
.board-fallback{z-index:0}
.board-video{z-index:1;opacity:0;transition:opacity .35s ease;background:transparent}
.board-video.ready{opacity:1}
.panel{
  z-index:1000;background:linear-gradient(180deg,rgba(13,10,7,.82),rgba(0,0,0,.68));
  border:1px solid rgba(214,176,106,.55);box-shadow:0 0 0 1px rgba(0,0,0,.85),0 0 28px rgba(0,0,0,.65),inset 0 0 22px rgba(214,176,106,.06);
  backdrop-filter:blur(6px);border-radius:10px;color:#f8eddc;
}
.top-hud{position:fixed;top:14px;left:14px;display:flex;gap:13px;align-items:center;padding:10px 14px}
h1{font-size:22px;margin:0;letter-spacing:.02em;text-shadow:0 2px 3px #000;white-space:nowrap}.turn-pill{font-size:16px;color:#ffe4ad;min-width:150px;border-left:1px solid rgba(214,176,106,.35);padding-left:12px}
button{cursor:pointer;background:#21180f;color:#f5eee2;border:1px solid rgba(214,176,106,.72);border-radius:8px;padding:9px 13px;font-family:inherit;font-weight:700;font-size:15px}button:hover{background:#3a2615}button.active{background:#5a3818;box-shadow:0 0 12px rgba(214,176,106,.45)}button:disabled{opacity:.35;cursor:not-allowed}
.side-panel{position:fixed;width:220px;padding:16px;line-height:1.35}.side-panel h2{font-size:17px;margin:0 0 12px;color:#fff1ca}.side-panel h3{font-size:15px;margin:14px 0 8px;color:#ffe4ad}.side-panel p{margin:0 0 12px}.hint{color:#d9c7a5;font-size:14px}.left-panel{left:14px;top:112px}.right-panel{right:14px;top:16px;text-align:center}.timer{font-size:26px;font-weight:800;margin:12px 0;color:#fff}.divider{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:13px 0}.bottom-message{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);min-width:420px;max-width:680px;padding:13px 22px;display:flex;gap:14px;align-items:center}.crest{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(214,176,106,.65);border-radius:8px;color:#ffe4ad;font-size:25px;background:rgba(90,56,24,.25)}#bottomMessage{font-size:18px}.undo{position:fixed;left:22px;bottom:22px;padding:14px 22px}.sound{position:fixed;right:22px;bottom:22px;width:56px;height:56px;font-size:22px;padding:0}.grid,.grid-lines,.pieces,.effects{position:absolute;inset:0}.grid-lines{display:none;pointer-events:none;z-index:1}.scene.debug .grid-lines{display:block}.grid-lines line{stroke:rgba(255,214,105,.82);stroke-width:.11;filter:drop-shadow(0 0 1px #000)}.cell{position:absolute;transform:none;pointer-events:auto;background:transparent}.scene.debug .cell{border:1px solid rgba(255,214,105,.68);background:rgba(255,214,105,.045);box-shadow:inset 0 0 0 1px rgba(0,0,0,.38)}.scene.debug .cell::after{content:attr(data-square);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 10px Arial;color:#fff;text-shadow:0 1px 3px #000}.scene.debug .cell:nth-child(odd){background:rgba(255,214,105,.025)}.cell.show{background:linear-gradient(180deg,rgba(214,176,106,.22),rgba(214,176,106,.08));box-shadow:0 0 18px rgba(214,176,106,.70),inset 0 0 0 2px rgba(255,235,190,.60)}.cell.capture{background:linear-gradient(180deg,rgba(179,32,50,.40),rgba(179,32,50,.16));box-shadow:0 0 22px rgba(179,32,50,.88),inset 0 0 0 2px rgba(255,180,180,.75)}.piece{position:absolute;transform:translate(-50%,-100%);transform-origin:50% 100%;z-index:3;cursor:pointer;filter:drop-shadow(0 13px 10px rgba(0,0,0,.85));transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease,transform .14s ease,filter .14s ease}.piece img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.piece.white{filter:drop-shadow(0 13px 10px rgba(0,0,0,.85)) drop-shadow(0 0 7px rgba(255,255,230,.12))}.piece.black{filter:drop-shadow(0 13px 10px rgba(0,0,0,.85)) drop-shadow(0 0 8px rgba(120,0,20,.18))}.piece.moving{transition:left .46s cubic-bezier(.18,.72,.18,1),top .46s cubic-bezier(.18,.72,.18,1),width .46s ease,height .46s ease,transform .22s ease,filter .22s ease;filter:drop-shadow(0 24px 15px rgba(0,0,0,.92)) drop-shadow(0 0 14px rgba(214,176,106,.38));}
.piece.selected{transform:translate(-50%,-103%) scale(1.07);filter:drop-shadow(0 20px 12px rgba(0,0,0,.9)) drop-shadow(0 0 16px var(--gold))}.piece.dragging{transition:none;z-index:9999!important;pointer-events:none;transform:translate(-50%,-100%) scale(1.07)}.piece.destroy{animation:destroy .55s ease forwards}@keyframes destroy{0%{opacity:1;transform:translate(-50%,-100%) scale(1)}45%{filter:brightness(1.7) drop-shadow(0 0 24px #fff);transform:translate(-50%,-100%) scale(1.10)}100%{opacity:0;transform:translate(-50%,-78%) scale(.18) rotate(18deg);filter:brightness(.2) blur(2px)}}.shard{position:absolute;background-size:cover;background-repeat:no-repeat;transform:translate(-50%,-50%);opacity:.95;clip-path:polygon(50% 0,100% 100%,0 100%);animation:shard .65s ease-out forwards;filter:drop-shadow(0 5px 3px rgba(0,0,0,.7))}@keyframes shard{to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(.25)}}
@media (max-width:1100px){.left-panel,.right-panel{display:none}.bottom-message{min-width:320px}.top-hud{gap:8px}h1{font-size:18px}.turn-pill{font-size:14px;min-width:130px}}
@media (max-width:700px){body{overflow:auto}.top-hud{top:auto;bottom:10px;left:10px;right:10px;justify-content:space-between}.bottom-message,.undo,.sound{display:none}h1{display:none}}

.small-hint{font-size:12px;color:#e2c886;margin-top:8px}

/* v13: solo cuadrícula amarilla real + tiradores de esquina */
.corner-handles{position:absolute;inset:0;z-index:18;display:none;pointer-events:none}
.scene.debug .corner-handles{display:block}
.corner-handle{position:absolute;width:34px;height:24px;transform:translate(-50%,-50%);display:grid;place-items:center;background:rgba(255,214,105,.92);color:#130c04;border:2px solid #fff3a0;border-radius:7px;font:800 11px Arial,sans-serif;text-shadow:none;box-shadow:0 0 12px rgba(255,214,105,.85),0 2px 8px #000;cursor:grab;pointer-events:auto;user-select:none}
.corner-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.08)}
.scene.debug .cell{border:1px solid rgba(255,214,105,.55)!important;background:rgba(255,214,105,.035)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)!important}
.grid-lines line{stroke:rgba(255,222,70,.90)!important;stroke-width:.13!important;filter:drop-shadow(0 0 1px #000)}
.line-handle{position:absolute;min-width:28px;height:20px;padding:0 5px;transform:translate(-50%,-50%);display:grid;place-items:center;background:rgba(20,15,6,.92);color:#ffe46a;border:1px solid rgba(255,226,95,.95);border-radius:6px;font:800 10px Arial,sans-serif;text-shadow:0 1px 2px #000;box-shadow:0 0 10px rgba(255,214,105,.6),0 2px 8px #000;cursor:grab;pointer-events:auto;user-select:none}
.line-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.08)}
.vertical-line-handle{background:rgba(56,35,8,.95)}
.horizontal-line-handle{background:rgba(12,45,38,.95)}



/* v20: fondo dinámico sin mover el tablero real.
   El tablero/base permanece fijo para no romper las coordenadas; solo se animan capas atmosféricas. */
.ambient-layers{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s ease;overflow:hidden}
.scene.dynamic .ambient-layers{opacity:1}
.fog{position:absolute;inset:-18%;opacity:.24;filter:blur(18px);mix-blend-mode:screen;will-change:transform,opacity}
.fog-a{
  background:
    radial-gradient(ellipse at 18% 68%,rgba(210,210,220,.22),transparent 34%),
    radial-gradient(ellipse at 76% 38%,rgba(180,175,190,.16),transparent 36%),
    linear-gradient(92deg,transparent 0%,rgba(185,190,205,.13) 34%,transparent 62%,rgba(210,210,220,.10) 100%);
  animation:fogDriftA 46s linear infinite;
}
.fog-b{
  opacity:.18;filter:blur(24px);
  background:
    radial-gradient(ellipse at 30% 40%,rgba(255,235,190,.14),transparent 32%),
    radial-gradient(ellipse at 68% 72%,rgba(180,190,205,.18),transparent 38%),
    linear-gradient(112deg,rgba(255,255,255,.08),transparent 28%,rgba(255,255,255,.06) 72%,transparent);
  animation:fogDriftB 62s linear infinite;
}
.candle-glow{position:absolute;width:24%;height:34%;border-radius:50%;filter:blur(24px);mix-blend-mode:screen;opacity:.18;will-change:opacity,transform;background:radial-gradient(ellipse,rgba(255,177,80,.55) 0%,rgba(255,116,38,.20) 34%,transparent 70%);animation:candleFlicker 3.2s ease-in-out infinite}
.glow-left{left:4%;top:48%;animation-delay:-.8s}.glow-right{right:3%;top:36%;animation-delay:-1.7s}
.dust-layer{position:absolute;inset:-6%;opacity:.28;mix-blend-mode:screen;background-image:
  radial-gradient(circle,rgba(255,238,186,.35) 0 1px,transparent 1.6px),
  radial-gradient(circle,rgba(255,255,255,.20) 0 1px,transparent 1.4px),
  radial-gradient(circle,rgba(255,185,90,.18) 0 1px,transparent 1.5px);
  background-size:170px 170px,230px 230px,310px 310px;background-position:0 0,60px 90px,130px 30px;animation:dustFloat 28s linear infinite;}
.scene-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.26) 74%,rgba(0,0,0,.62) 100%);opacity:.72;mix-blend-mode:multiply;animation:breathingDarkness 7.5s ease-in-out infinite}
@keyframes fogDriftA{0%{transform:translate3d(-4%,1%,0) scale(1.02)}50%{transform:translate3d(5%,-1.5%,0) scale(1.06)}100%{transform:translate3d(-4%,1%,0) scale(1.02)}}
@keyframes fogDriftB{0%{transform:translate3d(5%,-2%,0) scale(1.08)}50%{transform:translate3d(-5%,2%,0) scale(1.02)}100%{transform:translate3d(5%,-2%,0) scale(1.08)}}
@keyframes candleFlicker{0%,100%{opacity:.15;transform:scale(.96)}14%{opacity:.24;transform:scale(1.04)}37%{opacity:.17;transform:scale(.99)}63%{opacity:.26;transform:scale(1.08)}82%{opacity:.19;transform:scale(1.01)}}
@keyframes dustFloat{from{transform:translate3d(0,4%,0);background-position:0 0,60px 90px,130px 30px}to{transform:translate3d(0,-4%,0);background-position:180px -280px,-120px -190px,260px -240px}}
@keyframes breathingDarkness{0%,100%{opacity:.62}50%{opacity:.78}}
@media (prefers-reduced-motion:reduce){.fog,.dust-layer,.candle-glow,.scene-vignette{animation:none!important}.ambient-layers{opacity:.55}}

/* v19: interacción por casillas, tooltip de pieza y piezas solo visuales */
.grid{z-index:120;pointer-events:auto}
.pieces{z-index:30;pointer-events:none}
.effects{z-index:140;pointer-events:none}
.piece{pointer-events:none;cursor:default}
.cell{cursor:pointer}
.cell.hover{
  background:linear-gradient(180deg,rgba(255,229,128,.24),rgba(214,176,106,.10));
  box-shadow:0 0 18px rgba(255,214,105,.85),inset 0 0 0 2px rgba(255,242,180,.85);
  border:1px solid rgba(255,242,180,.92);
}
.scene:not(.debug) .cell.hover::after{content:''}
.scene:not(.debug) .cell.show,
.scene:not(.debug) .cell.capture,
.scene:not(.debug) .cell.hover{
  outline:none;
}


/* v19: tooltip de nombre de ficha */
.piece-tooltip{
  position:absolute;
  z-index:180;
  pointer-events:none;
  transform:translate(-50%, calc(-100% - 18px));
  padding:7px 11px;
  border:1px solid rgba(255,226,135,.78);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(22,15,9,.94),rgba(0,0,0,.86));
  color:#fff1c6;
  font:800 13px Georgia,serif;
  letter-spacing:.02em;
  text-shadow:0 2px 3px #000;
  box-shadow:0 0 18px rgba(0,0,0,.8), inset 0 0 14px rgba(214,176,106,.08);
  opacity:0;
  transition:opacity .12s ease, transform .12s ease;
  white-space:nowrap;
}
.piece-tooltip.visible{
  opacity:1;
  transform:translate(-50%, calc(-100% - 24px));
}


/* v21: ambiente realmente visible + botones siempre por encima del tablero */
.top-hud,.side-panel,.bottom-message,.undo,.sound{z-index:1000;pointer-events:auto}
.scene{z-index:0;isolation:isolate}
.ambient-layers{z-index:8;opacity:0;mix-blend-mode:normal}
.scene.dynamic .ambient-layers{opacity:1}
.ambient-layers::before,
.ambient-layers::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  opacity:.42;
  filter:blur(22px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
}
.ambient-layers::before{
  background:
    linear-gradient(102deg,transparent 0%,rgba(235,230,210,.00) 18%,rgba(235,230,210,.24) 37%,transparent 58%,rgba(200,210,225,.16) 77%,transparent 100%),
    radial-gradient(ellipse at 50% 58%,rgba(220,220,230,.22),transparent 46%);
  animation:mistSheetOne 24s linear infinite;
}
.ambient-layers::after{
  opacity:.32;
  background:
    linear-gradient(78deg,rgba(230,220,190,.16),transparent 28%,rgba(200,205,225,.18) 55%,transparent 85%),
    radial-gradient(ellipse at 18% 72%,rgba(255,190,90,.16),transparent 34%),
    radial-gradient(ellipse at 83% 40%,rgba(255,150,70,.16),transparent 36%);
  animation:mistSheetTwo 34s linear infinite;
}
.fog{opacity:.40;z-index:1;filter:blur(20px)}
.fog-b{opacity:.30;filter:blur(28px)}
.candle-glow{opacity:.42;z-index:2;filter:blur(28px);background:radial-gradient(ellipse,rgba(255,190,90,.72) 0%,rgba(255,120,42,.30) 38%,transparent 72%)}
.dust-layer{opacity:.55;z-index:3;filter:drop-shadow(0 0 2px rgba(255,226,170,.4));background-size:120px 120px,180px 180px,260px 260px}
.scene-vignette{opacity:.66;z-index:4}
.dynamic-indicator{
  position:absolute;
  left:50%;top:9%;
  transform:translateX(-50%);
  z-index:9;
  pointer-events:none;
  width:46%;height:22%;
  opacity:0;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,208,126,.20),transparent 68%);
  filter:blur(18px);
  mix-blend-mode:screen;
  animation:ambientPulse 5.8s ease-in-out infinite;
}
.scene.dynamic .dynamic-indicator{opacity:1}
@keyframes mistSheetOne{0%{transform:translate3d(-10%,3%,0) scale(1.04)}50%{transform:translate3d(8%,-2%,0) scale(1.08)}100%{transform:translate3d(-10%,3%,0) scale(1.04)}}
@keyframes mistSheetTwo{0%{transform:translate3d(9%,-3%,0) scale(1.08)}50%{transform:translate3d(-7%,2%,0) scale(1.03)}100%{transform:translate3d(9%,-3%,0) scale(1.08)}}
@keyframes ambientPulse{0%,100%{opacity:.18;transform:translateX(-50%) scale(.98)}50%{opacity:.52;transform:translateX(-50%) scale(1.08)}}


/* v22: ambiente más sutil, sin lavar la imagen del tablero */
.scene.dynamic .ambient-layers{opacity:.74}
.ambient-layers::before{opacity:.20!important;filter:blur(24px)!important}
.ambient-layers::after{opacity:.17!important;filter:blur(25px)!important}
.fog{opacity:.20!important;filter:blur(24px)!important}
.fog-b{opacity:.14!important;filter:blur(30px)!important}
.candle-glow{opacity:.18!important;filter:blur(30px)!important;background:radial-gradient(ellipse,rgba(255,178,88,.38) 0%,rgba(255,116,42,.14) 38%,transparent 74%)!important}
.dust-layer{opacity:.28!important;filter:drop-shadow(0 0 1px rgba(255,226,170,.24))!important}
.scene-vignette{opacity:.58!important}
.scene.dynamic .dynamic-indicator{opacity:.22!important}
@keyframes ambientPulse{0%,100%{opacity:.10;transform:translateX(-50%) scale(.98)}50%{opacity:.24;transform:translateX(-50%) scale(1.05)}}

/* v22: pantalla de derrota */
.defeat-overlay{
  position:fixed;
  inset:0;
  z-index:3000;
  display:none;
  place-items:center;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,rgba(130,0,16,.42),rgba(20,0,5,.76) 58%,rgba(0,0,0,.92) 100%),
    linear-gradient(120deg,rgba(255,0,30,.12),transparent 42%,rgba(255,40,40,.10));
  backdrop-filter:blur(3px);
  animation:defeatPulse 2.1s ease-in-out infinite;
}
.defeat-overlay.visible{display:grid;pointer-events:auto}
.defeat-card{
  width:min(680px,90vw);
  padding:38px 42px 34px;
  text-align:center;
  border:1px solid rgba(255,110,110,.85);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(55,0,8,.92),rgba(0,0,0,.86));
  box-shadow:0 0 55px rgba(179,32,50,.65), inset 0 0 34px rgba(255,50,50,.12);
}
.defeat-title{
  font-size:clamp(56px,9vw,112px);
  line-height:.9;
  font-weight:900;
  color:#ffd5d5;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-shadow:0 0 18px rgba(255,0,30,.75),0 5px 0 #300006,0 9px 18px #000;
}
.defeat-card p{font-size:22px;color:#ffdede;margin:20px 0 28px;text-shadow:0 2px 6px #000}
.retry-btn{font-size:20px;padding:14px 26px;border-color:rgba(255,170,170,.9);background:#4a000a;color:#fff4f4;box-shadow:0 0 18px rgba(255,0,30,.35)}
.retry-btn:hover{background:#7a0816}
@keyframes defeatPulse{0%,100%{filter:saturate(1);box-shadow:inset 0 0 0 rgba(255,0,0,0)}50%{filter:saturate(1.35);box-shadow:inset 0 0 120px rgba(255,0,30,.18)}}


/* v23: promoción espectral de peón a reina */
.promotion-effect{
  position:absolute;
  transform:translate(-50%,-100%);
  transform-origin:50% 100%;
  z-index:180;
  pointer-events:none;
  isolation:isolate;
  animation:promotionFade 1.35s ease-out forwards;
}
.promotion-effect.white-magic{
  --magic-core:rgba(240,255,255,.98);
  --magic-main:rgba(141,236,255,.82);
  --magic-soft:rgba(214,176,106,.70);
  --magic-shadow:rgba(121,214,255,.54);
}
.promotion-effect.black-magic{
  --magic-core:rgba(245,236,255,.98);
  --magic-main:rgba(178,116,255,.78);
  --magic-soft:rgba(255,82,151,.56);
  --magic-shadow:rgba(123,48,255,.52);
}
.promo-column{
  position:absolute;
  left:50%;
  bottom:0;
  width:42%;
  height:100%;
  transform:translateX(-50%);
  border-radius:50% 50% 16% 16%;
  background:
    radial-gradient(ellipse at center,var(--magic-core) 0%,var(--magic-main) 18%,rgba(255,255,255,.12) 38%,transparent 72%);
  filter:blur(8px);
  mix-blend-mode:screen;
  animation:promoColumn 1.15s ease-out forwards;
}
.promo-ring{
  position:absolute;
  left:50%;
  bottom:3%;
  width:76%;
  height:22%;
  transform:translateX(-50%) rotateX(62deg);
  border:2px solid var(--magic-main);
  border-radius:50%;
  box-shadow:0 0 16px var(--magic-shadow), inset 0 0 18px var(--magic-soft);
  opacity:.95;
  animation:promoRing 1.2s ease-out forwards;
}
.promo-crown{
  position:absolute;
  left:50%;
  top:12%;
  transform:translate(-50%,10%) scale(.5);
  color:var(--magic-core);
  font-size:clamp(22px,3vw,50px);
  text-shadow:0 0 10px var(--magic-core),0 0 24px var(--magic-main),0 0 42px var(--magic-shadow);
  opacity:0;
  animation:promoCrown 1.25s cubic-bezier(.17,.84,.22,1) forwards;
}
.promo-burst{
  position:absolute;
  left:50%;
  top:48%;
  width:20%;
  height:20%;
  transform:translate(-50%,-50%) scale(.1);
  border-radius:50%;
  background:radial-gradient(circle,var(--magic-core),var(--magic-main) 28%,transparent 66%);
  filter:blur(4px);
  mix-blend-mode:screen;
  animation:promoBurst 1.1s ease-out forwards;
}
.promo-spark{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--magic-core);
  box-shadow:0 0 8px var(--magic-core),0 0 18px var(--magic-main),0 0 30px var(--magic-shadow);
  transform:translate(-50%,-50%) scale(var(--spark-scale));
  opacity:0;
  animation:promoSpark 1.05s ease-out forwards;
}
@keyframes promotionFade{
  0%{opacity:0;filter:brightness(1)}
  8%{opacity:1;filter:brightness(1.35)}
  72%{opacity:1;filter:brightness(1.1)}
  100%{opacity:0;filter:brightness(.75)}
}
@keyframes promoColumn{
  0%{opacity:0;transform:translateX(-50%) scaleY(.18)}
  22%{opacity:.94;transform:translateX(-50%) scaleY(1.06)}
  100%{opacity:0;transform:translateX(-50%) scaleY(1.28)}
}
@keyframes promoRing{
  0%{opacity:0;transform:translateX(-50%) rotateX(62deg) scale(.45)}
  22%{opacity:1;transform:translateX(-50%) rotateX(62deg) scale(1.05)}
  100%{opacity:0;transform:translateX(-50%) rotateX(62deg) scale(1.72)}
}
@keyframes promoCrown{
  0%{opacity:0;transform:translate(-50%,36%) scale(.35) rotate(-8deg)}
  30%{opacity:1;transform:translate(-50%,0%) scale(1.12) rotate(3deg)}
  72%{opacity:.95;transform:translate(-50%,-10%) scale(1) rotate(0deg)}
  100%{opacity:0;transform:translate(-50%,-42%) scale(.74) rotate(10deg)}
}
@keyframes promoBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}
  28%{opacity:1;transform:translate(-50%,-50%) scale(1.45)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}
}
@keyframes promoSpark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(var(--spark-scale))}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15)}
}
@media (prefers-reduced-motion:reduce){
  .promotion-effect,.promo-column,.promo-ring,.promo-crown,.promo-burst,.promo-spark{animation:none!important;opacity:.45}
}

/* v24: contador de tiempo y producción sin botón de cuadrícula */
.timer-label{font-size:13px;color:#d9c7a5;text-transform:uppercase;letter-spacing:.08em;margin-top:8px}

/* v26: modo rendimiento para portátiles modestos / GPU integrada.
   Mantiene la jugabilidad, pero reduce trabajo de GPU y CPU. */
body.performance-mode{
  --scene-w:min(100vw,1280px);
}
body.performance-mode .board-video{
  display:none!important;
  opacity:0!important;
}
body.performance-mode .ambient-layers,
body.performance-mode .ambient-layers::before,
body.performance-mode .ambient-layers::after,
body.performance-mode .fog,
body.performance-mode .dust-layer,
body.performance-mode .candle-glow,
body.performance-mode .scene-vignette,
body.performance-mode .dynamic-indicator{
  display:none!important;
  animation:none!important;
  filter:none!important;
}
body.performance-mode .panel{
  backdrop-filter:none!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.85),0 8px 18px rgba(0,0,0,.55)!important;
}
body.performance-mode .piece,
body.performance-mode .piece.white,
body.performance-mode .piece.black{
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.82))!important;
  transition:left .22s ease,top .22s ease,width .16s ease,height .16s ease,transform .12s ease!important;
}
body.performance-mode .piece.moving{
  transition:left .30s cubic-bezier(.18,.72,.18,1),top .30s cubic-bezier(.18,.72,.18,1)!important;
  filter:drop-shadow(0 9px 6px rgba(0,0,0,.86))!important;
}
body.performance-mode .cell.hover,
body.performance-mode .cell.show,
body.performance-mode .cell.capture{
  box-shadow:inset 0 0 0 2px rgba(255,242,180,.78)!important;
}
body.performance-mode .promotion-effect,
body.performance-mode .promo-column,
body.performance-mode .promo-ring,
body.performance-mode .promo-crown,
body.performance-mode .promo-burst,
body.performance-mode .promo-spark{
  filter:none!important;
  box-shadow:none!important;
}
body.performance-mode .shard{
  filter:none!important;
}