/* ============================================================
   Arcade Sports · 共享 UI 样式
   主题通过 body.theme-hoops / body.theme-kicks / body.theme-pong 切换
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --ink: #ffffff;
}

body.theme-hoops {
  --a1:#ff9a3d; --a2:#ff5237; --gold:#ffd24a; --cool:#ff4d8d;
  --title-grad: linear-gradient(120deg,#ffd24a,#ff6a3c,#ff4d8d,#ffd24a);
  --score-grad: linear-gradient(135deg,#ffd24a,#ff8a3c);
  --btn-grad: linear-gradient(135deg,#ff9a3d,#ff5237);
  --btn-shadow: rgba(255,90,50,.45);
  --title-glow: rgba(255,110,60,.35);
  --panel-bg: linear-gradient(160deg, rgba(32,24,44,.94), rgba(14,10,24,.96));
  --panel-line: rgba(255,150,80,.35);
  background:#0d1120;
}
body.theme-kicks {
  --a1:#2fd48d; --a2:#18a8b8; --gold:#ffd24a; --cool:#7dffb0;
  --title-grad: linear-gradient(120deg,#7dffb0,#3ddad7,#4da6ff,#7dffb0);
  --score-grad: linear-gradient(135deg,#a8ffce,#3ddad7);
  --btn-grad: linear-gradient(135deg,#2fd48d,#1a9e8f);
  --btn-shadow: rgba(40,200,150,.4);
  --title-glow: rgba(60,220,180,.35);
  --panel-bg: linear-gradient(160deg, rgba(14,34,30,.94), rgba(6,18,16,.96));
  --panel-line: rgba(90,230,180,.32);
  background:#0a1410;
}
body.theme-pong {
  --a1:#52d8ff; --a2:#5868ff; --gold:#ffd65c; --cool:#82f6ff;
  --title-grad:linear-gradient(120deg,#8af3ff,#52bfff,#7b72ff,#8af3ff);
  --score-grad:linear-gradient(135deg,#a8f7ff,#72a8ff);
  --btn-grad:linear-gradient(135deg,#39c9eb,#5261e8);
  --btn-shadow:rgba(55,170,255,.42); --title-glow:rgba(82,200,255,.35);
  --panel-bg:linear-gradient(160deg,rgba(12,31,50,.95),rgba(7,13,31,.97));
  --panel-line:rgba(95,205,255,.34); background:#07111e;
}
body.theme-ski {
  --a1:#6de6ff; --a2:#3c77df; --gold:#ffd55f; --cool:#a8f4ff;
  --title-grad:linear-gradient(120deg,#e8fbff,#79e7ff,#6b8cff,#e8fbff);
  --score-grad:linear-gradient(135deg,#ffffff,#73dfff);
  --btn-grad:linear-gradient(135deg,#42cbe8,#4367d9);
  --btn-shadow:rgba(48,150,235,.44); --title-glow:rgba(120,225,255,.36);
  --panel-bg:linear-gradient(160deg,rgba(14,34,54,.95),rgba(8,17,38,.97));
  --panel-line:rgba(126,225,255,.35); background:#07111f;
}

html, body {
  width:100%; height:100%; overflow:hidden;
  overscroll-behavior:none;
  user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none; -webkit-text-size-adjust:100%;
  font-family: system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
  background:
    radial-gradient(circle at 50% 28%, rgba(61,50,104,.34), transparent 42%),
    linear-gradient(160deg,#070b16,#10152a 55%,#080b14);
}
#app {
  position:fixed; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:min(100vw,620px); height:100vh; height:100dvh; overflow:hidden;
  background:#0d1120;
  box-shadow:0 0 70px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.08);
}

canvas#game {
  position:absolute; inset:0; display:block;
  touch-action:none;           /* 只有游戏画布禁用浏览器手势 */
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}

button { font-family:inherit; color:inherit; cursor:pointer; }
input { user-select:text; -webkit-user-select:text; }
.hidden { display:none !important; }

:focus-visible { outline:2px solid var(--a1); outline-offset:2px; border-radius:8px; }

/* ---------- 左上角当前项目标签（正在玩的项目，所有状态可见） ---------- */
#proj-tag {
  position:absolute; z-index:45; pointer-events:auto; text-decoration:none; cursor:pointer;
  top:calc(24px + var(--safe-t)); left:calc(16px + var(--safe-l));
  height:38px; padding:0 12px 0 9px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,14,28,.66); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; box-shadow:0 4px 18px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; gap:7px;
}
#proj-tag::after { content:''; display:none; }
#proj-tag:active { transform:scale(.95); }
#proj-tag svg { width:20px; height:20px; flex:none; }
.theme-hoops #proj-tag svg { color:var(--a1); }
.theme-kicks #proj-tag svg { color:var(--a1); }
.theme-pong #proj-tag svg { color:var(--a1); }
.theme-ski #proj-tag svg { color:var(--a1); }
#proj-tag .pt-label { display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
#proj-tag .pt-label b { font-size:13px; font-weight:900; letter-spacing:1px; }
#proj-tag .pt-label span { font-size:9px; letter-spacing:2px; opacity:.6; font-weight:700; }

