*{box-sizing:border-box} [hidden]{display:none!important} :root{color-scheme:dark;font-family:Georgia,"Microsoft YaHei",serif;color:#f4e5c6;background:#202e2a}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 50% 35%,#39473a,#202e2a 68%)}main{width:min(100% - 28px,1040px, max(350px,calc((100dvh - 157px) * 1.5)));margin:auto;padding:12px 0 max(8px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.brand{font-size:clamp(16px,4vw,23px);letter-spacing:.08em;font-weight:bold}.brand span{color:#efbf79;margin-right:.3em}button{border:1px solid #e9bd7d;border-radius:5px;background:#e9bd7d;color:#392a20;font:700 15px system-ui;min-height:44px;padding:8px 16px;cursor:pointer;box-shadow:0 3px #9f694e}button:active{transform:translateY(2px);box-shadow:none}button:focus-visible,textarea:focus-visible{outline:3px solid #97c7a2;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.quiet{color:inherit;background:#354339;border-color:#6f7a60;box-shadow:none;font-size:13px}.game{border:1px solid #7d765b;box-shadow:0 12px 38px #101b17ab;background:#28352c;padding:5px;border-radius:8px}.stage{position:relative;overflow:hidden;border-radius:4px}canvas{display:block;width:100%;height:auto;aspect-ratio:3/2}#welcome{position:absolute;inset:0;display:grid;place-items:center;background:#211b18a3}.welcome-card{text-align:center;background:#2b3429f5;padding:clamp(17px,5vw,33px) clamp(19px,6vw,45px);border:1px solid #ba975f;outline:1px solid #b3976333;outline-offset:5px;box-shadow:0 12px 30px #161b15a0}.house{font-size:37px;color:#ecc17e;line-height:1}h1{font-size:clamp(25px,6vw,42px);margin:8px 0 19px;letter-spacing:.1em}.welcome-card button span{padding-left:6px}#controls{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:88px;padding:5px 9px}#joystick{position:relative;flex:none;width:70px;height:70px;border-radius:50%;background:#adad8024;border:1px solid #a5a47a85;touch-action:none;user-select:none}#joystick i{position:absolute;left:20px;top:20px;width:28px;height:28px;background:#d5c097;border:2px solid #fff0ca;border-radius:50%;pointer-events:none}#hint{text-align:center;font:13px system-ui;color:#dfd0ad;margin:0}#interact{flex:none;padding:6px 10px}kbd{font:12px monospace;border:1px solid currentColor;border-radius:3px;padding:1px 4px;margin-left:3px}#bubble{position:absolute;translate:-50% -100%;padding:4px 6px;background:#fff2d7;color:#392a20;font:12px system-ui;border:1px solid #714b32;white-space:nowrap;pointer-events:none}footer{min-height:14px;font:12px system-ui;color:#f0cf9f;padding-top:5px}dialog{color:#412e23;background:#fff0d4;border:3px solid #a07751;border-radius:8px;box-shadow:0 8px #51392d,0 18px 45px #140e0caa;width:min(420px,calc(100% - 28px));max-height:85dvh;padding:20px;overflow:auto;font:15px/1.65 system-ui;color-scheme:light}dialog::backdrop{background:#1c201bb0}dialog h2{margin:0;font-size:18px;color:#684536}dialog p{white-space:pre-wrap;overflow-wrap:anywhere}dialog button{margin:4px 8px 4px 0}dialog .quiet{background:#f2dfbf;color:#594537;border-color:#ccb58e}dialog label{display:block;padding:6px 0}textarea{display:block;width:100%;margin:8px 0;background:#fff8e9;color:#412e23;font:inherit;padding:7px} @media(pointer:coarse){kbd{display:none}}@media(max-height:460px) and (orientation:landscape){main{width:min(calc(100% - 24px),570px);padding-top:4px}.game:has(#controls:not([hidden])){display:grid;grid-template-columns:minmax(0,calc(100dvh - 75px)) 1fr}.stage{max-width:calc(100dvh - 75px);margin:auto;width:100%}#controls{flex-direction:column;justify-content:center}}