body:has(#game-screen:not([hidden])) main { max-width: 1440px; }
.game-players { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px) minmax(0, 1fr); align-items: start; gap: 24px; }
.game-player { display: flex; align-items: center; gap: 12px; padding: 15px 18px; background: #11131dcc; border: 1px solid #292d40; border-radius: 12px; min-width: 0; transition: border-color .2s, box-shadow .2s; }
.game-player > img { width: 35px; height: 35px; flex: 0 0 auto; }
.game-player > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.game-player strong { overflow-wrap: anywhere; font-size: .95rem; font-weight: 600; letter-spacing: .01em; }
.game-player .note { font-size: .65rem; color: #8b91a9; }
.game-player.active-turn { border-color: #82769e; box-shadow: 0 0 20px #a88aff14; background: linear-gradient(110deg, #242032b0, #12141e); }
#game-player-1 { flex-direction: row-reverse; text-align: right; }
.match-center { min-width: 0; }
.match-clocks { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); padding: 5px; border: 1px solid #383b50; border-radius: 14px; background: #10121d; box-shadow: 0 8px 24px #0002; }
.clock-side { display: flex; flex-direction: column; align-items: center; min-width: 0; gap: 5px; padding: 8px 4px; border-radius: 9px; transition: background .2s; }
.clock-name { color: #8e94ac; font-size: .6rem; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.clock-divider { background: #32364b; margin: 11px 0; }
.game-clock { color: #969db4; font-variant-numeric: tabular-nums; font-size: 1.7rem; letter-spacing: .035em; line-height: 1.1; white-space: nowrap; }
.active-clock { background: #b5a0ff10; }
.active-clock .game-clock { color: #d4c7ee; text-shadow: 0 0 14px #b8a3e335; }
.game-clock.low-time { color: #dc929e; }
.match-score { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 8px; color: #949ab0; font-size: .65rem; }
.match-score strong { color: #c5c9dc; font-variant-numeric: tabular-nums; min-width: 12px; text-align: center; font-weight: 500; }
.game-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0; }
#game-status { margin: 0; color: #cfbdff; font-weight: bold; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: center; }
.board-area { min-width: 0; }
#play-board { position: relative; min-width: 0; }
#game-board-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.board-point { position: absolute; width: 5.65%; height: 36%; transform: translateX(-50%); background: transparent; border: 0; padding: 0; min-height: 0; color: #e5e5ff; border-radius: 6px; }
.board-point.top { top: 8%; }
.board-point.bottom { bottom: 10%; }
.board-point:disabled { opacity: 1; cursor: default; }
.board-point:hover, .board-point:focus-visible { background: transparent; box-shadow: none; outline: none; }
.board-checker { position: absolute; width: 130%; max-width: none; height: auto; left: 50%; transform: translateX(-50%); pointer-events: none; transition: filter .15s, scale .15s; }
.top .board-checker { top: calc(var(--stack-index) * 18%); }
.bottom .board-checker { bottom: calc(var(--stack-index) * 18%); }
.stack-total { position: absolute; left: 15%; top: 44%; width: 70%; background: #111527e8; color: white; font-size: .75rem; border-radius: 8px; }
.board-point.movable .available-checker, .bar-place.movable img { filter: brightness(1.35) drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #c7b2ff) drop-shadow(0 0 19px #8faaff); }
.board-point:focus-visible .available-checker, .bar-place:focus-visible img { filter: brightness(1.25) drop-shadow(0 0 3px #fff) drop-shadow(0 0 12px #b6a0ff); }
.board-point.selected .available-checker, .bar-place.selected img { scale: 1.07; filter: brightness(1.55) drop-shadow(0 0 4px #fff) drop-shadow(0 0 13px #e1d2ff) drop-shadow(0 0 25px #9fbaff); }
.board-point.target::after { content: ''; position: absolute; width: 43%; aspect-ratio: 1; left: 28.5%; border-radius: 50%; border: 1px solid #bac8ebba; background: #b4c2ee33; box-shadow: 0 0 9px #a8bbeb65; pointer-events: none; }
.board-point.top.target::after { top: 7%; }
.board-point.bottom.target::after { bottom: 7%; }
.off-tray.target { box-shadow: inset 0 0 18px #b6c7ff80, 0 0 10px #a1b7ff70; }
#board-bar { position: absolute; left: 48.7%; width: 3.4%; top: 13%; bottom: 15%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.bar-place, .bar-place:hover { display: flex; flex-direction: column; align-items: center; padding: 2px 0; color: #b4b3c5; font-size: clamp(7px, .7vw, 12px); min-height: 0; width: 140%; background: transparent; border-color: transparent; box-shadow: none; }
.bar-place img { width: 120%; max-width: none; pointer-events: none; }
.bar-place:disabled { opacity: .9; cursor: default; }
.off-tray, .off-tray:hover { position: absolute; top: 10%; bottom: 12%; left: 6.8%; width: 5.2%; min-height: 0; padding: 0; border: 0; border-radius: 20px; color: #acb2cd; background: transparent; font-weight: normal; transform: skewX(-3.2deg); transform-origin: top center; box-shadow: none; }
#off-1 { left: auto; right: 6.55%; transform: skewX(3.2deg); }
.off-tray:disabled { opacity: 1; cursor: default; }
.off-tray:disabled:hover { background: transparent; box-shadow: none; }
.off-tray:focus-visible { outline: 1px solid #cbbcff; outline-offset: -1px; }
.off-stack { position: absolute; inset: 0; pointer-events: none; perspective: 600px; }
.off-checker { position: absolute; bottom: calc(3% + var(--off-index) * 6.05%); left: 0; width: 100%; aspect-ratio: 1; }
.off-checker img { position: absolute; top: 50%; left: 50%; width: 128%; max-width: none; height: auto; transform: translate(-50%, -50%) rotateX(74deg); filter: drop-shadow(0 2px 1px #000a); }
.off-count { position: absolute; left: -30%; width: 160%; bottom: -5%; color: #a8adc3; font-size: clamp(6px, .7vw, 11px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bearing-checker { position: fixed; height: auto; max-width: none; z-index: 20; pointer-events: none; transform-origin: center; }
#your-turn { position: absolute; top: 44%; left: 22%; right: 22%; text-align: center; font-size: clamp(13px, 2.5vw, 30px); font-weight: bold; color: #f1eaff; background: #10121ed9; border: 1px solid #b5a0ff; border-radius: 8px; padding: 8px; pointer-events: none; }
.tower-panel { padding: 12px; background: linear-gradient(145deg, #161927, #0f111c); border: 1px solid #33394e; border-radius: 16px; box-shadow: 0 14px 38px #0003; }
.tower-panel h3 { font-size: .65rem; color: #9ea6c0; font-weight: 500; letter-spacing: .06em; text-align: center; margin: 2px 0 12px; }
#dice-tower { position: relative; width: 100%; aspect-ratio: 320 / 850; border: 2px solid #565e79; border-radius: 12px 12px 20px 20px; background: linear-gradient(90deg, #252a40, #0d101c 9%, #101321 50%, #0d101c 91%, #252a40); overflow: hidden; box-shadow: inset 0 0 20px #0008; }
#dice-tower::before, #dice-tower::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2%; background: linear-gradient(90deg, #626c87, #2d344b); z-index: 2; pointer-events: none; }
#dice-tower::before { left: 1.4%; } #dice-tower::after { right: 1.4%; }
#roll-dice, #roll-dice:hover { display: flex; justify-content: center; gap: 12%; position: absolute; top: 1%; left: 7%; right: 7%; height: 8%; padding: 0; min-height: 0; background: transparent; border: 0; box-shadow: none; z-index: 3; }
.ready-die { display: block; position: relative; width: 22%; aspect-ratio: 1; filter: drop-shadow(0 0 7px #bca6ff60); }
#roll-dice:not(:disabled):hover .ready-die { filter: brightness(1.25) drop-shadow(0 0 12px #bdc8ff90); }
#roll-dice:disabled { opacity: .7; cursor: default; }
.dice-face { display: block; position: absolute; width: 133.333%; height: 133.333%; max-width: none; left: -16.666%; top: -16.666%; object-fit: contain; pointer-events: none; }
.tower-baffles { position: absolute; inset: 0; pointer-events: none; }
.tower-baffles i { position: absolute; display: block; background: linear-gradient(#9ba6c0, #525d78 45%, #283247); border-radius: 2px; box-shadow: 0 3px 0 #06080e, 0 -1px 0 #b8c1d04a; }
.tower-baffles i::before { content: ''; position: absolute; left: 1%; top: -70%; width: 3%; height: 170%; background: #7a86a4; border-radius: 2px; }
.tower-baffles i:nth-child(even)::before { left: auto; right: 1%; }
.tower-floor { position: absolute; bottom: 1.7%; left: 3%; right: 3%; height: 8%; border-bottom: 5px solid #66728f; border-radius: 0 0 12px 12px; background: linear-gradient(transparent, #8798c71c); }
#falling-dice, #dice-results { position: absolute; inset: 0; pointer-events: none; }
.tower-die, .result-die { position: absolute; width: 16.25%; aspect-ratio: 1; }
.tower-die { filter: drop-shadow(0 4px 2px #000a); }
.result-die, .result-die:hover { display: block; padding: 0; min-height: 0; border: 0; background: transparent; box-shadow: none; pointer-events: auto; }
.result-die:not(:disabled):hover, .result-die[aria-pressed="true"] { filter: brightness(1.2) drop-shadow(0 0 5px #d2c4ff); }
.result-die:focus-visible { outline: 1px solid #d2c4ff; outline-offset: 4px; }
.result-die:disabled { opacity: 1; cursor: default; }
.result-die.used { opacity: .32; }
.game-actions { display: flex; gap: 12px; margin-top: 20px; }
.game-actions button { min-height: 42px; padding: 10px 15px; font-size: .8rem; border-radius: 8px; }
.game-actions .resign-button { margin-left: auto; color: #c4929e; border-color: #60424f; }
.game-actions .resign-button:hover { color: #e3b3bd; border-color: #946675; background: #38212b55; }
.game-result { color: #d4c7ee; background: #b5a0ff0d; border: 1px solid #655777; border-radius: 10px; padding: 12px 16px; font-size: .85rem; margin: 18px 0 0; }
body:has(#game-screen:not([hidden])) #message:not(:empty) { position: fixed; z-index: 10; top: 16px; left: 50%; transform: translateX(-50%); width: min(540px, calc(100% - 32px)); box-shadow: 0 8px 30px #0008; }
@media (max-width: 850px) { .game-layout { grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; }  .game-players { grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); gap: 10px; } .game-player { padding: 10px; gap: 6px; } .game-player > img { width: 28px; height: 28px; } .game-player strong { font-size: .8rem; }  }
@media (max-width: 680px) { .game-layout { grid-template-columns: 1fr; } .tower-panel { width: min(260px, 100%); justify-self: end; } .game-players { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .match-center { grid-column: 1 / -1; grid-row: 2; width: min(320px, 100%); justify-self: center; } .game-player { gap: 6px; padding: 10px 8px; } .game-player > img { width: 26px; height: 26px; } .game-player strong { font-size: .8rem; }  .bar-place { font-size: 6px; } }
@media (prefers-reduced-motion: reduce) { .board-checker { transition: none; } }