/* ==========================================================================
   ĐẢO SỐNG CÒN — 2.5D COIN MASTER EDITION UI & POPUP SYSTEM
   Direct Patch for Original Files:
   - Sunlit 2.5D Tropical Sky & Turquoise Lagoon Game Background
   - Authentic Coin Master 2.5D Popups (Carved Wood/Gold Frame, 3D Crimson/Gold
     Ribbon Header, Warm Parchment Interior, Glossy 3D Candy Pill Buttons)
   - Preserves 100% of island25d.js SVG mapper coordinates & 50 Fate Card artworks
   ========================================================================== */

:root {
  --cm-font-display: 'Baloo 2', 'Nunito', sans-serif;
  --cm-font-body: 'Nunito', sans-serif;

  /* Coin Master 2.5D Palette */
  --cm-parchment-top: #fffdf7;
  --cm-parchment-mid: #fcefca;
  --cm-parchment-bot: #f3d79b;
  --cm-wood-border: #d97706;
  --cm-wood-inner: #b45309;
  --cm-wood-lip: #451a03;
  --cm-ink-dark: #3b1905;
  --cm-ink-muted: #6b3410;
}

/* 1. GLOBAL TYPOGRAPHY & EXTRUDED 3D HEADINGS */
html,
body {
  font-family: var(--cm-font-body) !important;
  color: var(--cm-ink-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 3D Extruded Display Headings on Ribbon Banners & HUD */
.panel-head h2,
.dialog > h2:first-child,
#plot-name,
#milestone-title,
#intro-title,
#intro-card-title,
.v224-decision-head b,
.bottom-dock button,
.hud-menu button small,
.primary,
#level,
#huddiamonds {
  font-family: var(--cm-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0.015em;
  paint-order: stroke fill;
  -webkit-text-stroke: 1.4px #3d1604;
  text-shadow:
    0 2px 0 #3d1604,
    0 3px 0 #240b01,
    0 5px 8px rgba(0, 0, 0, 0.48) !important;
}

/* Section subheadings inside warm parchment popups */
.float-panel h3,
.dialog h3,
.cm-quick-resume-box h3 {
  font-family: var(--cm-font-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #fffbeb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 55%, #92400e 100%);
  background-clip: padding-box !important;
  border: 2px solid #fde047;
  border-radius: 14px;
  padding: 6px 14px;
  margin: 10px 0 6px !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(69, 26, 3, 0.35),
    0 3px 0 #451a03,
    0 5px 10px rgba(67, 28, 5, 0.2);
  paint-order: stroke fill;
  -webkit-text-stroke: 1.1px #451a03;
  text-shadow: 0 2px 0 #451a03 !important;
}

.resource-chip b,
#huddiamonds,
.metric strong,
.rate,
.v224-impact-row span,
.v224-impact-row strong,
.cinema-account-line span,
.cinema-account-line strong,
#clockfate,
#clockpick {
  font-variant-numeric: tabular-nums !important;
}

/* 2. SUNLIT 2.5D TROPICAL SKY & TURQUOISE LAGOON GAME BACKGROUND */
html,
body,
.game-home {
  background:
    radial-gradient(circle at 50% 10%, rgba(254, 249, 195, 0.85) 0%, rgba(125, 211, 252, 0.45) 32%, transparent 65%),
    radial-gradient(ellipse at 50% 52%, #22d3ee 0%, #06b6d4 34%, #0284c7 68%, #035388 100%) !important;
}

.game-home .island-stage,
#island-view {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 248, 196, 0.78) 0%, rgba(186, 230, 253, 0.35) 30%, transparent 62%),
    radial-gradient(ellipse at 50% 52%, #67e8f9 0%, #22d3ee 28%, #0891b2 58%, #0369a1 82%, #075985 100%) !important;
}

/* Sunbeams & tropical lagoon shimmer behind the 2.5D island */
.cm-ocean-backdrop,
.game-home .island-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 251, 214, 0.72) 0%, rgba(253, 224, 71, 0.22) 25%, transparent 58%),
    repeating-conic-gradient(from 0deg at 50% -10%, rgba(255, 255, 255, 0.11) 0deg 8deg, transparent 8deg 20deg),
    radial-gradient(ellipse at 50% 54%, rgba(165, 243, 252, 0.55) 0%, rgba(34, 211, 238, 0.28) 42%, transparent 72%);
}

/* Soft sunlit vignette instead of dark black edges */
.game-home::after {
  background:
    linear-gradient(180deg, rgba(14, 116, 144, 0.22) 0%, transparent 16%, transparent 84%, rgba(7, 89, 133, 0.35) 100%) !important;
  pointer-events: none !important;
}

/* 3. SPLASH TITLE SCREEN (#dsc-splash) — TRUE 2.5D COIN MASTER ISLANDSPLASH */
#dsc-splash {
  background:
    radial-gradient(circle at 50% 24%, rgba(254, 240, 138, 0.88) 0%, rgba(253, 186, 116, 0.38) 28%, transparent 56%),
    repeating-conic-gradient(from 0deg at 50% 26%, rgba(255, 255, 255, 0.14) 0deg 9deg, transparent 9deg 22deg),
    url('/assets_pack/islands/theme_01/background.webp') center 52% / min(92vw, 760px) auto no-repeat,
    linear-gradient(180deg, #38bdf8 0%, #0ea5e9 38%, #06b6d4 68%, #0284c7 100%) !important;
}

#dsc-splash .bronc3-handoff-logo {
  filter:
    drop-shadow(0 6px 0 rgba(92, 40, 4, 0.75))
    drop-shadow(0 18px 32px rgba(0, 28, 56, 0.6)) !important;
}

#dsc-start,
#dsc-start.bronc3-handoff-start {
  position: absolute !important;
  left: 50% !important;
  top: 57% !important;
  transform: translateX(-50%) !important;
  width: clamp(236px, 68%, 310px) !important;
  min-width: 236px !important;
  max-width: calc(100vw - 32px) !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 0 28px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #15803d 100%) !important;
  background-clip: padding-box !important;
  border: 3.5px solid #fde047 !important;
  outline: none !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.72),
    inset 0 -5px 0 rgba(15, 63, 34, 0.55),
    0 4px 0 #3b1905,
    0 14px 28px rgba(0, 20, 42, 0.52) !important;
  color: #ffffff !important;
  font-family: var(--cm-font-display) !important;
  font-size: clamp(20px, 2.8vw, 26px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  -webkit-text-stroke: 1.4px #0f3f22 !important;
  text-shadow: 0 2px 0 #0f3f22, 0 4px 6px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
  transition: transform 0.12s ease, filter 0.12s ease !important;
}

#dsc-start:hover,
#dsc-start.bronc3-handoff-start:hover {
  filter: brightness(1.08) !important;
  transform: translateX(-50%) translateY(-2px) scale(1.03) !important;
}

#dsc-start:active,
#dsc-start.bronc3-handoff-start:active {
  transform: translateX(-50%) translateY(3px) !important;
}

/* 4. ON-ISLAND 2.5D BUILDING PLAQUES (Zero changes to SVG coordinates/mapper) */
#island-view .site {
  transition: filter 0.16s ease;
}
#island-view .site:hover {
  filter: brightness(1.08) drop-shadow(0 8px 14px rgba(254, 240, 138, 0.55));
}
#island-view .site .plot-base {
  fill: #f6d58e !important;
  stroke: #b45309 !important;
  stroke-width: 4.5px !important;
  filter: drop-shadow(0 6px 0 #78350f) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
}
#island-view .site .state-btn rect {
  rx: 12px !important;
  ry: 12px !important;
  fill: #22c55e !important;
  stroke: #fef08a !important;
  stroke-width: 2.8px !important;
  filter: drop-shadow(0 4px 0 #14532d) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
}
#island-view .site.bronc3-site-alive .state-btn rect {
  fill: #f59e0b !important;
  stroke: #fef9c3 !important;
  filter: drop-shadow(0 4px 0 #78350f) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
}
#island-view .site-label {
  font-family: var(--cm-font-display) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  fill: #ffffff !important;
  stroke: #1e0d02 !important;
  stroke-width: 3px !important;
  paint-order: stroke fill !important;
}
#island-view .site-desc {
  font-family: var(--cm-font-display) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  fill: #fffbeb !important;
  stroke: #3b1905 !important;
  stroke-width: 3.5px !important;
  paint-order: stroke fill !important;
}
#island-view .production-badge rect {
  rx: 12px !important;
  ry: 12px !important;
  fill: #9a3412 !important;
  stroke: #fde047 !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 4px 0 #431407) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.42));
}

/* 5. TOP HUD — COIN MASTER 2.5D SHIELD CREST, DIAMOND METER & RESOURCE CAPSULES */
.hud-top {
  position: absolute !important;
  top: calc(10px + env(safe-area-inset-top)) !important;
  left: calc(12px + env(safe-area-inset-left)) !important;
  right: calc(12px + env(safe-area-inset-right)) !important;
  z-index: 30 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  pointer-events: none !important;
}

/* Island Level Crest Badge */
.hud-top > .hud-chip:first-child {
  pointer-events: auto !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  background: linear-gradient(180deg, #b45309 0%, #78350f 55%, #451a03 100%) !important;
  background-clip: padding-box !important;
  border: 2.5px solid #fde047 !important;
  border-radius: 999px !important;
  padding: 5px 16px 5px 46px !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(46, 16, 2, 0.55),
    0 3px 0 #2e1002,
    0 8px 16px rgba(0, 0, 0, 0.38) !important;
  cursor: pointer !important;
}
.hud-top > .hud-chip:first-child::before {
  content: '🏝️';
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fef08a 0%, #f59e0b 62%, #b45309 100%);
  background-clip: padding-box;
  border: 2.5px solid #ffffff;
  box-shadow: 0 3px 0 #451a03, 0 5px 10px rgba(0, 0, 0, 0.38);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
#level {
  font-size: clamp(14px, 1.45vw, 17px) !important;
  color: #fef08a !important;
  line-height: 1.1 !important;
}
#connect {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #86efac !important;
  text-shadow: 0 1px 2px #000 !important;
  -webkit-text-stroke: 0 !important;
}

/* Diamond Capsule Meter */
#huddiamonds {
  pointer-events: auto !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 40px !important;
  background: linear-gradient(180deg, #7e22ce 0%, #581c87 55%, #3b0764 100%) !important;
  background-clip: padding-box !important;
  border: 2.5px solid #fde047 !important;
  border-radius: 999px !important;
  padding: 5px 38px 5px 14px !important;
  font-size: clamp(14px, 1.45vw, 17px) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(36, 6, 66, 0.55),
    0 3px 0 #2e1002,
    0 8px 16px rgba(0, 0, 0, 0.38) !important;
  cursor: pointer !important;
}
#huddiamonds::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  background-clip: padding-box;
  border: 2px solid #fef9c3;
  box-shadow: 0 2px 0 #14532d;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 5 Resource Capsules — Strictly Single Row on PC & Mobile */
#hudresources.resource-bar {
  pointer-events: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
}

