@font-face {
    font-family: 'GameFont';
    src: url('./font.ttf') format('truetype');
    font-display: swap;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #08090e; color: #d3d8df; }
body { overscroll-behavior: none; }
#app {
    position: relative; width: 100%; height: 100vh; height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow: hidden;
}
#game-container { width: 100%; height: 100%; overflow: hidden; }
canvas { display: block; image-rendering: pixelated; touch-action: none; }
.touch-controls[hidden] { display: none; }
.touch-controls { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.touch-move, .touch-actions {
    position: absolute; bottom: max(14px, env(safe-area-inset-bottom));
    display: flex; gap: 10px; align-items: flex-end;
}
.touch-move { left: max(14px, env(safe-area-inset-left)); }
.touch-actions { right: max(14px, env(safe-area-inset-right)); }
.touch-controls button {
    flex: 0 0 auto; width: 54px; height: 54px; padding: 13px; pointer-events: auto;
    border: 1px solid #a3bfc35c; border-radius: 16px;
    background: #121a25c9; color: #d9e9e7;
    box-shadow: inset 0 1px 0 #d4eeee20, 0 3px 0 #03070c99;
    touch-action: none; user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.touch-controls svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.touch-controls button.pressed { background: #3c686cde; border-color: #b4d8d6; transform: translateY(2px); box-shadow: inset 0 1px 4px #03070c60; }
.touch-controls button:focus-visible { outline: 2px solid #bad5ce; outline-offset: 3px; }
.touch-controls .touch-jump { width: 66px; height: 66px; padding: 18px; border-radius: 22px; }
.touch-controls .touch-heal { width: 46px; height: 46px; padding: 11px; color: #d9bd88; }
.rotate-notice { display: none; }
@media (orientation: portrait) {
    .touch-enabled .touch-move, .touch-enabled .touch-actions { display: none; }
    .touch-enabled .rotate-notice {
        position: absolute; inset: 0; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 18px;
        padding: 32px; background: #08090ef5; text-align: center;
        font: 16px system-ui, sans-serif; pointer-events: auto; touch-action: none;
    }
    .rotate-notice svg { width: 64px; height: 64px; color: #a8ceca; }
    .rotate-notice strong { font-size: 22px; }
    .rotate-notice span { color: #87949f; }
}
@media (orientation: landscape) and (max-height: 360px) {
    .touch-move, .touch-actions { bottom: max(8px, env(safe-area-inset-bottom)); gap: 8px; }
    .touch-controls button { width: 48px; height: 48px; padding: 11px; }
    .touch-controls .touch-jump { width: 58px; height: 58px; padding: 15px; }
}