/* ═══════════════════════════════════════════════
   DALFAST GAMES — Arcade Section Styles
   Bright, fun, modern SaaS — on-brand teal/cyan + playful accents
═══════════════════════════════════════════════ */

:root {
  --g-purple: #7C5CFC;
  --g-pink:   #FF6B9D;
  --g-orange: #FF9F45;
  --g-yellow: #FFD23F;
  --g-green:  #2BD9A0;
  --g-blue:   #4DCFE0;
}

/* ── HERO ── */
.games-hero {
  position: relative;
  padding: 130px 5vw 90px;
  background: linear-gradient(135deg, #0B7EA8 0%, #065070 60%, #07304a 100%);
  color: white;
  overflow: hidden;
  text-align: center;
}
.games-hero-blobs::before,
.games-hero-blobs::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(8px);
}
.games-hero-blobs::before {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(124,92,252,0.35) 0%, transparent 70%);
  top: -80px; left: -60px;
  animation: float1 9s ease-in-out infinite;
}
.games-hero-blobs::after {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(77,207,224,0.3) 0%, transparent 70%);
  bottom: -140px; right: -80px;
  animation: float2 11s ease-in-out infinite;
}
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,-30px)} }

.games-eyebrow {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 100px;
  font-size: 0.82rem; font-weight: 700;
  color: white; margin-bottom: 1.5rem;
  backdrop-filter: blur(10px);
}
.games-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: 1.25rem;
}
.games-sub {
  font-size: 1.1875rem; color: rgba(255,255,255,0.78);
  line-height: 1.65; max-width: 600px; margin: 0 auto 2.5rem;
}
.games-hero-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 3.5rem;
}
.btn-glass {
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: white; backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

.games-hero-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 3rem; flex-wrap: wrap;
}
.ghs-item { text-align: center; }
.ghs-num {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800; color: var(--cyan-light);
  line-height: 1;
}
.ghs-lbl { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-top: 0.3rem; }

/* ── PRO BANNER ── */
.pro-banner {
  background: linear-gradient(135deg, var(--g-green), #1FB888);
  color: white; padding: 0.875rem 5vw;
  font-size: 0.9375rem; text-align: center;
  animation: slideDown 0.4s ease;
}
@keyframes slideDown { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── DAILY GAME ── */
.daily-game {
  background: linear-gradient(120deg, #7C5CFC 0%, #4DCFE0 100%);
  border-radius: var(--r-xl);
  padding: 2.5rem 3rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; cursor: pointer; overflow: hidden; position: relative;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  box-shadow: 0 16px 50px rgba(124,92,252,0.25);
}
.daily-game:hover { transform: translateY(-4px); box-shadow: 0 24px 64px rgba(124,92,252,0.35); }
.daily-badge {
  display: inline-block; background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3); color: white;
  font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.875rem;
  border-radius: 100px; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.daily-title {
  font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2.25rem);
  font-weight: 800; color: white; margin-bottom: 0.5rem; letter-spacing: -0.02em;
}
.daily-desc { color: rgba(255,255,255,0.85); font-size: 1rem; max-width: 440px; margin-bottom: 1.5rem; line-height: 1.6; }
.daily-game-art {
  font-size: 8rem; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.2));
  animation: bob 3s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-12px) rotate(5deg)} }

/* ── GAMES LAYOUT ── */
.games-layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start;
}
.games-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap;
}

/* ── GAMES GRID ── */
.games-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
  gap: 1.5rem;
}
.game-card {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  transition: all var(--t) var(--ease); position: relative;
}
.game-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 48px rgba(11,126,168,0.18);
  border-color: var(--border-md);
}
.game-card-featured { box-shadow: 0 12px 36px rgba(77,207,224,0.2); border-color: var(--cyan); }
.game-thumb {
  aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.game-icon { font-size: 4rem; transition: transform var(--t) var(--ease); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); }
.game-card:hover .game-icon { transform: scale(1.15) rotate(-5deg); }

