:root{color-scheme:dark;--bg:#102822;--panel:#18342d;--cream:#f5edda;--muted:#a7b9a7;--gold:#e5bb71;--line:#ffffff1c;font-family:Arial,Helvetica,sans-serif;color:var(--cream);background:var(--bg)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 40% -10%,#304c39 0,transparent 65%),var(--bg)}button,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);color:var(--cream);background:#ffffff08;border-radius:8px;padding:10px 14px;transition:background .15s,transform .15s}button:hover{background:#ffffff17}button:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.4;cursor:default}a{color:var(--gold)}main{max-width:1440px;margin:auto;padding:0 48px}header{height:100px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--cream);display:flex;gap:12px;align-items:center;font-size:19px;letter-spacing:4px;font-weight:700}.brand-small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px;color:var(--muted)}.mark{font-size:42px;color:var(--gold)}.top-actions{display:flex;gap:22px;align-items:center;font-size:12px}.offline{color:var(--muted)}.offline:first-letter{color:#a5c98f}.intro{display:flex;justify-content:space-between;align-items:end;padding:36px 0 28px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--gold);line-height:1.6}h1,h2{font-family:Georgia,serif;font-weight:400}h1{font-size:56px;line-height:1;margin:14px 0}h1 span{font:11px Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;margin-left:20px;display:inline-block;color:var(--gold)}.intro p{font-size:14px;color:var(--muted);margin:0;line-height:1.6}.chapter{display:flex;flex-direction:column;text-align:right;gap:16px;font-size:11px;line-height:1.7;color:var(--muted)}.chapter span:first-child{font-size:9px;letter-spacing:2px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.play-panel{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#142e28}.scoreboard{height:80px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;gap:16px}.seat{display:flex;align-items:center;gap:12px}.seat strong{font-size:13px;display:block;margin-bottom:5px}.seat span:not(.token){font-size:10px;color:var(--muted)}.pearl-seat{text-align:right}.versus{font:italic 18px Georgia;color:var(--muted)}.token{border-radius:50%;width:28px;height:28px;display:inline-block;box-shadow:0 3px 5px #0008}.jade,.cell.black .orb{background:radial-gradient(circle at 32% 25%,#82c4a5 0,#347b64 25%,#124b3d 62%,#05231d 90%);border:1px solid #94c6aa66}.pearl,.cell.white .orb{background:radial-gradient(circle at 32% 25%,#fffdf3 0,#ede2c8 30%,#c1ae89 65%,#80704e 95%);border:1px solid #fffa}.dots{display:flex;gap:3px;max-width:30px;flex-wrap:wrap}.dots i{width:6px;height:6px;border-radius:50%;background:#ffffff22}.dots i.filled{background:var(--gold)}.table{position:relative;background:#9c632e url('table.webp') center/cover;isolation:isolate;padding:12px 38px 26px;aspect-ratio:1.25;display:flex;align-items:center;justify-content:center}.table:before{position:absolute;inset:0;background:#3a260c22;content:'';z-index:-1}.board-frame{width:min(100%,610px);aspect-ratio:1;position:relative;filter:drop-shadow(0 13px 15px #211205a0)}#board{position:absolute;inset:0;background:linear-gradient(135deg,#315e4b,#123b30 45%,#0e2923);clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);border-radius:20px}.cell{position:absolute;width:8.6%;height:8.6%;padding:0;border:0;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 50% 70%,#1e4837,#09271e);box-shadow:inset 0 3px 4px #0008,0 1px 1px #b1cc8a44;touch-action:manipulation;isolation:isolate}.cell:hover{background:#446850}.cell .orb{position:absolute;inset:5%;border-radius:50%;box-shadow:0 3px 3px #0008,inset 0 0 3px #fff2;pointer-events:none;transition:transform .18s}.cell .coord{position:absolute;inset:auto 0 -16%;font-size:clamp(6px,.75vw,9px);letter-spacing:1px;opacity:.4;pointer-events:none;text-transform:uppercase;z-index:2}.cell.selected{outline:3px solid var(--gold);outline-offset:2px}.cell.selected .orb{transform:translateY(-3px)}.cell.destination:after{content:'+';position:absolute;inset:18%;border-radius:50%;background:#f5cf88e8;color:#17382c;font-weight:700;display:grid;place-items:center;font-size:20px;box-shadow:0 0 0 2px #f9ddab77;pointer-events:none;z-index:3}.cell.destination:hover:after{background:#fff4ce}.cell.last{box-shadow:0 0 0 2px #b7c59988}.cell:focus-visible{outline:3px dashed #fff;outline-offset:3px}.table-note{position:absolute;bottom:10px;font-size:8px;letter-spacing:5px;color:#f4dfa9cc}.turnbar{min-height:78px;padding:14px 24px;display:flex;gap:12px;align-items:center}.turn-light{width:8px;height:8px;background:var(--gold);border-radius:50%;flex-shrink:0}.turnbar strong{display:block;font-size:14px;margin-bottom:6px}.turnbar div>span{display:block;font-size:11px;color:var(--muted);line-height:1.5}.turnbar>span:last-child{margin-left:auto;color:var(--muted);white-space:nowrap;font-size:9px;letter-spacing:1px}.toolbar{display:flex;gap:8px;padding:0 20px 20px;flex-wrap:wrap}.toolbar button{font-size:11px;padding:9px 12px}aside{display:flex;flex-direction:column;gap:16px}.card{background:#1d382e;border:1px solid var(--line);border-radius:12px;padding:22px}h2{font-size:25px;line-height:1.25;margin:12px 0 20px}.card label{display:block;font-size:10px;letter-spacing:.4px;margin:16px 0 7px;color:var(--muted)}select{width:100%;border:1px solid #ffffff20;border-radius:7px;color:var(--cream);background:#132c25;padding:12px 10px;font-size:12px}.primary{background:var(--gold);color:#17352a;border:none;font-weight:700;width:100%;margin-top:20px;padding:13px;text-align:left;font-size:12px}.primary:hover{background:#f4cd8e}.primary span{float:right}.small{font-size:10px;line-height:1.5;color:var(--muted);margin:12px 0 0}.guidance{background:#efe7d5;color:#213b2e}.guidance .eyebrow{color:#80703e}.guidance h2{font-size:23px;margin-bottom:12px}.guidance p{font-size:12px;line-height:1.7;color:#536352}.guidance button{color:#274935;border-color:#36583e33}.guidance .primary{background:#244b3a;color:#fff}.text-button{font-size:11px;text-align:left;padding:10px 0;border:0;background:transparent;font-weight:700;margin-top:12px}.text-button:hover{background:transparent;text-decoration:underline}#destinations{display:flex;flex-wrap:wrap;gap:6px}#destinations button{padding:7px 10px;background:#d9d9b9;font-size:12px}.tip{display:flex;gap:14px;padding:0 12px;font-size:12px;color:var(--muted);line-height:1.7}.tip>span{font-size:25px;color:var(--gold);padding-top:8px}.tip strong{font-weight:400;color:var(--cream)}footer{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:9px;letter-spacing:1px;color:var(--muted);padding:26px 0}footer button{font-size:10px;border:0}dialog{max-width:580px;width:calc(100% - 32px);max-height:85vh;border:1px solid #69826a;border-radius:18px;padding:32px;background:#1a352c;color:var(--cream);line-height:1.8;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#001b12b3;backdrop-filter:blur(5px)}dialog h2{font-size:34px;margin-right:20px}dialog li{padding:6px 0}dialog p,dialog li{font-size:13px;color:#cfdbc9}.close{float:right;font-size:24px;padding:0 10px}#confirm p{font-size:12px}#confirm button{font-size:11px;padding:8px}#lesson-note{font-weight:700}.cell.hinted{outline:3px dashed #f5d6a0;outline-offset:2px}[hidden]{display:none!important}@media(min-width:1350px){.table{aspect-ratio:1.32}}@media(max-width:1000px){main{padding:0 24px}.layout{grid-template-columns:minmax(0,1fr) 270px;gap:16px}.card{padding:18px}.scoreboard{padding:0 14px}.dots{display:none}.table{padding:10px 15px 20px}.toolbar{padding:0 12px 16px;gap:5px}.toolbar button{padding:9px}.chapter{display:none}.offline{display:none}}@media(max-width:760px){main{padding:0 16px}header{height:76px}.brand{font-size:15px;letter-spacing:3px}.mark{font-size:32px}.top-actions button{font-size:11px;padding:8px}.intro{padding:26px 0 22px}h1{font-size:43px}h1 span{font-size:9px;margin-left:12px}.intro p{font-size:12px;max-width:310px}.eyebrow{font-size:8px;letter-spacing:1.8px}.layout{display:flex;flex-direction:column;gap:16px}.play-panel,aside{width:100%}.table{aspect-ratio:1.1;padding:10px 8px 20px}.board-frame{width:min(100%,540px)}.scoreboard{height:70px}.seat{gap:8px}.seat strong{font-size:11px}.seat span:not(.token){font-size:9px}.token{width:22px;height:22px}.cell .coord{font-size:7px}.turnbar{padding:14px 16px;min-height:80px}.turnbar strong{font-size:13px}.turnbar>span:last-child{display:none}.turnbar div>span{font-size:11px}.toolbar button{font-size:10px;padding:9px}.card{padding:20px}.setup{order:2}.guidance{order:1}.tip{order:3}aside{display:grid;grid-template-columns:1fr}.guidance h2{margin-top:8px}footer{flex-wrap:wrap;padding:20px 0;font-size:8px}footer>span:last-child{width:100%}.board-frame{filter:drop-shadow(0 8px 7px #21120580)}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}