body{min-height:100dvh}main{padding:0 8px 16px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1480px;margin:auto;padding:10px 24px}.brand{text-decoration:none;font-weight:900}.topbar #tools{display:flex;gap:6px}.topbar .lg-button{padding:8px 12px}h1{font-size:2rem;margin:0}h2{font-size:1.12rem;margin:0}p{line-height:1.5;margin:4px 0}.muted,.tip,.board-caption{color:var(--lg-muted)}.setup{max-width:540px;margin:12px auto}.setup h1{margin:10px 0}.options{display:flex;gap:12px;flex-wrap:wrap}.options label{flex:1;min-width:150px;font-weight:800}.options select{width:100%;min-height:44px;margin-top:6px;border:1px solid var(--lg-line);background:var(--lg-cream);color:var(--lg-ink);border-radius:12px;padding:8px}.lg-stage{margin-top:8px}.players{display:grid;gap:8px}.player{border:2px solid var(--lg-line);border-radius:16px;padding:12px;background:var(--lg-cream);font-weight:800}.player.active{border-color:var(--lg-rose);background:var(--lg-pink)}.player small{display:block;color:var(--lg-muted);font-weight:600}.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border-top:1px solid var(--lg-line);padding-top:12px}.stat{font-size:.8rem;color:var(--lg-muted)}.stat strong{font-size:1.15rem;color:var(--lg-ink);display:block}.numbers{font-weight:800;font-variant-numeric:tabular-nums}.tip{font-size:.85rem;margin-top:auto}.lg-center{gap:10px}#turn{text-align:center;font-weight:900;font-size:1.1rem;min-height:2em}.board-wrap{width:100%;max-width:640px;aspect-ratio:1;background:var(--lg-rose);padding:10px;border-radius:20px;box-shadow:0 12px 28px #482b3826}#board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;height:100%;border-radius:10px;overflow:hidden;outline:1px solid var(--lg-line)}.square{display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:0;min-width:0;min-height:44px;aspect-ratio:1;background:var(--lg-cream);position:relative;color:var(--lg-ink)}.square.dark{background:var(--lg-pink)}.square:focus-visible{outline:3px solid var(--lg-leaf);outline-offset:-4px;z-index:2}.piece{width:78%;height:78%;border-radius:50%;border:3px double var(--lg-on-rose);background:var(--lg-p1);display:grid;place-items:center;box-shadow:0 3px 0 color-mix(in srgb,var(--lg-ink) 60%,transparent);font-size:clamp(.7rem,2vw,1.5rem);font-weight:900;color:var(--lg-on-rose)}.piece.p2{background:var(--lg-p2);border-style:solid;color:#fff}.piece.king{outline:2px dashed var(--lg-cream);outline-offset:-6px}.square.selected{box-shadow:inset 0 0 0 4px var(--lg-rose)}.square.destination:after{content:'×';border:2px dashed var(--lg-ink);border-radius:50%;width:60%;height:60%;display:grid;place-items:center;font-size:1.4rem;position:absolute;background:var(--lg-white);color:var(--lg-ink)}.square.last:before{content:'';position:absolute;inset:2px;border:2px solid var(--lg-leaf)}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions .lg-button{flex:1;padding:9px 12px}#moves{padding-left:28px;margin:0;min-height:60px;max-height:240px;overflow:auto;font-size:.86rem;line-height:1.9;font-variant-numeric:tabular-nums}#result{font-weight:800}#hint-text{font-size:.9rem;color:var(--lg-muted)}details summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:800}details p{font-size:.86rem;margin:10px 0}.board-caption{font-size:.82rem;text-align:center}
@media(min-width:1000px){html,body{height:100%;overflow:hidden}body{display:flex;flex-direction:column}.topbar{width:100%;flex:none;height:64px}main{display:flex;flex-direction:column;flex:1;min-height:0;padding-bottom:16px}#entry{overflow:auto;min-height:0}.lg-stage{flex:1;height:auto;min-height:0;width:100%;grid-template-columns:minmax(210px,250px) minmax(0,1fr) minmax(230px,290px);gap:20px}.lg-center{container-type:size}.board-wrap{width:min(100cqw,calc(100cqh - 100px));height:min(100cqw,calc(100cqh - 100px));max-width:760px;max-height:760px;flex:none}.lg-rail{gap:12px}#moves{flex:1;max-height:none;min-height:60px}.square{min-height:0}.stats{margin-top:auto}}
@media(max-width:999px){.topbar{padding:8px}.brand{font-size:.85rem}.topbar .lg-button{font-size:.8rem;padding:8px}#game{display:flex;flex-direction:column;gap:14px}.lg-rail{padding:16px;background:var(--lg-white);border:1px solid var(--lg-line);border-radius:20px}.lg-rail--left{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lg-rail--left h1,.players,.stats,.numbers{grid-column:1/-1}.lg-rail--left .tip{display:none}.players{grid-template-columns:1fr 1fr}.player{padding:8px;font-size:.88rem}.stats{grid-template-columns:repeat(5,minmax(0,1fr))}.stat strong{font-size:1rem}.stat{font-size:.65rem}.board-wrap{padding:8px;border-radius:16px}.lg-center{display:flex;flex-direction:column;align-items:center}.board-caption{margin:8px}.setup{padding:18px}#moves{max-height:160px}.lg-lobby{padding:18px}}

/* Phone content follows the page instead of trapping vertical scrolling. */
@media(max-width:999px){#moves{max-height:none;overflow:visible}}

@media(min-width:1000px){#entry:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;width:100%;max-width:1120px;margin:12px auto}.setup{margin:0;width:100%}#lobby .lg-lobby{margin:0 auto;padding:18px 24px}}