/* uk.bingocrazy.co. Loaded after style.css (copied from the main site); tokens come from there. */

/* no mobile tab bar on the landing, so no room is reserved for it */
:root { --tabbar-h: 0px; }
html { scroll-behavior: smooth; }
#rooms { scroll-margin-top: calc(var(--header-h) + 8px); }

/* ---------- section 1: hero with a 90-ball ticket ---------- */
.uk-hero .hero__title { font-size: clamp(36px, 7.4vw, 64px); }
.uk-card { margin: 0; max-width: 460px; width: 100%; justify-self: center; transform: rotate(-1.5deg); }
.uk-card__grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; margin-top: 14px; }
.uk-card__cell {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px;
  background: #fff; border: 1px solid var(--c-paper-line);
  font: 800 clamp(13px, 3.6vw, 18px)/1 var(--f-display); color: var(--c-ink);
}
.uk-card__cell--blank { background: repeating-linear-gradient(135deg, #f3ead9 0 4px, #efe4cf 4px 8px); border-color: transparent; }
.uk-card__cell--daub { position: relative; color: #fff; }
.uk-card__cell--daub::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--c-pink); opacity: .9; }
.uk-card__cell--daub { isolation: isolate; }
.uk-card__cell--daub::before { z-index: -1; }
.uk-card__cell--next { border: 2px dashed var(--c-red); color: var(--c-red); }
.uk-card__foot { display: grid; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 2px dashed var(--c-paper-line); }
.uk-card__call { display: flex; align-items: center; gap: 10px; font: 800 17px/1.2 var(--f-display); }
.uk-card__call .ball { width: 38px; height: 38px; font-size: 14px; flex: none; }
.uk-card__prizes { font-size: 13px; color: #6f6377; }

/* ---------- section 3: trust, safer gambling, cta ---------- */
.uk-trust { margin-top: 32px; }
.uk-licence img { margin-bottom: 16px; }
.uk-licence .panel__text a { font-weight: 700; }
.uk-cta { margin-top: 32px; }
.uk-cta .cta__title { color: #fff; }

/* the longer landing headline runs into the top decorative ball on narrow screens */
@media (max-width: 959px) { .uk-hero .hero__balls .ball:nth-child(1) { display: none; } }