/* Daily Boss: a focused battle stage with a compact combat dashboard. */
#daily-boss {
  --db-ink: #ebf6ff;
  --db-muted: #aac4d8;
  --db-line: rgba(132, 192, 225, .22);
  --db-gold: #ffd88a;
  min-width: 0;
}

#daily-boss .mode-play-intro {
  min-height: 0;
  padding: clamp(18px, 2.2vw, 30px);
  border-color: rgba(108, 205, 245, .32);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 4% 0%, rgba(59, 177, 227, .22), transparent 38%),
    linear-gradient(115deg, #153751 0%, #0b253c 49%, #091d32 100%);
  box-shadow: inset 0 1px rgba(224, 246, 255, .11), 0 18px 48px rgba(0, 5, 14, .2);
}

#daily-boss .mode-play-intro .eyebrow {
  color: #8fdfff;
  letter-spacing: .16em;
}

#daily-boss .mode-play-intro .h1-like {
  margin: 4px 0 7px;
  color: #f4fbff;
  font-size: clamp(2.15rem, 3vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

#daily-boss .mode-play-intro .hero-subcopy {
  max-width: 49ch;
  margin: 0;
  color: #bcd8e9;
  font-size: clamp(.92rem, 1.05vw, 1.05rem);
  line-height: 1.5;
}

#daily-boss .game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.57fr) minmax(295px, .73fr);
  align-items: start;
  gap: 17px;
  width: 100%;
  max-width: 100%;
}

#daily-boss .game-layout > * { min-width: 0; }

#daily-boss .db-battle-intro {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 3px 4px;
}

#daily-boss .db-overline,
#daily-boss .db-console-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8bdcff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#daily-boss .db-live-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #73f4cb;
  box-shadow: 0 0 0 4px rgba(115, 244, 203, .1), 0 0 17px rgba(115, 244, 203, .6);
}

#daily-boss .db-battle-intro h2 {
  margin: 7px 0 3px;
  color: var(--db-ink);
  font-size: clamp(1.65rem, 2.2vw, 2.4rem);
  letter-spacing: -.035em;
  line-height: 1.1;
}

#daily-boss .db-battle-intro p {
  margin: 0;
  color: var(--db-muted);
  line-height: 1.45;
}

#daily-boss .db-reset-marker {
  display: grid;
  gap: 3px;
  flex: none;
  min-width: 176px;
  padding: 11px 16px;
  border-left: 2px solid #70d8ff;
  color: var(--db-muted);
  background: linear-gradient(90deg, rgba(64, 179, 225, .1), transparent);
}

#daily-boss .db-reset-marker span {
  color: #88d9fb;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#daily-boss .db-reset-marker strong { color: var(--db-ink); font-size: .91rem; }

#daily-boss .game-layout > .action-card {
  border-radius: 18px;
  border-color: var(--db-line);
  box-shadow: inset 0 1px rgba(237, 249, 255, .07), 0 16px 40px rgba(0, 7, 17, .18);
}

#daily-boss .db-battle-card {
  grid-column: 1;
  grid-row: 2 / span 2;
  padding: clamp(14px, 1.5vw, 22px);
  overflow: hidden;
  background: linear-gradient(160deg, #102d46, #07192d 72%);
}

#daily-boss .db-boss-heading {
  align-items: center;
  margin-bottom: 14px;
  padding: 0 3px;
}

#daily-boss .db-boss-heading .eyebrow { color: #91d8f5; }
#daily-boss .db-boss-heading h2 {
  margin: 3px 0 0;
  font-size: clamp(1.45rem, 2vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}

#daily-boss .db-boss-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 8px 11px;
  border: 1px solid rgba(115, 244, 203, .27);
  border-radius: 999px;
  color: #c2ffe9;
  background: rgba(61, 158, 133, .12);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

#daily-boss .boss-arena {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(400px, 42vw, 590px);
  margin: 0;
  padding: 14px 22px 86px;
  overflow: hidden;
  border: 1px solid rgba(157, 211, 237, .22);
  border-radius: 15px;
  background-position: 50% 50%;
  box-shadow: inset 0 -80px 84px rgba(1, 9, 19, .53), inset 0 1px rgba(238, 251, 255, .11);
}

#daily-boss .boss-arena.has-boss-background {
  background-image: linear-gradient(180deg, rgba(3, 14, 27, .09) 0%, rgba(3, 14, 27, .03) 54%, rgba(3, 12, 24, .8) 100%), var(--boss-background);
  background-size: cover;
  background-position: center;
}

