[hidden] { display:none!important; }
#lobby { animation:panel-appear .25s ease both; }
#lobby .room-header:has(#room-title:empty) { justify-content:end;margin-bottom:14px; }
#lobby .settings-panel { border:1px solid #3c435c; }
#setup-footer .create-game { margin-left:auto; }
.choice:disabled, .choice:disabled:hover, .choice:disabled:active { color:#73798c;background:#202330;border-color:#34394b;box-shadow:none;text-shadow:none;cursor:default;transform:none;filter:none;opacity:.65; }
.disabled-setting { opacity:.6; }
.disabled-setting .choice, .disabled-setting .choice:hover { background:#1b1e2a;border-color:#34394b;box-shadow:none;color:#73798c; }
.match-panel { width:100%;max-width:1060px;margin:28px auto 0;padding:0;border:1px solid #46495e;border-radius:20px;background:radial-gradient(ellipse at 50% 20%,#2b294350,transparent 65%),linear-gradient(145deg,#191d2b,#111621);box-shadow:inset 0 1px 0 #d7ddff0a,0 28px 70px #0004; }
.panel-top { position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.9fr) minmax(0,1fr);align-items:stretch;min-height:86px;padding:0 26px;border-bottom:1px solid #42465d; }
#panel-title { position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap; }
.panel-name { display:flex;align-items:center;justify-content:center;padding:18px 10px;min-width:0;color:#e5e7f2;font-size:1.1rem;line-height:1.4;overflow-wrap:anywhere;text-align:center; }
.panel-score { display:flex;align-items:center;justify-content:center;gap:21px;background:#b29fe30b;border-left:1px solid #363b50;border-right:1px solid #363b50;color:#8d91a7;font-size:2.25rem;font-variant-numeric:tabular-nums; }
.panel-score strong { font-weight:400;color:#e3dcec; }
#players.match-duel { display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.9fr) minmax(0,1fr);align-items:center;gap:0;padding:34px 26px 26px; }
.match-player { display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none; }
.match-portrait { position:relative;width:clamp(78px,20vw,220px);height:auto;aspect-ratio:1; }
.match-portrait .avatar { display:block;width:100%;height:100%;border-radius:50%;border:1px solid #777e97;box-shadow:0 0 24px #9c9ddc0d; }
.match-player.admin .avatar { border-color:#a38bb8; }
.match-player.empty .avatar { opacity:.48; }
.match-player.winner .avatar { border-color:#639d82;box-shadow:0 0 24px #5f947029; }
.ready-band { position:absolute;left:-4%;top:50%;width:108%;transform:translateY(-50%);padding:8px 0;background:#285c4de8;border-top:1px solid #77a99370;border-bottom:1px solid #77a99370;color:#e0f1e7;font-size:.82rem;opacity:0;pointer-events:none; }
.is-ready .ready-band { opacity:1;animation:ready-band-in .25s ease both; }
.match-player > .checker-indicator { display:block;width:40px;height:40px;object-fit:contain;margin:18px 0 0; }
.preparation-clocks { position:relative;align-self:center;text-align:center;margin-bottom:58px; }
.preparation-time { display:flex;align-items:center;justify-content:center;gap:15px;padding:18px 10px;border:1px solid #474b63;border-radius:14px;background:#101522;box-shadow:0 10px 20px #0002;white-space:nowrap; }
.preparation-time strong { color:#d2c9e6;font-size:clamp(1.1rem,2.4vw,2rem);font-weight:400;font-variant-numeric:tabular-nums; }
.preparation-time > span { color:#6c738b;font-size:1.3rem; }
#readiness-countdown { position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin:0 0 15px;padding:5px 11px;color:#c5b9de;border:1px solid #524a65;border-radius:7px;background:#c6adff08;font-size:.9rem;font-variant-numeric:tabular-nums; }
#panel-summary, #match-panel #spectators { display:none; }
#match-panel .panel-ready { display:flex;align-items:center;justify-content:center;width:100%;min-height:62px;margin:0;padding:15px 20px;border:0;border-top:1px solid #5c967d;border-radius:0 0 19px 19px;background:#255646;color:#e4f1eb;font-size:1.05rem;font-weight:500;box-shadow:inset 0 1px 0 #8dc1a31a;transition:background .2s,box-shadow .2s; }
#match-panel .panel-ready:hover:not(:disabled) { background:#306b58;box-shadow:0 0 22px #4a957c24; }
#match-panel .panel-ready:disabled { background:#203f37;border-color:#426153;color:#8ba69c;opacity:1;cursor:default; }
.screen-navigation { display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-left:auto;margin-right:auto; }
.screen-navigation .danger-navigation, .screen-navigation #pause-game { min-height:44px;height:44px; }
.screen-navigation #pause-game { display:inline-flex;align-items:center;gap:9px;width:auto;padding:10px 17px;margin-left:auto;font-size:.74rem;color:#d2cbe5;border:1px solid #626080;border-radius:8px;background:#36364f; }
#pause-game svg { width:18px;height:18px;stroke:currentColor;stroke-width:2; }
#pause-game:hover { background:#44435f;box-shadow:0 0 18px #ad9ce414; }
.match-score { display:none; }
#path-choices { display:grid;gap:10px;margin:22px 0; }
.path-choice { width:100%;text-align:left;font-size:.75rem;line-height:1.7;padding:12px; }
#game-screen:not([hidden]) { animation:panel-appear .25s ease both; }
@keyframes panel-appear { from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none} }
@keyframes ready-band-in { from{opacity:0;scale:.85 1}to{opacity:1;scale:1} }
/* Все игровые фишки — одинаковые слоты по общей геометрии исходного поля. */
#board-space { position:relative;overflow:visible; }
#play-board, #board-points, .board-area, .game-layout { overflow:visible; }
#game-board-image { aspect-ratio:auto;object-fit:contain; }
#board-points { position:absolute;inset:0;pointer-events:none; }
.board-point { display:contents;position:static;width:auto;height:auto;transform:none; }
.board-point::after { display:none!important; }
.checker-piece, .checker-piece:hover, .checker-piece:focus-visible, .checker-piece:disabled:hover { position:absolute;aspect-ratio:1;height:auto;min-height:0;padding:0;margin:0;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;box-shadow:none;outline:none;pointer-events:auto;overflow:visible; }
.checker-piece:disabled { opacity:1;cursor:default; }
.piece-art { position:absolute;display:block;height:auto;max-width:none;pointer-events:none; }
.real-checker { z-index:2; }
.ghost-checker { z-index:3;cursor:pointer; }
.ghost-checker:hover, .ghost-checker:focus-visible { filter:brightness(1.24); }
.capture-preview { visibility:hidden; }
.board-point.movable .checker-piece.available-checker, .bar-place.movable img { filter:brightness(1.08) drop-shadow(0 0 3px #cec5ff) drop-shadow(0 0 7px #b4a3eb88); }
.board-point.selected .checker-piece.available-checker, .bar-place.selected img { scale:1;filter:brightness(1.17) drop-shadow(0 0 4px #e1d8ff) drop-shadow(0 0 9px #b7a4f1a0); }
.off-tray, .off-tray:hover { top:10%;bottom:13%;left:7.4%;width:4.6%;transform:none; }
#off-1 { right:7.4%;transform:none; }
.game-layout { grid-template-columns:minmax(0,1fr) 340px;gap:18px; }
.tower-panel { background:transparent;border:0;box-shadow:none;padding:14px; }
.tower-panel h3 { display:none; }
#dice-tower { aspect-ratio:1;border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none; }
#tower-image { display:block;width:100%;height:100%;object-fit:contain;pointer-events:none; }
#dice-tower::before, #dice-tower::after, .tower-baffles, .tower-floor { display:none; }
#roll-dice, #roll-dice:hover { inset:-4%;height:auto;z-index:3; }
#roll-dice .ready-die { position:absolute;top:13%;left:36%;width:13%; }
#roll-dice .ready-die + .ready-die { left:51%; }
#roll-dice:focus-visible { outline:1px solid #a69aca;outline-offset:4px;border-radius:20px; }
.tower-die { width:7%; }
.result-die { width:14%;transform:translate(-50%,-50%);z-index:4; }
.result-die.emerging { animation:emerge-die .35s ease-out both; }
@keyframes emerge-die { from{opacity:0;translate:0 -22px}to{opacity:1;translate:0 0} }
@media(max-width:1000px) { .game-layout{grid-template-columns:minmax(0,1fr) 260px} }
@media(max-width:680px) {
 .panel-top{grid-template-columns:minmax(0,1fr) 124px minmax(0,1fr);min-height:72px;padding:0 12px}
 .panel-name{font-size:.8rem;padding:12px 4px}.panel-score{font-size:1.7rem;gap:12px}
 #players.match-duel{grid-template-columns:minmax(0,1fr) 124px minmax(0,1fr);padding:28px 12px 20px}
 .match-portrait{width:clamp(58px,18vw,100px)}.match-player>.checker-indicator{width:29px;height:29px;margin-top:14px}
 .preparation-clocks{margin-bottom:43px}.preparation-time{padding:12px 3px;gap:5px;border-radius:9px}.preparation-time strong{font-size:1.04rem}.preparation-time>span{font-size:.8rem}
 #readiness-countdown{font-size:.74rem;margin-bottom:12px;padding:4px 9px}.ready-band{font-size:.65rem;padding:5px 0}
 #match-panel .panel-ready{min-height:54px;font-size:.94rem}
 .game-layout{grid-template-columns:1fr}.tower-panel{width:min(360px,100%);justify-self:center}
}
@media(max-width:360px) { .panel-top,#players.match-duel{grid-template-columns:minmax(0,1fr) 105px minmax(0,1fr);padding-left:8px;padding-right:8px}.preparation-time strong{font-size:.9rem}.panel-name{font-size:.73rem} }
@media(prefers-reduced-motion:reduce) { #lobby,#game-screen:not([hidden]),.is-ready .ready-band,.result-die.emerging{animation:none}.panel-ready{transition:none} }
.moving-checker { position:fixed;display:block;z-index:20;pointer-events:none;overflow:visible;transform-origin:center; }
.board-area { padding-top:18px;padding-bottom:18px; }
#room-title:empty { display:none; }

/* 21.10: отсчёт внутри портрета; геометрия всех фишек внутри стола. */
.match-portrait{overflow:hidden;border-radius:50%}.is-counting .avatar{filter:brightness(.42);transition:filter .3s}
.avatar-countdown{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(26px,6vw,76px);font-weight:500;font-variant-numeric:tabular-nums;line-height:1;color:var(--checker-color);color:color-mix(in srgb,var(--checker-color),#ee6b78 var(--danger-blend,0%));text-shadow:0 0 16px currentColor;transition:color .7s;pointer-events:none}
.avatar-countdown.urgent{animation:countdown-pulse 1.4s ease-in-out infinite}
@keyframes countdown-pulse{50%{opacity:calc(.96 - var(--urgency)*.14);scale:calc(1 + var(--urgency)*.04)}}
body:has(#game-screen:not([hidden])){padding:16px 12px}body:has(#game-screen:not([hidden])) main{max-width:1920px}
.game-layout{grid-template-columns:minmax(0,1fr) minmax(280px,28%);gap:4px}.tower-panel{padding:0}.board-area{padding:8px 0;position:relative}
#play-board{container-type:inline-size} .checker-piece{--checker-color:#bca6e8}
.piece-art{transition:opacity .16s ease}.preview-ghost{opacity:0}.show-ghost>.preview-real,.show-ghost>.bar-art>.preview-real{opacity:0}.show-ghost>.preview-ghost,.show-ghost>.bar-art>.preview-ghost{opacity:1}
.board-point.movable .available-checker,.bar-place.movable .bar-art{filter:brightness(1.14) drop-shadow(0 0 3px var(--checker-color)) drop-shadow(0 0 8px var(--checker-color))}
.board-point.selected .available-checker,.bar-place.selected .bar-art{filter:brightness(1.2) drop-shadow(0 0 4px var(--checker-color)) drop-shadow(0 0 11px var(--checker-color))}
.bar-art{position:relative;width:100%;aspect-ratio:1}.bar-art .piece-art{height:auto;max-width:none}
/* Обе кнопки вывода находятся в одном правом отсеке; размеры задаёт OFF_TRAY. */
.off-tray,.off-tray:hover{min-height:0;border-radius:6px;transform:none}
.off-stack{perspective:none}
.off-checker{position:absolute;aspect-ratio:auto;transform:translate(-50%,-50%);pointer-events:none}
.off-count{left:0;width:100%;right:0;font-size:clamp(4px,.46cqw,9px);line-height:1;pointer-events:none}
#off-1 .off-count{top:auto;bottom:.3%}
#off-0 .off-count{top:.3%;bottom:auto}
.side-slot{position:absolute;left:0;top:50%;width:100%;aspect-ratio:1;transform:translateY(-50%)}
.off-checker .side-art{transform:rotate(90deg);transform-origin:50% 50%;filter:drop-shadow(0 1px 1px #0008)}
#confirm-preview{position:absolute;left:50%;bottom:0;translate:-50% 0;z-index:6;padding:10px 18px;font-size:.8rem}
.moving-checker .flight-side{opacity:0;transform:rotate(90deg)}
@media(max-width:1000px){.game-layout{grid-template-columns:minmax(0,1fr) minmax(230px,28%)}}
@media(max-width:760px){.game-layout{grid-template-columns:1fr}.tower-panel{width:min(460px,100%);justify-self:center}.avatar-countdown{font-size:clamp(26px,7vw,46px)}}
@media(prefers-reduced-motion:reduce){.avatar-countdown.urgent{animation:none}.piece-art{transition:none}}

.dice-history{position:absolute;inset:0;pointer-events:none;z-index:2}
.history-compartment{position:absolute;top:59%;left:6.2%;width:19%;height:29%;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);place-items:center;gap:4%;padding:1.5%;border:1px solid color-mix(in srgb,var(--die-color),transparent 50%);border-radius:9px;background:#090d17b3;box-shadow:inset 0 0 12px #0008,0 0 6px color-mix(in srgb,var(--die-color),transparent 75%)}
.history-compartment.side-1{left:auto;right:6.2%}.history-die{position:relative;display:block;width:auto;height:100%;max-width:100%;aspect-ratio:1}
.dice-art{position:absolute;inset:0;display:block;pointer-events:none}.dice-fallback{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:9%;padding:17%;border-radius:18%;border:1px solid #ffffff70;background:var(--die-color);box-shadow:inset 0 0 8px #0006;color:white}
.dice-fallback i{border-radius:50%;background:#eff1ff;box-shadow:0 1px 1px #0008}.dice-art.image-loaded .dice-fallback{visibility:hidden}.dice-art:not(.image-loaded)>.dice-face{opacity:0}
.history-die .dice-face{width:133.333%;height:133.333%;left:-16.666%;top:-16.666%}

.off-preview{opacity:.35;transition:opacity .16s}.off-preview.preview-solid{opacity:1}