:root{font-family:ui-rounded,'Avenir Next',system-ui,sans-serif;color:#f5edda;background:#15271f;--paper:#f5edda;--gold:#eac879;--red:#be4f37;--blue:#3b658c;--muted:#bcc7ba;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 35%,#345342,#15271f 75%);min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;min-height:44px;border:1px solid #91a08a;border-radius:12px;background:#294236;color:var(--paper);padding:8px 12px;font-weight:650}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}a{color:var(--paper)}#app{height:100dvh;max-width:540px;margin:auto;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;grid-template-rows:44px auto minmax(0,1fr) auto 48px;gap:7px}header{display:flex;align-items:center;justify-content:space-between;gap:8px}header>a{font-size:12px;text-decoration:none;min-height:44px;display:flex;align-items:center}h1{font-size:clamp(15px,4vw,21px);letter-spacing:-.6px;margin:0}header button{font-size:12px;padding:8px 10px}.turn-panel{text-align:center}.eyebrow{font-size:9px;letter-spacing:2.3px;color:var(--gold);margin:1px 0 5px}h2{font-size:22px;letter-spacing:-.5px;margin:0}#message{font-size:12px;margin:4px 0 0;color:var(--muted);min-height:16px}#board{position:relative;width:100%;max-width:min(100%,calc(100dvh - 224px));aspect-ratio:1;align-self:center;justify-self:center;border-radius:24px;background:#eadcb9;box-shadow:0 12px 36px #071a1655,inset 0 0 0 1px #fff6;color:#384336}#board>svg{position:absolute;width:100%;height:100%;pointer-events:none}#board line{stroke:#6d795748;stroke-width:.6}.node{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;clip-path:circle(50%);background:transparent;color:#7c8068;display:grid;place-content:center}.node::before{content:'';width:9px;height:9px;border-radius:50%;background:#596d3a66;position:absolute;top:calc(50% - 4.5px);left:calc(50% - 4.5px)}.node.legal::before{width:22px;height:22px;top:calc(50% - 11px);left:calc(50% - 11px);background:#48683e;box-shadow:0 0 0 5px #66835533}.node.piece{background:var(--red);color:#fff6df;box-shadow:inset 0 0 0 2px #fff5}.node.piece.blue{background:var(--blue)}.node.piece::before{display:none}.node.selected{box-shadow:inset 0 0 0 3px #222b21,inset 0 0 0 6px #fff7b9}.node.chased{border:3px dashed #fff6b3}.node svg{width:27px;height:27px}.node:focus-visible{outline:none;background:#5f7143}.node.piece:focus-visible{box-shadow:inset 0 0 0 3px #fff7b9,inset 0 0 0 5px #192c21}.node.last-destination:not(.piece)::after{content:'';width:18px;height:18px;border:1px solid #7e5d35;border-radius:50%}.guidance{text-align:center;min-height:44px;font-size:12px;line-height:1.4}.guidance p{margin:0}#hint{color:var(--paper);min-height:17px}#last-move{font-size:10px;color:var(--muted);margin-top:3px}#storage{color:var(--gold);font-size:10px}footer{display:flex;align-items:center;justify-content:space-between;gap:8px}footer span{font-size:10px;line-height:1.7;margin-right:auto}footer button{font-size:12px}.red-dot,.blue-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e78c70;margin-right:4px}.blue-dot{background:#8fb8dd}dialog{width:min(92vw,470px);max-height:85dvh;overflow:auto;border:1px solid #778d73;border-radius:18px;padding:20px;background:#20372e;color:var(--paper);box-shadow:0 25px 90px #0007}dialog::backdrop{background:#05170dcc;backdrop-filter:blur(3px)}.sheet-heading{display:flex;gap:12px;justify-content:space-between;align-items:center}.sheet-heading h2{font-size:23px}.sheet-heading button{flex-shrink:0}dialog p,dialog li{font-size:14px;line-height:1.6}dialog ul{padding-left:22px}dialog .primary{background:var(--gold);color:#293c2e;width:100%;margin-top:12px}dialog .cycle{display:flex;justify-content:space-around;gap:8px;padding:16px 0;color:var(--gold);font-size:13px}.fine{font-size:12px!important;color:var(--muted)}.result #status{color:var(--gold)}
@media(max-height:620px){.eyebrow{display:none}h2{font-size:20px}#app{gap:5px}#board{max-width:min(100%,calc(100dvh - 208px))}}
@media(orientation:landscape) and (max-height:600px){#app{max-width:880px;grid-template-columns:minmax(280px,1fr) minmax(220px,.85fr);grid-template-rows:44px 1fr auto 48px;gap:6px 16px}header{grid-column:1/-1}#board{grid-column:1;grid-row:2/5;width:auto;height:100%;max-width:none;max-height:calc(100dvh - 74px)}.turn-panel{grid-column:2;align-self:center}.guidance,footer{grid-column:2}.guidance{min-height:60px}}
@media(prefers-reduced-motion:no-preference){.node{transition:background .12s,box-shadow .12s}}

.seat-choice{border:0;padding:0;margin:16px 0}.seat-choice legend{font-weight:700;margin-bottom:8px}.seat-choice label{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px;border:1px solid #778d73;border-radius:12px;margin:8px 0;cursor:pointer}.seat-choice input{width:20px;height:20px;accent-color:var(--gold)}

#session-tally{display:block;width:100%;font-size:11px;min-height:44px;margin-top:3px;padding:4px 6px;background:transparent;border-color:#778d7366}.mode-choice{display:grid;gap:6px;font-size:14px}.mode-choice select{min-height:44px;font:inherit;font-size:16px;padding:8px;background:#294236;color:var(--paper);border:1px solid #778d73;border-radius:10px}
@media(orientation:portrait){#board{max-width:min(100%,calc(100dvh - 265px))}}

#app.practice #session-tally,#app.practice #seats,#app.practice #resign{display:none}#return-game{min-height:44px;display:flex;align-items:center;font-size:12px}#return-game[hidden],#practice-hint[hidden]{display:none}.practice-links{display:grid;gap:8px}.practice-links a{display:block;min-height:44px;padding:12px;border:1px solid #778d73;border-radius:12px;text-decoration:none}.practice footer{justify-content:space-between}.practice #hint{min-height:34px}
