/* BRONC3 V2.39-V2.41 — Patched directly to 2.5D Coin Master Tropical Motif */
#panel-scrim.show {
  z-index: 15 !important;
  pointer-events: auto !important;
}
.float-panel.open {
  z-index: 50 !important;
  pointer-events: auto !important;
}
#panel-fate.open {
  z-index: 80 !important;
  pointer-events: auto !important;
}
#panel-fate.open .fate-choice-cards,
#panel-fate.open .fate-card,
#panel-fate.open #premium-card,
#panel-fate.open .fate-rerolls button {
  pointer-events: auto !important;
}
body:has(#panel-settings.open) #panel-scrim.show {
  z-index: 340 !important;
}
#panel-settings.open {
  z-index: 350 !important;
}
#v224-fate-decision:not(.hide),
#dsc-confirm:not(.hide),
#helpmodal:not(.hide),
#milestone-overlay:not(.hide) {
  z-index: 600 !important;
}

.game-home {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.game-home .island-stage {
  position: absolute !important;
  inset: 0 !important;
  isolation: isolate !important;
  overflow: hidden !important;
}
.game-home .island-stage > .bronc3-handoff-island-bg {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  object-fit: cover !important;
  opacity: 1 !important;
  pointer-events: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}
.game-home .island-stage > #island-view {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  background: transparent !important;
  touch-action: none !important;
}
#island-view svg {
  touch-action: none !important;
  user-select: none !important;
  overscroll-behavior: contain !important;
}
.bronc3-handoff-island-bg,
.bronc3-handoff-bg {
  pointer-events: none !important;
}
#bronc3-pc-view-toggle,
#bronc3-hud-size-controls {
  display: none !important;
}

/* Single 2.5D Camera Control Bar */
#bronc3-camera-controls {
  position: absolute;
  z-index: 12;
  left: calc(14px + env(safe-area-inset-left));
  bottom: calc(18px + env(safe-area-inset-bottom));
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #9a5219 0%, #5c2b09 100%);
  background-clip: padding-box;
  border: 2.5px solid #fbbf24;
  border-radius: 999px;
  padding: 4px 8px;
  box-shadow:
    inset 0 2px 0 rgba(255, 244, 184, 0.55),
    0 3px 0 #3b1905,
    0 8px 16px rgba(0, 0, 0, 0.42);
  pointer-events: auto;
}
#bronc3-camera-controls button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fde047 0%, #eab308 55%, #ca8a04 100%);
  background-clip: padding-box;
  color: #451a03;
  border: 2px solid #fef9c3;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(113, 63, 18, 0.4),
    0 2px 0 #451a03;
}
#bronc3-cam-level {
  font-size: 13px;
  font-weight: 900;
  color: #fef08a;
  min-width: 44px;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 720px) {
  #bronc3-camera-controls {
    left: calc(8px + env(safe-area-inset-left));
    bottom: calc(78px + env(safe-area-inset-bottom));
    height: 36px;
    gap: 4px;
    padding: 3px 6px;
  }
  #bronc3-camera-controls button {
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    font-size: 13px;
    padding: 0;
  }
  #bronc3-cam-level {
    min-width: 36px;
    font-size: 11px;
  }
}

#bronc3-preview-launch {
  position: fixed !important;
  left: calc(14px + env(safe-area-inset-left)) !important;
  top: calc(114px + env(safe-area-inset-top)) !important;
  z-index: 12 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  min-height: 36px !important;
  padding: 6px 14px !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 55%, #0369a1 100%) !important;
  background-clip: padding-box !important;
  border: 2.5px solid #fde047 !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(8, 47, 73, 0.45),
    0 3px 0 #3b1905,
    0 8px 16px rgba(0, 0, 0, 0.35) !important;
  pointer-events: auto !important;
}
body[data-state="title"] #bronc3-preview-launch,
body[data-state="title"] #bronc3-map-toggle,
body[data-state="title"] #bronc3-camera-controls,
body:has(.float-panel.open) #bronc3-preview-launch,
body:has(.float-panel.open) #bronc3-map-toggle,
body:has(.float-panel.open) #bronc3-camera-controls,
body:has(.overlay:not(.hide)) #bronc3-preview-launch,
body:has(.overlay:not(.hide)) #bronc3-map-toggle,
body:has(.overlay:not(.hide)) #bronc3-camera-controls {
  display: none !important;
}

