/* Boss screen only. Existing menu, campaign, arena and laboratory styles stay intact. */
.boss-finisher {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at center, #e9588e18, transparent 65%);
  overflow: hidden;
  outline: none;
}
.boss-finisher[open] {
  display: grid;
  place-items: center;
}
.boss-finisher::backdrop {
  background: #160e20cc;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: boss-finisher-dim var(--finisher-enter, 320ms) ease-out both;
}
.boss-finisher img {
  display: block;
  width: min(94vw, 94dvh, 900px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 18px 28px #10081940);
  animation: boss-finisher-arrive var(--finisher-enter, 320ms)
    cubic-bezier(0.2, 0.8, 0.3, 1) both;
  will-change: transform, opacity;
}
.boss-finisher.is-leaving img {
  animation: boss-finisher-depart var(--finisher-fade, 300ms) ease-in both;
}
.boss-finisher.is-leaving::backdrop {
  animation: boss-finisher-undim var(--finisher-fade, 300ms) ease-in both;
}
@keyframes boss-finisher-arrive {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes boss-finisher-depart {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.025);
  }
}
@keyframes boss-finisher-dim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes boss-finisher-undim {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
body:has(#bossScreen:not([hidden])) .site-header,
body:has(#bossScreen:not([hidden])) .site-footer {
  display: none !important;
}
.app-shell:has(> #bossScreen:not([hidden])) {
  padding: 8px 18px 12px;
  max-width: 1100px;
}
#bossScreen:not([hidden]) {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  width: 100%;
  color: #49374d;
}
.boss-combat-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
  border-radius: 16px;
}
.boss-shot {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px;
  background: radial-gradient(
    circle at 35% 30%,
    #fff 0 16%,
    var(--shot-color) 50%
  );
  border: 1px solid #fff9;
  border-radius: 50%;
  box-shadow:
    0 0 8px var(--shot-color),
    0 0 2px #fff;
  transform-origin: center;
}
.boss-shot::before {
  content: "";
  position: absolute;
  width: 35px;
  height: 5px;
  right: 7px;
  top: 3px;
  border-radius: 12px;
  background: linear-gradient(90deg, transparent, var(--shot-color));
  opacity: 0.7;
}
.boss-shot.is-special {
  width: 18px;
  height: 18px;
  margin: -9px;
  box-shadow:
    0 0 13px var(--shot-color),
    0 0 5px #fff;
}
.boss-shot.is-special::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid #fff9;
  border-radius: 5px;
  transform: rotate(45deg);
}
.boss-shot.is-enemy {
  border-radius: 5px;
}
.boss-impact-ring {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 3px solid var(--shot-color);
  border-radius: 50%;
  box-shadow: 0 0 10px #fff9;
}
.boss-impact-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--shot-color);
  box-shadow: 0 0 4px #fff;
}
.boss-damage-number {
  position: absolute;
  font: 600 25px/1.2 var(--display);
  color: #a52c61;
  white-space: nowrap;
  text-shadow:
    0 2px 0 #fff,
    1px 0 0 #fff,
    -1px 0 0 #fff;
  padding: 2px 8px;
  border-radius: 8px;
  background: #fffaf3d9;
}
.boss-damage-number.is-heavy {
  font-size: 30px;
  color: #c93b74;
}
.boss-damage-number.is-blocked {
  font-size: 14px;
  color: #84632e;
}
.boss-hit-static {
  box-shadow: inset 0 0 0 2px #e9588e66;
  border-radius: 18px;
}
.boss-toolbar {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.boss-toolbar > .text-button {
  justify-self: start;
  margin: 0;
}
.boss-toolbar > .text-button svg {
  transform: rotate(180deg);
}
.boss-toolbar > .icon-button {
  justify-self: end;
}
.boss-timer-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3px;
}
.boss-level-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.6px;
  line-height: 1.3;
  color: #80647f;
}
#bossTimer {
  display: block;
  min-width: 104px;
  padding: 2px 18px;
  border: 1px solid #ead7de;
  border-radius: 15px;
  background: #fbf5ed;
  font: 500 33px/1.1 var(--display);
  color: #49374d;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: 0 3px 0 #eadbe3;
}
#bossTimeFloats {
  position: absolute;
  left: calc(100% + 6px);
  top: 16px;
  pointer-events: none;
  min-width: 55px;
}
#bossTimeFloats span {
  position: absolute;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 900;
  animation: boss-time-float 1.2s ease-out both;
  text-shadow: 0 1px 0 #fff;
}
.boss-time-gain {
  color: #426b48;
}
.boss-time-loss {
  color: #c93b74;
}
.boss-summary {
  width: min(620px, 100%);
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 8px 18px 8px 8px;
  background: #fffbf6f5;
  border: 1px solid #e6d3df;
  border-radius: 20px;
  box-shadow: 0 5px 18px #49374d0a;
}
.boss-portrait {
  width: 106px;
  aspect-ratio: 1;
  position: relative;
}
.boss-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s;
}
.boss-portrait-missing {
  border-radius: 18px;
  background: #eedfee;
}
.boss-portrait-missing::after {
  content: "BOSS";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 20px var(--display);
}
.boss-defeated .boss-portrait img {
  opacity: 0;
}
.boss-vitals {
  min-width: 0;
}
.boss-vitals .eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.4px;
  margin: 0;
  line-height: 1.4;
}
.boss-vitals h2 {
  font: 500 29px/1.15 var(--display);
  color: #49374d;
  margin: 3px 0 8px;
}
#bossTitle:focus {
  outline: none;
}
.boss-health-copy {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 5px;
  color: #765a73;
}
.boss-health {
  --bhp-c: #e9588e;
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  overflow: visible;
  fill: #000;
  stroke: none;
  stroke-width: 1;
}
.bhp-gus {
  --bhp-c: #47c2ae;
}
.bhp-claw {
  --bhp-c: #8b5bb5;
}
.bhp-baron {
  --bhp-c: #d68a2e;
}
.bhp-low {
  --bhp-c: #d12e62;
}
.bhp-fillc {
  fill: var(--bhp-c);
  transition: fill 0.3s;
}
.bhp-fill {
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.bhp-chip {
  transition: transform 0.7s ease-in 0.35s;
}
.bhp-low .bhp-fill {
  animation: bhp-pulse 1s ease-in-out infinite;
}
.bhp-hit .bhp-body {
  animation: bhp-shake 0.3s linear;
}
.bhp-hit .bhp-flash {
  animation: bhp-flash 0.3s ease-out;
}
@keyframes bhp-pulse {
  50% {
    opacity: 0.78;
  }
}
@keyframes bhp-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-3px);
  }
  40% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
}
@keyframes bhp-flash {
  0% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}
