/* digi-app · ui/games.css
   digiGAMES IN digiWORLD'S LOOK (digiAPP_Build 8x.8): the same in every look, because it is a place, the arcade on Main
   Street: a bright sky, ink outlines (#14123d), hard ink shadows, chunky words. Every scene moves on its own loop; reduced
   motion (or .still) stops them all. */

.pg-games{background:#9fd2ff;color:#14123d}
html[data-look] .pg-games{background:#9fd2ff;color:#14123d}
.pg-games .pg-top{position:absolute;left:0;right:0;top:0;z-index:3}
.pg-games .pg-back{background:#fff;color:#14123d;box-shadow:0 0 0 2.5px #14123d,0 4px 0 2.5px #14123d}
.pg-games .pg-top{transition:background .2s ease}
.pg-games.scrolled .pg-top{background:#62adff;box-shadow:0 3px 0 #14123d}
.pg-games .pg-body{padding:0 0 calc(var(--tabs-h) + 24px);max-width:none}

/* the sky, with Main Street along its bottom */
.gm-sky{position:relative;height:calc(var(--safe-t) + 236px);overflow:hidden;background:linear-gradient(180deg,#3f8fe8 0%,#62adff 45%,#9fd2ff 100%)}
.gm-sky::before{content:"";position:absolute;inset:0;background:radial-gradient(60px 26px at 22% 38%,rgba(255,255,255,.9),transparent 70%),radial-gradient(80px 30px at 70% 30%,rgba(255,255,255,.85),transparent 70%),radial-gradient(50px 20px at 88% 52%,rgba(255,255,255,.8),transparent 70%)}
.gm-sky .hz-st{position:absolute;left:0;right:0;bottom:0;width:100%;height:110px;display:block}
.gm-h{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 66px);margin:0;text-align:center;font-size:44px;font-weight:900;letter-spacing:-.01em;color:#fff;
  text-shadow:0 4px 0 #14123d,2.5px 0 0 #14123d,-2.5px 0 0 #14123d,0 -2.5px 0 #14123d,2px 2px 0 #14123d,-2px 2px 0 #14123d,2px -2px 0 #14123d,-2px -2px 0 #14123d}
.gm-h span{color:#cfe6ff}
/* GAMES wears digiWORLD's mark (Brian, Nov 10: "make GAMES the same colors as WORLD in digiWORLD page"): our three colors
   in one, red, purple, blue, green, a white shine passing through now and then, the ink outline around it (the website's
   .dw-mix, digi-world.html) */
.gm-h .gm-mix{background:linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 62%) -150% 0/250% 100% no-repeat,
  linear-gradient(90deg,#ff5a4f,#b45cff 34%,#62adff 64%,#3fe08a);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(2.5px 0 0 #14123d) drop-shadow(-2.5px 0 0 #14123d) drop-shadow(0 2.5px 0 #14123d) drop-shadow(0 -2px 0 #14123d) drop-shadow(0 3px 0 #14123d);animation:gmMix 5.5s ease-in-out infinite}
@keyframes gmMix{0%,55%{background-position:-150% 0,0 0}100%{background-position:250% 0,0 0}}
.gm-in{max-width:var(--col);margin:0 auto;padding:14px 16px 0;display:flex;flex-direction:column;gap:16px}

/* cards and tiles: white, ink outlined, a hard ink shadow; a press sinks into it */
.gm-card{padding:14px;border-radius:22px;background:#fff;color:#14123d;box-shadow:0 0 0 3px #14123d,0 6px 0 3px #14123d}
.gm-card .sk-strip{margin:0}
.gm-card .sk-n,.gm-card .sk-v,.gm-card .sk-w{color:#14123d}
.gm-q .qs,.gm-q .qs *{color:#14123d}
.gm-list{display:flex;flex-direction:column;gap:18px}
.gm-t{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:150px;padding:18px 14px 18px 20px;border:0;border-radius:26px;text-align:left;font:inherit;cursor:pointer;color:#fff;
  box-shadow:0 0 0 3px #14123d,0 7px 0 3px #14123d;transition:transform .1s ease,box-shadow .1s ease}
.gm-t:active{transform:translateY(5px);box-shadow:0 0 0 3px #14123d,0 2px 0 3px #14123d}
.gm-w{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.gm-w b{font-size:25px;font-weight:900;line-height:1.05;letter-spacing:-.01em;
  text-shadow:0 3px 0 #14123d,1.8px 0 0 #14123d,-1.8px 0 0 #14123d,0 -1.8px 0 #14123d,1.3px 1.3px 0 #14123d,-1.3px 1.3px 0 #14123d,1.3px -1.3px 0 #14123d,-1.3px -1.3px 0 #14123d}
.gm-w small{font-size:15.5px;font-weight:800;line-height:1.3;color:rgba(255,255,255,.95)}
.gm-st{align-self:flex-start;margin-top:4px;padding:7px 14px;border-radius:999px;background:#fff;color:#14123d;font-size:15px;font-weight:900;box-shadow:0 0 0 2.5px #14123d}
.gm-st.ok{background:#bbf7d0}
.gm-art{flex:none;width:124px;height:96px}
.gm-art svg{width:100%;height:100%;overflow:visible}
.gm-city{background:#4f46e5}.gm-trivia{background:#0ea5e9}.gm-math{background:#16a34a}.gm-memory{background:#f97316}.gm-walk{background:#0d9488}.gm-boards{background:#db2777}
.gm-earn{min-height:130px;background:linear-gradient(135deg,#f59e0b,#eab308 60%,#fde047)}
.gm-earn .gm-w small{color:#14123d}

/* the scenes */
.gw{fill:#2b2160;animation:gmWin 4s steps(1) var(--d,0s) infinite}
@keyframes gmWin{0%{fill:#2b2160}20%,80%{fill:#fde047}100%{fill:#2b2160}}
.gp{transform-origin:58px 47px;animation:gmPie 5s ease-out var(--d,0s) infinite}
@keyframes gmPie{0%{transform:scale(0)}12%,85%{transform:scale(1)}100%{transform:scale(0)}}
.gq{transform-box:fill-box;transform-origin:center;animation:gmBob 2.4s ease-in-out infinite}
@keyframes gmBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(6deg)}}
.gm-was{animation:gmWas 3.2s ease infinite}.gm-now{animation:gmNow 3.2s ease infinite}
@keyframes gmWas{0%,35%{opacity:1}55%,100%{opacity:.35}}
@keyframes gmNow{0%,35%{opacity:0;transform:translateY(6px)}55%,100%{opacity:1;transform:none}}
.gm-pct{transform-box:fill-box;transform-origin:center;animation:gmPop 3.2s ease infinite}
@keyframes gmPop{0%,40%{transform:scale(1)}50%{transform:scale(1.25)}60%,100%{transform:scale(1)}}
.gc{animation:gmFlip 3.6s ease-in-out var(--d,0s) infinite}
.gc-f{opacity:0;animation:gmFace 3.6s steps(1) var(--d,0s) infinite}
@keyframes gmFlip{0%,15%{transform:scaleX(1)}25%{transform:scaleX(0)}35%,75%{transform:scaleX(1)}85%{transform:scaleX(0)}95%,100%{transform:scaleX(1)}}
@keyframes gmFace{0%,24%{opacity:0}25%,84%{opacity:1}85%,100%{opacity:0}}
.gr{transform-box:fill-box;transform-origin:center;animation:gmRing 1.6s ease-out var(--d,0s) infinite}
@keyframes gmRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(3);opacity:0}}
.gs{transform-origin:60px 45px;animation:gmSweep 2.6s linear infinite}
@keyframes gmSweep{to{transform:rotate(360deg)}}
.gf{opacity:0;animation:gmStep 1.5s ease var(--d,0s) infinite}
@keyframes gmStep{0%,10%{opacity:0}30%,70%{opacity:1}100%{opacity:0}}
.pg-games.still *,.pg-games.still *::before{animation:none!important}
@media (prefers-reduced-motion:reduce){.pg-games *{animation:none!important}}