.checkers-root,.checkers-page{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}.checkers-page{--uno-bg:#111918;--uno-surface:#192624;--uno-surface-2:#223431;--uno-ink:#f7f0df;--uno-muted:#aebdb8;--uno-border:#35504b;--checkers-accent:#e0ad58;--checkers-teal:#2d8175;min-height:100dvh;color:var(--uno-ink);background-color:var(--uno-bg);background-image:var(--game-texture)}@supports(overflow:clip){.checkers-root,.checkers-page{overflow-x:clip}}
.checkers-page [hidden]{display:none!important}.checkers-shell{width:min(1180px,calc(100% - 40px));margin:auto;padding:16px 0 40px}.game-header{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:64px;border-bottom:1px solid var(--uno-border)}.game-header .game-back{color:var(--uno-muted)}.game-brand{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:baseline;gap:9px;color:var(--uno-ink);text-decoration:none}.game-brand strong{font:italic 1.65rem/1 var(--font-display);letter-spacing:-.06em}.game-brand small{color:var(--uno-muted);font-size:.7rem}.game-lobby{padding:48px 0}.game-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.62fr);align-items:center;gap:48px;padding-bottom:40px;border-bottom:1px solid var(--uno-border)}.game-hero__copy{max-width:650px}.game-hero .eyebrow,.section-kicker{color:var(--checkers-accent)}.game-hero h1{margin:0;font:italic clamp(3.1rem,6vw,5.7rem)/.88 var(--font-display);letter-spacing:-.06em;text-transform:uppercase}.game-hero h1+p{max-width:590px;margin:20px 0 0;color:var(--uno-muted);font-size:1.05rem;line-height:1.55}.game-facts span:before{background:var(--checkers-accent)}.lobby-layout{grid-template-columns:minmax(280px,.72fr) minmax(460px,1.28fr);gap:54px;padding-top:40px}.lobby-entry h2,.rooms-section h2{font-family:var(--font-display);font-weight:400}.lobby-entry{padding-right:54px;border-right:1px solid var(--uno-border)}.checkers-page .primary{min-height:48px;border:1px solid var(--checkers-accent);border-radius:var(--radius-sm);background:var(--checkers-accent);color:#1b211c;font-weight:800}.checkers-page .secondary{min-height:44px;border:1px solid #58736e;border-radius:var(--radius-sm);background:transparent;color:var(--uno-ink);font-weight:700}.checkers-page input{border-color:var(--uno-border);background:#101a18;color:var(--uno-ink)}.room-list{border-color:var(--uno-border)}.room-row{border-color:var(--uno-border)}.room-row>button,.empty button{border-color:var(--checkers-accent);color:var(--checkers-accent)}.checkers-page dialog{border-color:var(--uno-border);border-radius:var(--radius-lg);background:var(--uno-surface);color:var(--uno-ink)}.checkers-page dialog form{padding:28px}.checkers-page dialog .primary{width:100%}.lobby-footer{margin-top:0;padding:22px 0 2px;border-top:1px solid var(--uno-border);display:flex;justify-content:space-between;color:var(--uno-muted);font-size:.78rem}.lobby-footer a{color:inherit}
.checkers-hero-art{position:relative;height:260px;perspective:800px;animation:checkers-enter .65s var(--ease-spring) both}.mini-board{position:absolute;right:22px;top:18px;display:grid;grid-template-columns:repeat(8,1fr);width:242px;aspect-ratio:1;padding:10px;border:8px solid #c9954d;border-radius:12px;background:#d8a75e;box-shadow:8px 11px 0 #79532c,20px 27px 35px rgba(0,0,0,.32);transform:rotate(6deg) rotateX(8deg);animation:board-float 5s ease-in-out infinite}.mini-board i{position:relative;background:#e9dbc0}.mini-board i:nth-child(16n+2),.mini-board i:nth-child(16n+4),.mini-board i:nth-child(16n+6),.mini-board i:nth-child(16n+8),.mini-board i:nth-child(16n+9),.mini-board i:nth-child(16n+11),.mini-board i:nth-child(16n+13),.mini-board i:nth-child(16n+15){background:#34685f}.mini-board b{position:absolute;inset:12%;z-index:2;border:3px solid rgba(255,255,255,.28);border-radius:50%;box-shadow:0 4px 0 rgba(0,0,0,.3)}.mini-board b.dark{background:#24302f}.mini-board b.light{background:#f2d49c}.hero-piece{position:absolute;z-index:3;display:grid;place-items:center;width:72px;height:72px;border:7px double rgba(255,255,255,.3);border-radius:50%;box-shadow:0 9px 0 rgba(0,0,0,.28),10px 17px 20px rgba(0,0,0,.22);font:2rem var(--font-display)}.hero-piece--light{right:0;bottom:9px;background:#e0ad58;color:#56381e;animation:piece-float 4.2s ease-in-out .4s infinite}.hero-piece--dark{left:20px;top:13px;width:54px;height:54px;background:#263735;animation:piece-float 4.8s ease-in-out infinite}
.checkers-game{padding-top:18px}.checkers-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;margin-bottom:14px}.checkers-topbar>div:nth-child(2){display:grid;text-align:center}.checkers-topbar span{color:var(--uno-muted);font-size:.76rem}.checkers-live{justify-self:end;display:flex;align-items:center;gap:8px}.live-audience{padding:9px 12px;border:1px solid var(--uno-border);border-radius:99px}.checkers-table{display:grid;grid-template-columns:210px minmax(420px,640px) 220px;align-items:start;justify-content:center;gap:18px}.checkers-table>aside,.checkers-table>main{border:1px solid var(--uno-border);border-radius:18px;background:var(--uno-surface)}.checkers-table>main{padding:14px}.checkers-players,.rules-card{padding:16px}.player-panel{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;padding:12px;border-radius:12px;background:var(--uno-surface-2)}.player-panel+*{margin-top:10px}.player-panel.active{outline:2px solid var(--checkers-accent)}.player-panel small{display:block;margin-top:3px;color:var(--uno-muted);font-size:.72rem}.player-piece{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:1.8rem}.player-piece.white{color:#efd7a4}.player-piece.black{color:#101817}.checkers-board{display:grid;grid-template-columns:repeat(8,1fr);overflow:hidden;width:100%;aspect-ratio:1;border:10px solid #bd8749;border-radius:10px;background:#bd8749;box-shadow:0 16px 34px rgba(0,0,0,.3)}.board-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-radius:0}.board-cell.light{background:#e8d7b8}.board-cell.dark{background:#356a61}.board-cell.movable:after{content:"";position:absolute;width:18%;height:18%;border-radius:50%;background:var(--checkers-accent);box-shadow:0 0 0 5px rgba(224,173,88,.18)}.board-cell.destination:after{content:"";position:absolute;width:32%;height:32%;border:4px solid #fff0bb;border-radius:50%;background:rgba(255,255,255,.16)}.board-cell.selected{box-shadow:inset 0 0 0 5px var(--checkers-accent)}.checker{position:relative;z-index:2;display:grid;place-items:center;width:72%;height:72%;border:6px double rgba(255,255,255,.24);border-radius:50%;box-shadow:0 5px 0 rgba(0,0,0,.32),0 8px 11px rgba(0,0,0,.22);transition:transform .18s var(--ease-spring)}.board-cell:hover .checker{transform:translateY(-3px)}.checker.white{background:radial-gradient(circle at 35% 28%,#fff3d2,#d9a955 68%);color:#65411f}.checker.black{background:radial-gradient(circle at 35% 28%,#526965,#172321 68%);color:#f2d28d}.checker.king{box-shadow:0 5px 0 rgba(0,0,0,.32),0 0 0 3px #f4cf72,0 9px 15px rgba(0,0,0,.3)}.checker span{font-size:clamp(.8rem,2.6vw,1.65rem)}.move-hint{min-height:24px;margin:14px 0 0;text-align:center;color:var(--uno-muted)}.rules-card h2{margin:4px 0 12px;font-family:var(--font-display)}.rules-card p{color:var(--uno-muted);font-size:.86rem;line-height:1.5}.rules-card button{width:100%;margin-top:10px}
@keyframes checkers-enter{from{opacity:0;transform:translateX(35px) rotate(4deg)}to{opacity:1;transform:none}}@keyframes board-float{0%,100%{transform:rotate(6deg) rotateX(8deg) translateY(0)}50%{transform:rotate(4deg) rotateX(5deg) translateY(-6px)}}@keyframes piece-float{0%,100%{translate:0 0}50%{translate:-4px -7px}}
@media(max-width:980px){.checkers-table{grid-template-columns:160px minmax(380px,1fr)}.rules-card{grid-column:1/-1}.rules-card button{width:auto;margin-right:8px}}
@media(max-width:760px){.checkers-shell{width:min(100% - 24px,620px);padding-top:8px}.game-header{min-height:58px}.game-brand small{display:none}.game-lobby{padding:32px 0}.game-hero{grid-template-columns:1fr;gap:18px;padding-bottom:30px;min-width:0}.game-hero h1{font-size:clamp(2.7rem,13vw,4.2rem)}.checkers-hero-art{height:238px;min-width:0;transform:none;transform-origin:50% 0}.mini-board{left:50%;right:auto;translate:-50% 0;scale:.78;transform-origin:50% 0}.hero-piece{scale:.78}.hero-piece--dark{left:max(8px,12vw)}.hero-piece--light{right:max(0px,7vw);bottom:12px}.lobby-layout{grid-template-columns:1fr;gap:34px;padding-top:30px}.lobby-entry{padding:0 0 34px;border-right:0;border-bottom:1px solid var(--uno-border)}.checkers-table{grid-template-columns:1fr}.checkers-players{display:grid;grid-template-columns:1fr 1fr;gap:8px}.player-panel+*{margin-top:0}.rules-card{grid-column:auto}.checkers-topbar{grid-template-columns:auto 1fr}.checkers-live{grid-column:1/-1;justify-self:stretch;justify-content:space-between}.lobby-footer{flex-direction:column;gap:8px}.sheet-dialog{width:100%;max-width:none;margin:auto 0 0}.checker{border-width:4px}}
@media(max-width:400px){.checkers-shell{width:calc(100% - 16px)}.checkers-hero-art{height:222px}.mini-board{scale:.72}.hero-piece{scale:.7}.checkers-board{border-width:6px}.checkers-players{grid-template-columns:1fr}.checker{width:76%;height:76%;border-width:3px}}
@media(prefers-reduced-motion:reduce){.checkers-hero-art,.mini-board,.hero-piece{animation:none}}

.checkers-page.is-in-room .game-header{border-bottom-color:transparent}.checkers-header-controls{position:relative;z-index:2;margin-left:auto;display:flex;align-items:center;gap:8px}.checkers-header-controls[hidden]{display:none!important}.checkers-header-controls .live-audience{display:flex;align-items:center;justify-content:center;gap:6px;min-width:54px;height:34px;margin:0;padding:0 11px;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:#222;color:#f5efe4!important;font-size:.78rem;font-weight:800;box-shadow:0 5px 14px rgba(0,0,0,.16)}.checkers-header-controls .live-audience svg{display:block;width:16px;height:16px;fill:#ff646f}.checkers-header-controls .live-audience b{font-variant-numeric:tabular-nums}.checkers-header-controls .live-audience.has-viewers{border-color:rgba(61,224,125,.72);background:rgba(19,91,51,.72);color:#eafff1!important;box-shadow:0 0 0 1px rgba(61,224,125,.12),0 0 16px rgba(61,224,125,.22)}.checkers-header-controls .header-leave{min-height:36px;height:36px;padding:0 12px;border-radius:18px}.checkers-game{padding-top:14px}.checkers-sidebar{overflow:hidden}.checkers-room-heading{display:grid;gap:4px;padding:16px;border-bottom:1px solid var(--uno-border)}.checkers-room-heading strong{font-family:var(--font-display);font-size:1.12rem}.checkers-room-heading span{color:var(--uno-muted);font-size:.76rem;line-height:1.35}.checkers-players{padding-top:12px}
.checkers-room-heading>strong{white-space:nowrap}.checkers-invite-row{padding:11px 14px 0}.checkers-invite-row #copyInvite{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:32px;padding:0 10px;border:1px solid color-mix(in srgb,var(--checkers-accent) 44%,transparent);border-radius:9px;background:color-mix(in srgb,var(--checkers-accent) 8%,transparent);color:var(--checkers-accent);font-size:.68rem;font-weight:800;line-height:1;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s,transform .18s}.checkers-invite-row #copyInvite:before{content:"↗";font-size:.85rem}.checkers-invite-row #copyInvite:hover{border-color:var(--checkers-accent);background:color-mix(in srgb,var(--checkers-accent) 16%,transparent);color:#ffe09a;transform:translateY(-1px)}.checkers-invite-row #copyInvite:focus-visible{outline:2px solid var(--checkers-accent);outline-offset:3px}
@media(max-width:760px){.checkers-header-controls{gap:6px}.checkers-header-controls .live-audience{min-width:48px;height:32px;padding-inline:9px}.checkers-header-controls .header-leave{width:36px;height:36px;padding:0;font-size:0}.checkers-header-controls .header-leave:before{content:"↩";font-size:1.05rem}.checkers-sidebar{order:1}.checkers-table>main{order:2}.rules-card{order:3}}

.checkers-table{min-width:0}.checkers-table>main{min-width:0;width:100%;max-width:668px;justify-self:center}.checkers-board{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;height:auto;aspect-ratio:1/1;contain:layout paint}.board-cell{width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;line-height:0;aspect-ratio:1/1}.checker{width:72%;height:auto;aspect-ratio:1/1;flex:none}.board-cell.movable:after,.board-cell.destination:after{aspect-ratio:1/1}
.board-cell.must-capture:after{display:none}.board-cell.must-capture .checker{animation:capture-piece 1s ease-in-out infinite}@keyframes capture-piece{0%,100%{transform:translateY(0);filter:brightness(1)}50%{transform:translateY(-4px) scale(1.06);filter:brightness(1.18)}}
@media(prefers-reduced-motion:reduce){.board-cell.must-capture .checker{animation:none}}
.checkers-table>main{position:relative}.capture-notice{position:absolute;z-index:12;left:50%;top:46%;display:grid;justify-items:center;gap:4px;width:max-content;max-width:calc(100% - 60px);padding:13px 20px;border:1px solid rgba(255,229,157,.5);border-radius:16px;background:rgba(18,34,31,.9);color:#fff8e8;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-42%) scale(.96);box-shadow:0 14px 38px rgba(0,0,0,.3);backdrop-filter:blur(10px);transition:opacity .18s ease,transform .24s var(--ease-spring)}.capture-notice[hidden]{display:none}.capture-notice.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.capture-notice strong{color:#f2cd7b;font-family:var(--font-display);font-size:1rem;letter-spacing:.02em}.capture-notice span{color:#d6dfda;font-size:.78rem;line-height:1.35}
@media(max-width:480px){.capture-notice{max-width:calc(100% - 34px);padding:11px 15px}.capture-notice strong{font-size:.9rem}.capture-notice span{font-size:.72rem}}

.checker{isolation:isolate;border:2px solid rgba(255,255,255,.3);box-shadow:inset 0 2px 3px rgba(255,255,255,.32),inset 0 -5px 7px rgba(0,0,0,.22),0 4px 0 rgba(0,0,0,.32),0 8px 12px rgba(0,0,0,.24)}.checker:before{content:"";position:absolute;z-index:-1;inset:12%;border:2px solid rgba(255,255,255,.24);border-radius:50%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.1)}.checker:after{content:"";position:absolute;z-index:-1;left:18%;top:12%;width:36%;height:20%;border-radius:50%;background:rgba(255,255,255,.22);filter:blur(1px);transform:rotate(-24deg)}.checker.white{background:radial-gradient(circle at 36% 27%,#fff2c8 0 12%,#e7bd6b 42%,#b87832 100%);border-color:#f8d993;color:#5a361b}.checker.black{background:radial-gradient(circle at 36% 27%,#78918c 0 8%,#344b47 43%,#101b1a 100%);border-color:#607772;color:#f0c76c}.checker.king{border-color:#f5d16f;box-shadow:inset 0 2px 3px rgba(255,255,255,.35),inset 0 -5px 7px rgba(0,0,0,.24),0 0 0 2px rgba(245,209,111,.5),0 4px 0 rgba(0,0,0,.34),0 8px 14px rgba(0,0,0,.28)}.checker.king span{display:block;width:48%;aspect-ratio:1.25;background:linear-gradient(145deg,#fff1a6,#d99a28 72%);clip-path:polygon(0 18%,25% 48%,50% 5%,75% 48%,100% 18%,88% 86%,12% 86%);filter:drop-shadow(0 2px 1px rgba(71,42,8,.48))}.checker.king span:after{content:"";position:absolute}
.game-result{position:absolute;z-index:20;inset:14px 14px 52px;display:grid;place-content:center;justify-items:center;padding:28px;border-radius:10px;background:radial-gradient(circle at 50% 38%,rgba(47,97,83,.88),rgba(10,24,22,.96));text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);backdrop-filter:blur(5px);animation:result-in .5s var(--ease-spring) both}.game-result[hidden]{display:none}.game-result i{position:relative;width:72px;height:60px;margin-bottom:14px;background:linear-gradient(145deg,#fff0a2,#d99a29);clip-path:polygon(0 12%,24% 49%,50% 0,76% 49%,100% 12%,87% 88%,13% 88%);filter:drop-shadow(0 7px 8px rgba(0,0,0,.34))}.game-result p{margin:0 0 6px;color:#b9c9c3;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.game-result strong{color:#fff6df;font:clamp(2rem,5vw,3.4rem)/.9 var(--font-display);letter-spacing:-.04em}.game-result span{margin-top:12px;color:#cbd8d3;font-size:.9rem}.game-result.is-winner{background:radial-gradient(circle at 50% 38%,rgba(113,85,31,.83),rgba(17,31,27,.96))}.game-result.is-winner:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 20%,#f4cf6d 0 3px,transparent 4px),radial-gradient(circle at 80% 26%,#6fc3a7 0 3px,transparent 4px),radial-gradient(circle at 25% 76%,#e98d73 0 3px,transparent 4px),radial-gradient(circle at 73% 70%,#f4cf6d 0 3px,transparent 4px);opacity:.8}.game-result.is-draw i{display:grid;place-items:center;border:3px solid #e5c879;border-radius:50%;background:#1b302c;clip-path:none}.game-result.is-draw i:after{content:"½";color:#f4d989;font:2rem/1 var(--font-display)}@keyframes result-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.game-result{animation:none}}

.checkers-header-controls .sound-toggle{position:static;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--uno-border);border-radius:50%;background:transparent;color:var(--uno-ink);opacity:1;box-shadow:none}.checkers-header-controls .sound-toggle[aria-pressed=true]{border-color:var(--checkers-accent);box-shadow:0 0 15px rgba(224,173,88,.16)}.checkers-header-controls .sound-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.checkers-time-field{padding:0;border:0}.checkers-time-field legend{margin-bottom:8px;font-weight:700}.checkers-time-options{display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden;border:1px solid var(--uno-border);border-radius:10px}.checkers-time-options label{position:relative;min-width:0}.checkers-time-options input{position:absolute;opacity:0;pointer-events:none}.checkers-time-options span{display:grid;place-items:center;min-height:44px;border-left:1px solid var(--uno-border);color:var(--uno-muted);font-size:.86rem;font-weight:800;cursor:pointer}.checkers-time-options label:first-child span{border-left:0}.checkers-time-options input:checked+span{background:var(--checkers-accent);color:#17201c}.checkers-time-options input:focus-visible+span{outline:3px solid rgba(224,173,88,.35);outline-offset:-3px}.checkers-room-heading>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.checkers-room-heading #gameStatus{min-width:0}.checkers-room-heading #turnTimer{flex:0 0 auto;min-width:43px;padding:6px 8px;border-radius:8px;background:var(--checkers-accent);color:#17201c;font:800 .85rem/1 var(--font);text-align:center}.checkers-room-heading #turnTimer.is-low{background:#dc6255;color:#fff;animation:timer-pulse .8s ease-in-out infinite}@keyframes timer-pulse{50%{transform:scale(1.07)}}
.draw-offer-button{width:100%;margin-top:9px}.draw-offer-button.is-pending{border-color:var(--checkers-accent);color:var(--checkers-accent)}.draw-offer-notice{position:absolute;z-index:8;left:50%;top:50%;width:min(360px,calc(100% - 32px));padding:22px;translate:-50% -50%;border:1px solid color-mix(in srgb,var(--checkers-accent) 70%,white 10%);border-radius:18px;background:linear-gradient(145deg,rgba(31,45,40,.97),rgba(13,25,21,.98));box-shadow:0 22px 55px rgba(0,0,0,.48);text-align:center;backdrop-filter:blur(8px)}.draw-offer-notice small{display:block;margin-bottom:7px;color:var(--checkers-accent);font-size:.66rem;font-weight:900;letter-spacing:.16em}.draw-offer-notice>strong{display:block;color:var(--uno-ink);font:1.25rem/1.2 var(--font-display)}.draw-offer-notice>span{display:block;margin:10px 0 18px;color:var(--uno-muted);font-size:.82rem}.draw-offer-notice>div{display:grid;grid-template-columns:1fr 1.25fr;gap:8px}.draw-offer-notice button{min-height:42px!important}.checkers-table>main{position:relative}
.checkers-level-options{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border:1px solid var(--uno-border);border-radius:10px}.checkers-level-options label{position:relative}.checkers-level-options input{position:absolute;opacity:0;pointer-events:none}.checkers-level-options span{display:grid;place-items:center;min-height:44px;border-left:1px solid var(--uno-border);color:var(--uno-muted);font-size:.84rem;font-weight:800;cursor:pointer}.checkers-level-options label:first-child span{border-left:0}.checkers-level-options input:checked+span{background:var(--checkers-accent);color:#17201c}.checkers-level-options input:focus-visible+span{outline:3px solid rgba(224,173,88,.35);outline-offset:-3px}.checkers-level-options+small{display:block;margin-top:7px;color:var(--uno-muted);font-size:.74rem}
@media(max-width:430px){.checkers-time-options{grid-template-columns:repeat(3,1fr)}.checkers-time-options label:nth-child(4) span{border-left:0;border-top:1px solid var(--uno-border)}.checkers-time-options label:nth-child(n+4) span{border-top:1px solid var(--uno-border)}}
@media(prefers-reduced-motion:reduce){.checkers-room-heading #turnTimer.is-low{animation:none}}
.checkers-page .room-row>.room-action,.checkers-page .empty button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 15px;border:1px solid var(--checkers-accent);border-radius:9px;background:transparent;color:var(--checkers-accent);font-weight:600;line-height:1;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}.checkers-page .room-row>.room-action:hover,.checkers-page .empty button:hover{background:var(--checkers-accent);color:#1b211c;transform:translateY(-1px)}.checkers-page .room-row>.room-action:focus-visible,.checkers-page .empty button:focus-visible{outline:3px solid rgba(224,173,88,.34);outline-offset:2px}

/* Mantém o formulário de criação contido após a inclusão do nível do bot. */
.checkers-page dialog{max-height:calc(100dvh - 20px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.checkers-page dialog form{min-width:0}
.checkers-time-options input,.checkers-level-options input{width:1px;height:1px;padding:0;border:0;clip-path:inset(50%)}
@media(max-width:760px){.checkers-page .sheet-dialog{width:calc(100% - 8px);max-width:calc(100% - 8px);margin:auto 4px 0}.checkers-page .sheet-dialog form{padding:24px 20px calc(22px + env(safe-area-inset-bottom))}}

/* Cinco tempos: 3 opções acima e 2 opções simétricas abaixo. */
@media(max-width:430px){.checkers-time-options{grid-template-columns:repeat(6,minmax(0,1fr))}.checkers-time-options label:nth-child(-n+3){grid-column:span 2}.checkers-time-options label:nth-child(n+4){grid-column:span 3}.checkers-time-options label:nth-child(4) span{border-left:0}.checkers-time-options label:nth-child(n+4) span{border-top:1px solid var(--uno-border)}}

@media(max-width:760px){.checkers-page dialog.sheet-dialog{position:fixed;inset:auto 0 0 0;width:auto;min-width:0;max-width:none;max-height:calc(100dvh - 8px);margin:0;overflow-x:hidden;overflow-y:auto;border-inline:0}.checkers-page dialog.sheet-dialog form{width:100%;min-width:0;max-width:100%;overflow:hidden}.checkers-page dialog.sheet-dialog fieldset,.checkers-page dialog.sheet-dialog label,.checkers-page dialog.sheet-dialog input{min-width:0;max-width:100%}}

.checkers-player-avatar{position:relative;display:block;width:40px;height:40px}.checkers-player-avatar img{width:40px;height:40px;border:2px solid #62847d;border-radius:50%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}.checkers-player-avatar i{position:absolute;z-index:4;top:1px;right:1px;width:13px;height:13px;border:2px solid var(--uno-surface-2);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.35)}.checkers-player-avatar i.white{background:#efd7a4}.checkers-player-avatar i.black{background:#172321}
.checkers-player-avatar{width:48px;height:48px}.checkers-player-avatar>img:first-child{width:40px;height:40px}.player-panel{grid-template-columns:48px minmax(0,1fr);min-height:82px}.player-panel>div{min-width:0}.player-panel strong{display:block;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.player-panel small{overflow-wrap:anywhere}

/* Chat da sala */
.rules-card{padding:0;overflow:hidden}.checkers-rules{padding:16px}.checkers-chat{border-top:1px solid var(--uno-border)}.checkers-chat__toggle{display:flex;align-items:center;width:100%;min-height:46px;padding:0 14px;border:0;background:transparent;color:var(--uno-ink);font:800 .78rem/1 var(--font);text-align:left;cursor:pointer}.checkers-chat__toggle span{flex:1}.checkers-chat__toggle b{display:grid;place-items:center;min-width:19px;height:19px;margin-right:8px;padding:0 5px;border-radius:10px;background:var(--checkers-accent);color:#17201c;font-size:.65rem;font-variant-numeric:tabular-nums}.checkers-chat__toggle i{color:var(--checkers-accent);font:400 1.1rem/1 var(--font);font-style:normal}.checkers-chat__body{display:grid;grid-template-rows:minmax(118px,210px) auto;border-top:1px solid color-mix(in srgb,var(--uno-border) 65%,transparent)}.checkers-chat.is-collapsed .checkers-chat__body{display:none}.checkers-chat__messages{min-width:0;padding:10px 11px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#56716b transparent}.checkers-chat__empty{display:grid;place-items:center;height:100%;margin:0!important;color:var(--uno-muted)!important;text-align:center}.checkers-chat__message{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;gap:8px}.checkers-chat__message+.checkers-chat__message,.checkers-chat__system+.checkers-chat__message,.checkers-chat__message+.checkers-chat__system{margin-top:10px}.checkers-chat__avatar{position:relative;display:block;width:30px;height:30px}.checkers-chat__avatar>img:first-child{display:block;width:30px;height:30px;border:1px solid #667a76;border-radius:50%;object-fit:cover}.checkers-chat__avatar.is-premium-avatar>img:first-child{border-color:var(--chat-ring,var(--checkers-accent));box-shadow:0 0 0 1px color-mix(in srgb,var(--chat-ring,var(--checkers-accent)) 45%,transparent)}.checkers-chat__avatar .game-avatar-frame{position:absolute;z-index:2;inset:-3px;width:36px;height:36px;max-width:none;object-fit:contain;border:0;border-radius:0;pointer-events:none}.checkers-chat__message>div{min-width:0}.checkers-chat__message>div>span{display:flex;align-items:baseline;gap:5px;min-width:0}.checkers-chat__message strong{min-width:0;overflow:hidden;color:var(--uno-ink);font-size:.7rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.checkers-chat__message time{flex:none;color:#82958f;font-size:.58rem;font-variant-numeric:tabular-nums}.checkers-chat__message p{margin:3px 0 0;color:#d3ddd9;font-size:.7rem;line-height:1.35;overflow-wrap:anywhere}.checkers-chat__system{padding:6px 8px;border-radius:7px;background:rgba(224,173,88,.08);color:#c9d5d1;font-size:.65rem;line-height:1.35;text-align:center}.checkers-chat__form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:9px;border-top:1px solid var(--uno-border)}.checkers-chat__form input{width:100%;min-width:0;height:36px;padding:0 9px;border-radius:8px;font-size:.7rem}.rules-card .checkers-chat__form button{width:auto;min-height:36px;margin:0;padding:0 10px;border:1px solid var(--checkers-accent);border-radius:8px;background:var(--checkers-accent);color:#17201c;font-size:.68rem;font-weight:800}.checkers-chat__toggle:focus-visible,.checkers-chat__form button:focus-visible{outline:2px solid var(--checkers-accent);outline-offset:-3px}
@media(max-width:980px) and (min-width:761px){.rules-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr)}.checkers-chat{border-top:0;border-left:1px solid var(--uno-border)}.checkers-chat__body{grid-template-rows:minmax(120px,180px) auto}.rules-card .checkers-rules button{width:auto}}
@media(max-width:760px){.rules-card{order:3}.checkers-chat__body{grid-template-rows:minmax(150px,230px) auto}.checkers-chat__message strong{font-size:.76rem}.checkers-chat__message p{font-size:.75rem}.checkers-chat__form input{font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.checkers-chat *{scroll-behavior:auto!important}}

/* Mensagens rápidas posicionadas sobre as peças. */
.rules-card{display:block}
.checkers-board-wrap{position:relative;width:100%}.checkers-chat-bubbles{position:absolute;z-index:30;inset:10px;overflow:hidden;pointer-events:none}.checkers-chat-bubble{position:absolute;left:50%;display:grid;gap:4px;width:max-content;max-width:min(78%,390px);padding:12px 16px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(13,25,23,.94);color:#f7f0df;box-shadow:0 8px 22px rgba(0,0,0,.34);opacity:0;transform:translate(-50%,6px) scale(.96);transition:opacity .18s ease,transform .18s ease;pointer-events:auto;cursor:pointer;backdrop-filter:blur(8px)}.checkers-chat-bubble.is-visible{opacity:1;transform:translate(-50%,0) scale(1)}.checkers-chat-bubble.is-top{top:10%}.checkers-chat-bubble.is-bottom{bottom:10%}.checkers-chat-bubble:after{content:"";position:absolute;left:50%;width:11px;height:11px;background:inherit;border-right:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);transform:translateX(-50%) rotate(45deg)}.checkers-chat-bubble.is-top:after{top:calc(100% - 5px)}.checkers-chat-bubble.is-bottom:after{bottom:calc(100% - 5px);transform:translateX(-50%) rotate(225deg)}.checkers-chat-bubble strong{overflow:hidden;font-size:.78rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.checkers-chat-bubble span{font-size:.9rem;line-height:1.4;overflow-wrap:anywhere}.checkers-board-chat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}.checkers-board-chat input{width:100%;min-width:0;height:42px;padding:0 12px;border-radius:9px;font-size:.82rem}.checkers-board-chat button{min-height:42px;padding:0 17px;border:1px solid var(--checkers-accent);border-radius:9px;background:var(--checkers-accent);color:#17201c;font-size:.78rem;font-weight:800}.checkers-board-chat button:focus-visible{outline:3px solid rgba(224,173,88,.35);outline-offset:2px}
@media(max-width:480px){.checkers-chat-bubbles{inset:6px}.checkers-chat-bubble{max-width:86%;padding:10px 13px}.checkers-chat-bubble.is-top{top:8%}.checkers-chat-bubble.is-bottom{bottom:8%}.checkers-chat-bubble strong{font-size:.74rem}.checkers-chat-bubble span{font-size:.85rem}.checkers-board-chat{gap:6px}.checkers-board-chat input{height:40px}.checkers-board-chat button{min-height:40px;padding-inline:13px}}
@media(prefers-reduced-motion:reduce){.checkers-chat-bubble{transition:none}}

/* O resultado cobre somente o quadrado do tabuleiro, sem avançar sobre o chat. */
.checkers-table>main>.game-result{inset:14px 14px auto;height:auto;aspect-ratio:1/1}