*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#eee3c8;color:#4a584e;font-family:system-ui,sans-serif}body{background:radial-gradient(ellipse at top,#fff2d4,#d9e3cf)}main{width:min(720px,calc(100% - 20px));margin:auto}header{height:64px;display:flex;align-items:center;justify-content:space-between;gap:8px}strong{font-size:25px;letter-spacing:3px;text-align:center;min-width:0}small{display:block;font-size:7px;letter-spacing:2px;margin-top:5px}a{font-size:11px;color:#71836a;text-decoration:none;white-space:nowrap}button{min-width:44px;min-height:44px;padding:7px 12px;border:1px solid #a4b092;border-radius:9px;background:#fff4d8;color:#476350;font:600 12px system-ui;box-shadow:0 3px #bec9ae;cursor:pointer;touch-action:manipulation}header button{flex-shrink:0;white-space:nowrap}button:disabled{opacity:.4}.hud{height:48px;display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px}.board{position:relative;height:min(490px,calc(100svh - 242px));aspect-ratio:6/5;max-width:100%;margin:auto;overflow:hidden;border:6px solid #8b9b7e;border-radius:16px;background:#e0e8d0;box-shadow:0 7px #c2cbae}canvas{width:100%;height:100%;display:block;object-fit:contain;touch-action:none;outline:none}#overlay{position:absolute;inset:0;background:#fff5def7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px}h1{font-size:clamp(24px,4vw,35px);line-height:1.25;margin:11px 0}em{font-style:normal;display:block;color:#c17c64}p{font-size:12px;line-height:1.7;margin:5px 0}#guide{font-size:10px;color:#829276}#primary{background:#738e66;color:#fff9e6;min-width:170px;margin:10px 0 7px}#restart{margin-bottom:7px}.danger{height:7px;border-radius:6px;background:#cad1b9;max-width:600px;margin:15px auto 0;overflow:hidden}#meter{height:100%;width:0;background:#c99665;transition:width .15s}.tools{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:11px}#notice{flex:1}footer{text-align:center;font-size:11px;color:#7a8b70;margin:11px 0}[hidden]{display:none!important}@media(max-width:400px){header{height:56px}strong{font-size:20px}header small{font-size:5px}header button{padding:5px 8px;font-size:10px}.hud{height:45px;font-size:10px}.board{height:calc(100svh - 235px);width:100%;aspect-ratio:auto;min-height:280px}h1{font-size:25px}p{font-size:11px}#guide{font-size:9px}.tools{font-size:10px;gap:5px}.tools button{font-size:10px;padding:5px 8px}footer{font-size:10px}}@media(max-height:500px) and (orientation:landscape){main{width:calc(100% - 20px);height:100svh;display:grid;grid-template-columns:200px 1fr;gap:6px 12px}header{grid-column:1;height:auto;flex-wrap:wrap;justify-content:space-around}header strong{order:-1;width:100%;font-size:20px}.hud{grid-column:1;height:auto;flex-wrap:wrap}.board{grid-column:2;grid-row:1/6;align-self:center;width:100%;height:calc(100svh - 16px);aspect-ratio:auto}.danger{grid-column:1;width:100%;margin:0;align-self:center}.tools{grid-column:1;flex-wrap:wrap;margin:0;font-size:10px}#notice{width:100%;flex:auto}.tools button{flex:1}footer{grid-column:1;font-size:9px;margin:0}h1{font-size:25px}p{font-size:11px}}