#bronc3-newrun-overlay[hidden] {
  display: none !important;
}
#bronc3-newrun-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  background: rgba(12, 38, 62, 0.72) !important;
  backdrop-filter: blur(6px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}
.bronc3-newrun-box {
  width: min(470px, 100%) !important;
  border: 5px solid #f59e0b !important;
  outline: 3px solid #451a03 !important;
  background: linear-gradient(180deg, #fff9e6 0%, #f7e4bc 100%) !important;
  border-radius: 26px !important;
  box-shadow:
    inset 0 3px 0 #ffffff,
    inset 0 0 0 4px #b45309,
    0 12px 0 #451a03,
    0 24px 50px rgba(0, 0, 0, 0.65) !important;
  padding: 22px !important;
  color: #431c05 !important;
  line-height: 1.5 !important;
}
.bronc3-newrun-box h2 {
  font-size: 22px !important;
  margin: 0 0 13px !important;
}
.bronc3-newrun-box p {
  font-size: 14px !important;
  margin-bottom: 12px !important;
  color: #431c05 !important;
  font-weight: 700 !important;
}
#bronc3-newrun-status {
  color: #b45309 !important;
  min-height: 16px !important;
  font-weight: 800 !important;
}
.bronc3-newrun-buttons {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

/* BRONC3 V2.39F Fate cards: Original 50 card artworks preserved 100% */
#panel-fate .fate-choice-cards .bronc3-designed-fate-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  min-height: 0;
  padding: 0;
  background-color: transparent !important;
  background-position: center;
  background-size: 100% 100%;
  overflow: hidden;
  border-radius: 16px;
  container-type: inline-size;
  isolation: isolate;
}
#panel-fate .bronc3-designed-fate-card > .rarity,
#panel-fate .bronc3-designed-fate-card > .bronc3-hide-old-title,
#panel-fate .bronc3-designed-fate-card > span:not(.bronc3-card-title) {
  display: none !important;
}
#panel-fate .bronc3-card-title {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-wrap: anywhere;
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
  padding: 0 2%;
  color: #fff8df !important;
  font-size: clamp(14px, 2.6cqw, 24px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  paint-order: stroke fill !important;
  -webkit-text-stroke: 1px #2b1203 !important;
  text-shadow: 0 2px 4px #000000, 0 0 8px rgba(0, 0, 0, 0.85) !important;
}
#panel-fate .bronc3-card-detail-art {
  width: min(240px, 85%);
  aspect-ratio: 3 / 4;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: relative;
  margin: 8px auto 14px;
  border-radius: 16px;
  container-type: inline-size;
  overflow: hidden;
  filter: drop-shadow(0 10px 20px rgba(67, 28, 5, 0.38));
}
#panel-fate .fate-detail-title:has(.bronc3-card-detail-art) {
  text-align: center;
}

#bronc3-boot-help[hidden] {
  display: none !important;
}

/* Resource icons + header alignment */
.hud-top {
  z-index: 25 !important;
}
.resource-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.resource-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1.15 !important;
  min-height: 36px !important;
  white-space: nowrap !important;
}
.bronc3-resource-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.bronc3-resource-symbol svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.resource-chip b {
  display: inline-block;
  min-width: 1.4ch;
  line-height: 1.15;
}
.fate-strip {
  top: var(--bronc3-fate-top, 78px) !important;
  z-index: 20 !important;
  max-width: min(82vw, 480px) !important;
  white-space: nowrap !important;
  line-height: 1.24 !important;
  box-sizing: border-box !important;
}