/* ---------- 右上角切换按钮（点击后将进入的项目；实战中隐藏防误触） ---------- */
#btn-switch {
  position:absolute; z-index:44;
  top:calc(16px + var(--safe-t)); right:calc(10px + var(--safe-r));
  height:48px; padding:0 13px 0 11px; border-radius:999px;
  border:1px dashed rgba(255,255,255,.34);
  background:rgba(10,14,28,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:rgba(255,255,255,.88); box-shadow:0 4px 18px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:transform .15s ease;
}
#btn-switch svg { width:19px; height:19px; flex:none; opacity:.9; }
#btn-switch .sw-arr { width:16px; height:16px; opacity:.55; }
#btn-switch .sw-label { display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
#btn-switch .sw-label b { font-size:13px; font-weight:900; letter-spacing:1px; }
#btn-switch .sw-label span { font-size:9px; letter-spacing:2px; opacity:.6; font-weight:700; }
#btn-switch:active { transform:scale(.94); }
body.is-playing #btn-switch { display:none; }
body.landscape #proj-tag, body.landscape #btn-switch { display:none; }

/* ---------- 三项目导航：菜单/暂停/结算可见，实战隐藏 ---------- */
#game-nav {
  position:absolute; z-index:44; top:calc(18px + var(--safe-t)); right:calc(10px + var(--safe-r));
  display:flex; align-items:center; gap:5px;
}
#game-nav a {
  min-width:68px; height:42px; padding:0 9px; border-radius:999px;
  border:1px dashed rgba(255,255,255,.28); background:rgba(8,13,28,.66);
  color:rgba(255,255,255,.82); text-decoration:none; font-size:11px; font-weight:900;
  display:flex; align-items:center; justify-content:center; gap:5px;
  box-shadow:0 4px 16px rgba(0,0,0,.32); transition:transform .12s ease,border-color .12s ease;
}
#game-nav a:active { transform:scale(.94); }
#game-nav a svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
body.is-playing #game-nav, body.landscape #game-nav { display:none; }
/* 实战 HUD 使用预烘焙半透明材质，避免高 DPR Canvas 与实时模糊争抢 GPU。 */
body.is-playing #proj-tag,
body.is-playing .hud-box,
body.is-playing #hud-sub,
body.is-playing #btn-pause {
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:rgba(8,12,24,.82);
}
body.theme-hoops.is-playing #hud-sub {
  position:absolute; left:50%; top:calc(70px + var(--safe-t));
  transform:translateX(-50%); max-width:calc(100% - 24px);
  overflow:hidden; text-overflow:ellipsis; text-align:center;
}
body.theme-kicks.is-playing #hud-sub {
  position:absolute; left:50%; top:calc(70px + var(--safe-t));
  transform:translateX(-50%); max-width:calc(100% - 24px);
  overflow:hidden; text-overflow:ellipsis; text-align:center;
  border-color:rgba(81,224,191,.28);
  box-shadow:0 5px 16px rgba(0,0,0,.28),inset 3px 0 rgba(61,218,183,.65);
}
body.theme-pong.is-playing #hud-sub {
  position:absolute; left:50%; top:calc(90px + var(--safe-t)); transform:translateX(-50%);
  max-width:calc(100% - 24px); text-align:center; border-color:rgba(86,206,255,.28);
  box-shadow:0 5px 16px rgba(0,0,0,.28),inset 3px 0 rgba(82,190,255,.72);
}
body.theme-ski.is-playing #hud-sub {
  position:absolute; left:50%; top:calc(70px + var(--safe-t)); transform:translateX(-50%);
  max-width:calc(100% - 24px); text-align:center; border-color:rgba(112,221,255,.3);
  box-shadow:0 5px 16px rgba(0,0,0,.26),inset 3px 0 rgba(91,206,255,.72);
}
body.theme-ski.ski-fast #hud-sub { color:#dffcff; border-color:rgba(104,235,255,.72); box-shadow:0 0 18px rgba(68,211,255,.44),inset 3px 0 #7af2ff; }
body.theme-pong #hud-lives, body.theme-pong #hud-timer { display:none !important; }

