/* =====================================================================
   PIXEL UI KIT: popups, shops and dialogs (loaded after style.css and components.css)
   Restyle only: every popup keeps its markup, ids, JS hooks and animations. See docs/CSS_WIKI.md section 8.
   ===================================================================== */

/* === [SNIPPET: Pixel UI Tones] === */
/* Each popup gets a color set from its backdrop id. Neutral screens use the default purple, shops their currency
   color, prestige / respec Mystic purple, attraction popups the current attraction (body[data-game-mode]). */
:root {
  --px-notch: polygon(3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 3px 3px);
  --px-notch-bottom: polygon(0 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));

  /* Neutral default purple */
  --px-panel: #201b33; --px-card: #2b2544; --px-hover: #3a3160; --px-hi: #4f4579; --px-lo: #0e0b18;
  --px-accent: #b9a6ff; --px-accent-dark: #5a4a8a;

  /* Attraction palette (follows the active mode) */
  --mode-panel: #0b1a28; --mode-card: #123047; --mode-hover: #16405c; --mode-hi: #1f5578; --mode-lo: #050d15;
  --mode-accent: #00f0ff; --mode-accent-dark: #0099a3;
}
body[data-game-mode="plinko"] { --mode-panel: #210914; --mode-card: #3a1224; --mode-hover: #4d1830; --mode-hi: #6b2440; --mode-lo: #10040a; --mode-accent: #ff2252; --mode-accent-dark: #990f2e; }
body[data-game-mode="coin_flip"] { --mode-panel: #08200f; --mode-card: #10361f; --mode-hover: #16482a; --mode-hi: #1f6a3c; --mode-lo: #031008; --mode-accent: #00e676; --mode-accent-dark: #008f47; }
body[data-game-mode="cannon"] { --mode-panel: #231205; --mode-card: #3a220e; --mode-hover: #4d2e12; --mode-hi: #6b3f14; --mode-lo: #110802; --mode-accent: #ff8a00; --mode-accent-dark: #a35800; }
body[data-game-mode="endgame"] { --mode-panel: #1a0f2b; --mode-card: #2e1a47; --mode-hover: #3d2460; --mode-hi: #553286; --mode-lo: #0b0614; --mode-accent: #a855f7; --mode-accent-dark: #6b21a8; }

#powerupShopModal { --px-panel: #1f0a19; --px-card: #3a1030; --px-hover: #4f1640; --px-hi: #6b2355; --px-lo: #0f040c; --px-accent: #ff2a85; --px-accent-dark: #a31250; }
#ticketFactoryModal, #convertTicketsModal { --px-panel: #0a1426; --px-card: #10223f; --px-hover: #173059; --px-hi: #24477a; --px-lo: #040a14; --px-accent: #5c9dff; --px-accent-dark: #2f5ca3; }
#coinMintModal { --px-panel: #201806; --px-card: #36290a; --px-hover: #4a390e; --px-hi: #6b5314; --px-lo: #0f0b02; --px-accent: #ffc233; --px-accent-dark: #a37a14; }
#foundryModal { --px-panel: #141a21; --px-card: #1f2833; --px-hover: #2b3746; --px-hi: #3f5063; --px-lo: #080b0f; --px-accent: #ff8a00; --px-accent-dark: #a35800; }
#mysticShopModal, #prestigeModal, #prestigeConfirmModal, #prestigeCooldownModal, #respecConfirmModal, #respecCooldownModal, #updateAvailableModal {
  --px-panel: #170d26; --px-card: #2e1a47; --px-hover: #3d2460; --px-hi: #553286; --px-lo: #0b0614; --px-accent: #c084fc; --px-accent-dark: #7c3aed;
}
/* The Mystic Shop panel sits darker than its popups so the purple cards stand out (panel only: the frame image is unchanged) */
#mysticShopModal, #orbInfoModal { --px-panel: #0b0613; }
#plinkoBoostModal { --px-panel: #210914; --px-card: #3a1224; --px-hover: #4d1830; --px-hi: #6b2440; --px-lo: #10040a; --px-accent: #ff2252; --px-accent-dark: #990f2e; }
#trialConfirmModal, #trialResultModal, #shopModal {
  --px-panel: var(--mode-panel); --px-card: var(--mode-card); --px-hover: var(--mode-hover); --px-hi: var(--mode-hi); --px-lo: var(--mode-lo);
  --px-accent: var(--mode-accent); --px-accent-dark: var(--mode-accent-dark);
}

/* === [SNIPPET: Pixel UI Frame Images] === */
/* GENERATED from the tone table above (outline + shadow + bevel in one image per tone, mockup corner math r15 / r12 /
   r9 in 3px steps). Regenerate after changing a tone's --px-hi / --px-lo / --mode-hi / --mode-lo; do not hand-edit. */
:root { --px-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%234f4579' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%230e0b18' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); --mode-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%231f5578' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%23050d15' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); }
body[data-game-mode="plinko"] { --mode-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%236b2440' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%2310040a' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); }
body[data-game-mode="coin_flip"] { --mode-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%231f6a3c' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%23031008' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); }
body[data-game-mode="cannon"] { --mode-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%236b3f14' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%23110802' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); }
body[data-game-mode="endgame"] { --mode-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%23553286' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%230b0614' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); }
#powerupShopModal { --px-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%236b2355' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%230f040c' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); }
#ticketFactoryModal, #convertTicketsModal { --px-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%2324477a' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%23040a14' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); }
#coinMintModal { --px-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%236b5314' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%230f0b02' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); }
#foundryModal { --px-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%233f5063' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%23080b0f' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); }
#mysticShopModal, #prestigeModal, #prestigeConfirmModal, #prestigeCooldownModal, #respecConfirmModal, #respecCooldownModal, #updateAvailableModal { --px-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%23553286' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%230b0614' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); }
#plinkoBoostModal { --px-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%236b2440' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%2310040a' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); }
#trialConfirmModal, #trialResultModal, #shopModal { --px-frame-img: var(--mode-frame-img); }

/* === [SNIPPET: Pixel UI Dialog Frame] === */
/* Rounded pixel frame on the dialog box itself (no extra DOM), same shape as the mockup / sidebar cabinet. The whole
   frame (black outline r15 in 3px steps, 3px hard shadow down-right, light / dark bevel with its corner steps) is ONE
   9-slice border image per tone (--px-frame-img, [SNIPPET: Pixel UI Frame Images], made by tools/gen_popup_frames.cjs),
   so outline and bevel can never drift apart at fractional screen scales. border-image-outset puts the outline and
   shadow just outside the box; the image's middle is clear, so the panel color and scanlines (the background) show
   through. No clip-path, so nothing is cut off. Backgrounds and border images stay fixed to the dialog box, so the
   frame stays put even in dialogs that scroll their own content (Prestige). Skill tree shop (fullscreen) is left as it is. */
.modal-backdrop .modal-dialog:not(.fullscreen-dialog),
.offline-loading-dialog,
.title-marquee,
.node-popup-card {
  /* One frame step. Popups that are zoomed by the UI scale (Settings, the skill tree node popup) divide it back out so
     the steps still land on whole screen pixels and stay crisp. */
  --px-s: 3px;
  /* Panel + scanlines are inset half a step, so they tuck under the opaque bevel instead of ending exactly on its inner
     edge: at fractional screen scales (125% / 150% desktop, most phones) two edges meeting on the same line both get
     half-covered and the game showed through as a thin slit. Half a step in is still inside the black outline at the
     rounded corners, so no square panel edge can peek out past it. */
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 6px)
      calc(var(--px-s) / 2) calc(var(--px-s) / 2) / calc(100% - var(--px-s)) calc(100% - var(--px-s)) no-repeat,
    linear-gradient(var(--px-panel), var(--px-panel))
      calc(var(--px-s) / 2) calc(var(--px-s) / 2) / calc(100% - var(--px-s)) calc(100% - var(--px-s)) no-repeat !important;
  background-origin: border-box !important;
  border: 4px solid transparent !important;
  border-image-source: var(--px-frame-img) !important;
  border-image-slice: 15 18 18 15 !important;
  border-image-width: calc(5 * var(--px-s)) calc(6 * var(--px-s)) calc(6 * var(--px-s)) calc(5 * var(--px-s)) !important;
  border-image-outset: var(--px-s) calc(2 * var(--px-s)) calc(2 * var(--px-s)) var(--px-s) !important;
  border-image-repeat: stretch !important;
  box-shadow: none !important;
  clip-path: none !important;
  outline: none !important;
}
.modal-backdrop .modal-dialog.settings-dialog:not(.fullscreen-dialog),
.node-popup-card { --px-s: calc(3px / var(--ui-scale, 1)); }

/* === [SNIPPET: Pixel UI Popup Backdrop] === */
/* Every popup dims the game behind it to 50% instead of hiding it (still blocks clicks, no blur so it stays cheap).
   Only the fullscreen skill tree shop and the loading screen (#offlineLoadingModal, style.css) stay opaque. */