@media (max-width: 899px) {
  .hud-top {
    left: calc(6px + env(safe-area-inset-left)) !important;
    right: calc(6px + env(safe-area-inset-right)) !important;
    gap: 5px !important;
  }
  .resource-bar {
    flex: 1 1 100% !important;
    order: 3 !important;
    justify-content: center !important;
    gap: 4px !important;
    max-width: 100% !important;
  }
  .resource-chip {
    font-size: clamp(11px, 2.8vw, 14px) !important;
    padding: 4px 8px !important;
    min-height: 30px !important;
    flex: 0 1 auto !important;
  }
  .bronc3-resource-symbol {
    width: clamp(16px, 4vw, 20px);
    height: clamp(16px, 4vw, 20px);
  }
  .fate-strip {
    max-width: calc(100% - 20px) !important;
    width: max-content !important;
    min-width: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: clamp(11px, 2.6vw, 13px) !important;
    padding: 6px 12px !important;
  }
}

/* Mobile Fate Card grid */
@media (max-width: 700px) {
  #panel-fate.open {
    width: calc(100vw - 12px) !important;
    max-width: 100vw !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }
  #panel-fate #play {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #panel-fate .fate-choice-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    justify-content: center !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 310px !important;
    margin-inline: auto !important;
    height: auto !important;
    min-height: max-content !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  #panel-fate .fate-choice-cards > .card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    margin: 0 !important;
    transform: none !important;
    align-self: start !important;
    position: relative !important;
  }
  #panel-fate .fate-choice-cards > .card:nth-child(3) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
  }
  #panel-fate .fate-choice-cards .bronc3-designed-fate-card {
    background-size: 100% 100% !important;
  }
  #panel-fate .fate-rerolls {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 8px auto 4px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  #panel-fate .fate-rerolls button {
    min-height: 42px !important;
    flex: 1 1 44% !important;
  }
  #panel-fate .fate-detail {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: auto !important;
    min-height: max-content !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  #panel-fate .fate-detail-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    height: auto !important;
    min-height: max-content !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  #panel-fate .fate-detail-title p {
    max-height: none !important;
    overflow: visible !important;
  }
  #panel-fate .bronc3-card-detail-art {
    width: min(148px, 46vw) !important;
    margin: 4px auto !important;
    flex: 0 0 auto !important;
  }
  #panel-fate .v224-directions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    flex: 0 0 auto !important;
  }
}

/* Collection cards: original 50 card artworks preserved 100% */
#panel-collection .collection-cards {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px !important;
  align-items: start;
}
#panel-collection .collection-mini {
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}
#panel-collection .collection-mini[hidden] {
  display: none !important;
}
#panel-collection .bronc3-collection-art {
  width: 100%;
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #e6cba1;
}
#panel-collection .bronc3-collection-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
#panel-collection .bronc3-collection-missing .bronc3-collection-art img {
  filter: grayscale(1) brightness(0.72) contrast(0.95);
}
#panel-collection .bronc3-collection-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 2px 7px #000;
  font-size: 25px;
}
#panel-collection .bronc3-collection-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
@media (max-width: 700px) {
  #panel-collection .collection-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
}

/* Desktop Fate Detail 2-column layout */
@media (min-width: 901px) {
  #panel-fate .fate-detail.v241-detail-layout {
    display: grid !important;
    grid-template-columns: minmax(200px, 34%) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 14px 20px !important;
    align-items: start !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }
  #panel-fate .fate-detail.v241-detail-layout #fate-back {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }
  #panel-fate .fate-detail.v241-detail-layout .fate-detail-title {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(200px, 34%) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 6px 20px !important;
    align-items: start !important;
    max-width: none !important;
    text-align: left !important;
  }
  #panel-fate .fate-detail.v241-detail-layout .bronc3-card-detail-art {
    grid-column: 1 !important;
    grid-row: 1 / 5 !important;
    width: 100% !important;
    max-width: 235px !important;
    max-height: 340px !important;
    justify-self: center !important;
    margin: 0 !important;
  }
  #panel-fate .fate-detail.v241-detail-layout .fate-detail-title > .rarity {
    grid-column: 2 !important;
    justify-self: start !important;
    width: fit-content !important;
    margin: 0 0 6px !important;
  }
  #panel-fate .fate-detail.v241-detail-layout .fate-detail-title > h2,
  #panel-fate .fate-detail.v241-detail-layout .fate-detail-title > p,
  #panel-fate .fate-detail.v241-detail-layout .fate-detail-title > .fate-target {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 0 8px !important;
  }
  #panel-fate .fate-detail.v241-detail-layout .v224-prompt,
  #panel-fate .fate-detail.v241-detail-layout .v224-directions {
    grid-column: 1 / -1 !important;
    max-width: none !important;
  }
  #panel-fate .fate-detail.v241-detail-layout .v224-directions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

