:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #090d18; color: #f3f4f8; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; display: block; }
[hidden] { display: none !important; }
.jokers-game { width: 100%; min-height: 360px; height: 100vh; height: 100svh; position: relative; background: #000; }
.jokers-game canvas { display: block; width: 100%; height: 100%; }
.jokers-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 16px; text-align: center; background: #090d18; }
.jokers-loading progress { width: min(280px, 80vw); }
/* Google recommends >=150 CSS pixels from the edge of the game. No overlay or reward UI. */
#jokers-display-ad { width: 300px; min-height: 275px; margin: 150px auto 32px; text-align: center; }
#jokers-display-ad .ad-label { display: block; margin-bottom: 10px; color: #9da5b6; font-size: 11px; font-weight: 400; }
#jokers-display-ad-content { width: 300px; min-height: 250px; }
@media (min-width: 1100px) {
  .jokers-page.ads-active { display: grid; grid-template-columns: minmax(320px, 1fr) 300px; column-gap: 150px; }
  .jokers-page.ads-active #jokers-display-ad { margin: 32px 0 0; align-self: start; }
}