/* ---------- Board games (Mangala, Abluka): arena layout, player cards and the Mangala board ----------
   Loads after mobile.css. Motion uses transform/opacity/box-shadow only and stops under reduced motion. */

#arenaBody:has(> .board-arena) { display:flex; flex-direction:column; overflow:hidden; padding:14px 18px; }
.board-arena { position:relative; display:flex; flex:1; flex-direction:column; gap:12px; min-height:0; }
.arena-play.arena-play--board { display:flex; flex:1; flex-direction:column; min-height:0; padding:0; overflow:hidden; background:transparent; border:0; }

/* Player cards: identity colour, live score, chess clock, whose turn. */
.board-arena .side-0 { --side-identity-bg:var(--violet-soft); --side-identity-fg:var(--primary-dark); --side-identity-border:var(--primary); --side-identity-shadow:rgba(29, 79, 159,.28); }
.board-arena .side-1 { --side-identity-bg:var(--apricot-soft); --side-identity-fg:var(--player-b-ink); --side-identity-border:var(--coral); --side-identity-shadow:rgba(218,101,78,.28); }
.board-header { display:grid; grid-template-columns:minmax(0,340px) auto minmax(0,340px); justify-content:center; align-items:center; gap:18px; }
.board-players { display:contents; }
.board-player { display:grid; color:var(--side-identity-fg); background:var(--side-identity-bg); grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name clock" "score state"; align-items:center; gap:2px 12px; min-width:0; padding:10px 16px; border:2px solid var(--side-identity-border); border-radius:18px; box-shadow:0 2px 0 var(--side-identity-shadow); transition:box-shadow .25s ease, transform .25s ease; }
.board-player[data-board-player="1"] { order:3; }
.board-header .referee-region { order:2; }
.board-player__name { grid-area:name; display:flex; align-items:baseline; gap:8px; min-width:0; overflow:hidden; font-size:19px; font-weight:800; white-space:nowrap; text-overflow:ellipsis; }
.board-player__name small { flex:none; padding:2px 8px; font-size:12px; font-weight:750; color:var(--side-identity-fg); background:var(--glass); border-radius:999px; }
.board-player__score { grid-area:score; font-size:15px; font-weight:700; }
.board-player__score b { display:inline-block; font-size:30px; font-variant-numeric:tabular-nums; line-height:1; }
.board-player__score b.is-bump { animation:board-bump .45s cubic-bezier(.3,1.6,.5,1); }
.board-player__clock { grid-area:clock; justify-self:end; min-width:70px; padding:4px 10px; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; text-align:center; color:var(--navy); background:var(--glass); border-radius:12px; }
.board-player__clock.is-untimed { font-size:18px; opacity:.6; }
.board-player__clock.is-urgent { color:#fff; background:#d64532; animation:board-urgent 1s ease-in-out infinite; }
.board-player__state { grid-area:state; justify-self:end; min-height:1.3em; font-size:13px; font-weight:800; }
.board-player.is-turn { box-shadow:0 0 0 4px var(--side-identity-border), 0 10px 28px var(--side-identity-shadow); transform:translateY(-2px); }
.board-player.is-turn .board-player__state::before { content:"● "; animation:board-blink 1.2s ease-in-out infinite; }
.board-player.is-thinking .board-player__state::after { content:""; display:inline-block; width:1.4em; text-align:left; animation:board-dots 1.2s steps(4) infinite; }
.board-header .referee-region { width:150px; }
/* The header's height sets the board's, so the message keeps a fixed two-line box (one-line and two-line
   messages and an empty one take the same space; a longer one overflows instead of resizing the board).
   The panda is sized so art, gap and box keep the header at its one-line height. */
.board-header .referee-art { width:96px; margin:0 auto; }
.board-header .referee-message { height:2.5em; min-height:0; font-size:13px; line-height:1.25; text-align:center; }
/* Paused, the pause panel already resizes the board, so the longer pause message takes the room it needs. */
#arenaDialog[data-referee-phase="paused"] .board-header .referee-message { height:auto; }
/* The board stays visible during the count, so the referee keeps its header seat: a smaller disc that clears
   the player cards, and BAŞLA! below the feet (over the redundant message) rather than above the header. */
.board-header .mw-mascot__sign:not(.is-word) { width:50cqw; height:50cqw; }
.board-header .mw-mascot__sign:not(.is-word) .mw-mascot__sign-text { font-size:34cqw; }
.board-header .mw-mascot__sign.is-word { top:88%; bottom:auto; transform-origin:50% 0; }
/* Who starts is announced until BAŞLA; the starter's card carries an "İlk hamle" chip. */
.board-first { align-self:center; display:flex; align-items:center; gap:8px; margin:0; padding:6px 18px; font-size:17px; font-weight:750; color:var(--side-identity-fg); background:var(--side-identity-bg); border:2px solid var(--side-identity-border); border-radius:999px; box-shadow:0 6px 18px var(--side-identity-shadow); animation:board-first .5s cubic-bezier(.3,1.5,.5,1) both; }
.board-first strong { font-weight:900; }
#arenaDialog[data-referee-phase="playing"] .board-first, #arenaDialog.is-finished .board-first { display:none; }
/* Once the game has begun no card is marked İlk hamle, and a pause does not bring the announcement back. */
.board-arena:not(:has(.board-player.is-first)) > .board-first { display:none; }
.board-player.is-first { box-shadow:0 0 0 4px var(--side-identity-border), 0 10px 28px var(--side-identity-shadow); }
.board-player.is-first .board-player__state::before { content:"▶ "; }
@keyframes board-first { from { opacity:0; transform:translateY(-8px) scale(.9); } }
/* Üç set (Pentago): a quiet set chip above the board, and between sets a strip with the score and the next set. */
.board-set { align-self:center; margin:0; padding:2px 14px; font-size:14px; font-weight:750; color:var(--ink-2); background:var(--surface-2); border-radius:999px; font-variant-numeric:tabular-nums; }
.board-set strong { font-weight:900; color:var(--navy); }
.board-set-break { align-self:center; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px; margin:0; padding:10px 18px; background:var(--glass-strong); border:2px solid var(--line); border-radius:20px; box-shadow:0 10px 26px rgba(15,23,42,.14); animation:board-first .5s cubic-bezier(.3,1.5,.5,1) both; }
.board-set-break p { margin:0; }
.board-set-break__title { font-size:17px; font-weight:750; }
.board-set-score { display:flex; align-items:baseline; gap:8px; font-variant-numeric:tabular-nums; }
.board-set-score small { font-size:13px; font-weight:800; color:var(--ink-2); }
.board-set-score strong { font-size:26px; font-weight:900; color:var(--navy); }
/* Berabere teklif et (Satranç): the offer card over the board while both clocks wait, and the computer's short answer. */
.board-draw-offer { position:absolute; top:50%; left:50%; z-index:10; display:grid; gap:10px; width:min(400px, calc(100% - 32px)); padding:20px 22px; text-align:center; background:var(--glass-strong); border:2px solid var(--line-strong); border-radius:22px; box-shadow:var(--shadow-lg); transform:translate(-50%,-50%); animation:board-first .4s cubic-bezier(.3,1.5,.5,1) both; }
.board-draw-offer p { margin:0; font-size:16px; color:var(--ink-2); }
.board-draw-offer .board-draw-offer__title { font-size:20px; font-weight:750; color:var(--ink); }
.board-draw-offer__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:4px; }
.board-note { position:absolute; top:50%; left:50%; z-index:10; max-width:calc(100% - 32px); margin:0; padding:12px 20px; font-size:17px; font-weight:750; color:var(--ink); text-align:center; background:var(--glass-strong); border:2px solid var(--line-strong); border-radius:16px; box-shadow:var(--shadow-lg); transform:translate(-50%,-50%); pointer-events:none; animation:board-note 3.5s ease both; }
@keyframes board-note { 0% { opacity:0; } 8%, 85% { opacity:1; } 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .board-draw-offer, .board-note { animation:none; } }
.arena-result__sets { display:grid; justify-items:center; gap:4px; }
.arena-result__sets ol { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin:0; padding:0; list-style:none; font-size:14px; font-weight:700; color:var(--ink-2); }
/* A footer label with a short form (hub.js footerLabel) shows it only on a phone. */
.board-label__short { display:none; }
.board-hint-toggle { display:inline-flex; align-items:center; gap:8px; font-weight:700; }
.board-hint-toggle input { width:20px; height:20px; }

/* Before BAŞLA the opening position stays visible but dimmed and inert (the element is also `inert`). */
.board-arena .arena-play--board.referee-concealed { visibility:visible !important; opacity:.55; filter:saturate(.75); transition:opacity .3s ease; }

/* ---------- Mangala ---------- */
.mangala { --p0:#5b4fd6; --p0-soft:rgba(29, 79, 159,.3); --p1:#e8674f; --p1-soft:rgba(232,103,79,.3);
  display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:0; container-type:size; }
.mangala__board { --stone:clamp(9px, 2.05cqw, 34px); position:relative; display:grid; grid-template-columns:1.3fr repeat(6,1fr) 1.3fr; grid-template-rows:1fr 1fr; gap:1.1cqw;
  width:min(100cqw, (100cqh - 34px) * 2.55); aspect-ratio:2.55 / 1; padding:2.2cqw 2.4cqw; box-sizing:border-box; isolation:isolate;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,226,170,.38), transparent 60%),
    linear-gradient(180deg, #c98a4f 0%, #a8662f 48%, #8b4f22 100%);
  border-radius:clamp(18px, 3.2cqw, 44px);
  box-shadow: inset 0 3px 0 rgba(255,236,200,.55), inset 0 -6px 12px rgba(60,26,6,.45), inset 0 0 0 3px rgba(94,49,18,.55), 0 18px 40px rgba(60,30,10,.35), 0 3px 0 #6d3c17; }
.mangala__grain { position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:.55;
  background:
    repeating-linear-gradient(94deg, rgba(90,44,14,.0) 0 18px, rgba(90,44,14,.16) 18px 20px, rgba(90,44,14,0) 20px 44px),
    repeating-linear-gradient(88deg, rgba(255,230,190,.07) 0 7px, rgba(255,230,190,0) 7px 23px),
    radial-gradient(40% 18% at 30% 60%, rgba(80,38,10,.22), transparent 70%),
    radial-gradient(30% 14% at 74% 30%, rgba(80,38,10,.18), transparent 70%); }
.mangala__row { display:grid; grid-template-columns:repeat(6,1fr); gap:inherit; min-height:0; padding:.5cqw; border-radius:clamp(12px, 2cqw, 30px); transition:box-shadow .35s ease, background-color .35s ease; }
.mangala__row--p1 { grid-column:2 / 8; grid-row:1; background:linear-gradient(0deg, transparent, var(--p1-soft)); }
.mangala__row--p0 { grid-column:2 / 8; grid-row:2; background:linear-gradient(180deg, transparent, var(--p0-soft)); }
.mangala__store--p1 { grid-column:1; grid-row:1 / 3; }
.mangala__store--p0 { grid-column:8; grid-row:1 / 3; }
.mangala[data-turn="p0"] .mangala__row--p0 { box-shadow:0 0 0 3px var(--p0), 0 0 24px 4px rgba(120,110,255,.55); animation:board-turn 2.2s ease-in-out infinite; }
.mangala[data-turn="p1"] .mangala__row--p1 { box-shadow:0 0 0 3px var(--p1), 0 0 24px 4px rgba(255,140,110,.55); animation:board-turn 2.2s ease-in-out infinite; }

.mangala__pit, .mangala__store { position:relative; display:grid; place-items:center; min-width:0; min-height:0; padding:0; color:#fff6e8; background:none; border:0; border-radius:50%; font:inherit; }
.mangala__pit { cursor:default; touch-action:none; -webkit-tap-highlight-color:transparent; }
.mangala__pit:disabled { opacity:1; }
.mangala__cup { position:absolute; inset:6% 4%; border-radius:48%;
  background: radial-gradient(70% 70% at 50% 40%, #5a2f12 0%, #6f3b17 55%, #8c4f22 100%);
  box-shadow: inset 0 .9cqw 1.4cqw rgba(35,14,2,.75), inset 0 -2px 3px rgba(255,214,160,.35), 0 1px 0 rgba(255,225,180,.5); transition:transform .18s ease, box-shadow .2s ease, filter .2s ease; }
.mangala__store .mangala__cup { inset:3% 6%; border-radius:44% / 22%; }
.mangala__stones { position:absolute; inset:10%; }
.mangala__cup[data-more]:not([data-more=""])::after { content:attr(data-more); position:absolute; right:10%; bottom:6%; font-size:11px; font-weight:800; color:#fff; }
.mangala__count { position:absolute; top:-4%; right:-2%; z-index:2; min-width:1.9em; text-align:center; padding:1px 6px; font-size:clamp(12px, 1.55cqw, 21px); font-weight:850; font-variant-numeric:tabular-nums; line-height:1.35; color:#3a1c06; background:#fff4de; border:2px solid rgba(94,49,18,.35); border-radius:999px; box-shadow:0 2px 4px rgba(40,16,2,.35); }
.mangala__store .mangala__count { top:auto; right:auto; bottom:5%; left:50%; min-width:2.2em; text-align:center; font-size:clamp(15px, 2.1cqw, 30px); transform:translateX(-50%); }
.mangala__pit.is-empty .mangala__count { opacity:.62; }
.mangala__num { position:absolute; bottom:-5%; left:50%; transform:translateX(-50%); font-size:clamp(10px, 1.05cqw, 14px); font-weight:800; color:rgba(255,240,215,.8); }
.mangala__store-name { position:absolute; top:3%; left:50%; max-width:96%; overflow:hidden; font-size:clamp(10px, 1.1cqw, 15px); font-weight:800; color:#fff3dc; white-space:nowrap; text-overflow:ellipsis; transform:translateX(-50%); text-shadow:0 1px 2px rgba(40,16,2,.6); }
.mangala__store--p0 .mangala__cup { box-shadow: inset 0 .9cqw 1.4cqw rgba(35,14,2,.75), inset 0 0 0 3px rgba(120,110,255,.45), 0 1px 0 rgba(255,225,180,.5); }
.mangala__store--p1 .mangala__cup { box-shadow: inset 0 .9cqw 1.4cqw rgba(35,14,2,.75), inset 0 0 0 3px rgba(255,140,110,.45), 0 1px 0 rgba(255,225,180,.5); }

.mangala__pit.is-playable { cursor:pointer; }
.mangala__pit.is-playable .mangala__cup { box-shadow: inset 0 .9cqw 1.4cqw rgba(35,14,2,.7), 0 0 0 3px rgba(255,248,230,.75), 0 0 18px 2px rgba(255,236,190,.55); }
html:not([data-input="touch"]) .mangala__pit.is-playable:hover .mangala__cup, .mangala__pit.is-playable:focus-visible .mangala__cup { transform:translateY(-3px) scale(1.04); filter:brightness(1.12); }
.mangala__pit.is-playable:active .mangala__cup { transform:scale(.96); }
.mangala__pit:focus-visible { outline:4px solid #fff; outline-offset:2px; }

/* Glass stones: each keeps its colour through the game. */
.stone { position:absolute; left:var(--x); top:var(--y); width:var(--stone); height:var(--stone); margin:calc(var(--stone) / -2) 0 0 calc(var(--stone) / -2); border-radius:52% 46% 50% 48%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,0) 26%), radial-gradient(circle at 62% 72%, var(--c1) 0%, var(--c2) 78%);
  box-shadow: inset -2px -3px 4px rgba(0,0,0,.28), inset 2px 2px 3px rgba(255,255,255,.35), 0 2px 3px rgba(30,10,0,.45); transform:rotate(var(--r, 0deg)); }
.stone--c0 { --c1:#8fd3ff; --c2:#1c6fd6; } .stone--c1 { --c1:#9ff2de; --c2:#0f9a7e; } .stone--c2 { --c1:#ffe38a; --c2:#e39a06; }
.stone--c3 { --c1:#ffb2c6; --c2:#d6335e; } .stone--c4 { --c1:#c7f59a; --c2:#4aa31d; } .stone--c5 { --c1:#d9c6ff; --c2:#7446e0; }
.mangala__fly { position:absolute; inset:0; z-index:5; pointer-events:none; }
.stone--flying { left:0; top:0; margin:0; z-index:6; filter:drop-shadow(0 8px 6px rgba(40,16,2,.35)); will-change:transform; }

/* Moment-to-moment feedback. */
.mangala__pit.is-lifted .mangala__cup { animation:mangala-lift .35s ease; }
.mangala__pit.is-hit .mangala__count, .mangala__store.is-hit .mangala__count { animation:board-bump .32s cubic-bezier(.3,1.6,.5,1); }
.mangala__pit.is-last .mangala__cup, .mangala__store.is-last .mangala__cup { animation:mangala-last .7s ease-out; }
.mangala__pit.is-captured .mangala__cup { animation:mangala-captured .55s ease-out; }
.mangala__store.is-gain .mangala__cup { animation:mangala-gain 1s ease-out; }
.mangala__burst { position:absolute; width:0; height:0; z-index:7; pointer-events:none; }
.mangala__burst b { position:absolute; left:0; top:0; font-size:clamp(18px, 3cqw, 40px); font-weight:900; color:#fff; white-space:nowrap; text-shadow:0 2px 0 rgba(60,20,0,.5), 0 0 16px var(--side-identity-border); transform:translate(-50%,-50%); animation:mangala-float 1s ease-out forwards; }
.mangala__burst i { position:absolute; left:-5px; top:-5px; width:10px; height:10px; background:#ffe38a; border-radius:50%; box-shadow:0 0 8px #fff3b0; transform:rotate(var(--a)) translateX(0); animation:mangala-spark .8s ease-out forwards; }
.mangala__banner { position:absolute; left:var(--banner-x, 50%); top:var(--banner-y, 50%); z-index:8; max-width:var(--banner-w, 80%); box-sizing:border-box; padding:10px 22px; font-size:clamp(18px, 3cqw, 38px); font-weight:900; color:var(--side-identity-fg, #fff); text-align:center; white-space:nowrap; background:var(--side-identity-bg, #fff); border:3px solid var(--side-identity-border, #fff); border-radius:999px; box-shadow:0 12px 30px rgba(40,16,2,.4); opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.6); transition:opacity .2s ease, transform .35s cubic-bezier(.3,1.6,.5,1); }
.mangala__banner.is-on { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* Learning preview: the path lights up in order and the landing pit says what happens. */
.mangala__pit.is-path .mangala__cup, .mangala__store.is-path .mangala__cup { box-shadow: inset 0 .9cqw 1.4cqw rgba(35,14,2,.7), 0 0 0 2px rgba(255,255,255,.55); animation:mangala-path .4s ease both; animation-delay:calc(var(--step, 0) * 45ms); }
.mangala__pit.is-landing .mangala__cup, .mangala__store.is-landing .mangala__cup { box-shadow: inset 0 .9cqw 1.4cqw rgba(35,14,2,.7), 0 0 0 4px #fff, 0 0 22px 6px rgba(255,240,170,.9); }
.mangala__tip { position:absolute; top:-22%; left:50%; z-index:3; transform:translateX(-50%); padding:0 8px; font-size:clamp(11px, 1.3cqw, 16px); font-weight:900; color:#3a1c06; white-space:nowrap; background:#ffe38a; border-radius:999px; }
.mangala__tip:empty { display:none; }
.mangala__legend { display:flex; align-items:center; gap:8px; margin:0; font-size:14px; font-weight:650; color:var(--ink-2); text-align:center; }
.mangala__arrow { font-size:20px; color:var(--primary); }
.mangala.is-over .mangala__row { filter:saturate(.7); }

/* Portrait: the board stands up; the path still runs counter-clockwise (right column up, left column down). */
.mangala[data-orientation="portrait"] .mangala__board { --stone:clamp(10px, 4.6cqw, 22px); grid-template-columns:1fr 1fr; grid-template-rows:1.25fr repeat(6,1fr) 1.25fr; gap:1.1cqh;
  width:min(100cqw, (100cqh - 8px) / 1.95); aspect-ratio:1 / 1.95; padding:2cqh 2.4cqh; }
.mangala[data-orientation="portrait"] .mangala__row { grid-template-columns:1fr; grid-template-rows:repeat(6,1fr); padding:.6cqh; }
.mangala[data-orientation="portrait"] .mangala__row--p1 { grid-column:1; grid-row:2 / 8; background:linear-gradient(270deg, transparent, var(--p1-soft)); }
.mangala[data-orientation="portrait"] .mangala__row--p0 { grid-column:2; grid-row:2 / 8; background:linear-gradient(90deg, transparent, var(--p0-soft)); }
.mangala[data-orientation="portrait"] .mangala__store--p0 { grid-column:1 / 3; grid-row:1; }
.mangala[data-orientation="portrait"] .mangala__store--p1 { grid-column:1 / 3; grid-row:8; }
.mangala[data-orientation="portrait"] .mangala__store .mangala__cup { inset:6% 4%; border-radius:22% / 44%; }
.mangala[data-orientation="portrait"] .mangala__count { font-size:clamp(12px, 1.5cqh, 20px); }
.mangala[data-orientation="portrait"] .mangala__store .mangala__count { font-size:clamp(15px, 2cqh, 28px); }
.mangala[data-orientation="portrait"] .mangala__legend { display:none; }
/* A portrait row is one narrow column, so the banner wraps to fit on it instead of spilling over the other player's pits. */
.mangala[data-orientation="portrait"] .mangala__banner { padding:6px 10px; font-size:clamp(15px, 4cqw, 24px); line-height:1.1; white-space:normal; border-radius:20px; }
.mangala[data-orientation="portrait"] .mangala__pit--p1[data-k="0"] { grid-row:1; } .mangala[data-orientation="portrait"] .mangala__pit--p1[data-k="1"] { grid-row:2; }
.mangala[data-orientation="portrait"] .mangala__pit--p1[data-k="2"] { grid-row:3; } .mangala[data-orientation="portrait"] .mangala__pit--p1[data-k="3"] { grid-row:4; }
.mangala[data-orientation="portrait"] .mangala__pit--p1[data-k="4"] { grid-row:5; } .mangala[data-orientation="portrait"] .mangala__pit--p1[data-k="5"] { grid-row:6; }
.mangala[data-orientation="portrait"] .mangala__pit--p0[data-k="0"] { grid-row:6; } .mangala[data-orientation="portrait"] .mangala__pit--p0[data-k="1"] { grid-row:5; }
.mangala[data-orientation="portrait"] .mangala__pit--p0[data-k="2"] { grid-row:4; } .mangala[data-orientation="portrait"] .mangala__pit--p0[data-k="3"] { grid-row:3; }
.mangala[data-orientation="portrait"] .mangala__pit--p0[data-k="4"] { grid-row:2; } .mangala[data-orientation="portrait"] .mangala__pit--p0[data-k="5"] { grid-row:1; }
.mangala[data-orientation="portrait"] .mangala__pit, .mangala[data-orientation="portrait"] .mangala__row > * { grid-column:1; }

/* Seat 1's perspective (online): rows and hazines swap and each row reads from its owner's left, so the
   counter-clockwise path still runs along the near row to the near player's hazine on the right. */
.mangala[data-perspective="1"] .mangala__row { direction:rtl; }
.mangala[data-perspective="1"] .mangala__row > * { direction:ltr; }
.mangala[data-perspective="1"] .mangala__row--p1 { grid-row:2; background:linear-gradient(180deg, transparent, var(--p1-soft)); }
.mangala[data-perspective="1"] .mangala__row--p0 { grid-row:1; background:linear-gradient(0deg, transparent, var(--p0-soft)); }
.mangala[data-perspective="1"] .mangala__store--p1 { grid-column:8; }
.mangala[data-perspective="1"] .mangala__store--p0 { grid-column:1; }
.mangala[data-orientation="portrait"][data-perspective="1"] .mangala__row { direction:ltr; }
.mangala[data-orientation="portrait"][data-perspective="1"] .mangala__row--p1 { grid-column:2; grid-row:2 / 8; }
.mangala[data-orientation="portrait"][data-perspective="1"] .mangala__row--p0 { grid-column:1; grid-row:2 / 8; }
.mangala[data-orientation="portrait"][data-perspective="1"] .mangala__store--p1 { grid-column:1 / 3; grid-row:1; }
.mangala[data-orientation="portrait"][data-perspective="1"] .mangala__store--p0 { grid-column:1 / 3; grid-row:8; }
.mangala[data-orientation="portrait"][data-perspective="1"] .mangala__pit--p1[data-k="0"] { grid-row:6; } .mangala[data-orientation="portrait"][data-perspective="1"] .mangala__pit--p1[data-k="1"] { grid-row:5; }
.mangala[data-orientation="portrait"][data-perspective="1"] .mangala__pit--p1[data-k="2"] { grid-row:4; } .mangala[data-orientation="portrait"][data-perspective="1"] .mangala__pit--p1[data-k="3"] { grid-row:3; }
.mangala[data-orientation="portrait"][data-perspective="1"] .mangala__pit--p1[data-k="4"] { grid-row:2; } .mangala[data-orientation="portrait"][data-perspective="1"] .mangala__pit--p1[data-k="5"] { grid-row:1; }
.mangala[data-orientation="portrait"][data-perspective="1"] .mangala__pit--p0[data-k="0"] { grid-row:1; } .mangala[data-orientation="portrait"][data-perspective="1"] .mangala__pit--p0[data-k="1"] { grid-row:2; }
.mangala[data-orientation="portrait"][data-perspective="1"] .mangala__pit--p0[data-k="2"] { grid-row:3; } .mangala[data-orientation="portrait"][data-perspective="1"] .mangala__pit--p0[data-k="3"] { grid-row:4; }
.mangala[data-orientation="portrait"][data-perspective="1"] .mangala__pit--p0[data-k="4"] { grid-row:5; } .mangala[data-orientation="portrait"][data-perspective="1"] .mangala__pit--p0[data-k="5"] { grid-row:6; }

@keyframes board-bump { 0% { transform:scale(1); } 40% { transform:scale(1.35); } 100% { transform:scale(1); } }
@keyframes board-urgent { 50% { box-shadow:0 0 0 6px rgba(214,69,50,.25); } }
@keyframes board-blink { 50% { opacity:.25; } }
@keyframes board-dots { 0% { content:""; } 25% { content:"."; } 50% { content:".."; } 75% { content:"..."; } }
@keyframes board-turn { 50% { box-shadow:0 0 0 3px currentColor, 0 0 34px 8px rgba(255,236,190,.35); } }
@keyframes mangala-lift { 40% { transform:scale(.9); filter:brightness(.8); } }
@keyframes mangala-last { 0% { box-shadow: inset 0 .9cqw 1.4cqw rgba(35,14,2,.7), 0 0 0 0 rgba(255,255,255,.9); } 100% { box-shadow: inset 0 .9cqw 1.4cqw rgba(35,14,2,.7), 0 0 0 16px rgba(255,255,255,0); } }
@keyframes mangala-captured { 30% { filter:brightness(1.6) saturate(1.6); transform:scale(1.08); } }
@keyframes mangala-gain { 0% { filter:brightness(1); } 25% { filter:brightness(1.55); transform:scale(1.04); } 100% { filter:brightness(1); } }
@keyframes mangala-float { 0% { opacity:0; transform:translate(-50%,-10%) scale(.6); } 20% { opacity:1; transform:translate(-50%,-70%) scale(1.15); } 100% { opacity:0; transform:translate(-50%,-190%) scale(1); } }
@keyframes mangala-spark { 0% { opacity:1; transform:rotate(var(--a)) translateX(0) scale(1); } 100% { opacity:0; transform:rotate(var(--a)) translateX(64px) scale(.3); } }
@keyframes mangala-path { from { opacity:.6; } to { opacity:1; } }

/* Phones and short screens: compact cards, the referee floats (centred for the countdown, a corner mascot in play). */
@media (max-width: 680px), (max-height: 520px) {
  #arenaBody:has(> .board-arena) { padding:6px; }
  .board-arena { gap:6px; }
  .board-header { grid-template-columns:1fr 1fr; gap:6px; }
  .board-player { grid-template-areas:"name name" "score clock" "state state"; padding:6px 10px; border-radius:14px; }
  .board-player__name { font-size:15px; }
  .board-player__score b { font-size:22px; }
  .board-player__clock { min-width:0; font-size:17px; padding:2px 8px; }
  .board-player__state { justify-self:start; font-size:12px; min-height:1.2em; }
  .board-player[data-board-player="1"] { order:0; }
  .board-arena > .referee-region, .board-header .referee-region { position:absolute; z-index:9; width:auto; pointer-events:none; }
  /* Out of the flow here, so the message needs no reserved box. */
  .board-header .referee-message { height:auto; }
  #arenaDialog:not([data-referee-phase="playing"]) .board-header .referee-region, #arenaDialog .board-header .referee-region[data-count] { top:50%; left:50%; display:grid; width:min(260px, calc(100% - 24px)); padding:12px 16px; gap:6px; background:var(--glass-strong); border:1px solid var(--line); border-radius:20px; box-shadow:0 12px 30px rgba(15,23,42,.18); transform:translate(-50%,-50%); }
  #arenaDialog:not([data-referee-phase="playing"]) .board-header .referee-region .referee-art, #arenaDialog .board-header .referee-region[data-count] .referee-art { width:176px; }
  /* The card holds the panda and its disc side by side. */
  #arenaDialog .board-header .referee-region[data-count] { width:min(300px, calc(100% - 24px)); }
  #arenaDialog .board-header .referee-region[data-count]:not([data-count="BAŞLA!"]) .referee-art { translate:calc(-.2 * 176px) 0; }
  #arenaDialog .board-header .referee-region[data-count] .mw-mascot__sign:not(.is-word) { width:58cqw; height:58cqw; }
  #arenaDialog .board-header .referee-region[data-count] .mw-mascot__sign:not(.is-word) .mw-mascot__sign-text { font-size:40cqw; }
  #arenaDialog[data-referee-phase="playing"] .board-header .referee-region:not([data-count]) { right:4px; bottom:4px; width:44px; }
  #arenaDialog[data-referee-phase="playing"] .board-header .referee-region:not([data-count]) .referee-art { width:44px; }
  #arenaDialog[data-referee-phase="playing"] .board-header .referee-region:not([data-count]) .referee-message { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .board-set { padding:1px 10px; font-size:12.5px; }
  .board-set-break { gap:6px 12px; padding:6px 10px; border-radius:14px; }
  .board-set-break__title { font-size:14px; }
  .board-set-score strong { font-size:20px; }
  .board-draw-offer { gap:6px; padding:12px 14px; border-radius:16px; }
  .board-draw-offer p { font-size:14px; }
  .board-draw-offer .board-draw-offer__title { font-size:16px; }
  .board-note { padding:8px 14px; font-size:15px; }
  .mangala__legend { display:none; }
  .mangala__board { width:min(100cqw, 100cqh * 2.55); }
  #arenaFooter .board-hint-toggle { min-height:44px; padding:6px 14px; font-size:14px; }
  #arenaFooter .board-label__full { display:none; }
  #arenaFooter .board-label__short { display:inline; }
  #arenaDialog:has(.board-arena) .arena-header { padding:7px 10px; }
  #arenaDialog:has(.board-arena) .arena-header h2 { font-size:17px; }
  #arenaDialog:has(.board-arena) .arena-header p { font-size:11.5px; }
  #arenaDialog:has(.board-arena) #arenaFooter { padding:6px 10px; }
  /* Paused: one compact card (title beside Devam et). It already says what the referee's card would, so that one
     stays away rather than standing over the title, the buttons and the board. */
  .board-arena > .arena-paused { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px; padding:8px 12px; }
  .board-arena > .arena-paused > * { margin:0; }
  .board-arena > .arena-paused h3 { font-size:18px; }
  .board-arena > .arena-paused p { flex-basis:100%; font-size:13px; }
  #arenaDialog[data-referee-phase="paused"] .board-header .referee-region { display:none; }
}

/* Portrait phone (Pentago): the four turn buttons stand in the corners of the stage, so the corner panda moves to the
   bottom centre, between buttons 3 and 4 (landscape has its own seat below). */
@media (max-width: 680px) and (orientation: portrait) {
  #arenaDialog[data-referee-phase="playing"] .board-arena:has(> #arenaPlay > .pentago) .board-header .referee-region:not([data-count]) { right:auto; left:calc(50% - 22px); }
}

/* Short landscape phone (Mangala): each player card is one thin row, so the board gets the height for 44 px pits. */
@media (orientation: landscape) and (max-height: 500px) {
  .board-arena:has(.mangala) .board-player { grid-template-columns:minmax(0, 1fr) auto auto auto; grid-template-areas:"name state score clock"; gap:0 8px; padding:2px 10px; border-radius:12px; }
  .board-arena:has(.mangala) .board-player__name { font-size:14px; }
  .board-arena:has(.mangala) .board-player__name small { padding:1px 6px; font-size:11px; }
  .board-arena:has(.mangala) .board-player__state { justify-self:end; min-height:0; font-size:11px; white-space:nowrap; }
  .board-arena:has(.mangala) .board-player__score { font-size:12px; white-space:nowrap; }
  .board-arena:has(.mangala) .board-player__score b { font-size:18px; }
  .board-arena:has(.mangala) .board-player__clock { font-size:15px; padding:1px 6px; }
  .board-arena:has(.mangala) .board-player.is-turn { transform:none; }
  .mangala__banner { padding:4px 14px; }
}

/* Short landscape phone (Abluka, Pentago, Satranç): a 7×7, 6×6 or 8×8 board only reaches 44 (40) px cells with the
   whole height, so the header and footer share one row, the player cards stand in a column at the left and the two steps
   beside the board (Satranç keeps its own columns, satranc.css). The Koç footer (chip and buttons) is too wide for that
   row and keeps its own at the bottom. The corner panda sits under the cards, clear of Pentago's fourth turn button. */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 500px) {
  #arenaDialog[open]:has(.board-arena > #arenaPlay > :is(.abluka, .pentago, .satranc)) { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto minmax(0, 1fr) auto; }
  #arenaDialog:has(.board-arena > #arenaPlay > :is(.abluka, .pentago, .satranc)) > :is(#arenaBody, #arenaFeedback) { grid-column:1 / -1; }
  #arenaDialog:has(.board-arena > #arenaPlay > :is(.abluka, .pentago, .satranc)) > #arenaBody { grid-row:2; }
  #arenaDialog:has(.board-arena > #arenaPlay > :is(.abluka, .pentago, .satranc)) .arena-header { padding-block:4px; }
  #arenaDialog:has(.board-arena > #arenaPlay > :is(.abluka, .pentago, .satranc)) .arena-header > div:first-child { min-width:0; }
  #arenaDialog:has(.board-arena > #arenaPlay > :is(.abluka, .pentago, .satranc)) #arenaMeta { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  #arenaDialog:has(.board-arena > #arenaPlay > :is(.abluka, .pentago, .satranc)) :is(.arena-header, #arenaFooter) .button { min-height:44px; padding:6px 14px; }
  #arenaDialog:has(.board-arena > #arenaPlay > :is(.abluka, .pentago, .satranc)) #arenaFooter { grid-column:2; padding-block:4px; grid-row:1; align-items:center; border-top:0; border-bottom:1px solid var(--glass-line); }
  #arenaBody:has(> .board-arena > #arenaPlay > :is(.abluka, .pentago, .satranc)) { padding:2px 6px; }
  .board-arena:has(> #arenaPlay > :is(.abluka, .pentago)) { display:grid; grid-template-columns:minmax(0, 210px) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr); gap:0 8px; }
  .board-arena:has(> #arenaPlay > :is(.abluka, .pentago)) > * { grid-column:1; grid-row:1; }
  .board-arena:has(> #arenaPlay > :is(.abluka, .pentago)) > #arenaPlay { grid-column:2; }
  .board-arena:has(> #arenaPlay > :is(.abluka, .pentago)) > :is(.board-draw-offer, .board-note, .arena-paused) { grid-column:2; align-self:center; z-index:2; }
  .board-arena:has(> #arenaPlay > :is(.abluka, .pentago)) > .arena-paused { justify-self:center; padding:10px 16px; background:var(--glass-strong); border:2px solid var(--line-strong); border-radius:18px; box-shadow:var(--shadow-lg); }
  .board-arena:has(> #arenaPlay > :is(.abluka, .pentago)) > .board-header { align-self:center; grid-template-columns:minmax(0, 1fr); }
  .arena-play--board > :is(.abluka, .pentago) { grid-template-columns:auto minmax(0, 1fr); grid-template-rows:minmax(0, 1fr); gap:0 8px; }
  .arena-play--board > :is(.abluka, .pentago) > :is(.abluka-phase, .pentago-phase) { grid-column:1; grid-row:1; flex-direction:column; align-self:center; }
  .arena-play--board > :is(.abluka, .pentago) > :is(.abluka-stage, .pentago-stage) { grid-column:2; grid-row:1; }
  .arena-play--board > :is(.abluka, .pentago) > :is(.abluka-live, .pentago-live) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #arenaDialog:has(.board-arena > #arenaPlay > :is(.abluka, .pentago, .satranc)):has(#arenaFooter > .board-coach) > .arena-header { grid-column:1 / -1; }
  #arenaDialog:has(.board-arena > #arenaPlay > :is(.abluka, .pentago, .satranc)) #arenaFooter:has(> .board-coach) { grid-column:1 / -1; grid-row:3; border-top:1px solid var(--line); border-bottom:0; }
  #arenaDialog[data-referee-phase="playing"] .board-arena:has(> #arenaPlay > :is(.abluka, .pentago)) .board-header .referee-region:not([data-count]) { right:auto; left:4px; }
}

/* Narrow phones: the game's footer buttons two by two, each label on one line (an odd last one takes the row).
   The Koç footer keeps its own rows (board-coach.css). */
@media (max-width: 680px) {
  #arenaFooter:has(> [data-arena^="board-"]) { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
  #arenaFooter > .button[data-arena^="board-"] { min-height:44px; padding:6px 10px; font-size:14px; white-space:nowrap; }
  #arenaFooter > .button[data-arena^="board-"]:last-child:nth-child(odd) { grid-column:1 / -1; }
}

/* High contrast: flat, outlined pieces and black-on-white counts. */
/* High contrast keeps each seat's colour on its card, its stores and its turn edge (#arenaDialog beats an Abluka look). */
body.high-contrast #arenaDialog .board-arena .side-0 { --side-identity-bg:var(--surface); --side-identity-fg:var(--player-a-ink); --side-identity-border:var(--player-a); }
body.high-contrast #arenaDialog .board-arena .side-1 { --side-identity-bg:var(--surface); --side-identity-fg:var(--player-b-ink); --side-identity-border:var(--player-b); }
body.high-contrast .mangala { --p0:var(--player-a); --p1:var(--player-b); }
body.high-contrast .mangala__board { background:#fff; box-shadow:inset 0 0 0 4px #000; }
body.high-contrast .mangala__grain { display:none; }
body.high-contrast .mangala__cup { background:#fff; box-shadow:inset 0 0 0 3px #000; }
body.high-contrast .stone { background:var(--c2); box-shadow:0 0 0 2px #000; }
body.high-contrast .mangala__count { color:#000; background:#fff; border-color:#000; }
body.high-contrast .mangala__store-name, body.high-contrast .mangala__num { color:#000; text-shadow:none; }
body.high-contrast .mangala__pit.is-playable .mangala__cup { box-shadow:inset 0 0 0 3px #000, 0 0 0 5px #000; }
body.high-contrast .mangala__store--p0 .mangala__cup { box-shadow:inset 0 0 0 4px var(--p0); }
body.high-contrast .mangala__store--p1 .mangala__cup { box-shadow:inset 0 0 0 4px var(--p1); }
body.high-contrast .mangala[data-turn="p0"] .mangala__row--p0 { box-shadow:0 0 0 5px var(--p0); animation:none; }
body.high-contrast .mangala[data-turn="p1"] .mangala__row--p1 { box-shadow:0 0 0 5px var(--p1); animation:none; }

body.reduced-motion .board-arena *, body.reduced-motion .board-arena *::before, body.reduced-motion .board-arena *::after { animation:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce) {
  .board-arena *, .board-arena *::before, .board-arena *::after { animation:none !important; transition:none !important; }
}

/* ---------- Phones: the Tam ekran button, the tip bar and the compact arena ----------
   hub.js sets data-compact on every board game at phone sizes, in both orientations: a one-row header (title and small
   buttons), slim player cards and a slim footer, so the board takes the room; Tam ekran only hides the browser bars.
   Bigger screens never match, so the smartboard keeps its layout. */
.arena-fullscreen { display:none; }
@media (max-width: 680px), (max-height: 520px) {
  .arena-header .arena-fullscreen:not([hidden]) { display:inline-flex; padding-inline:10px; }
}
.arena-tip { display:flex; flex-shrink:0; align-items:center; gap:10px; margin:6px 6px 0; padding:2px 2px 2px 12px; color:var(--ink); background:var(--primary-soft); border:1px solid var(--primary); border-radius:14px; font-size:14px; font-weight:700; line-height:1.25; }
.arena-tip[hidden] { display:none; }
.arena-tip > .icon-svg { flex:none; width:26px; height:26px; color:var(--primary); }
.arena-tip p { flex:1; margin:0; }
.arena-tip__close { display:grid; flex:none; place-items:center; width:44px; height:44px; padding:0; color:inherit; background:none; border:0; border-radius:12px; cursor:pointer; }
.arena-tip__close:focus-visible { outline:3px solid var(--primary); outline-offset:-3px; }
body.high-contrast .arena-tip { color:#000; background:#fff; border:2px solid #000; }
body.high-contrast .arena-tip > .icon-svg { color:#000; }

#arenaDialog[data-compact] > .arena-header { align-items:center; gap:8px; padding:2px 8px; }
#arenaDialog[data-compact] > .arena-header > div:first-child { min-width:0; }
#arenaDialog[data-compact] #arenaMeta { display:none; }
#arenaDialog[data-compact] #arenaTitle { overflow:hidden; font-size:16px; white-space:nowrap; text-overflow:ellipsis; }
#arenaDialog[data-compact] > .arena-header > div:last-child { flex:none; flex-direction:row; gap:6px; }
#arenaDialog[data-compact] > .arena-header .button { min-height:44px; padding:4px 12px; font-size:14px; }
#arenaDialog[data-compact] > .arena-header .arena-fullscreen { padding-inline:8px; }

/* Landscape: the game's footer joins the header row (as Abluka, Pentago and Satranç already do on a short screen),
   the Koç footer keeps its own row, and a tip floats over the bottom edge instead of taking a row. */
@media (orientation: landscape) {
  #arenaDialog[data-compact][open] { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto minmax(0, 1fr) auto; }
  #arenaDialog[data-compact] > :is(#arenaBody, #arenaFeedback) { grid-column:1 / -1; }
  #arenaDialog[data-compact] > #arenaBody { grid-row:2; }
  #arenaDialog[data-compact][open] > #arenaBody:has(> .board-arena) { padding:0 8px 4px; }
  #arenaDialog[data-compact] > #arenaFooter { grid-column:2; grid-row:1; align-items:center; padding:2px 8px; border-top:0; border-bottom:1px solid var(--glass-line); }
  #arenaDialog[data-compact] > #arenaFooter .button { min-height:44px; padding:4px 12px; font-size:14px; }
  #arenaDialog[data-compact]:has(#arenaFooter > .board-coach) > .arena-header { grid-column:1 / -1; }
  #arenaDialog[data-compact] > #arenaFooter:has(> .board-coach) { grid-column:1 / -1; grid-row:3; border-top:1px solid var(--line); border-bottom:0; }
  #arenaDialog[data-compact] > .arena-tip { position:absolute; z-index:20; bottom:8px; left:50%; width:max-content; max-width:calc(100% - 24px); margin:0; translate:-50% 0; box-shadow:var(--shadow-md, 0 12px 30px rgba(15,23,42,.18)); }
}

/* Portrait: the two cards stay side by side, each two short rows; the footer is one row. */
@media (orientation: portrait) {
  #arenaDialog[data-compact] #arenaBody:has(> .board-arena) { padding:4px 6px; }
  #arenaDialog[data-compact] .board-arena { gap:4px; }
  #arenaDialog[data-compact] .board-player { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"name clock" "score state"; gap:0 6px; padding:3px 8px; border-radius:12px; }
  #arenaDialog[data-compact] .board-player__name { font-size:14px; }
  #arenaDialog[data-compact] .board-player__name small { padding:1px 6px; font-size:11px; }
  #arenaDialog[data-compact] .board-player__score { font-size:12px; white-space:nowrap; }
  #arenaDialog[data-compact] .board-player__score b { font-size:17px; }
  #arenaDialog[data-compact] .board-player__clock { padding:1px 6px; font-size:15px; }
  #arenaDialog[data-compact] .board-player__state { justify-self:end; min-height:0; font-size:11px; white-space:nowrap; }
  #arenaDialog[data-compact] .board-player.is-turn { transform:none; }
  #arenaDialog[data-compact] > #arenaFooter { padding:4px 6px; }
  #arenaDialog[data-compact] > #arenaFooter:has(> [data-arena^="board-"]) { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:4px; }
  #arenaDialog[data-compact] > #arenaFooter > .button[data-arena^="board-"] { min-height:44px; padding:4px 6px; font-size:13px; }
  #arenaDialog[data-compact] > #arenaFooter > .button[data-arena^="board-"]:last-child:nth-child(odd) { grid-column:auto; }
  #arenaDialog[data-compact] .satranc[data-layout="tall"] .satranc-moves { padding:2px 4px; font-size:13px; }
}