/* ============================================================
   Spacejeux — draw-games.css (draw-games.php)
   ============================================================ */

/* ---------- CATALOGUE ---------- */
.dg-catalogue { background: var(--white); padding: 64px 0 10px; }
.dg-catalogue__head { display: grid; gap: 8px; margin-bottom: 32px; }
.dg-catalogue__head h1 { font-size: 36px; font-weight: 700; line-height: 1.2; }
.dg-catalogue__head p { font-size: 16px; line-height: 1.5; color: var(--slate-500); }

.dg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.dg-card {
  background: var(--bg-soft); border-radius: var(--radius-lg); padding: 24px;
  display: grid; gap: 16px; align-content: start;
}
.dg-card hr { border-color: var(--border); }
.dg-card__head { display: grid; gap: 4px; }
.dg-card__title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dg-card__title h3 { font-size: 18px; font-weight: 700; }
.dg-card__price {
  flex: none; font-family: var(--font-mono);
  font-size: 14px; font-weight: 700; color: var(--teal);
}
.dg-card__sched { font-size: 12px; color: var(--slate-700); }
.dg-card__stats { display: flex; justify-content: space-between; gap: 12px; }
.dg-card__stats span {
  display: block; font-size: 11px; color: var(--slate-500); text-transform: uppercase;
}
.dg-card__stats strong {
  font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink);
}
.dg-card__stats em { font-style: normal; font-size: 14px; font-weight: 500; color: var(--slate-700); }
.dg-card__stats .right { text-align: right; }
.dg-card__claim { font-size: 11px; color: #737373; text-align: center; }
.dg-card__play { justify-self: center; height: 44px; min-width: 78px; }

/* ---------- artwork panels ---------- */
.dg-art {
  position: relative; height: 160px; border-radius: 8px; overflow: hidden;
  padding: 14px; display: grid; place-items: center;
}
.dg-art::before {
  /* dot grid pattern (teal 8x8 squares, 18px pitch) */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='8' height='8' rx='2' fill='%230d9488' fill-opacity='.35'/%3E%3C/svg%3E");
  background-position: 10px 10px;
}
.dg-art__tag {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--teal); opacity: .9;
}
.dg-art__tag--white { color: rgba(255,255,255,.5); opacity: 1; }
.dg-art__tag--teal-dim { color: rgba(13,148,136,.6); opacity: 1; }
.dg-art__tag--frost { color: rgba(153,199,224,.6); opacity: 1; }
.dg-art__tag--bottom { top: auto; bottom: 6px; color: var(--white); opacity: .9; }

/* balls / tiles */
.dg-art__balls { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.dg-ball {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.08);
}
.dg-ball--lg { width: 52px; height: 52px; font-size: 22px; }
.dg-ball--md { width: 42px; height: 42px; font-size: 20px; }
.dg-ball--sm { width: 40px; height: 40px; font-size: 16px; }
.dg-ball--plain { border: 0; box-shadow: none; }
.dg-ball--night { color: var(--night); }
.dg-ball--ghost {
  background: rgba(255,255,255,.85);
  border: 1.5px solid rgba(13,148,136,.35); box-shadow: none;
}
.dg-art__split { flex: none; width: 1px; height: 44px; background: rgba(13,148,136,.18); }

/* Nordic 7/42 — dark navy, dot grid + aurora glows */
.dg-art--nordic { background: #091e2f; }
.dg-art--nordic::before { opacity: .22; }
.dg-art--nordic::after,
.dg-art--northern::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(110px 110px at 70px 80px, rgba(45,212,191,.20) 0%, rgba(45,212,191,0) 68%),
    radial-gradient(130px 130px at calc(100% - 70px) 110px, rgba(13,148,136,.19) 0%, rgba(13,148,136,0) 68%),
    radial-gradient(160px 160px at 50% 40px, rgba(45,212,191,.13) 0%, rgba(45,212,191,0) 70%);
}