.boss-shield {
  position: absolute;
  right: -3px;
  bottom: 0;
  width: 34px;
  height: 34px;
}
.boss-shield svg {
  width: 100%;
  height: 100%;
}
.boss-warning {
  width: min(520px, 100%);
  min-height: 42px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto 30px;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid #e1cddd;
  border-radius: 12px;
  background: #f9f2faf5;
  color: #715477;
  line-height: 1.3;
}
.boss-skill-help.icon-button {
  width: 30px;
  height: 30px;
}
.boss-skill-help svg {
  width: 16px;
  height: 16px;
}
.boss-skill-description {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #654d68;
  text-align: left;
}
#bossSkillIcon {
  width: 26px;
  height: 26px;
}
#bossSkillIcon svg {
  width: 100%;
  height: 100%;
}
#bossSkillName {
  font-size: 14px;
  font-weight: 900;
}
#bossSkillCounter {
  font-size: 12px;
  white-space: nowrap;
}
.boss-warning.is-warning {
  background: #fff0db;
  border-color: #d3a455;
  color: #805825;
}
.boss-board-frame {
  position: relative;
  width: min(560px, 100%, calc(100dvh - 384px));
  padding: 8px;
  border-radius: 20px;
  border: 2px solid #d6bddb;
  background: #fbf5edf2;
  box-shadow:
    0 5px 0 #d5bad9,
    0 9px 25px #49374d15;
}
#bossBoard {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  touch-action: none;
  isolation: isolate;
}
.boss-candy {
  position: absolute;
  left: 0;
  top: 0;
  width: 12.5%;
  height: 12.5%;
  border: 0;
  border-radius: 10px;
  padding: 6px;
  background: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  touch-action: none;
}
.boss-candy img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.boss-candy.selected {
  background: #fff2aeaa;
  outline: 2px solid #c59442;
  outline-offset: -3px;
  z-index: 3;
}
.boss-candy.boss-hinted {
  background: #fff0b8b3;
  outline: 3px solid #c93b74;
  outline-offset: -3px;
  z-index: 3;
  animation: boss-hint-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes boss-hint-pulse {
  from {
    box-shadow:
      inset 0 0 0 2px #fff9,
      0 0 4px #e9588e55;
  }
  to {
    box-shadow:
      inset 0 0 0 2px #fff,
      0 0 12px #e9588e99;
  }
}
.boss-candy:focus-visible {
  outline: 3px solid #c93b74;
  outline-offset: -3px;
  z-index: 3;
}
.boss-candy[aria-disabled="true"] {
  cursor: default;
}
.boss-candy.crushing .candy-art {
  opacity: 0;
  transform: scale(0.25) rotate(14deg);
  transition:
    opacity 0.22s,
    transform 0.22s;
}
.boss-overlays {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.boss-tile-effect {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  padding: 2px;
  border-radius: 9px;
}
.boss-tile-effect > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.boss-dropping > svg {
  animation: boss-rock-drop 0.32s ease-out both;
}
@keyframes boss-rock-drop {
  from {
    transform: translateY(-110%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.boss-target {
  outline: 2px dashed #c93b74;
  outline-offset: -3px;
  animation: boss-target-pulse 1s infinite alternate;
}
.boss-sour {
  background: #c8df6540;
  box-shadow: inset 0 0 0 2px #94ac4a;
}
.boss-banned {
  box-shadow: inset 0 0 0 2px #c93b74;
}
.boss-fuse,
.boss-hit-count,
.boss-color-mark {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 5px;
  padding: 0 3px;
  min-width: 16px;
  font-size: 12px;
  font-weight: 900;
  background: #fffaf3;
  color: #49374d;
  line-height: 1.25;
}
.boss-fuse {
  background: #c93b74;
  color: #fff;
}
.boss-color-mark {
  top: 0;
  bottom: auto;
  color: #c93b74;
}
.boss-phase-banner,
.boss-board-message {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 24px);
  border: 1px solid #dfc2d5;
  border-radius: 16px;
  background: #fffaf3f5;
  box-shadow: 0 8px 28px #49374d30;
  padding: 16px 22px;
  color: #805780;
  text-align: center;
  pointer-events: none;
  font: 500 27px/1.2 var(--display);
}
.boss-board-message {
  top: 65%;
  font: 800 14px/1.4 var(--font);
  padding: 10px 16px;
  opacity: 0;
  transition: opacity 0.2s;
}
.boss-board-message.show {
  opacity: 1;
}
.boss-instruction {
  min-height: 44px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  margin: 3px 0 0;
  width: min(580px, 100%);
  padding: 4px 10px;
  border-radius: 8px;
  color: #725a72;
  background: #fbf5edeb;
}
.boss-help-dialog {
  width: min(600px, calc(100vw - 28px));
  text-align: left;
}
.boss-help-close {
  position: sticky;
  top: 0;
  float: right;
  margin: -8px -8px 0 10px;
  z-index: 2;
  background: #fffaf3;
}
#bossHelpTitle:focus {
  outline: none;
}
.boss-help-dialog .boss-help-intro {
  font-size: 13px;
  color: #705d73;
}
.boss-help-active {
  padding: 14px;
  background: #f4ebf6;
  border: 1px solid #e0cce4;
  border-radius: 12px;
}
.boss-help-dialog h3 {
  font: 500 19px/1.3 var(--display);
  margin: 0;
}
#bossHelpEffects {
  margin: 8px 0 0;
  padding-left: 19px;
  font-size: 13px;
  line-height: 1.65;
}
#bossHelpEffects li + li {
  margin-top: 8px;
}
.boss-help-skills article {
  padding: 18px 0;
  border-bottom: 1px solid #e5d7e1;
}
.boss-help-skill-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.boss-help-skill-title span {
  background: #f0e5f2;
  color: #715477;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  font-weight: 800;
}
.boss-help-dialog article p {
  margin: 9px 0 0;
  font-size: 13px;
}
.boss-help-dialog .boss-help-counterplay {
  background: #edf3e9;
  padding: 10px;
  border-radius: 9px;
  color: #446147;
}
#bossScreen[data-mode="intro"] .boss-board-frame,
#bossScreen[data-mode="phase"] .boss-board-frame,
#bossScreen[data-mode="defeat"] .boss-board-frame {
  opacity: 0.5;
}
.boss-urgent #bossTimer {
  color: #fff;
  background: #c93b74;
  border-color: #ad2e61;
  animation: boss-timer-pulse 1s infinite;
}
.boss-urgent .boss-board-frame {
  box-shadow:
    0 0 22px #e9588e60,
    0 5px 0 #d5bad9;
}
.boss-dialog {
  width: min(440px, calc(100vw - 28px));
  text-align: center;
}
.boss-dialog > div {
  padding: 28px;
}
.boss-dialog h2 {
  font: 500 31px/1.15 var(--display);
  margin: 8px 0 16px;
}
.boss-dialog p {
  font-size: 14px;
  line-height: 1.7;
  margin: 12px 0 18px;
}
.boss-dialog .primary-button,
.boss-dialog .secondary-button {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  margin-top: 10px;
}
.boss-dialog .text-button {
  margin: 16px auto 0;
}
.boss-result-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  color: #dfac43;
}
.boss-result-stars svg {
  width: 30px;
  height: 30px;
  fill: #f5ce6f;
}
.boss-result-stat {
  padding: 12px;
  border-radius: 12px;
  background: #f1e7f3;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.boss-result-stat strong {
  font: 500 30px var(--display);
}
.boss-result-stat span,
.boss-dialog .boss-practice-note {
  font-size: 12px;
  color: #765a73;
}
@keyframes boss-time-float {
  to {
    transform: translateY(-28px);
    opacity: 0;
  }
}
@keyframes boss-timer-pulse {
  50% {
    transform: scale(1.04);
  }
}
@keyframes boss-target-pulse {
  to {
    outline-color: #e7ae42;
  }
}
@media (max-width: 540px) {
  .app-shell:has(> #bossScreen:not([hidden])) {
    padding: 6px 12px 10px;
  }
  #bossScreen:not([hidden]) {
    gap: 7px;
  }
  .boss-toolbar {
    min-height: 50px;
    gap: 8px;
  }
  .boss-toolbar > .text-button {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
  }
  .boss-toolbar > .text-button span {
    display: none;
  }
  .boss-level-label {
    font-size: 10px;
    letter-spacing: 0;
  }
  #bossTimer {
    font-size: 28px;
  }
  #bossTimeFloats {
    top: 20px;
    left: calc(100% + 3px);
  }
  #bossTimeFloats span {
    font-size: 14px;
  }
  .boss-summary {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 12px 6px 4px;
    border-radius: 16px;
  }
  .boss-portrait {
    width: 80px;
  }
  .boss-vitals h2 {
    font-size: 23px;
    margin-bottom: 6px;
  }
  .boss-vitals .eyebrow {
    font-size: 10px;
  }
  .boss-health-copy {
    font-size: 11px;
  }
  .boss-warning {
    padding: 6px 8px;
    gap: 6px;
    grid-template-columns: 23px minmax(0, 1fr) auto 30px;
  }
  #bossSkillIcon {
    width: 23px;
    height: 23px;
  }
  #bossSkillName {
    font-size: 13px;
  }
  #bossSkillCounter {
    font-size: 12px;
  }
  .boss-board-frame {
    width: min(100%, calc(100dvh - 350px));
    padding: 5px;
    border-radius: 15px;
  }
  .boss-candy {
    padding: 3px;
    border-radius: 6px;
  }
  .boss-instruction {
    margin: 2px 0 0;
    padding: 4px 6px;
  }
  .boss-phase-banner {
    font-size: 23px;
    padding: 12px 16px;
  }
  .boss-dialog > div {
    padding: 22px 18px;
  }
  .boss-dialog h2 {
    font-size: 27px;
  }
}
@media (max-height: 540px) and (min-width: 541px) {
  .app-shell:has(> #bossScreen:not([hidden])) {
    padding: 4px 12px 6px;
  }
  #bossScreen:not([hidden]) {
    gap: 4px;
  }
  .boss-toolbar {
    min-height: 34px;
  }
  .boss-level-label {
    display: none;
  }
  #bossTimer {
    font-size: 26px;
  }
  .boss-summary {
    grid-template-columns: 44px minmax(0, 1fr);
    width: min(520px, 100%);
    padding: 4px 12px;
    gap: 10px;
  }
  .boss-portrait {
    width: 44px;
  }
  .boss-vitals .eyebrow {
    display: none;
  }
  .boss-vitals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
    column-gap: 12px;
    align-items: center;
  }
  .boss-vitals h2 {
    font-size: 19px;
    margin: 0 0 3px;
    grid-column: 1;
    grid-row: 1;
  }
  .boss-health-copy {
    font-size: 11px;
    margin: 0;
    grid-column: 1;
    grid-row: 2;
  }
  .boss-health {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  #bossHealthPercent {
    display: none;
  }
  .boss-warning {
    min-height: 31px;
    padding-block: 3px;
  }
  .boss-skill-description {
    display: none;
  }
  #bossSkillIcon {
    width: 22px;
    height: 22px;
  }
  .boss-board-frame {
    width: min(480px, calc(100dvh - 198px));
    padding: 4px;
    border-radius: 12px;
  }
  .boss-candy {
    padding: 2px;
  }
  .boss-instruction {
    font-size: 12px;
    width: min(760px, 100%);
    min-height: 36px;
    padding: 2px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boss-finisher img,
  .boss-finisher::backdrop {
    animation: none;
  }
  .bhp * {
    animation: none !important;
    transition: none !important;
  }
  .boss-candy.boss-hinted {
    animation: none;
  }
  .boss-urgent #bossTimer,
  .boss-target,
  #bossTimeFloats span,
  .boss-dropping > svg {
    animation: none;
  }
  .boss-candy,
  .boss-candy.crushing .candy-art,
  #bossHealthFill,
  #bossHealthChip,
  .boss-portrait img {
    transition: none;
  }
}