:root {
  --bc-aqua: #69eadc;
  --bc-blue: #73bdff;
  --bc-gold: #ffe16b;
  --bc-coral: #ff7891;
  --bc-ink: #06152d;
}

.bc-game {
  --bc-bg-a: #04142f;
  --bc-bg-b: #08365b;
  --bc-glow-a: #45dfd238;
  --bc-glow-b: #9a75ff32;
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 14% 8%, var(--bc-glow-a), transparent 31%),
    radial-gradient(circle at 90% 84%, var(--bc-glow-b), transparent 36%),
    linear-gradient(145deg, var(--bc-bg-a), var(--bc-bg-b));
  font-family: "Zen Maru Gothic", sans-serif;
  isolation: isolate;
  user-select: none;
  container-type: inline-size;
}

.bc-game::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(#000, transparent 86%);
  mask-image: linear-gradient(#000, transparent 86%);
}

.bc-shell {
  position: absolute;
  z-index: 1;
  inset: clamp(6px, 1.8%, 18px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(218px, .37fr);
  gap: clamp(7px, 1.3vw, 15px);
}

.bc-panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 20px 48px rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
}

.bc-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: clamp(8px, 1.45vw, 16px);
}

.bc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 10px;
}

.bc-kicker {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  color: #072b42;
  background: linear-gradient(135deg, #68eadc, #79c2ff);
  box-shadow: 0 4px 14px rgba(68,224,218,.2);
  font: 900 clamp(10px, 1.15cqw, 13px)/1 "Zen Maru Gothic";
  letter-spacing: .04em;
}

.bc-stage-copy {
  min-width: 0;
  text-align: right;
}

.bc-stage-copy strong,
.bc-stage-copy span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bc-stage-copy strong {
  color: #dffeff;
  font-size: clamp(9px, 1.25cqw, 13px);
}

.bc-stage-copy span {
  margin-top: 2px;
  color: rgba(255,255,255,.75);
  font-size: clamp(8px, 1cqw, 11px);
  font-weight: 900;
}

.bc-board {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(114,234,255,.24);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 116%, rgba(36,113,167,.6), transparent 56%),
    radial-gradient(circle at 17% 18%, var(--bc-glow-b), transparent 31%),
    linear-gradient(160deg, var(--bc-bg-a), var(--bc-bg-b) 64%, #06132f);
  box-shadow: inset 0 0 58px rgba(0,0,0,.58), 0 15px 36px rgba(0,0,0,.32);
  transition: background .8s ease, box-shadow .8s ease;
  isolation: isolate;
}

.bc-board::before,
.bc-board::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.bc-board::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(131,255,243,.13), transparent 34%),
    radial-gradient(ellipse at 82% 27%, rgba(183,146,255,.12), transparent 38%),
    linear-gradient(115deg, transparent 10%, rgba(113,228,255,.045) 42%, transparent 68%);
  mix-blend-mode: screen;
  animation: bc-aurora 9s ease-in-out infinite alternate;
}

.bc-board::after {
  inset: auto -15% -32%;
  height: 58%;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, transparent 0 24px, rgba(105,217,255,.07) 25px 27px, transparent 29px 42px);
  transform: perspective(300px) rotateX(58deg);
}

.bc-canvas {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  outline: 0;
  cursor: crosshair;
  touch-action: pan-y;
}

.bc-canvas:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(136,248,255,.8);
}

.game-stage.games-faux-fullscreen .bc-canvas,
.game-stage:fullscreen .bc-canvas,
.game-stage:-webkit-full-screen .bc-canvas {
  touch-action: none;
}

.bc-stars,
.bc-fx-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bc-stars { z-index: 1; }
.bc-fx-layer { z-index: 3; }

.bc-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--star-color, #d9fbff);
  box-shadow: 0 0 calc(var(--size) * 2) var(--star-color, #9cecff), 0 0 calc(var(--size) * 5) rgba(119,223,255,.5);
  opacity: .18;
  animation: bc-twinkle var(--duration) ease-in-out var(--delay) infinite;
}

.bc-star::before,
.bc-star::after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--star-color, #d9fbff), transparent);
  transform: translate(-50%, -50%);
  opacity: calc(var(--ray) * .7);
}

.bc-star::before { width: calc(var(--size) * 7); height: 1px; }
.bc-star::after { width: 1px; height: calc(var(--size) * 7); }

