/* ═══════════════════════════════════════════════
   VYHRAJ GAMES HUB (/hry) — Dark Theme
   Scoped to body.vyhraj-hry only.

   F1: the page wears the /sutaze look. The tokens below are a copy of body.vyhraj-sutaze's (vyhraj-sutaze.css is shared
   with the competition list and stays untouched); same face pair (Cabinet Grotesk headings, Satoshi text), same radius
   and shadow. The icons are emoji with emoji presentation, drawn by the system's colour emoji font on Windows, Android
   and iOS alike.
   ═══════════════════════════════════════════════ */

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@500,700,800&f[]=satoshi@400,500,700&display=swap');

body.vyhraj-hry {
  --bg:        #0f1629;
  --surface:   #18233d;
  --surface-2: #202d4d;
  --surface-3: #26365c;
  --line:      rgba(255,255,255,.08);
  --text:      #eef3ff;
  --muted:     #9bacd3;
  --blue:      #3d6df2;
  --amber:     #f5a623;
  --purple:    #7b2fbe;
  --green:     #30c48d;
  --radius:    18px;
  --shadow:    0 8px 24px rgba(0,0,0,.2);
}

body.vyhraj-hry {
  font-family: "Satoshi", sans-serif;
  background:
    radial-gradient(circle at top right, rgba(123,47,190,.12), transparent 30%),
    radial-gradient(circle at top left,  rgba(61,109,242,.10), transparent 30%),
    var(--bg);
  color: var(--text);
}

/* ── Page wrapper + hero ──────────────────────── */

body.vyhraj-hry .hry-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}

body.vyhraj-hry .hry-hero {
  margin-bottom: 24px;
}

body.vyhraj-hry .hry-hero h1 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff;
  margin: 0 0 6px;
}

body.vyhraj-hry .hry-hero p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

/* ── Cards (whole card is the link) ───────────── */

body.vyhraj-hry .hry-card,
body.vyhraj-hry .hry-featured {
  display: flex;
  color: var(--text);
  text-decoration: none !important;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

body.vyhraj-hry .hry-card:hover,
body.vyhraj-hry .hry-featured:hover {
  color: var(--text);
  transform: translateY(-3px);
  border-color: rgba(61,109,242,.55);
  box-shadow: 0 16px 36px rgba(0,0,0,.3);
}

body.vyhraj-hry .hry-card:focus-visible,
body.vyhraj-hry .hry-featured:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

body.vyhraj-hry .hry-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 28px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

body.vyhraj-hry .hry-title {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

body.vyhraj-hry .hry-desc {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

body.vyhraj-hry .hry-state {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(48,196,141,.12);
  border: 1px solid rgba(48,196,141,.3);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}

body.vyhraj-hry .hry-open {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: background .15s;
}

body.vyhraj-hry .hry-featured:hover .hry-open,
body.vyhraj-hry .hry-featured:focus-visible .hry-open {
  background: #5a85f5;
}

/* ── Featured (the calendar, in season): full width ── */

body.vyhraj-hry .hry-featured {
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  margin-bottom: 16px;
  background:
    linear-gradient(135deg, rgba(61,109,242,.26), rgba(123,47,190,.20)),
    var(--surface);
  border-color: rgba(61,109,242,.4);
}

body.vyhraj-hry .hry-featured .hry-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  font-size: 38px;
}

body.vyhraj-hry .hry-featured-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.vyhraj-hry .hry-featured .hry-title {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 800;
}

/* ── The four games: 4 / 2 / 1 per row ────────── */

body.vyhraj-hry .hry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 576px) {
  body.vyhraj-hry .hry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  body.vyhraj-hry .hry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

body.vyhraj-hry .hry-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 22px;
}

body.vyhraj-hry .hry-card .hry-title {
  font-size: 19px;
}

/* ── "Pripravujeme": a slim, muted strip, last ── */

body.vyhraj-hry .hry-soon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 20px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
}

body.vyhraj-hry .hry-soon .hry-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 18px;
  background: transparent;
  opacity: .75;
}

body.vyhraj-hry .hry-soon-title {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

body.vyhraj-hry .hry-soon-text {
  font-size: 14px;
  color: var(--muted);
}

body.vyhraj-hry .hry-soon-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
}

/* ── Missions (J5): the short explanation a guest's „Misie“ tile and menu item lead to (#misie) ── */

body.vyhraj-hry .hry-misie {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scroll-margin-top: 96px;
}

body.vyhraj-hry .hry-misie-title {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: #fff;
  margin: 0 0 8px;
}

body.vyhraj-hry .hry-misie-lead {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 10px;
}

body.vyhraj-hry .hry-misie-points {
  margin: 0 0 18px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

body.vyhraj-hry .hry-misie .game-guest-cta {
  margin: 0;
  background: var(--surface-2);
}

body.vyhraj-hry .hry-misie-open {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none !important;
}

body.vyhraj-hry .hry-misie-open:hover,
body.vyhraj-hry .hry-misie-open:focus-visible {
  background: #5a85f5;
  color: #fff;
}

/* ── Phones: the featured card stacks, the button spans ── */

@media (max-width: 575.98px) {
  body.vyhraj-hry .hry-featured {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 20px;
  }
  body.vyhraj-hry .hry-featured .hry-icon { width: 60px; height: 60px; font-size: 32px; }
  body.vyhraj-hry .hry-open { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body.vyhraj-hry .hry-card,
  body.vyhraj-hry .hry-featured { transition: none; }
  body.vyhraj-hry .hry-card:hover,
  body.vyhraj-hry .hry-featured:hover { transform: none; }
}