.boss-flow-v1 {
  --boss-green: #58cc02;
  --boss-green-dark: #46a302;
  --boss-blue: #1cb0f6;
  --boss-orange: #ff4b2f;
  --boss-gold: #ffc800;
  --boss-ink: #102418;
  --boss-muted: #617366;
  --boss-line: #d7ebd1;
  --boss-card: rgba(255, 255, 255, 0.94);
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at 16% 14%, rgba(88, 204, 2, 0.18), transparent 28%),
    radial-gradient(circle at 86% 22%, rgba(255, 75, 47, 0.14), transparent 30%),
    linear-gradient(135deg, #edffe0 0%, #e6fff8 100%);
  color: var(--boss-ink);
  font-family: "Nunito", "Inter", "Noto Sans SC", "PingFang SC", Arial, sans-serif;
  opacity: 1;
  animation: none;
}

.boss-flow-v1.page.active {
  display: block;
  opacity: 1;
  animation: none;
}

body:has(.boss-flow-v1) {
  margin: 0;
  background: #f8fff4;
}

body:has(.boss-flow-v1) #app {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body:has(.boss-flow-v1) #fx-canvas,
body:has(.boss-flow-v1) #combo-layer,
body:has(.boss-flow-v1) #flash-overlay,
body:has(.boss-flow-v1) #crack-overlay,
body:has(.boss-flow-v1) #slowmo-overlay,
body:has(.boss-flow-v1) .combo-display {
  display: none !important;
}

.boss-flow-v1 * {
  box-sizing: border-box;
}

.boss-flow-topbar,
.boss-flow-grid,
.boss-flow-bottom {
  width: min(100%, 1280px);
  margin: 0 auto;
}

.boss-flow-topbar {
  min-height: 84px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 0.9fr) auto;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid var(--boss-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 36px rgba(41, 118, 24, 0.12);
}

.boss-flow-brand,
.boss-flow-top-actions,
.boss-flow-center-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}

.boss-flow-logo {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(180deg, #ff6b35, #ff3f2f);
  border-bottom: 6px solid #c92316;
  font-size: 26px;
  font-weight: 950;
}

.boss-flow-brand strong {
  display: block;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
}

.boss-flow-brand small,
.boss-flow-center-stat span,
.boss-flow-top-actions span {
  display: block;
  color: var(--boss-green-dark);
  font-weight: 900;
}

.boss-flow-center-stat {
  justify-content: center;
}

.boss-flow-center-stat strong {
  font-size: 28px;
}

.boss-flow-top-actions {
  justify-content: flex-end;
}

.boss-flow-top-actions > div {
  min-width: 96px;
  padding: 8px 16px;
  border: 1px solid var(--boss-line);
  border-radius: 17px;
  text-align: center;
}

.boss-flow-top-actions strong {
  display: block;
  font-size: 24px;
}

.boss-flow-top-actions button,
.boss-flow-primary,
.boss-flow-bottom button,
.boss-flow-tool button {
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: var(--boss-green);
  border-bottom: 6px solid var(--boss-green-dark);
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
}

.boss-flow-top-actions button {
  min-height: 50px;
  padding: 0 22px;
  color: #0871ba;
  background: #e5f5ff;
  border-bottom-color: #b8e5fb;
}

.boss-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, 0.78fr) minmax(250px, 0.58fr);
  gap: 18px;
  margin-top: 18px;
  align-items: stretch;
}

.boss-flow-card {
  border: 1px solid var(--boss-line);
  border-radius: 22px;
  background: var(--boss-card);
  box-shadow: 0 14px 30px rgba(35, 88, 22, 0.11);
}

