/* board.css — tabuleiro neon em 3D (plano inclinado) com peças em pé sobre bases a brilhar,
   estados das peças (equipada, congelada, escudo, xeque) e marcações de jogada com o nome da casa. */
.board-host, .board-wrap, .board, .pieces { transform-style: preserve-3d; }
.board-wrap { position: relative; width: var(--bw, 560px); aspect-ratio: 1; padding: calc(var(--bw, 560px) * .022); border-radius: 18px;
  background: linear-gradient(160deg, #18206b, #0b0f3a 70%); border: 2px solid #59E1FF;
  box-shadow: 0 0 0 4px rgba(89, 225, 255, .18), 0 0 46px rgba(89, 225, 255, .55), inset 0 0 34px rgba(89, 225, 255, .3), 0 18px 0 #070a26; }
.board { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border-radius: 8px; background: #070a2e; }
.board::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 8px; transform: translateZ(.5px);
  background: radial-gradient(circle at 50% 50%, transparent 0 17%, rgba(197, 138, 249, .45) 17.5% 18.5%, transparent 19% 27%, rgba(123, 66, 246, .35) 27.5% 28.2%, transparent 28.8%),
    radial-gradient(circle at 50% 50%, rgba(123, 66, 246, .28), transparent 42%); mix-blend-mode: screen; }
.sq { position: relative; background: rgba(14, 18, 66, .95); box-shadow: inset 0 0 0 1px rgba(120, 200, 255, .16); }
.sq:not(.dark) { background: linear-gradient(145deg, rgba(118, 158, 255, .62), rgba(76, 104, 236, .5)); box-shadow: inset 0 0 0 1px rgba(170, 225, 255, .45), inset 0 0 14px rgba(170, 225, 255, .25); }
.coord { position: absolute; font-family: var(--font-head); font-weight: 700; font-size: calc(var(--bw, 560px) * .02); color: rgba(150, 225, 255, .75); pointer-events: none; z-index: 2; }
.coord.file { right: 5%; bottom: 2%; } .coord.rank { left: 5%; top: 3%; }

/* marcações (deitadas no tabuleiro) */
.sq.last { box-shadow: inset 0 0 0 999px rgba(252, 201, 52, .26), inset 0 0 0 2px rgba(252, 201, 52, .7); }
.sq.sel { box-shadow: inset 0 0 0 999px rgba(89, 225, 255, .35), inset 0 0 0 3px #59E1FF; }
.sq .dot { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 2;
  background: radial-gradient(circle, #CFF6FF 0 25%, #59E1FF 55%, rgba(89, 225, 255, 0) 72%); pointer-events: none; animation: dot-in .3s cubic-bezier(.2, 1.8, .4, 1); }
.sq .ring { position: absolute; inset: 8%; border-radius: 50%; border: 4px solid #FF4F9A; box-shadow: 0 0 14px #FF4F9A, inset 0 0 10px rgba(255, 79, 154, .6); pointer-events: none; z-index: 2;
  animation: dot-in .3s cubic-bezier(.2, 1.8, .4, 1), ring-pulse 1.2s ease-in-out infinite; }
.sq .ring.lance { border-style: dashed; border-color: #FA903E; box-shadow: 0 0 14px #FA903E; }
.sq-label { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 3; pointer-events: none; padding: 0 .4em; border-radius: 6px;
  background: rgba(7, 10, 46, .85); border: 1.5px solid #59E1FF; color: #CFF6FF; font: 700 calc(var(--bw, 560px) * .021) var(--font-head); letter-spacing: .04em; }
.sq.target { cursor: pointer; }
/* lances de uma peça inimiga (espreitar, MatchHints): casa dela vermelha, destinos laranja, capturas vermelhas */
.sq.peek-from { box-shadow: inset 0 0 0 999px rgba(217, 4, 41, .3), inset 0 0 0 3px #D90429; }
.sq .dot.peek { width: 24%; height: 24%; background: radial-gradient(circle, #FFE1B8 0 25%, #FB8500 55%, rgba(251, 133, 0, 0) 72%); }
.sq .ring.peek { border-color: #FF4D5E; box-shadow: 0 0 12px #FF4D5E; }
.sq-label.peek { border-color: #FB8500; color: #FFE1B8; }
.sq.target:hover { box-shadow: inset 0 0 0 999px rgba(89, 225, 255, .22), inset 0 0 0 2px #59E1FF; }
.sq.equip-ok::before { content: ''; position: absolute; inset: 4%; border-radius: 50%; z-index: 2; background: radial-gradient(circle, rgba(252, 201, 52, .75), transparent 70%);
  animation: pulse-glow 1.1s ease-in-out infinite; pointer-events: none; }
.sq.trap-ok::before { content: ''; position: absolute; inset: 14%; border-radius: 10px; z-index: 2; border: 3px dashed #FF4F9A; box-shadow: 0 0 10px rgba(255, 79, 154, .7); animation: spin-slow 6s linear infinite; pointer-events: none; }
.sq.check { animation: check-pulse .9s ease-in-out infinite; }
.sq.threat-to { box-shadow: inset 0 0 0 4px #D90429, inset 0 0 18px rgba(217, 4, 41, .55); }
.sq.threat-from { box-shadow: inset 0 0 0 4px #FB8500; }
.sq.blocked { background-image: repeating-linear-gradient(45deg, #FFB703 0 10px, #0F141C 10px 20px) !important; box-shadow: inset 0 0 0 3px #0F141C; }
@keyframes dot-in { from { transform: translate(-50%, -50%) scale(0); } }
@keyframes ring-pulse { 50% { box-shadow: 0 0 22px #FF4F9A, inset 0 0 14px rgba(255, 79, 154, .8); } }
@keyframes pulse-glow { 50% { transform: scale(1.12); opacity: .6; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes check-pulse { 0%, 100% { box-shadow: inset 0 0 0 999px rgba(217, 48, 37, .3); } 50% { box-shadow: inset 0 0 0 999px rgba(255, 60, 60, .7), 0 0 20px #FF3B3B; } }

/* armadilhas próprias (só o dono vê) e inimigas reveladas */
.trap-mark { position: absolute; inset: 12%; border-radius: 12px; border: 3px dashed var(--c, #FF4F9A); pointer-events: auto; z-index: 2;
  display: grid; place-items: center; background: rgba(255, 255, 255, .12); box-shadow: 0 0 12px var(--c, #FF4F9A); animation: trap-breathe 2.2s ease-in-out infinite; }
.trap-mark svg { width: 70%; height: 70%; opacity: .95; }
.trap-mark.enemy { border-style: solid; border-color: var(--red); background: rgba(217, 48, 37, .2); }
.trap-mark.enemy::after { content: '!'; position: absolute; top: -10px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--red);
  border: 2.5px solid var(--ink); color: #fff; font: 700 13px/16px var(--font-head); text-align: center; }
@keyframes trap-breathe { 50% { transform: scale(.92); opacity: .78; } }

/* ── peças em pé ── */
.pieces { position: absolute; inset: 0; pointer-events: none; transform: translateZ(1px); z-index: 3; }
.piece { position: absolute; width: 12.5%; height: 12.5%; pointer-events: none; transform-style: preserve-3d; }
.piece .base-disc { position: absolute; left: 10%; right: 10%; top: 22%; bottom: 14%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 79, 154, .95) 0 22%, rgba(255, 79, 154, .45) 45%, rgba(255, 79, 154, 0) 70%); box-shadow: 0 0 0 2px rgba(255, 140, 190, .55); }
.piece.mine .base-disc { background: radial-gradient(circle, rgba(89, 225, 255, .95) 0 22%, rgba(89, 225, 255, .45) 45%, rgba(89, 225, 255, 0) 70%); box-shadow: 0 0 0 2px rgba(160, 240, 255, .6); }
.piece .stand { position: absolute; left: -6%; right: -6%; bottom: 36%; height: 128%; transform-origin: 50% 100%; transform: rotateX(calc(-1 * var(--tilt, 30deg))); transform-style: preserve-3d; pointer-events: none; }
.piece .hop { position: absolute; inset: 0; }
.piece .squash { position: absolute; inset: 0 4%; transform-origin: 50% 95%; pointer-events: auto; cursor: pointer; }
.piece-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 79, 154, .55)) drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.piece.mine .piece-svg { filter: drop-shadow(0 0 5px rgba(89, 225, 255, .6)) drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.piece.selected .squash { transform: translateY(-10%) scale(1.08); transition: transform .2s cubic-bezier(.2, 1.8, .4, 1); }
.piece.selected .base-disc { box-shadow: 0 0 0 3px #CFF6FF, 0 0 18px #59E1FF; }
.piece .squash:hover .piece-svg { filter: drop-shadow(0 0 9px #fff) drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.piece.lifted { z-index: 6; }

/* expressões */
.piece-svg .eyes-wrap { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 3.6s infinite; animation-delay: var(--blink, 0s); }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
.piece-svg .eyes-star, .piece-svg .eyes-spiral, .piece-svg .brows, .piece-svg .mouth-o, .piece-svg .mouth-grit, .piece-svg .sweat { display: none; }
.piece.equipped .eyes-normal .pupil { display: none; }
.piece.equipped .eyes-star, .piece.equipped .brows { display: inline; }
.piece.frozen .eyes-normal, .piece.frozen .eyes-star, .piece.frozen .brows { display: none; }
.piece.frozen .eyes-spiral { display: inline; }
.piece.checked .sweat, .piece.checked .mouth-grit { display: inline; }
.piece.checked .mouth-smile { display: none; }
.piece.checked .piece-svg { animation: tremble .16s linear infinite; }
.piece.scared .mouth-smile, .piece.scared .mouth-grit { display: none; }
.piece.scared .mouth-o { display: inline; }
.piece.scared .piece-svg { animation: tremble .12s linear infinite; }
@keyframes tremble { 25% { transform: translate(-1.5%, .5%) rotate(-1.5deg); } 75% { transform: translate(1.5%, -.5%) rotate(1.5deg); } }

.piece .aura { position: absolute; inset: 10% 0 0; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, var(--aura, rgba(252, 201, 52, .7)) 0%, transparent 65%); }
.piece.equipped .aura { opacity: .8; animation: aura 1.6s ease-in-out infinite; }
@keyframes aura { 50% { transform: scale(1.12); opacity: .45; } }
.piece .medals { position: absolute; right: 0; bottom: 4%; display: flex; flex-direction: column-reverse; gap: 2px; z-index: 3; }
.medal { width: calc(var(--bw, 560px) * .03); height: calc(var(--bw, 560px) * .03); border-radius: 50%; border: 2px solid var(--ink);
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--c1) 45%, var(--c2) 100%); display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 8px var(--c1); }
.medal svg { width: 115%; height: 115%; }
.piece .shield-dome { position: absolute; inset: 6% 2% 0; border-radius: 50% 50% 46% 46%; border: 3px solid var(--teal); opacity: 0; transform: scale(.4);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75) 0 7%, transparent 8%), radial-gradient(circle at 50% 55%, rgba(18, 181, 203, .08), rgba(18, 181, 203, .35) 70%);
  box-shadow: 0 0 16px rgba(18, 181, 203, .85), inset 0 0 12px rgba(255, 255, 255, .5); transition: opacity .3s, transform .45s cubic-bezier(.2, 1.8, .4, 1); pointer-events: none; z-index: 4; }
.piece.shielded .shield-dome { opacity: 1; transform: scale(1); animation: dome-wobble 2.4s ease-in-out infinite; }
@keyframes dome-wobble { 50% { transform: scale(1.04, .97); } }
.piece .ice-block { position: absolute; left: 8%; right: 8%; bottom: 0; height: 0; border-radius: 10px; opacity: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(160deg, rgba(255, 255, 255, .75) 0 12%, rgba(189, 231, 255, .55) 13% 45%, rgba(143, 211, 255, .6) 46%);
  border: 3px solid #1A73E8; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 0 14px rgba(143, 211, 255, .8); transition: height .45s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; }
.piece.frozen .ice-block { height: 58%; opacity: .9; }
.piece.frozen .piece-svg { filter: saturate(.5) brightness(1.08) drop-shadow(0 0 6px #8FD3FF); }
.piece .freeze-badge { position: absolute; left: 0; top: 8%; z-index: 5; min-width: 22px; height: 20px; padding: 0 4px; border-radius: 99px; background: #8FD3FF; border: 2.5px solid var(--ink);
  font: 700 11px/15px var(--font-head); color: var(--ink); text-align: center; display: none; }
.piece.frozen .freeze-badge { display: block; }
.piece.morphed .squash::after { content: attr(data-real); position: absolute; left: -4%; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--green);
  border: 2.5px solid var(--ink); font: 700 12px/17px var(--font-head); color: var(--ink); text-align: center; }

/* camada de efeitos (plana, por cima do tabuleiro 3D) */
.fx-layer, .arena-fx { position: absolute; inset: 0; pointer-events: none; z-index: 25; overflow: visible; }
.fx-abs { position: absolute; pointer-events: none; }
.burst { position: absolute; aspect-ratio: 1; display: grid; place-items: center; z-index: 25; }
.burst svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.burst b { position: relative; font-family: var(--font-head); font-weight: 700; font-size: clamp(16px, 3.2vmin, 32px); color: #fff; -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); transform: rotate(-8deg); white-space: nowrap; }
.pop-text { position: absolute; font-family: var(--font-head); font-weight: 700; font-size: clamp(14px, 2.6vmin, 26px); color: var(--gold);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); white-space: nowrap; z-index: 26; }
.particle { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); z-index: 24; }
.shard { position: absolute; width: 16px; height: 22px; background: linear-gradient(135deg, #E9FBFF, #8FE3F0); border: 2px solid var(--ink); clip-path: polygon(50% 0, 100% 60%, 30% 100%, 0 40%); z-index: 26; }
.ring-fx { position: absolute; border-radius: 50%; border: 4px solid var(--c, var(--gold)); z-index: 22; box-shadow: 0 0 14px var(--c, var(--gold)); }
.stamp { position: fixed; left: 50%; top: 50%; z-index: 90; padding: .1em .45em; border: 6px solid var(--red); border-radius: 14px; color: var(--red);
  font-family: var(--font-head); font-weight: 700; font-size: clamp(34px, 8vmin, 84px); background: rgba(255, 248, 231, .94); box-shadow: 0 6px 0 var(--ink);
  letter-spacing: .04em; white-space: nowrap; }
.bolt-fx { position: fixed; inset: 0; z-index: 89; pointer-events: none; }