/* ============================================================
   Boss Strike — Event Mini-Game Styles
   ============================================================ */

/* ── Event button pulse in hero profile ── */
@keyframes bsTextPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes bsEventPulse {
  0%, 100% { border-color: rgba(255,152,0,0.3); box-shadow: none; }
  50% { border-color: rgba(255,152,0,0.6); box-shadow: 0 0 12px rgba(255,152,0,0.2); }
}

/* ── Override panelHome constraints when event is active ── */
#panelHome.bs-active { background: none !important; align-items: stretch !important; }
#panelHome.bs-active::before { display: none !important; }
#panelHome.bs-active > * { max-width: none !important; }

/* ── Menu Screen ── */
.bs-menu { position: relative; min-height: calc(100vh - 60px); overflow: hidden; }
.bs-menu-bg { position: absolute; inset: 0; background-size: cover; background-position: center top; z-index: 0; }
.bs-menu-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,5,20,0.6) 0%, rgba(10,5,20,0.85) 50%, rgba(10,5,20,0.92) 100%); z-index: 1; }
.bs-menu-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; padding: 20px 16px; text-align: center; }

/* ── Game Screen full bleed ── */

.bs-menu-header { margin-bottom: 20px; }
.bs-menu-badge { display: inline-block; padding: 3px 12px; background: rgba(170,68,255,0.2); border: 1px solid rgba(170,68,255,0.4); border-radius: 20px; color: #cc88ff; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.bs-menu-title { font-size: 36px; font-weight: 900; color: #FFD700; text-shadow: 0 0 20px rgba(255,215,0,0.4); letter-spacing: 2px; font-family: var(--font-display, serif); }
.bs-menu-time { color: #888; font-size: 12px; margin-top: 4px; }

.bs-menu-best { margin: 16px 0; padding: 16px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,215,0,0.15); border-radius: 12px; }

/* ── Buttons ── */
.bs-btn { display: block; width: 100%; max-width: 300px; margin: 12px auto; padding: 14px 24px; border: none; border-radius: 12px; font-size: 16px; font-weight: 800; cursor: pointer; transition: all 0.2s; letter-spacing: 1px; }
.bs-btn-play { background: linear-gradient(135deg, #FFD700, #FF8C00); color: #1a1020; box-shadow: 0 4px 20px rgba(255,215,0,0.3); }
.bs-btn-play:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(255,215,0,0.5); }
.bs-btn-sec { background: rgba(255,255,255,0.06); color: #888; border: 1px solid rgba(255,255,255,0.1); font-size: 12px; padding: 10px 20px; }
.bs-btn-sec:hover { background: rgba(255,255,255,0.1); color: #ccc; }

/* ── Two-column layout ── */
.bs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; text-align: left; }
.bs-col { min-width: 0; }
@media (max-width: 700px) {
  .bs-cols { grid-template-columns: 1fr; }
}

/* ── Leaderboard ── */
.bs-leaderboard { margin-bottom: 16px; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,215,0,0.1); border-radius: 10px; max-height: 400px; overflow-y: auto; }

/* ── Milestones ── */
.bs-milestones { margin: 20px 0; text-align: left; }
.bs-ms-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.04); margin-bottom: 4px; }
.bs-ms-reached { background: rgba(255,215,0,0.06); border-color: rgba(255,215,0,0.15); }
.bs-ms-score { color: #888; font-size: 11px; font-weight: 700; min-width: 70px; }
.bs-ms-reward { flex: 1; color: #ccc; font-size: 11px; font-weight: 600; }
.bs-ms-claimed { color: #44cc44; font-size: 10px; font-weight: 700; }
.bs-ms-locked { color: #444; font-size: 10px; }
.bs-ms-claim { padding: 4px 12px; border: 1px solid rgba(255,215,0,0.3); background: rgba(255,215,0,0.1); color: #FFD700; font-size: 10px; font-weight: 700; border-radius: 6px; cursor: pointer; }
.bs-ms-claim:hover { background: rgba(255,215,0,0.2); }

/* ── Participation & How To ── */
.bs-participation, .bs-howto { margin: 16px 0; padding: 12px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; text-align: left; }

/* ── Game Screen ── */
.bs-game { position: relative; min-height: calc(100vh - 60px); background: #0a0510; display: flex; flex-direction: column; overflow: hidden; }

/* Legacy topbar (unused after overlay refactor but kept for backward compat if referenced) */
.bs-topbar { display: none; }

/* Overlay stats on arena — user's eye stays near the ring while reading stats */
.bs-overlay-tl {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 6;
  pointer-events: none;
  text-align: left;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 215, 0, 0.25);
  backdrop-filter: blur(4px);
}
.bs-overlay-tr {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 6;
  pointer-events: none;
  text-align: right;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
}
.bs-overlay-combo {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 16px currentColor, 0 2px 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  min-height: 36px;
  transition: color 0.2s, transform 0.2s;
  font-family: var(--font-display, serif);
  letter-spacing: 1px;
}
.bs-score-wrap { text-align: center; }
.bs-score-label { display: block; font-size: 8px; color: #a89968; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 1px; }
.bs-score-val { font-size: 22px; font-weight: 900; color: #FFD700; font-family: var(--font-display, serif); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); line-height: 1; }
.bs-round { color: #ffaa44; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.bs-run-gold { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 900; color: #FFD700; font-family: var(--font-display, serif); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.bs-run-gold-ico { width: 14px; height: 14px; object-fit: contain; }
/* Backward-compat for old .bs-combo code paths that set textContent on #bsCombo — handled via .bs-overlay-combo */
.bs-combo { display: none; }

/* ── HP Bars ── */
.bs-hp-row { display: flex; align-items: center; gap: 8px; padding: 4px 16px; }
.bs-hp-label { color: #888; font-size: 10px; font-weight: 700; min-width: 36px; text-transform: uppercase; }
.bs-hp-bar { flex: 1; height: 12px; background: rgba(255,255,255,0.06); border-radius: 6px; position: relative; overflow: hidden; }
.bs-hp-fill { height: 100%; border-radius: 6px; transition: width 0.3s ease; }
.bs-hp-player { background: linear-gradient(90deg, #2ED573, #44cc44); }
.bs-hp-boss { background: linear-gradient(90deg, #ff4444, #ff6666); }
.bs-hp-text { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 9px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

/* ── Arena (center play area) ── */
.bs-arena { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; min-height: 300px; max-width: 500px; margin: 0 auto; aspect-ratio: 1; }

.bs-boss-img { width: 180px; height: 180px; object-fit: contain; z-index: 2; filter: drop-shadow(0 0 20px rgba(255,0,0,0.3)); pointer-events: none; }

/* Target zone (static golden ring showing where to hit) */
.bs-target-zone {
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  border: 3px solid rgba(255,215,0,0.2);
  box-shadow: 0 0 12px rgba(255,215,0,0.1), inset 0 0 12px rgba(255,215,0,0.05);
  z-index: 1;
  pointer-events: none;
}

/* Shrinking ring — JS sets width/height in px now */
.bs-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15);
  z-index: 3;
  pointer-events: none;
  transition: border-color 0.1s, box-shadow 0.1s;
}

/* Slash effect overlay */
.bs-slash-fx {
  position: absolute; width: 200px; height: 200px; object-fit: contain;
  z-index: 8; pointer-events: none; opacity: 0;
  transform: rotate(-30deg) scale(0.5);
  transition: none;
}
.bs-slash-fx.bs-fx-show {
  opacity: 1; transform: rotate(-30deg) scale(1.2);
  animation: bsSlashAnim 0.35s ease-out forwards;
}
@keyframes bsSlashAnim {
  0% { opacity: 1; transform: rotate(-30deg) scale(0.5); }
  50% { opacity: 1; transform: rotate(-30deg) scale(1.3); }
  100% { opacity: 0; transform: rotate(-30deg) scale(1.5); }
}

/* Boss attack effect */
.bs-attack-fx {
  position: absolute; width: 280px; height: 280px; object-fit: contain;
  z-index: 7; pointer-events: none; opacity: 0;
}
.bs-attack-fx.bs-fx-show {
  animation: bsAttackAnim 0.5s ease-out forwards;
}
@keyframes bsAttackAnim {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.1) rotate(15deg); }
  100% { opacity: 0; transform: scale(1.4) rotate(30deg); }
}

/* Hit result text */
.bs-hit-text {
  position: absolute;
  z-index: 10;
  font-size: 28px;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  top: 20%;
}

/* Tap instruction */
.bs-tap-area { text-align: center; padding: 10px; color: #555; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

/* ── Screen shake ── */
.bs-shake { animation: bsShake 0.2s ease; }
@keyframes bsShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ── Game Over Overlay ── */
.bs-gameover-wrap { position: absolute; inset: 0; background: rgba(0,0,0,0.8); z-index: 20; display: flex; align-items: center; justify-content: center; }
.bs-gameover { text-align: center; padding: 30px; }
.bs-go-title { font-size: 32px; font-weight: 900; color: #ff4444; text-shadow: 0 0 20px rgba(255,0,0,0.4); margin-bottom: 8px; font-family: var(--font-display, serif); }
.bs-go-score { font-size: 48px; font-weight: 900; color: #FFD700; text-shadow: 0 0 20px rgba(255,215,0,0.4); font-family: var(--font-display, serif); }

/* ── Mobile adjustments ── */
@media (max-width: 640px) {
  .bs-boss-img { width: 140px; height: 140px; }
  .bs-target-zone { width: 65%; padding-bottom: 65%; }
  .bs-menu-title { font-size: 28px; }
  .bs-go-score { font-size: 36px; }
}