.resource-chip {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: linear-gradient(180deg, #78350f 0%, #451a03 100%) !important;
  background-clip: padding-box !important;
  border: 2.5px solid #fbbf24 !important;
  border-radius: 999px !important;
  padding: 5px 11px 5px 9px !important;
  min-height: 36px !important;
  white-space: nowrap !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(28, 10, 1, 0.55),
    0 3px 0 #270e01,
    0 8px 14px rgba(0, 0, 0, 0.35) !important;
  color: #fffbeb !important;
  font-size: clamp(12px, 1.2vw, 15px) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important;
}
.resource-chip:hover,
.resource-chip[data-active="true"] {
  transform: translateY(-2px);
  border-color: #fef08a !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    0 0 0 3px rgba(254, 240, 138, 0.55),
    0 4px 0 #270e01,
    0 10px 18px rgba(0, 0, 0, 0.45) !important;
}
.resource-chip b {
  color: #fef08a !important;
  font-family: var(--cm-font-display) !important;
  font-size: clamp(13px, 1.3vw, 16px) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 0 #1f0a01 !important;
  -webkit-text-stroke: 0 !important;
}

/* 6. FATE RIBBON BANNER (#fatehint) — Never overlaps Xưởng gỗ on Desktop */
.fate-strip,
#fatehint {
  position: absolute !important;
  top: calc(62px + env(safe-area-inset-top)) !important;
  left: calc(14px + env(safe-area-inset-left)) !important;
  transform: none !important;
  z-index: 24 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 52%, #b45309 100%) !important;
  background-clip: padding-box !important;
  color: #3b1905 !important;
  border: 2.5px solid #ffffff !important;
  outline: none !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  font-family: var(--cm-font-display) !important;
  font-size: clamp(12.5px, 1.2vw, 15px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  -webkit-text-stroke: 0 !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    inset 0 -3px 0 rgba(92, 40, 4, 0.35),
    0 3px 0 #451a03,
    0 8px 16px rgba(0, 0, 0, 0.35) !important;
}

/* 7. RIGHT-SIDE 3D SQUIRCLE MEDALLION MENU (.hud-menu) */
.hud-menu {
  position: absolute !important;
  right: calc(14px + env(safe-area-inset-right)) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 26 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.hud-menu button {
  position: relative !important;
  width: 76px !important;
  min-width: 76px !important;
  height: 70px !important;
  min-height: 70px !important;
  padding: 5px 2px 4px !important;
  border-radius: 20px !important;
  border: 2.5px solid #fde047 !important;
  outline: none !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.55) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.65),
    inset 0 -4px 0 rgba(0, 0, 0, 0.3),
    0 4px 0 #3b1905,
    0 8px 16px rgba(0, 0, 0, 0.38) !important;
  transition: transform 0.12s ease, filter 0.12s ease !important;
}

