:root{--paper: #ebe0c3;--paper-2: #f4ecd6;--ink: #2b2118;--ink-soft: #5a4a36;--rule: rgba(43, 33, 24, .35);--red: #b03a2e;--green: #3d6b3a;--font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--gutter: max(12px, env(safe-area-inset-left))}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#stage{position:fixed;inset:0;touch-action:none}#stage canvas{display:block;touch-action:none}#hud{position:fixed;inset:0;pointer-events:none}#hud>*{pointer-events:auto}button{font-family:var(--font);color:var(--ink);cursor:pointer}.panel{background:#f4ecd6f0;border:1.5px solid var(--ink);box-shadow:3px 3px #2b21182e;border-radius:4px}.sub{font-size:13px;color:var(--ink-soft);font-style:italic}.hidden{display:none!important}#topbar{position:absolute;top:max(10px,env(safe-area-inset-top));left:var(--gutter);right:var(--gutter);display:flex;align-items:flex-start;gap:12px;pointer-events:none}#topbar>*{pointer-events:auto}.title-block{background:#f4ecd6e6;border:1.5px solid var(--ink);border-radius:4px;padding:6px 12px}.title{font-size:18px;font-weight:600;letter-spacing:.02em}.score{margin-left:auto;background:#f4ecd6e6;border:1.5px solid var(--ink);border-radius:4px;padding:6px 12px;font-size:14px;display:flex;gap:14px;align-items:center}.score .fleets{display:inline-flex;align-items:center;gap:8px}.score .fleet{white-space:nowrap}.score .fleet-name{color:var(--ink-soft);font-style:italic;font-size:13px}.score .flag{display:inline-block;width:14px;height:10px;border:1px solid var(--ink);margin-right:6px;vertical-align:-1px}.icon-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper-2);font-size:20px;font-weight:600;flex:none}.icon-btn.small{width:30px;height:30px;font-size:18px;line-height:1}#wind{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 54px);right:var(--gutter);display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px}.rose-ring{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.6}.rose-n{font-size:13px;text-anchor:middle;dominant-baseline:middle;fill:var(--ink);font-family:var(--font)}.wind-shaft,.wind-feather{stroke:var(--ink);stroke-width:3;fill:none;stroke-linecap:round}.wind-head{fill:var(--ink)}.wind-dir{font-size:16px;font-weight:600}#tide{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 140px);right:var(--gutter);padding:6px 12px;min-width:170px}.tide-bar{position:relative;height:6px;margin-top:5px;background:#2b21181f;border-radius:3px}.tide-bar:after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--ink-soft)}.tide-bar i{position:absolute;top:0;bottom:0;border-radius:3px;background:#3d6478}#toasts{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 60px);left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:min(420px,calc(100% - 180px))}.toast{background:#f4ecd6f5;border:1.5px solid var(--ink);border-radius:4px;padding:5px 12px;font-size:14px;text-align:center;animation:toast 4s forwards}.toast.bad{border-color:var(--red);color:var(--red)}.toast.good{border-color:var(--green);color:var(--green)}@keyframes toast{0%{opacity:0;transform:translateY(-6px)}8%,80%{opacity:1;transform:none}to{opacity:0}}.hint{position:absolute;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 64px);left:50%;transform:translate(-50%);font-style:italic;font-size:14px;color:var(--ink-soft);background:#f4ecd6cc;padding:4px 10px;border-radius:4px;pointer-events:none;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}.hint:empty{display:none}#selection{position:absolute;left:var(--gutter);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 62px);width:min(330px,calc(100% - 2 * var(--gutter)));padding:10px 12px;max-height:calc(100% - 200px);overflow-y:auto}.sel-head{display:flex;align-items:flex-start;gap:8px;cursor:grab;touch-action:none;margin:-4px -4px 0;padding:4px;border-radius:3px}.sel-head:hover{background:#2b21180d}.sel-title{flex:1;min-width:0}.grip{color:var(--ink-soft);font-size:16px;line-height:24px}#selection.dragging{box-shadow:6px 8px #2b211838}#selection.dragging .sel-head{cursor:grabbing}#selection.minimized>:not(.sel-head){display:none}.toast.story{font-style:italic;max-width:100%;border-color:var(--ink);background:#f4ecd6fa;animation-duration:9s}#zoombar{position:absolute;right:var(--gutter);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 56px);display:flex;flex-direction:column;padding:3px;gap:3px}.zbtn{width:40px;height:40px;border:none;background:none;border-radius:3px;font-size:20px;font-weight:600}.zbtn:hover{background:#2b211814}.sel-name{font-size:18px;font-weight:600}.chips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}.chip{font-size:12px;border:1px solid var(--rule);border-radius:10px;padding:2px 8px;background:var(--paper)}.chip.warn{border-color:var(--red);color:var(--red)}.ship-list{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}.ship-row{display:grid;grid-template-columns:1fr 70px;gap:8px;align-items:center;font-size:13px;padding:3px 4px;border-radius:3px;background:none;border:none;text-align:left}.ship-row:hover{background:#2b211812}.ship-row.struck{opacity:.45;text-decoration:line-through}.bars{display:flex;flex-direction:column;gap:2px}.bar{height:4px;background:#2b21181f;border-radius:2px;overflow:hidden}.bar>i{display:block;height:100%}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.act{border:1.5px solid var(--ink);background:var(--paper);border-radius:4px;padding:6px 4px;font-size:12px;min-height:40px;line-height:1.15}.act .glyph{display:block;font-size:16px}.act.on{background:var(--ink);color:var(--paper-2)}#timebar{position:absolute;right:var(--gutter);bottom:max(12px,env(safe-area-inset-bottom));display:flex;padding:3px;gap:3px}.tbtn{min-width:44px;height:40px;border:none;background:none;border-radius:3px;font-size:15px;font-weight:600}.tbtn.on{background:var(--ink);color:var(--paper-2)}.radial{position:absolute;width:0;height:0}.radial .ring{position:absolute;left:-92px;top:-92px;width:184px;height:184px;border-radius:50%;border:2px dashed rgba(43,33,24,.5);background:radial-gradient(circle,#f4ecd68c 30%,#f4ecd600 72%);animation:pop .14s ease-out;pointer-events:none}.radial button{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper-2);box-shadow:2px 2px #2b211833;font-size:10.5px;line-height:1.05;padding:2px;animation:pop .14s ease-out}.radial button .glyph{display:block;font-size:18px;margin-bottom:1px}.radial button.on{background:var(--ink);color:var(--paper-2)}.radial button.center{width:40px;height:40px;margin:-20px 0 0 -20px;font-size:18px}@keyframes pop{0%{transform:scale(.6);opacity:0}}.modal{position:absolute;inset:0;background:#2b211859;display:grid;place-items:center;padding:16px}.modal-card{background:var(--paper-2);border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:4px;border-radius:2px;max-width:560px;width:100%;max-height:calc(100% - 32px);overflow-y:auto;padding:22px 24px 0}.modal-card h1{margin:0;font-size:28px}.modal-card h2{margin:18px 0 6px;font-size:16px;text-transform:uppercase;letter-spacing:.08em}.modal-card p{line-height:1.5;margin:8px 0}.modal-card ul{padding-left:18px;margin:6px 0;line-height:1.5}.modal-card .scenario-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}.scenario{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1.5px solid var(--rule);background:var(--paper);border-radius:4px;padding:10px 12px;font-size:16px}.scenario.on{border-color:var(--ink);box-shadow:inset 4px 0 0 var(--ink)}.segmented{display:inline-flex;border:1.5px solid var(--ink);border-radius:4px;overflow:hidden}.seg{border:none;background:var(--paper);padding:8px 16px;font-size:15px;min-height:40px}.seg+.seg{border-left:1px solid var(--rule)}.seg.on{background:var(--ink);color:var(--paper-2)}.modal.menu{background:linear-gradient(90deg,#2b211861,#2b21181a 45%,#2b211800 70%);place-items:center start;padding-left:max(24px,env(safe-area-inset-left))}.modal.menu .modal-card{max-width:460px;padding-bottom:0}.modal.menu .modal-actions{position:sticky;bottom:0;background:var(--paper-2);margin:12px -24px 0;padding:12px 24px;border-top:1px solid var(--rule)}#hud.in-menu #coach,#hud.in-menu #selection,#hud.in-menu .hint,#hud.in-menu #toasts,#hud.in-menu #zoombar,#hud.in-menu #timebar{display:none!important}.groups{display:flex;flex-direction:column;gap:8px}.group{border:1.5px solid var(--rule);border-radius:4px;background:#ebe0c380}.group.open{border-color:var(--ink)}.group-head{display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:8px;background:none;border:none;padding:10px 12px;font-size:16px;font-weight:600;text-align:left;min-height:44px}.group-blurb{margin:-4px 12px 8px!important}.group .scenario-list{padding:0 8px 8px;margin-top:0}.scenario .row{display:flex;width:100%;justify-content:space-between;align-items:baseline}.scenario .year{font-variant-numeric:oldstyle-nums;color:var(--ink-soft)}.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.tag{font-size:11px;border:1px solid var(--rule);border-radius:9px;padding:1px 7px;background:var(--paper-2)}@media(max-width:640px){.modal.menu{background:#2b21181f;place-items:end center;padding:8px}.modal.menu .modal-card{max-height:64%;padding:16px 16px 0}.modal.menu .modal-actions{margin:12px -16px 0;padding:10px 16px}.modal.menu h1{font-size:22px}}.modal-actions{display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:0;background:var(--paper-2);margin:16px -24px 0;padding:12px 24px 16px;border-top:1px solid var(--rule)}.btn{border:1.5px solid var(--ink);background:var(--paper);border-radius:4px;padding:10px 18px;font-size:16px;min-height:44px}.btn.primary{background:var(--ink);color:var(--paper-2)}.result-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}.result-table td,.result-table th{border-bottom:1px solid var(--rule);padding:4px 6px;text-align:left}.sel-toggle{display:none}@media(max-width:640px){:root{--gutter: max(8px, env(safe-area-inset-left))}#topbar{gap:6px}.title-block{padding:4px 8px}.title{font-size:14px}.sub{font-size:11px}.score{font-size:12px;gap:8px;padding:5px 8px;flex-direction:column;align-items:flex-start}.score .pts-word,.score .fleet-name{display:none}.icon-btn{width:34px;height:34px;font-size:17px}#wind{top:calc(max(10px,env(safe-area-inset-top)) + 64px);padding:3px 8px 3px 3px;gap:4px}#wind svg{width:42px;height:42px}.wind-dir{font-size:13px}#toasts{left:calc(var(--gutter) + 52px);right:var(--gutter);width:auto;transform:none;top:calc(max(10px,env(safe-area-inset-top)) + 180px)}#tide{top:calc(max(10px,env(safe-area-inset-top)) + 118px);padding:3px 8px;min-width:130px}#hud.has-selection .hint{display:none}#zoombar{left:var(--gutter);right:auto;top:calc(max(10px,env(safe-area-inset-top)) + 64px);bottom:auto}.zbtn{width:36px;height:36px}#selection{left:var(--gutter);right:var(--gutter);width:auto;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 52px);max-height:46%;padding:8px 10px}.sel-name{font-size:16px}.sel-head{align-items:center}.sel-toggle{display:inline-block;border:1px solid var(--rule);background:var(--paper);border-radius:10px;font-size:12px;padding:3px 8px;margin-left:auto}.chips{margin:6px 0}#selection:not(.expanded) .ship-list{display:none}.actions{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:4px}.act{font-size:11px;min-height:44px;padding:4px 2px}#timebar{bottom:max(8px,env(safe-area-inset-bottom))}.tbtn{min-width:40px;height:36px}}#coach{position:absolute;left:var(--gutter);top:calc(max(10px,env(safe-area-inset-top)) + 60px);width:min(330px,calc(100% - 2 * var(--gutter) - 116px));padding:8px 12px 10px;border:2px solid #2e8b57;box-shadow:3px 3px #2e8b5740}#coach.fresh{animation:coach-in .5s ease-out}@keyframes coach-in{0%{transform:translateY(-6px);box-shadow:0 0 0 6px #2e8b5759}to{transform:none}}.coach-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.coach-title{font-size:17px;font-weight:600;margin-top:2px}.coach-text{margin:4px 0 0;font-size:15px;line-height:1.4}.coach-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:8px}.coach-actions:not(:has(>:not(.hidden))){display:none}#coach.minimized .coach-text,#coach.minimized .coach-actions{display:none}.btn.small{min-height:36px;padding:6px 16px;font-size:15px}.link-btn{background:none;border:none;padding:6px 2px;font-size:13px;font-style:italic;color:var(--ink-soft);text-decoration:underline}@media(max-width:1000px){#hud.coaching #toasts{top:calc(max(10px,env(safe-area-inset-top)) + 72px + var(--coach-h, 0px))}}@media(max-width:640px){#coach{left:calc(var(--gutter) + 52px);right:var(--gutter);width:auto;top:calc(max(10px,env(safe-area-inset-top)) + 126px);padding:6px 10px 8px}#hud.coaching #toasts{top:calc(max(10px,env(safe-area-inset-top)) + 134px + var(--coach-h, 0px))}.coach-title{font-size:15px}.coach-text{font-size:13px}}.toast.award{display:flex;align-items:center;gap:8px;text-align:left;border-color:#9a6b1f;animation-duration:6s;padding:4px 12px 4px 4px}.toast.award svg{flex:none;display:block}.toast.award small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}.award-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 14px;margin:6px 0 4px}.award-row{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.3}.award-row svg{flex:none;display:block}.award-row.locked>span{opacity:.7}.award-row .when{margin-left:6px;font-size:12px;color:var(--green)}.text-in{font:inherit;font-size:16px;padding:6px 10px;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper-2);color:var(--ink);width:min(320px,100%);-webkit-user-select:text;user-select:text}.text-in.code{width:7em;letter-spacing:.25em;text-transform:uppercase;font-weight:700}.check{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:6px 0}.room-code{letter-spacing:.18em;font-weight:700}.mp-link{font-size:13px;word-break:break-all;-webkit-user-select:text;user-select:text}.mp-status{color:var(--red)}#timebar .tbtn.voted{outline:1.5px dashed var(--ink);outline-offset:-4px}#timebar .tbtn:disabled{opacity:.35}.sound-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.volume{width:min(200px,50vw);accent-color:var(--ink)}
