:root{--bg:#f2efe7;--ink:#262c27;--muted:#74776c;--accent:#c36038;--panel:#fbfaf6;--light:#eadcc1;--dark:#6e8066;--select:#e6b957;--border:#d9d9ca;--white-piece:#fff6de;--black-piece:#253b32}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0%,#e3e7d8 0,transparent 55%),var(--bg);color:var(--ink);font-family:'Trebuchet MS',sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--border);background:var(--panel);border-radius:6px;padding:10px 12px;color:var(--ink)}button:hover{border-color:var(--accent);filter:brightness(.97)}button:disabled{cursor:wait;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}[hidden]{display:none!important}header{display:flex;align-items:center;justify-content:space-between;padding:24px 4vw;border-bottom:1px solid var(--border);gap:15px}.brand{font-size:25px;font-weight:800;display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none;letter-spacing:-1px}.brand-light{font-weight:400;color:var(--muted)}.tag,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:bold;color:var(--muted)}#profile{font-size:12px;padding:8px 12px;border:1px solid var(--border);border-radius:30px}main{max-width:1540px;margin:auto;padding:0 4vw}.intro{display:flex;align-items:center;justify-content:space-between;padding:38px 0 30px}.intro h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(36px,4vw,60px);line-height:1.05;letter-spacing:-2px;margin:12px 0}.intro em{color:var(--accent);font-weight:400}.intro>p{font-size:14px;line-height:1.8;color:var(--muted);margin-right:5vw}.layout{display:grid;grid-template-columns:240px minmax(300px,610px) minmax(230px,1fr);gap:26px;align-items:start}.panel{background:var(--panel);border:1px solid var(--border);padding:20px;border-radius:12px}.controls{position:sticky;top:15px}.tabs{display:flex;border-bottom:1px solid var(--border);gap:5px;margin-bottom:20px}.tabs button{flex:1;border:0;border-radius:0;background:none;padding:10px 2px;font-size:13px}.tabs .active{border-bottom:2px solid var(--accent);color:var(--accent)}label{display:block;letter-spacing:1.3px;font-size:10px;font-weight:bold;margin:18px 0 9px;color:var(--muted)}input,select{border:1px solid var(--border);border-radius:5px;background:var(--panel);padding:12px 9px;max-width:100%;color:var(--ink)}select{width:100%;font-size:12px}.primary{background:var(--accent);border-color:var(--accent);color:white;width:100%;margin-top:18px;font-size:13px}.note{font-size:11px;color:var(--muted);line-height:1.7}.divider{height:1px;background:var(--border);margin:22px 0}.subtle{width:100%;margin-top:15px;background:none;font-size:12px}.check{display:flex;align-items:center;letter-spacing:0;font-size:12px;gap:6px}.join{display:flex;gap:6px}.join input{width:100%;min-width:0;font-size:12px}.join button{flex-shrink:0}.playerline{display:flex;align-items:center;justify-content:space-between;padding:0 4px 12px;font-size:13px}.playerline:has(+.statusbar){padding-top:12px}.clock{font:24px Georgia,serif;background:#dedfd2;border-radius:5px;padding:5px 12px;font-variant-numeric:tabular-nums;min-width:80px;text-align:center}.board-shell{padding:10px;background:#344438;border-radius:9px;box-shadow:0 15px 30px #253a3020}#board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1}.sq{position:relative;aspect-ratio:1;border:0;border-radius:0;padding:0;display:flex;align-items:center;justify-content:center;font-family:'DejaVu Sans','Segoe UI Symbol',serif;font-size:clamp(26px,3.6vw,53px);line-height:1}.sq.light{background:var(--light)}.sq.dark{background:var(--dark)}.sq:hover{filter:brightness(1.08)}.sq.last{box-shadow:inset 0 0 0 4px #eac46780}.sq.selected{background:var(--select)}.sq.target:after{content:'';position:absolute;width:24%;height:24%;border-radius:100%;background:#203e4150;pointer-events:none}.sq.target:has(.piece):after{width:84%;height:84%;background:none;border:4px solid #203e4170}.coord{position:absolute;font:9px 'Trebuchet MS',sans-serif;bottom:3px;right:4px;color:var(--ink);opacity:.7}.rank{left:4px;right:auto;top:3px;bottom:auto}.piece{z-index:1;pointer-events:none;filter:drop-shadow(0 2px 1px #0006);text-shadow:1px 0 #233c31,-1px 0 #233c31,0 1px #233c31,0 -1px #233c31}.piece.w{color:var(--white-piece)}.piece.b{color:var(--black-piece);text-shadow:1px 0 #d9ddcd,-1px 0 #d9ddcd,0 1px #d9ddcd,0 -1px #d9ddcd}body[data-pieces=outline] .piece{color:transparent;-webkit-text-stroke:1.5px var(--black-piece);filter:none;text-shadow:none}body[data-pieces=outline] .piece.w{-webkit-text-stroke:1.5px #fff8e9;filter:drop-shadow(0 0 1px black)}body[data-pieces=medallion] .piece{background:var(--black-piece);color:var(--white-piece);border-radius:50%;width:80%;height:80%;display:flex;align-items:center;justify-content:center;font-size:.72em;box-shadow:inset 0 0 0 2px #bba570;text-shadow:none}body[data-pieces=medallion] .piece.w{background:var(--white-piece);color:var(--black-piece)}.statusbar{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid var(--border);padding:15px 0;font-size:13px}#modeBadge{font-size:9px;color:var(--accent);letter-spacing:1px}.actions{display:flex;gap:6px;flex-wrap:wrap}.actions button{font-size:11px}#notice{font-size:12px;color:var(--accent);min-height:18px}.section-title{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:13px;margin-bottom:12px}.section-title h2{font:19px Georgia,serif;margin:0}.section-title>span{font-size:9px;letter-spacing:1px;color:var(--muted)}.right{display:flex;flex-direction:column;gap:18px}.moves{max-height:220px;overflow:auto;font-size:12px;display:grid;grid-template-columns:30px 1fr 1fr;gap:9px}.moves .empty{grid-column:1/-1}.empty{color:var(--muted);font-size:12px}.move-number{color:var(--muted)}.leader{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}.leader strong{margin-left:auto}.leader>span:first-child{color:var(--accent);min-width:15px}#roomInfo{padding:10px 0;display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:11px}#roomInfo button{font-size:10px}.messages{height:130px;overflow:auto;font-size:12px;overflow-wrap:anywhere}.msg{padding:7px 0}.msg strong{font-size:10px;color:var(--accent);display:block;margin-bottom:4px}.voice{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.voice button{font-size:10px;padding:7px}.voice small{display:block;flex-basis:100%;font-size:10px;color:var(--muted)}audio{width:100%;height:30px;margin-top:10px}footer{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding:25px 0;margin-top:40px;font-size:9px;letter-spacing:1px;color:var(--muted)}dialog{border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--ink);padding:30px}dialog::backdrop{background:#17292299}#promotionChoices{display:flex;gap:10px}#promotionChoices button{font-size:35px}#myRooms button{font-size:10px;margin-top:8px}body[data-skin=ice]{--light:#e2f2f3;--dark:#68a1b4;--select:#f0cf71;--white-piece:#fff;--black-piece:#193e5a}body[data-skin=neon]{--light:#455967;--dark:#172b3d;--select:#b6d247;--white-piece:#cafff5;--black-piece:#fdb96d}body[data-skin=mask]{--light:#e4c5b6;--dark:#953e39;--select:#efb345;--white-piece:#fff2dd;--black-piece:#252728}@media(prefers-reduced-motion:no-preference){.intro,.layout{animation:reveal .5s ease-out both}.layout{animation-delay:.1s}@keyframes reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}}@media(min-width:1600px){.sq{font-size:56px}}@media(max-width:1150px){.layout{grid-template-columns:210px minmax(300px,1fr);gap:20px}.right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.sq{font-size:clamp(30px,5.5vw,60px)}}@media(max-width:650px){header{padding:15px 4vw}.brand{font-size:18px}.tag{display:none}#profile{font-size:10px}.intro{padding:23px 0 18px}.intro>p{display:none}.intro h1{font-size:38px}.layout{display:flex;flex-direction:column;gap:18px}.controls{position:static;width:100%;order:2;display:block}.play{width:100%;order:1}.right{width:100%;order:3;display:flex}.sq{font-size:clamp(24px,8vw,50px)}.board-shell{padding:6px}.coord{font-size:8px}.playerline{font-size:12px}.clock{font-size:20px}.intro .eyebrow{font-size:9px}footer{gap:20px;line-height:1.6}.panel{padding:16px}.controls label{margin-top:12px}.controls .divider{margin:15px 0}}