/* Duo 6/45 — dots + crossing diagonals */
.dg-art--duo { background: var(--night); }
.dg-art--duo::before { opacity: .18; }
.dg-art--duo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background:
    linear-gradient(45deg, transparent 49.6%, #0d9488 49.6%, #0d9488 50.4%, transparent 50.4%),
    linear-gradient(-45deg, transparent 49.6%, #0d9488 49.6%, #0d9488 50.4%, transparent 50.4%);
}

/* Everyday Fortune — repeated word pattern */
.dg-art--everyday { background: var(--teal-ink); }
.dg-art--everyday::before {
  opacity: .18; background-position: 10px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61' height='23'%3E%3Ctext x='0' y='11' font-family='Arial' font-size='10' font-weight='600' fill='white' fill-opacity='.55'%3EEVERYDAY%3C/text%3E%3C/svg%3E");
}
.dg-art__center { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: center; }
.dg-art__mainball {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--teal-ink);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.08);
}
.dg-art__markers { display: flex; gap: 10px; }
.dg-art__markers span {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--teal-ink);
}

/* Trio / Quatro — night bg, dot grid */
.dg-art--trio, .dg-art--quatro { background: var(--night); }
.dg-art--trio::before, .dg-art--quatro::before { opacity: .18; }
.dg-art__tiles {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, 44px); gap: 10px;
}
.dg-art__tiles span {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--white); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.08);
}

/* Northern Lights — aurora glows + faint ticket dots */
.dg-art--northern { background: #091e2f; }
.dg-art--northern::before { opacity: .08; }
.dg-reveal { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.dg-reveal__lock {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--night); border: 1px solid var(--teal);
  display: grid; place-items: center; color: var(--teal); opacity: .9;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.08);
}
.dg-reveal__prize {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--teal);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.08);
}

