.arena-room{max-width:1100px}.arena-board{margin:24px auto;max-width:680px;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border:12px solid #4e3a28;border-radius:12px;overflow:hidden;background:#161a35}.arena-square{aspect-ratio:1;display:grid;place-items:center;background:#e3d5ba;color:#333;font-size:clamp(20px,4vw,42px)}.arena-square.dark{background:#694c37}.arena-piece{border-radius:50%;width:72%;height:72%;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#fff,#c5c5d0);box-shadow:0 4px 5px #0007}.arena-piece.black{background:radial-gradient(circle at 35% 25%,#697491,#101420);color:#fff}.arena-actions{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0;max-height:280px;overflow:auto}.arena-hand{display:flex;gap:10px;overflow:auto;padding:18px 2px}.arena-color-card{min-width:78px;border:3px solid #fff6;border-radius:12px;padding:26px 14px;font-size:24px;background:#444}.arena-color-card.R{background:#b73556}.arena-color-card.B{background:#255da1}.arena-color-card.G{background:#20856b}.arena-color-card.Y{background:#a57c17}.arena-board.backgammon{aspect-ratio:1.4;grid-template-columns:repeat(12,1fr);gap:3px;padding:10px;background:#322241}.arena-point{background:linear-gradient(#875baf,#241937);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px;min-width:0}.arena-board.uno{display:flex;align-items:center;justify-content:center;aspect-ratio:2;background:radial-gradient(ellipse,#363777,#15182e);border-color:#454071}.arena-actions button{font-size:14px}.arena-room details{max-width:800px}.arena-room #arena-status{font-size:22px;color:#c2b0ff}@media(prefers-reduced-motion:no-preference){.arena-color-card{animation:arrive .25s ease-out}@keyframes arrive{from{transform:translateY(12px) rotateY(30deg);opacity:.5}to{transform:none;opacity:1}}}
.arena-room.section{padding-top:28px}.arena-room .arena-board{max-width:min(620px,75vh);background-size:cover}.arena-square:not(.dark){background-image:var(--surface);background-size:cover}.arena-board.backgammon{position:relative}.arena-point{position:relative;background:transparent;isolation:isolate}.arena-point:before{content:'';position:absolute;inset:0;z-index:-1;background:#a47247;clip-path:polygon(0 0,100% 0,50% 90%)}.arena-point:nth-child(even):before{background:#46697a}.arena-point:nth-child(n+13):before{transform:rotate(180deg)}
.arena-board.kozel{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;aspect-ratio:2;border-color:#305d4d;background:radial-gradient(ellipse,#245849,#102a26)}.arena-board.kozel .arena-color-card{font-size:18px;min-width:90px}

/* Interactive field: selections are local previews, never optimistic game results. */
.arena-board[hidden],#arena-retry[hidden]{display:none}
.arena-board-scroll{max-width:100%;overflow:auto;overscroll-behavior:contain;padding:2px}
.arena-room .arena-board{width:100%;min-width:352px;max-width:620px;box-shadow:0 16px 60px #0004}
.arena-square{position:relative;padding:0;border:0;border-radius:0;min-width:0;font:inherit;cursor:default}
.arena-coordinate{position:absolute;left:3px;bottom:1px;font-size:10px;opacity:.75}
.arena-square.dark .arena-coordinate{color:#fff}
.arena-board .arena-play:disabled{opacity:1;filter:none;cursor:default}
.arena-board .can-select:not(:disabled){cursor:pointer}
.arena-board .can-select .arena-piece{outline:2px solid #a5caff}
.arena-board .is-selected{box-shadow:inset 0 0 0 4px #bd98ff}
.arena-board .is-target{box-shadow:inset 0 0 0 4px #5aefc6;cursor:pointer}
.arena-square.is-target:after{content:'';position:absolute;width:22%;height:22%;border-radius:50%;background:#61ffd3;box-shadow:0 0 14px #61ffd3}
.arena-play:focus-visible{outline:3px solid #73ffe1;outline-offset:2px;z-index:2}
.arena-piece{font-size:clamp(16px,3vw,30px);font-weight:800}
.arena-room .arena-board.backgammon{min-width:552px;max-width:740px}
.arena-point{border:0;padding:5px 1px;color:#fff;gap:10px;min-height:120px}
.arena-point.can-select:not(:disabled){background:#ac8aff22}
.arena-counter{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 30% 20%,white,#c1c6d5);color:#202838;font-weight:800;box-shadow:0 4px 6px #0007}
.arena-counter.black{background:radial-gradient(circle at 30% 20%,#596885,#101827);color:#fff}
.arena-hand{perspective:900px;max-width:100%;padding:24px 5px 16px;min-height:0;scroll-snap-type:x proximity}
.arena-hand .arena-color-card{flex:0 0 104px;min-height:144px;max-width:104px;white-space:normal;overflow-wrap:anywhere;font-size:18px;scroll-snap-align:start;cursor:pointer;color:#fff;animation:none}
.arena-hand .arena-color-card:disabled{opacity:.65;cursor:default}
.arena-hand .arena-color-card.is-selected{opacity:1;outline:3px solid #84ffe0;transform:translateY(-12px) rotateX(8deg);box-shadow:0 12px 24px #0006}
.arena-players{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.arena-player{padding:9px 12px;border:1px solid #8d84ac55;border-radius:14px;overflow-wrap:anywhere}
.arena-player.current{border-color:#a889ff;background:linear-gradient(120deg,#855bcd44,#39829a33)}
.arena-command-panel{position:relative;margin-top:8px;border:1px solid #8276a955;background:linear-gradient(135deg,#6952ad22,#25988c11);border-radius:18px;padding:16px}
.arena-command-panel p{margin:0;overflow-wrap:anywhere}.arena-actions{max-height:210px;padding:12px 0 0}.arena-actions:empty{padding:0}
.arena-actions button,#arena-retry{min-height:44px;white-space:normal}
.arena-dice{align-self:center;min-width:160px}.arena-table-note{flex-basis:100%;text-align:center;padding:12px;color:#fff;font-size:14px}
.arena-room .arena-board.uno,.arena-room .arena-board.kozel{min-width:0;flex-wrap:wrap;padding:20px;aspect-ratio:auto;min-height:230px}
@media(max-width:600px){.arena-room h1{font-size:30px}.arena-room.section{padding-bottom:100px}.arena-command-panel{padding:12px}.arena-actions button{flex:1 1 130px}.arena-room .arena-board{border-width:6px;margin:14px 0}.arena-hand{gap:8px}.arena-hand .arena-color-card{flex-basis:88px;min-height:126px;font-size:16px;padding:16px 8px}}
@media(prefers-reduced-motion:no-preference){.arena-hand .arena-color-card{transition:transform .18s ease,box-shadow .18s ease}.arena-piece{transition:outline-color .15s}}
@media(prefers-reduced-motion:reduce){.arena-hand .arena-color-card.is-selected{transform:none}}