/* xc-game-ui.css — 星辰学院 · 游戏页视觉升级层
 * 适用：灵兽岛 island / 地铁跑酷 metro-runner / 奥德彪跑酷 cat-parkour
 * 原则：只做视觉"加法"，不改任何游戏逻辑；深色游戏底保留，整体升级为精致霓虹风。
 * 配色：深空蓝紫底 + 霓虹青 + 樱花粉点缀（小颖喜欢粉色系）
 */
html, body { background: #070716 !important; }

/* ===== 背景氛围：柔和渐变光晕 + 细星星 ===== */
#gc, #gameContainer, body > .xc-shell, .game-wrap {
  position: relative;
}
#gc::before, #gameContainer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 60% at 20% -10%, rgba(120,80,255,.16), transparent 60%),
    radial-gradient(ellipse 100% 50% at 85% 20%, rgba(0,220,255,.10), transparent 55%),
    radial-gradient(ellipse 90% 40% at 50% 110%, rgba(255,120,190,.10), transparent 60%);
}
#gc canvas, #gameContainer canvas { position: relative; z-index: 1; }
/* 2026-09-06 修复：删除强制 position:relative 规则（原 `#gc > div:not(canvas), #gameContainer > div { position:relative; z-index:5 }`）。
   该规则把游戏内 absolute/fixed 悬浮层（灵兽岛底部按钮栏、跑酷开始按钮/商店/道具栏、遮罩层）强制改成 relative，
   导致整排 UI 被挤出视口、不可见不可点。各游戏页自带层定位，外部 CSS 不再干预。 */

/* ===== HUD：毛玻璃 + 霓虹描边 ===== */
.hud-box {
  background: rgba(15,15,40,.62) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(120,180,255,.22) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 0 12px rgba(0,220,255,.05);
  border-radius: 12px !important;
  color: rgba(255,255,255,.92) !important;
  transition: transform .15s ease;
}
.hud-box .val { color: #6ef !important; text-shadow: 0 0 8px rgba(0,220,255,.8); }
.hud-box:nth-child(6n) .val { color: #ffb3d1 !important; text-shadow: 0 0 8px rgba(255,120,190,.8); }

/* ===== 底部操作栏：毛玻璃 + 顶部霓虹线 ===== */
#bottomBar, #itemBar {
  background: rgba(12,12,32,.88) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(140,120,255,.25) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
}
.bbtn {
  color: rgba(255,255,255,.62) !important;
  font-size: 10px !important;
  border-radius: 10px !important;
}
.bbtn .bi { filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.bbtn:active { background: rgba(0,220,255,.12) !important; }

/* ===== 主按钮：霓虹渐变发光 ===== */
.btn, #startBtn, .start-btn, #restartBtn {
  background: linear-gradient(135deg, #6ef 0%, #9b8cff 50%, #ff8fb1 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 4px 18px rgba(120,120,255,.45), 0 0 24px rgba(255,143,177,.25) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
  font-weight: 700 !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.btn:hover, #startBtn:hover { filter: brightness(1.08); }
.btn:active, #startBtn:active { transform: scale(.94); }

/* ===== 弹窗面板：毛玻璃 + 霓虹光边 ===== */
.panel, .chal-box, .shop-panel, .xc-modal-box {
  background: linear-gradient(160deg, rgba(24,24,58,.96), rgba(10,10,32,.96)) !important;
  border: 1px solid rgba(140,120,255,.30) !important;
  border-radius: 22px !important;
  box-shadow: 0 0 0 1px rgba(0,220,255,.06), 0 12px 40px rgba(0,0,0,.55), 0 0 32px rgba(120,90,255,.12) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: xcPanelIn .28s ease-out !important;
}
@keyframes xcPanelIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.panel .ptitle, .chal-box .chal-badge, .shop-panel .shop-title {
  color: #9ef !important;
  text-shadow: 0 0 12px rgba(0,220,255,.5);
}
.panel .ptitle { font-size: 18px !important; }
.ptitle:has(> span), .ptitle span { text-shadow: none; }

/* ===== 选项按钮：精致悬浮 ===== */
.teach-opt, .chal-opt, .shop-item, .row {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  transition: all .18s ease !important;
}
.teach-opt:active, .chal-opt:active, .row:active { transform: scale(.96); background: rgba(0,220,255,.10) !important; }
.teach-opt.correct, .chal-opt.correct { box-shadow: 0 0 16px rgba(13,198,79,.35); }
.teach-opt.wrong, .chal-opt.wrong { box-shadow: 0 0 16px rgba(255,60,60,.30); }

/* ===== 标题：霓虹字效 ===== */
#overlay h1, .start-title {
  background: linear-gradient(135deg, #6ef, #c9a7ff, #ffb3d1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 2px 10px rgba(150,130,255,.35));
}
#overlay .sub, .subtitle, .tips { color: rgba(255,255,255,.45) !important; }

/* ===== 倒计时 / 过关 / 特效文字 ===== */
#countdown .num {
  background: linear-gradient(135deg, #6ef, #ffb3d1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 18px rgba(140,120,255,.8));
}
#levelUp .text { background: linear-gradient(135deg,#6ef,#ffb3d1); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none !important; filter: drop-shadow(0 0 14px rgba(255,140,200,.7)); }

/* ===== 道具栏 ===== */
.islot {
  background: rgba(15,15,42,.70) !important;
  border: 1px solid rgba(120,160,255,.20) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 0 8px rgba(0,220,255,.04);
}
.islot:active { transform: scale(.86) !important; }
.islot .ct { background: linear-gradient(135deg,#6ef,#9b8cff) !important; color: #fff !important; box-shadow: 0 0 8px rgba(0,220,255,.5); }

/* ===== 关闭 / 返回按钮 ===== */
.pclose, .shop-close, .xc-close {
  color: rgba(255,255,255,.45) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  display: inline-block;
  transition: all .18s ease;
}
.pclose:hover, .shop-close:hover { color: #fff !important; background: rgba(255,255,255,.08); }

/* ===== 战斗日志：玻璃感 ===== */
.battle-msg {
  background: rgba(12,12,34,.78) !important;
  border: 1px solid rgba(120,160,255,.14) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(6px);
}

/* ===== 护眼模式兼容（深色页面护眼遮罩不变） ===== */
body.xc-eye::after { display: none; }

/* ===== 平滑进入动画 ===== */
#gc, #gameContainer { animation: xcFadeIn .4s ease-out; }
@keyframes xcFadeIn { from { opacity: 0; } to { opacity: 1; } }