:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--ui-fg:#e8e2d4;--ui-muted:#e8e2d499;--ui-panel:#0c0e148c}*{box-sizing:border-box}html,body{width:100%;height:100%;color:var(--ui-fg);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#0d0f14;margin:0;font-family:system-ui,-apple-system,Segoe UI,Noto Sans TC,sans-serif;overflow:hidden}#app{position:fixed;inset:0}.world-layer{touch-action:none;position:absolute;inset:0}.world-layer canvas{width:100%;height:100%;display:block}.ui-layer{pointer-events:none;position:absolute;inset:0}.ui-interactive{pointer-events:auto;touch-action:none}.hud-stack{top:calc(var(--safe-top) + 12px);left:calc(var(--safe-left) + 12px);right:calc(var(--safe-right) + 80px);flex-direction:column;align-items:flex-start;gap:6px;display:flex;position:absolute}.hud-hint{background:var(--ui-panel);max-width:100%;color:var(--ui-muted);border-radius:6px;padding:6px 10px;font-size:13px;line-height:1.4}.joystick-zone{width:min(50vw,320px);height:min(50vh,320px);padding-left:var(--safe-left);padding-bottom:var(--safe-bottom);position:absolute;bottom:0;left:0}.joystick-base{left:calc(var(--safe-left) + 28px);bottom:calc(var(--safe-bottom) + 28px);opacity:.7;background:#e8e2d414;border:2px solid #e8e2d44d;border-radius:50%;width:132px;height:132px;margin:0;transition:opacity .12s;position:absolute}.joystick-zone.is-active .joystick-base{opacity:1}.joystick-knob{will-change:transform;background:#e8e2d48c;border-radius:50%;width:60px;height:60px;margin:-30px 0 0 -30px;position:absolute;top:50%;left:50%;box-shadow:0 2px 8px #0006}.hud-bar{background:var(--ui-panel);border-radius:6px;grid-template-columns:auto minmax(120px,200px) auto;align-items:center;gap:8px;padding:5px 10px;font-size:13px;display:grid}.hud-bar[hidden]{display:none}.hud-bar-label{color:var(--ui-fg);white-space:nowrap}.hud-bar-track{background:#0000008c;border-radius:5px;height:10px;overflow:hidden}.hud-bar-fill{transform-origin:0;height:100%;transition:transform .12s ease-out}.hud-bar.is-player .hud-bar-fill{background:linear-gradient(#e0493a,#9c231a)}.hud-bar.is-target .hud-bar-fill{background:linear-gradient(#e0a83a,#9c6a1a)}.hud-bar-value{min-width:56px;color:var(--ui-muted);font-variant-numeric:tabular-nums;text-align:right}.hud-hurt{opacity:0;position:absolute;inset:0;box-shadow:inset 0 0 90px 20px #dc281ebf}.hud-hurt.is-active{animation:.35s ease-out hud-hurt}@keyframes hud-hurt{0%{opacity:1}to{opacity:0}}.hud-banner{color:#f0c8b8;white-space:nowrap;background:#280806bf;border-radius:8px;padding:10px 18px;font-size:18px;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.hud-banner[hidden]{display:none}.hud-notice{left:50%;top:calc(var(--safe-top) + 26%);max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 32px);color:var(--ui-fg);text-align:center;pointer-events:none;background:#0c0e14cc;border:1px solid #e8e2d440;border-radius:6px;padding:6px 14px;font-size:14px;position:absolute;transform:translate(-50%)}.hud-notice.is-error{color:#f3b0a0;border-color:#f078648c}.hud-notice[hidden]{display:none}.ground-labels{pointer-events:none;position:absolute;inset:0;overflow:hidden}.ground-label{--label-color:#e6e0d0;color:var(--label-color);white-space:nowrap;pointer-events:none;will-change:transform;background:#08090cb3;border:1px solid #e8e2d42e;border-radius:4px;padding:2px 8px;font-size:13px;line-height:18px;position:absolute;top:0;left:0}.ground-label.is-near{border-color:var(--label-color);background:#181610e6}.ground-label[hidden]{display:none}.attack-button{--cooldown:0;right:calc(var(--safe-right) + 28px);bottom:calc(var(--safe-bottom) + 36px);background:conic-gradient(#0000008c calc(var(--cooldown) * 360deg), transparent 0), radial-gradient(circle at 40% 35%, #c85a3cd9, #6e1e14d9);width:96px;height:96px;color:var(--ui-fg);letter-spacing:.1em;border:2px solid #e8e2d48c;border-radius:50%;justify-content:center;align-items:center;font-size:18px;font-weight:600;display:flex;position:absolute;box-shadow:0 3px 10px #00000073}.attack-button[hidden]{display:none}.attack-button.is-pressed{border-color:#fff0c8f2;transform:scale(.92)}.inventory-toggle{top:calc(var(--safe-top) + 12px);right:calc(var(--safe-right) + 12px);background:var(--ui-panel);width:56px;height:56px;color:var(--ui-fg);border:2px solid #e8e2d466;border-radius:12px;justify-content:center;align-items:center;font-size:15px;font-weight:600;display:flex;position:absolute}.inventory-toggle.is-open{background:#3c2c14cc;border-color:#f0c878e6}.inventory-panel{--cell:min(52px, calc((100vw - var(--safe-left) - var(--safe-right) - 44px) / 12), calc((100dvh - var(--safe-top) - var(--safe-bottom) - 152px) / 5));left:50%;top:calc(var(--safe-top) + (100dvh - var(--safe-top) - var(--safe-bottom)) / 2);overscroll-behavior:contain;z-index:10;background:#10121af0;border:1px solid #e8e2d440;border-radius:10px;flex-direction:column;gap:8px;padding:8px 10px 10px;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 8px 30px #0009}.inventory-panel[hidden]{display:none}.inventory-header{justify-content:space-between;align-items:center;display:flex}.inventory-title{letter-spacing:.1em;font-size:16px;font-weight:600}.inventory-close{background:#e8e2d414;border-radius:8px;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;display:flex}.inventory-grid{grid-template-columns:repeat(var(--cols), var(--cell));grid-template-rows:repeat(var(--rows), var(--cell));touch-action:none;background:#00000073;border:1px solid #e8e2d42e;display:grid;position:relative}.inventory-cell{border:1px solid #e8e2d412}.inventory-layer{position:absolute;inset:0;overflow:hidden}.inventory-item{background:linear-gradient(160deg, var(--item-color), #14141ae6);color:#f4efe2;border:2px solid #e8e2d459;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;padding:2px;display:flex;position:absolute;overflow:hidden}.inventory-item-glyph{font-size:calc(var(--cell) * .5);text-shadow:0 1px 3px #000000b3;line-height:1}.inventory-item-name{font-size:min(12px, calc(var(--cell) * .3));text-align:center;margin-top:4px;line-height:1.1}.inventory-item.is-selected{border-color:#fad278;box-shadow:inset 0 0 0 1px #fad27899}.inventory-item.is-dragging{opacity:.35}.inventory-ghost{z-index:2;opacity:.85;pointer-events:none;position:absolute;top:0;left:0}.inventory-preview{pointer-events:none;z-index:1;border:2px dashed #0000;border-radius:4px;position:absolute}.inventory-preview[hidden]{display:none}.inventory-preview.is-valid{background:#50c85a40;border-color:#78dc78f2}.inventory-preview.is-invalid{background:#e63c324d;border-color:#f05a50f2}.inventory-info{min-height:36px;max-width:calc(var(--cell) * 12);color:var(--ui-muted);align-items:center;padding:0 4px;font-size:13px;line-height:1.3;display:flex}.inventory-info.is-error{color:#f09a8a}.inventory-tooltip{z-index:3;white-space:nowrap;pointer-events:none;background:#08090cf2;border:1px solid #e8e2d44d;border-radius:6px;padding:6px 10px;font-size:13px;position:absolute;top:0;left:0}.inventory-tooltip[hidden]{display:none}