:root {
  --em-primary: #00E0FF;
  --em-accent: #7C4DFF;
  --em-bg: #0B1220;
  --em-panel: #172335;
  --em-text: #E6F1FF;
}

/* 修正背景路径（你上传的是 1920x1280）并开启 cover */
body{
  background: url('/static/games/energy-miner/bg/reactor_back_1920x1280.webp') no-repeat center center fixed;
  background-size: cover;
}

/* 新增：JS 动态创建的“Watch Ad”按钮会用到 .btn-yellow */
.btn.btn-yellow{
  background: var(--em-primary);
  color: #001018;
}
.btn.btn-yellow:hover{
  filter: brightness(1.1);
  box-shadow: 0 0 10px var(--em-primary);
}

/* 面板 */
.em-panel {
  background: url('/static/games/energy-miner/ui/ui_panel_512.webp') no-repeat center/contain;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0,224,255,.35);
}

/* 主/次按钮皮肤（复用你现有 .btn） */
.btn.em-primary {
  background: url('/static/games/energy-miner/ui/ui_button_primary.webp') no-repeat center/100% 100%;
  color: #fff; font-weight: 700; letter-spacing: .5px;
  padding: 12px 22px; border-radius: 12px;
}
.btn.em-secondary {
  background: url('/static/games/energy-miner/ui/ui_button_secondary.webp') no-repeat center/100% 100%;
  color: #E6F1FF; font-weight: 600;
}

/* 进度条（外框三切片 + 内部填充） */
.em-progress {
  height: 20px; position: relative;
  background:
    left / auto 100% no-repeat url('/static/games/energy-miner/ui/ui_bar_left.webp'),
    right / auto 100% no-repeat url('/static/games/energy-miner/ui/ui_bar_right.webp'),
    center / auto 100% repeat-x url('/static/games/energy-miner/ui/ui_bar_mid.webp');
  border-radius: 10px; overflow: hidden;
}
.em-progress .fill {
  position: absolute; inset: 2px; width: 40%; /* JS 改这个宽度即可 */
  background: linear-gradient(90deg, rgba(0,224,255,.9), rgba(124,77,255,.9));
  border-radius: 8px; box-shadow: 0 0 10px rgba(0,224,255,.6);
  transition: width .25s ease;
}

/* 小徽章 */
.em-badge {
  display: inline-block; padding: 2px 8px; color:#00131f; font-weight:700;
  background: url('/static/games/energy-miner/ui/ui_badge.webp') no-repeat center/contain;
}

button:hover {
  background: var(--em-primary);
  box-shadow: 0 0 10px var(--em-primary);
}

/* 1) 全局暗角与暗化层：不改 HTML 也能提高可读性 */
body::after{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  /* 中央略亮、四周压暗，再整体加一层轻微暗化 */
  background:
    radial-gradient(60% 50% at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.35) 100%),
    linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.22));
  z-index: 0;
}
/* 确保页面内容盖在暗化层上 */
main, #app, .container, .page, .game, .wrap { position: relative; z-index: 1; }

/* 2) 文本统一加微弱描边，背景亮时更清晰 */
h1,h2,h3,h4,p,span,div,button,label{
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
}

/* 3) Watch Ad 按钮：亮底→深色字，保证对比 */
.btn.btn-yellow{
  background: #00E0FF;
  color: #0B1220 !important;
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 0 0 2px rgba(0,0,0,.15) inset, 0 0 14px rgba(0,224,255,.35);
}

/* 4) TK Energy 胶囊底 + 深红字（更显眼） */
.stat-chip{
  display:inline-block; padding:2px 10px; border-radius:10px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,90,122,.35);
}
#tkEnergy{ color:#FF5A7A; font-weight:800; letter-spacing:.3px; }

/* === Miner row icons & readability === */
.miner-row{
  display:flex; align-items:center; gap:10px;
  color:#dce8ff; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.miner-icon{
  width:28px; height:28px; flex:0 0 28px;
  background-position:center; background-size:contain; background-repeat:no-repeat;
  filter: drop-shadow(0 0 6px rgba(0,180,255,.55));
  opacity:.95;
}
/* 三台矿机各自的图标（用你已上传的 sprites） */
.miner-icon.miner-basic  { background-image:url('/static/games/energy-miner/sprites/miner_basic_idle_512.webp'); }
.miner-icon.miner-core   { background-image:url('/static/games/energy-miner/sprites/miner_core_idle_512.webp'); }
.miner-icon.miner-fusion { background-image:url('/static/games/energy-miner/sprites/miner_fusion_idle_512.webp'); }

/* === [Mobile Fixes: <=390px] === */
@media (max-width: 390px) {

  /* 让 overclock badge 自动换行并缩小 */
  #ocBadge {
    transform: scale(0.85);
    transform-origin: right top;
    white-space: nowrap;
    right: 4px !important;
    top: 4px !important;
  }

  /* 调整右上角整体布局，让元素不出框 */
  .game-header, .energy-header, .wrap > div:first-child {
    padding-right: 6px !important;
  }

  /* 减小主标题和文字字号 */
  h1 { font-size: 22px; }
  p, span, button, label { font-size: 14px; }

  /* 矿机区域紧凑一点 */
  .miner-row { gap: 6px; font-size: 13px; }
  .miner-icon { width: 24px; height: 24px; }

  /* 按钮区间距优化 */
  button { padding: 8px 12px; margin: 4px; }

  /* 整体缩放 95% 保证内容不顶边 */
  body { transform: scale(0.95); transform-origin: top center; }
}