/* Québec Max / Québec 5/40 / Pick 2 / Cinq — very faint sparse dots */
.dg-art--qmax { background: #062533; }
.dg-art--q540 { background: #0a2130; }
.dg-art--pick2, .dg-art--cinq { background: var(--night); }
.dg-art--qmax::before, .dg-art--q540::before,
.dg-art--pick2::before, .dg-art--cinq::before {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='110'%3E%3Crect width='8' height='8' rx='2' fill='%230d9488' fill-opacity='.06'/%3E%3C/svg%3E");
}
.dg-art--qmax::after, .dg-art--q540::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(110px 110px at 70px 80px, rgba(13,148,136,.06) 0%, rgba(13,148,136,.06) 72%, rgba(13,148,136,0) 78%),
    radial-gradient(130px 130px at calc(100% - 70px) 110px, rgba(13,148,136,.04) 0%, rgba(13,148,136,.04) 72%, rgba(13,148,136,0) 78%);
}

/* Cinq — thin teal accent underline */
.dg-art--cinq::after {
  content: ''; position: absolute; left: calc(50% - 100px); bottom: 10px;
  width: 200px; height: 2px; border-radius: 1px;
  background: rgba(13,148,136,.15); pointer-events: none;
}

/* Double Chance — two outlined fields, two rows of balls */
.dg-art--double { background: #091e2f; }
.dg-art__ring {
  position: absolute; top: 15px; width: 130px; height: 130px; border-radius: 50%;
  border: 1.5px solid rgba(13,148,136,.12); pointer-events: none;
}
.dg-art__ring--1 { left: calc(50% - 133px); }
.dg-art__ring--2 { left: calc(50% + 3px); }
.dg-double { position: relative; z-index: 1; width: 240px; height: 88px; }
.dg-double__row { position: absolute; display: flex; gap: 10px; }
.dg-double__row--a { left: 0; top: 0; }
.dg-double__row--b { left: 100px; top: 48px; }

/* Frost — icy glows, slanted frost lines, scratch fields */
.dg-art--frost { background: #061a2b; }
.dg-art--frost::before {
  opacity: 1;
  background-image:
    radial-gradient(120px 120px at 70px 80px, rgba(153,199,224,.05) 0%, rgba(153,199,224,.05) 70%, rgba(153,199,224,0) 78%),
    radial-gradient(100px 100px at calc(100% - 80px) 80px, rgba(153,199,224,.06) 0%, rgba(153,199,224,.06) 70%, rgba(153,199,224,0) 78%),
    radial-gradient(140px 140px at 50% 40px, rgba(77,128,178,.04) 0%, rgba(77,128,178,.04) 70%, rgba(77,128,178,0) 78%);
}
.dg-art--frost::after {
  content: ''; position: absolute; inset: -20px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(153,199,224,.06) 0 1px, transparent 1px 70px);
  background-position: 40px 0;
  transform: rotate(4deg);
}
.dg-frost { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.dg-frost__field {
  flex: none; width: 48px; height: 48px; border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(153,199,224,.3);
  color: #99c7e0; font-family: var(--font-display); font-size: 22px; font-weight: 700;
}
.dg-frost__field--hidden { background: rgba(153,199,224,.08); border-color: rgba(153,199,224,.15); }
.dg-frost__mark { display: block; width: 20px; height: 3px; border-radius: 1.5px; background: rgba(153,199,224,.25); }

/* ---------- DISCLAIMER ---------- */
.dg-disclaimer { padding: 32px 20px; }
.dg-disclaimer p { text-align: center; font-size: 13px; color: #666; max-width: 720px; margin-inline: auto; }

/* ---------- HOW A DRAW GAME WORKS ---------- */
.dg-how { background: var(--bg-soft); padding-block: 64px; }
.dg-how h2 { font-size: 32px; font-weight: 700; line-height: 1.2; margin-bottom: 40px; }
.dg-how__steps { display: flex; align-items: flex-start; }
.dg-step { flex: 1; min-width: 0; display: grid; gap: 16px; justify-items: center; }
.dg-step__num {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--bg-tint); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 18px; font-weight: 800; color: var(--teal);
}
.dg-step__body { display: grid; gap: 6px; justify-items: center; text-align: center; }
.dg-step__icon { color: var(--teal); }
.dg-step__icon svg { display: block; }
.dg-step__title { font-size: 16px; font-weight: 700; }
.dg-step__desc { font-size: 14px; line-height: 1.5; color: var(--slate-500); max-width: 280px; }
.dg-how__sep { flex: none; width: 48px; height: 64px; display: grid; place-items: center; }
.dg-how__sep::before { content: ''; width: 40px; border-top: 1.5px solid var(--slate-300); }

/* ---------- PLAY BRIGHT ---------- */
.dg-bright { background: var(--bg-tint); padding-block: 80px; }
.dg-bright__head { max-width: 680px; display: grid; gap: 12px; margin-bottom: 48px; }
.dg-bright__head h2 { font-size: 40px; font-weight: 700; line-height: 1.1; }
.dg-bright__head p { font-size: 16px; line-height: 1.5; color: var(--slate-700); }

.dg-help {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: grid; grid-template-columns: 1fr 320px; gap: 32px;
  padding: 24px 0 24px 38px;
  margin-bottom: 48px;
}
.dg-help::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--teal);
}
.dg-help__content { display: grid; gap: 16px; align-content: center; }
.dg-help__content h3 { font-size: 24px; font-weight: 700; }
.dg-help__content > p { font-size: 15px; line-height: 1.6; color: var(--slate-700); }
.dg-help__phone { display: flex; align-items: center; gap: 12px; }
.dg-help__phone-icon {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--teal); color: var(--white);
  display: grid; place-items: center;
}
.dg-help__phone a { font-size: 18px; font-weight: 700; color: var(--ink); }
.dg-help__cta .btn { padding-inline: 30px; }