#panel-fate .fate-choice-cards > .card {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  transform-origin: 50% 50%;
  animation: v241-card-idle 3.8s ease-in-out infinite;
  animation-delay: calc(var(--v241-index, 0) * -0.5s);
  transition: filter 0.24s ease, transform 0.24s ease !important;
}
#panel-fate .fate-choice-cards > .card:hover {
  animation-play-state: paused;
  transform: scale(1.05) translateY(-4px) !important;
  filter: brightness(1.08) drop-shadow(0 12px 22px rgba(67, 28, 5, 0.45));
  z-index: 2;
}
@keyframes v241-card-idle {
  0%, 100% { scale: 1; }
  50% { scale: 1.022; }
}

/* Supplementary gallery & sound controls in Coin Master Warm Parchment style */
#bronc3-v241-collections {
  margin: 16px 0 8px;
  padding: 16px;
  background: linear-gradient(180deg, #fffdf5 0%, #f5e0b5 100%);
  border: 2px solid #d97706;
  border-radius: 18px;
  box-shadow: 0 4px 0 #b45309;
  color: #431c05;
}
#bronc3-v241-collections[hidden] {
  display: none !important;
}
#bronc3-v241-collections h3 {
  font-size: 19px;
  margin: 4px 0 10px;
}
#bronc3-v241-collections .v241-caption {
  font-size: 13px;
  line-height: 1.5;
  color: #5c2804;
  font-weight: 700;
}
.v241-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.v241-theme-set,
.v241-upcoming {
  background: linear-gradient(180deg, #fff9e6 0%, #f3d7a0 100%);
  border: 2px solid #d97706;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 3px 0 #b45309;
  min-width: 0;
}
.v241-theme-set summary,
.v241-upcoming summary {
  color: #431c05;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.v241-theme-set[open] {
  grid-column: 1 / -1;
}
.v241-theme-cards,
.v241-upcoming-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.v241-theme-card,
.v241-upcoming-card {
  min-width: 0;
  text-align: center;
  color: #431c05;
  font-weight: 700;
}
.v241-theme-card img,
.v241-upcoming-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.v241-theme-card span,
.v241-upcoming-card small {
  display: block;
  color: #5c2804;
  font-size: 11px;
  margin-top: 5px;
  font-weight: 700;
}
.v241-upcoming {
  margin-top: 10px;
}
@media (max-width: 700px) {
  .v241-theme-grid {
    grid-template-columns: 1fr;
  }
  .v241-theme-set[open] {
    grid-column: auto;
  }
  .v241-theme-cards,
  .v241-upcoming-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Alive motion on constructed sites */
#island-view .site.bronc3-site-alive .structure {
  animation: bronc3-site-breathe 3.1s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}
@keyframes bronc3-site-breathe {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-2px); filter: brightness(1.06); }
}

.v241c-sound-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  width: 100%;
  padding: 8px 0;
}
.v241c-sound-library > div,
.v241c-sound-library > p {
  grid-column: 1 / -1 !important;
  color: #78350f;
  font-weight: 800;
  font-size: 13px;
}
.v241f-real-audio {
  margin: 12px 0;
  padding: 14px;
  background: linear-gradient(180deg, #fffdf5 0%, #f5e0b5 100%);
  color: #431c05;
  border: 2px solid #d97706;
  border-radius: 16px;
  box-shadow: 0 4px 0 #b45309;
  font-size: 14px;
}
.v241f-real-audio h3 {
  font-size: 16px;
  margin: 0 0 7px;
}
.v241f-real-audio p {
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 12px;
  color: #5c2804;
  font-weight: 700;
}
.v241f-sound-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr) 36px 36px;
  align-items: center;
  gap: 6px;
  padding: 7px 0;
  border-top: 1px dashed #d97706;
}