/* ============================================================
   1024 PIXEL UNIVERSE — extras.css
   像素徽章生成器 + 8-bit 街机小游戏 样式
   ============================================================ */

.x-panel{
  background:rgba(8,14,24,.72);
  border:1px solid #1d2c44;
  position:relative;
  padding:26px;
  margin-top:22px;
}
.x-panel::before,.x-panel::after{
  content:"";position:absolute;width:10px;height:10px;border:2px solid #22ff9c;
}
.x-panel::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.x-panel::after{bottom:-2px;right:-2px;border-left:none;border-top:none}

/* ---------- badge generator ---------- */
.badge-wrap{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start}
@media(max-width:760px){.badge-wrap{grid-template-columns:1fr}}
.badge-stage{display:flex;flex-direction:column;align-items:center;gap:14px}
#badgeCanvas{
  width:240px;height:240px;image-rendering:pixelated;
  background:#060b14;border:1px solid #24344f;
  box-shadow:0 0 24px rgba(34,255,156,.12) inset;cursor:crosshair;
}
.badge-controls{display:flex;flex-direction:column;gap:14px}
.badge-controls label{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.18em;color:#7fa89a;text-transform:uppercase}
.badge-name-row{display:flex;gap:10px}
.badge-name-row input{
  flex:1;background:#08111d;border:1px solid #24344f;color:#e6fff4;
  padding:11px 13px;font-family:var(--mono,monospace);font-size:15px;letter-spacing:.08em;outline:none;
}
.badge-name-row input:focus{border-color:#22ff9c;box-shadow:0 0 0 1px rgba(34,255,156,.3)}
.pal-row{display:flex;gap:10px;flex-wrap:wrap}
.pal-chip{
  width:42px;height:42px;border:2px solid #24344f;cursor:pointer;position:relative;
  image-rendering:pixelated;
}
.pal-chip.on{border-color:#22ff9c;box-shadow:0 0 12px rgba(34,255,156,.5)}
.badge-btns{display:flex;gap:10px;flex-wrap:wrap}
.badge-note{font-size:12.5px;color:#5f7d72;line-height:1.7;margin:0}

/* ---------- arcade ---------- */
.arcade-wrap{display:grid;grid-template-columns:1fr 240px;gap:24px;align-items:start}
@media(max-width:760px){.arcade-wrap{grid-template-columns:1fr}}
.arcade-screen{
  position:relative;background:#04070d;border:1px solid #24344f;padding:10px;
}
#gameCanvas{
  width:100%;display:block;image-rendering:pixelated;background:#04070d;
  touch-action:none;cursor:none;
}
.arcade-hud{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono,monospace);font-size:13px;letter-spacing:.1em;margin-bottom:10px;flex-wrap:wrap}
.arcade-hud b{color:#22ff9c;font-size:16px}
.arcade-hud .life{color:#ff2e88;letter-spacing:2px}
.arcade-side{display:flex;flex-direction:column;gap:14px}
.arcade-tip{font-size:12.5px;color:#5f7d72;line-height:1.8;margin:0}
.arcade-tip kbd{
  font-family:var(--mono,monospace);background:#0c1626;border:1px solid #24344f;
  padding:1px 7px;color:#2ae5ff;border-radius:3px;font-size:11px;
}
.game-overlay{
  position:absolute;inset:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(4,7,13,.82);text-align:center;
}
.game-overlay h3{font-family:var(--mono,monospace);font-size:22px;color:#22ff9c;letter-spacing:.1em;margin:0}
.game-overlay p{color:#9fc3b6;font-size:13.5px;margin:0;max-width:260px;line-height:1.7}
.game-overlay.hidden{display:none}
.ov-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* 连击进度条 */
.combo-bar{height:6px;background:#0c1626;border:1px solid #1d2c44;margin:0 0 10px;overflow:hidden}
.combo-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22ff9c,#2ae5ff);transition:width .12s linear;box-shadow:0 0 10px rgba(34,255,156,.6)}