.boss-flow-question {
  min-height: 560px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.boss-flow-question-head span {
  color: #0d8dd2;
  font-size: 18px;
  font-weight: 950;
}

.boss-flow-question-head h1 {
  margin: 10px 0 8px;
  color: var(--boss-ink);
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: 0;
}

.boss-flow-question-head p {
  margin: 0;
  color: var(--boss-muted);
  font-size: 20px;
  font-weight: 850;
  line-height: 1.45;
}

.boss-flow-retry-banner {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(28, 176, 246, 0.32);
  border-radius: 16px;
  color: #126fa8;
  background: #eaf8ff;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 1000;
  line-height: 1.35;
}

.boss-flow-audio,
.boss-flow-reading-panel {
  margin-top: 22px;
  padding: 18px;
  border: 2px solid #cfe9ff;
  border-radius: 18px;
  background: #f1faff;
}

.boss-flow-audio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.boss-flow-listening-audio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 16px;
  border: 2px solid #bfeaff;
  border-radius: 18px;
  background: linear-gradient(180deg, #f4fbff, #e9f8ff);
}

.boss-flow-listening-audio strong,
.boss-flow-listening-audio span,
.boss-flow-listening-audio small {
  display: block;
}

.boss-flow-listening-audio strong {
  font-size: 22px;
  font-weight: 950;
  color: #0871ba;
}

.boss-flow-listening-audio span {
  margin-top: 3px;
  color: var(--boss-ink);
  font-size: 16px;
  font-weight: 900;
}

.boss-flow-listening-audio small {
  margin-top: 4px;
  color: var(--boss-muted);
  font-size: 14px;
  font-weight: 850;
}

.boss-flow-listening-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.boss-flow-listening-actions button {
  width: 58px;
  height: 54px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: var(--boss-blue);
  border-bottom: 6px solid #0b8ed0;
  font-size: 20px;
  font-weight: 950;
  cursor: pointer;
}

.boss-flow-listening-actions button:last-child {
  background: #ffb020;
  border-bottom-color: #d58a00;
}

.boss-flow-audio button {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: var(--boss-blue);
  border-bottom: 5px solid #0b8ed0;
  font-weight: 950;
  cursor: pointer;
}

.boss-flow-reading-panel strong {
  display: block;
  font-size: 30px;
  line-height: 1.2;
}

.boss-flow-reading-panel p {
  margin: 8px 0 0;
  color: var(--boss-muted);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
}

.boss-flow-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
}

.boss-flow-options-reading {
  grid-template-columns: 1fr;
  padding-top: 18px;
}

