html{color-scheme:dark;background:#03121e}body{margin:0;color:#f6e8cb}*{box-sizing:border-box}#draughts-app{--dk-size:min(800px,calc(100dvh - 350px));font-family:var(--rosa-font-interface);min-height:100dvh;padding:12px max(12px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom));background:linear-gradient(#03121e55,#03121eaa),url('../../assets/backgammon/royal-terrace.webp') center/cover fixed}#draughts-app .rosa-header{display:flex;align-items:center;gap:18px;max-width:1800px;margin:auto;padding:6px 16px;border:3px double #ca9d4a;border-radius:18px;background:var(--rosa-menu-fill);box-shadow:inset 0 0 0 4px #03121e,0 10px 20px #0008;position:relative}#draughts-app .rosa-brand img{width:164px;height:auto;display:block}#draughts-app .rosa-header-actions [data-label]{display:none}#draughts-app .dk-header-actions{display:flex;gap:8px}#draughts-app .rosa-header-actions .rosa-button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:8px}#draughts-app .rosa-header-actions .rosa-art-icon{width:24px;height:24px}#draughts-app .rosa-header-nav .rosa-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;font-size:12px}.dk-mini-checker{display:block;width:30px;height:30px;border:1px solid #ffe0a0;border-radius:50%;background:radial-gradient(at 30% 20%,#fff5cc,#d4a34b 55%,#76501d 75%,#e2b86a);box-shadow:inset 0 0 0 4px #9c681c44,0 3px 0 #6d461a,0 6px 8px #0008}
.dk-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 240px;gap:22px;max-width:1760px;margin:14px auto;align-items:start}.dk-left,.dk-right{padding-top:74px;min-width:0}.dk-center{min-width:0}.dk-carved,#draughts-app .rosa-online{position:relative;border:1px solid var(--rosa-gold);border-radius:var(--rosa-radius-md);background:var(--rosa-menu-fill);box-shadow:inset 0 0 0 3px #d7a64b20,0 4px 0 #5a3a17,0 10px 25px #0009}.dk-carved::after,#draughts-app .rosa-header::after,#draughts-app .rosa-online::after{content:'';position:absolute;inset:-1px;border:0 solid transparent;border-image:url('../../assets/mahjong-reference/filigree-frame.webp') 115 / 29px / 0 stretch;pointer-events:none;z-index:3}#draughts-app .rosa-panel{padding:18px}#draughts-app h2{font-size:17px;color:var(--rosa-gold-light);margin:0 0 14px}.dk-modes{display:grid;gap:10px}.dk-modes button{min-height:52px;white-space:normal}.dk-modes [aria-pressed=true]{background:linear-gradient(#fff0be,#d0a052 60%,#966121);color:#211807;border-color:#ffe3a1;box-shadow:inset 0 1px 2px #fff,0 0 16px #dfb04b40}.dk-mode-label{font-size:12px;line-height:1.5;color:var(--rosa-text-muted)}.dk-counts{display:grid;gap:12px;margin:20px 0}.dk-counts>div{display:flex;align-items:center;gap:8px;padding:12px 0;border-top:1px solid #cfa55633;font-size:13px}.dk-counts strong{flex:1}.dk-counts>div>span:not(.dk-dot){display:grid;text-align:center;font-size:18px;min-width:32px}.dk-counts small{font-size:9px;color:var(--rosa-text-muted);margin-top:4px}.dk-dot{display:block;width:12px;height:12px;flex:none;border-radius:50%;background:radial-gradient(at 30% 20%,#fff6c7,#b27b2e);box-shadow:0 2px 2px #0009}.dk-dot.b{background:radial-gradient(at 30% 20%,#7fc6e2,#052237)}.dk-last{font-variant-numeric:tabular-nums;font-size:14px;line-height:1.6;overflow-wrap:anywhere;color:#f2d490}#dk-save{font-size:11px;line-height:1.5;color:var(--rosa-text-muted)}.dk-switch{display:flex;margin-top:15px;min-height:44px;padding:10px;align-items:center;justify-content:center;text-decoration:none;text-align:center;font-size:13px!important}.dk-left [data-dk=rules]{display:flex;gap:8px;align-items:center;padding:9px 12px}.dk-left .rosa-art-icon{width:24px;height:24px}.dk-right .rosa-online{margin:0 0 20px}.dk-objective p{font-size:13px;line-height:1.7;margin:0;color:#d6dfdf}.dk-heading{display:flex;align-items:center;justify-content:center;gap:14px;min-height:65px;margin-bottom:4px}.dk-heading h1{margin:0;font-size:clamp(30px,3.3vw,58px);text-transform:uppercase;line-height:1.1}.dk-motto{font-size:9px;letter-spacing:2px;text-align:center;color:var(--rosa-gold-light);margin:5px 0 0}.dk-title-piece{width:44px;height:44px;flex:none;border-radius:50%;background:radial-gradient(at 30% 15%,#fff7cd,#edcd82 35%,#a16b21 70%,#e2b866 80%);border:2px solid #ffdf93;box-shadow:inset 0 0 0 5px #bc862c55,0 4px #6b461a,0 9px 13px #0009}.dk-size{padding:5px 8px;color:#e6c77e;border:1px solid #ad8748;border-radius:7px;font-size:11px;letter-spacing:1px}.dk-player{display:flex;justify-content:space-between;max-width:var(--dk-size);margin:auto;padding:6px 4px;font-size:11px;color:#b9ccd6}.dk-player strong:before{content:'';width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;background:#e2bc6c;box-shadow:0 1px 3px #000}.dk-player[data-side=b] strong:before{background:#67aac4}.dk-player.active{color:#fff0c1}.dk-board-viewport{width:100%;overflow:auto;padding:6px 5px 10px;overscroll-behavior:contain;scrollbar-color:#ab8140 #03121e}.dk-board-frame{position:relative;width:min(100%,var(--dk-size));margin:auto;padding:14px;border:4px solid #be954f;border-radius:17px;background:linear-gradient(135deg,#fff0bc,#a9742e 13%,#4f331c 43%,#d2aa5c 70%,#66441f);box-shadow:inset 0 0 0 2px #ffe7a5,0 4px 0 #5a3915,0 7px 0 #cba15b,0 15px 25px #000b;isolation:isolate}.dk-board-frame::after{inset:-4px;border-image-width:38px}.dk-board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));aspect-ratio:1;position:relative;border:2px solid #694823;box-shadow:0 0 0 1px #ebcc8e,inset 0 3px 7px #0008;border-radius:2px}.dk-square{position:relative;aspect-ratio:1;min-width:0;min-height:0;border:0;border-radius:0;padding:0;isolation:isolate;box-shadow:inset 1px 1px #fff3,inset -1px -1px #0004;display:grid;place-items:center;touch-action:manipulation}.dk-light{background:linear-gradient(140deg,#f8eed2,#d5c49a 70%,#e9dcb5)}.dk-dark{background:linear-gradient(145deg,#214e64,#0a2c40 60%,#031726);cursor:pointer;color:#c9d8d9}.dk-square small{position:absolute;top:3px;left:3px;font-size:clamp(7px,.65vw,10px);font-family:var(--rosa-font-interface);font-weight:700;line-height:1;color:#d9d1b1;z-index:4;text-shadow:0 1px 1px #000a}.dk-piece{position:relative;width:85%;aspect-ratio:1;border-radius:50%;border:1px solid #fff1b6;background:radial-gradient(ellipse at 30% 16%,#fffbe0,#efda9e 27%,#d5ab55 53%,#aa732b 76%,#f1d184 82%,#a56d26 97%);box-shadow:inset 0 1px 2px #fff,0 3px 0 #8b5a20,0 5px 1px #593713,0 8px 6px #0009;transform:translateY(-2px);z-index:2;pointer-events:none}.dk-piece>i{position:absolute;inset:16%;border-radius:50%;border:1px solid #7e542956;box-shadow:inset 0 2px 4px #b0844244,0 1px 0 #fff9,inset 0 0 0 3px #bc8d3244}.dk-piece.sapphire{border-color:#8db1c1;background:radial-gradient(ellipse at 30% 16%,#7fb3c5,#356480 27%,#143c55 53%,#051b2f 76%,#577b8f 82%,#052136 97%);box-shadow:inset 0 1px 2px #b0d6e2,0 3px 0 #031321,0 5px 1px #010b13,0 8px 6px #000b}.dk-piece.sapphire>i{border-color:#a5ccdc55;box-shadow:inset 0 2px 4px #0006,0 1px 0 #b2d9e744,inset 0 0 0 3px #10344c44}.dk-piece.king{transform:translateY(-5px);box-shadow:inset 0 1px 2px #fff,0 3px 0 #98702d,0 5px 0 #e5c17a,0 7px 0 #81501a,0 11px 8px #000a}.dk-piece.sapphire.king{box-shadow:inset 0 1px 2px #b0d6e2,0 3px 0 #092135,0 5px 0 #48738a,0 7px 0 #041320,0 11px 8px #000b}.dk-crown{position:absolute;inset:22%;width:56%;height:56%;fill:#ae7626;stroke:#fff1b3;stroke-width:1.2;filter:drop-shadow(0 1px 1px #61411188)}.sapphire .dk-crown{fill:#edc571;stroke:#fff0bb;filter:drop-shadow(0 2px 2px #000)}.dk-square.selected{background:linear-gradient(140deg,#82703a,#153b4b);box-shadow:inset 0 0 0 2px #ffe39a}.dk-square.selected .dk-piece{outline:2px solid #ffeba9;filter:brightness(1.12);transform:translateY(-6px)}.dk-square.legal{box-shadow:inset 0 0 0 2px #eacb7a;background:linear-gradient(145deg,#316177,#173a4d)}.dk-target{position:absolute;width:25%;aspect-ratio:1;border-radius:50%;background:radial-gradient(at 30% 20%,#fff0bd,#c19b4c);box-shadow:0 2px 4px #0007;pointer-events:none;z-index:5}.dk-square.captured .dk-piece{opacity:.32;filter:grayscale(.4)}.dk-square.last:not(.selected):not(.legal){box-shadow:inset 0 0 0 2px #bda5698c}.dk-square.available .dk-piece{outline:1px solid #ffdf8a77}.dk-square:focus-visible{outline:3px solid #9fe6ef;outline-offset:-3px;z-index:6}.dk-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}.dk-route polyline{stroke:#f4d898;stroke-width:7;fill:none;stroke-dasharray:10 15;opacity:.6;stroke-linejoin:round}.dk-status{text-align:center;font-size:14px;color:#f8dfab;min-height:21px;margin:6px 0}.dk-hint{text-align:center;font-size:11px;color:#c0d1d6;min-height:15px;line-height:1.4;margin:4px 0 10px}.dk-status.dk-ended{color:#ffe6a1;font-size:20px;font-weight:800}.dk-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:12px!important;max-width:850px;margin:auto}.dk-actions .rosa-button{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 12px;font-size:12px;min-height:46px}.dk-actions .rosa-art-icon{width:25px;height:25px}.dk-actions .rosa-svg{width:24px;height:24px}.dk-actions [data-dk=zoom]{display:none}#draughts-app .rosa-button:disabled{opacity:.45;filter:grayscale(.6);cursor:not-allowed}.dk-modal{max-width:600px;width:calc(100% - 24px);max-height:calc(100dvh - 32px);padding:0;border:0!important;background:none!important;overflow:auto;color:#f1e5cd}.dk-modal::backdrop{background:#010c16c9;backdrop-filter:blur(5px)}.dk-modal .rosa-panel{padding:24px!important}.dk-dismiss{float:right;width:44px;height:44px}.dk-modal-body{font-size:14px;line-height:1.8}.dk-modal-body label{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:14px 0}.dk-modal-body select{min-height:44px;padding:9px;border:1px solid #b18b4b;border-radius:8px;color:#f2dfb7;background:#041725}.dk-modal-body button{margin:8px 8px 0 0;padding:10px 15px}.dk-piece{transition:filter .18s,transform .18s}.dk-no-motion .dk-piece{transition:none}[data-variant=giveaway] .dk-size{background:#67432344}
@media(min-width:1700px){.dk-layout{grid-template-columns:250px minmax(0,1fr) 270px;gap:26px}.dk-left,.dk-right{padding-top:84px}}
@media(max-width:1000px){#draughts-app{--dk-size:740px}.dk-layout{grid-template-columns:1fr 1fr;gap:16px}.dk-center{grid-column:1/-1;grid-row:1}.dk-left,.dk-right{padding-top:0}.dk-left{grid-column:1;grid-row:2}.dk-right{grid-column:2;grid-row:2}#draughts-app .rosa-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px;padding:5px 9px}#draughts-app .rosa-header-nav{grid-row:2;grid-column:1/-1;display:flex}#draughts-app .dk-header-actions{grid-column:2;grid-row:1;margin:0}#draughts-app .rosa-brand img{width:125px}#draughts-app .rosa-header-nav .rosa-button{min-width:0;flex:1;min-height:46px;padding:3px 8px;font-size:11px}#draughts-app .rosa-header-nav .rosa-art-icon{width:24px;height:24px}.dk-mini-checker{width:24px;height:24px}.dk-heading{min-height:58px;gap:10px}.dk-heading h1{font-size:34px}.dk-title-piece{width:34px;height:34px}.dk-motto{font-size:8px;letter-spacing:1px}.dk-board-viewport{padding-inline:4px}.dk-board-frame{width:100%;max-width:740px;padding:10px;border-width:3px}.dk-actions [data-dk=zoom]{display:flex}.dk-actions .rosa-button{flex:1 1 26%;min-width:0;font-size:11px}.dk-player{font-size:11px;padding:4px 7px}.dk-player,.dk-board-frame{max-width:740px}.dk-hint{margin-bottom:8px}.dk-large .dk-board-frame{width:740px;max-width:none}}
@media(max-width:600px){#draughts-app{padding:7px}.dk-layout{display:flex;flex-direction:column;margin:10px auto;gap:16px}.dk-center{order:0;width:100%}.dk-left{order:1;width:100%}.dk-right{order:2;width:100%}.dk-heading{gap:8px;min-height:54px}.dk-heading h1{font-size:clamp(26px,7.3vw,34px)}.dk-title-piece{width:28px;height:28px}.dk-motto{font-size:7px;letter-spacing:.8px}.dk-size{font-size:9px;padding:4px}.dk-board-frame{padding:7px;border-radius:12px}.dk-board-frame::after{border-image-width:28px}.dk-board{border-width:1px}.dk-square small{font-size:7px;top:2px;left:2px}.dk-piece{width:88%;box-shadow:inset 0 1px #fff8,0 2px #8b5a20,0 3px #593713,0 5px 3px #0008}.dk-piece.sapphire{box-shadow:inset 0 1px #b0d6e288,0 2px #031321,0 3px #010b13,0 5px 3px #0009}.dk-piece.king{transform:translateY(-3px)}.dk-actions{gap:6px;padding:10px!important}.dk-actions .rosa-button{padding:8px;gap:5px;min-height:47px}.dk-actions .rosa-art-icon{width:22px;height:22px}.dk-hint{font-size:10px;min-height:24px}.dk-large .dk-board-frame{width:560px;max-width:none}.dk-large .dk-player{max-width:100%}.dk-objective p{font-size:13px}#draughts-app .rosa-panel{padding:15px}.dk-player span{font-size:10px}}
@media(prefers-reduced-motion:no-preference){.dk-piece.promoted{animation:dk-coronation .4s ease-out}@keyframes dk-coronation{from{filter:brightness(1.8);transform:translateY(-14px) scale(1.15)}to{filter:brightness(1);transform:translateY(-5px)}}.dk-no-motion .dk-piece{animation:none}}
@media(prefers-reduced-motion:reduce){.dk-piece{transition:none}}

@media(min-width:1001px){.dk-heading{min-height:52px}.dk-heading h1{font-size:clamp(30px,3vw,54px)}.dk-player{padding-block:4px}.dk-hint[data-kind=guide]{display:none}.dk-status{margin:5px 0 8px}.dk-actions{padding:10px!important}.dk-actions .rosa-button{min-height:44px}}
.dk-square small{opacity:.72}

@media(min-width:601px) and (max-width:1000px){.dk-board-frame{width:min(100%,calc(100dvh - 450px))}.dk-large .dk-board-frame{width:740px}}
.dk-actions [data-dk=zoom][aria-pressed=true]{border-color:var(--rosa-crystal);box-shadow:inset 0 0 0 1px #7ccad355}
