*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#e8dfc6;color:#263f4d;font-family:system-ui,sans-serif}body{background:radial-gradient(ellipse at top,#f4edda,#d6d4bc)}main{width:min(440px,calc(100% - 20px));margin:auto}header{height:60px;display:flex;align-items:center;justify-content:space-between;gap:8px}strong{font-size:23px;letter-spacing:3px;text-align:center}small{font-size:8px;display:block;letter-spacing:2px;margin-top:5px}a{font-size:11px;color:#4c6570;text-decoration:none}button{min-height:44px;padding:7px 13px;border:1px solid #70898c;border-radius:6px;background:#f9efd5;color:#2f515c;font:600 12px system-ui;box-shadow:0 3px #bec6b9;cursor:pointer}button:disabled{opacity:.5}.hud{display:flex;justify-content:space-between;align-items:center;height:32px;font-size:12px;font-weight:700}.field{height:calc(100svh - 176px);max-height:600px;aspect-ratio:9/13;position:relative;border:6px solid #526e76;border-radius:8px;margin:auto;overflow:hidden;background:#8bb9c3;box-shadow:0 6px #b5bca9}canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}#overlay{position:absolute;inset:0;background:#f9f0daf5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:13px}h1{font-size:clamp(25px,5vw,35px);line-height:1.25;margin:12px 0}em{display:block;font-style:normal;color:#bd6b43}p{font-size:12px;line-height:1.7;margin:5px 0}#guide{font-size:10px;color:#697b7b}#primary{background:#b86540;color:#fff6dd;min-width:170px;margin:12px 0 8px}#restart{margin:0 0 8px}.tools{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px;font-size:11px}footer{text-align:center;font-size:10px;margin:9px 0;color:#687d7c}[hidden]{display:none!important}@media(max-width:350px){strong{font-size:19px}header small{font-size:6px}header button{padding:5px 8px}.field{max-width:100%}h1{font-size:25px}#guide{font-size:9px}p{font-size:11px}}@media(max-height:500px) and (orientation:landscape){main{display:grid;grid-template-columns:180px 1fr;gap:8px 18px;width:min(660px,calc(100% - 20px));height:100svh}header{grid-column:1;height:auto;flex-wrap:wrap;justify-content:space-around}header strong{width:100%;order:-1}.hud{grid-column:1;height:auto;flex-wrap:wrap;gap:12px}.field{grid-column:2;grid-row:1/5;height:calc(100svh - 16px);align-self:center;max-height:none}.tools{grid-column:1;margin:0;flex-wrap:wrap}footer{grid-column:1;margin:0}h1{font-size:25px}p{font-size:11px}#guide{font-size:9px}}