.hud-menu button[data-panel="social"] {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%) !important;
}
.hud-menu button[data-panel="collection"] {
  background: linear-gradient(180deg, #c084fc 0%, #9333ea 58%, #6b21a8 100%) !important;
}
.hud-menu button[data-panel="raid"] {
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 58%, #9f1239 100%) !important;
}
.hud-menu button[data-panel="journey"] {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 58%, #92400e 100%) !important;
}
.hud-menu button[data-panel="rank"] {
  background: linear-gradient(180deg, #facc15 0%, #ca8a04 58%, #854d0e 100%) !important;
}
.hud-menu button[data-panel="settings"] {
  background: linear-gradient(180deg, #34d399 0%, #059669 58%, #065f46 100%) !important;
}

.hud-menu button:hover {
  transform: translateY(-2px) scale(1.04) !important;
  filter: brightness(1.08) !important;
}
.hud-menu button:active {
  transform: translateY(3px) !important;
}

.hud-menu button small {
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #fffbeb !important;
  background: rgba(45, 18, 4, 0.88);
  padding: 2px 3px !important;
  border-radius: 999px;
  border: 1px solid rgba(254, 240, 138, 0.75);
  line-height: 1.1 !important;
  white-space: nowrap !important;
  letter-spacing: -0.2px !important;
  max-width: calc(100% - 2px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 2px #000 !important;
}

/* 8. BOTTOM 3D COIN MASTER ACTION DOCK (.bottom-dock) */
.bottom-dock {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  z-index: 28 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  background: linear-gradient(180deg, #b45309 0%, #78350f 55%, #451a03 100%) !important;
  background-clip: padding-box !important;
  border: 3px solid #fbbf24 !important;
  outline: none !important;
  border-radius: 28px !important;
  box-shadow:
    inset 0 3px 0 rgba(254, 240, 138, 0.55),
    inset 0 -4px 0 rgba(39, 14, 1, 0.65),
    0 5px 0 #270e01,
    0 14px 28px rgba(0, 0, 0, 0.5) !important;
}

.bottom-dock button {
  position: relative !important;
  min-width: 122px !important;
  min-height: 50px !important;
  padding: 9px 14px !important;
  border-radius: 18px !important;
  border: 2.5px solid #fde047 !important;
  outline: none !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
  font-size: clamp(14px, 1.35vw, 17px) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1.15 !important;
  transition: transform 0.12s ease, filter 0.12s ease !important;
}

/* Primary Center-Style Spin/Fate Button */
.bottom-dock button[data-panel="fate"] {
  background: linear-gradient(180deg, #ff6b4a 0%, #e11d48 52%, #9f1239 100%) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.65),
    inset 0 -4px 0 rgba(107, 15, 26, 0.55),
    0 3px 0 #3b1905,
    0 8px 14px rgba(0, 0, 0, 0.35) !important;
}

/* Village/Island Builder Button */
.bottom-dock button[data-panel="building"] {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 52%, #15803d 100%) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.65),
    inset 0 -4px 0 rgba(20, 83, 45, 0.55),
    0 3px 0 #3b1905,
    0 8px 14px rgba(0, 0, 0, 0.35) !important;
}

/* Time-Skip Shop Button */
.bottom-dock button#dock-shop-btn {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 52%, #92400e 100%) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.65),
    inset 0 -4px 0 rgba(92, 40, 4, 0.55),
    0 3px 0 #3b1905,
    0 8px 14px rgba(0, 0, 0, 0.35) !important;
}

/* Inventory / Bag Button */
.bottom-dock button#dock-bag-btn {
  background: linear-gradient(180deg, #c084fc 0%, #9333ea 52%, #6b21a8 100%) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.65),
    inset 0 -4px 0 rgba(59, 7, 100, 0.55),
    0 3px 0 #3b1905,
    0 8px 14px rgba(0, 0, 0, 0.35) !important;
}

.cm-dock-badge {
  background: linear-gradient(180deg, #ff6b4a 0%, #dc2626 100%);
  color: #ffffff;
  border: 1.5px solid #fef08a;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  box-shadow: 0 2px 0 #451a03;
}
.cm-dock-badge[hidden] {
  display: none !important;
}

/* Treasure/Resources Button */
.bottom-dock button[data-panel="resources"] {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 52%, #0369a1 100%) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.65),
    inset 0 -4px 0 rgba(12, 74, 110, 0.55),
    0 3px 0 #3b1905,
    0 8px 14px rgba(0, 0, 0, 0.35) !important;
}

.bottom-dock button:hover {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.08) !important;
}
.bottom-dock button:active {
  transform: translateY(3px) !important;
}

/* ==========================================================================
   9. AUTHENTIC 2.5D COIN MASTER POPUPS & MODALS
      (Carved Wood & Gold Outer Frame + 3D Crimson/Gold Ribbon Header +
       Warm Cream Parchment Board + Tactile Sub-Cards)
   ========================================================================== */
.panel-scrim.show,
.overlay:not(#dsc-splash) {
  background: rgba(7, 42, 72, 0.62) !important;
  backdrop-filter: blur(6px) !important;
}

.float-panel,
.dialog,
#v224-fate-decision .v224-decision-card {
  background: linear-gradient(180deg, var(--cm-parchment-top) 0%, var(--cm-parchment-mid) 58%, var(--cm-parchment-bot) 100%) !important;
  color: var(--cm-ink-dark) !important;
  border: 6px solid #f59e0b !important;
  outline: 3.5px solid #451a03 !important;
  border-radius: 30px !important;
  padding: 20px 22px 24px !important;
  box-shadow:
    inset 0 4px 0 #ffffff,
    inset 0 0 0 5px #b45309,
    0 12px 0 #451a03,
    0 26px 60px rgba(0, 18, 36, 0.68) !important;
}

/* 3D Crimson & Gold Ribbon Header Banner inside Popups */
.panel-head,
.v224-decision-head {
  position: relative !important;
  background: linear-gradient(180deg, #ff6b4a 0%, #e11d48 52%, #9f1239 100%) !important;
  border: 3px solid #fde047 !important;
  outline: 2px solid #5c1404 !important;
  border-radius: 20px !important;
  padding: 10px 16px !important;
  margin: -6px -4px 16px !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.55),
    0 6px 0 #6b0f1a,
    0 10px 18px rgba(67, 28, 5, 0.32) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.dialog > h2:first-child {
  background: linear-gradient(180deg, #ff6b4a 0%, #e11d48 52%, #9f1239 100%) !important;
  border: 3px solid #fde047 !important;
  outline: 2px solid #5c1404 !important;
  border-radius: 20px !important;
  padding: 10px 18px !important;
  margin: -6px -4px 12px !important;
  text-align: center !important;
  color: #fffbeb !important;
  font-size: clamp(20px, 2.4vw, 26px) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.55),
    0 6px 0 #6b0f1a,
    0 10px 18px rgba(67, 28, 5, 0.32) !important;
}

.panel-head h2,
.v224-decision-head b {
  color: #fffbeb !important;
  font-size: clamp(20px, 2.3vw, 26px) !important;
  margin: 0 !important;
}

/* 3D Glossy Red Close Button */
.close-panel,
#v224-fate-no {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #ff857a 0%, #dc2626 52%, #991b1b 100%) !important;
  background-clip: padding-box !important;
  border: 2.5px solid #fde047 !important;
  outline: none !important;
  color: #ffffff !important;
  font-family: var(--cm-font-display) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -3px 0 rgba(92, 11, 11, 0.55),
    0 3px 0 #3b1905,
    0 6px 12px rgba(0, 0, 0, 0.35) !important;
}
.close-panel:hover,
#v224-fate-no:hover {
  transform: scale(1.06) !important;
  filter: brightness(1.08) !important;
}

/* Readable dark-brown typography inside warm parchment popups */
.float-panel p,
.dialog p,
.float-panel .tiny,
.dialog .tiny,
.float-panel .muted,
.dialog .muted,
.local-note,
.collection-intro,
.v224-decision-description,
.v224-prompt {
  color: #4a2106 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.collection-summary {
  color: #9a3412 !important;
  font-family: var(--cm-font-display) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  background: rgba(254, 240, 138, 0.75);
  border: 2px solid #f59e0b;
  border-radius: 14px;
  padding: 8px 14px;
}

/* 10. TACTILE 2.5D CARDS INSIDE POPUPS (.building, .metric, .entry, .box, .collection-set) */
.building,
.metric,
.entry,
.box,
.collection-set,
.collection-mini,
.collection-reward {
  background: linear-gradient(180deg, #ffffff 0%, #fff4d6 100%) !important;
  border: 2.5px solid #d9822b !important;
  border-radius: 18px !important;
  padding: 12px 15px !important;
  margin: 9px 0 !important;
  color: var(--cm-ink-dark) !important;
  box-shadow:
    inset 0 2px 0 #ffffff,
    0 5px 0 #b86614,
    0 8px 16px rgba(67, 28, 5, 0.14) !important;
}

.building b,
.metric span,
.entry b,
.collection-set strong,
.collection-mini strong {
  color: #431c05 !important;
  font-family: var(--cm-font-display) !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.building .between > span {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  color: #451a03 !important;
  font-family: var(--cm-font-display) !important;
  font-weight: 800 !important;
  padding: 3px 12px;
  border-radius: 999px;
  border: 2px solid #b45309;
  box-shadow: 0 2px 0 #78350f;
}

.metric strong {
  color: #b45309 !important;
  font-family: var(--cm-font-display) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.rate {
  color: #15803d !important;
  font-weight: 800 !important;
}

.collection-set.done,
.collection-mini.found {
  background: linear-gradient(180deg, #fef9c3 0%, #fde047 100%) !important;
  border-color: #ca8a04 !important;
}

.collection-progress {
  height: 10px !important;
  background: #e2c08d !important;
  border-radius: 999px !important;
  border: 1px solid #9a5219 !important;
  overflow: hidden !important;
}
.collection-progress i {
  background: linear-gradient(90deg, #22c55e, #4ade80) !important;
}

/* 11. GLOSSY 3D CANDY BUTTONS INSIDE POPUPS & DIALOGS (Zero Color Bleed) */
.float-panel button:not(.close-panel):not(.fate-card):not(.fate-locked):not(.collection-set):not(.v224-direction):not(.primary):not([data-build]):not(#giftcode-btn):not(.cm-gold-btn):not(.cm-green-btn),
.dialog button:not([aria-label="Quay lại"]):not(.payment-choice):not(.cm-quick-account-btn):not(.cm-pack-card):not(.cm-code-chip):not(.cm-gold-btn):not(.cm-green-btn):not(.close-panel):not(.primary):not(#create):not(#plot-confirm):not(#keydone):not(#helpc):not(#milestone-continue):not(#cm-giftcode-submit),
#v224-fate-decision button:not([aria-label="Quay lại"]):not(.primary):not(#v224-fate-yes) {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 55%, #0369a1 100%) !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
  color: #ffffff !important;
  border: 2.5px solid #fde047 !important;
  outline: none !important;
  border-radius: 16px !important;
  padding: 9px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  line-height: 1.2 !important;
  font-family: var(--cm-font-display) !important;
  font-weight: 800 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 1.1px #082f49;
  text-shadow: 0 2px 0 #082f49 !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.6),
    inset 0 -4px 0 rgba(8, 47, 73, 0.48),
    0 3px 0 #3b1905,
    0 6px 12px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.1s ease, filter 0.1s ease !important;
}

button.primary,
.cm-green-btn,
#create,
#plot-confirm,
#v224-fate-yes,
#buildings button[data-build],
#offer,
#again,
#keydone,
#helpc,
#milestone-continue,
#start-flood,
#cm-giftcode-submit {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 52%, #15803d 100%) !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
  color: #ffffff !important;
  border: 2.5px solid #fde047 !important;
  outline: none !important;
  border-radius: 18px !important;
  padding: 10px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  line-height: 1.2 !important;
  font-family: var(--cm-font-display) !important;
  font-weight: 800 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 1.2px #0f3f22 !important;
  text-shadow: 0 2px 0 #0f3f22, 0 4px 6px rgba(0, 0, 0, 0.35) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.68),
    inset 0 -4px 0 rgba(15, 63, 34, 0.5),
    0 3px 0 #3b1905,
    0 8px 16px rgba(0, 0, 0, 0.28) !important;
}

#giftcode-btn,
.cm-gold-btn {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 52%, #b45309 100%) !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
  color: #ffffff !important;
  border: 2.5px solid #fef08a !important;
  outline: none !important;
  border-radius: 18px !important;
  padding: 10px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  line-height: 1.2 !important;
  font-family: var(--cm-font-display) !important;
  font-weight: 800 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 1.2px #451a03 !important;
  text-shadow: 0 2px 0 #451a03, 0 4px 6px rgba(0, 0, 0, 0.35) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.68),
    inset 0 -4px 0 rgba(69, 26, 3, 0.48),
    0 3px 0 #3b1905,
    0 8px 16px rgba(0, 0, 0, 0.28) !important;
}

/* Crisp Stone 2.5D Disabled Button State (No muddy green+blue bleed) */
#buildings button[data-build]:disabled,
button:disabled:not(.payment-choice) {
  background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 55%, #64748b 100%) !important;
  background-clip: padding-box !important;
  color: #f8fafc !important;
  border: 2.5px solid #e2e8f0 !important;
  outline: none !important;
  opacity: 0.9 !important;
  -webkit-text-stroke: 1px #334155 !important;
  text-shadow: 0 2px 0 #334155 !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(51, 65, 85, 0.45),
    0 3px 0 #334155 !important;
}

#panel-collection .bronc3-collection-filter button.active,
.nav button:hover {
  background: linear-gradient(180deg, #fde047 0%, #eab308 55%, #ca8a04 100%) !important;
  background-clip: padding-box !important;
  color: #451a03 !important;
  border-color: #fef9c3 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.75),
    inset 0 -3px 0 rgba(113, 63, 18, 0.4),
    0 3px 0 #451a03 !important;
}

/* Text inputs inside Auth & Social Popups (exclude checkboxes, radios, range sliders, file inputs) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
  background: #ffffff !important;
  color: #3b1905 !important;
  border: 2.5px solid #d97706 !important;
  border-radius: 14px !important;
  padding: 11px 14px !important;
  font-weight: 800 !important;
  box-shadow: inset 0 2px 5px rgba(67, 28, 5, 0.12) !important;
}
input[type="checkbox"],
input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  vertical-align: middle !important;
  accent-color: #16a34a !important;
  cursor: pointer !important;
}
input[type="range"] {
  width: 100% !important;
  padding: 4px 0 !important;
  margin: 6px 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  accent-color: #f59e0b !important;
}
input::placeholder {
  color: #9a6b47 !important;
  font-weight: 700 !important;
}

/* Auth Dialog responsive sizing */
#auth .dialog {
  width: min(500px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  padding: 18px 20px 22px !important;
  gap: 10px !important;
}

/* 12. 1-CLICK QUICK RESUME BOX ON AUTH DIALOG */
.cm-quick-resume-box {
  background: linear-gradient(180deg, #fffdf5 0%, #f9e3b0 100%) !important;
  background-clip: padding-box !important;
  border: 2.5px solid #d97706 !important;
  border-radius: 20px !important;
  padding: 10px 12px 12px !important;
  margin: 2px 0 6px !important;
  box-shadow:
    inset 0 2px 0 #ffffff,
    0 4px 0 #92400e !important;
}
.cm-quick-account-list {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}
.cm-quick-account-btn {
  width: 100%;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 55%, #15803d 100%) !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
  border: 2.5px solid #fde047 !important;
  outline: none !important;
  border-radius: 16px !important;
  padding: 10px 14px !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.6),
    inset 0 -4px 0 rgba(15, 63, 34, 0.45),
    0 3px 0 #3b1905,
    0 6px 12px rgba(0, 0, 0, 0.22) !important;
}
.cm-quick-account-btn small {
  display: block;
  color: #ecfdf5 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-top: 2px;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}
.cm-quick-account-btn > span {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  background-clip: padding-box;
  color: #451a03 !important;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  font-family: var(--cm-font-display);
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 0 #78350f;
}

/* 13. FATE SHRINE POPUP (#panel-fate) & SURVIVAL FORECAST (#v224-fate-decision) */
.fate-top {
  background: linear-gradient(180deg, #78350f 0%, #451a03 100%);
  color: #fef08a !important;
  border: 2px solid #f59e0b;
  border-radius: 14px;
  padding: 7px 14px !important;
  margin-bottom: 6px;
  font-weight: 800;
}
.fate-mini-resources span {
  background: linear-gradient(180deg, #ffffff 0%, #fde68a 100%) !important;
  color: #451a03 !important;
  border: 2px solid #d97706 !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 0 #b45309;
}
.fate-intro {
  color: #5c2804 !important;
  font-family: var(--cm-font-display) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* Locked 3rd Seal Card */
#panel-fate .card.locked {
  background: linear-gradient(160deg, #7e22ce 0%, #4c1d95 55%, #2e1065 100%) !important;
  border: 4px solid #fde047 !important;
  border-radius: 18px !important;
  color: #fef08a !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.45),
    0 8px 0 #1e0942,
    0 14px 24px rgba(0, 0, 0, 0.4) !important;
  padding: 14px !important;
  text-align: center !important;
  align-items: center !important;
}
#panel-fate .card.locked span {
  color: #f3e8ff !important;
  font-weight: 700 !important;
}
#panel-fate .card.locked strong {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid #fef08a;
  box-shadow: 0 3px 0 #14532d;
}

/* Fate Detail & Direction A/B Choice Buttons */
#panel-fate .fate-detail-title h2 {
  color: #7c2d12 !important;
  font-family: var(--cm-font-display) !important;
  font-size: clamp(22px, 2.3vw, 30px) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 0 #ffffff !important;
}
#panel-fate .fate-detail-title p,
#panel-fate .fate-target {
  color: #431c05 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
#panel-fate .rarity {
  display: inline-block;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  color: #ffffff !important;
  border: 2px solid #fde047;
  border-radius: 999px;
  padding: 3px 12px;
  font-weight: 800;
}

#panel-fate .v224-direction {
  background: linear-gradient(180deg, #ffffff 0%, #fef0c7 100%) !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
  border: 3px solid #d97706 !important;
  outline: none !important;
  border-radius: 20px !important;
  padding: 14px !important;
  color: #431c05 !important;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -3px 0 rgba(180, 83, 9, 0.25),
    0 4px 0 #92400e,
    0 8px 16px rgba(67, 28, 5, 0.18) !important;
}
#panel-fate .v224-direction:nth-child(2) {
  background: linear-gradient(180deg, #ffffff 0%, #fde68a 100%) !important;
  border-color: #b45309 !important;
}
#panel-fate .v224-direction b {
  color: #fffbeb !important;
  background: linear-gradient(180deg, #ff6b4a 0%, #e11d48 100%);
  background-clip: padding-box;
  padding: 3px 14px;
  border-radius: 999px;
  border: 2px solid #fde047;
  font-size: 17px !important;
}
#panel-fate .v224-direction small {
  color: #3b1905 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
#panel-fate .v224-direction span {
  color: #b45309 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Survival Forecast Table (#v224-fate-decision) */
#v224-fate-decision .v224-impact-grid {
  background: #fffdf7 !important;
  border: 2.5px solid #d97706 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 0 #b45309 !important;
}
#v224-fate-decision .v224-impact-header {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  padding: 8px 10px !important;
  font-weight: 900 !important;
}
#v224-fate-decision .v224-impact-row {
  background: #fffdf7 !important;
  color: #3b1905 !important;
  border-bottom: 1px solid #f3d79b !important;
  padding: 8px 10px !important;
  font-weight: 800 !important;
}
#v224-fate-decision .v224-impact-row:nth-child(even) {
  background: #fef6e0 !important;
}
#v224-fate-decision .v224-impact-row .loss {
  color: #dc2626 !important;
  font-weight: 900 !important;
}
#v224-fate-decision .v224-impact-row .gain {
  color: #16a34a !important;
  font-weight: 900 !important;
}
.v224-decision-warning {
  background: #fef3c7;
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 8px 12px;
  color: #92400e !important;
  font-weight: 800 !important;
}

/* 14. BUILDING UPGRADE MODAL (#plot-menu) WITH SPRITE PREVIEW */
.dialog:has(#plot-info) {
  width: min(520px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
}
#plot-info {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
}
.build-preview {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.build-preview b {
  color: #9a3412 !important;
  font-family: var(--cm-font-display) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
.cm-build-sprite-header {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fde68a 100%);
  border: 2.5px solid #d97706;
  border-radius: 18px;
  padding: 10px 14px;
  margin-bottom: 4px;
  box-shadow: 0 4px 0 #b45309;
}
.cm-build-sprite-thumb {
  width: 68px !important;
  height: 68px !important;
  max-width: 68px !important;
  max-height: 68px !important;
  border-radius: 14px;
  background: radial-gradient(circle, #fef9c3 0%, #f59e0b 100%);
  border: 2px solid #b45309;
  object-fit: contain;
  flex-shrink: 0;
}
.cm-build-sprite-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cm-build-sprite-meta > b {
  font-size: 17px !important;
  color: #7c2d12 !important;
}
.cm-build-sprite-meta > p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}
.payment-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 6px 0 !important;
  flex: 0 0 auto !important;
}
.payment-choice,
.payment-choice.v224-pay-button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 66px !important;
  height: auto !important;
  padding: 10px 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fff3d1 100%) !important;
  background-clip: padding-box !important;
  border: 2.5px solid #d97706 !important;
  outline: none !important;
  border-radius: 16px !important;
  color: #3b1905 !important;
  text-align: left !important;
  box-shadow:
    inset 0 2px 0 #ffffff,
    0 4px 0 #b45309 !important;
}
.payment-choice.disabled,
.payment-choice.v224-pay-button:disabled {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
  border-color: #94a3b8 !important;
  box-shadow: inset 0 2px 0 #ffffff, 0 3px 0 #64748b !important;
  opacity: 0.78 !important;
}
.payment-choice span {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.payment-choice span b {
  color: #9a3412 !important;
  font-size: 15px !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
.payment-choice span small {
  color: #5c2804 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
.payment-choice .v224-pay-arrow {
  color: #d97706 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

/* 15. ISLAND MAPPER PANEL (#bronc3-map-toggle & #bronc3-map-panel) IN 2.5D COIN MASTER STYLE */
#bronc3-map-toggle {
  position: fixed !important;
  right: calc(14px + env(safe-area-inset-right)) !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  z-index: 12 !important;
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 55%, #92400e 100%) !important;
  background-clip: padding-box !important;
  color: #ffffff !important;
  border: 2.5px solid #fef08a !important;
  outline: none !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  font-family: var(--cm-font-display) !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 0 rgba(69, 26, 3, 0.45),
    0 3px 0 #3b1905,
    0 8px 16px rgba(0, 0, 0, 0.4) !important;
}

#bronc3-map-panel {
  background: linear-gradient(180deg, #fffdf7 0%, #fae8c3 60%, #f3d69c 100%) !important;
  color: #3b1905 !important;
  border: 5px solid #f59e0b !important;
  outline: 3px solid #451a03 !important;
  border-radius: 24px !important;
  padding: 16px !important;
  box-shadow:
    inset 0 3px 0 #ffffff,
    inset 0 0 0 4px #b45309,
    0 10px 0 #451a03,
    0 22px 45px rgba(0, 0, 0, 0.55) !important;
}
#bronc3-map-panel strong {
  display: block;
  background: linear-gradient(180deg, #ff6b4a 0%, #e11d48 55%, #9f1239 100%);
  color: #fffbeb !important;
  border: 2.5px solid #fde047;
  border-radius: 14px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-family: var(--cm-font-display) !important;
  font-size: 16px !important;
  box-shadow: 0 4px 0 #6b0f1a;
}
#bronc3-map-panel p {
  color: #4a2106 !important;
  font-weight: 700 !important;
}
#bronc3-map-panel button {
  background: linear-gradient(180deg, #ffffff 0%, #fde68a 100%) !important;
  color: #451a03 !important;
  border: 2px solid #d97706 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 0 #b45309 !important;
}
#bronc3-map-panel input {
  background: #ffffff !important;
  color: #3b1905 !important;
  border: 2px solid #d97706 !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
}

/* 16. TABLES (LEADERBOARD) IN WARM PARCHMENT POPUPS */
table th {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff !important;
  font-family: var(--cm-font-display);
  padding: 9px 10px !important;
  border-bottom: 2px solid #92400e !important;
}
table td {
  color: #3b1905 !important;
  font-weight: 800 !important;
  border-bottom: 1px solid #e7c589 !important;
  padding: 9px 10px !important;
}
table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.55);
}

