:root{--paper:#f2e6c9;--ink:#173f45;--rust:#b24631;--gold:#e7a940}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#e2d3ae;color:var(--ink);font-family:Arial,Helvetica,sans-serif;display:flex;flex-direction:column;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button{font:800 13px Arial,sans-serif;letter-spacing:.05em;color:var(--paper);background:var(--ink);border:0;border-radius:6px;padding:10px 14px;cursor:pointer}button:focus-visible,canvas:focus-visible{outline:3px solid var(--rust);outline-offset:3px}header{height:68px;min-height:68px;display:flex;align-items:center;gap:28px;padding:8px 20px 8px 72px;background:var(--paper);border-bottom:3px solid var(--ink)}.brand{font:900 27px/1 Arial,sans-serif;letter-spacing:-.07em;white-space:nowrap}.brand span{color:var(--rust)}.brand small{display:block;margin-top:4px;font:800 9px Arial,sans-serif;letter-spacing:.2em}.hud{display:flex;gap:25px;margin:auto}.hud>div{min-width:66px}.hud small{display:block;font-size:9px;font-weight:900;letter-spacing:.13em;color:#6b6957}.hud b{font-size:18px;white-space:nowrap}.tools{display:flex;gap:5px}.tools button{padding:9px}#help-button{border-radius:50%;width:38px;height:38px;font-size:20px;opacity:.78}main{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;padding:10px 16px}#game-shell{position:relative;aspect-ratio:8/5;width:min(100%,calc((100vh - 116px)*1.6),1200px);border:6px solid var(--ink);box-shadow:10px 10px 0 #ae9b74;background:var(--paper)}canvas{display:block;width:100%;height:100%}#banner{position:absolute;left:50%;top:11%;transform:translateX(-50%);font-weight:900;letter-spacing:.1em;color:var(--ink);text-shadow:1px 1px var(--paper);pointer-events:none;white-space:nowrap}footer{height:35px;min-height:35px;padding:10px 18px;display:flex;justify-content:space-between;gap:12px;font-size:10px;font-weight:900;letter-spacing:.08em;background:var(--ink);color:var(--paper)}.rail,#portrait-note{display:none}.modal{display:none;position:fixed;inset:0;z-index:100;place-items:center;background:#173f45df;padding:14px;overflow:auto}.modal.is-visible{display:grid}.modal-card{width:min(650px,100%);max-height:calc(100dvh - 28px);overflow:auto;padding:28px;border:6px double var(--ink);background:var(--paper);box-shadow:12px 12px 0 #102e33;color:var(--ink)}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:900;color:var(--rust)}h1{font:900 clamp(39px,8vw,68px)/.95 Arial,sans-serif;letter-spacing:-.08em;margin:12px 0}h1 em{color:var(--rust);font-style:normal}.modal-card>p{line-height:1.5}.orders{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;font-size:14px;line-height:1.4}.orders b{color:var(--rust)}.tip{font-size:13px}.modal-card>button{width:100%;background:var(--rust);padding:15px}.result{text-align:center}.result h2{font-size:32px}.result button{margin-top:8px}body.instructions-open .rail,body.result-open .rail{visibility:hidden!important;pointer-events:none!important}@media(max-width:900px){header{height:42px;min-height:42px;padding:2px 8px 2px 44px;gap:8px}.brand{font-size:17px}.brand small{font-size:6px;margin-top:2px}.hud{gap:9px}.hud>div{min-width:0}.hud small{font-size:7px}.hud b{font-size:12px}.tools{display:none}footer{display:none}main{padding:0;justify-content:space-between}.rail{display:flex;width:136px;min-width:136px;height:100%;align-items:center;justify-content:center}#left-rail{padding-left:env(safe-area-inset-left)}#right-rail{flex-direction:column;gap:13px;padding-right:env(safe-area-inset-right)}#right-rail button{width:78px;min-height:68px;border-radius:50%;font-size:11px;touch-action:none}#right-rail #draw{min-height:88px;background:var(--rust);font-size:14px}#right-rail button.is-pressed{transform:scale(.94);filter:brightness(1.18)}#game-shell{width:min(calc(100vw - 272px),calc((100dvh - 44px)*1.6));border-width:2px;box-shadow:none}#flyout-nav,#help-button{display:none!important}.modal-card{padding:13px 18px}.orders{font-size:12px}.orders p{margin:6px 0}.modal-card>p{font-size:12px;margin:8px 0}h1{font-size:36px;margin:4px 0}}@media(max-width:700px){.brand small{display:none}.hud{gap:6px}.hud small{font-size:6px}.hud b{font-size:11px}}@media(max-width:599px) and (orientation:portrait){body:not(.instructions-open) #portrait-note{display:flex;position:fixed;inset:42px 0 0;z-index:80;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--paper);font-size:23px;font-weight:900;padding:24px}#portrait-note small{font-size:13px;margin-top:15px}body:not(.instructions-open) main{visibility:hidden}}@media(max-height:390px){header{height:35px;min-height:35px}.modal-card{max-height:calc(100dvh - 16px)}.modal-card>p{margin:5px 0}.orders p{margin:3px 0}}