:root{--bg: #04021e;--fg: #f5f1e3;--crystal: #4bd9f6;--stone: #4f4b69;--stone-edge: #767295;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}.app{position:relative;width:100%;height:100%}.game-host{position:absolute;inset:0}.game-host canvas{image-rendering:pixelated}.pad-button{width:76px;height:76px;padding:0;border-radius:50%;border:4px solid var(--bg);background:var(--stone);box-shadow:inset 0 -7px #2f2d4a,0 0 0 3px var(--stone-edge);display:grid;place-items:center;opacity:.85;touch-action:none}.pad-button img{width:36px;height:36px;image-rendering:pixelated;pointer-events:none}.pad-button.held{background:#3c3a5a;box-shadow:inset 0 4px #2f2d4a,0 0 0 3px var(--crystal)}.move-buttons,.action-buttons{position:absolute;bottom:calc(28px + var(--safe-bottom));display:flex;align-items:flex-end;gap:18px}.move-buttons{left:calc(32px + var(--safe-left))}.action-buttons{right:calc(32px + var(--safe-right))}.move-left img{transform:scaleX(-1)}.jump-button{width:92px;height:92px}.jump-button img{width:45px;height:45px}.fire-button{margin-bottom:44px}.fire-button img{width:52px;height:20px}.rotate-hint{display:none}@media(orientation:portrait)and (max-width:700px){.rotate-hint{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:var(--bg);font-size:18px;font-weight:600;text-align:center}}.zone-banner{position:absolute;top:calc(var(--safe-top) + 14px);left:50%;transform:translate(-50%);text-align:center;pointer-events:none;animation:zone-banner 2.6s steps(12,end) forwards}.zone-name{font-size:22px;font-weight:700;letter-spacing:.06em;color:#f2b84e;text-shadow:2px 0 0 var(--bg),-2px 0 0 var(--bg),0 2px 0 var(--bg),0 -2px 0 var(--bg)}.zone-note{margin-top:2px;font-size:13px;color:#9be36b;text-shadow:1px 0 0 var(--bg),-1px 0 0 var(--bg),0 1px 0 var(--bg),0 -1px 0 var(--bg)}@keyframes zone-banner{0%{opacity:0}12%,75%{opacity:1}to{opacity:0}}.net-notice{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 18px;max-width:calc(100% - 32px);background:var(--bg);border:2px solid #3b2f6b;text-align:center}.net-title{font-size:16px;font-weight:700;color:#f2b84e}.net-button{font:inherit;font-size:14px;padding:6px 14px;color:#04021e;background:#9be36b;border:0;cursor:pointer}