/* Toast notification */
#toast {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%) !important;
  color: #3b1905 !important;
  border: 3px solid #ffffff !important;
  outline: 2px solid #78350f !important;
  border-radius: 999px !important;
  font-family: var(--cm-font-display) !important;
  font-weight: 800 !important;
  padding: 10px 22px !important;
  box-shadow: 0 6px 0 #5c2804, 0 12px 24px rgba(0, 0, 0, 0.45) !important;
}

/* ==========================================================================
   17. SINGLE-ROW MOBILE RESOURCE BAR & 2.5D RESOURCE DESCRIPTION TEXTBOX
   ========================================================================== */
@media (max-width: 899px) {
  #hudresources,
  #hudresources.resource-bar,
  #hudresources.bronc3-handoff-resources {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #hudresources .resource-chip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 2px 4px !important;
    gap: 3px !important;
    font-size: clamp(10.5px, 2.7vw, 13px) !important;
    border-width: 2px !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #hudresources .resource-chip .bronc3-resource-symbol {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  #hudresources .resource-chip b {
    font-size: clamp(11px, 2.85vw, 13.5px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .fate-strip,
  #fatehint {
    top: var(--bronc3-fate-top, calc(96px + env(safe-area-inset-top))) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 5px 14px !important;
    font-size: 12px !important;
  }
}

/* 2.5D Resource Description Textbox Popover (#cm-resource-textbox) */
#cm-resource-textbox {
  position: fixed;
  z-index: 420;
  top: calc(102px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(390px, calc(100vw - 20px));
  background: linear-gradient(180deg, #fffdf7 0%, #fcefca 60%, #f3d79b 100%);
  color: #3b1905;
  border: 4px solid #f59e0b;
  outline: 2.5px solid #451a03;
  border-radius: 22px;
  padding: 12px 15px;
  box-shadow:
    inset 0 3px 0 #ffffff,
    inset 0 0 0 3px #b45309,
    0 8px 0 #451a03,
    0 18px 38px rgba(0, 18, 36, 0.58);
  pointer-events: auto;
  animation: cm-pop-bounce 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#cm-resource-textbox[hidden] {
  display: none !important;
}
.cm-res-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.cm-res-box-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--cm-font-display);
  font-size: 17px;
  font-weight: 900;
  color: #7c2d12;
}
.cm-res-box-qty {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  color: #ffffff;
  font-family: var(--cm-font-display);
  font-weight: 900;
  font-size: 14px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 2px solid #fef08a;
  box-shadow: 0 2px 0 #14532d;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.cm-res-box-close {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #ff857a 0%, #dc2626 100%) !important;
  border: 2px solid #fde047 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 0 #451a03 !important;
}
.cm-res-box-rate {
  font-size: 12.5px;
  font-weight: 800;
  color: #15803d;
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px solid #d97706;
  border-radius: 10px;
  padding: 4px 10px;
  margin-bottom: 6px;
}
.cm-res-box-desc {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.38;
  color: #4a2106 !important;
  margin: 0 !important;
}

/* ==========================================================================
   18. HIGH-CONTRAST 2.5D INTRO PLAYBAR & TUTORIAL BANNERS (Fixes Ảnh 2)
   ========================================================================== */
#intro-playbar,
#tutorial-hint {
  background: linear-gradient(180deg, #fffdf7 0%, #fcefca 58%, #f3d79b 100%) !important;
  color: #3b1905 !important;
  border: 4.5px solid #f59e0b !important;
  outline: 3px solid #451a03 !important;
  border-radius: 24px !important;
  padding: 14px 18px 16px !important;
  box-shadow:
    inset 0 3px 0 #ffffff,
    inset 0 0 0 3px #b45309,
    0 9px 0 #451a03,
    0 20px 44px rgba(0, 18, 36, 0.62) !important;
  text-align: center !important;
  z-index: 42 !important;
}

#intro-playbar strong,
#tutorial-hint > b:first-child {
  display: inline-block !important;
  background: linear-gradient(180deg, #ff6b4a 0%, #e11d48 55%, #9f1239 100%) !important;
  color: #fffbeb !important;
  border: 2.5px solid #fde047 !important;
  border-radius: 999px !important;
  padding: 4px 16px !important;
  margin-bottom: 6px !important;
  font-family: var(--cm-font-display) !important;
  font-size: clamp(14px, 2.2vw, 17px) !important;
  font-weight: 900 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 1px #451a03 !important;
  text-shadow: 0 2px 0 #451a03 !important;
  box-shadow: 0 3px 0 #6b0f1a !important;
}

#intro-playbar p,
#tutorial-hint p {
  color: #3b1905 !important;
  font-size: clamp(13.5px, 2vw, 15.5px) !important;
  font-weight: 800 !important;
  line-height: 1.42 !important;
  margin: 6px 0 10px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  -webkit-text-stroke: 0 !important;
}

#intro-playbar p b,
#tutorial-hint p b {
  color: #b45309 !important;
  font-weight: 900 !important;
}

#intro-playbar button,
#start-flood,
#tutorial-hint button {
  margin-top: 6px !important;
  min-height: 44px !important;
  padding: 9px 22px !important;
  font-size: 15px !important;
}

.super-intro .dialog {
  background: linear-gradient(180deg, #fffdf7 0%, #fcefca 58%, #f3d79b 100%) !important;
  color: #3b1905 !important;
  overflow: hidden !important;
}
.super-intro .dialog small {
  display: inline-block;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  color: #ffffff !important;
  font-weight: 900;
  padding: 4px 14px;
  border-radius: 999px;
  border: 2px solid #fde047;
  margin: 0 auto 4px;
}

/* ==========================================================================
   19. FATE CARD SELECTION & DETAIL VIEW — 1 SINGLE FRAME, ZERO OVERLAP (Fixes Ảnh 3)
   ========================================================================== */
#panel-fate,
#panel-fate.open {
  overflow: hidden !important;
  width: min(860px, calc(100vw - 20px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 20px) !important;
  padding: 16px 18px 18px !important;
  display: none;
}
#panel-fate.open {
  display: flex !important;
  flex-direction: column !important;
}
#panel-fate .panel-head {
  margin: -4px -2px 10px !important;
  padding: 8px 14px !important;
  flex-shrink: 0 !important;
}
#panel-fate #play {
  overflow: hidden !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
#panel-fate .fate-top {
  padding: 5px 12px !important;
  margin-bottom: 2px !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}
#panel-fate .fate-mini-resources {
  gap: 4px !important;
  padding: 2px 0 !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
#panel-fate .fate-mini-resources span {
  padding: 3px 8px !important;
  font-size: clamp(10.5px, 1.8vw, 12px) !important;
  white-space: nowrap !important;
  flex: 1 1 0 !important;
  text-align: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Selected Card Detail View (.fate-detail.v224-choice-view) — Unified on PC & Mobile */
