/* Games hub (/games.php) — uses the site tokens from style.css */
.gm-section { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #fff5fa 0%, #fdeef6 50%, #fff6ea 100%); min-height: 420px; }
.gm-section > .container { position: relative; z-index: 1; }

/* animated base */
.gm-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.gm-blob { position: absolute; width: 520px; height: 520px; border-radius: 50%; will-change: transform; }
.gm-blob.b1 { background: radial-gradient(circle, rgba(232,91,164,.28), transparent 66%); top: -170px; left: -150px; animation: gm-blob1 22s ease-in-out infinite alternate; }
.gm-blob.b2 { background: radial-gradient(circle, rgba(217,159,58,.26), transparent 66%); bottom: -200px; right: -160px; animation: gm-blob2 26s ease-in-out infinite alternate; }
.gm-ring { position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; border: 2px dashed rgba(192,41,122,.10); animation: gm-spin 100s linear infinite; }
.gm-glyph { position: absolute; font-family: var(--font-dev); font-size: 38px; color: var(--maroon); opacity: 0; animation: gm-drift var(--d) ease-in-out var(--delay) infinite; }

/* cards */
.gm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); justify-content: center; gap: 22px; max-width: 1080px; margin: 0 auto; }
.gm-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px 24px 24px; border-radius: 22px; background: rgba(255,255,255,.95); border: 2px solid var(--line); box-shadow: 0 10px 30px rgba(110,24,69,.10); color: var(--ink); transition: transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s, border-color .3s; animation: gm-card-in .6s cubic-bezier(.2,.9,.3,1.2) backwards; animation-delay: calc(.1s + var(--i) * 120ms); }
.gm-card::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg); transition: left .7s ease; }
a.gm-card:hover { transform: translateY(-8px) rotate(-.6deg); border-color: var(--magenta); box-shadow: 0 22px 44px rgba(192,41,122,.18); }
a.gm-card:hover::after { left: 130%; }
a.gm-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.gm-icon { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; font-size: 36px; background: linear-gradient(135deg, var(--magenta), var(--magenta-dark)); box-shadow: 0 10px 22px rgba(192,41,122,.3); margin-bottom: 8px; animation: gm-float 3.4s ease-in-out infinite; }
a.gm-card:hover .gm-icon { animation-play-state: paused; transform: scale(1.1) rotate(-8deg); transition: transform .3s; }
.gm-tag { font-size: 12.5px; font-weight: 600; color: var(--gold-dark); background: #fbf0d6; padding: 3px 11px; border-radius: 20px; }
.gm-card h2 { font-family: var(--font-dev); font-size: 26px; color: var(--maroon); }
.gm-card p { font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.gm-meta { font-size: 13px; color: var(--muted); }
.gm-play { margin-top: 10px; display: inline-block; padding: 10px 24px; border-radius: 26px; font-weight: 600; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--magenta), var(--magenta-dark)); box-shadow: 0 8px 20px rgba(192,41,122,.28); animation: gm-glow 2.4s ease-in-out infinite; }
.gm-card.soon { border-style: dashed; background: rgba(255,255,255,.7); justify-content: center; align-items: center; text-align: center; box-shadow: none; }
.gm-card.soon .gm-icon { background: linear-gradient(135deg, #f0bf5c, var(--gold-dark)); box-shadow: 0 10px 22px rgba(185,132,42,.3); }
.gm-card.soon h2 { font-size: 22px; }
.gm-card.soon p { color: var(--muted); }

@keyframes gm-blob1 { to { transform: translate(150px, 110px) scale(1.2); } }
@keyframes gm-blob2 { to { transform: translate(-140px, -120px) scale(1.15); } }
@keyframes gm-spin { to { transform: rotate(360deg); } }
@keyframes gm-drift { 0% { opacity: 0; transform: translateY(40px) rotate(-12deg); } 25%, 75% { opacity: .1; } 100% { opacity: 0; transform: translateY(-70px) rotate(12deg); } }
@keyframes gm-card-in { from { opacity: 0; transform: translateY(40px) scale(.9) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes gm-float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(-4deg); } }
@keyframes gm-glow { 0%,100% { box-shadow: 0 8px 20px rgba(192,41,122,.28), 0 0 0 0 rgba(192,41,122,.35); } 50% { box-shadow: 0 8px 20px rgba(192,41,122,.28), 0 0 0 10px rgba(192,41,122,0); } }

@media (prefers-reduced-motion: reduce) {
  .gm-section *, .gm-section *::after { animation: none !important; transition: none !important; }
  .gm-glyph { opacity: .06; }
}
@media (max-width: 600px) {
  .gm-grid { grid-template-columns: 1fr; gap: 16px; }
  .gm-card { padding: 22px 18px 20px; }
  .gm-blob { width: 360px; height: 360px; }
  .gm-ring { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
}