.dame-game{max-width:720px;margin:0 auto}
.dame-game header{text-align:center}
.dame-game [hidden]{display:none!important}
.dame-setup{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin:16px 0}
.dame-setup label{display:grid;gap:4px;min-width:145px}
.dame-btn{padding:.7rem 1rem;border:1px solid #202124;border-radius:10px;background:#f3f4f5;color:#202124;cursor:pointer;min-height:44px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.dame-btn:not(:disabled):hover,.dame-btn:not(:disabled):focus-visible{background:#e2e5e8;color:#111;outline:3px solid #f0b400;outline-offset:2px}
.dame-btn:disabled{opacity:.5;cursor:not-allowed}
.dame-primary{background:#2f5f46;color:#fff;border-color:#234735;box-shadow:0 3px 10px rgba(0,0,0,.16)}
.dame-primary:not(:disabled):hover,.dame-primary:not(:disabled):focus-visible{background:#234735;color:#fff}
.dame-status{text-align:center;margin:10px}
.dame-board-wrap{display:flex;justify-content:center;padding:18px;border-radius:24px;background:linear-gradient(180deg,#f7f1e6,#ece1d0);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 26px rgba(48,33,20,.16)}
.dame-board{position:relative;display:grid;grid-template-columns:repeat(8,1fr);width:min(92vw,560px);aspect-ratio:1;margin:0;border:8px solid #4b2812;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,249,238,.32),inset 0 0 0 16px rgba(86,53,27,.22),0 10px 22px rgba(35,22,12,.26);background:linear-gradient(145deg,#cfab78,#ba8c56)}
.dame-board::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 20%,rgba(120,74,37,.12) 0 5%,transparent 5.4%),radial-gradient(circle at 78% 72%,rgba(120,74,37,.11) 0 4.5%,transparent 4.9%),linear-gradient(90deg,rgba(255,255,255,.09),rgba(255,255,255,0) 18%,rgba(82,49,22,.09) 36%,rgba(255,255,255,.05) 52%,rgba(82,49,22,.08) 70%,rgba(255,255,255,.04)),repeating-linear-gradient(10deg,rgba(255,255,255,.025) 0 9px,rgba(116,72,35,.05) 9px 18px,rgba(255,255,255,0) 18px 28px);pointer-events:none}
.dame-cell{position:relative;border:0;padding:0}
.dame-cell.light{background-image:linear-gradient(rgba(247,222,180,.52),rgba(205,151,91,.54)),url("wood-grain.svg");background-size:cover;background-position:center;cursor:default}
.dame-cell.dark{background-image:linear-gradient(rgba(91,48,20,.58),rgba(55,27,10,.70)),url("wood-grain.svg");background-size:cover;background-position:center;cursor:pointer}
.dame-cell::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%,rgba(64,39,18,.08));pointer-events:none}
.dame-cell::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(16deg,rgba(255,255,255,.02) 0 8px,rgba(98,61,29,.04) 8px 16px,rgba(255,255,255,0) 16px 24px);pointer-events:none;mix-blend-mode:multiply}
.dame-piece{position:absolute;inset:12%;border-radius:50%;border:2px solid rgba(35,35,35,.8);box-shadow:inset 0 3px 4px rgba(255,255,255,.28),inset 0 -4px 5px rgba(0,0,0,.22),0 4px 8px rgba(0,0,0,.34)}
.dame-piece::before{content:"";position:absolute;inset:15%;border-radius:50%;border:2px solid rgba(0,0,0,.18);box-shadow:inset 0 1px 2px rgba(255,255,255,.28)}
.dame-piece.white{background:radial-gradient(circle at 32% 28%,#fff 0%,#f6f1e6 43%,#d2cbbb 70%,#989187 100%);border-color:#807b73}
.dame-piece.black{background:radial-gradient(circle at 32% 28%,#777 0%,#383838 38%,#161616 72%,#050505 100%);border-color:#050505}
.dame-piece.king::after{content:"♛";position:absolute;inset:0;display:grid;place-items:center;text-shadow:0 1px 2px rgba(0,0,0,.28)}
.dame-piece.white.king::after{color:#4a4339}
.dame-piece.black.king::after{color:#f7f3e8}
.dame-cell.selected{box-shadow:inset 0 0 0 5px #2f6fed}
.dame-cell.legal{box-shadow:inset 0 0 0 5px rgba(44,173,96,.58)}
.dame-cell.capture{box-shadow:inset 0 0 0 5px rgba(217,74,74,.64)}
.dame-board-actions{display:flex;justify-content:center;margin:12px 0 4px}
.dame-remote-setup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:1 1 100%}
.dame-remote-setup label{min-width:0}
.dame-remote-setup input{width:100%;box-sizing:border-box;padding:.58rem .65rem;border:1px solid #a9afb5;border-radius:8px;background:#fff;color:inherit}
.dame-setup-status:empty{display:none}
.dame-setup-status{flex:1 1 100%;padding:.65rem .8rem;border:1px solid #d9dde1;border-radius:8px;background:#f7f8fa}
.dame-remote-info{margin:10px 0;padding:.65rem .8rem;border:1px solid #d9dde1;border-radius:8px;background:#f7f8fa;overflow-wrap:anywhere}
.dame-remote-info a{overflow-wrap:anywhere}
@media(max-width:700px){.dame-remote-setup{grid-template-columns:1fr}}
@media(max-width:560px){.dame-setup{display:grid}.dame-setup label{min-width:0}.dame-board-wrap{padding:12px;border-radius:18px}.dame-board{width:min(94vw,560px)}}