/* Scratchcard Gameshow — site-wide styles. Load before page-specific stylesheet. */

@font-face {
  font-family: "Anton Show";
  src: url("/assets/fonts/Anton-Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
}

:root {
  font-family: Arial, sans-serif;
  color: #111d4a;
  background: #f0f3ff;
  --brand-blue: #153dcc;
  --brand-deep: #071c80;
  --brand-yellow: #ffd700;
  --show-font: Impact, "Anton Show", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }

html { scrollbar-gutter: stable; }

body { margin: 0; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

header, .hero {
  background-color: var(--brand-deep);
  background-image: linear-gradient(#07134255,#07134255), url("/assets/images/branding/scratchcard-gameshow-header-background.webp");
  background-size: auto, max(100%,1200px) auto;
  background-repeat: no-repeat;
}

header {
  position: sticky; top: 0; z-index: 100;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: 20px;
  padding: 22px max(5%,calc((100% - 1100px)/2)); color: white;
  background-position: center, center top;
}

.brand { justify-self: start; font-family: var(--show-font); font-size: 19px; font-weight: 400; font-synthesis: none; line-height: 1.05; }

.brand img { display: block; width: 140px; height: auto; max-width: 100%; }

header > a { color: white; font-size: 14px; text-decoration: none; justify-self: end; display: block; line-height: 0; }

.header-watch-artwork { display: block; width: auto; height: 43.8667px; max-width: 100%; }

.play-safe {
  justify-self: center; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 8px 11px; border-radius: 8px;
  background: var(--brand-deep); color: white; white-space: nowrap;
  font-size: 14px; font-weight: 900; letter-spacing: .01em; line-height: 1;
}

/* Shared hero: anchor the heading to the same position on every page.
   Avoid vertically centring the whole block, which shifts artwork when
   introductory paragraphs have different lengths. */
.hero {
  color: white;
  min-height: 0px;
  padding: 100px 5% 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-position: center, center calc(0px - var(--banner-height, 80px));
}

/* The catalogue still contains an empty legacy eyebrow spacer. */
.hero > .eyebrow { display: none; }

.hero h1 {
  width: 100%;
  max-width: 1100px;
  height: 90px;
  flex: none;
  margin: 0 auto 18px;
  font-family: var(--show-font);
  font-weight: 400;
  color: var(--brand-yellow);
  font-size: 0;
  line-height: 0;
}

.hero h1 picture,
.hero h1 picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero h1 picture img { object-fit: contain; }

.hero p {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: white;
  text-shadow: 0 2px 5px #000a;
}

.container { max-width: 1100px; margin: -25px auto 70px; padding: 0 20px; }

.tools {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 20px;
  background: white; border: 2.25px solid #0033ff; border-radius: 16px;
  box-shadow: 0 0 0 3px #222, 0 5px 15px #071c8014;
}

input, select { font: inherit; border: 1px solid #c9d1df; border-radius: 8px; padding: 13px; background: white; color: #15284c; }

input { flex: 1; min-width: 210px; }

input:focus, select:focus { outline: 2px solid var(--brand-blue); outline-offset: 1px; }

.tools select {
  appearance: none; -webkit-appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%2315284c' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}

.last-updated { justify-self: end; align-self: center; margin: 0; font-size: 13px; line-height: 1.3; color: #536080; text-align: right; white-space: nowrap; }

.empty { padding: 30px; color: #69758a; }

.watch {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--show-font); font-weight: 400; font-synthesis: none; font-size: 26.4px;
  min-height: 64px; margin: 0; padding: 10px; text-align: center; text-decoration: none;
  color: var(--brand-yellow); border: 1.5px solid #0033ff; border-radius: 16px;
  box-shadow: 0 0 0 2px #222; background-color: var(--brand-deep);
  background-image: linear-gradient(#07134266,#07134288),url("/assets/images/branding/scratchcard-gameshow-header-background.webp");
  background-size: auto, auto 250px; background-position: center; background-repeat: no-repeat;
}

.watch.disabled { cursor: default; opacity: 1; border-color: #444; background-color: #222; background-image: linear-gradient(#0003,#0006),url("/assets/images/branding/scratchcard-gameshow-header-background-grey.webp"); }

.watch-artwork { display: block; width: 240px; max-width: 100%; height: auto; object-fit: contain; }

.watch:not(.disabled) .watch-artwork { transition: transform 180ms ease; transform-origin: center; }

.watch[href]:hover, .watch[href]:focus-visible { filter: brightness(1.1); outline: 2px solid var(--brand-yellow); outline-offset: 2px; }

.watch:not(.disabled):focus-visible .watch-artwork { transform: scale(1.06); }

.progress-mask { position: absolute; left: 0; top: 0; bottom: 0; background: #e6eaf1; }

.progress-track {
  height: 9px;
  background: linear-gradient(90deg,
    #45a864 0%,
    #d6ca39 40%,
    #f4a42c 70%,
    #d6343f 100%);
  border-radius: 9px;
  overflow: hidden;
  position: relative;
}

.jackpot-odds { margin-top: 10px; font-size: 13px; line-height: 1.35; color: #56657e; }

.safer-play { background: var(--brand-deep); color: white; border-radius: 16px; padding: 18px 20px; margin: 35px 0 24px; line-height: 1.5; font-size: 14px; }

.safer-play h2 { font-size: 18px; margin: 0 0 6px; color: white; }

.safer-play p { margin: 6px 0; }

.safer-play a { color: var(--brand-yellow); font-weight: 700; }

.odds-key { background: transparent; border: 0; border-radius: 0; }

.safer-play .odds-key { color: white; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid #ffffff35; font-size: 14px; line-height: 1.5; }

.odds-key > strong { font-size: 16px; }

.key-items { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.key-chip { display: inline-block; padding: 4px 9px; font-weight: 700; }

.safer-play .commentary-note-heading { color: white; font-size: 16px; margin: 22px 0 0; border-top: 1px solid #ffffff35; padding-top: 20px; }

.safer-play .odds-key p { margin-top: 10px; }

footer { background: #08134c; color: #d6ddf7; text-align: center; padding: 30px 20px; font-size: 13px; line-height: 1.7; }

footer a { color: white; }

footer .copyright { margin: 18px 0 6px; color: white; font-weight: 700; }

footer .accuracy { max-width: 850px; margin: 0 auto; }

.privacy-settings { font: inherit; color: white; background: transparent; border: 0; text-decoration: underline; cursor: pointer; padding: 0; }

.load-error { padding: 30px; background: white; border-radius: 16px; }

html.consent-open { overflow: hidden; }

dialog.consent-bar { position: fixed; inset: 0; margin: auto; display: block; width: calc(100% - 36px); max-width: 480px; max-height: calc(100dvh - 40px); overflow: auto; padding: 26px; border: 2px solid #0033ff; outline: 3px solid #222; border-radius: 16px; background: var(--brand-deep); color: white; box-shadow: 0 18px 60px #0005; font: 15px/1.55 Arial,sans-serif; text-align: left; }

dialog.consent-bar:not([open]) { display: none; }

dialog.consent-bar::backdrop { background: #081332a6; }

.consent-bar h2 { font: 700 22px/1.25 Arial,sans-serif; margin: 0 0 12px; color: white; }

.consent-bar p { margin: 0 0 14px; max-width: none; }

.consent-bar a { font: inherit; color: var(--brand-yellow); text-decoration: underline; display: inline; }

.consent-bar .cookie-privacy { font-size: 13px; }

.consent-actions { display: flex; width: 100%; gap: 12px; margin-top: 18px; }

.consent-actions button { flex: 1; min-width: 0; background: var(--brand-blue); border: 1px solid #647fed; color: white; border-radius: 10px; padding: 12px; font: 700 14px/1.3 Arial,sans-serif; cursor: pointer; }

.consent-actions button:hover { background: #254ee2; }

.consent-actions button:focus-visible, .privacy-settings:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 3px; }

.consent-bar.is-closing { opacity: 0; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease; pointer-events: none; }

@media (hover:hover) and (pointer:fine) {
.watch:not(.disabled):hover .watch-artwork { transform: scale(1.06); }
}

@media (max-width:550px) {
header { padding: 18px 5%; gap: 8px; }
header > a { max-width: 95px; }
.brand { font-size: 15px; }
header > a { font-size: 11px; }
.brand img { width: 96px; }
.header-watch-artwork { height: 30.08px; }
.play-safe { font-size: 11px; padding: 7px 8px; gap: 4px; }
.hero { min-height: 300px; padding-top: 79px; padding-bottom: 50px;}
.hero h1 { height: 88px; }
/* Shared mobile search/filter layout: search + price, then full-width sort. */
.tools {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
  gap: 10px;
  padding: 16px;
}
.tools #search {
  grid-column: 1;
  width: 100%;
  min-width: 0;
}
.tools #price {
  grid-column: 2;
  width: 100%;
  min-width: 0;
}
.tools #sort {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}
.last-updated { white-space: normal; max-width: 126px; }
dialog.consent-bar { padding: 22px; font-size: 14px; }
.consent-actions { gap: 10px; }
}

@media (prefers-reduced-motion:reduce) {
.watch:not(.disabled) .watch-artwork { transition: none; }
.watch:not(.disabled):hover .watch-artwork, .watch:not(.disabled):focus-visible .watch-artwork { transform: none; }
}

.back-to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  background: #071c80;
  color: #ffd700;
  font: 700 14px/1.2 Arial, sans-serif;
  box-shadow: 0 4px 14px rgba(7, 28, 128, 0.25);
  cursor: pointer;
}

.back-to-top[hidden],
html.consent-open .back-to-top {
  display: none;
}

.back-to-top:hover {
  background: #153dcc;
}

.back-to-top:focus-visible {
  outline: 3px solid #ffd700;
  outline-offset: 3px;
}

.back-to-top > span:first-child {
  font-size: 22px;
  line-height: 1;
}

.site-menu{position:relative;justify-self:end;line-height:1.2}

.site-menu summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;color:#ffd700;font:700 14px/1.2 Arial,sans-serif;min-height:44px;padding:8px 0 8px 10px}

.site-menu summary::-webkit-details-marker{display:none}

.menu-icon{display:flex;flex-direction:column;justify-content:space-between;width:24px;height:18px}

.menu-icon span{height:2px;background:currentColor;width:100%;border-radius:2px}

.site-menu nav{position:absolute;right:0;top:calc(100% + 10px);width:250px;max-width:calc(100vw - 32px);border:1px solid #5375e8;border-radius:12px;box-shadow:0 8px 25px #0005;background:#071c80;padding:8px;z-index:110}

.site-menu nav a{display:block;color:white;text-decoration:none;font:700 14px/1.4 Arial,sans-serif;padding:13px 12px;border-radius:7px}

.site-menu nav a[aria-current=page]{color:#ffd700;background:#ffffff12}

.site-menu nav a:hover{background:#153dcc}

.site-menu summary:focus-visible,.site-menu nav a:focus-visible{outline:2px solid #ffd700;outline-offset:3px}

@media (max-width:550px) {
.site-menu summary { font-size:11px; gap:7px; }
.menu-icon { width:21px; height:16px; }
}