/* Thumbnail gradients per game */
.game-thumb-spin    { background: linear-gradient(135deg,#FF9F45,#FFD23F); }
.game-thumb-memory  { background: linear-gradient(135deg,#7C5CFC,#4DCFE0); }
.game-thumb-quiz    { background: linear-gradient(135deg,#FF6B9D,#FF9F45); }
.game-thumb-puzzle  { background: linear-gradient(135deg,#2BD9A0,#4DCFE0); }
.game-thumb-tower   { background: linear-gradient(135deg,#4DCFE0,#0B7EA8); }
.game-thumb-snake   { background: linear-gradient(135deg,#2BD9A0,#0B7EA8); }
.game-thumb-match3  { background: linear-gradient(135deg,#FF6B9D,#7C5CFC); }
.game-thumb-typing  { background: linear-gradient(135deg,#FFD23F,#FF9F45); }
.game-thumb-reaction{ background: linear-gradient(135deg,#7C5CFC,#FF6B9D); }
.game-thumb-2048    { background: linear-gradient(135deg,#FF9F45,#FF6B9D); }

/* PRO lock overlay */
.pro-lock-overlay {
  position: absolute; inset: 0;
  background: rgba(6,48,74,0.82); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; opacity: 0; transition: opacity var(--t) var(--ease);
}
.game-card-pro:hover .pro-lock-overlay { opacity: 1; }
.pro-lock-icon { font-size: 2rem; }
.pro-lock-text { color: white; font-weight: 700; font-size: 0.875rem; }
.pro-unlock-btn { padding: 0.5rem 1rem !important; font-size: 0.8rem !important; margin-top: 0.4rem; }
.game-card-pro .game-icon { opacity: 0.55; }
.game-card-pro.unlocked .pro-lock-overlay { display: none; }
.game-card-pro.unlocked .game-icon { opacity: 1; }

.game-card-body { padding: 1.25rem; }
.game-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; }
.game-badge { font-size: 0.68rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-free { background: rgba(43,217,160,0.15); color: #14916B; }
.badge-pro  { background: linear-gradient(135deg,#0B7EA8,#4DCFE0); color: white; }
.game-plays { font-size: 0.72rem; color: var(--ink-muted); }
.game-card-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin-bottom: 0.4rem; }
.game-card-desc { font-size: 0.825rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 1rem; min-height: 2.5rem; }
.game-play-btn {
  width: 100%; padding: 0.65rem; border-radius: var(--r-sm);
  background: var(--teal); color: white; font-weight: 700; font-size: 0.875rem;
  font-family: inherit; cursor: pointer; transition: all var(--t) var(--ease);
}
.game-play-btn:hover { background: var(--teal-dark); }
.game-play-pro { background: linear-gradient(135deg,#0B7EA8,#4DCFE0); }
.game-play-pro:hover { filter: brightness(1.08); }

/* ── UPGRADE PROMPT ── */
.upgrade-prompt {
  margin-top: 2.5rem;
  background: linear-gradient(120deg, rgba(124,92,252,0.08), rgba(77,207,224,0.08));
  border: 1.5px dashed var(--border-str);
  border-radius: var(--r-lg); padding: 1.75rem 2rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.upgrade-prompt-icon { font-size: 2.5rem; flex-shrink: 0; }
.upgrade-prompt-text { flex: 1; min-width: 220px; }
.upgrade-prompt-text h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--ink); margin-bottom: 0.3rem; }
.upgrade-prompt-text p { font-size: 0.875rem; color: var(--ink-soft); line-height: 1.55; }

/* ── SIDEBAR ── */
.games-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 88px; }
.top-games-box { background: white; border: 1.5px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.top-games-head { background: var(--surface-2); padding: 1rem 1.25rem; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--border); }
.top-game-item { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.25rem; cursor: pointer; transition: background var(--t); border-bottom: 1px solid var(--border); }
.top-game-item:last-child { border-bottom: none; }
.top-game-item:hover { background: var(--surface-2); }
.top-game-rank { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--cyan); width: 18px; }
.top-game-icon { width: 42px; height: 42px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.top-game-info { flex: 1; }
.top-game-name { font-weight: 700; font-size: 0.875rem; color: var(--ink); }
.top-game-arrow { color: var(--ink-muted); font-size: 0.875rem; }

.pro-promo-box {
  background: linear-gradient(135deg, #0B7EA8, #065070);
  border-radius: var(--r-lg); padding: 1.75rem; color: white; text-align: center;
}
.pro-promo-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.pro-promo-box h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; margin-bottom: 0.4rem; }
.pro-promo-box > p { font-size: 0.875rem; color: rgba(255,255,255,0.7); margin-bottom: 1.25rem; }
.pro-promo-list { text-align: left; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pro-promo-list li { font-size: 0.85rem; color: rgba(255,255,255,0.9); }

/* ── MODALS ── */
.game-modal, .upgrade-modal, .email-capture-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.game-modal.open, .upgrade-modal.open, .email-capture-modal.open { display: flex; }
.game-modal-backdrop { position: absolute; inset: 0; background: rgba(6,48,74,0.6); backdrop-filter: blur(4px); animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes popIn { from{opacity:0;transform:scale(0.94) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }

.game-modal-content {
  position: relative; background: white; border-radius: var(--r-xl);
  width: 100%; max-width: 560px; max-height: 90vh; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.3); animation: popIn 0.3s ease;
  display: flex; flex-direction: column;
}
.game-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.game-modal-title { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; color: var(--ink); }
.game-modal-close { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); font-size: 1rem; cursor: pointer; transition: all var(--t); display: flex; align-items: center; justify-content: center; }
.game-modal-close:hover { background: var(--border-md); color: var(--ink); }
.game-modal-body { padding: 1.5rem; overflow-y: auto; }

.upgrade-modal-content, .email-capture-content {
  position: relative; background: white; border-radius: var(--r-xl);
  width: 100%; max-width: 440px; padding: 2.5rem 2rem 2rem; text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,0.3); animation: popIn 0.3s ease;
}
.upgrade-modal-icon, .email-capture-icon { font-size: 3rem; margin-bottom: 1rem; }
.upgrade-modal-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--ink); margin-bottom: 0.5rem; }
.upgrade-modal-sub { font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 1.5rem; }
.upgrade-price { margin-bottom: 1.5rem; }
.upgrade-price-amount { font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--teal); }
.upgrade-price-note { display: block; font-size: 0.8rem; color: var(--ink-muted); margin-top: 0.2rem; }
.upgrade-features { text-align: left; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; }
.upgrade-features li { font-size: 0.9rem; color: var(--ink-soft); }
.upgrade-input {
  width: 100%; padding: 0.875rem 1rem; border: 1.5px solid var(--border-str);
  border-radius: var(--r-sm); font-family: inherit; font-size: 0.9375rem;
  color: var(--ink); outline: none; margin-bottom: 1rem; text-align: center;
}
.upgrade-input:focus { border-color: var(--teal); }
.upgrade-demo-link { display: block; width: 100%; margin-top: 0.875rem; background: none; color: var(--ink-muted); font-size: 0.825rem; cursor: pointer; text-decoration: underline; font-family: inherit; }
.upgrade-demo-link:hover { color: var(--teal); }
.upgrade-legal { font-size: 0.72rem; color: var(--ink-muted); margin-top: 1rem; }
.upgrade-success-icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg,#2BD9A0,#1FB888); color: white; font-size: 2.25rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; animation: popIn 0.4s ease; }

/* ── GAME PLAY AREA (inside modal) ── */
.gp-wrap { text-align: center; }
.gp-score { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1.25rem; }
.gp-score-item { background: var(--surface-2); border-radius: var(--r-sm); padding: 0.5rem 1rem; }
.gp-score-label { font-size: 0.68rem; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; letter-spacing: 0.05em; }
.gp-score-val { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; color: var(--teal); line-height: 1; }
.gp-btn { padding: 0.7rem 1.5rem; border-radius: var(--r-sm); background: var(--teal); color: white; font-weight: 700; font-family: inherit; cursor: pointer; transition: all var(--t); font-size: 0.9375rem; }
.gp-btn:hover { background: var(--teal-dark); transform: translateY(-1px); }
.gp-msg { font-size: 1rem; color: var(--ink-soft); margin: 1rem 0; min-height: 1.5rem; font-weight: 600; }

/* Responsive */
@media(max-width:980px) {
  .games-layout { grid-template-columns: 1fr; }
  .games-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .top-games-box, .pro-promo-box { flex: 1; min-width: 280px; }
}
@media(max-width:680px) {
  .daily-game { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
  .daily-game-art { font-size: 5rem; }
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 1rem; }
  .game-icon { font-size: 3rem; }
  .games-hero-stats { gap: 1.5rem; }
  .upgrade-prompt { flex-direction: column; text-align: center; }
}