#daily-boss .boss-float-wrap {
  width: min(76%, 460px);
  max-height: 470px;
  margin: auto 0;
}

#daily-boss .boss-image {
  width: 100%;
  max-height: 450px;
  object-fit: contain;
  filter: drop-shadow(0 22px 28px rgba(0, 4, 13, .55));
}

#daily-boss .db-health-console {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: grid;
  gap: 9px;
  padding: 13px 16px 15px;
  border: 1px solid rgba(198, 226, 241, .23);
  border-radius: 12px;
  background: rgba(3, 13, 25, .77);
  box-shadow: 0 12px 27px rgba(0, 5, 15, .22);
  backdrop-filter: blur(12px);
}

#daily-boss .db-health-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#daily-boss .db-health-label span {
  color: #9dc5da;
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
#daily-boss .db-health-label strong { color: #fff2d6; font-size: clamp(.9rem, 1.15vw, 1.12rem); text-align: right; }
#daily-boss .boss-health-track { height: 16px; min-height: 16px; border: 0; background: #20384a; }
#daily-boss .boss-health-track span { background: linear-gradient(90deg, #e64568, #ff806b 55%, #ffd17d); box-shadow: 0 0 16px rgba(255, 114, 105, .42); }

#daily-boss .boss-hit-burst { display: none; }

#daily-boss .db-combat-console {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 3px 13px;
  border-bottom: 1px solid var(--db-line);
}
#daily-boss .db-combat-copy { min-width: 0; }
#daily-boss .db-combat-console #bossStatus {
  margin: 4px 0 0;
  color: #dcebf4;
  font-size: .92rem;
  line-height: 1.4;
}
#daily-boss .db-hit-value {
  display: grid;
  flex: none;
  gap: 1px;
  min-width: 115px;
  text-align: right;
}
#daily-boss .db-hit-value span { color: #8fb7cd; font-size: .69rem; font-weight: 900; text-transform: uppercase; }
#daily-boss .db-hit-value strong { color: #fff0c6; font-size: 1.55rem; line-height: 1.1; }

#daily-boss .db-attack-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 0;
}
#daily-boss .db-attack-actions > * { min-width: 0; }
#daily-boss .db-attack-actions > button { min-height: 51px; margin: 0; }
#daily-boss .db-attack-actions #bossAttackButton {
  border: 1px solid #78e2ff;
  border-radius: 11px;
  background: linear-gradient(105deg, #53c6ff, #8ceef8 52%, #a6f4c7);
  color: #062039;
  box-shadow: 0 10px 26px rgba(48, 191, 239, .22);
  font-size: 1rem;
  font-weight: 950;
}
#daily-boss .db-attack-actions #bossAttackButton:disabled { box-shadow: none; }
#daily-boss .db-attack-actions > .custom-energy-action {
  grid-column: 1 / -1;
  grid-template-columns: minmax(110px, .43fr) minmax(0, 1fr);
  gap: 10px;
}
#daily-boss .db-attack-actions .custom-energy-action input,
#daily-boss .db-attack-actions .custom-energy-action button {
  min-height: 48px;
  border-radius: 10px;
}
#daily-boss .boss-leaderboard-note {
  margin: 14px 2px 0;
  padding: 0;
  border: 0;
  color: #a9c8d9;
  background: none;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.45;
}

#daily-boss .db-energy-card,
#daily-boss .db-pool-card {
  grid-column: 2;
  padding: clamp(18px, 1.6vw, 24px);
}
#daily-boss .db-energy-card {
  grid-row: 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg, #15364d, #092239 67%, #071b2f);
}
#daily-boss .db-pool-card {
  grid-row: 3;
  border-color: rgba(255, 211, 143, .28);
  background: radial-gradient(ellipse at 90% -12%, rgba(255, 197, 99, .19), transparent 52%), linear-gradient(155deg, #203746, #0e2537 65%, #0a1b2c);
}

