*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{display:flex;flex-direction:column;background:#334e51;color:#fff8ef;font-family:Arial,sans-serif;letter-spacing:0}header{height:74px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 25px;border-bottom:3px solid #f4b8cf}header>div{font-size:28px;font-weight:900;color:#ffd2e1}header small{display:block;font-size:8px;margin-top:4px;color:#dbede1}nav{display:flex;gap:7px}button,select{font:inherit;color:#fff8ef;background:#4a6865;border:1px solid #a8c6b4;border-radius:6px;height:41px;cursor:pointer}nav button{width:41px;font-size:24px}select{padding:0 9px;font-size:12px;max-width:240px}button{touch-action:none;user-select:none;-webkit-user-select:none}button:hover{filter:brightness(1.15)}button:focus-visible,select:focus-visible{outline:3px solid #f7de99;outline-offset:3px}main{flex:1;min-height:0;position:relative}canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;top:18px;left:24px;display:flex;gap:28px;text-shadow:0 2px 5px #4f7778;pointer-events:none}.hud small{display:block;font-size:9px;color:#294c50;margin-bottom:6px;text-shadow:none}.hud strong{font-size:24px}#health{color:#e65d95}#coins{color:#fff0a9}#form{font-size:18px;color:#fff5f2}#toast{position:absolute;top:97px;left:50%;transform:translateX(-50%);padding:10px 17px;background:#365851ed;max-width:90%;width:max-content;font-size:13px;text-align:center;border-radius:6px}.controls{position:absolute;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.controls button{pointer-events:auto;height:53px;width:52px;font-size:25px;background:#365f59df}.directions,.actions{display:flex;gap:7px;align-items:end}.controls #transform{font-size:12px;width:85px;height:42px;background:#f2c1d5;color:#584454}.controls #jump{background:#ffe5a6;color:#445950;width:65px;height:65px;font-size:32px}footer{height:32px;flex-shrink:0;padding:0 25px;display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#d6e7db}#fade{position:absolute;inset:0;pointer-events:none;background:#243e46;opacity:0}#overlay{position:absolute;inset:0;display:grid;place-items:center;background:#344f57df;backdrop-filter:blur(5px)}section{text-align:center;padding:25px;max-width:440px}section small{color:#ffdea4;font-size:10px}h1{font-size:34px;margin:15px 0}section p{color:#e1ecde;line-height:1.6}section button{padding:0 18px;font-size:14px;margin:5px}section #continue{background:#f7c6d8;color:#4f4550;font-weight:bold}[hidden]{display:none!important}@media(max-width:600px){header{height:66px;padding:0 12px}header>div{font-size:22px}header small{font-size:6px}nav{gap:4px}nav button{width:31px;height:37px}select{width:140px;font-size:10px;padding:0 4px}.hud{left:13px;top:13px;gap:19px}.hud strong{font-size:20px}.hud small{font-size:8px}#form{font-size:15px}.controls{left:10px;right:10px;bottom:12px}.controls button{width:37px;height:45px}.directions,.actions{gap:4px}.controls #transform{width:64px;font-size:10px;height:38px}.controls #jump{width:48px;height:57px}.controls button[data-key=attack]{font-size:20px}#toast{font-size:11px}footer{padding:0 12px;font-size:8px}}