.bc-aim,
.bc-coach {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.bc-aim {
  width: 14px;
  aspect-ratio: 1;
  border: 2px solid #e8ffff;
  opacity: 0;
  filter: drop-shadow(0 0 7px #68efff);
  transition: opacity .15s;
}

.bc-aim::before,
.bc-aim::after,
.bc-coach::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  aspect-ratio: 1;
  content: "";
  border: 1px solid #8ef5ff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: bc-aim-pulse 1.45s ease-out infinite;
}

.bc-aim::after { animation-delay: .7s; }
.bc-aim.is-visible { opacity: .7; }

.bc-coach {
  z-index: 4;
  width: 18px;
  aspect-ratio: 1;
  border: 3px solid #fff3a4;
  box-shadow: 0 0 13px #ffe377, 0 0 30px rgba(95,238,223,.8);
  animation: bc-coach-bob .85s ease-in-out infinite alternate;
}

.bc-coach[hidden] { display: none; }
.bc-coach::before { width: 54px; border-color: #fff0a5; }

.bc-tap-hint {
  position: absolute;
  z-index: 4;
  inset: auto 10px 10px;
  padding: 6px 12px;
  overflow: hidden;
  border: 1px solid rgba(191,248,255,.18);
  border-radius: 999px;
  color: #dcfdff;
  background: rgba(2,13,37,.7);
  box-shadow: 0 5px 16px rgba(0,0,0,.35);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(9px, 1.05cqw, 11px);
  font-weight: 900;
  pointer-events: none;
}

.bc-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(0,0,0,.43);
}

.bc-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #64e6d8, #7bbdff, #ff86b3, #ffe16b);
  box-shadow: 0 0 12px rgba(106,236,222,.5);
  transition: width .35s ease;
}

.bc-side {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(9px, 1.45vw, 15px);
  overflow: auto;
  scrollbar-width: none;
}

.bc-side::-webkit-scrollbar { display: none; }

