/* ═══════════════════════════════════════════════════════════════════════════
   coherence.css — global UI polish layer
   Loads AFTER every feature stylesheet and BEFORE mobile.css, so it
   normalizes the shared chrome while mobile overrides still win.

   HARD RULE: never set background / border-color / color on selectors the
   runtime theme stylesheet controls (see applyTheme() in cosmetics_apply.js:
   .b-btn, .b-currency, .upg-card, .modal-box, .modal-btn, .modal-close,
   .cosm-*, .theme-*, .opt-section, #stats-btn et al). Structure only:
   radius, padding, typography, motion, focus, scrollbars.

   ALSO: the game renders a custom cursor (#global-cursor) — never add
   `cursor:` rules here; they can leak the native OS cursor back in.

   Design scale used throughout:
     radius  — 8px controls · 12px cards · 16px modals/windows
     motion  — 0.15s for state changes, translateY(-1px) hover lift
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TEXT RENDERING ─────────────────────────────────────────────────── */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(192,96,160,0.5); color: #fff; }

/* ── 2. ONE GAME FONT ──────────────────────────────────────────────────────
   #root already uses Exo 2, but the main menu, intro flow, and options
   panel fall back to raw sans-serif / Calibri. Bring them onto the game
   font; elements with their own display fonts (.mm-logo, monospace save
   boxes, #coach-line) declare font-family explicitly and are unaffected. */
#main-menu, #runtype-screen, #name-prompt-screen, #type-select-screen,
#ts-confirm, #name-entry-screen, #loading-screen, #shader-screen,
#click-ready-screen {
  font-family: 'Exo 2', Calibri, sans-serif;
}
.mm-btn, .mm-panel-title, .mm-panel-sub, .mm-credits-list,
#options-panel, #mm-options-scroll {
  font-family: 'Exo 2', Calibri, sans-serif;
}

/* Numbers that tick every frame stop jittering horizontally. */
.b-val, #droplet-count, #dps-display, #squeeze-per-click,
.upg-cost, .upg-owned, #prestige-level, #hired-cyl-count {
  font-variant-numeric: tabular-nums;
}

/* ── 3. RADIUS SCALE — 8 / 12 / 16 ─────────────────────────────────────── */

/* Controls → 8px (was a mix of 6, 6.4, 8, 9.108, 10) */
.b-btn,
.radio-btn,
.modal-close, .daily-modal-close,
#stats-btn, #graph-btn, #achievements-btn, #options-btn {
  border-radius: 8px;
}

/* Cards & sections → 12px (was a mix of 10, 12, 14) */
.upg-card, .ach-tile, .opt-section,
.cosm-card, .size-card, .theme-card {
  border-radius: 12px;
}

/* Modals & game windows → 16px (was a mix of 14, 16, 18) */
.modal-box, .ad-box, .scratch-box,
.minigames-modal, .casino-modal, .lootbox-modal,
.bank-modal, .ghost-modal, .dragon-modal, .cel-modal,
.cf-modal, .cr-modal, .cc-modal, .equip-window {
  border-radius: 16px;
}

/* ── 4. CLOSE BUTTONS — one red ✕ family ───────────────────────────────────
   .ui-unlock-x is the canonical style. The per-panel clones drifted
   (.shop-ad-close shrank to 14px, radii varied 6px). Lock them together.
   (.modal-close stays theme-colored on purpose — radius only, above.) */
.ui-unlock-x,
.stats-close-btn, .ach-close-btn, .graph-close-btn,
.opt-close-btn, .cosm-x-btn, .lootbox-close-x, .shop-ad-close,
.ccity-x-btn {
  border-radius: 8px;
}
.stats-close-btn, .ach-close-btn, .graph-close-btn,
.opt-close-btn, .cosm-x-btn, .lootbox-close-x, .shop-ad-close {
  background: #3a0808;
  border: 1px solid #7a1010;
  color: #ff6060;
  font-size: 17px;
  font-weight: 700;
  padding: 3px 9px;
  line-height: 1;
  opacity: 0.8;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.stats-close-btn:hover, .ach-close-btn:hover, .graph-close-btn:hover,
.opt-close-btn:hover, .cosm-x-btn:hover, .lootbox-close-x:hover,
.shop-ad-close:hover,
.ui-unlock-x:hover {
  background: #5a0c0c;
  border-color: #cc2020;
  color: #ff8080;
  opacity: 1;
}

/* ── 5. BUTTON GEOMETRY ────────────────────────────────────────────────────
   .b-btn shipped with asymmetric padding (2.8px top / 5px bottom) that
   pushes labels off-center — make it symmetric. Inside the minigame bar,
   .b-btn (VIP/Daily/Casino/…) sits beside the addon buttons which all use
   6px 14px; match them so the whole bar reads as one row. */
.b-btn { padding: 4px 10px; }
#minigame-buttons-wrap .b-btn { padding: 6px 14px; }

#stats-btn, #graph-btn, #achievements-btn, #options-btn {
  letter-spacing: 0.02em;
}