#panel-fate .fate-detail,
#panel-fate .fate-detail.v224-choice-view,
#panel-fate .fate-detail.v241-detail-layout {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#panel-fate #fate-back {
  align-self: flex-start !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 4px 14px !important;
  font-size: 13px !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* 2-Column Card Showcase Box (.fate-detail-title) */
#panel-fate .fate-detail .fate-detail-title,
#panel-fate .fate-detail.v241-detail-layout .fate-detail-title {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 4px 14px !important;
  align-items: center !important;
  text-align: left !important;
  background: linear-gradient(180deg, #fffdf7 0%, #fef0c7 100%) !important;
  border: 2.5px solid #d97706 !important;
  border-radius: 18px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  box-shadow:
    inset 0 2px 0 #ffffff,
    0 4px 0 #b45309 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

#panel-fate .fate-detail .bronc3-card-detail-art,
#panel-fate .fate-detail.v241-detail-layout .bronc3-card-detail-art {
  grid-column: 1 !important;
  grid-row: 1 / 5 !important;
  width: clamp(92px, 14.5vh, 134px) !important;
  max-width: 134px !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  max-height: 178px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  border: 2px solid #d97706 !important;
  box-shadow: 0 4px 10px rgba(67, 28, 5, 0.28) !important;
  flex-shrink: 0 !important;
}

/* Hide duplicate floating title inside the small detail art thumbnail so it stays clean */
#panel-fate .fate-detail .bronc3-card-detail-art .bronc3-card-title {
  font-size: clamp(9px, 1.8cqw, 12px) !important;
}

#panel-fate .fate-detail .fate-detail-title > .rarity {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  width: fit-content !important;
  padding: 2px 10px !important;
  font-size: 11.5px !important;
  margin: 0 !important;
}

#panel-fate .fate-detail .fate-detail-title > h2 {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: clamp(17px, 2.2vw, 23px) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  color: #7c2d12 !important;
}

#panel-fate .fate-detail .fate-detail-title > p {
  grid-column: 2 !important;
  grid-row: 3 !important;
  font-size: clamp(12px, 1.55vw, 14px) !important;
  line-height: 1.32 !important;
  margin: 0 !important;
  color: #431c05 !important;
  max-height: none !important;
  overflow: visible !important;
}

#panel-fate .fate-detail .fate-detail-title > .fate-target {
  grid-column: 2 !important;
  grid-row: 4 !important;
  font-size: 12.5px !important;
  margin: 2px 0 0 !important;
  background: rgba(254, 240, 138, 0.75);
  border: 1.5px solid #f59e0b;
  border-radius: 999px;
  padding: 2px 10px;
  width: fit-content;
}

#panel-fate .v224-prompt {
  font-size: 12.5px !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  flex-shrink: 0 !important;
}

/* Side-by-Side HƯỚNG A and HƯỚNG B Choice Cards on BOTH PC and Mobile */
#panel-fate .v224-directions,
#panel-fate .fate-detail.v241-detail-layout .v224-directions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 108px !important;
  max-height: 170px !important;
  align-items: stretch !important;
}

#panel-fate .v224-direction {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  padding: 10px 10px !important;
  border-radius: 18px !important;
  min-height: 0 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, filter 0.12s ease !important;
}
#panel-fate .v224-direction:hover {
  transform: translateY(-2px) scale(1.01) !important;
  filter: brightness(1.04) !important;
}
#panel-fate .v224-direction b {
  font-size: clamp(13.5px, 2vw, 16px) !important;
  padding: 3px 12px !important;
  flex-shrink: 0 !important;
}
#panel-fate .v224-direction:nth-child(2) b {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
}
#panel-fate .v224-direction small {
  font-size: clamp(12px, 1.8vw, 14.5px) !important;
  line-height: 1.28 !important;
  color: #3b1905 !important;
  font-weight: 800 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#panel-fate .v224-direction span {
  font-size: 11.5px !important;
  background: rgba(254, 240, 138, 0.85);
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid #d97706;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   20. DIAMOND SHOP MODAL & GIFTCODE MODAL (Fixes Ảnh 4)
   ========================================================================== */
#cm-diamond-shop-modal:not(.hide),
#cm-giftcode-modal:not(.hide) {
  z-index: 650 !important;
}

.cm-modal-dialog {
  width: min(540px, calc(100vw - 20px)) !important;
  max-height: calc(100dvh - 20px) !important;
  overflow: hidden !important;
  padding: 18px 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.cm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, #ff6b4a 0%, #e11d48 52%, #9f1239 100%);
  border: 3px solid #fde047;
  outline: 2px solid #5c1404;
  border-radius: 20px;
  padding: 9px 14px;
  margin: -4px -2px 2px;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.55),
    0 5px 0 #6b0f1a;
}

.cm-modal-head h2 {
  margin: 0 !important;
  color: #fffbeb !important;
  font-family: var(--cm-font-display) !important;
  font-size: clamp(18px, 2.3vw, 23px) !important;
  font-weight: 900 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 1.3px #3d1604;
  text-shadow: 0 2px 0 #3d1604 !important;
}

.cm-wallet-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(180deg, #581c87 0%, #3b0764 100%);
  color: #fef08a;
  border: 2.5px solid #fde047;
  border-radius: 16px;
  padding: 8px 14px;
  font-family: var(--cm-font-display);
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 3px 0 #2e1002;
}

.cm-pack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cm-pack-card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fef0c7 100%) !important;
  border: 2.5px solid #d97706 !important;
  border-radius: 18px !important;
  padding: 10px 8px !important;
  color: #3b1905 !important;
  text-align: center !important;
  box-shadow:
    inset 0 2px 0 #ffffff,
    0 4px 0 #b45309 !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, border-color 0.12s ease !important;
}
.cm-pack-card:hover,
.cm-pack-card.selected {
  transform: translateY(-2px);
  border-color: #16a34a !important;
  background: linear-gradient(180deg, #ffffff 0%, #dcfce7 100%) !important;
}
.cm-pack-badge {
  background: linear-gradient(180deg, #7e22ce 0%, #581c87 100%);
  color: #fef08a;
  font-size: 10.5px;
  font-weight: 900;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1.5px solid #fde047;
}
.cm-pack-icon {
  font-size: 26px;
  line-height: 1.1;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.22));
}
.cm-pack-amount {
  font-family: var(--cm-font-display);
  font-size: 16px;
  font-weight: 900;
  color: #6b21a8;
}
.cm-pack-bonus {
  font-size: 11px;
  font-weight: 800;
  color: #15803d;
}
.cm-pack-cta {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  color: #ffffff;
  font-family: var(--cm-font-display);
  font-weight: 900;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 2px solid #fde047;
  box-shadow: 0 2px 0 #14532d;
  width: 100%;
}

