:root{color-scheme:dark;font-family:Georgia,serif;color:#fff4d9;background:#123e45}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 50% 20%,#28666b,#0a2c35);overflow:hidden}button{font:700 12px system-ui,sans-serif;letter-spacing:.04em;color:#fff6df;background:#204c51;border:1px solid #91b4ad;border-radius:6px;min-height:38px;padding:8px 12px;cursor:pointer}button:hover{background:#387170}button:disabled{opacity:.45;cursor:default}button:focus-visible,canvas:focus-visible{outline:3px solid #ffc870;outline-offset:3px}button[hidden]{display:none!important}button:active{transform:translateY(1px)}header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:10px 24px 10px 78px;gap:10px}.brand{font-size:25px;letter-spacing:.1em;white-space:nowrap}.brand b{color:#ffd191}.brand small{display:block;font:10px system-ui,sans-serif;letter-spacing:.22em;margin-top:5px;color:#c5d9cf}nav{display:flex;gap:7px}#help-button{background:#e5eee51a;width:38px;font-size:20px}main{height:calc(100dvh - 103px);display:flex;align-items:center;justify-content:center;padding:0 18px}#cabinet{width:min(100%,calc((100dvh - 205px)*1.5625));border:1px solid #aac0ae;border-radius:10px;overflow:hidden;background:#173e40;box-shadow:0 18px 60px #00191d80}#hud{display:flex;justify-content:space-around;height:48px;align-items:center;background:#163c40;border-bottom:1px solid #82a394}#hud div{text-align:center}small{display:block;font:9px system-ui,sans-serif;letter-spacing:.14em;color:#c5d9cf}strong{display:block;font:700 17px system-ui,sans-serif;margin-top:3px}#board{position:relative;aspect-ratio:25/16;width:100%}canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#toast{position:absolute;left:50%;top:8px;transform:translateX(-50%);max-width:96%;text-align:center;background:#143d42ed;color:#fff1d3;border-radius:6px;padding:6px 12px;font:700 13px system-ui,sans-serif;pointer-events:none}#toast:empty{display:none}#status{position:absolute;left:8px;bottom:7px;padding:5px 9px;border-radius:5px;background:#123e45e8;color:#fff3ce;font:12px system-ui,sans-serif;pointer-events:none;max-width:95%}#command{min-height:62px;display:flex;align-items:center;justify-content:space-between;padding:7px 10px;gap:8px;border-top:1px solid #82a394}.selection{max-width:45%}#order{font:12px system-ui,sans-serif;color:#e0e7cd}#hand{display:flex;gap:4px;margin-top:4px}#hand button{padding:3px 7px;min-height:28px;font-size:10px}.actions{display:flex;gap:5px}#launch{background:#a8523c}.hint{text-align:center;font:10px system-ui,sans-serif;margin:7px;color:#c7d7c9}.danger{color:#ffb28d!important}.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:16px;background:#06242cda}.modal.is-visible{display:flex}.modal-card{width:min(690px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#f1e4c7;color:#183f43;padding:24px;border:5px double #31565a;border-radius:12px;box-shadow:0 20px 70px #0007}.eyebrow{font:700 10px system-ui,sans-serif;letter-spacing:.2em;color:#9a4935}h1{font-size:35px;line-height:1.1;margin:12px 0 16px}h1 em{color:#9d4939;font-style:normal}h2{font-size:27px;margin:8px 0}.modal p{font:14px/1.5 system-ui,sans-serif}.guide{border-top:1px solid #a2a28a}.guide b{font-size:12px;letter-spacing:.06em}.primary{background:#a34c38;color:#fff7df;border-color:#743527;min-height:44px}.modal button{margin:4px 4px 0 0}.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}.plan-grid button{margin:0;text-align:left;min-height:44px}.plan-grid button span{display:block;font-weight:400;letter-spacing:0;font-size:11px;margin-top:4px;line-height:1.4}.tools{grid-template-columns:repeat(2,minmax(0,1fr))}.upgrades{grid-template-columns:repeat(2,minmax(0,1fr))}.piece-icon{display:inline-grid!important;grid-template-columns:repeat(3,8px);grid-template-rows:repeat(2,8px);gap:2px;margin:0 6px 0 0!important;vertical-align:middle}.piece-icon i{width:8px;height:8px;background:#e7c991;border:1px solid #fff0ca}.selected{border-color:#ffd97f!important;background:#486b60!important}body:has(.modal.is-visible) #command{visibility:hidden}#orientation{display:none}
body.touch-device header{height:51px;padding:5px 60px 5px 9px}.touch-device .brand{font-size:18px}.touch-device .brand small{font-size:8px;letter-spacing:.1em}.touch-device nav{gap:4px}.touch-device nav button{min-height:32px;font-size:10px;padding:5px 7px}.touch-device #restart-button{display:none}.touch-device main{height:calc(100dvh - 55px);padding:0 5px 4px}.touch-device #cabinet{position:relative;width:min(calc(100vw - 108px),calc((100dvh - 96px)*1.5625));overflow:visible;margin-right:99px;border-radius:5px}.touch-device #hud{height:40px;border-radius:5px 5px 0 0}.touch-device strong{font-size:13px}.touch-device small{font-size:8px}.touch-device #command{position:absolute;left:calc(100% + 7px);top:0;bottom:0;width:94px;padding:0;border:0;display:flex;justify-content:center}.touch-device .selection{display:none}.touch-device .actions{flex-direction:column;width:100%;gap:5px}.touch-device .actions button{min-height:42px;font-size:10px;padding:5px 3px}.touch-device .hint{display:none}.touch-device #toast{font-size:10px;top:4px;width:max-content;max-width:96%;padding:4px 7px}.touch-device #status{font-size:9px;bottom:4px;left:4px;padding:3px 5px}body.touch-device:has(.modal.is-visible) #command{visibility:hidden}
@media(max-height:450px){.touch-device .brand small{display:none}.modal-card{padding:14px}.modal h1{font-size:25px;margin:3px 0 8px}.modal p{font-size:12px;line-height:1.4}.guide p{margin:8px 0}.plan-grid button{font-size:11px}}
@media(max-width:900px) and (orientation:portrait){body.touch-device #orientation{display:flex;position:fixed;inset:56px 15px 15px;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px;border:1px solid #8da69b;border-radius:15px;font-size:25px}#orientation p{font:16px/1.5 system-ui,sans-serif;max-width:310px}.touch-device main{visibility:hidden}.touch-device nav #sound{display:none}.touch-device .brand{font-size:16px}}
#hand[hidden]{display:none}#cabinet{width:min(100%,calc((100dvh - 224px)*1.5625))}#instruction-modal{z-index:70}
@media(prefers-reduced-motion:reduce){button:active{transform:none}}