/* ── 6. MOTION LANGUAGE — hover lift everywhere ────────────────────────────
   .b-btn, the mid-top-bar, and the minigame buttons already lift -1px on
   hover; modal/card buttons don't react at all. Give them the same life.
   (:active press-scale from animations.css still wins while pressed.) */
.modal-btn, .opt-copy-btn,
.cosm-buy-btn.affordable, .theme-buy-btn.affordable,
.cosm-equip-btn:not(.active-btn), .theme-equip-btn:not(.active-btn) {
  transition: background 0.15s, border-color 0.15s, color 0.15s,
              transform 0.15s, box-shadow 0.15s;
}
.modal-btn:hover, .opt-copy-btn:hover,
.cosm-buy-btn.affordable:hover, .theme-buy-btn.affordable:hover,
.cosm-equip-btn:not(.active-btn):hover, .theme-equip-btn:not(.active-btn):hover {
  transform: translateY(-1px);
}

/* ── 7. TITLES — consistent weight + tracking ──────────────────────────── */
.modal-title { font-weight: 700; letter-spacing: 0.03em; }
.stats-panel-title, .ach-panel-title, .graph-panel-title,
.cosm-header h2, .theme-header h2, .vip-header h2 {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── 8. FOCUS VISIBILITY — keyboard users get one consistent ring ──────── */
button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid rgba(240,170,210,0.65);
  outline-offset: 2px;
}

/* ── 9. SCROLLBARS — thumb radius matches the control scale ────────────── */
::-webkit-scrollbar-thumb { border-radius: 6px; }

/* ── 10. MODAL ELEVATION — one depth, per-feature glow kept ────────────────
   Standard depth shadow `0 12px 40px rgba(0,0,0,0.75)` (already used by the
   Cock Fight / Cylinder City / Castle Raid / Cum Champion windows) applied
   to every modal, with each one's signature colored glow preserved on top.
   bank/ghost/dragon/cel use !important for bg+border but not box-shadow,
   so these later rules win cleanly. */
.modal-box {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,120,190,0.1);
}
.vip-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 28px rgba(144,96,224,0.28);
}
.daily-modal, .ad-box, .scratch-box {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 28px rgba(192,96,160,0.2);
}
.premium-shop-modal, .fake-pay-modal, .af-buy-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75);
}
.cosm-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 28px rgba(112,64,192,0.28);
}
.prestige-modal, .harem-training-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 28px rgba(96,48,176,0.3);
}
.cyl-mini-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 28px rgba(140,140,200,0.18);
}
.equip-window {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 32px rgba(80,0,140,0.45);
}
.bank-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 32px rgba(40,180,90,0.35);
}
.ghost-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 32px rgba(200,225,255,0.3);
}
.dragon-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 32px rgba(40,180,90,0.4);
}
.cel-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 32px rgba(80,110,220,0.4);
}
.casino-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 40px rgba(120,40,160,0.45),
              inset 0 0 30px rgba(60,20,80,0.5);
}
.minigames-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 40px rgba(40,120,200,0.45),
              inset 0 0 30px rgba(20,60,100,0.5);
}
.lootbox-modal {
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 32px rgba(140,50,200,0.35),
              inset 0 0 40px rgba(100,30,160,0.1);
}

/* ── 11. CONFIRM BACKDROPS — match the main overlay's darkness ─────────────
   The shared .overlay backdrop is rgba(0,0,0,0.75)+blur(8px), but the two
   custom confirm dialogs dimmed by only 20% and got lost over the busy
   minigame screens behind them. */
#mg-close-confirm, #ccity-newcity-confirm {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── 12. MINIGAME-BAR BUTTONS — crisp icon/label alignment ─────────────────
   The addon buttons are <span .hc-icon> + <span .hc-label> separated by a
   raw text space, so emoji baseline wobble misaligns them. Flex centers
   both; gap replaces the (flex-dropped) whitespace text node. */
#minigame-buttons-wrap > div > button, #hired-cyl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hc-icon { line-height: 1; }