.bc-brand {
  padding-right: 46px;
  font: 700 clamp(18px, 2.2cqw, 26px)/1 Fredoka, sans-serif;
  letter-spacing: -.025em;
  background: linear-gradient(90deg, #64e7da, #7abfff, #ff87b1, #ffe16b);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.bc-brand small {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.62);
  font: 900 10px/1.45 "Zen Maru Gothic";
  letter-spacing: .02em;
}

.bc-mode-chip {
  position: static;
  align-self: flex-start;
  margin-top: -2px;
  padding: 5px 8px;
  border: 1px solid rgba(138,246,255,.25);
  border-radius: 999px;
  color: #dfffff;
  background: rgba(4,23,48,.62);
  font: 900 8px/1 "Zen Maru Gothic";
  letter-spacing: .07em;
}

.bc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.bc-stat {
  min-width: 0;
  padding: 8px 4px;
  border: 1px solid rgba(142,238,255,.07);
  border-radius: 11px;
  background: rgba(3,18,43,.68);
  text-align: center;
}

.bc-stat small {
  display: block;
  overflow: hidden;
  color: rgba(255,255,255,.58);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 9px;
}

.bc-stat b {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #f8ffff;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 700 clamp(16px, 2.1cqw, 22px)/1 Fredoka, "Zen Maru Gothic";
}

.bc-attempts {
  display: flex;
  align-items: center;
  min-height: 28px;
  gap: 4px;
}

.bc-life {
  display: block;
  width: 25px;
  aspect-ratio: 1;
  background: url("assets/visual/orb-coral.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 6px #ff826f);
  transition: opacity .2s, filter .2s;
}

.bc-life.is-empty {
  opacity: .16;
  filter: grayscale(1);
}

.bc-stage-mini {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: rgba(231,253,255,.72);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 9px;
  font-weight: 900;
  text-align: right;
}

.bc-mechanic {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 9px;
  gap: 8px;
  border: 1px solid rgba(135,237,255,.12);
  border-radius: 11px;
  color: #eaffff;
  background: rgba(4,22,47,.6);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.4;
}

.bc-mechanic-symbol {
  display: grid;
  flex: 0 0 25px;
  width: 25px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  color: #fff4a8;
  background: radial-gradient(circle at 35% 28%, #fff, rgba(105,234,220,.75) 25%, rgba(63,96,169,.55) 68%);
  box-shadow: 0 0 9px rgba(105,234,220,.35);
  font: 900 13px/1 Fredoka, sans-serif;
}

.bc-message {
  min-height: 38px;
  padding: 9px;
  border-radius: 11px;
  color: #e8f7ff;
  background: rgba(3,18,43,.72);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.5;
}

.bc-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: auto;
}

.bc-button {
  min-width: 0;
  min-height: 36px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #fff;
  background: rgba(4,23,49,.78);
  font: 900 9px/1.25 "Zen Maru Gothic";
  cursor: pointer;
  transition: transform .15s, filter .15s, border-color .15s;
}

.bc-button:hover { border-color: rgba(132,241,255,.55); filter: brightness(1.15); }
.bc-button:active { transform: translateY(1px) scale(.985); }
.bc-button:focus-visible { outline: 2px solid #8ff8ff; outline-offset: 2px; }
.bc-button.is-primary { border: 0; color: #082b3f; background: linear-gradient(135deg, #64e8d9, #78beff); }
.bc-button.is-endless { color: #fff4ae; border-color: rgba(255,226,107,.35); }
.bc-button[disabled] { cursor: not-allowed; opacity: .38; filter: grayscale(.5); }

.bc-fx-burst {
  position: absolute;
  left: var(--fx-x);
  top: var(--fx-y);
  width: 1px;
  height: 1px;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
}

.bc-fx-glow,
.bc-fx-wave,
.bc-fx-particle {
  position: absolute;
  left: 50%;
  top: 50%;
}

.bc-fx-glow {
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 8%, var(--fx-color) 20%, var(--fx-soft) 38%, transparent 68%);
  box-shadow: 0 0 8px var(--fx-soft), 0 0 16px var(--fx-faint);
  filter: blur(.35px);
  animation: bc-water-glow .38s ease-out forwards;
}

.bc-fx-wave {
  width: 12px;
  aspect-ratio: 1;
  border: 1.5px solid var(--fx-soft);
  border-top-color: #efffff;
  border-right-color: var(--fx-color);
  border-bottom-color: var(--fx-faint);
  border-left-color: rgba(223,255,255,.67);
  border-radius: 50%;
  background: radial-gradient(circle at center, transparent 0 71%, var(--fx-faint) 74%, var(--fx-color) 77%, rgba(223,255,255,.9) 79%, #fff 80.5%, var(--fx-color) 82%, var(--fx-soft) 84%, var(--fx-faint) 86%, transparent 89%);
  box-shadow: inset 0 0 5px var(--fx-faint), 0 0 3px rgba(223,255,255,.6);
  filter: drop-shadow(0 0 5px var(--fx-soft));
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--wave-angle));
  animation: bc-water-wave var(--wave-time) cubic-bezier(.08,.6,.18,1) forwards;
}

.bc-fx-wave::before {
  position: absolute;
  inset: -4%;
  content: "";
  border-radius: inherit;
  background: conic-gradient(from calc(var(--wave-angle) + 35deg), transparent 0 12%, #fff 15%, transparent 19% 46%, rgba(223,255,255,.73) 50%, transparent 55% 78%, rgba(255,255,255,.6) 82%, transparent 87%);
  -webkit-mask: radial-gradient(circle at center, transparent 0 77%, #000 80% 83%, transparent 86%);
  mask: radial-gradient(circle at center, transparent 0 77%, #000 80% 83%, transparent 86%);
  animation: bc-wave-reflection .72s ease-out forwards;
}

.bc-fx-particle {
  width: var(--spark-size);
  height: var(--spark-size);
  border: 1px solid rgba(234,255,255,.67);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, #fff 0 9%, var(--fx-soft) 20% 42%, var(--fx-color) 52%, transparent 72%);
  box-shadow: inset -1px -1px 3px var(--fx-faint), 0 0 7px var(--fx-soft);
  transform: translate(-50%, -50%) scale(.15);
  animation: bc-water-drop var(--spark-time) cubic-bezier(.12,.66,.25,1) var(--spark-delay) forwards;
}

.bc-fx-particle.is-glint {
  height: calc(var(--spark-size) * 2.5);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(transparent, #efffff, var(--fx-color), transparent);
  animation-name: bc-water-glint;
}

.bc-transition,
.bc-result,
.bc-stage-menu {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.bc-transition {
  --transition-color: #79f5e5;
  z-index: 7;
  overflow: hidden;
  visibility: hidden;
  color: #f5ffff;
  background: radial-gradient(circle at 50% 48%, rgba(21,63,98,.45), rgba(1,12,34,.9));
  opacity: 0;
  pointer-events: auto;
  backdrop-filter: blur(0);
  transition: opacity .22s ease, visibility 0s linear .22s, backdrop-filter .35s ease;
}

.bc-transition.is-active { visibility: visible; opacity: 1; backdrop-filter: blur(5px); transition-delay: 0s; }
.bc-transition.is-leaving { opacity: 0; filter: saturate(1.3) brightness(1.18); transition: opacity .46s ease, filter .46s ease; }
.bc-transition.is-clear { --transition-color: #ffe26f; background: radial-gradient(circle at 50% 46%, rgba(255,229,122,.24), transparent 43%), linear-gradient(145deg, rgba(5,64,83,.97), rgba(20,29,77,.97)); }
.bc-transition.is-retry { --transition-color: #8fc8ff; }
.bc-transition.is-failed { --transition-color: #ff91b7; background: radial-gradient(circle at 50% 48%, rgba(137,62,114,.44), rgba(20,12,42,.93)); }

.bc-transition::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(72%, 390px);
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 70%, color-mix(in srgb, var(--transition-color) 18%, transparent) 74%, rgba(234,255,255,.45) 78%, var(--transition-color) 80%, transparent 87%);
  box-shadow: 0 0 50px color-mix(in srgb, var(--transition-color) 18%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.12);
}

.bc-transition.is-active::before { animation: bc-transition-ripple 1.18s cubic-bezier(.08,.62,.22,1) forwards; }

.bc-transition-content {
  position: relative;
  z-index: 2;
  max-width: 90%;
  text-align: center;
  opacity: 0;
  transform: translateY(12px) scale(.86);
  filter: blur(5px);
}

.bc-transition.is-active .bc-transition-content { animation: bc-transition-content .86s cubic-bezier(.18,.8,.22,1) .1s forwards; }
.bc-transition-eyebrow { display: block; margin-bottom: 7px; color: var(--transition-color); font-size: clamp(9px, 1.55cqw, 13px); font-weight: 900; letter-spacing: .22em; text-shadow: 0 0 10px var(--transition-color); }
.bc-transition-title { display: block; margin: 0; font: 700 clamp(29px, 6.5cqw, 58px)/1 Fredoka, "Zen Maru Gothic"; text-shadow: 0 2px #09233d, 0 0 14px var(--transition-color), 0 0 34px color-mix(in srgb, var(--transition-color) 52%, transparent); }
.bc-transition-detail { display: inline-block; margin-top: 11px; padding: 6px 14px; border: 1px solid rgba(223,255,255,.28); border-radius: 999px; color: #efffff; background: rgba(3,23,44,.62); font-size: clamp(9px, 1.45cqw, 12px); font-weight: 900; }
.bc-transition-route { display: none; align-items: center; justify-content: center; margin-top: 12px; gap: 12px; font: 900 clamp(10px, 1.75cqw, 14px)/1 Fredoka, "Zen Maru Gothic"; }
.bc-transition.is-clear .bc-transition-route { display: flex; }
.bc-transition-route span { min-width: 74px; padding: 7px 10px; border: 1px solid rgba(184,255,242,.45); border-radius: 999px; background: rgba(3,26,52,.66); }
.bc-transition-route span:last-child { color: #173c50; background: linear-gradient(135deg, #fff1a2, #68ead9); }
.bc-transition-arrow { color: #fff5ad; font-size: 1.35em; animation: bc-arrow .75s ease-in-out infinite alternate; }

.bc-result,
.bc-stage-menu {
  z-index: 8;
  padding: clamp(12px, 3cqw, 28px);
  background: rgba(2,10,24,.89);
  backdrop-filter: blur(9px);
}

.bc-result[hidden],
.bc-stage-menu[hidden] { display: none; }

.bc-result-card {
  width: min(430px, 90%);
  padding: clamp(20px, 4cqw, 32px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(26,99,114,.97), rgba(67,67,124,.97));
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  text-align: center;
}

.bc-result-emblem {
  width: 72px;
  aspect-ratio: 1;
  margin: 0 auto 8px;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #fff 0 5%, rgba(255,255,255,.32) 6% 12%, transparent 13%), linear-gradient(145deg, #ffe879, #65e8d8);
  box-shadow: inset 0 0 0 6px rgba(8,43,74,.2), 0 0 24px rgba(105,234,220,.5);
}

.bc-result-card h2 { margin: 0; font: 700 clamp(28px, 6cqw, 46px)/1 Fredoka, "Zen Maru Gothic"; }
.bc-result-score { display: block; margin: 10px 0; color: #ffe36f; font: 700 clamp(34px, 7cqw, 56px)/1 Fredoka; }
.bc-result-card p { margin: 0 auto 16px; color: rgba(255,255,255,.78); font-size: 11px; font-weight: 900; line-height: 1.7; }
.bc-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.bc-result-actions .bc-button { min-height: 42px; font-size: 11px; }

.bc-stage-menu-card {
  width: min(680px, 96%);
  max-height: 94%;
  overflow: auto;
  padding: clamp(14px, 2.5cqw, 24px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(7,44,72,.98), rgba(38,34,86,.98));
  box-shadow: 0 25px 80px rgba(0,0,0,.5);
  scrollbar-width: thin;
}

.bc-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bc-menu-head h2 { margin: 0; font: 700 clamp(23px, 4cqw, 36px)/1 Fredoka, "Zen Maru Gothic"; }
.bc-menu-close { width: 38px; min-width: 38px; min-height: 38px; padding: 0; font-size: 17px; }
.bc-stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }

.bc-stage-card {
  min-width: 0;
  min-height: 76px;
  padding: 8px;
  border: 1px solid rgba(160,239,255,.18);
  border-radius: 12px;
  color: #edffff;
  background: rgba(3,19,43,.62);
  text-align: left;
  cursor: pointer;
}

.bc-stage-card:hover:not([disabled]),
.bc-stage-card:focus-visible { border-color: #78eadf; background: rgba(15,73,94,.72); outline: 0; }
.bc-stage-card.is-current { border-color: #ffe16b; box-shadow: inset 0 0 0 1px rgba(255,225,107,.45); }
.bc-stage-card[disabled] { opacity: .34; cursor: not-allowed; }
.bc-stage-card b { display: block; color: #77eadf; font: 700 15px/1 Fredoka; }
.bc-stage-card span { display: block; margin-top: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; font-weight: 900; }
.bc-stage-card small { display: block; margin-top: 7px; color: #ffe16b; font-size: 10px; letter-spacing: .08em; }

.bc-menu-bottom { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8px; margin-top: 10px; }
.bc-endless-card { min-height: 48px; font-size: 11px; }
.bc-legend-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
.bc-legend-list span { padding: 6px 4px; border-radius: 8px; color: rgba(237,255,255,.78); background: rgba(3,18,42,.55); text-align: center; font-size: 8px; font-weight: 900; }
.bc-legend-list b { color: #fff2a2; font-size: 12px; }

@keyframes bc-aurora { to { opacity: .58; transform: scale(1.08) translate3d(2%, -2%, 0); } }
@keyframes bc-twinkle { 0%,100% { opacity: .12; transform: scale(.55); } 42% { opacity: 1; transform: scale(1.35); } 65% { opacity: .35; transform: scale(.82); } }
@keyframes bc-aim-pulse { from { opacity: .75; transform: translate(-50%,-50%) scale(.42); } to { opacity: 0; transform: translate(-50%,-50%) scale(1.35); } }
@keyframes bc-coach-bob { to { transform: translate(-50%, calc(-50% - 5px)) scale(1.08); } }
@keyframes bc-water-glow { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.18); } 38% { opacity: .8; transform: translate(-50%,-50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.4); } }
@keyframes bc-water-wave { 0% { width: 10px; opacity: 0; transform: translate(-50%,-50%) rotate(var(--wave-angle)); } 11% { opacity: 1; } 44% { opacity: .96; transform: translate(-50%,-50%) rotate(calc(var(--wave-angle) + 4deg)); } 78% { opacity: .68; } 100% { width: var(--fx-range); opacity: 0; transform: translate(-50%,-50%) rotate(calc(var(--wave-angle) - 3deg)); } }
@keyframes bc-wave-reflection { 0% { opacity: 0; transform: rotate(-18deg); } 22% { opacity: 1; } 68% { opacity: .62; } 100% { opacity: 0; transform: rotate(24deg); } }
@keyframes bc-water-drop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.15); } 18% { opacity: .95; transform: translate(-50%,-50%) scale(1); } 72% { opacity: .72; } 100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(.2); } }
@keyframes bc-water-glint { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--spark-rotate)) scaleY(.2); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) rotate(calc(var(--spark-rotate) + 34deg)) scaleY(.08); } }
@keyframes bc-transition-ripple { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.12); } 20% { opacity: .92; } 72% { opacity: .5; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.65); } }
@keyframes bc-transition-content { 0% { opacity: 0; transform: translateY(12px) scale(.86); filter: blur(5px); } 45%,78% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } 100% { opacity: .9; transform: translateY(-2px) scale(1.02); filter: blur(0); } }
@keyframes bc-arrow { to { transform: translateX(5px); filter: brightness(1.35); } }

@container (max-width: 650px) {
  .bc-panel, .bc-board { border-radius: 9px; }
  .bc-kicker { padding: 5px 9px; font-size: 10px; }
  .bc-stage-copy strong { font-size: 9px; }
  .bc-stage-copy span { font-size: 8px; }
  .bc-tap-hint { inset: auto 5px 5px; padding: 4px 8px; font-size: 9px; }
  .bc-transition-title { font-size: clamp(27px, 7cqw, 50px); }
}

@media (max-width: 720px) and (orientation: portrait) {
  .game-stage--portrait-stack .bc-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) clamp(170px, 45vw, 190px) !important;
    gap: 5px;
  }

  .game-stage--portrait-stack .bc-main { padding: 6px; gap: 5px; }
  .game-stage--portrait-stack .bc-top { padding-right: 44px; }
  .game-stage--portrait-stack .bc-side {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 25px 41px 34px 34px !important;
    gap: 4px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  .game-stage--portrait-stack .bc-brand { grid-column: 1 / 3; grid-row: 1; padding-right: 0; font-size: 14px; }
  .game-stage--portrait-stack .bc-brand small { margin-top: 2px; font-size: 8px; line-height: 1.2; }
  .game-stage--portrait-stack .bc-mode-chip { position: static; grid-column: 3 / 5; grid-row: 1; align-self: center; justify-self: end; font-size: 7px; }
  .game-stage--portrait-stack .bc-stats { grid-column: 1 / 5; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .game-stage--portrait-stack .bc-stat { padding: 3px 2px; }
  .game-stage--portrait-stack .bc-stat small { font-size: 7px; }
  .game-stage--portrait-stack .bc-stat b { margin-top: 1px; font-size: 13px; }
  .game-stage--portrait-stack .bc-attempts { grid-column: 1 / 3; grid-row: 3; min-height: 0; }
  .game-stage--portrait-stack .bc-life { width: 17px; }
  .game-stage--portrait-stack .bc-stage-mini { font-size: 7px; }
  .game-stage--portrait-stack .bc-mechanic { display: none; }
  .game-stage--portrait-stack .bc-message { grid-column: 3 / 5; grid-row: 3; min-height: 0; padding: 4px 5px; overflow: hidden; font-size: 7px; line-height: 1.3; }
  .game-stage--portrait-stack .bc-actions { grid-column: 1 / 5; grid-row: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin: 0; }
  .game-stage--portrait-stack .bc-button { min-height: 31px; padding: 3px; font-size: 7px; }
  .game-stage--portrait-stack .bc-stage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-stage--portrait-stack .bc-stage-card { min-height: 62px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .game-stage:not(.games-faux-fullscreen):not(:fullscreen) {
    height: 100svh !important;
    max-height: 100svh !important;
    aspect-ratio: auto !important;
  }

  .bc-shell { inset: 6px; gap: 7px; grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr); }
  .bc-main, .bc-side { padding: 7px; }
  .bc-side { gap: 5px; }
  .bc-brand { font-size: 21px; }
  .bc-brand small { margin-top: 3px; font-size: 8px; }
  .bc-stat { padding: 5px 3px; }
  .bc-message, .bc-mechanic { padding: 6px 8px; min-height: 30px; font-size: 8px; }
  .bc-button { min-height: 31px; font-size: 8px; }
  .bc-life { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-board::before,
  .bc-star,
  .bc-aim::before,
  .bc-aim::after,
  .bc-coach,
  .bc-coach::before,
  .bc-transition-arrow { animation: none; }

  .bc-fx-glow,
  .bc-fx-wave,
  .bc-fx-wave::before,
  .bc-fx-particle,
  .bc-transition::before,
  .bc-transition-content { animation-duration: .2s !important; animation-delay: 0s !important; }
}