.cm-dev-contact-box {
  background: linear-gradient(180deg, #fef9c3 0%, #fde68a 100%);
  border: 2.5px solid #d97706;
  border-radius: 18px;
  padding: 10px 12px;
  text-align: center;
  box-shadow: inset 0 2px 0 #ffffff, 0 4px 0 #b45309;
}
.cm-dev-contact-box b {
  display: block;
  font-family: var(--cm-font-display);
  font-size: 15px;
  color: #9a3412;
  margin-bottom: 3px;
}
.cm-dev-contact-box p {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  color: #3b1905 !important;
  margin: 0 0 8px !important;
}
.cm-dev-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.cm-dev-actions button {
  flex: 1 1 140px;
  min-height: 38px !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
}

/* Giftcode quick chips & feedback box */
.cm-code-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.cm-code-chip {
  background: linear-gradient(180deg, #ffffff 0%, #fef0c7 100%) !important;
  color: #7c2d12 !important;
  border: 2px solid #d97706 !important;
  border-radius: 999px !important;
  padding: 4px 11px !important;
  min-height: 30px !important;
  font-family: var(--cm-font-display) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 0 #b45309 !important;
  cursor: pointer !important;
}
.cm-code-chip:hover {
  background: linear-gradient(180deg, #fef08a 0%, #fbbf24 100%) !important;
}
.cm-giftcode-status {
  background: #fffdf7;
  border: 2px solid #d97706;
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 800;
  color: #3b1905;
  text-align: center;
}
.cm-giftcode-status.success {
  background: #dcfce7;
  border-color: #16a34a;
  color: #14532d;
}
.cm-giftcode-status.error {
  background: #fee2e2;
  border-color: #dc2626;
  color: #7f1d1d;
}

/* ==========================================================================
   21. SINGLE-FRAME DISASTER POPUPS & JUICY 2.5D COIN MASTER EFFECTS
   ========================================================================== */
.disaster-cinema {
  background:
    radial-gradient(circle at 50% 24%, rgba(254, 240, 138, 0.35), transparent 46%),
    linear-gradient(180deg, rgba(14, 116, 144, 0.88) 0%, rgba(12, 74, 110, 0.94) 100%) !important;
  backdrop-filter: blur(8px) !important;
  overflow: hidden !important;
}

.disaster-cinema .cinema-orb {
  top: 7% !important;
  font-size: clamp(54px, 11vh, 92px) !important;
  z-index: 2 !important;
}

.disaster-cinema .cinema-story {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: min(640px, calc(100vw - 20px)) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 0%, #ffffff 0%, #fff7e2 48%, #f8e5ba 100%) !important;
  color: #3b1905 !important;
  border: 6px solid #f59e0b !important;
  outline: 3.5px solid #451a03 !important;
  border-radius: 28px !important;
  padding: 16px 18px 18px !important;
  box-shadow:
    inset 0 4px 0 #ffffff,
    inset 0 0 0 4px #b45309,
    0 12px 0 #451a03,
    0 28px 65px rgba(10, 22, 42, 0.65) !important;
  animation: cm-pop-bounce 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
  z-index: 3 !important;
}

.disaster-cinema .cinema-overline {
  display: inline-block;
  background: linear-gradient(180deg, #ff6b4a 0%, #e11d48 55%, #9f1239 100%);
  color: #fffbeb !important;
  border: 2.5px solid #fde047;
  border-radius: 999px;
  padding: 4px 16px;
  font-family: var(--cm-font-display) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  box-shadow: 0 3px 0 #6b0f1a;
  margin-bottom: 4px;
}

.disaster-cinema .cinema-story h2 {
  font-family: var(--cm-font-display) !important;
  font-size: clamp(20px, 3.6vw, 28px) !important;
  color: #7c2d12 !important;
  text-shadow: 0 2px 0 #ffffff !important;
  -webkit-text-stroke: 0 !important;
  margin: 4px 0 2px !important;
}

.disaster-cinema .cinema-story > p {
  color: #4a2106 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  margin: 4px 0 8px !important;
  text-shadow: none !important;
}

.disaster-cinema #cinema-screen video {
  max-width: 100% !important;
  max-height: 28dvh !important;
  border-radius: 16px !important;
  border: 3px solid #d97706 !important;
}

.disaster-cinema .cinema-fallback {
  background: linear-gradient(180deg, #fef9c3 0%, #fde68a 100%);
  border: 3px solid #d97706;
  border-radius: 18px;
  padding: 12px;
  margin: 8px 0 12px !important;
  font-size: 48px !important;
  color: #451a03 !important;
  box-shadow: inset 0 2px 0 #ffffff, 0 4px 0 #b45309;
}

.disaster-cinema .cinema-account {
  background: #fffdf7 !important;
  border: 2.5px solid #d97706 !important;
  border-radius: 16px !important;
  padding: 8px 10px !important;
  margin: 8px 0 12px !important;
  color: #3b1905 !important;
  box-shadow: 0 4px 0 #b45309 !important;
  overflow: hidden !important;
}

.disaster-cinema .cinema-account b {
  color: #9a3412 !important;
  font-family: var(--cm-font-display) !important;
  font-size: 15px !important;
  margin-bottom: 2px !important;
}

.disaster-cinema .cinema-account p {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #5c2804 !important;
  margin: 2px 0 6px !important;
}

.disaster-cinema .cinema-account-head {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  margin: 4px 0 2px !important;
  font-weight: 800 !important;
}

.disaster-cinema .cinema-account-line {
  color: #3b1905 !important;
  border-bottom: 1px solid #f3d79b !important;
  padding: 5px 6px !important;
  font-weight: 800 !important;
}

.disaster-cinema .cinema-account-line .loss {
  color: #dc2626 !important;
  font-weight: 900 !important;
}

.disaster-cinema .cinema-account-line .gain {
  color: #16a34a !important;
  font-weight: 900 !important;
}

.disaster-cinema .cinema-account-line strong {
  color: #7c2d12 !important;
  font-weight: 900 !important;
}

/* Survival Forecast Modal (#v224-fate-decision) — Single Frame without Scrollbars */
#v224-fate-decision .v224-decision-card {
  overflow: hidden !important;
  max-height: calc(100dvh - 18px) !important;
  padding: 14px 16px 16px !important;
  gap: 6px !important;
}
#v224-fate-decision .v224-impact-header,
#v224-fate-decision .v224-impact-row {
  padding: 6px 8px !important;
}

/* 2.5D Island Ascension / Level-Up Celebration (.dsc-ascension) */
.dsc-ascension {
  background:
    repeating-conic-gradient(from 0deg at 50% 45%, rgba(254, 240, 138, 0.22) 0deg 10deg, transparent 10deg 20deg),
    radial-gradient(circle at 50% 35%, rgba(254, 240, 138, 0.65) 0%, rgba(56, 189, 248, 0.88) 55%, rgba(2, 132, 199, 0.95) 100%) !important;
  backdrop-filter: blur(8px) !important;
  overflow: hidden !important;
}

.dsc-ascension .ascension-card {
  position: relative;
  z-index: 2;
  width: min(460px, calc(100vw - 24px));
  background: radial-gradient(circle at 50% 0%, #ffffff 0%, #fff7e2 50%, #f8e5ba 100%);
  border: 6px solid #f59e0b;
  outline: 3.5px solid #451a03;
  border-radius: 32px;
  padding: 24px 28px;
  text-align: center;
  box-shadow:
    inset 0 4px 0 #ffffff,
    inset 0 0 0 4px #b45309,
    0 12px 0 #451a03,
    0 28px 60px rgba(0, 28, 56, 0.55);
  animation: cm-pop-bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.dsc-ascension h2 {
  font-family: var(--cm-font-display) !important;
  color: #9a3412 !important;
  text-shadow: 0 2px 0 #ffffff !important;
  margin: 10px 0 6px !important;
}

.dsc-ascension p {
  font-family: var(--cm-font-display) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #ff6b4a 0%, #e11d48 100%);
  border: 2.5px solid #fde047;
  border-radius: 999px;
  display: inline-block;
  padding: 4px 20px;
  box-shadow: 0 4px 0 #881337;
}

/* 2.5D Building Upgrade Burst & Floating Celebration Effect */
.cm-fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 120;
  overflow: hidden;
}

.cm-build-burst-banner {
  position: fixed;
  left: 50%;
  top: 22%;
  transform: translate(-50%, -50%);
  z-index: 125;
  pointer-events: none;
  background: linear-gradient(180deg, #fffdf7 0%, #fef08a 55%, #f59e0b 100%);
  border: 4px solid #ffffff;
  outline: 3px solid #451a03;
  border-radius: 999px;
  padding: 10px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow:
    0 8px 0 #451a03,
    0 18px 40px rgba(0, 0, 0, 0.55);
  animation: cm-banner-fly 1.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cm-build-burst-banner strong {
  font-family: var(--cm-font-display);
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 900;
  color: #451a03;
  white-space: nowrap;
  text-shadow: 0 1px 0 #ffffff;
}

.cm-fx-particle {
  position: fixed;
  left: var(--fx-x, 50%);
  top: var(--fx-y, 50%);
  font-size: var(--fx-size, 26px);
  pointer-events: none;
  z-index: 124;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
  animation: cm-particle-burst 1.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cm-fx-ring {
  position: fixed;
  left: var(--fx-x, 50%);
  top: var(--fx-y, 50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 5px solid #fde047;
  box-shadow: 0 0 24px #f59e0b, inset 0 0 16px #fef08a;
  transform: translate(-50%, -50%) scale(0.2);
  pointer-events: none;
  z-index: 123;
  animation: cm-ring-expand 0.85s ease-out forwards;
}

#island-view .site.cm-site-upgraded-bounce .structure {
  animation: cm-structure-spring 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  filter: drop-shadow(0 0 18px #fde047) brightness(1.18) !important;
}

@keyframes cm-pop-bounce {
  0% {
    opacity: 0;
    transform: scale(0.84) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes cm-banner-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.6);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -62%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -85%) scale(0.9);
  }
}

@keyframes cm-particle-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--fx-dx, 0px)), calc(-50% + var(--fx-dy, -90px))) scale(1.25) rotate(var(--fx-rot, 180deg));
  }
}

@keyframes cm-ring-expand {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(7.5);
  }
}

@keyframes cm-structure-spring {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.22) translateY(-10px);
  }
  65% {
    transform: scale(0.95) translateY(2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* Fix #bronc3-map-panel h3, font-family, and #bronc3-map-message contrast */
#bronc3-map-panel,
#bronc3-map-panel * {
  font-family: var(--cm-font-body) !important;
}

#bronc3-map-panel h3,
#bronc3-map-panel .map-head {
  background: linear-gradient(180deg, #ff6b4a 0%, #e11d48 55%, #9f1239 100%) !important;
  color: #fffbeb !important;
  border: 2.5px solid #fde047 !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
  font-family: var(--cm-font-display) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 0 #6b0f1a !important;
}

#bronc3-map-message,
#bronc3-map-panel .map-foot {
  color: #5c2804 !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   22. TIME-SKIP SHOP, INVENTORY, & JOURNEY / COLLECTION REWARD STYLES
   ========================================================================== */
#cm-timeskip-shop-modal:not(.hide),
#cm-inventory-modal:not(.hide) {
  z-index: 660 !important;
}

.cm-wide-modal {
  width: min(670px, calc(100vw - 16px)) !important;
  max-height: calc(100dvh - 16px) !important;
  overflow: hidden !important;
  padding: 14px 16px 16px !important;
  gap: 8px !important;
}

.cm-strip-btns {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cm-mini-btn {
  min-height: 30px !important;
  height: 30px !important;
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  border-radius: 999px !important;
}

.cm-shop-subtitle {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  text-align: center !important;
  color: #4a2106 !important;
}

.cm-timeskip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cm-timeskip-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #fef0c7 100%);
  border: 2.5px solid #d97706;
  border-radius: 16px;
  padding: 8px 10px;
  color: #3b1905;
  box-shadow:
    inset 0 2px 0 #ffffff,
    0 4px 0 #b45309;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.cm-timeskip-card.owned {
  background: linear-gradient(180deg, #ffffff 0%, #dcfce7 100%);
  border-color: #16a34a;
  box-shadow:
    inset 0 2px 0 #ffffff,
    0 4px 0 #15803d;
}

.cm-timeskip-card.unaffordable {
  opacity: 0.86;
}

.cm-ts-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.cm-ts-owned {
  font-size: 11px;
  font-weight: 800;
  color: #7c2d12;
  background: rgba(254, 240, 138, 0.85);
  border: 1px solid #d97706;
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

.cm-ts-owned.has-qty {
  background: #bbf7d0;
  border-color: #16a34a;
  color: #14532d;
}

.cm-ts-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-ts-icon {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
  flex-shrink: 0;
}

.cm-ts-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}

.cm-ts-titles strong {
  font-family: var(--cm-font-display);
  font-size: 15px;
  font-weight: 900;
  color: #7c2d12;
  line-height: 1.1;
}

.cm-ts-titles small {
  font-size: 11px;
  font-weight: 700;
  color: #5c2804;
  line-height: 1.22;
}

.cm-ts-buy-btn,
.cm-ts-use-btn {
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: 12px !important;
}

.cm-shop-status {
  background: #fffdf7;
  border: 2px solid #d97706;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  color: #3b1905;
  text-align: center;
}
.cm-shop-status.success {
  background: #dcfce7;
  border-color: #16a34a;
  color: #14532d;
}
.cm-shop-status.error {
  background: #fee2e2;
  border-color: #dc2626;
  color: #7f1d1d;
}

/* Collection Set +10 KC & Journey +50 KC Reward Badges */
.cm-set-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 4px;
}

.cm-set-reward-tag,
.cm-set-reward-pill,
.cm-journey-reward-badge,
.cm-jr-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #9333ea 0%, #6b21a8 100%);
  color: #fef08a !important;
  border: 1.5px solid #fde047;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: var(--cm-font-display);
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 0 #3b0764;
  flex-shrink: 0;
}

.cm-set-reward-tag.claimed,
.collection-set.done .cm-set-reward-tag,
.collection-set.done .cm-set-reward-pill,
.cm-journey-reward-banner.completed .cm-jr-pill,
.cm-journey-reward-banner.done .cm-journey-reward-badge {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  color: #ffffff !important;
  border-color: #bbf7d0;
  box-shadow: 0 2px 0 #14532d;
}

.cm-collection-reward-pill {
  display: inline-block;
  margin-left: 6px;
  background: linear-gradient(180deg, #fef08a 0%, #fde047 100%);
  color: #451a03 !important;
  border: 1.5px solid #d97706;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
}

.cm-journey-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cm-journey-badge {
  background: #fffdf7;
  border: 2px solid #d97706;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 800;
  color: #3b1905;
}

.cm-journey-reward-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, #fef9c3 0%, #fde68a 100%) !important;
  border: 2.5px solid #d97706 !important;
  border-radius: 16px;
  padding: 10px 14px;
  margin-bottom: 10px;
  box-shadow: inset 0 2px 0 #ffffff, 0 4px 0 #b45309;
}

.cm-journey-reward-banner.completed {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%) !important;
  border-color: #16a34a !important;
  box-shadow: inset 0 2px 0 #ffffff, 0 4px 0 #15803d;
}

.cm-jr-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.cm-jr-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cm-jr-info strong {
  font-family: var(--cm-font-display);
  font-size: 13.5px;
  color: #451a03;
}

.cm-jr-info small {
  font-size: 11.5px;
  color: #5c2804;
  line-height: 1.3;
}

.cm-quest-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cm-quest-row.done,
.cm-quest-entry.done {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-color: #16a34a !important;
}

.cm-quest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.cm-quest-head span {
  font-family: var(--cm-font-display);
  font-weight: 900;
  color: #b45309;
}

.cm-quest-row.done .cm-quest-head span {
  color: #15803d;
}

