:root{color-scheme:dark;--ink:#f8efdb;--gold:#efc779;--mint:#a9d1bc}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#295057,#10272e 60%,#0a1b21);color:var(--ink);font:16px/1.5 system-ui,sans-serif;min-height:100vh}header{max-width:1180px;margin:auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:10px}header a{font-size:11px;letter-spacing:2px;color:var(--mint);text-decoration:none}main{max-width:1120px;margin:auto;padding:0 20px 30px}button,input,select{font:inherit}button{border:1px solid #e8c78a;border-radius:10px;background:linear-gradient(#f4d99c,#dfb968);color:#243337;padding:12px 19px;min-height:46px;font-weight:700;cursor:pointer}button:hover{filter:brightness(1.1)}button:disabled{opacity:.45;cursor:default}.quiet{background:#ffffff09;border-color:#c8d1bd45;color:var(--ink)}:focus-visible{outline:3px solid #80ecff;outline-offset:3px}input,select{border:1px solid #8ba49d;background:#142f36;color:var(--ink);border-radius:7px;padding:9px;max-width:100%;min-height:44px}label{display:block;margin:15px 0}label input:not([type=checkbox]),label select{display:block;width:100%;margin-top:5px}input[type=checkbox]{min-height:0;width:20px;height:20px;vertical-align:middle}h1,h2,h3,p{margin-top:0}h1{font:clamp(38px,6vw,72px)/1.08 Georgia,serif;margin:14px 0}h1 em{color:var(--gold)}h2{font:30px/1.2 Georgia,serif;margin-bottom:18px}.edition,.eyebrow{font-size:11px;letter-spacing:3px;color:var(--gold)}.panel{max-width:680px;margin:25px auto;padding:28px;background:#16383de8;border:1px solid #b8cba239;border-radius:22px;box-shadow:0 20px 90px #0004}.title{text-align:center}.hero{width:100%;max-height:210px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.muted,small{color:#b3c4bd}.setupRow{display:grid;grid-template-columns:30px 1fr 115px;gap:10px;align-items:center;margin:13px 0}.gameHeading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.gameHeading h2{margin:0}.playLayout{display:grid;grid-template-columns:minmax(300px,690px) minmax(230px,1fr);gap:24px;align-items:start}.boardFrame{padding:12px;border:3px solid #b18552;border-radius:16px;background:repeating-linear-gradient(5deg,#70482c,#895c37 5px,#68432c 9px,#7d512e 14px);box-shadow:0 15px 40px #0007,inset 0 0 0 4px #35261c}#board{width:100%;display:block;background:#f3e4bc;border-radius:5px}.player{padding:9px 12px;border:1px solid #ffffff20;border-radius:9px;margin-bottom:7px;display:flex;align-items:center;gap:9px;background:#17383f}.player.active{border-color:var(--gold);background:#31534f}.player .score{margin-left:auto;color:var(--gold)}.badge{font-size:23px;text-shadow:0 2px 2px #000;min-width:25px}.turnPanel{display:flex;gap:15px;align-items:center;margin:18px 0}.turnControls{flex:1}#turnText{font-weight:600;margin-bottom:8px}#spin{width:100%;font-size:20px}#result{padding-left:15px}#next{display:block;margin-top:8px}.spinner{position:relative;flex:0 0 112px;height:112px;border-radius:50%;border:5px solid #d9b578;background:conic-gradient(from -30deg,#abcfbe 0 60deg,#eac58f 60deg 120deg,#e9a894 120deg 180deg,#b7b6d5 180deg 240deg,#9ccbd0 240deg 300deg,#dad5a0 300deg);box-shadow:0 4px 8px #0006}.spinner span{position:absolute;color:#243d42;font-weight:800;left:46px;top:3px;transform:rotate(calc(var(--n)*60deg));transform-origin:5px 48px}.spinner span:nth-child(2){--n:1}.spinner span:nth-child(3){--n:2}.spinner span:nth-child(4){--n:3}.spinner span:nth-child(5){--n:4}.spinner span:nth-child(6){--n:5}#needle{position:absolute;left:48px;top:10px;width:6px;height:45px;background:#294349;border:1px solid white;border-radius:80% 80% 2px 2px;transform-origin:50% 41px}.spinner i{position:absolute;left:43px;top:43px;width:17px;height:17px;border-radius:50%;background:#efcc83;box-shadow:0 1px 4px #000}.log{font-size:13px;margin:16px 0;color:#c8d7cb}.log ol{padding-left:22px;max-height:165px;overflow:auto}.log li{margin:6px 0}#connection{font-size:12px;color:var(--mint)}#notice{text-align:center;color:#ffe0a2;min-height:24px}dialog{max-width:520px;width:92%;max-height:88vh;overflow:auto;border:1px solid #cdbb86;border-radius:18px;background:#17383e;color:var(--ink);padding:26px}dialog::backdrop{background:#061c23bf;backdrop-filter:blur(5px)}dialog p{font-size:14px}.confetti{color:var(--gold);font-size:34px;text-align:center}#victory{text-align:center}[hidden]{display:none!important}hr{border:0;border-top:1px solid #ffffff22;margin:25px 0}@media(max-width:700px){header{padding:10px 12px}header a{font-size:9px;letter-spacing:1px}main{padding:0 10px 20px}.panel{margin:10px auto;padding:20px}.playLayout{display:block}.boardFrame{padding:6px;border-width:2px;max-width:min(100%,56vh);margin:auto}.gameHeading{margin:2px 0 8px}.gameHeading h2{font-size:23px}.gameHeading .eyebrow{font-size:9px}#roster{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:10px}.player{padding:3px 8px;margin:0;font-size:12px}.badge{font-size:19px}.turnPanel{margin:8px 0}.spinner{flex-basis:86px;width:86px;height:86px;transform:scale(.78);transform-origin:center;margin:-10px 0;width:112px;flex-basis:112px;height:112px}.turnControls{display:grid;grid-template-columns:1fr 110px;align-items:center;gap:0 8px}#turnText{font-size:14px;margin:0}#next{font-size:11px;margin:0}#spin{grid-row:span 2;padding:8px}#restart{font-size:12px;padding:7px 12px}.log{margin:8px 0}.log ol{max-height:85px}.choices{grid-template-columns:1fr}.title .hero{max-height:160px}.setupRow{grid-template-columns:24px 1fr 100px}}@media(max-height:520px) and (min-width:650px){.playLayout{grid-template-columns:minmax(280px,58vh) 1fr}.boardFrame{padding:5px}header{padding:5px 20px}.gameHeading{margin:0}.log ol{max-height:65px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* The viewBox camera enlarges the board without moving the surrounding page. */
.boardPanel{min-width:0}.boardTools{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}.boardFocus{font-size:13px;color:var(--mint);overflow-wrap:anywhere;min-height:20px}.zoomControls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.zoomControls button{padding:6px 12px;min-width:44px;min-height:44px}.zoomControls output{min-width:48px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;color:var(--gold)}#board{aspect-ratio:500/545}#boardOverview{margin-left:auto;font-size:13px}
@media(max-width:700px){.boardTools{max-width:min(100%,56vh);margin:0 auto 6px}.boardFocus{font-size:12px}.zoomControls{gap:4px}.zoomControls button{padding:6px 10px}}
/* A short landscape screen shows fewer rows, at the same readable magnification. */
@media(max-width:1000px) and (min-width:650px) and (max-height:600px){
 header{padding:5px 20px}.gameHeading{margin:0}.playLayout{display:grid;grid-template-columns:minmax(280px,42vw) minmax(0,1fr);gap:12px}.boardFrame{padding:5px;max-width:100%}.boardTools{max-width:none;gap:4px;margin:0 0 6px}.boardFocus{height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.zoomControls{flex-wrap:nowrap;gap:4px}.zoomControls button{padding:6px 10px}.zoomControls output{min-width:44px}#boardOverview{font-size:12px}#board{height:max(80px,calc(100dvh - 220px));aspect-ratio:auto}
}
/* Keep the board itself visible in shorter desktop and portrait windows too. */
#board{max-height:max(80px,calc(100dvh - 280px))}
@media(max-width:1000px) and (min-width:650px) and (max-height:600px){#board{max-height:none}}