.modal-backdrop:not(:has(> .fullscreen-dialog)) { background: rgba(8, 6, 14, 0.5) !important; }

/* === [SNIPPET: Pixel UI Popup Headers] === */
/* One title style everywhere: white pixel font with a hard 2px shadow; subtitles in the popup's accent color */
.modal-dialog:not(.fullscreen-dialog) h2.modal-title,
.game-modes-header h2,
.settings-header h2,
.powerup-title-group h2,
.trial-result-header h2,
.offline-modal-title,
.prestige-modal-title,
.game-menu-header h2,
.mystic-modal-title,
.title-diff-header h2 {
  color: var(--pixel-white) !important;
  text-shadow: 2px 2px 0 var(--pixel-black) !important;
}
.modal-dialog:not(.fullscreen-dialog) .modal-subtitle,
.powerup-modal-subtitle,
.prestige-modal-subtitle,
.mystic-modal-subtitle {
  font-family: var(--font-pixel-sub) !important;
  font-size: 10px !important;
  color: var(--px-accent) !important;
}

/* === [SNIPPET: Pixel UI Close Button] === */
/* Red pixel close button with stepped corners and a pixel X (the text "x" is hidden, the X is a mask) */
.modal-dialog:not(.fullscreen-dialog) .btn-close,
.node-popup-card .btn-close-popup {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  background: var(--pixel-red) !important;
  border: 3px solid var(--pixel-black) !important;
  clip-path: var(--px-notch);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35), inset 2px 2px 0 rgba(255, 255, 255, 0.25) !important;
  display: block !important;
}
/* The upgrade popup's button is already position: absolute (top right, style.css .btn-close-popup); only the header one needs this */
.modal-dialog:not(.fullscreen-dialog) .btn-close { position: relative; }
/* The X is pinned to the exact center; the hidden "x" text node would otherwise take layout space and push it off-center */
.modal-dialog:not(.fullscreen-dialog) .btn-close::before,
.node-popup-card .btn-close-popup::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  background: var(--pixel-white);
  -webkit-mask: var(--px-icon-x) center / contain no-repeat;
  mask: var(--px-icon-x) center / contain no-repeat;
}
.modal-dialog:not(.fullscreen-dialog) .btn-close:hover,
.node-popup-card .btn-close-popup:hover { background: #ff4d74 !important; }
.modal-dialog:not(.fullscreen-dialog) .btn-close:active,
.node-popup-card .btn-close-popup:active { transform: translate(1px, 1px); }
:root {
  --px-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1H0zM5 0h2v1H5zM0 1h3v1H0zM4 1h3v1H4zM1 2h5v1H1zM2 3h3v1H2zM1 4h5v1H1zM0 5h3v1H0zM4 5h3v1H4zM0 6h2v1H0zM5 6h2v1H5z'/%3E%3C/svg%3E");
  --px-icon-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1H0zM1 1h2v1H1zM2 2h2v1H2zM3 3h2v2H3zM2 5h2v1H2zM1 6h2v1H1zM0 7h2v1H0z'/%3E%3C/svg%3E");
  --px-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h4v1H2zM1 1h1v2H1zM6 1h1v2H6zM0 3h8v2H0zM0 5h3v2H0zM5 5h3v2H5zM0 7h8v2H0z'/%3E%3C/svg%3E");
}

/* === [SNIPPET: Pixel UI Push Buttons] === */
/* Popup buttons keep their colors and meaning, but get pixel corners, a black border and an inner lip
   (light top edge, dark bottom edge) that presses down. The Select Game Mode unlock button is excluded from the
   corner clip so its affordable glow still shows. */
.modal-dialog :is(.btn-powerup-action, .btn-factory-trade, .btn-pixel, .btn-trial-confirm, .btn-prestige-claim,
  .btn-prestige-confirm, .btn-prestige-cancel, .btn-overwrite-confirm, .btn-overwrite-cancel, .btn-offline-claim,
  .btn-offline-4x, .btn-convert-confirm, .btn-convert-chip, .btn-boost-watch-ad, .btn-boost-close, .btn-save-now,
  .btn-reset-audio, .btn-mystic-action, .mystic-respec-btn, .btn-trial-cancel, .btn-trial-ad-skip, .btn-trial-start,
  .btn-delete-save, .mystic-unclaimed-indicator),
.node-popup-card .btn-upgrade {
  clip-path: var(--px-notch);
  border: 3px solid var(--pixel-black) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.16) !important;
}
.modal-dialog :is(.btn-powerup-action, .btn-factory-trade, .btn-pixel, .btn-trial-confirm, .btn-prestige-claim,
  .btn-prestige-confirm, .btn-prestige-cancel, .btn-overwrite-confirm, .btn-overwrite-cancel, .btn-offline-claim,
  .btn-offline-4x, .btn-convert-confirm, .btn-convert-chip, .btn-boost-watch-ad, .btn-boost-close, .btn-save-now,
  .btn-reset-audio, .btn-mystic-action, .mystic-respec-btn, .btn-trial-cancel, .btn-trial-ad-skip, .btn-trial-start,
  .btn-delete-save, .mystic-unclaimed-indicator):active:not(:disabled),
.node-popup-card .btn-upgrade:active:not(:disabled) {
  transform: translateY(2px) !important;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.16) !important;
}

/* === [SNIPPET: Ad Button Standard] === */
/* STANDARD: every button that plays a rewarded ad is green, whatever popup, shop or attraction color it sits in, so
   ads always read as the optional "get more" action. The hook is the data-ad-placement attribute that every ad button
   already carries for adManager (never a class: the respec confirm's normal RESPEC button reuses .btn-trial-ad-skip).
   Look (same as the mockup): play arrow, label, small "AD" tag after it. Cooldown / loading (disabled) stays gray. */
:root {
  --ad-bg: #00c853; --ad-hover: #1ee06a; --ad-lip: #007a33; --ad-top: #69f0ae; --ad-fg: #02150a;
  --px-icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v7H0zM1 1h1v5H1zM2 2h1v3H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
}
.modal-dialog button[data-ad-placement],
button[data-ad-placement] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ad-bg) !important;
  color: var(--ad-fg) !important;
  border: 3px solid var(--pixel-black) !important;
  border-radius: 0 !important;
  clip-path: var(--px-notch);
  box-shadow: inset 0 -4px 0 var(--ad-lip), inset 0 3px 0 var(--ad-top) !important;
  opacity: 1 !important;
  filter: none !important;
}
.modal-dialog button[data-ad-placement]:hover:not(:disabled):not(.ad-on-cooldown) { background: var(--ad-hover) !important; transform: none; }
.modal-dialog button[data-ad-placement]:active:not(:disabled):not(.ad-on-cooldown) {
  transform: translateY(2px) !important;
  box-shadow: inset 0 -2px 0 var(--ad-lip), inset 0 3px 0 var(--ad-top) !important;
}
button[data-ad-placement]::before {
  content: "";
  width: 6px;
  height: 10px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--px-icon-play) center / contain no-repeat;
  mask: var(--px-icon-play) center / contain no-repeat;
}
button[data-ad-placement] > span { color: inherit !important; }
button[data-ad-placement] .btn-ad-tag {
  order: 2;
  background: none !important;
  padding: 0 !important;
  font-size: 7px !important;
  opacity: 0.75;
}
/* Popups with an ad button stack their buttons full width (ad on top), like the mockup, so the label never wraps */
.modal-dialog :is(.trial-modal-actions, .boost-modal-actions):has(> button[data-ad-placement]) {
  flex-direction: column !important;
  gap: 10px !important;
}
.modal-dialog :is(.trial-modal-actions, .boost-modal-actions):has(> button[data-ad-placement]) > button {
  flex: none !important;
  width: 100%;
  min-height: 40px;
  white-space: nowrap;
}
/* Cooldown (still clickable so it can shake) and ad loading (disabled): flat gray, no lip */
.modal-dialog button[data-ad-placement]:is(:disabled, .ad-on-cooldown) {
  background: #2a2533 !important;
  color: #6e6784 !important;
  box-shadow: inset 0 -4px 0 #15121c !important;
  cursor: not-allowed;
}

/* === [SNIPPET: Pixel UI Popup Kit] === */
/* Shared building blocks copied from the mockup, used by the popups whose content is rebuilt in JS (prestige,
   cooldowns, respec, challenge, boost, title popups, achievements). pk- = popup kit. Colors follow the popup tone. */
