/* ══════════════════════════════════════════════════════════
   JustinGambles — Giveaways & Raffles
   (same compact glass-card design language as Challenges/Tournaments)
══════════════════════════════════════════════════════════ */

.gw-page{ min-height: 80vh; max-width:1400px; margin:0 auto; padding:0 20px 60px; }

/* ── Hero ── */
.gw-hero{
  position: relative;
  border-radius: 20px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(196,135,71,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.40);
  margin-bottom: 28px;
  overflow: hidden;
}
.gw-hero::before{
  content: '';
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(560px 220px at 20% 0%, rgba(196,135,71,.12), transparent 65%),
    radial-gradient(560px 220px at 80% 30%, rgba(243,208,138,.07), transparent 65%);
  filter: blur(6px);
  pointer-events: none;
}
.gw-hero__card{
  border-radius: 20px;
  padding: 26px 32px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.gw-hero__inner{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gw-hero__badge{
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: linear-gradient(145deg,rgba(255,215,122,.16),rgba(196,135,71,.06));
  border: 1px solid rgba(196,135,71,.35);
  box-shadow: 0 6px 18px rgba(196,135,71,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.gw-hero__eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 950; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(196,135,71,.85);
  background: rgba(196,135,71,.08);
  border: 1px solid rgba(196,135,71,.22);
  border-radius: 999px;
  padding: 4px 14px;
}
.gw-hero__title{
  font-size: 26px; font-weight: 950; letter-spacing: -.3px; margin: 0; line-height: 1.15;
  color: rgba(233,238,247,.97);
  text-shadow: 0 2px 40px rgba(196,135,71,.12);
}
.gw-hero__gold{
  background: linear-gradient(135deg,#ffd77a,#e0a030 50%,#ffd77a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gw-hero__sub{ font-size: 13px; color: rgba(170,180,197,.75); line-height: 1.55; margin: 0; max-width: 520px; }
.gw-hero__cta{
  display: inline-flex; align-items: center; height: 38px; padding: 0 20px;
  border-radius: 12px; background: linear-gradient(135deg,#ffd77a,#c9912a);
  color: #1b1206; font-weight: 700; font-size: 13px; text-decoration: none;
  margin-top: 2px; transition: filter .15s; box-shadow: 0 4px 20px rgba(196,135,71,.30);
}
.gw-hero__cta:hover{ filter: brightness(1.08); }

.gw-hero__stats{
  display: flex; align-items: center; gap: 0; margin-top: 2px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(196,135,71,.18);
  border-radius: 14px; padding: 10px 18px; position: relative; z-index: 1;
}
.gw-hstat{ display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 16px; }
.gw-hstat__val{ font-size: 19px; font-weight: 950; color: rgba(255,210,120,.97); line-height: 1; white-space: nowrap; }
.gw-hstat__label{ font-size: 10px; color: rgba(170,180,197,.50); text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; }
.gw-hstat__div{ width: 1px; height: 34px; background: linear-gradient(180deg,transparent,rgba(196,135,71,.25),transparent); flex-shrink: 0; }

/* ── Shell ── */
.gw-shell{ max-width: 1400px; margin: 0 auto; padding: 32px 20px 60px; display: flex; flex-direction: column; gap: 22px; }

.gw-section__title{ font-size: 17px; font-weight: 950; color: rgba(233,238,247,.95); margin: 0 0 16px; }

/* ── Tabs (Active / Past) — plain text, active tab is a solid pill ── */
.gwc-tabs{ display: flex; gap: 8px; }
.gwc-tab{
  display: inline-flex; align-items: center;
  padding: 8px 18px; border-radius: 999px; border: none; cursor: pointer;
  background: transparent; color: rgba(170,180,197,.65); font-weight: 800; font-size: 13.5px;
  font-family: inherit; transition: background .15s, color .15s;
}
.gwc-tab:hover{ color: rgba(233,238,247,.85); }
.gwc-tab--active{ background: linear-gradient(135deg,#ffd77a,#c9912a); color: #1b1206; }
.gwc-tab--active:hover{ color: #1b1206; }

.gwc-panel[hidden]{ display: none; }
.gwc-panel{ margin-top: 6px; }

/* ── Grid ── */
.gwc-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }

/* ── Card — flat, minimal: no ribbons, no gradient border, no shine sweep.
   Just a soft ambient glow behind the icon and solid accent-colored text,
   matching the reference layout the client asked to match. ── */
.gwc-card{
  --accent: #ffd77a;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; text-decoration: none;
  border-radius: 16px; padding: 26px 16px 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(180deg, rgba(15,19,27,.9), rgba(10,13,20,.92));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--accent) 10%, transparent), 0 18px 44px rgba(0,0,0,.35);
  transition: border-color .18s, transform .18s, box-shadow .18s;
  cursor: pointer;
}
.gwc-card:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateY(-4px);
  box-shadow: inset 0 0 70px color-mix(in srgb, var(--accent) 16%, transparent), 0 24px 54px rgba(0,0,0,.45);
}
.gwc-card--past{
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    linear-gradient(180deg, rgba(15,19,27,.9), rgba(10,13,20,.92));
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 0 40px rgba(255,255,255,.03), 0 14px 34px rgba(0,0,0,.3);
}
.gwc-card--past:hover{
  transform: none;
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 0 40px rgba(255,255,255,.03), 0 14px 34px rgba(0,0,0,.3);
}

.gwc-eyebrow{
  font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: rgba(170,180,197,.55);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

.gwc-vip-badge{
  display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 950; letter-spacing: .6px; text-transform: uppercase;
  color: #1b1206; background: linear-gradient(135deg,var(--gold2,#f3d08a) 0%,var(--gold,#c48747) 100%);
}

.gwc-art{
  position: relative;
  width: 128px; height: 128px;
  display: flex; align-items: center; justify-content: center;
  margin: 4px 0 2px;
}
.gwc-art__glow{
  position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--accent) 8%, transparent) 65%, transparent 78%);
  filter: blur(2px);
  animation: gwcPulse 3.2s ease-in-out infinite;
}
@keyframes gwcPulse{
  0%, 100%{ opacity: .75; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.08); }
}
.gwc-art__img{
  position: relative; z-index: 1;
  width: 116px; height: 116px; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
.gwc-art--past{ opacity: .75; filter: grayscale(.35); }
.gwc-art--past .gwc-art__glow{ animation: none; opacity: .5; }

.gwc-headline{
  font-size: 26px; font-weight: 950; letter-spacing: -.3px;
  line-height: 1.1;
  color: color-mix(in srgb, var(--accent) 88%, #fff);
}

.gwc-timer-wrap{ display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.gwc-timer-label{ font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(170,180,197,.50); }
.gwc-timer{ display: flex; align-items: baseline; gap: 3px; }
.gwc-timeval{ font-size: 15px; font-weight: 800; color: rgba(233,238,247,.90); font-variant-numeric: tabular-nums; line-height: 1; }
.gwc-timer-sep{ font-size: 13px; color: rgba(170,180,197,.35); }
.gwc-timer--ended .gwc-timeval{ color: rgba(170,180,197,.45); }

.gwc-winner{
  font-size: 13px; color: rgba(233,238,247,.80);
  width: 100%;
}
.gwc-winner strong{ color: color-mix(in srgb, var(--accent) 80%, #fff); }

.gwc-enter-btn{
  display: flex; align-items: center; justify-content: center;
  height: 40px; width: 100%; margin-top: 4px;
  border-radius: 9px; border: 1.5px solid var(--accent);
  color: color-mix(in srgb, var(--accent) 90%, #fff);
  font-weight: 800; font-size: 13px; letter-spacing: .2px;
  background: transparent;
  transition: background .15s;
}
.gwc-card:hover .gwc-enter-btn{ background: color-mix(in srgb, var(--accent) 12%, transparent); }
.gwc-enter-btn--past{ border-color: rgba(255,255,255,.18); color: rgba(233,238,247,.65); }
.gwc-card--past:hover .gwc-enter-btn--past{ background: rgba(255,255,255,.05); }

.gw-empty{ text-align: center; padding: 60px 20px; color: rgba(170,180,197,.55); font-size: 15px; }

/* ── Detail page ── */
.gwd-page{ max-width: 900px; margin: 0 auto; padding: 0 20px 60px; }
.gwd-back{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(170,180,197,.65); text-decoration: none; margin: 20px 0 16px; }
.gwd-back:hover{ color: rgba(255,210,120,.85); }

.gwd-card{
  border-radius: 20px; padding: 28px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(196,135,71,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.40);
  display: flex; flex-direction: column; gap: 22px;
}
.gwd-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.gwd-title{ font-size: 24px; font-weight: 950; color: rgba(233,238,247,.97); margin: 6px 0 0; }
.gwd-vip-badge{
  display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 950; letter-spacing: .6px; text-transform: uppercase;
  color: #1b1206; background: linear-gradient(135deg,var(--gold2,#f3d08a) 0%,var(--gold,#c48747) 100%);
  vertical-align: middle;
}
.gwd-desc{ font-size: 13px; color: rgba(170,180,197,.75); line-height: 1.6; }
.gwd-window{ font-size: 12px; color: rgba(170,180,197,.55); }

.gwd-prizes{ display: flex; flex-direction: column; gap: 8px; }
.gwd-section-label{ font-size: 11px; font-weight: 950; letter-spacing: .8px; text-transform: uppercase; color: rgba(196,135,71,.75); margin-bottom: 4px; }

.gwd-checklist{ display: flex; flex-direction: column; gap: 8px; }
.gwd-check-item{ display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.gwd-check-item--ok{ color: rgba(150,240,170,.90); border-color: rgba(90,200,120,.25); background: rgba(90,200,120,.06); }
.gwd-check-item--fail{ color: rgba(255,190,150,.90); border-color: rgba(255,150,80,.22); background: rgba(255,150,80,.06); }
.gwd-check-icon{ flex-shrink: 0; }
.gwd-check-item a{ color: inherit; font-weight: 800; text-decoration: underline; }

.gwd-entry-status{ padding: 14px 16px; border-radius: 12px; background: rgba(196,135,71,.07); border: 1px solid rgba(196,135,71,.18); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.gwd-entry-status__stat{ display: flex; flex-direction: column; gap: 2px; }
.gwd-entry-status__label{ font-size: 10px; font-weight: 950; letter-spacing: .6px; text-transform: uppercase; color: rgba(196,135,71,.65); }
.gwd-entry-status__val{ font-size: 16px; font-weight: 950; color: rgba(233,238,247,.95); }

.gwd-cta{
  display: flex; align-items: center; justify-content: center;
  height: 46px; border-radius: 12px;
  background: linear-gradient(135deg,#ffd77a,#c9912a);
  color: #1b1206; font-weight: 700; font-size: 15px;
  cursor: pointer; border: none; width: 100%; font-family: inherit; transition: filter .15s;
}
.gwd-cta:hover{ filter: brightness(1.08); }
.gwd-cta:disabled{ opacity: .55; cursor: not-allowed; filter: none; }

.gwd-msg{ padding: 10px 14px; border-radius: 10px; font-size: 13px; }
.gwd-msg--ok{ background: rgba(60,200,100,.10); border: 1px solid rgba(60,200,100,.25); color: rgba(150,240,170,.95); }
.gwd-msg--err{ background: rgba(255,80,80,.10); border: 1px solid rgba(255,80,80,.25); color: rgba(255,190,190,.95); }

.gwd-winner-row{ display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); font-size: 13px; }
.gwd-winner-row + .gwd-winner-row{ margin-top: 6px; }

@media(max-width:767px){
  .gw-hero{ border-radius: 14px; }
  .gw-hero__card{ padding: 18px 16px; border-radius: 12px; }
  .gw-hero__title{ font-size: 19px; }
  .gw-hstat{ padding: 0 8px; }
  .gw-hstat__val{ font-size: 16px; }
  .gw-hstat__label{ font-size: 9px; letter-spacing: .5px; }
  .gw-hero__stats{ padding: 8px 8px; flex-wrap: wrap; row-gap: 8px; }
  .gwc-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gwc-card{ padding: 18px 10px 14px; }
  .gwc-art{ width: 96px; height: 96px; }
  .gwc-art__img{ width: 86px; height: 86px; }
  .gwc-headline{ font-size: 20px; }
  .gwc-timeval{ font-size: 13px; }
  .gwd-card{ padding: 18px; border-radius: 14px; }
  .gwd-head{ flex-direction: column; }
  .gwd-entry-status{ flex-direction: column; align-items: flex-start; }
}

@media(max-width:420px){
  .gwc-grid{ grid-template-columns: 1fr; }
}

/* ── Detail modal (public Giveaways listing — click a card to preview
   without leaving the page). Reuses the exact same .gwd-card content as
   the standalone /giveaways/{id} page, just staged inside a popup instead
   of the full page chrome. ── */
.gwd-modal-overlay{
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8,10,14,.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: gwdFadeIn .15s ease-out;
}
.gwd-modal-overlay[hidden]{ display: none; }

.gwd-modal{
  position: relative;
  width: 100%; max-width: 640px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: 20px;
  background: #14171d;
  border: 1px solid rgba(196,135,71,.22);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  animation: gwdSlideUp .18s ease-out;
}
.gwd-modal__close{
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  color: rgba(233,238,247,.75); font-size: 13px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.gwd-modal__close:hover{ background: rgba(255,80,80,.12); border-color: rgba(255,80,80,.30); color: rgba(255,190,190,.95); }

.gwd-modal__body{ padding: 4px; }
.gwd-modal__loading{ padding: 70px 20px; text-align: center; color: rgba(170,180,197,.6); font-size: 13px; }

/* The fetched partial brings its own .gwd-page > .gwd-back + .gwd-card
   markup (same file as the full page) — inside the modal we only want the
   card itself, borderless/full-bleed within the popup's own chrome. */
.gwd-modal__body .gwd-page{ max-width: none; padding: 0; }
.gwd-modal__body .gwd-back{ display: none; }
.gwd-modal__body .gwd-card{ border: none; box-shadow: none; background: transparent; padding: 28px; }

body.gwd-modal-open{ overflow: hidden; }

@keyframes gwdFadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes gwdSlideUp{ from{ opacity: 0; transform: translateY(12px) scale(.98); } to{ opacity: 1; transform: none; } }

@media(max-width:600px){
  .gwd-modal-overlay{ padding: 0; align-items: flex-end; }
  .gwd-modal{ max-width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; animation: gwdSlideUpMobile .18s ease-out; }
  .gwd-modal__body .gwd-card{ padding: 22px 18px; }
  @keyframes gwdSlideUpMobile{ from{ transform: translateY(100%); } to{ transform: translateY(0); } }
}