/*
 * Game Room page (template-parts/product-pages/game-room.php). The track,
 * leaderboard and perks come from game-room-track.css.
 */

.vgr {
    --vgr-bg: #140c26;
    --vgr-bg-2: #1a1030;
    --vgr-card: #241640;
    --vgr-line: rgba(196, 181, 253, .16);
    --vgr-text: #ddd6fe;
    --vgr-muted: #a99bd0;
    --vgr-gold: #fbbf24;
    background: var(--vgr-bg);
    color: #fff;
    overflow: hidden;
}
.vgr-wrap { max-width: 76rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .vgr-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .vgr-wrap { padding: 0 2rem; } }

.vgr a { color: inherit; }
.vgr-h2 { margin: 0 0 1rem; color: #fff; font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; }
.vgr-copy { max-width: 40rem; margin: 0 0 1rem; color: var(--vgr-text); font-size: 1.0625rem; line-height: 1.75; }
.vgr-copy--strong { color: #fff; font-weight: 600; }
.vgr-copy--source { padding-left: 1rem; border-left: 3px solid var(--vgr-gold); color: #fff; }
.vgr-copy--source a { color: #fde68a; text-decoration: underline; text-underline-offset: 3px; }
.vgr-section { position: relative; padding: 5.5rem 0; }

.vgr-live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vgr-gold); }
.vgr-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(251, 191, 36, .35); animation: vgr-pulse 2.4s ease-out infinite; }
@keyframes vgr-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

.vgr-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.vgr-btn { display: inline-flex; align-items: center; justify-content: center; height: 3rem; padding: 0 1.5rem; border: 1px solid transparent; border-radius: .875rem; background: #6366f1; color: #fff !important; font-size: 1rem; font-weight: 700; text-decoration: none; box-shadow: 0 14px 34px -12px rgba(99, 102, 241, .9); transition: background-color .15s, transform .15s, border-color .15s; }
.vgr-btn:hover { background: #4f46e5; transform: translateY(-2px); }
.vgr-btn--ghost { border-color: rgba(196, 181, 253, .35); background: rgba(255, 255, 255, .04); box-shadow: none; }
.vgr-btn--ghost:hover { border-color: rgba(251, 191, 36, .6); background: rgba(255, 255, 255, .08); }
.vgr-btn:focus-visible { outline: 3px solid #fde68a; outline-offset: 3px; }

/* ---------- Hero ---------- */

.vgr-hero {
    position: relative;
    padding: 8rem 0 5rem;
    background:
        radial-gradient(50rem 28rem at 80% 10%, rgba(168, 85, 247, .35), transparent 70%),
        radial-gradient(36rem 24rem at 5% 90%, rgba(99, 102, 241, .28), transparent 70%),
        var(--vgr-bg);
}
.vgr-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); pointer-events: none; }
.vgr-hero__grid { position: relative; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .vgr-hero__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 4rem; } }
.vgr-hero__title { margin: 0; color: #fff; font-size: clamp(2.5rem, 6vw, 4.25rem); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.vgr-hero__eyebrow { display: flex; width: max-content; align-items: center; gap: .5rem; margin-bottom: 1.5rem; padding: .375rem .875rem; border: 1px solid rgba(251, 191, 36, .35); border-radius: 999px; background: rgba(251, 191, 36, .08); color: #fde68a; font-size: .875rem; font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.vgr-hero__lead { max-width: 34rem; margin: 1.5rem 0 0; color: var(--vgr-text); font-size: 1.1875rem; line-height: 1.7; }
.vgr-hero__lead a, .vgr-step a, .vgr-faq a, .vgr-weeks__more a { color: #fff; text-decoration: underline; text-decoration-color: rgba(251, 191, 36, .6); text-underline-offset: 3px; }
.vgr-hero__lead a:hover, .vgr-step a:hover, .vgr-faq a:hover, .vgr-weeks__more a:hover { text-decoration-color: var(--vgr-gold); }

/* The live game window */
.vgr-demo { position: relative; padding: 12px; border: 1px solid rgba(251, 191, 36, .35); border-radius: 1.5rem; background: linear-gradient(160deg, #3b2160, #1f1238 60%); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .85), 0 0 80px -20px rgba(168, 85, 247, .45); }
.vgr-demo__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .375rem .5rem .75rem; }
.vgr-demo__game { color: #fff; font-size: .9375rem; font-weight: 800; }
.vgr-demo__turn { padding: .25rem .75rem; border-radius: 999px; background: rgba(251, 191, 36, .14); color: #fde68a; font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.vgr-demo__stage { position: relative; display: grid; gap: .75rem; }
@media (min-width: 560px) { .vgr-demo__stage { grid-template-columns: minmax(0, 1fr) 9.5rem; align-items: start; } }

.vgr-demo__board { position: relative; aspect-ratio: 1; border-radius: .875rem; overflow: hidden; background: #2b1430; }
.vgr-demo__board > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; }
.vgr-piece { position: absolute; z-index: 2; width: 6.2%; height: auto; transform: translate(-50%, -82%); transition-property: left, top; transition-timing-function: ease-in-out; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .45)); will-change: left, top; }
.vgr-piece.is-turn { z-index: 3; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .85)) drop-shadow(0 4px 3px rgba(0, 0, 0, .45)); }
.vgr-piece.is-hop { animation: vgr-hop .2s ease-out; }
@keyframes vgr-hop { 50% { transform: translate(-50%, -112%); } }
.vgr-piece.is-climb { transition-timing-function: cubic-bezier(.3, 0, .2, 1); }
.vgr-piece.is-slide { transition-timing-function: cubic-bezier(.6, 0, .4, 1); animation: vgr-wobble .25s ease-in-out 4; }
@keyframes vgr-wobble { 25% { transform: translate(-50%, -82%) rotate(-10deg); } 75% { transform: translate(-50%, -82%) rotate(10deg); } }

.vgr-win { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: radial-gradient(circle, rgba(20, 12, 38, .2), rgba(20, 12, 38, .65)); animation: vgr-fade .4s ease-out; }
.vgr-win[hidden] { display: none; }
.vgr-win span { padding: .75rem 1.5rem; border-radius: 999px; background: linear-gradient(180deg, #fde68a, #f59e0b); color: #1a1030; font-size: clamp(1.125rem, 3vw, 1.625rem); font-weight: 900; letter-spacing: -.01em; box-shadow: 0 0 0 4px rgba(251, 191, 36, .25), 0 20px 50px -10px rgba(245, 158, 11, .8); animation: vgr-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes vgr-fade { from { opacity: 0; } }
@keyframes vgr-pop { from { transform: scale(.4); opacity: 0; } }
.vgr-demo.is-won .vgr-demo__board::after { content: ""; position: absolute; inset: -10%; z-index: 3; background-image: radial-gradient(circle, #fbbf24 2px, transparent 3px), radial-gradient(circle, #f472b6 2px, transparent 3px), radial-gradient(circle, #60a5fa 2px, transparent 3px), radial-gradient(circle, #34d399 2px, transparent 3px); background-size: 70px 90px, 90px 70px, 110px 80px, 80px 110px; background-position: 0 0, 20px 30px, 50px 10px, 30px 60px; animation: vgr-confetti 3s linear; pointer-events: none; }
@keyframes vgr-confetti { from { transform: translateY(-40%); opacity: 1; } to { transform: translateY(30%); opacity: 0; } }

/* Players and the die */
.vgr-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .vgr-players { grid-template-columns: 1fr; } }
.vgr-player { position: relative; display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border: 1px solid var(--vgr-line); border-radius: .75rem; background: rgba(20, 12, 38, .55); transition: border-color .2s, background-color .2s, opacity .2s; opacity: .62; }
.vgr-player.is-turn { border-color: var(--pc); background: rgba(255, 255, 255, .06); opacity: 1; box-shadow: 0 0 0 1px var(--pc) inset; }
.vgr-player.is-talking { opacity: 1; }
.vgr-player--red { --pc: #f87171; }
.vgr-player--blue { --pc: #60a5fa; }
.vgr-player--green { --pc: #34d399; }
.vgr-player--yellow { --pc: #fbbf24; }
.vgr-player__face { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; background: var(--pc); color: #1a1030; font-size: .8125rem; font-weight: 900; }
.vgr-player--ai .vgr-player__face { background: #4338ca; color: #e0e7ff; box-shadow: 0 0 0 2px var(--pc); font-size: .75rem; }
.vgr-player__name { min-width: 0; color: #fff; font-size: .875rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgr-player__mic { display: none; gap: 2px; align-items: center; height: 14px; margin-left: auto; }
.vgr-player.is-talking .vgr-player__mic { display: inline-flex; }
.vgr-player__mic::before, .vgr-player__mic::after { content: ""; width: 3px; height: 100%; border-radius: 2px; background: #34d399; animation: vgr-eq .5s ease-in-out infinite alternate; }
.vgr-player__mic::after { animation-delay: .25s; }
@keyframes vgr-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

.vgr-bubble { position: absolute; right: .5rem; bottom: calc(100% + 8px); z-index: 5; max-width: 13rem; padding: .5rem .75rem; border-radius: .75rem .75rem .25rem .75rem; background: #fff; color: #1a1030; font-size: .8125rem; font-weight: 700; line-height: 1.35; white-space: nowrap; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(6px) scale(.9); transform-origin: bottom right; transition: opacity .2s, transform .2s; pointer-events: none; }
.vgr-player.is-talking .vgr-bubble { opacity: 1; transform: none; }
@media (min-width: 560px) { .vgr-bubble { right: calc(100% + 10px); bottom: 50%; transform: translate(6px, 50%) scale(.9); border-radius: .75rem .75rem .25rem .75rem; } .vgr-player.is-talking .vgr-bubble { transform: translate(0, 50%); } }

.vgr-die { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 4rem; height: 4rem; padding: 10px; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 3px var(--dc, #fbbf24), 0 16px 30px -10px rgba(0, 0, 0, .6); transition: box-shadow .2s; }
.vgr-die span { border-radius: 50%; background: transparent; }
.vgr-die span.is-on { background: #1a1030; }
.vgr-die--red { --dc: #f87171; }
.vgr-die--blue { --dc: #60a5fa; }
.vgr-die--green { --dc: #34d399; }
.vgr-die--yellow { --dc: #fbbf24; }
.vgr-die.is-rolling { animation: vgr-roll .3s linear infinite; }
@keyframes vgr-roll { 25% { transform: rotate(-12deg) translateY(-3px); } 75% { transform: rotate(12deg) translateY(-3px); } }
@media (max-width: 559px) { .vgr-die { position: absolute; top: .75rem; right: .75rem; z-index: 4; width: 3rem; height: 3rem; padding: 7px; gap: 3px; } }
@media (min-width: 560px) { .vgr-players { grid-column: 2; grid-row: 1; align-self: start; } .vgr-die { grid-column: 2; grid-row: 1; align-self: end; justify-self: center; margin-bottom: .5rem; } }

/* ---------- Problem section and door ---------- */

.vgr-friday { background: linear-gradient(180deg, var(--vgr-bg), var(--vgr-bg-2)); }
.vgr-friday__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .vgr-friday__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.vgr-door { position: relative; display: grid; place-items: end center; height: 22rem; }
.vgr-door__glow { position: absolute; left: 50%; bottom: 3rem; width: 18rem; height: 18rem; border-radius: 50%; background: radial-gradient(circle, rgba(168, 85, 247, .55), transparent 65%); transform: translateX(-50%); transition: opacity 1s; opacity: .45; }
.vgr-door.is-open .vgr-door__glow { opacity: 1; }
.vgr-door__sprite { position: relative; z-index: 1; width: 288px; height: 378px; background-repeat: no-repeat; background-size: 2304px 378px; background-position: 0 0; image-rendering: pixelated; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .5)); }
.vgr-door.is-open .vgr-door__sprite { animation: vgr-door 1s steps(7) .3s forwards; }
@keyframes vgr-door { to { background-position: -2016px 0; } }
.vgr-door__floor { position: absolute; left: 50%; bottom: -1rem; width: 24rem; height: 3rem; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); transform: translateX(-50%); }
@media (max-width: 480px) { .vgr-door { height: 18rem; } .vgr-door__sprite { width: 216px; height: 284px; background-size: 1728px 284px; } @keyframes vgr-door { to { background-position: -1512px 0; } } }

.vgr-steps { display: grid; gap: 1rem; margin: 3.5rem 0 0; padding: 0; list-style: none; counter-reset: vgr-step; }
@media (min-width: 768px) { .vgr-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vgr-step { position: relative; padding: 1.5rem; border: 1px solid var(--vgr-line); border-radius: 1.125rem; background: rgba(36, 22, 64, .6); }
.vgr-step__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; border-radius: .75rem; background: rgba(251, 191, 36, .12); color: #fde68a; }
.vgr-step__icon svg { width: 1.375rem; height: 1.375rem; }
.vgr-step__title { margin: 0 0 .375rem; color: #fff; font-size: 1.125rem; font-weight: 800; }
.vgr-step p { margin: 0; color: var(--vgr-text); font-size: .9375rem; line-height: 1.65; }

/* ---------- Games and leaderboard bands (game-room-track.css) ---------- */

.vgr .vsg { padding: 5.5rem 0; }
.vgr-weeks .vgr-copy { margin-bottom: 0; }
.vgr-weeks .vsg-track { margin-top: 3rem; }
.vgr-weeks__more { margin: 2rem 0 0; font-size: .9375rem; font-weight: 700; }
.vgr-counts { background: radial-gradient(50rem 26rem at 20% 0%, rgba(251, 191, 36, .12), transparent 70%), var(--vgr-bg-2) !important; }
.vgr-counts .vsg-board { margin-top: 0; }
.vgr-counts .vsg-board__title { font-size: clamp(1.75rem, 3.6vw, 2.5rem); letter-spacing: -.03em; }
.vgr-counts .vsg-perks__title { margin-bottom: 1.25rem; color: #fff; font-size: 1.375rem; letter-spacing: -.01em; text-transform: none; }
.vgr-counts .vsg-perks { margin-top: 3.5rem; }

/* ---------- Play your team, or play AI ---------- */

.vgr-modes { display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .vgr-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vgr-mode { padding: 1.75rem; border: 1px solid var(--vgr-line); border-radius: 1.25rem; background: linear-gradient(180deg, #2a1a4a, var(--vgr-card)); transition: transform .2s, border-color .2s; }
.vgr-mode:hover { transform: translateY(-4px); border-color: rgba(251, 191, 36, .45); }
.vgr-mode__seats { width: 7.5rem; height: 7.5rem; margin-bottom: 1.25rem; }
.vgr-mode__seats svg { width: 100%; height: 100%; }
.vgr-mode__title { margin: 0 0 .5rem; color: #fff; font-size: 1.25rem; font-weight: 800; }
.vgr-mode p { margin: 0; color: var(--vgr-text); font-size: .9375rem; line-height: 1.65; }

/* ---------- Tournaments ---------- */

.vgr-soon__card { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .vgr-soon__card { grid-template-columns: minmax(0, 1fr) 20rem; } }
.vgr-soon { padding: 4.5rem 0; }
.vgr-soon .vgr-wrap { padding-top: 2.5rem; padding-bottom: 2.5rem; border: 1px dashed rgba(196, 181, 253, .35); border-radius: 1.5rem; background: repeating-linear-gradient(135deg, rgba(196, 181, 253, .035) 0 12px, transparent 12px 24px), rgba(36, 22, 64, .45); }
@media (min-width: 1024px) { .vgr-soon .vgr-wrap { padding: 3rem; max-width: 72rem; } }
.vgr-soon .vgr-copy { margin: 0; }
.vgr-badge { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .3125rem .75rem; border-radius: 999px; background: rgba(251, 191, 36, .14); color: #fde68a; font-size: .8125rem; font-weight: 700; }
.vgr-soon__bracket { width: 100%; max-width: 20rem; height: auto; justify-self: center; }
.vgr-soon__cup { transform-origin: 172px 80px; animation: vgr-cup 3s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(251, 191, 36, .55)); }
@keyframes vgr-cup { 50% { transform: translateY(-4px) scale(1.04); } }

/* ---------- FAQ ---------- */

.vgr-faq { background: var(--vgr-bg-2); }
.vgr-faq__wrap { display: grid; gap: 2rem; }
@media (min-width: 900px) { .vgr-faq__wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; } }
.vgr-faq__list { display: grid; gap: .75rem; }
.vgr-faq__item { border: 1px solid var(--vgr-line); border-radius: 1rem; background: rgba(36, 22, 64, .55); }
.vgr-faq__item[open] { border-color: rgba(251, 191, 36, .35); }
.vgr-faq__item summary { position: relative; padding: 1.125rem 3rem 1.125rem 1.25rem; color: #fff; font-size: 1rem; font-weight: 700; list-style: none; cursor: pointer; }
.vgr-faq__item summary::-webkit-details-marker { display: none; }
.vgr-faq__item summary::after { content: ""; position: absolute; top: 50%; right: 1.25rem; width: .625rem; height: .625rem; border-right: 2px solid var(--vgr-gold); border-bottom: 2px solid var(--vgr-gold); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.vgr-faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.vgr-faq__item summary:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; border-radius: 1rem; }
.vgr-faq__item p { margin: 0; padding: 0 1.25rem 1.25rem; color: var(--vgr-text); font-size: .9375rem; line-height: 1.7; }

/* ---------- Closing CTA ---------- */

.vgr-cta { position: relative; padding: 6.5rem 0; text-align: center; background: radial-gradient(40rem 20rem at 50% 100%, rgba(168, 85, 247, .45), transparent 70%), var(--vgr-bg); }
.vgr-cta__inner { display: flex; flex-direction: column; align-items: center; }
.vgr-cta .vgr-copy { margin: 0; }
.vgr-cta .vgr-actions { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .vgr-live::after, .vgr-soon__cup, .vgr-player__mic::before, .vgr-player__mic::after { animation: none; }
    .vgr-door .vgr-door__sprite { animation: none !important; background-position: -2016px 0; }
    .vgr-mode, .vgr-btn { transition: none; }
}