/* hub-games: the games list and a game's page (js/hub/games.js). Day theme. */
.gm { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 17cqw 4.5cqw calc(var(--nav-h) + 6cqw); box-sizing: border-box; }
.gm button, .gPage button { font: inherit; }
.gH { margin: 6cqw 1cqw 3cqw; font-family: var(--f-title); font-weight: 800; font-size: 5.6cqw; color: var(--day-ink); }

/* today's exercise */
.gDaily { margin-top: 2cqw; padding: 5cqw; border-radius: 6cqw; color: #F3E9D2; background: radial-gradient(120% 90% at 85% 0%, #2A3C63, #16213A); box-shadow: 0 2cqw 6cqw rgba(29, 42, 68, .28); }
.dHead { display: flex; align-items: baseline; justify-content: space-between; }
.dHead b { font-family: var(--f-title); font-weight: 800; font-size: 6.2cqw; color: #FFE3A1; }
.dHead span { font-size: 3.8cqw; font-weight: 700; color: #B8C2DA; }
.dChips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; margin: 4.5cqw 0; }
.dChip { position: relative; display: grid; justify-items: center; gap: 1.6cqw; }
.dChip i { width: 17cqw; height: 17cqw; border-radius: 50%; background: center/cover; box-shadow: 0 0 0 .8cqw rgba(255, 227, 161, .35); transition: filter .2s; }
.dChip small { font-size: 3.2cqw; font-weight: 700; text-align: center; line-height: 1.3; color: #DCE2F0; }
.dChip:not(.ok) i { filter: brightness(.8); }
.dChip em { position: absolute; top: 0; left: calc(50% + 4cqw); width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: var(--day-green); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 .7cqw #16213A; }
.dChip em svg { width: 4cqw; height: 4cqw; }
.dChip.ok i { box-shadow: 0 0 0 .9cqw var(--day-green); }
.dDone { text-align: center; font-weight: 800; font-size: 4.4cqw; color: #FFE3A1; padding: 2cqw 0 .5cqw; }
.gBtn { appearance: none; border: 0; width: 100%; min-height: 13cqw; border-radius: 7cqw; font-family: var(--f-ui, Tajawal, sans-serif); font-weight: 800; font-size: 5.2cqw; color: #1B1406; cursor: pointer;
  background: linear-gradient(#FFD98A, #F2B544); box-shadow: 0 1.2cqw 0 #A87A22; transition: transform .12s, box-shadow .12s; -webkit-tap-highlight-color: transparent; }
.gBtn:active { transform: translateY(.8cqw) scale(.96); box-shadow: 0 .3cqw 0 #A87A22; }
.gBtn.big { min-height: 15cqw; font-size: 5.8cqw; }

/* game cards */
.gGrid { display: grid; gap: 3cqw; }
.gCard { appearance: none; border: 0; text-align: start; display: flex; align-items: center; gap: 4cqw; width: 100%; min-height: 26cqw; padding: 2.6cqw; border-radius: 5.4cqw; cursor: pointer;
  background: var(--day-card); color: var(--day-ink); box-shadow: 0 .4cqw 0 var(--day-line), 0 1.6cqw 4cqw rgba(29, 42, 68, .08); transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.gCard:active { transform: scale(.96); }
.gPic { position: relative; flex: none; width: 21cqw; height: 21cqw; border-radius: 3.6cqw; background: center/cover; overflow: hidden; }
.gInfo { flex: 1; min-width: 0; display: grid; gap: 1.5cqw; justify-items: start; }
.gInfo b { font-family: var(--f-title); font-weight: 800; font-size: 5cqw; line-height: 1.2; }
.gTag { display: inline-block; padding: .6cqw 2.6cqw; border-radius: 3cqw; background: rgba(201, 138, 27, .13); color: #8A5B0A; font-size: 3.2cqw; font-weight: 700; line-height: 1.5; }
.gTag.big { font-size: 3.6cqw; padding: .8cqw 3.2cqw; }
.gMeta { display: flex; align-items: center; gap: 3cqw; min-height: 5cqw; }
.gStars { display: inline-flex; gap: .6cqw; }
.gStars svg { width: 4.4cqw; height: 4.4cqw; }
.gLvl, .gSoon { font-size: 3.4cqw; font-weight: 700; color: var(--day-mute); }
.gCard.off { background: rgba(255, 253, 247, .55); box-shadow: 0 .4cqw 0 var(--day-line); }
.gCard.off .gPic { filter: grayscale(.85) brightness(.7); }
.gCard.off .gInfo b { color: var(--day-mute); }
.gCard.off .gTag { background: rgba(29, 42, 68, .07); color: var(--day-mute); }
.gLock { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(29, 42, 68, .35); }
.gLock svg { width: 8cqw; height: 8cqw; }

/* hub-gamepage: the one page every game gets (js/hub/gamepage.js). Day theme. */
.gPage { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; overflow: hidden; background: var(--day-bg); padding-bottom: var(--nav-h); box-sizing: border-box; transform: translateX(-8cqw); opacity: 0; transition: transform .2s ease-out, opacity .2s; }
.gPage.in { transform: none; opacity: 1; }
.gPage button { font: inherit; }
.gpScroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6cqw; }

.gpHero { position: relative; height: 74cqw; overflow: hidden; border-radius: 0 0 8cqw 8cqw; background: #16213A; box-shadow: 0 2cqw 6cqw rgba(29, 42, 68, .25); }
.gpImg { position: absolute; inset: -4%; background: center/cover; animation: gpKen 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes gpKen { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2.2%, -1.6%); } }
.gpHero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(7, 11, 23, .4), transparent 30%, rgba(7, 11, 23, .15) 50%, rgba(7, 11, 23, .82)); }
.gpBack { position: absolute; z-index: 2; top: 15cqw; right: 4cqw; width: 12cqw; height: 12cqw; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255, 253, 247, .94); color: var(--day-ink);
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .3); transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.gpBack:active { transform: scale(.88); }
.gpBack svg { width: 6cqw; height: 6cqw; }
.gpTitle { position: absolute; z-index: 1; right: 5.5cqw; left: 5.5cqw; bottom: 5.5cqw; display: grid; gap: 2cqw; justify-items: start; color: #FFF6E0; }
.gpTitle h1 { margin: 0; font-family: var(--f-title); font-weight: 800; font-size: 9cqw; line-height: 1.15; text-shadow: 0 .6cqw 2.4cqw rgba(0, 0, 0, .6); }
.gpTag { display: inline-block; padding: .8cqw 3.4cqw; border-radius: 4cqw; background: rgba(255, 227, 161, .92); color: #6B4607; font-size: 3.6cqw; font-weight: 800; line-height: 1.5; }
.gpCard, .gpBenefit, .gpTitle > * { opacity: 0; }
.gpGo .gpTitle > *, .gpGo .gpCard, .gpGo .gpBenefit { animation: gpIn .45s cubic-bezier(.2, .8, .3, 1) both; }
.gpGo .gpTitle .gpTag { animation-delay: .05s; } .gpGo .gpTitle h1 { animation-delay: .12s; }
.gpGo .gpCard:nth-child(1) { animation-delay: .12s; } .gpGo .gpCard:nth-child(2) { animation-delay: .2s; } .gpGo .gpCard:nth-child(3) { animation-delay: .28s; } .gpGo .gpBenefit { animation-delay: .34s; }
@keyframes gpIn { from { opacity: 0; transform: translateY(3cqw); } to { opacity: 1; transform: none; } }

.gpBody { display: grid; gap: 3.4cqw; padding: 4.5cqw 4.5cqw 0; }
.gpCard { box-sizing: border-box; padding: 4.5cqw 4.5cqw 4cqw; border-radius: 5.4cqw; background: var(--day-card); box-shadow: 0 .4cqw 0 var(--day-line), 0 1.6cqw 4cqw rgba(29, 42, 68, .07); }
.gpCard h2 { margin: 0 0 3cqw; font-family: var(--f-title); font-weight: 800; font-size: 5cqw; color: var(--day-ink); }

/* stats */
.gpStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; padding: 3.4cqw 1.5cqw; }
.gpStats > div { display: grid; justify-items: center; align-content: center; gap: 1.2cqw; min-height: 17cqw; }
.gpStats > div + div { border-inline-start: 1px solid var(--day-line); }
.gpStats b { font-family: var(--f-title); font-weight: 800; font-size: 6.4cqw; line-height: 1.1; color: var(--day-ink); display: flex; align-items: center; min-height: 7cqw; }
.gpStats b small { font-size: 3.4cqw; color: var(--day-mute); }
.gpStats .gStars svg { width: 4.8cqw; height: 4.8cqw; }
.gpStats span { font-size: 3.2cqw; font-weight: 700; color: var(--day-mute); }

/* performance chart */
.gpBars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.6cqw; direction: rtl; }
.gpCol { display: grid; justify-items: center; gap: 1.4cqw; }
.gpVal { font-size: 3cqw; font-weight: 800; color: var(--day-mute); line-height: 1.2; }
.gpTrack { position: relative; width: 100%; height: 32cqw; display: flex; align-items: flex-end; border-radius: 3cqw; background: rgba(29, 42, 68, .05); overflow: hidden; }
.gpTrack i { display: block; width: 100%; height: var(--h, 10%); border-radius: 3cqw; background: linear-gradient(#9FB0D4, #7C8FBB); transform-origin: bottom; }
.gpGo .gpCol:not(.empty) .gpTrack i { animation: gpGrow .7s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(.35s + var(--d, 0ms)); }
@keyframes gpGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.gpCol.last .gpTrack i { background: linear-gradient(#8DA3D4, #5F78B4); }
.gpCol.best .gpTrack i { background: linear-gradient(#FFD98A, #E7A62E); box-shadow: 0 0 4cqw rgba(231, 166, 46, .55); }
.gpCol.best .gpVal { color: #A87010; }
.gpCol.empty .gpTrack { background: rgba(29, 42, 68, .035); border: .5cqw dashed rgba(29, 42, 68, .1); box-sizing: border-box; }
.gpCol.empty .gpTrack i { display: none; }
.gpDots { display: flex; gap: .9cqw; direction: ltr; }
.gpDots b { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: rgba(29, 42, 68, .16); }
.gpDots b.on { background: #E0A02A; }
.gpTrend { display: flex; align-items: center; gap: 2.4cqw; margin-top: 3.4cqw; padding-top: 3cqw; border-top: 1px solid var(--day-line); font-weight: 800; font-size: 3.9cqw; color: var(--day-ink); }
.gpTrend i { flex: none; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; display: grid; place-items: center; background: var(--day-mute); color: #fff; }
.gpTrend i svg { width: 4cqw; height: 4cqw; }
.gpTrend.up i { background: var(--day-green); }
.gpTrend.down i { background: #C98A1B; }
.gpEmpty { display: grid; justify-items: center; gap: 2.4cqw; padding: 2cqw 0 1cqw; text-align: center; }
.gpEmpty svg { width: 24cqw; fill: rgba(29, 42, 68, .1); }
.gpEmpty svg rect:last-child { fill: rgba(231, 166, 46, .55); }
.gpEmpty p { margin: 0; font-weight: 700; font-size: 4cqw; color: var(--day-mute); }

/* board */
.gpPct { display: flex; align-items: center; gap: 4cqw; padding: 3cqw 3.4cqw; margin-bottom: 3.4cqw; border-radius: 4.4cqw; background: linear-gradient(120deg, rgba(231, 166, 46, .17), rgba(231, 166, 46, .05)); }
.gpPct p { margin: 0; font-weight: 700; font-size: 4.3cqw; line-height: 1.5; color: var(--day-ink); }
.gpPct p b { font-family: var(--f-title); font-weight: 800; color: #A87010; font-size: 5cqw; }
.gpRing { position: relative; flex: none; width: 21cqw; height: 21cqw; }
.gpRing svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gpRing circle { fill: none; stroke-width: 10; }
.gpRing .bg { stroke: rgba(29, 42, 68, .1); }
.gpRing .fg { stroke: #E7A62E; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1) .5s; }
.gpRing b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-title); font-weight: 800; font-size: 5.2cqw; color: var(--day-ink); }
.gpList { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8cqw; }
.gpRow { display: flex; align-items: center; gap: 3cqw; min-height: 12.5cqw; padding: 0 3cqw 0 4cqw; border-radius: 4cqw; background: rgba(29, 42, 68, .035); }
.gpRow b { flex: 1; min-width: 0; font-weight: 800; font-size: 4.4cqw; color: var(--day-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpRow em { font-style: normal; font-family: var(--f-title); font-weight: 800; font-size: 4.6cqw; color: var(--day-ink); }
.gpRank { flex: none; display: grid; place-items: center; width: 8.4cqw; height: 8.4cqw; border-radius: 50%; font-family: var(--f-title); font-weight: 800; font-size: 4cqw; color: var(--day-mute); background: rgba(29, 42, 68, .07); }
.gpRank.m1 { background: linear-gradient(#FFE08A, #E0A02A); color: #5A3A00; box-shadow: 0 .5cqw 0 #A87A22; }
.gpRank.m2 { background: linear-gradient(#EEF1F6, #B4BECE); color: #3C4660; box-shadow: 0 .5cqw 0 #8993A8; }
.gpRank.m3 { background: linear-gradient(#F0C49A, #C58650); color: #4E2A0C; box-shadow: 0 .5cqw 0 #8E5A2D; }
.gpRow.me { background: linear-gradient(100deg, #FFE7A8, #FBD176); box-shadow: 0 .5cqw 0 #C98A1B, 0 1.6cqw 3.6cqw rgba(201, 138, 27, .3); transform: scale(1.02); }
.gpRow.me .gpRank { background: var(--day-ink); color: #FFE3A1; box-shadow: none; }
.gpGap { text-align: center; color: var(--day-mute); font-weight: 800; font-size: 5cqw; line-height: .8; letter-spacing: 1cqw; }
.gpInvite { margin-top: 3.4cqw; padding: 3cqw; text-align: center; font-weight: 800; font-size: 3.9cqw; color: var(--day-gold); border-radius: 4cqw; border: .5cqw dashed rgba(201, 138, 27, .45); }
.gpWait { display: flex; justify-content: center; gap: 2cqw; padding: 8cqw 0; }
.gpWait i { width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--day-gold); animation: gpDot 1s infinite ease-in-out; }
.gpWait i:nth-child(2) { animation-delay: .15s; } .gpWait i:nth-child(3) { animation-delay: .3s; }
@keyframes gpDot { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }

/* benefit (folded) */
.gpBenefit { border-radius: 5cqw; background: rgba(255, 253, 247, .6); box-shadow: 0 .4cqw 0 var(--day-line); }
.gpBenefit summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 13cqw; padding: 0 5cqw; cursor: pointer; font-weight: 800; font-size: 4.2cqw; color: var(--day-gold); -webkit-tap-highlight-color: transparent; }
.gpBenefit summary::-webkit-details-marker { display: none; }
.gpBenefit summary svg { width: 5.4cqw; height: 5.4cqw; transition: transform .2s; }
.gpBenefit[open] summary svg { transform: rotate(180deg); }
.gpBenefit p { margin: 0; padding: 0 5cqw 4.5cqw; font-size: 4.1cqw; line-height: 1.75; color: var(--day-ink); }

.gpFoot { flex: none; position: relative; margin-top: -4cqw; padding: 5cqw 5cqw 3cqw; background: linear-gradient(transparent, var(--day-bg) 35%); }
.gpFoot .gBtn { animation: gpPulse 2.8s ease-in-out 1.5s infinite; }
@keyframes gpPulse { 0%, 100% { filter: none; } 50% { filter: brightness(1.08) saturate(1.1); } }
@media (prefers-reduced-motion: reduce) { .gpImg, .gpFoot .gBtn { animation: none; } }
.gpFoot .gBtn { font-family: var(--f-title); font-weight: 800; font-size: 6cqw; }
/* a soft cover under the top bar once the page is scrolled, so the content does not run into the buttons */
.gPage::before { content: ''; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 17cqw; pointer-events: none; opacity: 0; transition: opacity .2s; background: linear-gradient(var(--day-bg) 70%, transparent); }
.gPage.gpScrolled::before { opacity: 1; }