:root{color-scheme:dark;--gold:#e2bd75;--ink:#f4ead8;--muted:#beaa94}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 45% 15%,#42271f 0,#201511 45%,#110e0d 100%);color:var(--ink);font:16px/1.5 system-ui,sans-serif;min-height:100vh}header{padding:20px 4%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #b18a4633;gap:16px}header a{color:var(--gold);font-size:11px;letter-spacing:2px;text-decoration:none}.tools{display:flex;align-items:center;gap:8px}input[type=range]{width:90px;accent-color:var(--gold)}main{max-width:1420px;margin:auto;padding:18px 3% 40px}.title{text-align:center;margin:10px 0 24px}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--gold);margin:6px 0}h1{font:clamp(32px,4vw,52px)/1.2 Georgia,serif;letter-spacing:-1px;margin:8px}h2{font:28px/1.2 Georgia,serif;margin:12px 0}h3{font-family:Georgia,serif;color:var(--gold)}.subtitle{color:var(--muted);margin:8px}.panel{background:linear-gradient(135deg,#33241f,#221a16);border:1px solid #b38e514f;border-radius:18px;padding:24px;box-shadow:0 16px 45px #0004}#setup{max-width:820px;margin:auto}.settings,.actions,.join{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0}label{color:var(--muted);font-size:14px}button,input,select{font:inherit}button,select,input:not([type=range]):not([type=checkbox]){min-height:44px;background:#1e1713;border:1px solid #846947;color:var(--ink);border-radius:8px;padding:10px 12px}button{cursor:pointer;transition:background .2s,transform .2s}button:hover{background:#56402a}button:disabled{opacity:.4;cursor:default}.primary{background:linear-gradient(#ebca89,#b99351);color:#24170c;font-weight:700;border-color:#ebca89}.primary:hover{background:#f0d299}.seatrow{display:grid;grid-template-columns:30px 1fr 1fr 1fr;gap:10px;align-items:center;margin:10px 0}.seatrow input{width:100%}.rule,.small{font-size:13px;color:var(--muted)}.rule{border-left:2px solid var(--gold);padding-left:14px}.tabletop{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.board-panel{min-width:0}#board-scroll{overflow:auto;border-radius:22px;background:#160f0b;box-shadow:0 25px 60px #0008}#board{width:100%;display:block;min-width:320px;touch-action:manipulation}.board-tools{display:flex;justify-content:center;gap:24px;margin:14px}.player{padding:12px;border:1px solid transparent;border-bottom-color:#ffffff12;border-radius:9px;margin:6px 0}.player.active{background:#bd954c1a;border-color:#d0ab69}.player strong{display:block}.player small{color:var(--muted)}.chip{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:9px;box-shadow:inset 2px 2px 3px #fff9}#status{color:var(--gold);min-height:48px}#message{text-align:center;color:#ffdc9d}.hole{cursor:pointer;outline:none}.hole:focus .focus-ring{stroke:#fff;stroke-width:3}.hole .marble{transition:filter .15s}.hole:hover .marble{filter:brightness(1.25)}.trail{pointer-events:none;stroke:#f6daa0;stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:3 7}.lasttrail{opacity:.3;stroke:#f3e3bb;stroke-width:3;fill:none;pointer-events:none}.hop{animation:hop .26s ease-out}.winner{animation:glow 1s ease-in-out 4 alternate}@keyframes hop{50%{filter:brightness(1.6)}}@keyframes glow{to{filter:brightness(1.4)}}dialog{max-width:660px;max-height:85vh;overflow:auto;background:#2b201a;color:var(--ink);border:1px solid var(--gold);border-radius:18px;padding:28px}dialog::backdrop{background:#000b}#invite{width:100%;font-size:12px}#lobbyseats button{margin:4px;font-size:12px}#stats{font-size:13px;color:var(--muted)}[hidden]{display:none!important}:focus-visible{outline:3px solid #f5d18b;outline-offset:3px}@media(max-width:850px){.tabletop{grid-template-columns:1fr}.title{margin-bottom:15px}.tabletop aside{display:grid;grid-template-columns:1fr 1fr;gap:8px}#players,#lobby,.small{grid-column:1/-1}#players{display:flex;flex-wrap:wrap}.player{flex:1;min-width:130px}#movebuttons{grid-column:1/-1}header{flex-wrap:wrap;padding:12px 4%}.panel{padding:18px}.seatrow{grid-template-columns:22px 1fr 1fr}.seatrow select:last-child{grid-column:2/-1}.tools button{font-size:13px}.title h1{font-size:36px}main{padding:12px 2%}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Keep turn actions beside the board and within reach on phone screens. */
#movebuttons{justify-content:center;margin:12px 0;gap:12px}
#movebuttons button{min-height:52px;min-width:145px}
@media(max-width:850px){
 body:has(#table:not([hidden])){padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
 #movebuttons{position:fixed;z-index:20;bottom:0;left:0;right:0;margin:0;
  padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
  background:#221a16;border-top:1px solid #b38e51;box-shadow:0 -5px 22px #0008;flex-wrap:nowrap}
 #movebuttons button{flex:1;min-width:0;max-width:300px;min-height:52px}
}