/* support illustration (dot-grid board with 3 nodes) */
.dg-support {
  position: relative; min-height: 220px; border-radius: var(--radius-lg);
  background-image: radial-gradient(circle, rgba(217,226,235,.45) 1px, transparent 1.2px);
  background-size: 24px 24px; background-position: 11px 11px;
}
.dg-support__line {
  position: absolute; left: 64px; right: 68px; top: 90px; height: 2px;
  background: rgba(9,162,159,.25); border-radius: 1px;
}
.dg-support__node { position: absolute; display: grid; justify-items: center; width: 92px; text-align: center; }
.dg-support__node--1 { left: 22px; top: 50px; }
.dg-support__node--2 { left: 114px; top: 50px; }
.dg-support__node--3 { right: 24px; top: 42px; }
.dg-support__num { font-size: 9px; color: rgba(9,162,159,.55); margin-bottom: 4px; }
.dg-support__circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); border: 1px solid rgba(97,128,163,.25);
  display: grid; place-items: center; color: rgba(28,42,74,.6);
}
.dg-support__circle--accent {
  width: 48px; height: 48px;
  border: 1.5px solid rgba(9,162,159,.5); color: #09a29f;
  box-shadow: 0 0 0 6px rgba(9,162,159,.06), 0 0 0 12px rgba(9,162,159,.04);
}
.dg-support__title {
  margin-top: 10px; font-size: 8px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: #1c2a4a;
}
.dg-support__title.accent { color: #09a29f; }
.dg-support__sub { font-size: 7.5px; color: rgba(97,128,163,.75); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .dg-grid { grid-template-columns: repeat(2, 1fr); }
  .dg-help { grid-template-columns: 1fr; padding: 24px 24px 24px 38px; }
  .dg-support { max-width: 360px; }
}

@media (max-width: 960px) {
  .dg-art--nordic .dg-ball, .dg-art--duo .dg-ball { width: 38px; height: 38px; font-size: 15px; }
  .dg-art--nordic .dg-art__balls, .dg-art--duo .dg-art__balls { gap: 8px; }
  .dg-art__split { height: 38px; }
}

@media (max-width: 720px) {
  .dg-catalogue { padding: 32px 0 8px; }
  .dg-catalogue__head { margin-bottom: 24px; }
  .dg-catalogue__head h1 { font-size: 28px; }
  .dg-catalogue__head p { font-size: 14px; }

  .dg-disclaimer { padding: 16px 20px 24px; }
  .dg-disclaimer p {
    font-size: 12px; line-height: 1.5; color: var(--slate-700);
    text-align: left; margin-inline: 0; max-width: none;
  }

  .dg-how { padding-block: 40px; }
  .dg-how h2 { font-size: 28px; text-align: center; margin-bottom: 24px; }
  .dg-how__steps { flex-direction: column; align-items: stretch; gap: 16px; }
  .dg-step { gap: 12px; }
  .dg-step__num { width: 48px; height: 48px; }
  .dg-how__sep { width: auto; height: 16px; }
  .dg-how__sep::before { width: 60px; }

  .dg-bright { padding-block: 40px; }
  .dg-bright__head { gap: 8px; margin-bottom: 24px; }
  .dg-bright__head h2 { font-size: 28px; line-height: 1.2; }
  .dg-bright__head p { font-size: 14px; }
}

@media (max-width: 640px) {
  .dg-grid { grid-template-columns: 1fr; gap: 16px; }
  .dg-card { background: var(--white); border: 1px solid var(--border); padding: 20px; }
  .dg-card__sched { font-size: 13px; }
  .dg-card__stats span { font-size: 10px; letter-spacing: .4px; }
  .dg-card__stats em { font-size: 13px; font-weight: 600; }
  .dg-card__claim { text-align: left; }
  .dg-card__play { justify-self: start; height: 40px; border-radius: 6px; }

  .dg-help { padding: 20px; margin-bottom: 24px; }
  .dg-help::before { display: none; }
  .dg-help__content { gap: 12px; align-content: start; }
  .dg-help__content h3 { font-size: 20px; }
  .dg-help__content > p { font-size: 13px; }
  .dg-help__phone { gap: 8px; }
  .dg-help__phone a { font-size: 16px; }
  .dg-help__cta .btn { width: 100%; height: 42px; }
  .dg-support { display: none; }
}