@import url('../nine-mens-morris/style.css?v=20260928-2');

.online-shell{width:min(100%,560px)}
.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}
.mini-disc,.disc,.result-disc{display:block;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fffdf7,#e8e0d0 46%,#aaa08f 100%);box-shadow:inset 0 0 0 2px #fff7,0 4px 10px #0008}.mini-disc{width:22px;height:22px}.mini-disc.gold,.disc.gold,.result-disc.gold{background:radial-gradient(circle at 36% 30%,#fff1ad,#d5aa43 46%,#79570f 100%)}
.turn-panel{padding:24px 5px 8px}.column-controls{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:min(100%,520px);margin:12px auto 6px;padding:0 10px}.column-button{height:32px;border:1px solid #6d5931;border-radius:12px;background:#15130e;color:#e5c876;font:700 18px/1 system-ui;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}.column-button:hover:not(:disabled),.column-button:focus-visible{border-color:#e0bf67;background:#251e10}.column-button:active:not(:disabled){transform:translateY(2px)}.column-button:disabled{cursor:default;opacity:.34}
.board{position:relative;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:clamp(3px,1vw,7px);width:min(100%,520px);height:auto;aspect-ratio:7/6;margin:0 auto auto;padding:clamp(8px,2vw,14px);overflow:hidden;border:1px solid #6d5931;border-radius:22px;background:linear-gradient(145deg,#272116,#100f0d);box-shadow:0 22px 70px #000a,inset 0 1px #ffe5a51f;user-select:none}
.slot{position:relative;display:grid;min-width:0;min-height:0;place-items:center;border-radius:50%;background:radial-gradient(circle at 48% 44%,#080808 0 51%,#3f3522 54%,#15120d 66%);box-shadow:inset 0 4px 10px #000b}.disc{width:78%;height:78%;opacity:0;transform:scale(.72)}.slot.is-light .disc,.slot.is-gold .disc{opacity:1;transform:scale(1)}.slot.is-gold .disc{background:radial-gradient(circle at 36% 30%,#fff1ad,#d5aa43 46%,#79570f 100%)}.slot.last-move{outline:2px solid #e0bf67;outline-offset:-2px}.slot.winner{background:radial-gradient(circle at 48% 44%,#3b3019 0 51%,#e1c16f 54%,#44371f 66%)}.slot.disc-arrive .disc{animation:disc-arrive .38s cubic-bezier(.22,1.2,.42,1)}
.result-disc{width:70px;height:70px;margin:0 auto 14px;border:1px solid #6a5630}.result-disc.draw{border-radius:20px;background:#11100d;box-shadow:inset 0 0 0 2px #d9bc7844}.rules h3{margin:20px 0 6px;color:#f0d99b}
@keyframes disc-arrive{0%{transform:translateY(-160%) scale(.72);opacity:.35}100%{transform:translateY(0) scale(1);opacity:1}}
@media(max-width:375px){.topbar h1{font-size:25px}.turn-panel{padding-top:14px}.column-button{height:28px}.board{width:min(100%,calc((100svh - 385px)*7/6))}}
@media(min-width:700px) and (orientation:portrait){.online-shell{width:min(100%,820px);padding-inline:44px}.topbar h1{font-size:40px}.players{grid-template-columns:1fr 1fr}.board,.column-controls{width:min(80vw,650px)}}
@media(min-width:900px) and (orientation:landscape){.online-shell{width:min(100%,1040px)}.room-view{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:8px 28px}.players{grid-column:1;grid-template-columns:1fr}.turn-panel{grid-column:1}.room-rematch-panel{grid-column:1}.column-controls{grid-column:2;grid-row:1;width:min(74vh,650px);align-self:end}.board{grid-column:2;grid-row:2/4;width:min(74vh,650px)}.ad-reservation{max-width:none}}
@media(prefers-reduced-motion:reduce){.slot.disc-arrive .disc{animation:none}}