:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; background: #0f1225; overflow: hidden; }
#gameCanvas { display: block; touch-action: none; }

#ui { position: fixed; inset: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); pointer-events: none; }
#joystick { position: absolute; left: calc(28px + env(safe-area-inset-left)); bottom: calc(28px + env(safe-area-inset-bottom)); width: clamp(90px, 18vw, 140px); height: clamp(90px, 18vw, 140px); border-radius: 50%; background: rgba(255,255,255,0.05); box-shadow: 0 0 0 2px rgba(255,255,255,0.08) inset; pointer-events: auto; touch-action: none; backdrop-filter: blur(4px); }
#stick { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,0.18); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }

#actionButtons { position: absolute; right: calc(28px + env(safe-area-inset-right)); bottom: calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; pointer-events: auto; z-index: 20; }
.round-btn { position: relative; width: clamp(64px, 14vw, 96px); height: clamp(64px, 14vw, 96px); border-radius: 50%; border: none; cursor: pointer; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), rgba(255,255,255,0.05)); box-shadow: 0 6px 16px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.15); color: #fff; font: 600 14px system-ui; backdrop-filter: blur(4px); }
.round-btn { touch-action: none; }
.round-btn:active { transform: scale(0.98); box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.25); }
.round-btn span { position: absolute; left: 50%; transform: translateX(-50%); }
#boostLabel, #dartLabel { top: 22%; opacity: 0.9; font-size: 12px; }
#boostCount, #dartCount { bottom: 18%; font-size: 18px; font-weight: 700; }
/* 顶部音乐按钮 */
#topButtons { position: absolute; right: calc(16px + env(safe-area-inset-right)); top: calc(16px + env(safe-area-inset-top)); pointer-events: auto; z-index: 20; display: flex; gap: 10px; align-items: center; }
.round-btn.small { width: clamp(44px, 10vw, 60px); height: clamp(44px, 10vw, 60px); font-size: 12px; }
.round-btn.on { box-shadow: 0 6px 16px rgba(0,128,255,0.45), inset 0 0 0 2px rgba(0,128,255,0.35); }
/* 声音按钮美化 */
.sound-btn { font-size: 18px; display: grid; place-items: center; }
.sound-btn.muted { box-shadow: 0 6px 16px rgba(255,64,64,0.35), inset 0 0 0 2px rgba(255,64,64,0.25); }
.sound-btn:focus-visible { outline: 2px solid rgba(0,128,255,0.6); outline-offset: 3px; }

@media (pointer: fine) {
  #joystick { display: none; }
}

/* 进化弹窗样式 */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.45); z-index: 10; }
.overlay.hidden { display: none; }
.overlay .panel { width: min(92vw, 420px); background: rgba(20,24,40,0.9); border-radius: 12px; padding: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); text-align: center; color: #fff; }
.overlay h2 { margin: 8px 0 12px; font: 600 18px system-ui; }
#evoPreview { width: 100%; height: auto; background: rgba(255,255,255,0.04); border-radius: 8px; margin-bottom: 12px; }
#evoDesc { font: 14px system-ui; opacity: 0.9; margin-bottom: 12px; }
#evoConfirm { appearance: none; border: none; border-radius: 8px; padding: 10px 16px; font: 600 14px system-ui; color: #0f1225; background: #ffd54f; box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: pointer; }
/* 游戏结束 */
#goStats { font: 14px system-ui; opacity: 0.95; margin: 10px 0 14px; }
#goRestart { appearance: none; border: none; border-radius: 8px; padding: 10px 16px; font: 600 14px system-ui; color: #0f1225; background: #4fc3f7; box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: pointer; }
/* 宝箱弹窗 */
#chestDesc { font: 14px system-ui; opacity: 0.95; margin: 10px 0 14px; }
#chestOpenBtn { appearance: none; border: none; border-radius: 8px; padding: 10px 16px; font: 600 14px system-ui; color: #0f1225; background: #ffd54f; box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: pointer; }
/* 暂停弹窗 */
#pauseStats { font: 14px system-ui; opacity: 0.95; margin: 10px 0 14px; }
#pauseResume { appearance: none; border: none; border-radius: 8px; padding: 10px 16px; font: 600 14px system-ui; color: #0f1225; background: #69f0ae; box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: pointer; }