/* Liquid Glass theme (0.25): every HUD surface becomes frosted, refractive glass over the live city —
   translucent fill, strong backdrop blur + saturation, a bright specular rim on top, a soft inner
   glow and a light edge. Opt-in from settings (body.theme-glass); the classic kit theme stays default. */
body.theme-glass {
  --g-fill: rgba(255, 255, 255, 0.22);
  --g-fill-2: rgba(255, 255, 255, 0.34);
  --g-edge: rgba(255, 255, 255, 0.6);
  --g-ink: #10332c;
  --g-blur: blur(22px) saturate(185%);
  --g-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25),
    inset 0 0 22px rgba(255, 255, 255, 0.18),
    0 10px 30px rgba(10, 40, 34, 0.22);
}
body.theme-glass .topbar,
body.theme-glass .sidebar,
body.theme-glass[data-screen="city"] .map-toolbar,
body.theme-glass .rivals-hud,
body.theme-glass .world-controls button,
body.theme-glass[data-screen="city"] .turn-card,
body.theme-glass[data-screen="city"] .city-metrics,
body.theme-glass[data-screen="city"] .idle-card,
body.theme-glass[data-screen="city"] .next-quest,
body.theme-glass .modal,
body.theme-glass .kit-card,
body.theme-glass .kit-hud > div,
body.theme-glass .kit-cream,
body.theme-glass .kit-pill-btn,
body.theme-glass .kit-sub > span,
body.theme-glass .kit-plate > span,
body.theme-glass .kit-badge,
body.theme-glass .kit-note,
body.theme-glass #callout,
body.theme-glass .roll-result,
body.theme-glass .movement-status,
body.theme-glass .roll-status,
body.theme-glass .world-loader,
body.theme-glass #toast,
body.theme-glass .kit-round.light {
  background: linear-gradient(160deg, var(--g-fill-2), var(--g-fill) 55%, rgba(255, 255, 255, 0.14)) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-shadow) !important;
  color: var(--g-ink);
}
/* Bars keep their edges but lose the opaque paper. */
body.theme-glass .topbar {
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
}
body.theme-glass .sidebar {
  border-width: 1px 0 0 !important;
}
@media (min-width: 901px) {
  body.theme-glass .sidebar {
    border-width: 0 1px 0 0 !important;
  }
}
body.theme-glass .workspace,
body.theme-glass[data-screen="city"] .workspace main {
  background: transparent;
}
body.theme-glass .modal,
body.theme-glass .kit-card {
  border-radius: 30px !important;
}
body.theme-glass .modal.kit-modal {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.32)) !important;
}
body.theme-glass .modal-backdrop {
  background: rgba(10, 40, 34, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Rows and chips inside glass become lighter glass, not cream blocks. */
body.theme-glass .kit-row,
body.theme-glass .kit-reward,
body.theme-glass .kit-choice,
body.theme-glass .kit-abil,
body.theme-glass .kit-abil-detail,
body.theme-glass .kit-split,
body.theme-glass .kit-input,
body.theme-glass .kit-stages > div,
body.theme-glass .district-progress,
body.theme-glass .toll-preview,
body.theme-glass .passed-plots,
body.theme-glass .dice-sum,
body.theme-glass .die-choice,
body.theme-glass .coach-dice,
body.theme-glass .purchase-costs > div,
body.theme-glass .business-option,
body.theme-glass .property-card,
body.theme-glass .quest-row,
body.theme-glass .contract-card {
  background: rgba(255, 255, 255, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
body.theme-glass .kit-choice.sel,
body.theme-glass .kit-abil.sel,
body.theme-glass .business-option.selected,
body.theme-glass .dice-sum.double {
  background: rgba(214, 245, 230, 0.5) !important;
  border-color: rgba(18, 138, 116, 0.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 2px rgba(18, 138, 116, 0.35) !important;
}
/* Tinted glass for the brand pieces: emerald ribbons and gold buttons stay recognisable but glow. */
body.theme-glass .kit-ribbon > span,
body.theme-glass[data-screen="city"] .map-title b,
body.theme-glass .nav-item.active,
body.theme-glass .kit-round:not(.light),
body.theme-glass .kit-plus {
  background: linear-gradient(165deg, rgba(40, 170, 145, 0.78), rgba(6, 82, 70, 0.82)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 6px rgba(0, 40, 30, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 8px 22px rgba(6, 60, 50, 0.3) !important;
}
body.theme-glass .kit-gold,
body.theme-glass .primary,
body.theme-glass .roll-button {
  background: linear-gradient(170deg, rgba(255, 236, 150, 0.95), rgba(246, 190, 60, 0.88) 55%, rgba(226, 150, 30, 0.9)) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -3px 8px rgba(170, 100, 10, 0.3),
    0 8px 24px rgba(210, 140, 30, 0.38) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* A moving specular sheen on the main glass panels. */
body.theme-glass[data-screen="city"] .turn-card,
body.theme-glass .kit-card,
body.theme-glass .modal.kit-modal {
  position: relative;
  isolation: isolate;
}
body.theme-glass[data-screen="city"] .turn-card::after,
body.theme-glass .kit-card::after,
body.theme-glass .modal.kit-modal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 45%, transparent 60%) 0 0 / 250% 100%;
  animation: glass-sheen 7s ease-in-out infinite;
}
@keyframes glass-sheen {
  0%,
  100% {
    background-position: 120% 0;
  }
  50% {
    background-position: -20% 0;
  }
}
body.theme-glass.reduce-motion *::after {
  animation: none !important;
}
/* Text on glass needs a touch more weight to stay readable over the busy city. */
body.theme-glass[data-screen="city"] .turn-content p,
body.theme-glass .kit-lead,
body.theme-glass .kit-row,
body.theme-glass .nav-item {
  color: var(--g-ink) !important;
}
body.theme-glass .wallet {
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: inset 0 1px 0 #fff;
}
/* Full-screen layers: the scenery shows through a lighter scrim. */
body.theme-glass .kit-screen.scrim::before {
  background: rgba(20, 60, 52, 0.12);
}
/* Light glass for low-end devices, the Lite tier, Save-Data and "reduce transparency": no backdrop
   blur over the moving 3D canvas (the expensive part), no sheen animation, a denser frosted fill. */
body.theme-glass.glass-lite * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.theme-glass.glass-lite .topbar,
body.theme-glass.glass-lite .sidebar,
body.theme-glass.glass-lite[data-screen="city"] .map-toolbar,
body.theme-glass.glass-lite .rivals-hud,
body.theme-glass.glass-lite .world-controls button,
body.theme-glass.glass-lite[data-screen="city"] .turn-card,
body.theme-glass.glass-lite[data-screen="city"] .city-metrics,
body.theme-glass.glass-lite .modal,
body.theme-glass.glass-lite .kit-card,
body.theme-glass.glass-lite .kit-hud > div,
body.theme-glass.glass-lite #callout,
body.theme-glass.glass-lite .roll-result {
  background: linear-gradient(160deg, rgba(250, 253, 252, 0.9), rgba(236, 246, 243, 0.82)) !important;
}
body.theme-glass.glass-lite *::after {
  animation: none !important;
}
@media (prefers-reduced-transparency: reduce) {
  body.theme-glass * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
/* v0.26 · glass that stays readable: denser frost, dark ink with a light halo for every small label,
   and the pieces that were still opaque paper (level block, secondary buttons, metrics) join the theme. */
body.theme-glass {
  --g-fill: rgba(255, 255, 255, 0.52);
  --g-fill-2: rgba(255, 255, 255, 0.68);
}
body.theme-glass[data-screen="city"] .turn-card,
body.theme-glass .kit-card,
body.theme-glass .modal {
  --g-fill: rgba(255, 255, 255, 0.66);
  --g-fill-2: rgba(255, 255, 255, 0.8);
}
body.theme-glass .map-title span,
body.theme-glass .weather,
body.theme-glass .weather i,
body.theme-glass .rivals-hud b,
body.theme-glass .rivals-hud small,
body.theme-glass .city-metrics span,
body.theme-glass .city-metrics small,
body.theme-glass .city-metrics b,
body.theme-glass .turn-top,
body.theme-glass .turn-top span,
body.theme-glass .turn-top b,
body.theme-glass .turn-goal,
body.theme-glass .focus-row,
body.theme-glass .focus-row span,
body.theme-glass .focus-row small,
body.theme-glass .passed-plots small,
body.theme-glass .level-block,
body.theme-glass .level-block small,
body.theme-glass .wallet small,
body.theme-glass .nav-item:not(.active) {
  color: #14382f !important;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  opacity: 1 !important;
}
body.theme-glass .city-metrics b {
  font-weight: 800;
}
body.theme-glass .level-block,
body.theme-glass .secondary,
body.theme-glass .city-switch,
body.theme-glass .passed-chip,
body.theme-glass .focus-row {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.55)) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    inset 0 1.5px 0 #fff,
    0 4px 14px rgba(10, 40, 34, 0.14) !important;
  border-radius: 16px;
}
body.theme-glass .level-block {
  padding: 6px 12px;
}
body.theme-glass .city-switch,
body.theme-glass .passed-chip {
  border-radius: 999px;
  color: #14382f !important;
}
body.theme-glass .passed-plots {
  background: rgba(255, 246, 216, 0.72) !important;
  border-color: rgba(236, 201, 106, 0.9) !important;
}
body.theme-glass .xp-bar {
  background: rgba(20, 56, 47, 0.15);
}
/* The 3D board shows through less behind the bottom metrics, which carry the smallest text. */
body.theme-glass[data-screen="city"] .city-metrics {
  --g-fill: rgba(255, 255, 255, 0.72);
  --g-fill-2: rgba(255, 255, 255, 0.84);
}