#daily-boss .db-card-heading { align-items: start; gap: 15px; margin-bottom: 17px; }
#daily-boss .db-card-heading h2 { margin: 4px 0 0; color: var(--db-ink); font-size: clamp(1.2rem, 1.45vw, 1.55rem); line-height: 1.15; }
#daily-boss .db-card-heading .eyebrow { color: #8cdaf8; letter-spacing: .1em; }
#daily-boss .db-panel-value { color: #baf9e8; font-size: clamp(1rem, 1.3vw, 1.3rem); text-align: right; white-space: nowrap; }
#daily-boss .db-energy-card .boss-energy-track { min-height: 15px; height: 15px; }
#daily-boss .db-energy-card #bossNextEnergy { margin: 12px 0 0; color: #c8e5f1; font-size: .9rem; }
#daily-boss .db-panel-note { margin: 14px 0 0; color: #b0c9d8; font-size: .86rem; line-height: 1.52; }
#daily-boss .db-energy-guide {
  display: grid;
  align-content: start;
  gap: 15px;
  flex: 1;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(141, 212, 235, .18);
}
#daily-boss .db-energy-guide-heading { display: flex; align-items: center; gap: 12px; }
#daily-boss .db-energy-guide-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(118, 226, 246, .3);
  border-radius: 10px;
  color: #b6f9d9;
  background: linear-gradient(145deg, rgba(62, 180, 226, .23), rgba(95, 221, 175, .13));
  font-size: 1.35rem;
}
#daily-boss .db-energy-guide-heading .eyebrow { margin: 0 0 3px; color: #8bd8ef; font-size: .67rem; }
#daily-boss .db-energy-guide-heading h3 { margin: 0; color: #effbff; font-size: 1.16rem; line-height: 1.15; }
#daily-boss .db-energy-sources { display: grid; gap: 9px; }
#daily-boss .db-energy-source {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(118, 195, 222, .18);
  border-radius: 10px;
  color: #e7f7ff;
  background: rgba(2, 18, 32, .43);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
#daily-boss .db-energy-source:hover,
#daily-boss .db-energy-source:focus-visible { border-color: rgba(122, 226, 249, .65); background: rgba(34, 89, 112, .35); transform: translateY(-1px); }
#daily-boss .db-energy-source-number { color: #6fd9ef; font-size: .7rem; font-weight: 950; letter-spacing: .08em; }
#daily-boss .db-energy-source strong { display: block; font-size: .85rem; line-height: 1.2; }
#daily-boss .db-energy-source small { display: block; margin-top: 3px; color: #a8c5d6; font-size: .75rem; line-height: 1.32; }
#daily-boss .db-energy-source-arrow { color: #86dcec; font-size: 1rem; text-align: right; }

#daily-boss .db-pool-card .eyebrow { color: #ffd797; }
#daily-boss .db-pool-total { display: grid; gap: 1px; margin: 9px 0 17px; }
#daily-boss .db-pool-total strong { color: #ffe5aa; font-size: clamp(2.15rem, 3vw, 3.6rem); line-height: 1.03; letter-spacing: -.055em; overflow-wrap: anywhere; }
#daily-boss .db-pool-total span { color: #c2bda9; font-size: .73rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
#daily-boss .db-share-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(249, 222, 168, .22); border-bottom: 1px solid rgba(249, 222, 168, .22); }
#daily-boss .db-share-grid > div { display: grid; gap: 5px; min-width: 0; padding: 13px 7px 13px 0; }
#daily-boss .db-share-grid > div + div { padding-left: 16px; border-left: 1px solid rgba(249, 222, 168, .22); }
#daily-boss .db-share-grid span { color: #b7c9d1; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
#daily-boss .db-share-grid strong { color: #f8fbff; font-size: clamp(1.2rem, 1.5vw, 1.75rem); line-height: 1.1; overflow-wrap: anywhere; }
#daily-boss .db-reward-estimate { margin: 15px 0 0; color: #ffe3a6; font-weight: 850; }
#daily-boss .boss-pool-breakdown { margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(249, 222, 168, .15); color: #a9bdc9; font-size: .78rem; }

