/* 布局：画布铺满，HUD 浮在上面。左下摇杆，右下两个动作键，左上生命。 */
:root { --bg: #14211d; --fg: #eef4e4; --ember: #ffc94a; --ember-ink: #2a1c05; --ink: #2b1d3f; --heart: #ff5d6c; --glass: rgba(16, 26, 23, .62);
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
html { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); background: var(--bg); }
body { background: var(--bg); color: var(--fg); font: 14px/1.4 var(--font); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
#app { position: relative; height: 100%; overflow: hidden; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { position: absolute; }
.top { top: 10px; left: max(14px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 10px; }
.hp { display: flex; gap: 3px; padding: 5px 9px; border-radius: 99px; background: var(--glass); }
.hp svg { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; fill: var(--heart); }
.hp svg.off { fill: rgba(255, 255, 255, .16); }
.kills { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--glass); font-variant-numeric: tabular-nums; }
.joy { left: max(22px, calc(env(safe-area-inset-left, 0px) + 8px)); bottom: 22px; width: 112px; height: 112px; border-radius: 50%; background: rgba(16, 26, 23, .3); border: 1.5px solid rgba(255, 255, 255, .34); pointer-events: auto; }
.joy i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px; border-radius: 50%; background: rgba(255, 255, 255, .82); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.pad { pointer-events: auto; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .6); box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.pad svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pad:active { transform: scale(.92); }
.atk { right: max(24px, calc(env(safe-area-inset-right, 0px) + 10px)); bottom: 30px; width: 74px; height: 74px; background: rgba(255, 201, 74, .92); color: var(--ember-ink); }
.atk svg { width: 32px; height: 32px; }
.roll { right: max(106px, calc(env(safe-area-inset-right, 0px) + 92px)); bottom: 18px; width: 56px; height: 56px; background: var(--glass); }
.roll svg { width: 24px; height: 24px; }
.roll.cd { opacity: .4; }
.hint { left: 50%; top: 10px; transform: translateX(-50%); font-size: 12px; padding: 4px 12px; border-radius: 99px; background: var(--glass); white-space: nowrap; transition: opacity .6s; }
.hint:empty, .hint.off { opacity: 0; }
.down { left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 18px; font-weight: 700; letter-spacing: .1em; padding: 10px 22px; border-radius: 12px; background: rgba(16, 26, 23, .82); }
@media (prefers-reduced-motion: reduce) { .hint { transition: none; } }