:root {
  --pk-ico-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1H0zM5 0h2v1H5zM1 1h2v1H1zM4 1h2v1H4zM2 2h3v1H2zM1 3h2v1H1zM4 3h2v1H4zM0 4h2v1H0zM5 4h2v1H5z'/%3E%3C/svg%3E");
  --pk-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7' shape-rendering='crispEdges'%3E%3Cpath d='M8 0h1v1H8zM7 1h2v1H7zM0 2h1v1H0zM6 2h2v1H6zM0 3h2v1H0zM5 3h2v1H5zM1 4h2v1H1zM4 4h2v1H4zM2 5h3v1H2zM3 6h1v1H3z'/%3E%3C/svg%3E");
  --pk-ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h5v1H2zM1 1h1v1H1zM7 1h1v1H7zM0 2h1v1H0zM4 2h1v1H4zM8 2h1v1H8zM0 3h1v1H0zM4 3h1v1H4zM8 3h1v1H8zM0 4h1v1H0zM4 4h3v1H4zM8 4h1v1H8zM0 5h1v1H0zM8 5h1v1H8zM0 6h1v1H0zM8 6h1v1H8zM1 7h1v1H1zM7 7h1v1H7zM2 8h5v1H2z'/%3E%3C/svg%3E");
  --pk-ico-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1H4zM3 1h3v1H3zM3 2h1v1H3zM5 2h1v1H5zM2 3h2v1H2zM5 3h2v1H5zM2 4h2v1H2zM5 4h2v1H5zM1 5h3v1H1zM5 5h3v1H5zM1 6h7v1H1zM0 7h4v1H0zM5 7h4v1H5zM0 8h9v1H0z'/%3E%3C/svg%3E");
  --pk-ico-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h3v1H2zM1 1h3v1H1zM0 2h3v1H0zM0 3h6v1H0zM2 4h3v1H2zM1 5h3v1H1zM0 6h3v1H0zM0 7h2v1H0zM0 8h1v1H0z'/%3E%3C/svg%3E");
  --pk-ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1H2zM2 1h1v1H2zM0 2h5v1H0zM2 3h1v1H2zM2 4h1v1H2z'/%3E%3C/svg%3E");
}
/* Headers: no divider line under the title (mockup) */
.modal-dialog:not(.fullscreen-dialog) .modal-header { border-bottom: none !important; }
.modal-dialog:not(.fullscreen-dialog) .modal-title { font-size: 13px !important; letter-spacing: 0.5px; line-height: 1.3 !important; }
/* Body copy (Silkscreen, light gray; <b> is white) */
.pk-text { font-family: var(--font-pixel-sub); font-size: 11px; line-height: 1.55; color: #b8b2cf; margin: 0 0 12px; text-align: left; }
.pk-text b { color: #fff; font-weight: normal; }
/* Section label with a dashed rule */
.pk-sec { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-family: var(--font-pixel); font-size: 9px; color: var(--px-accent); }
.pk-sec::after { content: ""; flex: 1; border-top: 2px dashed rgba(255, 255, 255, 0.1); }
.pk-sec:first-child { margin-top: 0; }
/* Dark inset well and stat tiles */
.pk-well, .pk-tile {
  background: rgba(0, 0, 0, 0.35);
  border: 3px solid var(--pixel-black);
  clip-path: var(--px-notch);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}
.pk-well { padding: 10px 12px; }
.pk-well.pk-kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pk-tiles.pk-two { grid-template-columns: 1fr 1fr; }
.pk-tile { padding: 9px 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pk-k { font-family: var(--font-pixel-sub); font-size: 9px; line-height: 1.3; color: #b8b2cf; }
.pk-v { font-family: var(--font-pixel); font-size: 12px; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.pk-v.pk-small { font-size: 9px; line-height: 1.45; }
.pk-gold { color: var(--pixel-gold, #ffcc00) !important; }
.pk-cur { display: inline-flex; align-items: center; gap: 6px; }
/* Bullet list: accent square, or a red cross / green check */
.pk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-family: var(--font-pixel-sub); font-size: 10px; color: #fff; }
.pk-list li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; text-align: left; }
.pk-list li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 4px; background: var(--px-accent); }
.pk-list.pk-lose li::before, .pk-list.pk-keep li::before { width: 10px; height: 10px; margin-top: 2px; -webkit-mask: var(--pk-ico-cross) center / contain no-repeat; mask: var(--pk-ico-cross) center / contain no-repeat; background: #ff5a7a; }
.pk-list.pk-keep li::before { -webkit-mask-image: var(--pk-ico-check); mask-image: var(--pk-ico-check); background: #00e676; }
.pk-list-title { font-family: var(--font-pixel); font-size: 9px; margin-bottom: 10px; }
/* Pixel icon from a mask (set --pk-m to one of the --pk-ico-* icons), colored by currentColor */
.pk-ico { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--pk-m) center / contain no-repeat; mask: var(--pk-m) center / contain no-repeat; }
/* Cooldown timer block */
.pk-cd { text-align: center; padding: 16px 12px; }
.pk-cd-label { display: flex; justify-content: center; align-items: center; gap: 8px; font-family: var(--font-pixel); font-size: 9px; color: var(--px-accent); }
.pk-cd-timer { font-family: var(--font-pixel); font-size: 24px; color: var(--pixel-gold, #ffcc00); margin: 14px 0 4px; text-shadow: 3px 3px 0 #000; }
/* Button rows and the three button looks (tone = popup accent, plain = card, red = danger) */
.pk-row { display: flex; gap: 10px; margin-top: 14px; }
.pk-row > * { flex: 1; min-width: 0; }
.pk-col { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.modal-dialog .pk-btn, .pk-btn {
  --pk-bg: var(--px-card); --pk-lip: rgba(0, 0, 0, 0.45); --pk-top: rgba(255, 255, 255, 0.12); --pk-fg: #fff;
  min-height: 40px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--pk-bg) !important;
  color: var(--pk-fg) !important;
  border: 3px solid var(--pixel-black) !important;
  border-radius: 0 !important;
  clip-path: var(--px-notch);
  box-shadow: inset 0 -4px 0 var(--pk-lip), inset 0 3px 0 var(--pk-top) !important;
  font-family: var(--font-pixel);
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  opacity: 1;
  filter: none;
  transform: none;
}
.modal-dialog .pk-btn:hover:not(:disabled) { filter: brightness(1.12); }
.modal-dialog .pk-btn:active:not(:disabled) { transform: translateY(2px) !important; box-shadow: inset 0 -2px 0 var(--pk-lip), inset 0 3px 0 var(--pk-top) !important; }
.modal-dialog .pk-btn.pk-tone { --pk-bg: var(--px-accent); --pk-lip: var(--px-accent-dark); --pk-top: rgba(255, 255, 255, 0.35); --pk-fg: #0b0914; }
.modal-dialog .pk-btn.pk-red { --pk-bg: #ff2252; --pk-lip: #990f2e; --pk-top: #ff7a95; --pk-fg: #fff; }
.modal-dialog .pk-btn:disabled, .modal-dialog .pk-btn.pk-off { --pk-bg: #2a2533; --pk-lip: #15121c; --pk-top: transparent; --pk-fg: #6e6784; cursor: not-allowed; filter: none; }
.pk-claim * { color: inherit !important; }
.pk-claim { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--font-pixel); font-size: 12px; color: var(--pixel-gold, #ffcc00); }

/* === [SNIPPET: Pixel UI Popup Layouts] === */
/* Per-popup layout rules that finish the mockup look on top of the Popup Kit. */

/* Row cards with an icon socket (boost perks) */
.pk-cards { display: flex; flex-direction: column; gap: 10px; }
.pk-card {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  background: var(--px-card); border: 3px solid var(--pixel-black); clip-path: var(--px-notch);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35);
}
.pk-sock {
  width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--pixel-black); border: 2px solid var(--px-hi); clip-path: var(--px-notch); color: var(--px-accent);
  box-sizing: border-box;
}
.pk-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-card-name { font-family: var(--font-pixel); font-size: 10px; line-height: 1.3; color: #fff; }
.pk-card-desc { font-family: var(--font-pixel-sub); font-size: 10px; line-height: 1.4; color: #b8b2cf; }
.pk-card-desc b { color: #fff; font-weight: normal; }
.pk-card-desc:empty { display: none; }

/* Plinko boost: status text in the one-line well */
.plinko-boost-dialog .boost-status-badge {
  font-family: var(--font-pixel) !important; font-size: 9px !important; color: #fff !important;
  background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important;
}
.plinko-boost-dialog .boost-status-badge.active { color: var(--px-accent) !important; }

/* Prestige Sanctuary: plain header, the prestige button's locked (not enough diamonds) look */
.prestige-dialog .prestige-modal-header { border-bottom: none !important; margin-bottom: 14px; }
.prestige-dialog .prestige-overview-tiles .pk-v { font-size: 12px; }
.modal-dialog .pk-btn.btn-prestige-locked { --pk-bg: #2a2533; --pk-lip: #15121c; --pk-top: transparent; --pk-fg: #6e6784; cursor: not-allowed; filter: none; }

/* Challenge result: title + close, gold NEW RECORD line, three tiles, best line, return button */
.trial-result-dialog .trial-result-header {
  display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px;
  border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 12px;
}
.trial-result-dialog .trial-result-header h2 { font-size: 13px !important; line-height: 1.3 !important; letter-spacing: 0.5px !important; margin: 0 !important; }
.trial-result-dialog .trial-record-pill {
  align-self: center; margin: 0 0 12px; padding: 0 !important; background: none !important; border: none !important;
  box-shadow: none !important; font-family: var(--font-pixel); font-size: 12px; color: var(--pixel-gold, #ffcc00) !important;
  text-shadow: 2px 2px 0 #000; text-align: center;
}
.trial-result-dialog .trial-result-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.trial-result-dialog .trial-result-card { grid-column: auto !important; padding: 9px 8px !important; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.trial-result-dialog .card-lbl { font-family: var(--font-pixel-sub) !important; font-size: 9px !important; color: #b8b2cf !important; text-transform: uppercase; letter-spacing: 0 !important; }
.trial-result-dialog .card-val { font-family: var(--font-pixel) !important; font-size: 10px !important; line-height: 1.4; color: #fff; overflow-wrap: anywhere; text-shadow: none !important; }
.trial-result-dialog .card-val.pk-gold { color: var(--pixel-gold, #ffcc00) !important; }
.trial-result-dialog .trial-best-summary { margin-top: 12px; text-align: center; font-family: var(--font-pixel-sub) !important; font-size: 11px !important; color: #b8b2cf !important; }
.trial-result-dialog .trial-result-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
/* The TRY AGAIN ad button is display:flex !important (Ad Button Standard), so the hidden attribute needs an ID-strength override */
#btnTrialRetry[hidden] { display: none !important; }

/* Choose Difficulty + Overwrite Save (title popups) */
.title-diff-dialog .title-diff-header { border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 12px !important; align-items: center !important; }
.title-diff-dialog .title-diff-header h2 { font-size: 13px !important; line-height: 1.3 !important; letter-spacing: 0.5px !important; }
.title-diff-dialog .title-diff-desc { font-family: var(--font-pixel-sub) !important; font-size: 11px !important; color: #b8b2cf !important; margin: 0 0 12px !important; text-align: left !important; }
.title-diff-dialog .diff-choices-list { display: flex; flex-direction: column; gap: 10px; }
.title-diff-dialog .btn-diff-choice {
  /* display stays un-important: title_menu_modal.js hides locked difficulties with an inline display: none */
  display: flex; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px; width: 100%; padding: 10px 12px !important; text-align: left;
  background: var(--px-card) !important; border: 3px solid var(--pixel-black) !important; clip-path: var(--px-notch);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35) !important; cursor: pointer;
}
.title-diff-dialog .btn-diff-choice:hover { background: var(--px-hover) !important; border-color: var(--px-accent) !important; }
.title-diff-dialog .diff-choice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.title-diff-dialog .diff-choice-name { display: block; font-family: var(--font-pixel) !important; font-size: 10px !important; color: #fff !important; }
.title-diff-dialog .diff-choice-detail { display: block; font-family: var(--font-pixel-sub) !important; font-size: 10px !important; color: #b8b2cf !important; }
.title-diff-dialog .diff-choice-chev {
  width: 8px; height: 14px; flex-shrink: 0; background: var(--px-accent);
  -webkit-mask: var(--px-icon-chev) center / contain no-repeat; mask: var(--px-icon-chev) center / contain no-repeat;
  transition: transform 0.12s steps(2, end);
}
.title-diff-dialog .btn-diff-choice:hover .diff-choice-chev { transform: translateX(3px); }
.title-overwrite-dialog .title-overwrite-warning { display: flex; gap: 10px; align-items: flex-start; color: #ff5a7a; margin: 0 0 12px; }
.title-overwrite-dialog .title-overwrite-warning .pk-text { margin: 0; color: #ff8fa6; }
.title-overwrite-dialog .title-overwrite-stat-value { font-family: var(--font-pixel); font-size: 10px; color: #fff !important; text-shadow: none !important; }
.title-overwrite-dialog .title-overwrite-stat-card { margin: 0 !important; }

/* Achievements: counts, 20-block bar, pixel row cards, gold points */
.ach-dialog .ach-summary { color: #fff; }
.ach-dialog .ach-summary span:last-child { color: var(--pixel-gold, #ffcc00); }
.ach-progress { display: flex; gap: 3px; margin: -2px 0 2px; }
.ach-progress i { flex: 1; height: 12px; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 1px var(--pixel-black); }
.ach-progress i.on { background: var(--px-accent); }
.ach-progress i.part { background: var(--px-accent); opacity: 0.5; }
.ach-dialog .ach-list { gap: 8px; }
.modal-dialog.ach-dialog .ach-row { gap: 12px; padding: 8px 10px; border-color: var(--pixel-black) !important; }
.ach-dialog .ach-icon { width: 36px; height: 36px; }
.ach-dialog .ach-name { font-size: 9px; }
.ach-dialog .ach-desc { margin-top: 5px; font-family: var(--font-pixel-sub); font-size: 10px; line-height: 1.4; color: #b8b2cf; }
.ach-dialog .ach-points { font-size: 8px; white-space: nowrap; color: var(--pixel-gold, #ffcc00); }
.ach-dialog .ach-locked .ach-icon { filter: brightness(0); opacity: 0.45; }
.ach-dialog .ach-locked .ach-name, .ach-dialog .ach-locked .ach-points { color: #b8b2cf; }
.ach-dialog .ach-locked .ach-desc { color: #8f87a8; }


/* Skill tree upgrade popup: uppercase title, NOW / NEXT rows split by a dashed line */
.node-popup-card .inspector-title { text-transform: uppercase; }
.node-popup-card .inspector-stats .stat-row > span { font-family: var(--font-pixel); font-size: 8px; color: #b8b2cf; }
.node-popup-card .inspector-stats .stat-row#statNextRow > span { color: var(--px-accent, var(--mode-accent)); }
.node-popup-card .inspector-stats .stat-row + .stat-row { border-top: 2px dashed rgba(255, 255, 255, 0.08); margin-top: 8px; padding-top: 8px; }

/* Settings: toggle buttons are separate pixel boxes with gaps (mockup), not one joined strip */
.modal-dialog.settings-dialog .segmented-control { background: none !important; border: none !important; box-shadow: none !important; clip-path: none; padding: 0 !important; gap: 6px !important; }
.modal-dialog.settings-dialog .btn-segment {
  min-height: 30px; background: rgba(0, 0, 0, 0.35) !important; color: #b8b2cf !important;
  border: 3px solid var(--pixel-black) !important; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35) !important;
}

/* === [SNIPPET: Pixel UI Card Shops] === */
/* Arcade Lab, Ticket Factory, Mint Shop and Foundry share .powerup-list-item cards. Cards take the shop color,
   the vertical level bar stays on the far left (shop color, no glow), buy buttons use the shop color when
   affordable and stay dark when not. Balances are plain [icon] amount, no box. */
.modal-dialog .powerup-list-item {
  background: var(--px-card) !important;
  border: 3px solid var(--pixel-black) !important;
  border-radius: 0 !important;
  clip-path: var(--px-notch);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35), inset 2px 2px 0 rgba(255, 255, 255, 0.05) !important;
}
.modal-dialog .powerup-list-item.item-maxed { border-color: var(--pixel-gold) !important; }
/* item-locked = cannot afford yet: same card, a shade darker */
.modal-dialog .powerup-list-item.item-locked { background: color-mix(in srgb, var(--px-card) 60%, #000) !important; }
.modal-dialog .powerup-vertical-meter {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 2px solid var(--pixel-black) !important;
  border-radius: 0 !important;
}
.modal-dialog .powerup-vertical-meter .lvl-pip {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--pixel-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.modal-dialog .powerup-vertical-meter .lvl-pip.pip-filled { background: var(--px-accent) !important; }
.modal-dialog .btn-powerup-action {
  background: rgba(0, 0, 0, 0.35) !important;
  color: #8f86ab !important;
}
.modal-dialog .btn-powerup-action.btn-can-afford {
  background: var(--px-accent) !important;
  color: #0b0914 !important;
  box-shadow: inset 0 -4px 0 var(--px-accent-dark), inset 0 3px 0 rgba(255, 255, 255, 0.35) !important;
}
.modal-dialog .btn-powerup-action.btn-can-afford:hover { filter: brightness(1.1); transform: none !important; }
.modal-dialog .btn-powerup-action.btn-can-afford:active:not(:disabled) { transform: translateY(2px) !important; }
.modal-dialog .modal-star-balance,
.modal-dialog .factory-balance {
  background: none !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  font-size: 12px !important;
}
.modal-dialog .factory-exchange {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 3px solid var(--pixel-black) !important;
  outline: none !important;
  clip-path: var(--px-notch);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.modal-dialog .btn-factory-trade {
  background: var(--px-accent) !important;
  color: #0b0914 !important;
  box-shadow: inset 0 -4px 0 var(--px-accent-dark), inset 0 3px 0 rgba(255, 255, 255, 0.35) !important;
}
.modal-dialog .btn-factory-trade:disabled { opacity: 0.45; }
/* Card text and icon like the mockup: white name, Silkscreen description, effect line in the shop color, the icon in a
   black socket, compact [icon] cost / MAX button */
.modal-dialog .powerup-item-name { color: #fff !important; font-family: var(--font-pixel) !important; font-size: 10px !important; text-shadow: none !important; }
.modal-dialog .powerup-item-desc { font-family: var(--font-pixel-sub) !important; font-size: 10px !important; line-height: 1.4 !important; color: #b8b2cf !important; }
.modal-dialog .powerup-item-effect { font-family: var(--font-pixel-sub) !important; font-size: 10px !important; line-height: 1.4 !important; color: var(--px-accent) !important; }
.modal-dialog .powerup-list-icon {
  background: var(--pixel-black) !important;
  border: 2px solid var(--px-hi) !important;
  border-radius: 0 !important;
  clip-path: var(--px-notch);
  box-shadow: none !important;
}
.modal-dialog .btn-powerup-action { min-width: 84px; font-size: 10px !important; gap: 6px; }
/* Timed boosts (js/ui/boost_fuel_ui.js): a timer bar in the shop color under the effect line and a TOP UP button under
   the buy button. An empty boost greys its effect line and shows EMPTY in red. */
.modal-dialog .powerup-item-actions { gap: 6px; }
.modal-dialog .fuel-strip { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.modal-dialog .fuel-bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--pixel-black);
  overflow: hidden;
}
.modal-dialog .fuel-fill { display: block; height: 100%; width: 0; background: var(--px-accent); }
.modal-dialog .fuel-time { font-family: var(--font-pixel-sub); font-size: 10px; color: #b8b2cf; white-space: nowrap; }
.modal-dialog .fuel-strip.fuel-empty .fuel-time { color: var(--pixel-red); }
.modal-dialog .powerup-list-item.boost-empty .powerup-item-effect { opacity: 0.5; }
.modal-dialog .btn-fuel-topup[hidden] { display: none !important; }
/* Convert Tickets: amount chips are plain dark buttons (mockup), only CONVERT is filled */
.modal-dialog .btn-convert-chip {
  background: var(--px-card) !important;
  color: #fff !important;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.45), inset 0 3px 0 rgba(255, 255, 255, 0.12) !important;
  min-height: 30px;
  font-size: 8px !important;
}

/* BaseModal headers are sticky (content scrolls under them), so they stay opaque: panel color + the same scanlines */
.modal-dialog:not(.fullscreen-dialog) .modal-header {
  background-color: var(--px-panel) !important;
  background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 6px) !important;
}

/* === [SNIPPET: Pixel UI Main Menu] === */
/* MAIN MENU items: pixel cards, each icon sits in a black socket (grid cell shared by ::before and the icon, so the
   icon markup is untouched), pixel chevron that steps right on hover. EXIT keeps its red. */
.game-menu-header {
  background: none !important;
  border-bottom: none !important;
  padding: 14px 16px 4px !important;
}
.game-menu-item {
  background: var(--px-card) !important;
  border: 3px solid var(--pixel-black) !important;
  clip-path: var(--px-notch);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35) !important;
  padding: 8px 14px 8px 8px !important;
}
.game-menu-item:hover { background: var(--px-hover) !important; border-color: var(--px-accent) !important; }
.game-menu-item.item-danger { background: #3a1224 !important; }
.game-menu-item.item-danger:hover { background: #4d1830 !important; border-color: var(--pixel-red) !important; }
.game-menu-item-left {
  display: grid !important;
  grid-template-columns: 36px 1fr;
  align-items: center;
  column-gap: 12px;
}
.game-menu-item-left::before {
  content: "";
  grid-area: 1 / 1;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  background: var(--pixel-black);
  border: 2px solid var(--px-hi);
  clip-path: var(--px-notch);
}
/* z-index: the clip-path socket paints in a later layer than plain (non clip-path) icons like the gear */
.game-menu-item-left > .menu-icon { grid-area: 1 / 1; justify-self: center; z-index: 1; }
.game-menu-item-left > .menu-item-info { grid-area: 1 / 2; gap: 6px; }
.game-menu-item .menu-item-desc { font-family: var(--font-pixel-sub) !important; font-size: 10px !important; color: #b8b2cf !important; }
.game-menu-item .menu-item-arrow {
  width: 8px;
  height: 14px;
  font-size: 0 !important;
  background: var(--px-accent);
  -webkit-mask: var(--px-icon-chev) center / contain no-repeat;
  mask: var(--px-icon-chev) center / contain no-repeat;
  transition: transform 0.12s steps(2, end);
}
.game-menu-item:hover .menu-item-arrow { transform: translateX(3px); }
.game-menu-item.item-danger .menu-item-arrow { background: #ff5a7a; }
/* Menu icons: the mockup's pixel icons (drawn on a 10px grid, one color each) instead of the old clip-path shapes */
.game-menu-dialog .menu-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  clip-path: none !important;
  image-rendering: pixelated;
}
.game-menu-dialog .home-pixel-icon { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M4 0h2v1H4zM3 1h4v1H3zM2 2h6v1H2zM1 3h8v1H1zM0 4h10v1H0zM1 5h8v1H1zM1 6h3v1H1zM6 6h3v1H6zM1 7h3v1H1zM6 7h3v1H6zM1 8h3v1H1zM6 8h3v1H6zM1 9h3v1H1zM6 9h3v1H6z'/%3E%3C/svg%3E") center / contain no-repeat !important; }
.game-menu-dialog .settings-pixel-icon { width: 22px !important; height: 22px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cg fill='%23000'%3E%3Crect x='9' y='1' width='6' height='22'/%3E%3Crect x='1' y='9' width='22' height='6'/%3E%3Crect x='4' y='4' width='5' height='5'/%3E%3Crect x='15' y='4' width='5' height='5'/%3E%3Crect x='4' y='15' width='5' height='5'/%3E%3Crect x='15' y='15' width='5' height='5'/%3E%3Crect x='4' y='6' width='16' height='12'/%3E%3Crect x='6' y='4' width='12' height='16'/%3E%3C/g%3E%3Cg fill='%23e2e8f0'%3E%3Crect x='10' y='2' width='4' height='20'/%3E%3Crect x='2' y='10' width='20' height='4'/%3E%3Crect x='5' y='5' width='3' height='3'/%3E%3Crect x='16' y='5' width='3' height='3'/%3E%3Crect x='5' y='16' width='3' height='3'/%3E%3Crect x='16' y='16' width='3' height='3'/%3E%3Crect x='5' y='7' width='14' height='10'/%3E%3Crect x='7' y='5' width='10' height='14'/%3E%3C/g%3E%3Crect x='9' y='9' width='6' height='6' fill='%23000'/%3E%3Crect x='10' y='10' width='4' height='4' fill='%23141122'/%3E%3C/svg%3E") center / contain no-repeat !important; }
.game-menu-dialog .rate-pixel-icon { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffcc00' d='M4 0h2v1H4zM4 1h2v1H4zM3 2h4v1H3zM0 3h10v1H0zM1 4h8v1H1zM2 5h6v1H2zM2 6h6v1H2zM1 7h3v1H1zM6 7h3v1H6zM1 8h2v1H1zM7 8h2v1H7zM0 9h2v1H0zM8 9h2v1H8z'/%3E%3C/svg%3E") center / contain no-repeat !important; }
.game-menu-dialog .exit-pixel-icon { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff5a7a' d='M0 0h5v1H0zM0 1h1v1H0zM4 1h1v1H4zM7 1h1v1H7zM0 2h1v1H0zM4 2h1v1H4zM7 2h2v1H7zM0 3h1v1H0zM2 3h8v1H2zM0 4h1v1H0zM2 4h8v1H2zM0 5h1v1H0zM4 5h1v1H4zM7 5h2v1H7zM0 6h1v1H0zM4 6h1v1H4zM7 6h1v1H7zM0 7h1v1H0zM4 7h1v1H4zM0 8h5v1H0z'/%3E%3C/svg%3E") center / contain no-repeat !important; }

/* === [SNIPPET: Pixel UI Settings] === */
/* Settings keeps its layout; cards, toggles and sliders get the pixel treatment in the neutral purple */
.settings-header { border-bottom: none !important; }
.settings-section-title { color: var(--px-accent) !important; }
.settings-section-line { background: none !important; border-bottom: 2px dashed rgba(255, 255, 255, 0.1) !important; height: 0 !important; }
.settings-dialog .settings-card {
  background: var(--px-card) !important;
  border: 3px solid var(--pixel-black) !important;
  clip-path: var(--px-notch);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35) !important;
}
.settings-dialog .volume-val-badge { color: var(--px-accent) !important; }
.settings-dialog .settings-icon-badge { clip-path: var(--px-notch); }
.settings-dialog .segmented-control {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 3px solid var(--pixel-black) !important;
  clip-path: var(--px-notch);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35) !important;
}
.settings-dialog .btn-segment { clip-path: var(--px-notch); border: none !important; }
.settings-dialog .btn-segment.active {
  background: var(--px-accent) !important;
  color: #0b0914 !important;
  box-shadow: inset 0 -3px 0 var(--px-accent-dark) !important;
}
.settings-dialog .btn-segment:hover:not(.active) { background: var(--px-hover) !important; }
/* UI Scaling is a row of tap buttons (same segmented control); the old dial dot is not shown */
.settings-dialog .ui-scale-segments .btn-segment { padding-left: 2px; padding-right: 2px; min-width: 0; }
.settings-dialog .ui-scale-segments .dial-mark:hover { transform: none; }
.settings-dialog .ui-scale-segments .dial-mark.active { text-shadow: none; }
/* Volume sliders: flat purple fill up to the knob (--fill is set by main.js), white pixel knob */
.settings-dialog .arcade-slider {
  height: 14px !important;
  background: linear-gradient(90deg, var(--px-accent) var(--fill, 50%), rgba(0, 0, 0, 0.5) var(--fill, 50%)) !important;
  border: 3px solid var(--pixel-black) !important;
  border-radius: 0 !important;
}
.settings-dialog .arcade-slider::-webkit-slider-thumb {
  width: 14px;
  height: 22px;
  background: var(--pixel-white) !important;
  border: 3px solid var(--pixel-black) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 -3px 0 #b8b2cf !important;
}
.settings-dialog .arcade-slider::-moz-range-thumb {
  width: 10px;
  height: 18px;
  background: var(--pixel-white) !important;
  border: 3px solid var(--pixel-black) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 -3px 0 #b8b2cf !important;
}
/* Mute toggles and the Save Now / View Achievements buttons in the same purple (no yellow, no gray) */
.settings-dialog .btn-sound-icon-toggle {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 3px solid var(--pixel-black) !important;
  box-shadow: none !important;
  clip-path: var(--px-notch);
}
.settings-dialog .btn-sound-icon-toggle:hover { background: var(--px-hover) !important; }
.settings-dialog .btn-sound-icon-toggle.muted { background: rgba(0, 0, 0, 0.35) !important; }
/* Audio icons in Settings: the same pixel art recolored to the neutral purple (muted: dim purple with a light X) */
.settings-dialog .sfx-pixel-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 shape-rendering=%22crispEdges%22%3E%3C!-- Speaker Outline (Black %23000000) --%3E%3Crect x=%221%22 y=%228%22 width=%226%22 height=%228%22 fill=%22%23000000%22/%3E%3Cpolygon points=%226%2C8 13%2C3 14%2C3 14%2C21 13%2C21 6%2C16%22 fill=%22%23000000%22/%3E%3C!-- Solid Flat Cyan Fill (%23b9a6ff) --%3E%3Crect x=%222%22 y=%229%22 width=%224%22 height=%226%22 fill=%22%23b9a6ff%22/%3E%3Cpolygon points=%226%2C9 12%2C4 13%2C4 13%2C20 12%2C20 6%2C15%22 fill=%22%23b9a6ff%22/%3E%3C!-- Solid Flat Gold Waves (%23b9a6ff) --%3E%3C!-- Inner Wave --%3E%3Crect x=%2215%22 y=%229%22 width=%222%22 height=%226%22 fill=%22%23000000%22/%3E%3Crect x=%2214%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23000000%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23000000%22/%3E%3Crect x=%2215%22 y=%2210%22 width=%221%22 height=%224%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2214%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%221%22 height=%221%22 fill=%22%23b9a6ff%22/%3E%3C!-- Outer Wave --%3E%3Crect x=%2220%22 y=%226%22 width=%222%22 height=%2212%22 fill=%22%23000000%22/%3E%3Crect x=%2219%22 y=%225%22 width=%222%22 height=%222%22 fill=%22%23000000%22/%3E%3Crect x=%2219%22 y=%2217%22 width=%222%22 height=%222%22 fill=%22%23000000%22/%3E%3Crect x=%2220%22 y=%227%22 width=%221%22 height=%2210%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2219%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2219%22 y=%2217%22 width=%221%22 height=%221%22 fill=%22%23b9a6ff%22/%3E%3C/svg%3E") !important; }
.settings-dialog .sfx-pixel-icon.muted, .settings-dialog .btn-sound-icon-toggle.muted .sfx-pixel-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 shape-rendering=%22crispEdges%22%3E%3C!-- Speaker Outline (Black %23000000) --%3E%3Crect x=%221%22 y=%228%22 width=%226%22 height=%228%22 fill=%22%23000000%22/%3E%3Cpolygon points=%226%2C8 13%2C3 14%2C3 14%2C21 13%2C21 6%2C16%22 fill=%22%23000000%22/%3E%3C!-- Solid Flat Muted Gray Fill (%235a4a8a) --%3E%3Crect x=%222%22 y=%229%22 width=%224%22 height=%226%22 fill=%22%235a4a8a%22/%3E%3Cpolygon points=%226%2C9 12%2C4 13%2C4 13%2C20 12%2C20 6%2C15%22 fill=%22%235a4a8a%22/%3E%3C!-- Solid Flat Red X (%23b9a6ff) --%3E%3Crect x=%2215%22 y=%227%22 width=%228%22 height=%2210%22 fill=%22%23000000%22/%3E%3Crect x=%2215%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2217%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2219%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2221%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2221%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2219%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2217%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2215%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3C/svg%3E") !important; }
.settings-dialog .bgm-pixel-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 shape-rendering=%22crispEdges%22%3E%3C!-- Note Outline (Black %23000000) --%3E%3Crect x=%226%22 y=%222%22 width=%2216%22 height=%225%22 fill=%22%23000000%22/%3E%3Crect x=%226%22 y=%224%22 width=%224%22 height=%2214%22 fill=%22%23000000%22/%3E%3Crect x=%2218%22 y=%224%22 width=%224%22 height=%2211%22 fill=%22%23000000%22/%3E%3Crect x=%222%22 y=%2214%22 width=%229%22 height=%227%22 fill=%22%23000000%22/%3E%3Crect x=%223%22 y=%2213%22 width=%227%22 height=%229%22 fill=%22%23000000%22/%3E%3Crect x=%2214%22 y=%2211%22 width=%229%22 height=%227%22 fill=%22%23000000%22/%3E%3Crect x=%2215%22 y=%2210%22 width=%227%22 height=%229%22 fill=%22%23000000%22/%3E%3C!-- Pure Solid Flat Pink Fill (%23b9a6ff) --%3E%3Crect x=%227%22 y=%223%22 width=%2214%22 height=%223%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%227%22 y=%226%22 width=%222%22 height=%2210%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2219%22 y=%226%22 width=%222%22 height=%227%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%223%22 y=%2215%22 width=%227%22 height=%225%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%224%22 y=%2214%22 width=%225%22 height=%227%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2215%22 y=%2212%22 width=%227%22 height=%225%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2216%22 y=%2211%22 width=%225%22 height=%227%22 fill=%22%23b9a6ff%22/%3E%3C/svg%3E") !important; }
.settings-dialog .bgm-pixel-icon.muted, .settings-dialog .btn-sound-icon-toggle.muted .bgm-pixel-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 shape-rendering=%22crispEdges%22%3E%3C!-- Muted Note Silhouette --%3E%3Crect x=%224%22 y=%224%22 width=%2211%22 height=%224%22 fill=%22%23000000%22/%3E%3Crect x=%224%22 y=%226%22 width=%223%22 height=%2212%22 fill=%22%23000000%22/%3E%3Crect x=%2212%22 y=%226%22 width=%223%22 height=%229%22 fill=%22%23000000%22/%3E%3Crect x=%221%22 y=%2214%22 width=%228%22 height=%227%22 fill=%22%23000000%22/%3E%3Crect x=%222%22 y=%2213%22 width=%226%22 height=%229%22 fill=%22%23000000%22/%3E%3Crect x=%229%22 y=%2212%22 width=%228%22 height=%227%22 fill=%22%23000000%22/%3E%3Crect x=%2210%22 y=%2211%22 width=%226%22 height=%229%22 fill=%22%23000000%22/%3E%3C!-- Solid Flat Gray Fill (%235a4a8a) --%3E%3Crect x=%225%22 y=%225%22 width=%229%22 height=%222%22 fill=%22%235a4a8a%22/%3E%3Crect x=%225%22 y=%227%22 width=%221%22 height=%229%22 fill=%22%235a4a8a%22/%3E%3Crect x=%2213%22 y=%227%22 width=%221%22 height=%226%22 fill=%22%235a4a8a%22/%3E%3Crect x=%222%22 y=%2215%22 width=%226%22 height=%225%22 fill=%22%235a4a8a%22/%3E%3Crect x=%2210%22 y=%2213%22 width=%226%22 height=%225%22 fill=%22%235a4a8a%22/%3E%3C!-- Solid Flat Red X (%23b9a6ff) --%3E%3Crect x=%2215%22 y=%222%22 width=%228%22 height=%2210%22 fill=%22%23000000%22/%3E%3Crect x=%2215%22 y=%223%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2217%22 y=%225%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2219%22 y=%227%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2221%22 y=%229%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2221%22 y=%223%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2219%22 y=%225%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2217%22 y=%227%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3Crect x=%2215%22 y=%229%22 width=%222%22 height=%222%22 fill=%22%23b9a6ff%22/%3E%3C/svg%3E") !important; }
.settings-dialog :is(.btn-save-now, .btn-reset-audio) {
  background: var(--px-accent-dark) !important;
  color: var(--pixel-white) !important;
}
.settings-dialog :is(.btn-save-now, .btn-reset-audio):hover { background: var(--px-hi) !important; }

/* === [SNIPPET: Pixel UI Game Mode Select] === */
/* One sideways-scrolling row as before, cards shaped like the mockup: pixel-notched corners on the card and on its art
   box (clip-path; safe now that the active card has no outline - its glow-free border shows the mode color, and the
   unlock glow lives inside the card, which already clips with overflow: hidden). Cards keep their per-attraction
   active colors and light up in them on hover; the active card's name takes the mode color. Each card shows
   [icon] balance (filled by openGameModesModal). Locked cards are darker so their art does not show through. */
.game-modes-header { border-bottom: none !important; }
.game-modes-dialog .mode-card-btn {
  background: var(--px-card);
  border-color: var(--pixel-black);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35) !important;
  clip-path: var(--px-notch);
  position: relative;
}
.game-modes-dialog .mode-card-art {
  border: 2px solid var(--px-hi) !important;
  clip-path: var(--px-notch);
  box-shadow: none !important;
}
.game-modes-dialog .mode-card-art::before { display: none; }
/* Pixel-art card art (js/ui/mode_select_art.js): a 93x40 canvas filling the 186x80 art box at exactly 2x, under the
   scanlines (::after); the old <img> art is the fallback and is hidden only once the canvas is in */
.game-modes-dialog .mode-card-art .mode-pixel-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  z-index: 1;
}
.game-modes-dialog .mode-card-art.has-pixel-art .mode-art-img { display: none; }
.game-modes-dialog .mode-card-title { font-size: 10px; }
.game-modes-dialog .mode-card-currency { font-size: 9px; color: var(--pixel-white); gap: 6px; }
#modeBtnClaw.mode-card-btn:hover { background: #172b38; border-color: var(--pixel-cyan); }
#modeBtnPlinko.mode-card-btn:hover { background: #2b121e; border-color: var(--pixel-red); }
#modeBtnCoinFlip.mode-card-btn:hover { background: #0d2e1c; border-color: #00e676; }
#modeBtnCannon.mode-card-btn:hover { background: #2a1608; border-color: #ff8a00; }
#modeBtnEndGame.mode-card-btn:hover { background: #1e102d; border-color: #a855f7; }
#modeBtnClaw.active .mode-card-title { color: var(--pixel-cyan); }
#modeBtnPlinko.active .mode-card-title { color: var(--pixel-red); }
#modeBtnCoinFlip.active .mode-card-title { color: #00e676; }
#modeBtnCannon.active .mode-card-title { color: #ff8a00; }
#modeBtnEndGame.active .mode-card-title { color: #a855f7; }
#modeBtnClaw.active .mode-card-art { border-color: var(--pixel-cyan) !important; }
#modeBtnPlinko.active .mode-card-art { border-color: var(--pixel-red) !important; }
#modeBtnCoinFlip.active .mode-card-art { border-color: #00e676 !important; }
#modeBtnCannon.active .mode-card-art { border-color: #ff8a00 !important; }
#modeBtnEndGame.active .mode-card-art { border-color: #a855f7 !important; }
.game-modes-dialog .mode-card-btn.mode-card-locked:hover { background: var(--px-card); border-color: #3f3258; }
.game-modes-dialog .mode-card-btn.mode-card-locked .mode-card-info-group { filter: blur(2px) brightness(0.22); }
.game-modes-dialog .mode-card-locked-group { background: rgba(6, 4, 14, 0.6); }
.game-modes-dialog .mode-card-btn.active,
.game-modes-dialog .mode-card-btn.active:focus,
.game-modes-dialog .mode-card-btn.active:focus-visible { outline: none !important; }

/* === [SNIPPET: Pixel UI Mystic Shop] === */
/* Cards stay as in the game. Each attraction row now opens with a header: attraction name in its own color, a
   dashed rule and RESPEC (Mystic purple, paid in that attraction's currency, cooldown bar under it). The header
   PRESTIGE indicator is a purple pixel button, the balance is plain [diamond] amount. */
#mysticShopModal .mystic-modal-header { border-bottom: none !important; }
#mysticShopModal .mystic-game-row {
  flex-direction: column !important;
  gap: 8px !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#mysticShopModal .mystic-row-head { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
#mysticShopModal .mystic-row-title { font-family: var(--font-pixel); font-size: 11px; color: var(--respec-row-color, #c084fc); white-space: nowrap; }
#mysticShopModal .mystic-row-head::after { content: ""; order: 1; flex: 1; border-top: 2px dashed rgba(255, 255, 255, 0.1); }
#mysticShopModal .mystic-row-head .mystic-respec-wrap { order: 2; margin-top: 0; align-self: center; width: auto; }
#mysticShopModal .row-claw { --respec-row-color: #00f0ff; }
#mysticShopModal .row-plinko { --respec-row-color: #ff2252; }
#mysticShopModal .row-coin_flip { --respec-row-color: #00e676; }
#mysticShopModal .row-cannon { --respec-row-color: #ff8a00; }
#mysticShopModal .mystic-respec-wrap .mystic-respec-btn {
  flex-direction: row !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: var(--px-accent) !important;
  color: #0b0914 !important;
  outline: none !important;
  box-shadow: inset 0 -4px 0 var(--px-accent-dark), inset 0 3px 0 rgba(255, 255, 255, 0.35) !important;
}
#mysticShopModal .mystic-respec-btn .mystic-respec-btn-label { color: #0b0914; font-size: 9px; }
#mysticShopModal .mystic-respec-btn .currency-val { color: #0b0914 !important; opacity: 1 !important; }
#mysticShopModal .mystic-respec-bar { border: none !important; background: rgba(0, 0, 0, 0.45) !important; height: 4px !important; }
#mysticShopModal #mysticUnclaimedIndicator {
  background: var(--px-accent) !important;
  color: #0b0914 !important;
  outline: none !important;
  box-shadow: inset 0 -4px 0 var(--px-accent-dark), inset 0 3px 0 rgba(255, 255, 255, 0.35) !important;
}
#mysticShopModal .mystic-balance-badge {
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* === [SNIPPET: Pixel UI Inset Wells & Row Cards] === */
/* Dark inset wells (timers, stat tiles, diamond cards, offline bank, result tiles, boost status, overwrite stats) and
   row cards (boost perks, achievements, difficulty choices) share the pixel corner + bevel
   treatment. Row cards keep their existing border colors where the color means something (unlocked achievements,
   difficulty tiers, offline 4x). */
.modal-dialog :is(.trial-cd-box, .trial-stat-card, .prestige-banked-card, .prestige-unclaimed-card, .prestige-action-card,
  .prestige-popup-col, .offline-bank-container, .trial-result-card, .boost-status-banner, .title-overwrite-stat-card,
  .convert-preview, .convert-balance) {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 3px solid var(--pixel-black) !important;
  border-radius: 0 !important;
  outline: none !important;
  clip-path: var(--px-notch);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35) !important;
}
.modal-dialog :is(.boost-perk-card, .ach-row, .btn-diff-choice) {
  border-width: 3px !important;
  border-style: solid !important;
  border-radius: 0 !important;
  outline: none !important;
  clip-path: var(--px-notch);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35) !important;
}
/* Difficulty choices keep their own tier fills; the other row cards take the popup card color */
.modal-dialog :is(.boost-perk-card, .ach-row) { background: var(--px-card) !important; }
.modal-dialog .boost-perk-card { border-color: var(--pixel-black) !important; }
.modal-dialog .boost-perk-card .perk-label { color: var(--px-accent) !important; }
.modal-dialog .ach-row:not(.ach-done) { border-color: var(--pixel-black) !important; }
.modal-dialog .trial-cd-badge { color: var(--px-accent); }

/* === [SNIPPET: Pixel UI Skill Tree Upgrade Popup] === */
/* The upgrade popup keeps its layout: plain level text, a new per-level bar under the title (js/ui/inspector_level_meter.js),
   CURRENT / NEXT stacked in a dark inset well, gold UPGRADE button. Close button keeps its small size. */
.node-popup-card .btn-close-popup {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
}
.node-popup-card .btn-close-popup::before { width: 10px; height: 10px; }
.node-popup-card .inspector-meter { display: flex; gap: 2px; margin: 2px 1px 10px; }
.node-popup-card .inspector-meter[hidden] { display: none; }
.node-popup-card .inspector-meter > i { flex: 1; height: 6px; background: rgba(0, 0, 0, 0.45); box-shadow: 0 0 0 1px var(--pixel-black); }
.node-popup-card .inspector-meter > i.on { background: var(--pixel-gold); }
.node-popup-card .inspector-stats {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 3px solid var(--pixel-black) !important;
  clip-path: var(--px-notch);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35) !important;
}
/* Unlock button: pixel shape only while it cannot be afforded (the affordable state keeps its glow animation unclipped) */
.game-modes-dialog .btn-mode-unlock.cannot-afford {
  clip-path: var(--px-notch);
  border: 3px solid var(--pixel-black) !important;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35) !important;
}

/* === [SNIPPET: Pixel UI Title Screen] === */
/* Title screen ("Marquee" mockup): the logo sits in an arcade sign (the popup frame, see Dialog Frame) between two rows
   of chasing bulbs, then one big gold CONTINUE / START, NEW GAME under it at the same width but shorter, and
   ACHIEVEMENTS / SETTINGS / RATE US as small buttons along the bottom edge. The animated #titleBgCanvas stays behind
   it. CONTINUE is gold, not green: green means an ad button. The markup ids and JS (title_menu_modal.js) are unchanged. */
:root {
  --px-icon-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h9v1H0zM0 1h1v2H0zM8 1h1v2H8zM2 1h5v2H2zM1 3h7v1H1zM2 4h5v1H2zM3 5h3v1H3zM4 6h1v1H4zM3 7h3v1H3zM2 8h5v1H2z'/%3E%3C/svg%3E");
  --px-icon-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h2v1H4zM1 1h1v1H1zM3 1h4v1H3zM8 1h1v1H8zM2 2h6v1H2zM1 3h3v1H1zM6 3h3v1H6zM0 4h4v2H0zM6 4h4v2H6zM1 6h3v1H1zM6 6h3v1H6zM2 7h6v1H2zM1 8h1v1H1zM3 8h4v1H3zM8 8h1v1H8zM4 9h2v1H4z'/%3E%3C/svg%3E");
  --px-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h2v2H4zM3 2h4v1H3zM0 3h10v1H0zM1 4h8v1H1zM2 5h6v2H2zM1 7h3v1H1zM6 7h3v1H6zM1 8h2v1H1zM7 8h2v1H7zM0 9h2v1H0zM8 9h2v1H8z'/%3E%3C/svg%3E");
}
.title-cabinet-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  /* keep the stack clear of the bottom button row */
  margin-bottom: 44px;
}
.title-marquee {
  --px-s: 3px;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.title-bulbs {
  display: block;
  /* exactly 12 lit + 12 dim bulbs (24px period, +6 so it starts and ends on a bulb in both chase steps): no cut-off bulb at the ends */
  width: 294px;
  align-self: center;
  height: 6px;
  /* lit, gap, dim, gap: shifting by half a period swaps lit and dim bulbs (hard steps, no glow) */
  background: linear-gradient(90deg, #ffcc00 0 6px, transparent 6px 12px, #5c4a12 12px 18px, transparent 18px 24px) 0 0 / 24px 6px repeat-x;
  animation: titleBulbChase 0.8s steps(1, end) infinite;
}
@keyframes titleBulbChase { 50% { background-position: 12px 0; } }
/* Follows the UI SCALING setting like the sidebar. The default level (100%) is --ui-scale 0.9, which keeps the
   designed size; 80% .. 120% shrink or grow the whole menu with it (live, also while Settings is open on top). */
.title-cabinet-frame,
.title-menu-foot,
.title-version-indicator { zoom: calc(var(--ui-scale, 0.9) / 0.9); }
.title-pixel-logo {
  margin: 0 22px;
  font-family: 'Press Start 2P', monospace;
  font-size: 22px;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
  text-shadow: 3px 3px 0 #3b2a66;
}
.title-pixel-logo .title-highlight {
  display: inline-block;
  margin-top: 10px;
  font-size: 26px;
  color: var(--pixel-gold, #ffcc00);
  text-shadow: 3px 3px 0 #7a4f00;
}

/* Pixel push button (base owns the look; variants only set tokens) */
.btn-title-menu {
  --tb-bg: var(--px-card); --tb-lip: rgba(0, 0, 0, 0.45); --tb-top: rgba(255, 255, 255, 0.12); --tb-fg: #fff;
  --tb-h: 32px; --tb-fs: 9px; --tb-pad: 12px;
  height: var(--tb-h);
  padding: 0 var(--tb-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--tb-bg);
  color: var(--tb-fg);
  border: 3px solid var(--pixel-black, #000);
  border-radius: 0;
  clip-path: var(--px-notch);
  box-shadow: inset 0 -4px 0 var(--tb-lip), inset 0 3px 0 var(--tb-top);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--tb-fs);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.btn-title-menu:hover { filter: brightness(1.12); }
.btn-title-menu:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--tb-lip), inset 0 3px 0 var(--tb-top); }
.btn-title-menu::before {
  content: "";
  flex-shrink: 0;
  width: var(--tb-ico-w, 12px);
  height: var(--tb-ico-h, 12px);
  background: currentColor;
  -webkit-mask: var(--tb-ico) center / contain no-repeat;
  mask: var(--tb-ico) center / contain no-repeat;
  display: var(--tb-ico-display, none);
}
.title-menu-buttons { display: flex; flex-direction: column; gap: 8px; width: 264px; }
.btn-title-start {
  --tb-bg: #ffcc00; --tb-lip: #b38f00; --tb-top: #ffe680; --tb-fg: #1a1300; --tb-h: 46px; --tb-fs: 12px;
  --tb-ico: var(--px-icon-play); --tb-ico-display: block; --tb-ico-w: 7px; --tb-ico-h: 11px;
}
.btn-title-new-game { --tb-h: 30px; --tb-fs: 8px; }
.btn-title-small { --tb-h: 30px; --tb-fs: 8px; --tb-pad: 10px; --tb-ico-display: block; }
.btn-title-achievements { --tb-ico: var(--px-icon-trophy); }
.btn-title-settings { --tb-ico: var(--px-icon-gear); }
.btn-title-rate { --tb-ico: var(--px-icon-star); }
.title-menu-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  display: flex;
  justify-content: center;
  gap: 8px;
}
/* A new difficulty or attraction is waiting: the button's border blinks in hard steps (no glow) */
.btn-title-menu.btn-new-mode-pulse { animation: titleNewModeBlink 1s steps(1, end) infinite; }
@keyframes titleNewModeBlink { 50% { border-color: var(--px-accent); } }
.title-version-indicator {
  position: absolute;
  right: max(48px, env(safe-area-inset-right, 48px)); /* clear of rounded phone corners, like the playfield */
  bottom: calc(max(16px, env(safe-area-inset-bottom, 16px)) + 10px); /* level with the bottom button row */
  font-family: 'Silkscreen', monospace;
  font-size: 10px;
  color: #6e6784;
  pointer-events: none;
}
/* Floating Mystic Orb in the upper left (the sprite bobs by itself); shown once an orb is collected, click opens the orb info popup */
.title-orb-btn {
  position: absolute;
  left: max(48px, env(safe-area-inset-left, 48px)); /* clear of rounded phone corners, like the playfield */
  top: max(16px, env(safe-area-inset-top, 16px));
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  zoom: calc(var(--ui-scale, 0.9) / 0.9);
}
.title-orb-btn:focus, .title-orb-btn:focus-visible, .title-orb-btn:active { outline: none !important; }
.title-orb-btn:hover { filter: brightness(1.2); }
.title-orb-btn img { display: block; width: 64px; height: 64px; image-rendering: pixelated; pointer-events: none; }
.orb-info-count { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.orb-info-count .orb-tag { --orb-size: 40px; font-size: 14px; }
.orb-info-bonus { font-family: 'Press Start 2P', monospace; font-size: 14px; color: #e9d5ff; }
.title-version-indicator.has-update::after { content: " (UPDATE AVAILABLE)"; color: var(--pixel-gold, #ffcc00); }
@media (prefers-reduced-motion: reduce) {
  .title-bulbs, .btn-title-menu.btn-new-mode-pulse { animation: none; }
}