html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1f24; font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
#app canvas { display: block; }
#hud { position: fixed; left: 12px; top: 12px; max-width: min(440px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 10px; background: rgba(28, 16, 12, 0.84); color: #f4eee6; font-size: 14px; line-height: 1.5; border: 1px solid rgba(201, 161, 59, 0.5); }
#hud h1 { margin: 0 0 8px; font-size: 18px; color: #e8c35a; letter-spacing: 0.2em; }
#hud-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#hud-list button, #enter-vr { border: 1px solid #6c5a48; background: #3a2a22; color: #f4eee6; border-radius: 6px; padding: 5px 9px; font: inherit; cursor: pointer; }
#hud-list button.on { background: #a3231b; border-color: #e8c35a; }
#hud-list kbd { font: 11px ui-monospace, monospace; opacity: 0.7; margin-right: 4px; }
#hud-list button:focus-visible, #enter-vr:focus-visible { outline: 2px solid #ffd54a; outline-offset: 2px; }
#enter-vr { margin-top: 8px; width: 100%; padding: 9px; font-weight: 600; background: #a3231b; }
#enter-vr:disabled { background: #3a3f46; color: #a9b1bb; cursor: not-allowed; }
.row { min-height: 1.4em; }
.last { color: #ffd54a; }
.meter { height: 10px; margin: 2px 0 6px; background: rgba(255, 255, 255, 0.12); border-radius: 5px; overflow: hidden; }
.meter > div { height: 100%; width: 0; background: #888; transition: width 0.08s; }
.meter.qi > div { background: #4aa3ff; }
.perf { color: #b3a28f; font-size: 12px; }
details { margin-top: 6px; color: #dcd0c2; font-size: 13px; }
details p { margin: 4px 0; }
#status { color: #ffb4a8; margin-top: 4px; }
#summary { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 280px; padding: 16px 22px; border-radius: 12px; background: rgba(28, 14, 10, 0.94); color: #fff; border: 2px solid #c9a13b; z-index: 6; }
#summary h2 { margin: 0 0 10px; color: #e8c35a; }
#summary dl { display: grid; grid-template-columns: auto auto; gap: 4px 18px; margin: 0; }
#summary dt { color: #ccc; }
#summary dd { margin: 0; text-align: right; font-weight: 600; }
/* 必杀：全屏一闪 */
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 70%, rgba(159, 231, 255, 0.55), rgba(159, 231, 255, 0) 70%); z-index: 4; }
#flash.on { animation: flash 0.6s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #flash.on { animation-duration: 0.01s; } .meter > div { transition: none; } }
body.in-xr #hud, body.in-xr #summary { display: none; }

/* 手机布局 */
#touch { position: fixed; inset: 0; z-index: 5; pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; }
#touch > * { pointer-events: auto; touch-action: none; }
#touch .t-look { position: absolute; left: 40%; top: 0; right: 0; bottom: 0; }
#touch .t-stick { position: absolute; left: 24px; bottom: 24px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.35); }
#touch .t-knob { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: transform 0.04s; }
#touch .t-fire { position: absolute; width: 92px; height: 92px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.7); background: rgba(214,58,47,0.6); color: #fff; font: 700 17px system-ui, sans-serif; }
#touch .t-fire-r { right: 36px; bottom: 60px; }
#touch .t-fire-l { left: 30px; top: 42%; width: 72px; height: 72px; font-size: 14px; background: rgba(47,111,214,0.6); }
#touch .t-fire:active { filter: brightness(1.3); }
#touch .t-col { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 50vw; }
#touch .t-col button { min-width: 64px; min-height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.4); background: rgba(16,20,26,0.65); color: #fff; font: 600 14px system-ui, sans-serif; }
#touch button:focus-visible { outline: 2px solid #ffd54a; }
body.touch #hud { max-width: 46vw; padding: 6px 8px; font-size: 12px; }
body.touch #hud h1, body.touch #hud details, body.touch #hud .perf, body.touch #hud-fit { display: none; }
body.touch #hud-list button { padding: 3px 6px; }
body.in-xr #touch { display: none; }
body.touch #enter-vr:disabled { display: none; }