.boss-flow-option {
  min-height: 78px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border: 3px solid #d9e8d4;
  border-radius: 18px;
  background: #fff;
  border-bottom-width: 7px;
  color: var(--boss-ink);
  font-size: 24px;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.boss-flow-option:hover:not(.correct):not(.wrong):not(.disabled),
.boss-flow-option:focus-visible:not(.correct):not(.wrong):not(.disabled) {
  color: var(--boss-ink);
  border-color: #bde8ad;
  background: #f8fff3;
  box-shadow: 0 0 0 4px rgba(88, 204, 2, 0.14);
  outline: none;
}

.boss-flow-options-reading .boss-flow-option {
  min-height: 72px;
  font-size: 20px;
  line-height: 1.35;
}

.boss-flow-option span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(180deg, #50c8ff, #1cb0f6);
}

.boss-flow-option.correct {
  border-color: var(--boss-green);
  background: #ecffd9;
}

.boss-flow-option.wrong {
  border-color: var(--boss-orange);
  background: #fff1ed;
}

.boss-flow-option.disabled {
  pointer-events: none;
  opacity: 1;
}

.boss-flow-spelling {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 16px;
}

.boss-flow-v1 .letter-box {
  width: 56px;
  height: 64px;
  border-radius: 15px;
  font-size: 30px;
}

.boss-flow-v1 .spelling-input {
  width: min(100%, 520px);
  min-height: 66px;
  align-self: center;
  border: 3px solid var(--boss-line);
  border-radius: 18px;
  font-size: 28px;
  font-weight: 950;
  text-align: center;
}

.boss-flow-primary {
  width: min(100%, 420px);
  min-height: 64px;
  align-self: center;
  margin-top: 18px;
}

.boss-flow-match {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.boss-flow-match .match-column {
  display: grid;
  gap: 10px;
}

.boss-flow-v1 .match-item,
.boss-flow-v1 .bubble-item {
  min-height: 58px;
  border: 2px solid var(--boss-line);
  border-radius: 16px;
  background: #fff;
  color: var(--boss-ink);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.boss-flow-v1 .match-item.selected,
.boss-flow-v1 .bubble-item.selected {
  border-color: var(--boss-blue);
  background: #e8f7ff;
}

.boss-flow-v1 .match-item.matched,
.boss-flow-v1 .bubble-item.matched {
  border-color: var(--boss-green);
  background: #ecffd9;
}

.boss-flow-bubble {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.boss-flow-boss {
  min-height: 560px;
  padding: 24px;
  background: linear-gradient(180deg, #073149, #09283b 56%, #062237);
  color: #fff;
  border-color: #ffce38;
}

.boss-flow-boss-title span {
  color: var(--boss-gold);
  font-weight: 950;
}

.boss-flow-boss-title strong {
  display: block;
  margin-top: 4px;
  font-size: 28px;
  line-height: 1.15;
}

.boss-flow-avatar {
  height: 190px;
  display: grid;
  place-items: center;
}

.boss-flow-avatar-ring {
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffec9b 0 33%, #ff7f35 34% 63%, #ff4b2f 64% 100%);
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.13), 0 18px 34px rgba(0, 0, 0, 0.25);
}

.boss-flow-avatar-ring span {
  font-size: 68px;
  line-height: 1;
}

.boss-flow-hp {
  margin-top: 18px;
}

.boss-flow-hp div,
.boss-flow-battle-stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 950;
}

.boss-flow-hp span,
.boss-flow-battle-stats span {
  color: rgba(255, 255, 255, 0.72);
}

.boss-flow-hp em {
  display: block;
  height: 16px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.boss-flow-hp i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff4b2f, #ffc800);
}

.boss-flow-player-hp i {
  background: linear-gradient(90deg, #58cc02, #1cb0f6);
}

.boss-flow-battle-stats {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.boss-flow-battle-stats div {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
}

.boss-flow-battle-stats strong,
.boss-flow-battle-stats span {
  display: block;
}

.boss-flow-tools {
  min-height: 560px;
  padding: 18px;
}

.boss-flow-tools-head strong {
  display: block;
  font-size: 24px;
}

.boss-flow-tools-head span {
  color: var(--boss-muted);
  font-size: 14px;
  font-weight: 850;
}

.boss-flow-tool,
.boss-flow-note {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: #f5fff0;
  border: 1px solid #d9e8d4;
}

.boss-flow-tool.active {
  border-color: var(--boss-green);
  background: #ecffd9;
}

.boss-flow-tool.disabled {
  opacity: 0.66;
}

.boss-flow-tool b,
.boss-flow-tool span,
.boss-flow-note strong {
  font-size: 16px;
  font-weight: 950;
}

.boss-flow-tool span {
  float: right;
  color: var(--boss-green-dark);
}

.boss-flow-tool p,
.boss-flow-note p {
  clear: both;
  margin: 8px 0 0;
  color: var(--boss-muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.boss-flow-tool button {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  font-size: 16px;
}

.boss-flow-tool button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.boss-flow-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--boss-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
}

.boss-flow-bottom strong,
.boss-flow-bottom span {
  display: block;
}

.boss-flow-bottom span {
  color: var(--boss-muted);
  font-weight: 800;
}

.boss-flow-bottom button {
  min-height: 52px;
  padding: 0 18px;
  background: var(--boss-orange);
  border-bottom-color: #c92316;
}

@media (max-width: 1180px) {
  .boss-flow-topbar,
  .boss-flow-grid,
  .boss-flow-bottom {
    width: 100%;
  }

  .boss-flow-grid {
    grid-template-columns: minmax(0, 1fr) 310px;
  }

  .boss-flow-tools {
    grid-column: 1 / -1;
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .boss-flow-tools-head {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .boss-flow-v1 {
    padding: 10px;
  }

  .boss-flow-topbar {
    grid-template-columns: 1fr;
    gap: 12px;
    border-radius: 20px;
  }

  .boss-flow-center-stat,
  .boss-flow-top-actions {
    justify-content: stretch;
  }

  .boss-flow-center-stat,
  .boss-flow-top-actions > div,
  .boss-flow-top-actions button {
    width: 100%;
  }

  .boss-flow-grid,
  .boss-flow-bottom {
    grid-template-columns: 1fr;
  }

  .boss-flow-question,
  .boss-flow-boss,
  .boss-flow-tools {
    min-height: auto;
  }

  .boss-flow-question {
    padding: 18px;
  }

  .boss-flow-question-head h1 {
    font-size: clamp(34px, 12vw, 54px);
  }

  .boss-flow-options,
  .boss-flow-tools {
    grid-template-columns: 1fr;
  }

  .boss-flow-option {
    min-height: 74px;
    grid-template-columns: 52px minmax(0, 1fr);
    font-size: 22px;
  }

  .boss-flow-listening-audio {
    grid-template-columns: 1fr;
  }

  .boss-flow-listening-actions button {
    flex: 1;
  }

  .boss-flow-bubble {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}