#daily-boss .db-milestones-card,
#daily-boss .db-leaderboard-card { grid-column: 1 / -1; padding: clamp(18px, 2vw, 27px); }
#daily-boss .db-milestones-card { grid-row: 4; background: linear-gradient(148deg, #112f48, #071c31); }
#daily-boss .db-leaderboard-card { grid-row: 5; order: initial; background: linear-gradient(150deg, #112e42, #06192c); }
#daily-boss .db-milestones-card .section-heading h2,
#daily-boss .db-leaderboard-card .section-heading h2 { font-size: clamp(1.35rem, 1.7vw, 1.8rem); letter-spacing: -.03em; }
#daily-boss .db-milestones-card > .muted,
#daily-boss .db-leaderboard-card > .muted { max-width: 76ch; line-height: 1.5; }
#daily-boss .boss-milestone-track { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 11px; }
#daily-boss .boss-milestone-item { align-items: stretch; flex-direction: column; min-height: 132px; border-radius: 12px; background: rgba(4, 18, 32, .55); }
#daily-boss .boss-milestone-item strong { font-size: 1.04rem; }
#daily-boss .boss-milestone-item span { font-size: .88rem; line-height: 1.35; }
#daily-boss .boss-milestone-item button { width: 100%; min-height: 38px; }
#daily-boss .boss-milestone-item.is-ready { border-color: rgba(100, 225, 188, .62); background: linear-gradient(130deg, rgba(39, 135, 122, .22), rgba(4, 18, 32, .6)); }
#daily-boss .boss-milestone-item.is-claimed { opacity: .8; }
#daily-boss .boss-leaderboard-split { gap: 24px; }
#daily-boss .boss-leaderboard-panel { padding: 16px; border: 1px solid var(--db-line); border-radius: 13px; background: rgba(3, 16, 29, .54); }
#daily-boss .boss-leaderboard-mini-title { padding-bottom: 11px; border-bottom: 1px solid var(--db-line); font-size: 1rem; }
#daily-boss .boss-damage-row { border-radius: 9px; background: rgba(12, 39, 57, .65); }

@media (max-width: 1180px) {
  #daily-boss .game-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #daily-boss .db-battle-card { grid-column: 1 / -1; grid-row: 2; }
  #daily-boss .db-energy-card { grid-column: 1; grid-row: 3; }
  #daily-boss .db-pool-card { grid-column: 2; grid-row: 3; }
  #daily-boss .boss-arena { min-height: 490px; }
}

@media (max-width: 800px) {
  #daily-boss .game-layout { grid-template-columns: 1fr; }
  #daily-boss .db-battle-card,
  #daily-boss .db-energy-card,
  #daily-boss .db-pool-card,
  #daily-boss .db-milestones-card,
  #daily-boss .db-leaderboard-card { grid-column: 1; grid-row: auto; }
  #daily-boss .db-battle-intro { align-items: start; }
  #daily-boss .boss-arena { min-height: 480px; }
}

@media (max-width: 560px) {
  #daily-boss .mode-play-intro { padding: 17px; border-radius: 14px; }
  #daily-boss .mode-play-intro .h1-like { font-size: 2.4rem; }
  #daily-boss .dashboard-play-jumps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #daily-boss .dashboard-play-tab { min-height: 65px; padding: 10px; }
  #daily-boss .dashboard-play-tab span { font-size: .85rem; }
  #daily-boss .dashboard-play-tab small { font-size: .68rem; }
  #daily-boss .db-battle-intro { display: none; }
  #daily-boss .db-reset-marker { display: none; }
  #daily-boss .db-boss-tag { padding: 7px 9px; font-size: .65rem; }
  #daily-boss .boss-arena { min-height: 390px; padding: 0 10px 79px; }
  #daily-boss .boss-float-wrap { width: min(88%, 340px); }
  #daily-boss .db-health-console { right: 10px; bottom: 10px; left: 10px; padding: 11px; }
  #daily-boss .db-health-label strong { font-size: .85rem; }
  #daily-boss .db-combat-console { align-items: start; }
  #daily-boss .db-hit-value { min-width: 80px; }
  #daily-boss .db-hit-value span { font-size: .62rem; }
  #daily-boss .db-attack-actions { grid-template-columns: 1fr 1fr; }
  #daily-boss .db-attack-actions > .custom-energy-action { grid-template-columns: minmax(88px, .4fr) minmax(0, 1fr); }
  #daily-boss .db-attack-actions .custom-energy-action button { padding-inline: 8px; font-size: .82rem; }
  #daily-boss .db-pool-total strong { font-size: 2.55rem; }
  #daily-boss .boss-leaderboard-split { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  #daily-boss .db-combat-console { align-items: start; flex-direction: column; }
  #daily-boss .db-hit-value { text-align: left; }
  #daily-boss .db-attack-actions { grid-template-columns: 1fr; }
  #daily-boss .db-attack-actions > .custom-energy-action { grid-column: 1; }
  #daily-boss .db-card-heading { flex-wrap: wrap; }
  #daily-boss .db-panel-value { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  #daily-boss .boss-float-wrap,
  #daily-boss .boss-arena::before,
  #daily-boss .boss-arena::after { animation: none !important; }
}