:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#0c1218; touch-action:none; }
body { position:fixed; inset:0; }
canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }
.panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw,520px); padding:26px 24px; border:1px solid rgba(255,255,255,.18); background:rgba(9,15,21,.89); backdrop-filter:blur(14px); border-radius:20px; text-align:center; box-shadow:0 22px 70px rgba(0,0,0,.42); }
.logo { font-size:52px; }
h1,h2 { margin:5px 0 5px; letter-spacing:.06em; }
.subtitle,.hint,.mapNote { opacity:.78; }
.subtitle { margin-top:4px; }
.mapNote { font-size:12px; line-height:1.65; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.05); text-align:left; }
.hint { font-size:12px; line-height:1.5; }
.menuButtons { display:grid; gap:10px; margin:18px 0; }
button, select { border:1px solid rgba(255,255,255,.18); background:#17232d; color:#fff; border-radius:12px; min-height:46px; padding:0 16px; font-size:15px; font-weight:700; }
button.primary { background:#f0f5f7; color:#091015; }
button:active { transform:scale(.98); }
.settingRow { display:grid; grid-template-columns:1fr 1.3fr; gap:8px; align-items:center; text-align:left; font-size:12px; }
.settingRow .small { grid-column:2; min-height:38px; }
#hud { position:absolute; inset:0; pointer-events:none; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.72); }
#stats { position:absolute; top:max(10px, env(safe-area-inset-top)); left:14px; right:14px; display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:800; letter-spacing:.03em; z-index:4; }
#locationTag { position:absolute; top:38px; left:14px; padding:6px 10px; border-radius:9px; background:rgba(8,16,22,.48); border:1px solid rgba(255,255,255,.12); font-size:11px; font-weight:700; z-index:4; }
#kidTag { position:absolute; top:68px; left:14px; padding:5px 9px; border-radius:999px; background:rgba(255,207,64,.88); color:#1a1d1f; font-size:11px; font-weight:900; z-index:4; text-shadow:none; }
#minimap { position:absolute; right:14px; top:45px; width:200px; height:156px; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:rgba(12,20,26,.68); box-shadow:0 6px 20px rgba(0,0,0,.25); z-index:3; }
#crosshair { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-size:32px; font-weight:200; opacity:.68; }
#message { position:absolute; left:50%; top:16%; transform:translateX(-50%); font-size:19px; font-weight:900; opacity:0; transition:opacity .2s; padding:7px 12px; background:rgba(5,12,18,.38); border-radius:9px; }
#message.show { opacity:1; }
#controlsTop { position:absolute; right:14px; bottom:max(16px, env(safe-area-inset-bottom)); display:flex; gap:8px; pointer-events:auto; }
#controlsTop button { min-height:38px; font-size:12px; background:rgba(15,23,31,.78); }
.pad { position:absolute; bottom:max(22px, env(safe-area-inset-bottom)); width:138px; height:138px; border-radius:50%; border:2px solid rgba(255,255,255,.30); background:rgba(4,10,16,.16); pointer-events:auto; user-select:none; box-shadow:inset 0 0 32px rgba(0,0,0,.18); }
.pad::before, .pad::after { content:""; position:absolute; background:rgba(255,255,255,.14); }
.pad::before { width:1px; top:8px; bottom:8px; left:50%; }
.pad::after { height:1px; left:8px; right:8px; top:50%; }
.pad .stick { position:absolute; width:58px; height:58px; border-radius:50%; left:40px; top:40px; background:rgba(245,250,252,.30); border:2px solid rgba(255,255,255,.58); box-shadow:0 6px 16px rgba(0,0,0,.28); }
.pad span { position:absolute; width:160px; left:-11px; top:145px; text-align:center; font-size:11px; font-weight:800; opacity:.86; }
#leftPad { left:max(22px, env(safe-area-inset-left)); }
#rightPad { right:max(22px, env(safe-area-inset-right)); }
@media (max-height: 600px) {
  #minimap { width:160px; height:126px; }
  .pad { width:116px; height:116px; }
  .pad .stick { width:50px; height:50px; left:31px; top:31px; }
  .pad span { top:121px; }
  #controlsTop { right:145px; }
  #stats { font-size:12px; }
  #kidTag { top:64px; }
}
@media (orientation:portrait) {
  #menu::after { content:"请将 iPad 横过来使用，双摇杆布局会更舒服。"; display:block; margin-top:12px; font-size:12px; opacity:.65; }
}