:root{--ink:#193d35;--cream:#faf5e8;--paper:#eee4ca;--red:#b9352b;--line:#d4c5a6;--gold:#c9a657;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#e5dac0}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 30% 40%,#f6edda,#dfd2b5);height:100dvh;overflow:hidden}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{border:1px solid #bdad8c;border-radius:8px;background:#fffaf0;color:#25483d;padding:10px 14px;cursor:pointer;font-weight:700;min-height:42px;transition:background .15s,box-shadow .15s}button:hover:not(:disabled){background:#e6dabd;box-shadow:0 2px 0 #b5a581}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:3px solid #055da0;outline-offset:3px}button.primary{background:var(--red);border-color:#8f2921;color:white;box-shadow:0 3px 0 #7d261f}button.primary:hover:not(:disabled){background:#8c271f;color:white}a{color:var(--ink);font-weight:bold}header{height:64px;padding:10px 3%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c3b291;background:#f8f1df;gap:12px;font-size:13px}header nav{display:flex;gap:6px}header button{font-size:12px;min-height:36px;padding:8px 10px}.edition{letter-spacing:2px;font-size:10px;font-weight:bold}main{height:calc(100dvh - 64px);display:grid;grid-template-columns:minmax(0,1fr) 330px;max-width:1320px;padding:22px 28px 16px;margin:auto;gap:34px}.board-panel{min-height:0;display:flex;flex-direction:column;gap:10px}.masthead{display:flex;justify-content:space-between;align-items:center;padding:0 18px;flex-shrink:0}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:bold}h1{font:bold italic 48px/1 Georgia,serif;letter-spacing:-2px;color:var(--red);margin:4px 0 0;text-shadow:1px 2px #ffe8a7}h1 span{display:inline-block;margin-left:18px;color:var(--ink);font:11px Arial;letter-spacing:1px;text-shadow:none;text-transform:uppercase}.badge{font-size:9px;letter-spacing:1.5px;line-height:1.5;text-align:center;border:1px solid #ac9870;border-radius:50%;padding:14px 9px;transform:rotate(8deg)}#boardViewport{flex:1;min-height:0;position:relative;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;touch-action:pan-x pan-y;border-radius:24px;background:radial-gradient(ellipse,#153f36,#0f302a);box-shadow:inset 0 2px 12px #071b1780,0 4px 12px #68553135}#boardSurface{position:relative;margin:auto}#board{display:block;width:100%;height:100%;overflow:visible}.zoom{display:flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0}.zoom button{padding:6px 10px;min-height:36px;font-size:11px}.zoom output{font-size:11px;min-width:34px;text-align:center}.zoom button[aria-pressed=true]{background:#254b3e;color:white}.play-panel{border-left:1px solid #bcab89;padding-left:26px;display:flex;flex-direction:column;min-height:0}.table-label{font-size:10px;font-weight:bold;letter-spacing:2px;display:flex;justify-content:space-between;margin:4px 0 16px}.table-label span{font-size:9px;letter-spacing:0;color:#78674a}#players{display:grid;gap:8px}.player{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #c7b999;border-radius:10px;background:#f5ecd8;min-width:0}.player.active{background:#fffaf0;border-color:var(--ink);box-shadow:inset 3px 0 var(--ink)}.player .dot{width:18px;height:24px;border-radius:9px 9px 6px 6px;box-shadow:inset 3px 2px 4px #ffffff77,inset -2px -2px 3px #0006;flex-shrink:0}.player strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;display:block}.player small{font-size:10px;display:block;margin-top:3px;color:#6d624c}.player .count{margin-left:auto;font:bold 20px Georgia;white-space:nowrap}.player .count small{font:9px Arial;text-align:center}.turn-panel{margin-top:20px;border-top:1px solid #bbab87;padding-top:18px}.turn-top{display:flex;justify-content:space-between;align-items:center;gap:8px}h2{font:700 27px/1.1 Georgia,serif;margin:6px 0 12px}#turnName{font-size:25px;margin:6px 0;overflow-wrap:anywhere}#dieRead{width:52px;height:52px;display:grid;place-items:center;background:var(--cream);border:1px solid #a6946e;border-radius:10px;box-shadow:0 3px 0 #b8a57f;font:bold 31px Georgia;flex-shrink:0}#message{font-size:14px;line-height:1.5;min-height:62px;margin:12px 0 6px}#previewText{font-size:12px;font-weight:bold;min-height:16px;margin:5px 0 12px}.actions{display:flex;gap:6px}.actions button{width:100%;font-size:15px;min-height:48px}#pegChoices{display:flex;gap:6px;margin-top:10px}#pegChoices button{flex:1;padding:8px 4px;font-size:12px}#pegChoices button.selected{background:#214d3e;color:white}.utility{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.utility button{min-height:32px;padding:5px 8px;font-size:11px}.note{margin-top:auto;padding-top:22px}.note span{font-size:10px;letter-spacing:2px;font-weight:bold}.note p{font:italic 18px/1.5 Georgia;color:#776449;margin:8px 0}footer{font-size:9px;line-height:1.5;color:#78694f;border-top:1px solid #cbb995;padding-top:12px;margin-top:18px}dialog{border:1px solid #c7b58d;border-radius:18px;padding:28px;background:#fff8e8;color:var(--ink);box-shadow:0 20px 80px #001d2277;max-width:640px;width:calc(100% - 24px);max-height:90dvh;overflow:auto}dialog::backdrop{background:#092c27aa;backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dialog-head button{font-size:20px;padding:2px 12px;background:transparent}.dialog-head h2{margin-top:0}dialog p{font-size:14px;line-height:1.6}label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:bold;margin:12px 0}input,select{background:#fffef8;color:#1d4038;border:1px solid #bcae8b;border-radius:6px;padding:10px;width:100%;min-height:42px}input[type=checkbox]{width:18px;min-height:18px;height:18px;accent-color:var(--ink)}.check{flex-direction:row;align-items:center;gap:10px}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.seat-edit{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:8px;align-items:center;border-top:1px solid #dfd1b0;padding:8px 0}.seat-edit input,.seat-edit select{font-size:12px;padding:8px}.seat-edit label{margin:0}.form-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;align-items:center}.error{color:#9a2c22;white-space:pre-wrap}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.help-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.help-steps b{font-size:45px;color:var(--red)}.help-steps h3{font:700 19px Georgia}.help-steps p{font-size:13px}#log{padding-left:25px}#log li{padding:8px 0;border-bottom:1px solid #d8c8a9;font-size:13px;line-height:1.5}#roomDisplay{font:bold 42px Georgia;letter-spacing:5px;margin:15px 0;color:var(--red)}#tokenDisplay{word-break:break-all;display:block;padding:12px;background:#e9dfc5}#seats p{border-bottom:1px solid #d3c3a0;padding:10px}#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:20;max-width:90vw;border-radius:10px;background:#163b32;color:#fff8e8;padding:12px 18px;box-shadow:0 3px 20px #0004;display:none;font-size:13px}#toast.show{display:block}[hidden]{display:none!important}.peg{cursor:pointer;outline:none}.peg .halo{opacity:0}.peg.legal .halo{opacity:1;stroke:#fff9d5;stroke-width:5}.peg.selected .halo{stroke:#173d35;stroke-width:7}.peg:focus-visible .halo{opacity:1;stroke:#064fba;stroke-width:6}.bubble{cursor:pointer;outline:none}.bubble:focus-visible circle:first-child{stroke:#fff;stroke-width:5}.bubble.locked{cursor:default}.bubble.popping{animation:pop .65s ease-in-out}.bubble.popping .die-face{animation:tumble .65s ease-in-out;transform-box:fill-box;transform-origin:center}.preview-route{fill:none;stroke:#123e36;stroke-width:8;stroke-linecap:round;stroke-dasharray:9 10;opacity:.75;pointer-events:none}.target-ring{fill:#fff3a6aa;stroke:#133e35;stroke-width:5;pointer-events:none}.peg.moving{filter:drop-shadow(0 7px 3px #0006)}@keyframes pop{25%{transform:translate(400px,400px) scale(.92)}65%{transform:translate(400px,400px) scale(1.06)}}@keyframes tumble{25%{transform:rotate(125deg) scale(.8)}60%{transform:rotate(255deg) scale(1.1)}100%{transform:rotate(360deg)}}
@media(max-height:800px) and (min-width:761px){main{padding-top:12px;gap:24px}.masthead h1{font-size:38px}.badge{display:none}.note{display:none}.player{padding:7px}.turn-panel{margin-top:12px;padding-top:12px}footer{margin-top:auto}.play-panel{padding-left:18px}}
@media(max-width:760px){header{height:48px;padding:5px 10px;gap:4px;font-size:11px}.edition{display:none}header nav{gap:3px}header button{font-size:10px;padding:5px 7px;min-height:34px}main{height:calc(100dvh - 48px);padding:6px 8px;gap:6px;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(180px,1fr) auto}.board-panel{gap:4px;min-height:0}.masthead{padding:0 5px;min-height:32px}.masthead .eyebrow,.badge{display:none}h1{font-size:27px;margin:0}h1 span{font-size:8px;margin-left:10px}.zoom{gap:4px}.zoom button{font-size:10px;min-height:34px;padding:5px 8px}#boardViewport{border-radius:15px}.play-panel{padding:0;border:0;display:block}.table-label,.note,footer{display:none}#players{grid-template-columns:repeat(4,1fr);gap:4px}.player{padding:5px;gap:5px;border-radius:6px}.player .dot{width:10px;height:16px}.player strong{font-size:10px;max-width:67px}.player small{font-size:8px;margin-top:2px}.player .count{font-size:13px}.player .count small{display:none}.turn-panel{margin-top:5px;padding-top:6px}.turn-top{float:left;width:125px;display:flex;justify-content:flex-start;gap:6px}.turn-top>div:first-child{order:2;min-width:0}#turnName{font-size:16px;margin:2px 0}.eyebrow{font-size:7px;letter-spacing:.8px}#dieRead{width:34px;height:34px;font-size:23px;border-radius:6px}#message{font-size:12px;line-height:1.3;min-height:40px;max-height:47px;overflow:auto;margin:0 0 4px 130px}#previewText{clear:both;font-size:10px;min-height:12px;margin:2px 0 5px}.actions button{min-height:42px;font-size:13px;padding:9px}#pegChoices{margin-top:5px;gap:5px}#pegChoices:empty{display:none}#pegChoices button{min-height:36px;font-size:11px;padding:6px}.utility{margin-top:4px;gap:5px}.utility button{min-height:30px;font-size:10px;padding:4px 9px}dialog{padding:18px;max-height:94dvh}.dialog-head h2{font-size:24px}.seat-edit{grid-template-columns:1.4fr 1fr;gap:5px;padding:8px 0}.seat-edit label{font-size:10px}.help-steps{grid-template-columns:1fr;gap:5px}.help-steps article{display:grid;grid-template-columns:45px 1fr;gap:0 10px}.help-steps b{grid-row:1/3;font-size:35px}.help-steps h3{margin:4px 0}.help-steps p{margin:3px 0}.settings-grid{gap:0 10px}}
@media(max-height:500px) and (max-width:1000px){header{height:42px}main{height:calc(100dvh - 42px);grid-template-columns:minmax(230px,1fr) minmax(245px,310px);grid-template-rows:1fr;padding:5px 8px;gap:10px}.masthead{display:none}.play-panel{overflow:auto}.note,footer{display:none}.table-label{display:none}#players{grid-template-columns:1fr 1fr;gap:3px}.player{padding:4px}.turn-panel{margin-top:5px;padding-top:5px}#message{font-size:11px}.utility button{min-height:30px}.zoom button{min-height:32px;font-size:9px;padding:5px}.zoom{gap:3px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.bubble.popping,.bubble.popping .die-face{animation:none}}
/* Compact landscape controls also apply to phones wider than 760 CSS pixels. */
@media(max-height:500px) and (max-width:1000px){
.play-panel{padding-left:0;border:0}.player{gap:5px}.player .dot{width:10px;height:16px}.player strong{font-size:11px}.player small{font-size:8px;margin-top:1px}.player .count{font-size:14px}.player .count small{display:none}.turn-top{float:left;width:126px;justify-content:flex-start;gap:6px}.turn-top>div:first-child{order:2;min-width:0}.turn-top .eyebrow{font-size:7px;letter-spacing:.8px}#turnName{font-size:16px;margin:2px 0}#dieRead{width:34px;height:34px;font-size:23px;border-radius:6px}#message{margin:0 0 4px 130px;min-height:38px;max-height:46px;overflow:auto;font-size:11px;line-height:1.3}#previewText{clear:both;font-size:10px;min-height:12px;margin:2px 0 5px}.actions button{min-height:42px;font-size:12px;padding:8px}#pegChoices{margin-top:5px;gap:4px}#pegChoices:empty{display:none}#pegChoices button{min-height:36px;font-size:10px;padding:5px}.utility{margin-top:4px;gap:4px}.utility button{font-size:10px;min-height:30px;padding:4px 7px}.zoom{flex-wrap:wrap}.zoom button{font-size:9px;padding:5px 6px}
}