.cm-quest-bar {
  height: 7px;
  background: #e7c589;
  border-radius: 999px;
  overflow: hidden;
}

.cm-quest-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 999px;
}

/* Mobile Portrait Adjustments */
@media (max-width: 720px) and (orientation: portrait) {
  #bronc3-preview-launch {
    display: none !important;
  }
  .hud-top {
    justify-content: space-between !important;
  }
  .hud-top > .hud-chip:first-child {
    min-height: 34px !important;
    padding: 3px 10px 3px 36px !important;
  }
  .hud-top > .hud-chip:first-child::before {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  #huddiamonds {
    min-height: 34px !important;
    padding: 3px 30px 3px 10px !important;
  }
  .hud-menu {
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    gap: 6px !important;
  }
  .hud-menu button {
    width: 60px !important;
    min-width: 60px !important;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 15px !important;
    font-size: 18px !important;
    padding: 4px 2px 3px !important;
  }
  .hud-menu button small {
    font-size: 8px !important;
    padding: 1px 2px !important;
    letter-spacing: -0.25px !important;
    text-overflow: clip !important;
  }
  #panel-fate.open {
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 14px) !important;
    border-radius: 24px !important;
    padding: 12px 12px 14px !important;
    overflow: hidden !important;
  }
  #panel-fate .fate-detail .bronc3-card-detail-art,
  #panel-fate .fate-detail.v241-detail-layout .bronc3-card-detail-art {
    width: clamp(82px, 23vw, 106px) !important;
    max-width: 106px !important;
    max-height: 142px !important;
  }
  #panel-fate .fate-detail .fate-detail-title {
    padding: 8px 10px !important;
    gap: 3px 10px !important;
  }
  #panel-fate .v224-directions,
  #panel-fate .fate-detail.v241-detail-layout .v224-directions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-height: 104px !important;
  }
  #panel-fate .v224-direction {
    padding: 8px 6px !important;
  }
  #auth .dialog {
    padding: 16px 14px 24px !important;
  }
  #bronc3-map-toggle {
    right: calc(8px + env(safe-area-inset-right)) !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: 11.5px !important;
  }
  #bronc3-camera-controls {
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }
  .bottom-dock {
    width: calc(100vw - 10px) !important;
    gap: 4px !important;
    padding: 5px 6px !important;
    border-radius: 20px !important;
  }
  .bottom-dock button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 6px 3px !important;
    font-size: 11px !important;
    gap: 3px !important;
  }
  .cm-timeskip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .cm-timeskip-card {
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  .cm-ts-icon {
    font-size: 22px !important;
  }
  .cm-ts-titles strong {
    font-size: 13.5px !important;
  }
  .cm-ts-titles small {
    font-size: 10px !important;
  }
  .cm-wallet-strip {
    flex-wrap: wrap;
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* ==========================================================================
   23. MOBILE LANDSCAPE MODE — MATCHES PC LAYOUT WITH ZERO ICON/BUTTON OVERLAP
   ========================================================================== */
@media (orientation: landscape) and (max-height: 560px) {
  #bronc3-preview-launch {
    display: none !important;
  }

  /* Single horizontal top HUD row just like PC */
  .hud-top {
    top: calc(6px + env(safe-area-inset-top)) !important;
    left: calc(10px + env(safe-area-inset-left)) !important;
    right: calc(10px + env(safe-area-inset-right)) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .hud-top > .hud-chip:first-child {
    min-height: 32px !important;
    padding: 3px 10px 3px 34px !important;
    flex-shrink: 0 !important;
  }
  .hud-top > .hud-chip:first-child::before {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }
  #level {
    font-size: 12.5px !important;
  }
  #connect {
    font-size: 9.5px !important;
  }

  #huddiamonds {
    min-height: 32px !important;
    padding: 3px 28px 3px 10px !important;
    font-size: 12.5px !important;
    flex-shrink: 0 !important;
  }
  #huddiamonds::after {
    width: 20px !important;
    height: 20px !important;
    font-size: 13px !important;
  }

  /* Keep all 5 resources on Row 1 on the right side of .hud-top, matching PC */
  #hudresources,
  #hudresources.resource-bar,
  #hudresources.bronc3-handoff-resources {
    order: 0 !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: calc(100vw - 290px) !important;
    margin-left: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
  }

  #hudresources .resource-chip {
    min-height: 30px !important;
    height: 30px !important;
    padding: 2px 8px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
    width: auto !important;
    flex: 0 1 auto !important;
  }
  #hudresources .resource-chip .bronc3-resource-symbol {
    width: 15px !important;
    height: 15px !important;
  }
  #hudresources .resource-chip b {
    font-size: 12px !important;
  }

  /* Fate ribbon banner at top-left below #level, matching PC */
  .fate-strip,
  #fatehint {
    top: calc(44px + env(safe-area-inset-top)) !important;
    left: calc(12px + env(safe-area-inset-left)) !important;
    transform: none !important;
    width: auto !important;
    max-width: 340px !important;
    padding: 4px 12px !important;
    font-size: 11.5px !important;
  }

  /* Right-side menu in a compact 2-column × 3-row PC medallion grid so it never overlaps top or bottom */
  .hud-menu {
    right: calc(10px + env(safe-area-inset-right)) !important;
    top: 48% !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    grid-template-columns: repeat(2, 54px) !important;
    gap: 5px !important;
  }
  .hud-menu button {
    width: 54px !important;
    min-width: 54px !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 13px !important;
    font-size: 16px !important;
    padding: 3px 2px 2px !important;
    gap: 2px !important;
  }
  .hud-menu button small {
    font-size: 7.5px !important;
    padding: 1px 2px !important;
  }

  /* Centered PC-style bottom dock */
  .bottom-dock {
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100vw - 250px) !important;
    padding: 4px 8px !important;
    gap: 5px !important;
    border-radius: 18px !important;
  }
  .bottom-dock button {
    min-width: 82px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 4px 9px !important;
    font-size: 11.5px !important;
    border-radius: 13px !important;
  }

  /* Camera & Mapper controls at bottom-left and bottom-right like PC */
  #bronc3-camera-controls {
    left: calc(10px + env(safe-area-inset-left)) !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    height: 34px !important;
    padding: 3px 6px !important;
    gap: 4px !important;
  }
  #bronc3-camera-controls button {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    font-size: 12px !important;
  }
  #bronc3-cam-level {
    font-size: 11px !important;
    min-width: 34px !important;
  }

  #bronc3-map-toggle {
    right: calc(10px + env(safe-area-inset-right)) !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
  }

  /* Compact modals & panels in landscape so they fit 100% without scrollbars */
  .float-panel.open,
  #panel-fate.open {
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(760px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: 10px 14px 12px !important;
    border-radius: 22px !important;
  }
  .float-panel:not(#panel-fate).open {
    overflow-y: auto !important;
  }
  .cm-modal-dialog,
  .cm-wide-modal {
    max-height: calc(100dvh - 10px) !important;
    padding: 10px 14px 12px !important;
    gap: 6px !important;
  }
  .cm-modal-head,
  .panel-head {
    padding: 5px 12px !important;
    margin: -2px 0 6px !important;
  }
  .cm-modal-head h2,
  .panel-head h2 {
    font-size: 17px !important;
  }
  .cm-timeskip-card {
    padding: 5px 8px !important;
    gap: 3px !important;
  }
  .cm-ts-buy-btn,
  .cm-ts-use-btn {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   24. 2.5D CARTOON DISASTER ANIMATION DIORAMA & CHECKPOINT REVIVAL BOX
   ========================================================================== */
.disaster-cinema,
.disaster-cinema.cm-cartoon-cinema-modal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  overflow: hidden !important;
  z-index: 680 !important;
}

.disaster-cinema.cm-preview-disaster-overlay {
  z-index: 695 !important;
}

.disaster-cinema .cinema-orb {
  display: none !important;
}

.disaster-cinema .cinema-story,
.disaster-cinema .cinema-story.cm-single-frame-cinema {
  width: min(650px, calc(100vw - 16px)) !important;
  max-height: calc(100dvh - 16px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 14px 16px 16px !important;
}

/* 2.5D Cartoon Animated Disaster Diorama Stage */
.cm-cartoon-disaster-stage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(180deg, #fffdf7 0%, #fef0c7 100%);
  border: 3px solid #d97706;
  border-radius: 20px;
  padding: 8px 10px 10px;
  box-shadow:
    inset 0 2px 0 #ffffff,
    0 4px 0 #b45309;
  flex-shrink: 0;
}

.cm-cartoon-stage-top {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-cartoon-scene-badge {
  background: linear-gradient(180deg, #78350f 0%, #451a03 100%);
  color: #fef08a;
  border: 2px solid #f59e0b;
  border-radius: 999px;
  padding: 3px 14px;
  font-family: var(--cm-font-display);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 2px 0 #291208;
}

.cm-cartoon-stage-viewport {
  position: relative;
  width: 100%;
  height: clamp(145px, 25dvh, 205px);
  border-radius: 16px;
  border: 3.5px solid #b45309;
  outline: 2px solid #451a03;
  overflow: hidden;
  background: #1e1b4b;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.35),
    0 4px 10px rgba(67, 28, 5, 0.25);
}

.cm-cartoon-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cm-cartoon-card-medallion {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 52px;
  height: 66px;
  border-radius: 11px;
  border: 2.5px solid #fde047;
  outline: 2px solid #451a03;
  overflow: hidden;
  background: #451a03;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
  z-index: 3;
}

.cm-cartoon-card-medallion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cm-cartoon-card-medallion span {
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-size: 15px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}

.cm-cartoon-stage-caption {
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.32 !important;
  color: #451a03 !important;
  text-align: center !important;
}

.cm-cinema-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.cm-cinema-result-subtitle {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #7c2d12 !important;
  text-align: center !important;
}

/* SVG Keyframe Animations for 2.5D Cartoon Disaster Scenes */
.cm-anim-flames-a {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: cm-flame-dance-a 0.62s ease-in-out infinite alternate;
}

.cm-anim-flames-b {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: cm-flame-dance-b 0.48s ease-in-out infinite alternate;
}

.cm-anim-smoke-1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: cm-smoke-drift 2.4s ease-in-out infinite alternate;
}

.cm-anim-smoke-2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: cm-smoke-drift 3.1s ease-in-out infinite alternate-reverse;
}

.cm-anim-embers circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: cm-ember-rise 1.4s ease-out infinite;
}
.cm-anim-embers circle:nth-child(2n) {
  animation-delay: 0.35s;
  animation-duration: 1.7s;
}
.cm-anim-embers circle:nth-child(3n) {
  animation-delay: 0.7s;
  animation-duration: 1.25s;
}

.cm-anim-wave-back {
  animation: cm-wave-bob 1.8s ease-in-out infinite alternate;
}
.cm-anim-wave-front {
  animation: cm-wave-surge 1.35s ease-in-out infinite alternate;
}
.cm-anim-lightning,
.cm-anim-lightning-2 {
  animation: cm-lightning-flash 1.5s steps(2, end) infinite;
}
.cm-anim-lightning-2 {
  animation-delay: 0.65s;
}
.cm-anim-tornado {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: cm-tree-sway 0.75s ease-in-out infinite alternate;
}
.cm-anim-tree-sway,
.cm-anim-tree-bend {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: cm-tree-sway 0.9s ease-in-out infinite alternate;
}