/* ---------- HUD ---------- */
#hud {
  position:absolute; left:0; right:0; top:0; z-index:10; pointer-events:none;
  /* 左侧让位给当前项目标签（16+92+16），分数/命中率居左中 */
  padding:calc(22px + var(--safe-t)) calc(10px + var(--safe-r)) 0 calc(126px + var(--safe-l));
  display:flex; justify-content:space-between; align-items:flex-start;
}
.hud-left { display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.hud-right { display:flex; gap:8px; align-items:center; }

.hud-box {
  background:rgba(10,14,28,.55); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:14px; color:#fff; padding:9px 14px; font-weight:800;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  display:flex; align-items:center; gap:10px; min-height:44px;
}
#hud-score {
  font-size:28px; line-height:1; min-width:64px; justify-content:center;
  background:var(--score-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
body.theme-pong #hud-score { min-width:94px; font-size:24px; letter-spacing:1px; }
#hud-sub {
  font-size:11px; font-weight:700; color:rgba(255,255,255,.82);
  background:rgba(10,14,28,.5); border:1px solid rgba(255,255,255,.1);
  border-radius:10px; padding:4px 10px; letter-spacing:.5px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); white-space:nowrap;
}
#hud-sub.hud-progress {
  min-height:30px; padding:2px; border-radius:12px; overflow:hidden;
  display:flex; align-items:stretch; justify-content:center;
  color:#fff; border:1px solid rgba(255,184,76,.48);
  background:linear-gradient(180deg,rgba(38,31,31,.96),rgba(12,14,22,.96));
  box-shadow:0 6px 18px rgba(0,0,0,.34), inset 0 1px rgba(255,224,166,.12), 0 0 14px rgba(255,143,54,.10);
}
#hud-sub.hud-progress::before {
  content:''; position:absolute; left:10px; right:10px; top:0; height:2px;
  background:linear-gradient(90deg,transparent,#ffac42 22%,#ffd879 50%,#ff7838 78%,transparent);
  opacity:.92;
}
.hud-metric {
  position:relative; min-width:54px; padding:4px 9px 3px;
  display:flex; align-items:baseline; justify-content:center; gap:4px;
}
.hud-metric + .hud-metric::after {
  content:''; position:absolute; left:0; top:6px; bottom:5px; width:1px;
  background:linear-gradient(transparent,rgba(255,255,255,.22),transparent);
}
.hud-metric .hm-label { font-size:8px; color:rgba(255,255,255,.50); font-weight:800; letter-spacing:.6px; }
.hud-metric .hm-value { font-size:12px; color:rgba(255,255,255,.94); font-weight:950; letter-spacing:.2px; }
.hud-metric.is-accent .hm-label { color:rgba(255,190,92,.72); }
.hud-metric.is-accent .hm-value { color:#ffd36b; text-shadow:0 0 9px rgba(255,153,54,.42); }
body.theme-kicks #hud-sub { font-size:10px; padding:3px 7px; letter-spacing:0; }
#hud-combo {
  font-size:15px; font-weight:900; padding:5px 12px; border-radius:999px; color:#fff;
  background:linear-gradient(135deg,#ff4d2e,#ff9a3d);
  box-shadow:0 0 10px rgba(255,110,50,.55);
  transition:box-shadow .3s ease, transform .15s ease;
}
body.theme-kicks #hud-combo { background:linear-gradient(135deg,#18a8b8,#2fd48d); box-shadow:0 0 10px rgba(46,210,160,.55); }
body.theme-pong #hud-combo { background:linear-gradient(135deg,#36c8ee,#5964ea); box-shadow:0 0 10px rgba(73,177,255,.52); }
body.theme-ski #hud-combo { background:linear-gradient(135deg,#55d7ee,#5274df); box-shadow:0 0 12px rgba(82,190,255,.58); }
#hud-combo.lv2 { box-shadow:0 0 18px rgba(255,120,50,.85); transform:scale(1.06); }
#hud-combo.lv3 { box-shadow:0 0 26px rgba(255,140,50,1); transform:scale(1.12); }
#hud-timer { font-size:22px; line-height:1; min-width:56px; justify-content:center; }
#hud-timer.urgent { color:#ff5347; animation:pulse .8s infinite; text-shadow:0 0 12px rgba(255,70,50,.9); }
#hud-lives { gap:6px; padding:9px 12px; }
#hud-lives i {
  width:10px; height:10px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 6px var(--gold); transition:all .25s ease;
}
#hud-lives i.lost { opacity:.2; background:#8a8fa5; box-shadow:none; transform:scale(.72); }
body.theme-ski #hud-lives i { width:16px; height:9px; border-radius:8px 8px 5px 5px; background:linear-gradient(180deg,#dffaff,#65d9ee); border:1px solid rgba(255,255,255,.72); box-shadow:0 0 7px rgba(80,218,245,.7); }

