/* ===== 雷霆来袭 现代UI ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:#05070f;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  color:#e8f6ff; user-select:none; -webkit-touch-callout:none; }
#game, #joyZone, .skbtn { touch-action:none; }

#game { position:fixed; inset:0; display:block; background:#05070f; }

/* ---------- 遮罩层 ---------- */
#ui { position:fixed; inset:0; z-index:10; pointer-events:none; }
.screen { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:auto; animation:scrIn .35s ease both; }
@keyframes scrIn { from { opacity:0; transform:scale(1.05); } to { opacity:1; transform:scale(1); } }

.menu-wrap { text-align:center; padding:28px 40px; border-radius:20px;
  background:rgba(10,16,32,.72); border:1px solid rgba(0,255,255,.18);
  box-shadow:0 0 60px rgba(0,200,255,.15), inset 0 0 30px rgba(0,200,255,.05);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  max-width:min(92vw,420px); }
.menu-wrap.small { padding:22px 34px; }

.title { font-size:56px; font-weight:900; letter-spacing:10px; text-shadow:0 0 24px currentColor; }
.title.sm { font-size:34px; letter-spacing:6px; }
.glow-cyan { color:#7df9ff; text-shadow:0 0 18px #00e5ff, 0 0 60px #00e5ff55; animation:titlePulse 2.4s ease-in-out infinite; }
.glow-red { color:#ff7d7d; text-shadow:0 0 18px #ff2e2e, 0 0 60px #ff2e2e55; }
@keyframes titlePulse { 0%,100%{ text-shadow:0 0 14px #00e5ff,0 0 46px #00e5ff44; } 50%{ text-shadow:0 0 26px #7df9ff,0 0 80px #00e5ff88; } }
.subtitle { margin-top:6px; font-size:13px; letter-spacing:4px; color:#7fb3c9; }
.coinline { margin:12px 0 4px; font-size:16px; color:#ffd166; font-weight:700; text-shadow:0 0 10px #ffd16666; }
.coinline.big { font-size:22px; margin:10px 0 14px; }

.btn-stack { display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.btn { pointer-events:auto; cursor:pointer; border:none; border-radius:12px;
  padding:13px 20px; font-size:17px; font-weight:700; letter-spacing:2px; color:#dff6ff;
  background:linear-gradient(135deg,rgba(0,120,200,.35),rgba(0,60,140,.35));
  border:1px solid rgba(0,200,255,.35); transition:all .18s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 0 24px rgba(0,220,255,.45); background:linear-gradient(135deg,rgba(0,150,240,.5),rgba(0,90,180,.5)); }
.btn:active { transform:translateY(0) scale(.97); }
.btn.primary { background:linear-gradient(135deg,#00d4ff,#0077ff); color:#04121f; border:none; font-size:19px; box-shadow:0 0 26px rgba(0,180,255,.5); }
.btn.primary:hover { box-shadow:0 0 40px rgba(0,200,255,.8); }
.btn.ghost { background:transparent; border-color:rgba(140,190,220,.25); color:#9fc6d8; font-weight:500; }
.btn.small { padding:8px 16px; font-size:14px; border-radius:10px; }
.btn.locked { opacity:.45; cursor:not-allowed; filter:grayscale(.7); }
.btn.soldout { opacity:.6; }

/* ---------- 面板 ---------- */
.panel { padding:26px 30px; border-radius:20px; min-width:min(94vw,760px); max-width:94vw; max-height:88vh; overflow-y:auto;
  background:rgba(10,16,32,.78); border:1px solid rgba(0,255,255,.18);
  box-shadow:0 0 60px rgba(0,200,255,.14); backdrop-filter:blur(14px); }
.panel::-webkit-scrollbar { width:6px; } .panel::-webkit-scrollbar-thumb { background:#0b4a66; border-radius:3px; }
.panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.panel-head h2 { font-size:24px; letter-spacing:3px; text-shadow:0 0 14px #00e5ff88; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-top:14px; }
.card { pointer-events:auto; cursor:pointer; padding:16px 14px; border-radius:14px; text-align:center;
  background:rgba(16,26,48,.8); border:1px solid rgba(0,200,255,.22); transition:all .18s; }
.card:hover { transform:translateY(-3px); border-color:#00e5ff; box-shadow:0 0 26px rgba(0,220,255,.35); }
.card .lv { font-size:12px; color:#7fb3c9; letter-spacing:2px; }
.card .nm { font-size:17px; font-weight:800; margin:6px 0 4px; color:#dff6ff; }
.card .ds { font-size:12px; color:#8aa7b8; min-height:30px; }
.card .rw { font-size:12px; color:#ffd166; margin-top:6px; }
.card.locked { opacity:.5; filter:grayscale(.6); cursor:not-allowed; }
.card.locked:hover { transform:none; box-shadow:none; border-color:rgba(0,200,255,.22); }
.card .best { font-size:11px; color:#5ee0a0; margin-top:4px; }

.shop .card { display:flex; flex-direction:column; gap:6px; }
.shop .card .cost { font-size:14px; color:#ffd166; font-weight:800; margin-top:auto; }
.shop .card .lvlpips { font-size:12px; color:#7df9ff; letter-spacing:3px; }
.shop .card.owned { border-color:rgba(120,255,180,.35); background:rgba(16,48,36,.55); }

/* ---------- 说明页 ---------- */
.howto-body { margin-top:16px; display:flex; flex-direction:column; gap:11px; font-size:14.5px; color:#cfe6f2; }
.howto-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kbd { display:inline-block; padding:2px 9px; border-radius:6px; font-size:12.5px; font-weight:700; color:#9fe8ff;
  background:rgba(0,120,180,.28); border:1px solid rgba(0,220,255,.4); box-shadow:0 2px 0 rgba(0,0,0,.4); }

/* ---------- 顶部按钮 / 触摸 ---------- */
#topBtns { position:fixed; top:calc(10px + env(safe-area-inset-top)); right:10px; z-index:20; display:flex; gap:8px; }
#topBtns button { width:40px; height:40px; border-radius:10px; font-size:18px; cursor:pointer;
  background:rgba(10,20,40,.65); border:1px solid rgba(0,220,255,.3); color:#dff6ff; backdrop-filter:blur(8px); }
#topBtns button:active { transform:scale(.92); }
#topBtns button.active { border-color:#5ce0a0; background:rgba(30,90,60,.75); box-shadow:0 0 14px rgba(92,224,160,.6); }
#touchUI { position:fixed; inset:0; z-index:15; pointer-events:none; }
#joyZone { position:absolute; inset:0; pointer-events:auto; }
/* 浮游摇杆：触摸任意位置，以触点为中心 */
#joyBase { position:fixed; width:104px; height:104px; border-radius:50%; pointer-events:none; z-index:16;
  border:2px solid rgba(0,229,255,.55); background:rgba(10,30,60,.22);
  box-shadow:0 0 22px rgba(0,229,255,.25), inset 0 0 20px rgba(0,229,255,.12);
  transform:translate(-50%,-50%); }
#joyKnob { position:absolute; left:50%; top:50%; width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(160,250,255,.95), rgba(0,140,220,.85));
  box-shadow:0 0 18px rgba(0,229,255,.65); transform:translate(-50%,-50%); }
#skillBtns { position:absolute; right:14px; bottom:calc(24px + env(safe-area-inset-bottom)); display:flex; gap:9px; pointer-events:auto; }
.skbtn { width:54px; height:54px; border-radius:50%; font-size:22px; cursor:pointer;
  background:rgba(10,20,44,.7); border:2px solid rgba(0,220,255,.45); color:#dff6ff;
  backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; }
.skbtn:active { transform:scale(.9); }
.skbtn.bomb { border-color:rgba(255,120,60,.7); }
.skbtn.cd { opacity:.35; }

/* ---------- toast ---------- */
#toast { position:fixed; left:50%; top:18%; transform:translateX(-50%); z-index:30; padding:10px 22px;
  border-radius:12px; font-size:16px; font-weight:800; letter-spacing:2px; color:#eaffff;
  background:rgba(0,90,130,.85); border:1px solid rgba(0,230,255,.5); box-shadow:0 0 30px rgba(0,200,255,.4);
  backdrop-filter:blur(8px); pointer-events:none; animation:toastIn .25s ease both; }
#toast.gold { background:rgba(120,80,0,.9); border-color:#ffd166; color:#fff3d6; box-shadow:0 0 30px rgba(255,200,60,.4); }
@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(-12px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.hidden { display:none !important; }

/* ===== 移动端优先适配 ===== */
@media (max-width: 520px) {
  .title { font-size: 42px; letter-spacing: 5px; }
  .title.sm { font-size: 30px; }
  .btn { padding: 15px 18px; font-size: 18px; letter-spacing: 1px; }
  .menu-wrap { padding: 22px 24px; max-width:min(92vw,360px); }
  .panel { padding: 20px 18px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .skbtn { width: 60px; height: 60px; font-size: 24px; }
  #skillBtns { gap: 10px; }
  #topBtns button { width: 44px; height: 44px; font-size: 20px; }
  #topBtns { gap: 10px; }
  .howto-body { font-size: 13.5px; }
}