.cm-anim-quake-shake {
  animation: cm-quake-jitter 0.28s ease-in-out infinite alternate;
}
.cm-anim-boulder-1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: cm-boulder-bounce 0.85s ease-in-out infinite alternate;
}
.cm-anim-boulder-2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: cm-boulder-bounce 0.68s ease-in-out infinite alternate-reverse;
}

.cm-anim-ship-rock {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: cm-ship-sway 1.6s ease-in-out infinite alternate;
}

.cm-anim-beast-run {
  animation: cm-beast-charge 0.52s ease-in-out infinite alternate;
}

.cm-anim-meteor-1 {
  animation: cm-meteor-streak 1.2s ease-in infinite;
}
.cm-anim-meteor-2 {
  animation: cm-meteor-streak 1.55s ease-in 0.45s infinite;
}

.cm-anim-pulse,
.cm-anim-sun-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: cm-sun-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes cm-flame-dance-a {
  0% {
    transform: scaleY(0.92) scaleX(0.97) skewX(-3deg);
    filter: brightness(0.98);
  }
  100% {
    transform: scaleY(1.12) scaleX(1.04) skewX(4deg);
    filter: brightness(1.15);
  }
}

@keyframes cm-flame-dance-b {
  0% {
    transform: scaleY(1.08) scaleX(0.94) skewX(4deg);
  }
  100% {
    transform: scaleY(0.88) scaleX(1.06) skewX(-4deg);
  }
}

@keyframes cm-smoke-drift {
  0% {
    transform: translate(-6px, 3px) scale(0.95);
    opacity: 0.72;
  }
  100% {
    transform: translate(8px, -6px) scale(1.08);
    opacity: 0.92;
  }
}

@keyframes cm-ember-rise {
  0% {
    transform: translateY(14px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-28px) translateX(8px) scale(0.35);
    opacity: 0;
  }
}

@keyframes cm-wave-bob {
  0% {
    transform: translateX(-8px) translateY(3px);
  }
  100% {
    transform: translateX(8px) translateY(-4px);
  }
}

@keyframes cm-wave-surge {
  0% {
    transform: translateX(6px) translateY(4px) scaleY(0.95);
  }
  100% {
    transform: translateX(-10px) translateY(-5px) scaleY(1.06);
  }
}

@keyframes cm-lightning-flash {
  0%, 70%, 100% {
    opacity: 0.15;
  }
  75%, 90% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #fef08a);
  }
}

@keyframes cm-tree-sway {
  0% {
    transform: rotate(-3.5deg);
  }
  100% {
    transform: rotate(5.5deg);
  }
}

@keyframes cm-quake-jitter {
  0% {
    transform: translate(-3px, 1px);
  }
  100% {
    transform: translate(3px, -2px);
  }
}

@keyframes cm-boulder-bounce {
  0% {
    transform: translateY(0) rotate(-6deg);
  }
  100% {
    transform: translateY(-10px) rotate(8deg);
  }
}

@keyframes cm-ship-sway {
  0% {
    transform: rotate(-5deg) translateY(2px);
  }
  100% {
    transform: rotate(5deg) translateY(-4px);
  }
}

@keyframes cm-beast-charge {
  0% {
    transform: translateX(-6px) translateY(2px);
  }
  100% {
    transform: translateX(8px) translateY(-5px);
  }
}

@keyframes cm-meteor-streak {
  0% {
    transform: translate(-18px, -18px) scale(0.85);
    opacity: 0.95;
  }
  100% {
    transform: translate(22px, 20px) scale(1.1);
    opacity: 0.2;
  }
}

@keyframes cm-sun-pulse {
  0% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1.08);
  }
}

/* ==========================================================================
   25. CHECKPOINT REVIVAL BOX (Dùng Kim Cương Hồi Sinh Về Mốc Đảo 5, 10, 15...)
   ========================================================================== */
.banner,
.cm-defeat-banner {
  background: linear-gradient(180deg, #fffdf7 0%, #fef0c7 100%) !important;
  border: 2.5px solid #d97706 !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
  color: #3b1905 !important;
  box-shadow:
    inset 0 2px 0 #ffffff,
    0 4px 0 #b45309 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.banner h2,
.cm-defeat-banner h2 {
  color: #991b1b !important;
  font-family: var(--cm-font-display) !important;
  font-size: 20px !important;
  margin: 0 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 0 #ffffff !important;
}

.banner p,
.cm-defeat-banner p {
  color: #451a03 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.38 !important;
  margin: 0 !important;
}

.cm-checkpoint-revive-box {
  background: linear-gradient(180deg, #fffdf7 0%, #fef08a 52%, #fde68a 100%);
  border: 3px solid #d97706;
  outline: 2px solid #451a03;
  border-radius: 20px;
  padding: 10px 14px 12px;
  margin: 6px 0 8px;
  color: #3b1905;
  text-align: left;
  box-shadow:
    inset 0 2px 0 #ffffff,
    0 5px 0 #92400e,
    0 10px 22px rgba(67, 28, 5, 0.22);
}

.cm-cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.cm-cp-badge {
  background: linear-gradient(180deg, #7e22ce 0%, #581c87 100%);
  color: #fef08a;
  border: 2px solid #fde047;
  border-radius: 999px;
  padding: 3px 12px;
  font-family: var(--cm-font-display);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 2px 0 #3b0764;
}

.cm-cp-wallet {
  background: #ffffff;
  color: #6b21a8;
  border: 1.5px solid #d97706;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: var(--cm-font-display);
  font-size: 12px;
  font-weight: 900;
}

.cm-cp-title,
.cm-cp-desc {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: #451a03 !important;
  margin: 4px 0 6px !important;
}

.cm-cp-resources,
.cm-cp-res-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.cm-cp-resources span,
.cm-cp-res-pills span {
  background: #ffffff;
  color: #3b1905 !important;
  border: 1.5px solid #d97706;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 900;
  box-shadow: 0 2px 0 rgba(180, 83, 9, 0.25);
}

.cm-cp-revive-btn {
  width: 100%;
  min-height: 40px !important;
  font-size: 13.5px !important;
}

.cm-cp-status {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fee2e2;
  border: 1.5px solid #dc2626;
  color: #7f1d1d;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

/* ==========================================================================
   26. SOCIAL SHARE MODAL (Facebook / Messenger / Zalo + Live Island Snapshot)
   ========================================================================== */
#cm-social-share-modal .cm-share-dialog {
  width: min(560px, calc(100vw - 20px)) !important;
  max-height: calc(100dvh - 18px) !important;
  overflow: hidden !important;
  padding: 12px 15px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

.cm-share-reward-strip {
  display: block;
  text-align: center;
  line-height: 1.35;
  background: linear-gradient(180deg, #581c87 0%, #3b0764 100%);
  color: #fef08a;
  border: 2px solid #fde047;
  border-radius: 14px;
  padding: 7px 12px;
  font-family: var(--cm-font-display);
  font-size: 12.5px;
  font-weight: 800;
}

.cm-share-snapshot-frame {
  position: relative;
  width: 100%;
  border-radius: 16px;
  border: 3px solid #d97706;
  outline: 2px solid #451a03;
  overflow: hidden;
  background: #075985;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.cm-share-snapshot-frame img {
  width: 100%;
  max-height: clamp(160px, 28dvh, 225px);
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.cm-share-snapshot-tag {
  position: absolute;
  bottom: 6px;
  right: 8px;
  background: rgba(15, 23, 42, 0.82);
  color: #fef08a;
  border: 1.5px solid #f59e0b;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 800;
}

.cm-share-caption-preview {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #451a03 !important;
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  border-radius: 12px;
  padding: 6px 10px;
  text-align: center;
}

.cm-share-platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cm-share-plat-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 8px 6px !important;
  border-radius: 16px !important;
  border: 2.5px solid #fef08a !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 #1e293b !important;
}

.cm-share-plat-btn.fb {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
}
.cm-share-plat-btn.msg {
  background: linear-gradient(180deg, #9333ea 0%, #6b21a8 100%) !important;
}
.cm-share-plat-btn.zalo {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
}

.cm-share-plat-btn .plat-ico {
  font-size: 18px;
  line-height: 1;
}
.cm-share-plat-btn b {
  font-family: var(--cm-font-display);
  font-size: 13px;
  color: #ffffff !important;
}
.cm-share-plat-btn small {
  font-size: 10.5px;
  font-weight: 800;
  color: #fef08a !important;
}

.cm-share-return-bar {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  border: 2.5px solid #16a34a;
  border-radius: 16px;
  padding: 8px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cm-share-return-bar p {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #14532d !important;
}

.cm-share-feedback {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.cm-share-feedback.success {
  background: #dcfce7;
  border: 2px solid #16a34a;
  color: #14532d;
}
.cm-share-feedback.error {
  background: #fee2e2;
  border: 2px solid #dc2626;
  color: #7f1d1d;
}

.cm-share-footer-actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.cm-share-footer-actions button {
  flex: 1 1 0;
  min-height: 36px !important;
  font-size: 12.5px !important;
}

/* Compact Outcome Share Box inside Victory / Level-up / Defeat screens */
.cm-outcome-share-box {
  background: linear-gradient(180deg, #fffdf7 0%, #fef3c7 100%);
  border: 2.5px solid #f59e0b;
  border-radius: 16px;
  padding: 7px 10px;
  margin: 5px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: inset 0 2px 0 #ffffff, 0 3px 0 #b45309;
}

.cm-os-top {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.cm-os-thumb {
  width: 68px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #d97706;
  flex-shrink: 0;
}

.cm-os-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cm-os-info b {
  font-family: var(--cm-font-display);
  font-size: 12px !important;
  color: #7c2d12 !important;
  line-height: 1.2;
}

.cm-os-info span {
  font-size: 11px !important;
  font-weight: 800;
  color: #451a03 !important;
  line-height: 1.25;
}

.cm-os-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.cm-os-btn {
  min-height: 30px !important;
  padding: 4px 6px !important;
  font-size: 11.5px !important;
  border-radius: 12px !important;
}
.cm-os-btn.fb {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
}
.cm-os-btn.msg {
  background: linear-gradient(180deg, #a855f7 0%, #6b21a8 100%) !important;
}
.cm-os-btn.zalo {
  background: linear-gradient(180deg, #0ea5e9 0%, #0369a1 100%) !important;
}

.cm-social-panel-share-card {
  background: linear-gradient(180deg, #fef9c3 0%, #fde047 100%);
  border: 2.5px solid #d97706;
  border-radius: 18px;
  padding: 10px 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 2px 0 #ffffff, 0 4px 0 #b45309;
}
.cm-sps-info b {
  display: block;
  font-family: var(--cm-font-display);
  font-size: 14px;
  color: #7c2d12;
  margin-bottom: 2px;
}
.cm-sps-info span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #451a03;
  line-height: 1.35;
}

/* Keep disaster-cinema strictly single-frame without scrollbars even with share bar */
.disaster-cinema .cinema-story {
  padding: 11px 14px 12px !important;
}
.disaster-cinema .cm-cartoon-stage-viewport {
  height: clamp(118px, 20dvh, 165px) !important;
}
.disaster-cinema .cinema-account {
  padding: 6px 8px !important;
  margin: 5px 0 6px !important;
}
.disaster-cinema .cinema-account-line {
  padding: 3px 5px !important;
  font-size: 12px !important;
}