*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:#1a3a0e;display:flex;justify-content:center;align-items:flex-start;min-height:100dvh;font-family:system-ui,sans-serif;-webkit-user-select:none;user-select:none}#app{display:grid;grid-template-areas:"hud" "game" "hint" "controls";justify-items:center;align-content:start;gap:6px;padding:8px;width:100%}#hud{grid-area:hud;display:flex;gap:24px;color:#d4f7b0;font-size:14px;font-weight:600;height:26px;align-items:center;max-width:100%;padding:0 6px}#hud-level{color:#f1c40f;flex:1}canvas{grid-area:game;display:block;border:3px solid #4a7a30;border-radius:3px;max-width:100%;position:relative;z-index:20}#controls-hint{grid-area:hint;color:#7a9e6a;font-size:12px;display:none}#touch-controls{grid-area:controls;display:flex;flex-direction:column;align-items:flex-start;padding:8px;position:relative;z-index:25}.touch-dpad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px);gap:8px}.touch-btn{width:64px;height:64px;border:2px solid #4a7a30;background:#2d5a1ad9;color:#d4f7b0;font-size:26px;font-weight:700;border-radius:10px;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;transition:background-color .08s ease}.touch-btn:active{background:#50a032e6;color:#f1c40f}@media(pointer:coarse)and (orientation:landscape){body{align-items:center;overflow:hidden}#app{grid-template-columns:1fr 220px;grid-template-rows:auto 1fr;grid-template-areas:"hud      controls" "game     controls";align-items:start;height:100dvh;overflow:hidden;padding:6px 8px;gap:6px 8px}#hud{align-self:end;gap:12px;font-size:12px;height:24px;padding:0 4px}canvas{border-width:2px;justify-self:end;align-self:start;max-height:calc(100dvh - 44px)}#touch-controls{align-self:center;justify-self:center;padding:0;margin:0}.touch-dpad{grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,60px);gap:8px}.touch-btn{width:60px;height:60px;font-size:24px;border-radius:8px}}@media(pointer:coarse)and (orientation:portrait){body{align-items:flex-start}#app{padding:4px;gap:4px}#hud{gap:10px;font-size:12px;height:24px}canvas{border-width:2px}}@media(hover:hover)and (pointer:fine){body{align-items:center}#controls-hint{display:block}}.embedded body,.embedded #app{height:100dvh;overflow:hidden}.embedded canvas{width:auto;height:auto;max-height:calc(100dvh - 48px)}.embedded #controls-hint{display:none}