*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{display:flex;flex-direction:column;background:#172f29;color:#f6f8e9;font-family:Arial,sans-serif;letter-spacing:0}header{height:78px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:2px solid #91c770}.brand strong{font-size:23px;font-weight:900}.brand em{font-size:14px;color:#f5908b}.brand small{display:block;margin-top:5px;font-size:9px;color:#b7d8b4}.actions{display:flex;gap:7px}button,select{border:1px solid #658c79;border-radius:6px;background:#2d4e40;color:#fff;font:inherit;cursor:pointer;height:42px}button{width:43px;font-size:25px;touch-action:none;user-select:none;-webkit-user-select:none}select{padding:0 10px;font-size:13px}button:hover{filter:brightness(1.2)}button:focus-visible,select:focus-visible{outline:3px solid #ffe17e;outline-offset:3px}main{flex:1;position:relative;min-height:0}canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;top:18px;left:24px;display:flex;gap:30px;pointer-events:none;text-shadow:0 2px 5px #13281b}.hud small{display:block;font-size:9px;color:#d5e7ba;margin-bottom:5px}.hud b{font-size:23px;font-variant-numeric:tabular-nums}#health{color:#ff9b94}#banner{position:absolute;top:24px;right:24px;font-size:11px;font-weight:bold;color:#ffec9f;pointer-events:none;text-align:right}.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;width:49px;height:47px;background:#173e31cf}.pad{display:grid;grid-template-columns:repeat(3,49px);grid-template-rows:repeat(2,47px);gap:4px}.pad #up{grid-column:2}.pad #left{grid-column:1}.combat{display:flex;gap:9px;align-items:end}.combat #fire{background:#f7d975;color:#20392b;width:70px;height:70px;font-size:38px}.combat #dash{background:#ddeece;color:#20392b}button:disabled{opacity:.4}footer{height:29px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 24px;font-size:9px;color:#bfd0b7}#overlay{position:absolute;inset:0;background:#102c24d9;backdrop-filter:blur(5px);display:grid;place-items:center}#overlay[hidden]{display:none}section{text-align:center;max-width:440px;padding:25px}section small{font-size:10px;color:#ffe17e}h1{font-size:35px;margin:17px 0}section p{line-height:1.6;color:#d8e7ce}section button{width:180px;background:#f7d975;color:#20392b;font-size:17px;font-weight:bold;margin-top:10px}@media(max-width:570px){header{height:67px;padding:0 12px}.brand strong{font-size:16px}.brand em{font-size:11px}.brand small{font-size:7px}.actions{gap:4px}.actions button{width:31px}select{max-width:85px;padding:0 3px;font-size:12px}.hud{left:14px;gap:22px;top:15px}.hud b{font-size:19px}#banner{top:70px;right:14px;font-size:9px}.controls{left:12px;right:12px;bottom:12px}footer{padding:0 12px;font-size:8px}}
header{gap:12px}.actions{flex-wrap:wrap;justify-content:flex-end}#health2{color:#ffe18b}.hud{gap:24px}#banner{top:80px}select[hidden],[hidden]{display:none!important}@media(max-width:760px){header{height:auto;min-height:100px;padding:10px 12px;flex-wrap:wrap}.brand{width:100%}.actions{justify-content:flex-start;gap:5px}.actions select{max-width:110px}.hud{gap:13px}.hud b{font-size:17px}.hud small{font-size:8px}}