/* ---------- 足球：下一脚技能坞 ---------- */
#skill-dock {
  position:absolute; z-index:24; left:50%; bottom:calc(12px + var(--safe-b));
  width:min(350px,calc(100% - 20px)); transform:translateX(-50%);
  display:none; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px;
  padding:5px; border:1px solid rgba(96,235,202,.2); border-radius:15px;
  background:linear-gradient(180deg,rgba(5,22,24,.86),rgba(4,13,20,.92));
  box-shadow:0 8px 24px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.05);
  pointer-events:auto; touch-action:manipulation;
}
body.theme-kicks.is-playing #skill-dock { display:grid; }
.skill-btn {
  position:relative; min-width:0; min-height:42px; padding:4px 2px 3px;
  border:1px solid rgba(255,255,255,.1); border-radius:10px;
  background:rgba(255,255,255,.045); color:rgba(235,248,248,.66);
  transition:transform .12s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.skill-btn b { display:block; font-size:12px; font-weight:950; letter-spacing:1px; }
.skill-btn small { display:block; margin-top:1px; font-size:8px; font-weight:750; opacity:.58; }
.skill-btn:active { transform:scale(.94); }
.skill-btn.active {
  color:#f4fffb; border-color:rgba(86,242,196,.78);
  background:linear-gradient(145deg,rgba(34,211,159,.30),rgba(39,166,207,.18));
  box-shadow:0 0 14px rgba(45,222,178,.20),inset 0 1px rgba(220,255,246,.12);
}
.skill-btn[data-skill="power"].active { border-color:#ffb45f; background:linear-gradient(145deg,rgba(255,114,44,.34),rgba(255,190,82,.16)); box-shadow:0 0 14px rgba(255,120,44,.25); }
.skill-btn[data-skill="curve"].active { border-color:#78dcff; background:linear-gradient(145deg,rgba(53,165,255,.30),rgba(99,105,255,.18)); box-shadow:0 0 14px rgba(76,190,255,.24); }
.skill-btn[data-skill="feint"].active { border-color:#d49aff; background:linear-gradient(145deg,rgba(170,80,255,.30),rgba(255,85,194,.16)); box-shadow:0 0 14px rgba(194,92,255,.22); }
body.landscape #skill-dock { display:none !important; }

#btn-pause {
  pointer-events:auto; width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,14,28,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; box-shadow:0 4px 18px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
#btn-pause svg { width:16px; height:16px; fill:#fff; }
#btn-pause:active { transform:scale(.92); }

@keyframes pulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.1);} }
@keyframes pop { 0%{ transform:scale(.4);} 70%{ transform:scale(1.25);} 100%{ transform:scale(1);} }
.pop { animation:pop .25s ease; }

/* ---------- Overlays ---------- */
.overlay {
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  /* 顶部让位：项目标签/切换按钮在所有弹窗状态都保持可见 */
  padding:calc(78px + var(--safe-t)) 14px calc(12px + var(--safe-b));
  background:rgba(6,8,20,.45);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}
.panel {
  width:min(400px, 100%); max-height:100%; overflow-y:auto; overflow-x:hidden;
  background:var(--panel-bg);
  border:1px solid rgba(255,255,255,.1); border-radius:22px;
  padding:18px 18px 14px; text-align:center; color:var(--ink);
  box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  animation:rise .4s cubic-bezier(.2,1.3,.4,1);
  position:relative;
}
/* 主题化顶饰：篮球 = 橙黑胶带斜纹；足球 = 转播条 */
.panel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
  border-radius:22px 22px 0 0;
  background:repeating-linear-gradient(-55deg, var(--a1) 0 10px, #16101e 10px 20px);
  opacity:.85;
}
body.theme-kicks .panel::before {
  background:linear-gradient(90deg, var(--a1) 0 26%, rgba(255,255,255,.22) 26% 100%);
}
@keyframes rise { from{ opacity:0; transform:translateY(24px) scale(.95);} to{ opacity:1; transform:none;} }

/* ---------- 菜单 hero 区（项目专属待机动画，SVG+CSS） ---------- */
.hero {
  height:104px; margin:-6px 0 8px; border-radius:16px; position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.06));
  border:1px solid rgba(255,255,255,.08);
}
.hero svg { width:100%; height:100%; display:block; }

