/* Abluka board: tactile tiles, glossy identity pawns and stone barriers.
   Motion is transform/opacity only; body.reduced-motion and prefers-reduced-motion disable it. */
.abluka {
  --abluka-size: 480px;
  --abluka-p0: #1f6fd0;
  --abluka-p0-light: #6fb4ff;
  --abluka-p0-deep: #123f80;
  --abluka-p1: #e8590c;
  --abluka-p1-light: #ffa66b;
  --abluka-p1-deep: #a33c05;
  --abluka-frame: #0b1b33;
  --abluka-frame-light: #1d4f9f;
  --abluka-tile: #fbfcfe;
  --abluka-tile-alt: #edf3fa;
  --abluka-tile-hi: #ffffff;
  --abluka-tile-origin: #e1ecf8;
  --abluka-sealed: #fde4e4;
  --abluka-stone: #6c7a90;
  --abluka-stone-light: #b4c0d0;
  --abluka-stone-deep: #3f4b5e;
  --abluka-danger: #d23b3b;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  color: var(--navy, #0b1628);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.abluka[data-turn="1"] { --abluka-me: var(--abluka-p1); --abluka-me-light: var(--abluka-p1-light); }
.abluka[data-turn="0"] { --abluka-me: var(--abluka-p0); --abluka-me-light: var(--abluka-p0-light); }

/* ---------- Two-step phase indicator ---------- */
.abluka-phase { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 40px; font-weight: 800; font-size: 15px; }
.abluka-phase__who { padding: 7px 14px; color: #fff; background: linear-gradient(135deg, var(--abluka-me), var(--abluka-me-light)); border-radius: 999px; box-shadow: 0 6px 16px rgba(11, 27, 51, .18); transition: background .3s; }
.abluka-phase__step { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; color: var(--ink-soft, #3a4a5f); background: var(--surface-soft, #eef2f7); border: 2px solid transparent; border-radius: 999px; transition: transform .25s var(--ease-bounce, ease), color .2s, border-color .2s, background .2s; }
.abluka-phase__step b { display: grid; place-items: center; width: 22px; height: 22px; color: #fff; background: var(--line-strong, #bcc8d8); border-radius: 50%; font-size: 13px; }
.abluka-phase__step.is-active { color: var(--navy, #0b1628); background: var(--surface); border-color: var(--abluka-me); transform: scale(1.06); }
.abluka-phase__step.is-active b { background: var(--abluka-me); }
.abluka[data-phase="over"] .abluka-phase__who { background: var(--navy, #0b1628); }
.abluka[data-interactive="false"]:not([data-phase="over"]) .abluka-phase__step.is-active { border-style: dashed; }

/* ---------- Stage and board frame ---------- */
.abluka-stage { display: grid; place-items: center; min-height: 0; min-width: 0; contain: size; }
/* In the arena the header cards already name the player to move; keep only the two steps. */
.arena-play--board .abluka-phase__who { display: none; }
.abluka-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  width: var(--abluka-size);
  height: var(--abluka-size);
  padding: calc(var(--abluka-size) * .028);
  box-sizing: border-box;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(160deg, var(--abluka-frame-light), var(--abluka-frame) 70%);
  border-radius: calc(var(--abluka-size) * .05);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .12) inset, 0 -6px 0 rgba(0, 0, 0, .22) inset, 0 22px 50px rgba(11, 27, 51, .28), 0 4px 0 #06101f;
  touch-action: none;
}
.abluka-row { display: contents; }
.abluka-cell {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: default;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.abluka-cell__tile {
  position: absolute;
  inset: 5%;
  background: linear-gradient(180deg, var(--abluka-tile-hi), var(--abluka-tile) 60%);
  border-radius: 18%;
  box-shadow: 0 -3px 0 rgba(11, 27, 51, .12) inset, 0 2px 0 rgba(255, 255, 255, .9) inset, 0 2px 3px rgba(11, 27, 51, .35);
  transition: transform .18s var(--ease-out, ease), background .2s;
}
.abluka-cell:nth-child(odd) .abluka-cell__tile { background: linear-gradient(180deg, var(--abluka-tile-hi), var(--abluka-tile-alt) 70%); }
.abluka-cell:focus-visible { outline: none; }
.abluka-cell:focus-visible .abluka-cell__tile { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--abluka-me), 0 -3px 0 rgba(11, 27, 51, .12) inset; }
.abluka-cell.is-origin .abluka-cell__tile { background: linear-gradient(180deg, var(--abluka-tile-hi), var(--abluka-tile-origin)); }
.abluka-cell.is-origin .abluka-cell__tile::after { content: ""; position: absolute; inset: 38%; background: currentColor; border-radius: 50%; opacity: .08; }

/* Legal destinations glow in the mover's colour. */
.abluka-cell__target { position: absolute; inset: 29%; background: radial-gradient(circle, var(--abluka-me-light), var(--abluka-me)); border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s var(--ease-bounce, ease); pointer-events: none; }
.abluka-cell.is-target { cursor: pointer; }
.abluka-cell.is-target .abluka-cell__target { opacity: .75; transform: scale(1); animation: abluka-target 1.3s ease-in-out infinite; }
html:not([data-input="touch"]) .abluka-cell.is-target:hover .abluka-cell__tile, .abluka-cell.is-target:focus-visible .abluka-cell__tile { transform: translateY(-2px); background: var(--abluka-tile-hi); }
html:not([data-input="touch"]) .abluka-cell.is-target:hover .abluka-cell__target { opacity: .85; }
@keyframes abluka-target { 50% { transform: scale(.8); opacity: .5; } }
/* A tap on the pawn itself points at where it can go. */
.abluka.is-nudge .abluka-cell.is-target .abluka-cell__target { opacity: 1; animation: abluka-nudge .4s ease-in-out 2; }
@keyframes abluka-nudge { 50% { transform: scale(1.35); } }
.abluka.is-nudge .abluka-cell.is-target .abluka-cell__tile { background: var(--abluka-tile-hi); }
.abluka-pawn.is-dragging { z-index: 3; }
.abluka-pawn.is-dragging .abluka-pawn__body { transform: scale(1.12); }

/* Barrier preview under the pointer or keyboard cursor. */
.abluka-cell.is-blockable { cursor: pointer; }
.abluka-cell__ghost { position: absolute; inset: 11%; background: linear-gradient(160deg, var(--abluka-stone-light), var(--abluka-stone)); border: 2px dashed rgba(255, 255, 255, .9); border-radius: 16%; opacity: 0; transform: scale(.7); transition: opacity .15s, transform .2s var(--ease-bounce, ease); pointer-events: none; }
.abluka-cell.is-blockable.is-hover .abluka-cell__ghost, .abluka-cell.is-blockable:focus-visible .abluka-cell__ghost { opacity: .5; transform: scale(1); }
.abluka-cell.is-blockable:active .abluka-cell__ghost { opacity: .55; transform: scale(1); }
.abluka[data-phase="over"] .abluka-phase__step { display: none; }

/* ---------- Stone barriers ---------- */
.abluka-block { position: absolute; inset: 9%; z-index: 1; pointer-events: none; }
.abluka-block.is-pending { opacity: 0; }
.abluka-block__top {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 30% 22%, rgba(255, 255, 255, .55), transparent 70%),
    linear-gradient(160deg, var(--abluka-stone-light), var(--abluka-stone) 55%, var(--abluka-stone-deep));
  border-radius: 18%;
  box-shadow: 0 -5px 0 rgba(0, 0, 0, .25) inset, 0 2px 0 rgba(255, 255, 255, .5) inset, 0 5px 0 var(--abluka-stone-edge, #2c3748), 0 8px 10px rgba(11, 27, 51, .45);
}
.abluka-block__crack { position: absolute; top: 24%; left: 30%; width: 34%; height: 30%; border-top: 2px solid rgba(11, 27, 51, .35); border-left: 2px solid rgba(11, 27, 51, .25); border-radius: 30% 0 0 0; transform: rotate(-18deg); }
/* Barrier styles (device look): bricks, ice and a wooden crate beside the default stone. */
.abluka[data-blocks="tugla"], .abluka-swatches[data-blocks="tugla"] { --abluka-stone: #c24e30; --abluka-stone-light: #ec8a66; --abluka-stone-deep: #7e2a17; --abluka-stone-edge: #5a1e10; }
.abluka[data-blocks="buz"], .abluka-swatches[data-blocks="buz"] { --abluka-stone: #7fcbe8; --abluka-stone-light: #e6fbff; --abluka-stone-deep: #3f93bf; --abluka-stone-edge: #2c6f93; }
.abluka[data-blocks="tahta"], .abluka-swatches[data-blocks="tahta"] { --abluka-stone: #b3733a; --abluka-stone-light: #e2ad6c; --abluka-stone-deep: #74431a; --abluka-stone-edge: #4f2c10; }
[data-blocks="tugla"] .abluka-block__top {
  background:
    linear-gradient(180deg, transparent 31%, rgba(255, 228, 210, .7) 31% 36%, transparent 36% 64%, rgba(255, 228, 210, .7) 64% 69%, transparent 69%),
    linear-gradient(90deg, transparent 48%, rgba(255, 228, 210, .7) 48% 53%, transparent 53%) 0 0 / 100% 33% no-repeat,
    linear-gradient(90deg, transparent 22%, rgba(255, 228, 210, .7) 22% 27%, transparent 27% 73%, rgba(255, 228, 210, .7) 73% 78%, transparent 78%) 0 50% / 100% 33% no-repeat,
    linear-gradient(90deg, transparent 48%, rgba(255, 228, 210, .7) 48% 53%, transparent 53%) 0 100% / 100% 33% no-repeat,
    linear-gradient(160deg, var(--abluka-stone-light), var(--abluka-stone) 55%, var(--abluka-stone-deep));
  border-radius: 12%;
}
[data-blocks="buz"] .abluka-block__top {
  background:
    linear-gradient(125deg, transparent 20%, rgba(255, 255, 255, .85) 24%, transparent 30%, transparent 58%, rgba(255, 255, 255, .55) 61%, transparent 66%),
    radial-gradient(70% 50% at 30% 20%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(160deg, var(--abluka-stone-light), var(--abluka-stone) 60%, var(--abluka-stone-deep));
  border-radius: 22%;
  opacity: .94;
}
[data-blocks="tahta"] .abluka-block__top {
  background:
    linear-gradient(45deg, transparent 43%, rgba(79, 44, 16, .55) 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, rgba(79, 44, 16, .55) 43% 57%, transparent 57%),
    repeating-linear-gradient(0deg, transparent 0 30%, rgba(79, 44, 16, .35) 30% 33.3%),
    linear-gradient(160deg, var(--abluka-stone-light), var(--abluka-stone) 55%, var(--abluka-stone-deep));
  border-radius: 8%;
  outline: 3px solid rgba(79, 44, 16, .55);
  outline-offset: -5px;
}
[data-blocks="tugla"] .abluka-block__crack, [data-blocks="tahta"] .abluka-block__crack { display: none; }
[data-blocks="buz"] .abluka-block__crack { border-color: rgba(255, 255, 255, .8); }

/* The look's pawn colours also mark the match screen's score cards and name plates. */
#arenaDialog[data-abluka-look-p0] .side-0 { --side-identity-border: var(--abluka-look-p0); --side-identity-bg: color-mix(in srgb, var(--abluka-look-p0) 16%, var(--surface, #fff)); --side-identity-fg: color-mix(in srgb, var(--abluka-look-p0) 65%, var(--ink, #1c1a2e)); --side-identity-shadow: color-mix(in srgb, var(--abluka-look-p0) 30%, transparent); }
#arenaDialog[data-abluka-look-p1] .side-1 { --side-identity-border: var(--abluka-look-p1); --side-identity-bg: color-mix(in srgb, var(--abluka-look-p1) 16%, var(--surface, #fff)); --side-identity-fg: color-mix(in srgb, var(--abluka-look-p1) 65%, var(--ink, #1c1a2e)); --side-identity-shadow: color-mix(in srgb, var(--abluka-look-p1) 30%, transparent); }

/* Setup preview of the chosen look: two pawns and one barrier. */
.setup-look { display: grid; gap: 10px; margin: 14px 0 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 14px; }
.setup-look legend { padding: 0 6px; font-weight: 800; }
.abluka-swatches { display: flex; align-items: center; gap: 14px; }
.abluka-swatches__pawn, .abluka-swatches__block { position: relative; display: block; width: 46px; height: 46px; }
.abluka-swatches__pawn { border-radius: 50%; background: radial-gradient(80% 80% at 35% 30%, var(--light), var(--main) 60%, var(--deep)); box-shadow: 0 4px 0 var(--deep), 0 6px 10px rgba(11, 27, 51, .3); }
.abluka-swatches__pawn[data-seat="0"] { --main: var(--abluka-p0); --light: var(--abluka-p0-light); --deep: var(--abluka-p0-deep); }
.abluka-swatches__pawn[data-seat="1"] { --main: var(--abluka-p1); --light: var(--abluka-p1-light); --deep: var(--abluka-p1-deep); }
:where(.abluka-swatches__block) .abluka-block__top { position: absolute; inset: 0; background: linear-gradient(160deg, var(--abluka-stone-light), var(--abluka-stone) 55%, var(--abluka-stone-deep)); border-radius: 18%; box-shadow: 0 -4px 0 rgba(0, 0, 0, .25) inset, 0 4px 0 var(--abluka-stone-edge, #2c3748); }
.abluka-swatches .abluka-block__crack { position: absolute; top: 24%; left: 30%; width: 34%; height: 30%; border-top: 2px solid rgba(11, 27, 51, .35); border-left: 2px solid rgba(11, 27, 51, .25); border-radius: 30% 0 0 0; transform: rotate(-18deg); }
.abluka-swatches { --abluka-stone: #6c7a90; --abluka-stone-light: #b4c0d0; --abluka-stone-deep: #3f4b5e; }

.abluka-cell.is-last .abluka-block__top { box-shadow: 0 -5px 0 rgba(0, 0, 0, .25) inset, 0 2px 0 rgba(255, 255, 255, .5) inset, 0 5px 0 var(--abluka-stone-edge, #2c3748), 0 0 0 3px rgba(255, 207, 92, .85), 0 8px 14px rgba(11, 27, 51, .45); }
.abluka-cell.is-sealed .abluka-cell__tile { background: var(--abluka-sealed); box-shadow: 0 0 0 3px var(--abluka-danger) inset; }
.abluka-cell.is-sealed .abluka-block__top { box-shadow: 0 -5px 0 rgba(0, 0, 0, .25) inset, 0 5px 0 var(--abluka-stone-edge, #2c3748), 0 0 0 3px var(--abluka-danger); }

/* ---------- Pawns ---------- */
.abluka-layer { position: absolute; inset: calc(var(--abluka-size) * .028); z-index: 2; pointer-events: none; }
.abluka-pawn {
  --r: 0;
  --c: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / 7);
  height: calc(100% / 7);
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
  pointer-events: none;
}
.abluka-pawn__shadow { position: absolute; left: 20%; right: 20%; bottom: 10%; height: 18%; background: radial-gradient(closest-side, rgba(11, 27, 51, .45), transparent); border-radius: 50%; }
.abluka-pawn__body { position: absolute; inset: 13% 15% 17%; display: block; }
.abluka-pawn__rim { position: absolute; inset: 0; border-radius: 50%; background: var(--rim); box-shadow: 0 5px 0 var(--deep), 0 8px 14px rgba(11, 27, 51, .45); }
.abluka-pawn__face { position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(80% 80% at 35% 30%, var(--light), var(--main) 60%, var(--deep)); box-shadow: 0 -3px 6px rgba(0, 0, 0, .25) inset, 0 2px 3px rgba(255, 255, 255, .4) inset; }
.abluka-pawn__emblem { position: absolute; inset: 28%; width: 44%; height: 44%; fill: rgba(255, 255, 255, .85); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); }
.abluka-pawn__gloss { position: absolute; top: 12%; left: 22%; width: 42%; height: 26%; background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); border-radius: 50%; transform: rotate(-18deg); }
.abluka-pawn__ring { position: absolute; inset: 4%; border: 3px solid var(--main); border-radius: 50%; opacity: 0; transform: scale(.8); }
.abluka-pawn[data-seat="0"] { --main: var(--abluka-p0); --light: var(--abluka-p0-light); --deep: var(--abluka-p0-deep); --rim: linear-gradient(160deg, var(--abluka-p0-rim, #cfc6ff), var(--abluka-p0-deep)); }
.abluka-pawn[data-seat="1"] { --main: var(--abluka-p1); --light: var(--abluka-p1-light); --deep: var(--abluka-p1-deep); --rim: linear-gradient(160deg, var(--abluka-p1-rim, #ffe0c4), var(--abluka-p1-deep)); }
.abluka-pawn.is-turn .abluka-pawn__ring { opacity: .75; transform: scale(1.08); animation: abluka-halo 1.6s ease-in-out infinite; }
.abluka-pawn.is-selected .abluka-pawn__body { transform: translateY(-8%); transition: transform .2s var(--ease-bounce, ease); }
.abluka-pawn.is-danger .abluka-pawn__ring { border-color: var(--abluka-danger); opacity: .95; animation: abluka-danger .7s ease-in-out infinite; }
.abluka-pawn.is-trapped .abluka-pawn__face { filter: grayscale(.75) brightness(.8); }
.abluka-pawn.is-trapped .abluka-pawn__body { animation: abluka-shake .45s ease-in-out 2; }
.abluka-pawn.is-winner .abluka-pawn__body { animation: abluka-victory .9s var(--ease-bounce, ease) 3; }
.abluka-pawn.is-winner .abluka-pawn__ring { border-color: var(--gold, #f0aa0e); opacity: 1; transform: scale(1.15); animation: abluka-halo 1.2s ease-in-out infinite; }
@keyframes abluka-halo { 50% { transform: scale(1.2); opacity: .35; } }
@keyframes abluka-danger { 50% { transform: scale(1.18); opacity: .4; } }
@keyframes abluka-shake { 25% { transform: translateX(-7%) rotate(-5deg); } 75% { transform: translateX(7%) rotate(5deg); } }
@keyframes abluka-victory { 40% { transform: translateY(-24%) scale(1.08); } 70% { transform: translateY(0) scale(1.06, .94); } }

/* ---------- Effects ---------- */
.abluka-dust { position: absolute; width: 5.5%; aspect-ratio: 1; background: radial-gradient(circle at 40% 35%, #fff, #d6dfeb 60%, rgba(214, 223, 235, 0)); border-radius: 50%; pointer-events: none; }
.abluka-trap { --r: 0; --c: 0; position: absolute; top: 0; left: 0; z-index: 3; width: calc(100% / 7); height: calc(100% / 7); transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)) scale(1.9); pointer-events: none; }
.abluka-trap svg { width: 100%; height: 100%; overflow: visible; }
.abluka-trap__track { fill: none; stroke: rgba(216, 57, 79, .18); stroke-width: 7; }
.abluka-trap__close { fill: none; stroke: var(--abluka-danger); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 50% 50%; animation: abluka-close .6s cubic-bezier(.5, 0, .3, 1) forwards, abluka-pulse 1.1s .6s ease-in-out infinite; }
.abluka-trap__links rect { fill: var(--abluka-danger); stroke: #fff; stroke-width: 2; opacity: 0; animation: abluka-link .3s ease-out forwards; }
@keyframes abluka-close { to { stroke-dashoffset: 0; } }
@keyframes abluka-pulse { 50% { stroke-width: 11; opacity: .7; } }
@keyframes abluka-link { from { opacity: 0; } to { opacity: 1; } }
.abluka-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  padding: .12em .5em;
  color: #fff;
  background: linear-gradient(135deg, #e0455b, #b92639);
  border: 4px solid #fff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(120, 18, 35, .45), 0 0 0 4px #b92639;
  font-size: calc(var(--abluka-size) * .1);
  font-weight: 950;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-7deg);
  pointer-events: none;
}
.abluka-stamp[data-reason="self-trap"] { font-size: calc(var(--abluka-size) * .07); background: linear-gradient(135deg, #5b6a82, #34425a); box-shadow: 0 12px 30px rgba(20, 16, 40, .45), 0 0 0 4px #3f3a58; }
.abluka-stamp.is-shown { opacity: 1; }
.abluka-live { min-height: 1.3em; margin: 0; line-height: 1.3; color: var(--ink-soft, #3a4a5f); font-size: 14px; font-weight: 650; text-align: center; }

/* ---------- Reduced motion and high contrast ---------- */
body.reduced-motion .abluka *, body.reduced-motion .abluka *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .abluka *, .abluka *::before { animation: none !important; transition: none !important; } }
body.reduced-motion .abluka-trap__close { stroke-dashoffset: 0; }
body.reduced-motion .abluka-trap__links rect { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .abluka-trap__close { stroke-dashoffset: 0; } .abluka-trap__links rect { opacity: .9; } }
body.high-contrast .abluka { --abluka-frame: #000; --abluka-frame-light: #000; --abluka-tile: #fff; --abluka-tile-alt: #fff; --abluka-stone: #000; --abluka-stone-light: #444; --abluka-stone-deep: #000; }
body.high-contrast .abluka-cell__tile { box-shadow: 0 0 0 2px #000 inset; }
body.high-contrast .abluka-block__top { background: repeating-linear-gradient(45deg, #000 0 5px, #555 5px 9px); box-shadow: 0 0 0 3px #000; }
body.high-contrast .abluka-pawn[data-seat="0"] { --main: #000; --light: #333; --deep: #000; --rim: var(--player-a); }
body.high-contrast .abluka-pawn[data-seat="1"] { --main: #fff; --light: #fff; --deep: #000; --rim: var(--player-b); }
/* The turn halo takes the seat's rim colour (a white seat-1 halo would vanish on the white tiles). */
body.high-contrast .abluka-pawn:not(.is-danger):not(.is-winner) .abluka-pawn__ring { border-color: var(--rim); }
body.high-contrast .abluka-pawn[data-seat="1"] .abluka-pawn__emblem { fill: #000; }
body.high-contrast .abluka-cell.is-target .abluka-cell__target { background: #000; opacity: 1; animation: none; }
@media (forced-colors: active) {
  .abluka-cell__tile { border: 1px solid CanvasText; }
  .abluka-block__top { background: CanvasText; }
  .abluka-cell.is-target .abluka-cell__target { background: Highlight; opacity: 1; }
}

/* ---------- Compact screens ---------- */
@media (max-width: 520px) {
  .abluka { gap: 6px; }
  .abluka-phase { gap: 5px; min-height: 34px; font-size: 13px; }
  .abluka-phase__who, .abluka-phase__step { padding: 5px 10px; }
  .abluka-live { font-size: 12px; }
}
@media (max-width: 520px) {
  /* Phones: the move sentence stays for screen readers only; the corner referee needs the space. */
  .arena-play--board .abluka-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Dark theme: the board becomes a lit night slate; pawns and stones keep their identity. */
html[data-theme="dark"] .abluka {
  --abluka-frame: #050c18;
  --abluka-frame-light: #1a3558;
  --abluka-tile: #1c2d45;
  --abluka-tile-alt: #182840;
  --abluka-tile-hi: #26395a;
  --abluka-tile-origin: #2a4368;
  --abluka-sealed: #48202a;
  --abluka-stone-light: #9fb0c6;
}