@import url('../nine-mens-morris/style.css?v=20260928-2');
.online-shell{width:min(100%,540px)}.topbar h1{font-size:31px;letter-spacing:-1px}.game-identity:has(.account-name:not([hidden])) .online-kicker{display:none}.room-view{display:flex;min-height:0;flex:1;flex-direction:column}.players{margin-top:0}.players article{min-height:72px}.player-heading{font-size:10px}.turn-panel{padding:18px 5px 8px}
.mini-piece{display:inline-block;width:22px;height:22px;border-radius:50%;box-shadow:0 2px 0 #0008,inset 1px 1px 2px #fff5}.mini-piece.light{background:repeating-radial-gradient(circle,#dcbf91 0 2px,#b98957 3px 4px)}.mini-piece.dark{background:repeating-radial-gradient(circle,#91624d 0 2px,#4b2e27 3px 4px)}.checkers-rules-field{display:grid;gap:7px;margin-top:14px}
.board-frame{width:min(100%,calc(100svh - 355px),500px);aspect-ratio:1;margin:4px auto 0;padding:clamp(6px,1.5vw,10px);border:1px solid #8a7138;border-radius:18px;background:linear-gradient(145deg,#342a16,#15130e 72%);box-shadow:0 20px 60px #000a,inset 0 1px #ffe5a53d}.board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;height:100%;overflow:hidden;border:1px solid #2e271b;border-radius:11px;background:#16130e;touch-action:none}.square{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;appearance:none;border:0;border-radius:0;padding:0}.light-square{background:linear-gradient(145deg,#d5cbb5,#a99f89)}.dark-square{background:linear-gradient(145deg,#4b3e27,#292116);box-shadow:inset 0 0 0 1px #8f774431}.dark-square:not(:disabled):hover{background:#655330}.dark-square:focus-visible{z-index:3;outline-offset:-4px}.dark-square:disabled{cursor:default}.piece{position:absolute;inset:12%;display:grid;place-items:center;border-radius:50%;opacity:0;transform:scale(.45);transition:transform .26s cubic-bezier(.22,1.35,.42,1),opacity .14s,filter .2s}.has-piece .piece{opacity:1;transform:scale(1)}.is-light .piece{border:1px solid #d1ad79;background:radial-gradient(circle at 50% 48%,transparent 0 14%,#9b744b66 15% 18%,transparent 19% 31%,#9b744b5c 32% 35%,transparent 36% 49%,#8a653f55 50% 54%,transparent 55%),linear-gradient(135deg,#f1ddb8 5%,#d7b98b 48%,#b38655 100%);box-shadow:0 3px 0 #8b653d,0 6px 7px #000b,inset 2px 2px 4px #fff8}.is-dark .piece{border:1px solid #835846;background:radial-gradient(circle at 50% 48%,transparent 0 14%,#d1a17b61 15% 18%,transparent 19% 31%,#d6aa8657 32% 35%,transparent 36% 49%,#d9ae8950 50% 54%,transparent 55%),linear-gradient(135deg,#8a604c 5%,#654137 48%,#38211d 100%);box-shadow:0 3px 0 #321b17,0 6px 7px #000c,inset 2px 2px 4px #d6a17a70}.piece i{display:none;color:#4b2d1d;font:700 clamp(13px,4vw,23px)/1 Georgia,serif}.is-dark .piece i{color:#f0d8aa}.is-king .piece i{display:block}.is-selectable .piece{filter:drop-shadow(0 0 7px #f3d88b)}.is-selected{box-shadow:inset 0 0 0 4px #f3d88b}.is-selected .piece{transform:scale(.88)}.is-target:after{content:"";position:absolute;width:28%;aspect-ratio:1;left:36%;top:36%;border:2px solid #fff4bf;border-radius:50%;background:#d9bc78;box-shadow:0 0 15px #f2d98baa;animation:target 1s ease-in-out infinite}.is-last{box-shadow:inset 0 0 0 2px #ead18d}.piece-counts{display:flex;align-items:center;justify-content:space-between;width:100%;padding:7px 6px 0;color:#bdb49f;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.piece-counts span{display:flex;align-items:center;gap:7px}.piece-counts .mini-piece{width:17px;height:17px}.piece-counts b{color:#f5f0e5;font-size:13px}.result-piece{display:grid;width:76px;height:76px;place-items:center;margin:0 auto 14px;border-radius:50%;background:linear-gradient(135deg,#f1ddb8,#b38655);box-shadow:0 5px 0 #704923}.result-piece.dark{background:linear-gradient(135deg,#8a604c,#38211d);box-shadow:0 5px 0 #21100d}.result-piece.draw{border-radius:20px;background:#11100d;box-shadow:inset 0 0 0 2px #d9bc7844}.result-piece span{color:#4b2d1d;font:700 36px Georgia,serif}.result-piece.dark span{color:#f0d8aa}.result-piece.draw span{color:#d9bc78}.rules h3{margin:20px 0 6px;color:#f0d99b}@keyframes target{50%{transform:scale(.72);opacity:.65}}
@media(max-width:375px){.topbar h1{font-size:27px}.turn-panel{padding-top:10px}.board-frame{width:min(100%,calc(100svh - 365px))}}
@media(min-width:700px) and (orientation:portrait){.online-shell{width:min(100%,800px);padding-inline:44px}.topbar h1{font-size:40px}.players{grid-template-columns:1fr 1fr}.board-frame{width:min(75vw,620px)}}
@media(min-width:900px) and (orientation:landscape){.online-shell{width:min(100%,980px)}.room-view{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:8px 28px}.players{grid-column:1;grid-template-columns:1fr}.turn-panel{grid-column:1}.room-rematch-panel{grid-column:1}.board-frame{grid-column:2;grid-row:1/4;width:min(75vh,610px)}.piece-counts{grid-column:2;grid-row:4}.ad-reservation{max-width:none}}
@media(prefers-reduced-motion:reduce){.piece{transition-duration:.01ms}.is-target:after{animation:none}}