.theme-hoops .hero { background:linear-gradient(180deg,#2a1c3f 0%, #4a2450 60%, #6a3148 100%); }
.theme-kicks .hero { background:linear-gradient(180deg,#0a1a2c 0%, #103349 60%, #12442f 100%); }
.theme-pong .hero { background:linear-gradient(180deg,#09182f 0%,#123b64 62%,#176a86 100%); }
.theme-ski .hero { background:linear-gradient(180deg,#0c2343 0%,#4a81b6 58%,#dff5ff 100%); }

.hero .h-ball { animation:hball 2.2s ease-in-out infinite; transform-origin:center; }
@keyframes hball { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-13px);} }
.hero .h-net { animation:hnet 2.2s ease-in-out infinite; transform-origin:top center; }
@keyframes hnet { 0%,100%{ transform:skewX(0deg);} 50%{ transform:skewX(2.5deg) translateY(1.5px);} }
.hero .h-gk { animation:hgk 2.6s ease-in-out infinite; transform-origin:center bottom; }
@keyframes hgk { 0%,100%{ transform:translateX(-9px);} 50%{ transform:translateX(9px);} }
.hero .h-gk2 { animation:hgk2 2.6s ease-in-out infinite; }
@keyframes hgk2 { 0%,100%{ opacity:.85; } 50%{ opacity:1; } }

.title { font-size:clamp(28px, 8vw, 38px); font-weight:900; letter-spacing:4px; line-height:1.12;
  background:var(--title-grad); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:flow 5s linear infinite; filter:drop-shadow(0 4px 16px var(--title-glow)); }
@keyframes flow { to { background-position:300% 0; } }
.subtitle { display:block; font-size:11px; letter-spacing:7px; font-weight:700; margin-top:3px;
  color:rgba(255,255,255,.55); }
.best { margin-top:6px; font-size:13px; color:var(--a1); font-weight:800; }
.hint { font-size:12px; color:rgba(255,255,255,.6); margin-top:8px; line-height:1.65; }

/* ---------- 按钮 ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; color:#fff; font-weight:800; font-size:18px; letter-spacing:2px;
  padding:13px 22px; border-radius:16px; min-height:44px;
  background:var(--btn-grad); box-shadow:0 8px 24px var(--btn-shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform:scale(.94); box-shadow:0 4px 12px var(--btn-shadow); }
.btn.big { width:100%; margin-top:12px; font-size:20px; padding:14px; }
.btn.ghost { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  box-shadow:none; font-size:14px; letter-spacing:0; }
.btn.small { font-size:14px; padding:10px 16px; min-height:44px; }
.btn-row { display:flex; gap:10px; margin-top:12px; }
.btn-row .btn { flex:1; font-size:16px; padding:12px 6px; }

/* ---------- 模式选择：图形化难度 + 挑战说明 ---------- */
.mode-row { display:flex; gap:8px; margin-top:12px; }
.mode-row.two { max-width:330px; margin-left:auto; margin-right:auto; }
.mode-row.one { max-width:330px; margin-left:auto; margin-right:auto; }
.mode-row.one .mode-btn { min-height:66px; }
.mode-row.four {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:360px; margin-left:auto; margin-right:auto;
}
.mode-row.four .mode-btn { min-height:66px; padding:6px 4px 5px; }
.mode-row.four .mode-btn svg { margin-bottom:2px; }
.mode-row.four .mode-btn small { margin-top:1px; }
.mode-btn {
  flex:1; color:rgba(255,255,255,.72); font-size:15px; font-weight:800;
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12);
  border-radius:16px; padding:9px 4px 8px; min-height:76px;
  transition:all .15s ease; letter-spacing:0; position:relative;
}
.mode-btn svg { width:20px; height:20px; display:block; margin:0 auto 4px;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mode-btn small { display:block; font-size:10px; font-weight:500; margin-top:3px; opacity:.75; }
.mode-btn .pips { display:flex; justify-content:center; gap:3px; margin-top:5px; }
.mode-btn .pips i {
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
}
.mode-btn .pips i.on { background:var(--a1); border-color:var(--a1); box-shadow:0 0 6px var(--a1); }
.mode-btn.active { color:#fff; border-color:var(--a1);
  background:linear-gradient(135deg, color-mix(in srgb, var(--a1) 30%, transparent), color-mix(in srgb, var(--a2) 18%, transparent));
  box-shadow:0 0 18px color-mix(in srgb, var(--a1) 36%, transparent); }
.mode-btn.active::after {
  content:'✓'; position:absolute; top:5px; right:8px;
  width:18px; height:18px; border-radius:50%; font-size:12px; font-weight:900; line-height:18px;
  background:var(--a1); color:#241305;
}

/* ---------- 足球 AI 难度：独立于比赛模式 ---------- */
.difficulty-select {
  max-width:360px; margin:9px auto 0; padding:7px 8px 8px;
  border:1px solid rgba(61,218,215,.18); border-radius:14px;
  background:linear-gradient(180deg,rgba(12,34,34,.62),rgba(7,20,24,.76));
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.difficulty-caption {
  display:flex; justify-content:space-between; align-items:center;
  padding:0 3px 5px; color:rgba(255,255,255,.58); font-size:10px; font-weight:800; letter-spacing:1px;
}
.difficulty-caption b { color:#7dffcf; font-size:11px; letter-spacing:2px; }
body.theme-pong .difficulty-caption b { color:#83eaff; }
.difficulty-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.difficulty-btn {
  position:relative; min-height:42px; padding:5px 3px 4px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.66); font-size:12px; font-weight:900; transition:all .15s ease;
}
.difficulty-btn small { display:block; margin-top:1px; font-size:8px; font-weight:600; opacity:.58; }
.difficulty-btn.active {
  color:#eafff6; border-color:rgba(74,230,181,.72);
  background:linear-gradient(135deg,rgba(47,212,141,.27),rgba(24,168,184,.18));
  box-shadow:0 0 13px rgba(47,212,141,.18),inset 0 1px rgba(190,255,224,.10);
}
.difficulty-btn.active::after {
  content:''; position:absolute; left:24%; right:24%; bottom:-1px; height:2px; border-radius:2px;
  background:#55efb1; box-shadow:0 0 7px rgba(85,239,177,.8);
}
body.theme-pong .difficulty-btn.active {
  border-color:rgba(88,211,255,.76);
  background:linear-gradient(135deg,rgba(50,191,232,.28),rgba(82,96,232,.20));
  box-shadow:0 0 13px rgba(65,188,255,.2),inset 0 1px rgba(220,248,255,.1);
}
body.theme-pong .difficulty-btn.active::after { background:#6ee7ff; box-shadow:0 0 7px rgba(82,205,255,.85); }

/* ---------- 排行榜（折叠抽屉，菜单/结算共用） ---------- */
.board-toggle {
  margin-top:10px; width:100%; min-height:44px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.8); font-size:14px; font-weight:800; letter-spacing:2px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.board-toggle svg { width:16px; height:16px; stroke:var(--gold); fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.board-toggle .chev { transition:transform .2s ease; font-size:12px; }
.board-toggle[aria-expanded="true"] .chev { transform:rotate(180deg); }
.board-wrap { margin-top:8px; text-align:left; }
.board {
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:8px 10px; max-height:26vh; overflow-y:auto;
}
.board-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;
  padding:2px 6px; }
.board-cap { font-size:12px; font-weight:800; letter-spacing:3px; color:rgba(255,255,255,.55); }
.board-clear { background:none; border:none; font-size:12px; color:rgba(255,255,255,.45);
  padding:10px 12px; border-radius:8px; min-height:44px; min-width:44px; }
.board-clear:hover { color:#ff7a6a; background:rgba(255,90,80,.12); }
.board .row { display:flex; align-items:center; gap:8px; padding:6px 6px; border-radius:10px; font-size:14px; }
.board .row.me { background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 22%, transparent), transparent);
  outline:1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.board .rank { width:26px; height:26px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:8px; font-weight:900; font-size:13px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); }
.board .rank.r1 { background:linear-gradient(135deg,#ffd24a,#ff9a2e); color:#4a2a00; box-shadow:0 0 10px rgba(255,200,70,.6); }
.board .rank.r2 { background:linear-gradient(135deg,#dfe6f5,#9fb0cf); color:#26324a; }
.board .rank.r3 { background:linear-gradient(135deg,#ffa26b,#c96a2e); color:#3d1d00; }
.board .name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.board .mode { font-size:10px; padding:2px 7px; border-radius:99px; background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.65); flex:none; }
.board .pts { font-weight:900; color:var(--gold); flex:none; }
.board-empty { color:rgba(255,255,255,.45); font-size:13px; text-align:center; padding:14px 0; }

.save-row { display:flex; gap:8px; margin-top:10px; }
.save-row input { flex:1; min-width:0; font-size:16px; font-weight:700; color:#fff;
  background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.18); border-radius:12px;
  padding:10px 14px; min-height:44px; outline:none; }
.save-row input:focus { border-color:var(--a1); box-shadow:0 0 12px color-mix(in srgb, var(--a1) 40%, transparent); }

/* ---------- 结算：统计 + 进度条 + 徽章 ---------- */
.go-score { font-size:58px; font-weight:900; line-height:1; margin-top:4px;
  background:linear-gradient(135deg,#fff,var(--gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 18px color-mix(in srgb, var(--gold) 35%, transparent)); }
.go-sub { font-size:12px; color:rgba(255,255,255,.62); margin-top:6px; line-height:1.6; }
.record { margin-top:8px; display:inline-block; font-weight:900; font-size:15px; color:#3d2200;
  padding:7px 18px; border-radius:99px;
  background:linear-gradient(135deg,#ffe27a,#ffb02e);
  box-shadow:0 0 24px rgba(255,200,80,.65); animation:pulse 1s infinite; }
.go-title { font-size:20px; font-weight:900; letter-spacing:4px; color:rgba(255,255,255,.92); }
.menu-foot { display:flex; gap:10px; margin-top:10px; }
.menu-foot .btn { flex:1; }

#go-badge {
  margin-top:8px; display:inline-block; font-weight:900; font-size:13px; letter-spacing:1px;
  color:#0c2b1e; padding:6px 16px; border-radius:99px;
  background:linear-gradient(135deg,var(--cool),var(--a1));
  box-shadow:0 0 16px color-mix(in srgb, var(--a1) 45%, transparent);
}
.go-stats { margin-top:10px; text-align:left; display:grid; grid-template-columns:1fr 1fr; gap:4px 12px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:10px 12px; }
.stat-row { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; padding:2px 0; }
.stat-l { color:rgba(255,255,255,.6); }
.stat-v { font-weight:900; color:#fff; }
.go-bar { margin-top:8px; }
.go-bar-track { height:8px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.go-bar-fill { height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--a2), var(--a1)); transition:width .6s cubic-bezier(.2,.9,.3,1); }
.go-bar-label { font-size:10.5px; color:rgba(255,255,255,.5); margin-top:3px; text-align:left; letter-spacing:1px; }

/* ---------- 三步图示教程 ---------- */
.tut-steps { text-align:left; margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.tut-step { display:flex; gap:12px; align-items:center;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:10px 12px; }
.tut-fig { flex:none; width:74px; height:64px; border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.tut-fig svg { width:100%; height:100%; display:block; }
.tut-txt h3 { font-size:13.5px; color:var(--a1); letter-spacing:1px; }
.tut-txt p { font-size:12px; line-height:1.55; color:rgba(255,255,255,.75); margin-top:2px; }
.tut-txt b { color:#fff; }
.tut-dots { display:flex; justify-content:center; gap:6px; margin-top:10px; }
.tut-dots i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22); }
.tut-dots i.on { background:var(--a1); width:18px; border-radius:99px; }
.tut-note { font-size:11px; color:rgba(255,255,255,.5); margin-top:8px; line-height:1.6; }
.tut-anim .t-dot { animation:tutdot 1.6s ease-in-out infinite; }
@keyframes tutdot { 0%{ transform:translate(0,0); opacity:1;} 70%{ transform:translate(14px,-26px); opacity:.4;} 100%{ transform:translate(14px,-26px); opacity:0;} }
.tut-anim .t-arc { stroke-dasharray:60; stroke-dashoffset:60; animation:tutarc 1.6s ease-in-out infinite; }
@keyframes tutarc { 0%{ stroke-dashoffset:60;} 60%,100%{ stroke-dashoffset:0;} }
.tut-anim .t-ball2 { animation:tutball 1.6s ease-in-out infinite; }
@keyframes tutball { 0%,20%{ transform:translate(0,0);} 70%,100%{ transform:translate(14px,-26px);} }
.tut-anim .t-rel { animation:tutrel 1.6s ease-in-out infinite; }
@keyframes tutrel { 0%,55%{ transform:translate(0,0);} 75%,100%{ transform:translate(14px,-26px) scale(1.25);} }
.tut-anim .t-ping { animation:tutping 1.6s ease-out infinite; transform-origin:center; }
@keyframes tutping { 0%,60%{ opacity:0; transform:scale(.4);} 75%{ opacity:.9; transform:scale(1);} 100%{ opacity:0; transform:scale(1.5);} }

/* ---------- 帮助（保留紧凑说明） ---------- */
.help-list { text-align:left; margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.help-list h3 { font-size:14px; color:var(--a1); letter-spacing:2px; }
.help-list p { font-size:13px; line-height:1.7; color:rgba(255,255,255,.78); }
.help-list b { color:#fff; }

/* ---------- 横屏提示 ---------- */
#rotate {
  z-index:90; flex-direction:column; gap:20px; text-align:center;
  background:linear-gradient(165deg, #131a38, #090d20);
}
#rotate .phone {
  width:56px; height:96px; border:4px solid rgba(255,255,255,.9); border-radius:14px;
  position:relative; animation:phone-rot 2s ease-in-out infinite;
}
#rotate .phone::after { content:''; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:16px; height:3px; border-radius:2px; background:rgba(255,255,255,.55); }
@keyframes phone-rot { 0%,20% { transform:rotate(0);} 60%,100% { transform:rotate(-90deg);} }
#rotate h2 { color:#fff; font-size:20px; letter-spacing:4px; }
#rotate p { color:rgba(255,255,255,.55); font-size:13px; margin-top:6px; }

/* ---------- Toast ---------- */
#toast {
  position:absolute; left:50%; bottom:calc(28px + var(--safe-b)); transform:translateX(-50%);
  z-index:60; background:rgba(15,19,38,.94); border:1px solid rgba(255,255,255,.15); color:#fff;
  padding:10px 22px; border-radius:99px; font-size:14px; font-weight:700; pointer-events:none;
  opacity:0; transition:opacity .25s ease, transform .25s ease; max-width:86vw; text-align:center;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(-6px); }

/* ---------- 横屏：隐藏所有业务面板，只留旋转提示 ---------- */
body.landscape .overlay:not(#rotate) { display:none !important; }

/* ---------- 窄屏微调 ---------- */
@media (max-width: 350px) {
  .mode-btn { font-size:13px; }
  .hud-box { padding:8px 10px; }
  #hud-score { font-size:24px; min-width:54px; }
  .hero { height:88px; }
  #skill-dock { width:calc(100% - 12px); gap:3px; padding:4px; }
  .skill-btn { min-height:39px; }
  .skill-btn b { font-size:11px; }
  #game-nav { top:calc(14px + var(--safe-t)); right:calc(6px + var(--safe-r)); gap:3px; }
  #game-nav a { min-width:46px; height:36px; padding:0 4px; font-size:9px; }
  body.theme-pong #hud-score { min-width:78px; font-size:21px; }
}

@media (max-width: 700px) {
  #app { width:100vw; box-shadow:none; }
}

@media (orientation: landscape) and (max-height: 520px) {
  #app { width:100vw; max-width:none; box-shadow:none; }
}

/* ---------- 矮屏（320×568 等）：HUD 压缩到 38~42px，隐藏次要说明 ---------- */
@media (max-height: 640px) {
  .overlay { padding:calc(58px + var(--safe-t)) 10px calc(6px + var(--safe-b)); }
  .panel { padding:10px 12px 8px; border-radius:18px; }
  .panel::before { border-radius:18px 18px 0 0; }
  .hero { display:none; }
  .title { font-size:24px; letter-spacing:3px; }
  .subtitle { display:none; }
  .best { margin-top:2px; font-size:11px; }
  .mode-row { margin-top:6px; }
  .mode-btn { min-height:58px; padding:5px 4px; font-size:13px; }
  .mode-row.four { gap:5px 6px; }
  .mode-row.four .mode-btn { min-height:50px; padding:3px 3px 2px; }
  .mode-btn svg { width:16px; height:16px; margin-bottom:2px; }
  .mode-btn small { font-size:9px; margin-top:1px; }
  .mode-btn .pips { display:none; }
  .difficulty-select { margin-top:5px; padding:4px 5px 5px; }
  .difficulty-caption { padding-bottom:3px; font-size:9px; }
  .difficulty-btn { min-height:34px; padding:2px; font-size:11px; }
  .difficulty-btn small { font-size:7px; }
  .btn.big { margin-top:7px; min-height:40px; padding:8px; font-size:18px; }
  .hint { display:none; }
  .board-toggle { margin-top:6px; min-height:40px; }
  .menu-foot { margin-top:6px; }
  .menu-foot .btn { min-height:40px; padding:7px 10px; }
  #hud { padding-top:calc(14px + var(--safe-t)); }
  #proj-tag { top:calc(14px + var(--safe-t)); height:34px; }
  #btn-switch { top:calc(12px + var(--safe-t)); height:42px; }
  .hud-box { min-height:38px; padding:6px 12px; }
  #hud-score { font-size:22px; min-width:52px; }
  #hud-timer { font-size:18px; min-width:46px; }
  #btn-pause { width:40px; height:40px; }
  #hud-sub { display:none; }
  #skill-dock { bottom:calc(6px + var(--safe-b)); padding:3px; gap:4px; }
  .skill-btn { min-height:36px; padding:2px 1px; }
  .skill-btn b { font-size:10px; }
  .skill-btn small { font-size:7px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .title, .record, #rotate .phone, #hud-timer.urgent, .hero .h-ball, .hero .h-net,
  .hero .h-gk, .hero .h-gk2, .tut-anim .t-dot, .tut-anim .t-arc, .tut-anim .t-ball2,
  .tut-anim .t-rel, .tut-anim .t-ping { animation:none !important; }
  .panel { animation-duration:.01s; }
  .pop { animation:none; }
}