* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: #0d1626; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
body { display: flex; align-items: center; justify-content: center; font-family: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; color: #fff; }
:root { --u: 1px; }
@media (max-width: 768px) { :root { --u: calc(100vw / 390); } }
@media (min-width: 769px) { :root { --u: calc(100vh / 844); } }
#app { position: relative; width: 100%; max-width: calc(390 * var(--u)); height: 100%; max-height: 100%; overflow: hidden; font-size: calc(12 * var(--u)); box-shadow: 0 0 60px rgba(0,0,0,.5); }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
svg { display: block; }

.glass { background: linear-gradient(160deg, rgba(40,52,70,.62), rgba(18,26,40,.55)); border: 1px solid rgba(255,255,255,.16);
  border-radius: calc(10 * var(--u)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12); }
.glass-strong { background: linear-gradient(170deg, rgba(36,50,72,.94), rgba(16,24,38,.96)); border: 1px solid rgba(255,255,255,.18); border-radius: calc(16 * var(--u)); box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.ph { font-size: calc(11.5 * var(--u)); color: rgba(255,255,255,.88); font-weight: 600; letter-spacing: .5px; }
.gold { color: #ffd23f; }
.chev { font-style: normal; font-size: calc(20 * var(--u)); opacity: .8; margin-left: auto; line-height: 1; }

/* 模式显隐：大厅 → 瞄准/飞行时，面板滑出屏幕 */
.lobby-only, .fly-only, .aim-only { transition: opacity .35s, transform .35s; }
.fly-only, .aim-only { opacity: 0; pointer-events: none; }
#app.m-fly .lobby-only, #app.m-aim .lobby-only { opacity: 0; pointer-events: none; }
#app.m-fly #rightCol, #app.m-aim #rightCol { transform: translateX(110%); }
#app.m-fly #bottom, #app.m-aim #bottom { transform: translateY(110%); }
#app.m-fly #title, #app.m-aim #title { transform: translateY(-120%); }
#app.m-fly .fly-only { opacity: 1; pointer-events: auto; }
#app.m-aim .aim-only { opacity: 1; }

/* 顶部 */
.icon-btn { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--u));
  width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: calc(10 * var(--u));
  background: linear-gradient(170deg, rgba(48,60,80,.72), rgba(20,28,42,.7)); border: 1px solid rgba(255,255,255,.18); font-size: calc(10.5 * var(--u)); font-weight: 600; }
.icon-btn svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.icon-btn:active, .btn:active, .chip:active, .row-btn:active { transform: scale(.95); }
.icon-btn.round { left: calc(12 * var(--u)); top: calc(12 * var(--u) + env(safe-area-inset-top)); width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; z-index: 5; }
.icon-btn.round svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: #fff; }
#topBtns { position: absolute; right: calc(10 * var(--u)); top: calc(10 * var(--u) + env(safe-area-inset-top)); width: calc(182 * var(--u)); height: calc(54 * var(--u)); }
#topBtns .icon-btn:nth-child(1) { right: calc(128 * var(--u)); }
#topBtns .icon-btn:nth-child(2) { right: calc(64 * var(--u)); }
#topBtns .icon-btn:nth-child(3) { right: 0; }
.badge { position: absolute; top: calc(-5 * var(--u)); right: calc(-5 * var(--u)); min-width: calc(17 * var(--u)); height: calc(17 * var(--u)); border-radius: 9px; background: #ff3b30;
  font-style: normal; font-size: calc(10 * var(--u)); display: grid; place-items: center; border: 2px solid #fff; padding: 0 3px; }
.badge.hide { display: none; }
#coinPill { position: absolute; right: calc(12 * var(--u)); top: calc(68 * var(--u) + env(safe-area-inset-top)); display: flex; align-items: center; gap: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(9 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u)); border-radius: 99px; background: rgba(15,22,34,.6); border: 1px solid rgba(255,220,120,.35); font-size: calc(11 * var(--u)); font-weight: 700; z-index: 3; }
.coin { width: calc(17 * var(--u)); height: calc(17 * var(--u)); border-radius: 50%; display: inline-block; flex: none;
  background: radial-gradient(circle at 35% 35%, #fff4b0, #ffcc2e 45%, #c98a0e); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255,255,255,.25); }
/* 签到小按钮：放在金币左侧，不挤占顶部按钮行 */
#btnCheckin { position: absolute; right: calc(76 * var(--u)); top: calc(68 * var(--u) + env(safe-area-inset-top)); height: calc(21 * var(--u)); padding: 0 calc(8 * var(--u));
  border-radius: 99px; background: linear-gradient(180deg, #34c77b, #1c9a57); border: 1px solid rgba(190,255,215,.6); font-size: calc(10 * var(--u)); font-weight: 800; display: flex; align-items: center; gap: 3px; }
#btnCheckin .badge { top: calc(-6 * var(--u)); right: calc(-6 * var(--u)); min-width: calc(13 * var(--u)); height: calc(13 * var(--u)); font-size: calc(8 * var(--u)); }

#title { position: absolute; left: calc(14 * var(--u)); top: calc(52 * var(--u) + env(safe-area-inset-top)); pointer-events: none; }
#title h1 { font-family: "STXingkai", "华文行楷", "Xingkai SC", "STKaiti", "KaiTi", "楷体", serif; font-size: calc(40 * var(--u)); font-weight: 900; line-height: 1; letter-spacing: calc(3 * var(--u)); white-space: nowrap;
  background: linear-gradient(180deg, #fff 30%, #dfe9f5 70%, #b9c9dd); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(30,60,110,.55)) drop-shadow(0 4px 10px rgba(20,40,80,.45)); transform: skewX(-6deg); }
.title-plane { position: absolute; width: calc(26 * var(--u)); right: calc(-22 * var(--u)); top: calc(2 * var(--u)); filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); animation: tp 3s ease-in-out infinite; }
@keyframes tp { 50% { transform: translate(3px, -4px) rotate(-4deg); } }
#title p { margin-top: calc(6 * var(--u)); font-size: calc(10 * var(--u)); letter-spacing: calc(1.5 * var(--u)); color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); padding-left: calc(20 * var(--u)); white-space: nowrap; }
#title p::before { content: ''; display: inline-block; width: calc(22 * var(--u)); height: 1px; background: #fff; vertical-align: middle; margin-right: calc(6 * var(--u)); }

/* 风 */
#windPanel { position: absolute; left: calc(12 * var(--u)); top: calc(128 * var(--u) + env(safe-area-inset-top)); width: calc(124 * var(--u)); padding: calc(7 * var(--u)) calc(9 * var(--u)); transition: all .4s; white-space: nowrap; }
#app.m-fly #windPanel, #app.m-aim #windPanel { top: calc(58 * var(--u) + env(safe-area-inset-top)); transform: scale(.88); transform-origin: left top; }
.wind-body { display: flex; align-items: center; gap: calc(6 * var(--u)); margin: calc(4 * var(--u)) 0 calc(2 * var(--u)); }
#sock { width: calc(42 * var(--u)); height: calc(32 * var(--u)); flex: none; }
#sockG { transform-origin: 6px 19px; transition: transform .6s; }
#windName { font-size: calc(12 * var(--u)); font-weight: 700; }
.wind-v b { font-size: calc(19 * var(--u)); font-weight: 800; }
.wind-v { font-size: calc(10 * var(--u)); }
#windTip { font-size: calc(9.5 * var(--u)); font-weight: 600; }
#windTip.good { color: #5df09a; } #windTip.bad { color: #ff9a7a; } #windTip.mid { color: #c9d6e6; }

/* 距离 */
#distBox { position: absolute; right: calc(12 * var(--u)); top: calc(94 * var(--u) + env(safe-area-inset-top)); text-align: right; pointer-events: none; transition: all .4s; }
#app.m-fly #distBox, #app.m-aim #distBox { right: 50%; transform: translateX(50%); top: calc(14 * var(--u) + env(safe-area-inset-top)); text-align: center; }
#distBox .ph { text-shadow: 0 1px 4px rgba(0,0,0,.5); font-size: calc(13 * var(--u)); }
.dist { line-height: 1; white-space: nowrap; }
.dist b { font-size: calc(58 * var(--u)); font-weight: 900; letter-spacing: -1px; font-family: "DIN Alternate", "Bahnschrift", "Arial Black", system-ui, sans-serif;
  background: linear-gradient(180deg, #fff 40%, #cfe2ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 8px rgba(20,50,110,.55)); }
.dist span { font-size: calc(20 * var(--u)); font-weight: 800; margin-left: calc(3 * var(--u)); text-shadow: 0 2px 6px rgba(0,0,0,.4); }
#flyInfo { display: flex; gap: calc(14 * var(--u)); justify-content: center; font-size: calc(11.5 * var(--u)); text-shadow: 0 1px 3px rgba(0,0,0,.6); margin-top: calc(4 * var(--u)); }