:root{color-scheme:dark;--ink:#102a2e;--paper:#f3dfb7;--copper:#efad6a;--mint:#aee4ca;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0;background:#0a1d22;color:var(--paper);height:100dvh;overflow:hidden}button,select,a{touch-action:manipulation}button,select{font:inherit;min-height:44px;border:1px solid #8c8b70;border-radius:3px;background:#17393d;color:var(--paper);padding:8px 14px;cursor:pointer}button:hover{background:#285056}button:active,button.held{background:var(--copper);color:var(--ink)}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:3px}button:disabled{opacity:.45;cursor:default}a{color:var(--copper)}header{height:58px;padding:6px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #63716a;gap:8px}header>a{font-size:11px;letter-spacing:1px;text-decoration:none;display:flex;align-items:center;min-height:44px}header strong{font:900 22px Georgia,serif;letter-spacing:2px}header button{min-width:64px;padding:7px}main{height:calc(100dvh - 58px);max-width:1160px;margin:auto;padding:10px;display:grid;grid-template-columns:1fr 238px;grid-template-rows:60px minmax(0,1fr) 48px;gap:8px}.brief{grid-column:1;display:flex;align-items:center;justify-content:space-between;gap:8px}.brief small{font-size:10px;letter-spacing:1.5px;display:block;color:#b6c9b8}h1{font:700 21px Georgia,serif;margin:4px 0}.objective{text-align:right;white-space:nowrap}.objective b{font-size:22px;color:var(--copper)}.objective small{font-size:9px;letter-spacing:1px}#field{grid-column:1;grid-row:2;position:relative;min-height:0;display:flex;align-items:center;justify-content:center;background:#0d2328;border:1px solid #59675f;overflow:hidden}canvas{max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:21/15;touch-action:none}#stamp{position:absolute;right:5px;bottom:3px;pointer-events:none;font:8px monospace;opacity:.5}.readout{grid-column:1;display:flex;gap:10px;align-items:center;font-size:12px;min-height:0}.readout>b{border:1px solid var(--mint);padding:7px;min-width:78px;text-align:center;font-size:11px;letter-spacing:1px;color:var(--mint)}.readout b.exposed{border-color:var(--copper);color:var(--copper)}#message{line-height:1.3}#controls{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;justify-content:center;gap:20px}.pad{width:176px;height:176px;display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:4px;align-self:center;touch-action:none}.pad button{padding:0;font-size:30px;touch-action:none;border-color:#90a59a}.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}.hub{grid-area:2/2;display:grid;place-items:center;font-size:25px;color:var(--copper)}.actions{display:flex;flex-direction:column;gap:8px}#draw{background:var(--paper);color:var(--ink);font-weight:bold;min-height:58px;text-transform:uppercase;letter-spacing:2px}#draw[aria-pressed=true]{background:var(--copper)}#draw small{display:block;font-size:9px;margin-top:4px;letter-spacing:1px}#tools{display:flex;gap:5px}#tools:empty{display:none}#tools button{flex:1;font-size:11px;padding:5px 2px}#help{font-size:12px}#help span{float:right}dialog{border:1px solid var(--copper);border-radius:4px;background:#102a2e;color:var(--paper);padding:0;max-width:680px;width:calc(100% - 24px);max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 20px 80px #000b}dialog::backdrop{background:#06171bd9}#dialog-content{padding:22px}dialog h2{font:900 34px Georgia,serif;margin:6px 0 12px}dialog p{line-height:1.5;font-size:14px}dialog small{color:#bbcab6}dialog .row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}dialog .row>*{flex:1}dialog .primary{background:var(--copper);color:var(--ink);font-weight:bold}dialog img.cover{width:100%;height:200px;object-fit:cover;border:1px solid #786c51}dialog label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;font-size:14px}.credit{font-size:11px;border-top:1px solid #52605a;padding-top:12px}.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.levels button{min-height:48px;padding:8px}.lore{border-top:1px solid #52605a;padding:12px 0}.lore h3{font:700 20px Georgia,serif;margin:8px 0}.lore a{display:inline-flex;min-height:44px;align-items:center}#save-note{position:fixed;bottom:0;font-size:11px;background:#683b29;width:100%;text-align:center}body[data-motion=reduce] *{scroll-behavior:auto!important}
@media(max-width:600px) and (orientation:portrait){header{height:48px}header strong{font-size:17px;letter-spacing:1px}header>a{font-size:9px}header button{min-height:44px}main{height:calc(100dvh - 48px);padding:6px 8px max(6px,env(safe-area-inset-bottom));grid-template-columns:1fr;grid-template-rows:52px minmax(0,1fr) 46px 176px;gap:4px}.brief{grid-row:1}h1{font-size:18px}.objective b{font-size:20px}.brief small{font-size:9px}#field{grid-row:2}.readout{grid-row:3;font-size:11px;gap:7px}.readout>b{min-width:72px;padding:7px 4px}#controls{grid-row:4;grid-column:1;flex-direction:row;gap:12px;align-items:center;justify-content:center}.pad{flex-shrink:0}.actions{flex:1;gap:6px}#draw{padding:7px 4px;font-size:14px;min-height:56px}#help{padding:5px;min-height:44px}#tools{flex-wrap:wrap;gap:4px}#tools button{flex:1 1 30%;font-size:10px;min-height:44px}#dialog-content{padding:16px}dialog h2{font-size:28px}dialog img.cover{height:150px}}
@media(orientation:landscape) and (max-height:500px){header{height:44px}header strong{font-size:17px}header>a{font-size:9px}main{height:calc(100dvh - 44px);padding:4px 8px;grid-template-columns:minmax(0,1fr) 176px;grid-template-rows:40px minmax(0,1fr) 36px;gap:3px 10px}.brief h1{font-size:16px;margin:1px 0}.brief small{font-size:8px}.objective b{font-size:17px}.objective small{font-size:8px}#controls{gap:4px;justify-content:space-around}.pad{height:156px;width:156px;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px);gap:3px}.actions{gap:3px;display:grid;grid-template-columns:1fr 1fr;width:100%}#draw{min-height:44px;font-size:12px;padding:4px}#draw small{font-size:7px;letter-spacing:0}#help{font-size:10px;padding:4px}#tools{grid-column:1/3;gap:3px}#tools button{min-height:44px;font-size:10px}.readout{font-size:10px;gap:5px}.readout>b{padding:5px;min-width:68px}dialog img.cover{height:110px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(orientation:landscape) and (max-height:500px){#draw{grid-area:1/1}#help{grid-area:1/2}#tools{grid-area:2/1/3/3}}
.atlas{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:12px 0}.atlas>div{height:40px;border:1px solid #62766d;background:#142f34;position:relative;overflow:hidden;color:#789087}.atlas>div.lit{background:#d7c79c;color:#163c3c;border-color:#e7b571}.atlas span{font:10px monospace;position:absolute;left:4px;top:4px}.atlas i{position:absolute;left:35%;top:25%;width:50%;height:55%;border:2px solid currentColor;transform:skewY(-8deg)}.atlas>div:nth-child(3n) i{border-radius:50%}.atlas>div:nth-child(4n) i{width:20%;height:75%;top:10%}.station{font:11px monospace;letter-spacing:1px;color:#b8dfc8}
.cut-count{display:block;font-size:10px;letter-spacing:.4px;line-height:1.2}
#tools button{min-width:44px}
@media(max-width:600px) and (orientation:portrait){.brief h1{font-size:17px;line-height:1.1}.objective{min-width:94px;max-width:110px}.objective b{font-size:18px}.objective small{font-size:8px}.cut-count{font-size:9px}}
@media(max-width:340px) and (orientation:portrait){#controls{gap:8px}.pad{width:156px;height:156px;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px);gap:3px}#tools{gap:4px;flex-wrap:nowrap}#tools button{flex:1 1 0;padding:4px 1px}}
@media(orientation:landscape) and (max-height:500px){.cut-count{font-size:8px}.objective small{font-size:7px}}
@media(orientation:landscape) and (max-height:500px){.brief h1{font-size:14px;line-height:1.05}}