/* Arcade Locker visual layer (v10).
   Loaded after the page's built-in styles: same class names, upgraded look + motion.
   Direction: a neon arcade at night seen through frosted glass. Depth from layered light, not boxes.
   Everything that moves is switched off under prefers-reduced-motion (bottom of file). */

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --glass: rgba(24, 27, 60, .58);
  --glass-hi: rgba(36, 40, 88, .72);
  --stroke: rgba(170, 150, 255, .16);
  --stroke-hi: rgba(200, 185, 255, .34);
  --ease: cubic-bezier(.2, .9, .25, 1);
  --spring: cubic-bezier(.25, 1.5, .45, 1);
  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, .75), 0 12px 30px -18px rgba(0, 0, 0, .6);
}

html { scroll-behavior: smooth; }
body { background: #06071a; }
::selection { background: rgba(255, 77, 109, .45); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #3a3f7a transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2f3470; border-radius: 99px; border: 2px solid #06071a; }

/* ---------- living background ---------- */
#fx-bg, #fx-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#fx-bg { z-index: -3; }
#fx-confetti { z-index: 90; }
.sky { z-index: -2; background: transparent; }
.sky::before {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: 44%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 77, 109, .7), rgba(180, 140, 255, .9), rgba(57, 208, 255, .7), transparent);
  box-shadow: 0 0 30px 6px rgba(180, 120, 255, .35); filter: blur(.5px);
}
.sky::after { opacity: .75; }
#fx-spot {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 20%), rgba(140, 100, 255, .10), transparent 65%);
  transition: opacity .4s;
}
body.playing #fx-spot { opacity: 0; }

/* ---------- the logo: a little arcade locker with a joystick (v12) ----------
   Sized in em, so the same markup works in the top bar, the opening animation and the app icon.
   Hover it and the locker door swings open to show the glowing prizes inside. */
.logo { gap: 12px; }
.lmark { position: relative; display: block; width: 1em; height: 1em; font-size: 46px; flex: none; perspective: 2.6em; }
.lmark::before {
  content: ""; position: absolute; inset: -.05em; border-radius: .32em;
  background: conic-gradient(from var(--ang, 0deg), #ffcc33, #ff4d6d, #b48cff, #39d0ff, #3ee07a, #ffcc33);
  animation: spinAng 5s linear infinite; box-shadow: 0 0 .3em rgba(255, 77, 109, .45), 0 0 .7em rgba(57, 208, 255, .2);
}
.l-in, .l-door { position: absolute; inset: .045em; border-radius: .27em; overflow: hidden; }
.l-in { background: radial-gradient(circle at 50% 46%, #fffbe0 0, #ffd84a .1em, #ff4d6d .36em, #5a1166 .62em, #1a0830 .9em); }
.l-in i { position: absolute; width: .15em; height: .15em; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: ltw 1.6s ease-in-out infinite; }
.l-in i:nth-child(1) { left: .16em; top: .18em; } .l-in i:nth-child(2) { right: .14em; top: .3em; animation-delay: -.5s; } .l-in i:nth-child(3) { left: .42em; bottom: .12em; animation-delay: -1s; }
.l-door {
  background: linear-gradient(155deg, #3c43a6 0%, #21255f 50%, #13153c 100%);
  box-shadow: inset 0 .02em 0 rgba(255, 255, 255, .28), inset 0 -.05em .1em rgba(0, 0, 0, .55);
  transform-origin: 0 50%; transition: transform .8s var(--spring); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.l-door::after { content: ""; position: absolute; top: -60%; left: -80%; width: 45%; height: 220%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent); transform: rotate(18deg); animation: lsheen 5s ease-in-out infinite; }
.l-vent { position: absolute; left: .2em; right: .2em; top: .13em; height: .2em; border-radius: .02em; background: repeating-linear-gradient(180deg, rgba(200, 208, 255, .8) 0 .036em, transparent .036em .075em); }
.l-handle { position: absolute; right: .085em; top: .4em; width: .06em; height: .2em; border-radius: .03em; background: linear-gradient(#fff0a8, #ffb300); box-shadow: 0 0 .08em rgba(255, 204, 51, .9); }
.l-base { position: absolute; left: 50%; bottom: .12em; width: .38em; height: .11em; margin-left: -.19em; border-radius: 50%; background: radial-gradient(ellipse, #b5f0ff, #39d0ff 55%, #11618a); box-shadow: 0 0 .14em rgba(57, 208, 255, .85); }
.l-joy { position: absolute; left: 50%; bottom: .17em; width: .07em; height: .3em; margin-left: -.035em; border-radius: .035em; background: linear-gradient(90deg, #8d93cf, #f4f5ff 50%, #8d93cf); transform-origin: 50% 100%; animation: ljoy 4.2s ease-in-out infinite; }
.l-joy::before { content: ""; position: absolute; left: 50%; top: -.17em; width: .25em; height: .25em; margin-left: -.125em; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffd6df, #ff4d6d 55%, #a0103a); box-shadow: 0 0 .14em rgba(255, 77, 109, .9); }
.logo:hover .l-door, .logo:focus-visible .l-door { transform: rotateY(-80deg); }
@keyframes ljoy { 0%, 52%, 100% { transform: rotate(0); } 60% { transform: rotate(-20deg); } 68% { transform: rotate(17deg); } 76% { transform: rotate(-10deg); } 84% { transform: rotate(5deg); } 92% { transform: rotate(-2deg); } }
@keyframes lsheen { 0%, 62% { left: -80%; } 100% { left: 140%; } }
@keyframes ltw { 50% { transform: scale(.35) rotate(45deg); opacity: .4; } }
/* "Izzy's" glows like a neon sign (and flickers now and then) above ARCADE LOCKER */
.lword { display: grid; justify-items: start; line-height: 1; }
.lizzy {
  font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", "Lucida Handwriting", cursive; font-weight: 700; font-size: 1.12rem;
  color: #ffe3ea; display: inline-block; transform: rotate(-5deg); transform-origin: 0 100%; margin: 0 0 -.02em .05em; white-space: nowrap;
  text-shadow: 0 0 .08em #fff, 0 0 .25em #ff4d6d, 0 0 .55em #ff4d6d, 0 0 1em rgba(255, 77, 109, .6);
  animation: neon 7s linear infinite;
}
@keyframes neon { 0%, 8.9%, 11%, 12.9%, 15%, 61.9%, 64%, 100% { opacity: 1; } 9%, 13%, 62% { opacity: .35; text-shadow: none; } }
.logo .wordmark { font-size: 1.32rem; }
@media (max-width: 520px) { .logo .lmark { font-size: 40px; } .logo .lizzy { font-size: .92rem; } .logo .wordmark { font-size: 1.1rem; } }

/* ---------- opening animation (v12) ----------
   The locker pops in, its door bursts open, little game pieces fly out, the name lights up,
   then everything zooms into the locker and the site appears. Tap or press a key to skip. */
#fx-intro { display: none; }
html.intro #fx-intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 4vmin; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 42%, #221a5c 0%, #0b0b24 52%, #04040f 100%);
  animation: iOut .6s 2.55s cubic-bezier(.7, 0, .84, 0) forwards;
}
html.intro body { overflow: hidden; }
#fx-intro.skip { animation: iOut .3s ease forwards !important; }
.i-rays {
  position: absolute; inset: -30%; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 204, 51, .13) 0 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 55%); mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 55%);
  animation: iRays 3.2s .75s linear both;
}
.i-stage { position: relative; display: grid; place-items: center; animation: iZoom .62s 2.5s cubic-bezier(.7, 0, .84, 0) forwards; }
.i-stage .lmark { font-size: min(34vmin, 170px); animation: iPop .8s cubic-bezier(.2, 1.5, .4, 1) both; }
.i-stage .l-door { animation: iDoor .75s .78s cubic-bezier(.3, 1.35, .5, 1) both; }
.i-glow { position: absolute; width: min(70vmin, 360px); height: min(70vmin, 360px); border-radius: 50%; background: radial-gradient(circle, rgba(255, 224, 120, .9), rgba(255, 77, 109, .45) 35%, rgba(180, 140, 255, .15) 60%, transparent 70%); opacity: 0; animation: iGlow 1.4s .8s ease-out both; }
.i-toys { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.i-toys i {
  position: absolute; left: 0; top: 0; font-style: normal; font-size: clamp(20px, 4.6vmin, 38px); line-height: 1; color: var(--c);
  font-family: "Segoe UI Symbol", "Segoe UI", sans-serif; text-shadow: 0 0 14px var(--c); opacity: 0;
  animation: iToy 1.25s calc(.86s + var(--k) * .045s) cubic-bezier(.12, .8, .3, 1) both;
}
.i-word { position: relative; display: grid; justify-items: center; line-height: 1; animation: iWordOut .5s 2.45s ease-in forwards; }
.i-word .lizzy { font-size: clamp(1.7rem, 6.5vw, 2.9rem); transform: rotate(-4deg); margin: 0 0 .05em; animation: iNeon 1.1s 1.05s linear both; }
.i-word .wordmark { font-size: clamp(2.1rem, 8.6vw, 4rem); letter-spacing: .06em; background: none; color: #fff; -webkit-text-fill-color: currentColor; animation: none; white-space: nowrap; }
.i-word .wordmark b { display: inline-block; font-weight: inherit; color: #fff; text-shadow: 0 0 18px rgba(180, 140, 255, .65); animation: iDrop .6s calc(1.25s + var(--k) * .045s) cubic-bezier(.2, 1.6, .4, 1) both; }
.i-word .wordmark .hot b { color: var(--hot); text-shadow: 0 0 18px rgba(255, 77, 109, .75); }
.i-bar { width: min(240px, 50vw); height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; animation: iWordOut .4s 2.4s ease-in forwards; }
.i-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffcc33, #ff4d6d, #b48cff, #39d0ff); transform-origin: 0 50%; animation: iLoad 2.3s .2s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes iPop { from { transform: scale(.15) rotate(-24deg); opacity: 0; } }
@keyframes iDoor { from { transform: rotateY(0); } to { transform: rotateY(-112deg); } }
@keyframes iGlow { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1.25); } 100% { opacity: .55; transform: scale(1); } }
@keyframes iRays { from { opacity: 0; transform: rotate(0); } 20% { opacity: 1; } to { opacity: .8; transform: rotate(40deg); } }
@keyframes iToy {
  0% { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) rotate(calc(var(--a) * -1)) scale(.2); opacity: 0; }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--d) * -1vmin)) rotate(calc(var(--a) * -1)) scale(1); opacity: 0; }
}
@keyframes iNeon { 0% { opacity: 0; } 10% { opacity: 1; } 20% { opacity: .15; } 32% { opacity: 1; } 42% { opacity: .35; } 56%, 100% { opacity: 1; } }
@keyframes iDrop { from { transform: translateY(-70px) rotate(-14deg) scale(1.5); opacity: 0; } }
@keyframes iLoad { from { transform: scaleX(0); } }
@keyframes iZoom { to { transform: scale(7); opacity: 0; } }
@keyframes iWordOut { to { transform: translateY(26px); opacity: 0; } }
@keyframes iOut { to { opacity: 0; visibility: hidden; } }
@keyframes riseIn { from { transform: translateY(14px); opacity: 0; filter: blur(6px); } }

/* ---------- goodbye doors (v12) ----------
   Leaving or refreshing: two locker doors slam shut with "See you soon!".
   Coming back (refresh, or the Back button): they swing open again. */
#fx-bye { position: fixed; inset: 0; z-index: 210; pointer-events: none; display: grid; place-items: center; visibility: hidden; overflow: hidden; }
html.leaving #fx-bye, html.arriving #fx-bye { visibility: visible; }
#fx-bye .bd { position: absolute; top: 0; bottom: 0; width: 50.5%; background: linear-gradient(90deg, #171a46, #272c72 55%, #1b1e54); }
#fx-bye .bd.l { left: 0; transform: translateX(-101%); border-right: 2px solid rgba(180, 140, 255, .55); }
#fx-bye .bd.r { right: 0; transform: translateX(101%); border-left: 2px solid rgba(180, 140, 255, .55); }
#fx-bye .bd::before { content: ""; position: absolute; left: 16%; right: 16%; top: 11%; height: 74px; border-radius: 6px; background: repeating-linear-gradient(180deg, rgba(200, 208, 255, .38) 0 7px, transparent 7px 16px); }
#fx-bye .bd::after { content: ""; position: absolute; top: 50%; width: 12px; height: 84px; margin-top: -42px; border-radius: 7px; background: linear-gradient(#fff0a8, #ffb300); box-shadow: 0 0 22px rgba(255, 204, 51, .75); }
#fx-bye .bd.l::after { right: 110px; } #fx-bye .bd.r::after { left: 110px; }
@media (max-width: 520px) { #fx-bye .bd.l::after { right: 70px; } #fx-bye .bd.r::after { left: 70px; } #fx-bye .bye-in .lmark { font-size: 84px; } }
#fx-bye .bye-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; opacity: 0; transform: scale(.6); }
#fx-bye .bye-in .lmark { font-size: 104px; }
#fx-bye .bye-in .lizzy { font-size: clamp(1.6rem, 5vw, 2.3rem); transform: rotate(-4deg); }
html.leaving #fx-bye .bd { transform: none; transition: transform .45s cubic-bezier(.7, 0, .3, 1); box-shadow: 0 0 80px rgba(0, 0, 0, .7); }
html.leaving #fx-bye .bye-in { opacity: 1; transform: none; transition: opacity .25s .3s, transform .5s .3s var(--spring); }
html.arriving #fx-bye .bd.l { animation: byeOpenL .75s .12s cubic-bezier(.6, 0, .3, 1) both; }
html.arriving #fx-bye .bd.r { animation: byeOpenR .75s .12s cubic-bezier(.6, 0, .3, 1) both; }
html.arriving #fx-bye .bye-in { animation: byeFade .5s both; }
html.arriving #fx-bye .bye-in .lizzy { display: none; }
@keyframes byeOpenL { from { transform: none; } to { transform: translateX(-101%); } }
@keyframes byeOpenR { from { transform: none; } to { transform: translateX(101%); } }
@keyframes byeFade { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.4); } }

/* closing a game: the game shrinks away before the menu comes back */
#play.closing { animation: playOut .28s cubic-bezier(.5, 0, .75, 0) forwards !important; pointer-events: none; }
@keyframes playOut { to { opacity: 0; transform: scale(.94) translateY(12px); filter: blur(6px); } }

/* ---------- screens slide in ---------- */
#hub:not([hidden]), #play:not([hidden]), #hall:not([hidden]) { animation: viewIn .5s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(16px) scale(.99); filter: blur(5px); } }

/* ---------- top bar: frosted, sticky ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  margin: 0 -16px 8px; padding: 14px 16px; border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, rgba(8, 9, 28, .82), rgba(8, 9, 28, .55));
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--stroke);
}
.wordmark {
  background: linear-gradient(90deg, #fff 0%, #fff 40%, #ffd1dc 50%, #fff 60%, #fff 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 6s linear infinite;
}
.wordmark span { color: var(--hot); -webkit-text-fill-color: var(--hot); }
@keyframes sheen { to { background-position: -250% 0; } }
.search input { background: var(--glass); border-color: var(--stroke); transition: border-color .25s, box-shadow .25s, background .25s; }
.search input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(180, 140, 255, .18), 0 0 30px rgba(180, 140, 255, .25); background: var(--glass-hi); }

/* ---------- buttons: spring, ripple, shine ---------- */
.btn, .gbtn, .iconbtn, .chip { position: relative; overflow: hidden; transition: transform .2s var(--spring), box-shadow .25s, background-color .25s, border-color .25s, color .25s; }
.iconbtn { background: var(--glass); border-color: var(--stroke); }
.iconbtn:hover { border-color: var(--stroke-hi); background: var(--glass-hi); transform: translateY(-1px); }
.btn:hover, .gbtn:not(:disabled):hover { transform: translateY(-2px); }
.btn:active, .gbtn:not(:disabled):active, .iconbtn:active, .chip:active { transform: scale(.95); }
.btn { background: var(--glass); border-color: var(--stroke); }
.btn.primary {
  background-color: var(--hc, var(--yellow));
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%, rgba(255, 60, 110, .28));
  box-shadow: 0 10px 28px -10px var(--hc, var(--yellow)), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn.primary:hover { box-shadow: 0 16px 36px -10px var(--hc, var(--yellow)), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn.primary::after, .gbtn.primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg);
  animation: shine 3.6s ease-in-out infinite;
}
@keyframes shine { 0%, 62% { left: -60%; } 100% { left: 140%; } }
.gbtn { background: var(--glass-hi); border-color: var(--stroke); }
.gbtn:not(:disabled):hover { border-color: var(--stroke-hi); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .8); }
.gbtn.primary { box-shadow: 0 8px 22px -10px var(--c); }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .35); transform: scale(0); animation: ripple .65s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- hero: animated neon frame ---------- */
.hero, .daily {
  border: 1.5px solid transparent;
  background:
    linear-gradient(135deg, rgba(36, 40, 92, .92), rgba(18, 20, 48, .94)) padding-box,
    conic-gradient(from var(--ang, 0deg), var(--hc, var(--c)), transparent 25%, #b48cff 45%, transparent 65%, var(--hc, var(--c))) border-box;
  animation: spinAng 9s linear infinite; box-shadow: var(--shadow-lg);
}
.daily { --hc: var(--c); }
@keyframes spinAng { to { --ang: 360deg; } }
.hero h1 {
  background: linear-gradient(100deg, #fff 20%, var(--hc, #fff) 50%, #fff 80%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 7s linear infinite;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .45));
}
.hero-copy > * { animation: riseIn .7s var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: .06s; } .hero-copy > *:nth-child(3) { animation-delay: .12s; }
.hero-copy > *:nth-child(4) { animation-delay: .18s; } .hero-copy > *:nth-child(5) { animation-delay: .24s; }
.hero-art::before {
  content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--hc), transparent 70%); opacity: .45; filter: blur(20px);
  animation: pulse 3.2s ease-in-out infinite;
}
.hero-art::after {
  content: ""; position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: radial-gradient(circle at 50% 0, var(--hc) 0 4px, transparent 5px), radial-gradient(circle at 100% 50%, #fff 0 2px, transparent 3px);
  animation: spin 14s linear infinite;
}
.hero-art .big { transform: translate(var(--px, 0), var(--py, 0)); transition: transform .3s var(--ease); position: relative; z-index: 1; }
@keyframes pulse { 50% { transform: scale(1.18); opacity: .3; } }
.hero-stats b { background: linear-gradient(180deg, #fff, #c9c6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- daily + progress cards ---------- */
.daily::before { opacity: .8; }
.d-art { position: relative; overflow: hidden; }
.d-art { background: #11132a; }
.d-art::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, var(--c), transparent 70%); opacity: .35; }
.d-art span { position: relative; z-index: 1; }
.d-art::after { content: ""; position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .16); animation: spin 20s linear infinite; }
.daily::before { background: linear-gradient(110deg, rgba(255, 255, 255, .05), transparent 55%); }
.me-card { background: linear-gradient(160deg, rgba(36, 40, 92, .88), rgba(18, 20, 48, .92)); border-color: var(--stroke); box-shadow: var(--shadow-lg); }
.xpbar { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.xpbar i { background: linear-gradient(90deg, #ffcc33, #ff4d6d, #b48cff, #ffcc33) 0 0 / 300% 100%; animation: flow 4s linear infinite; box-shadow: 0 0 14px rgba(255, 140, 80, .6); transition: width .9s var(--ease); }
@keyframes flow { to { background-position: -300% 0; } }
.lvl { box-shadow: 0 0 24px rgba(255, 204, 51, .25); }
.me-stats span { background: rgba(10, 12, 32, .55); border: 1px solid var(--stroke); transition: transform .25s var(--spring); }
.me-stats span:hover { transform: translateY(-3px); }

/* ---------- category chips ---------- */
.chips { padding: 4px 2px 10px; gap: 10px; }
.chip { background: var(--glass); border-color: var(--stroke); backdrop-filter: blur(6px); }
.chip:hover { border-color: var(--stroke-hi); color: var(--fg); transform: translateY(-2px); }
.chip[aria-pressed="true"] {
  background: linear-gradient(135deg, #fff, #e3dcff); color: #120f2e; border-color: transparent;
  box-shadow: 0 8px 26px -8px rgba(200, 180, 255, .8);
}
.chip .ci { font-size: 1rem; line-height: 1; opacity: .9; }
.section-head h2 { position: relative; padding-left: 14px; }
.section-head h2::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 4px; border-radius: 4px; background: linear-gradient(var(--yellow), var(--hot)); box-shadow: 0 0 12px rgba(255, 77, 109, .6); }

/* ---------- game cards: 3D tilt + spotlight ---------- */
.grid { gap: 18px; }
.card { perspective: 900px; animation: cardIn .6s var(--ease) both; animation-delay: calc(min(var(--i, 0), 20) * 32ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(22px) scale(.96); } }
.card-main {
  border: 1px solid var(--stroke); border-radius: 20px;
  background: linear-gradient(165deg, rgba(38, 43, 96, .9), rgba(16, 18, 44, .95));
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .8);
}
.card-main::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--c), transparent 60%);
}
.card-main:hover, .card-main:focus-visible {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  border-color: var(--c);
  box-shadow: 0 26px 50px -26px var(--c), 0 20px 40px -24px rgba(0, 0, 0, .9);
}
.card-main:hover::after, .card-main:focus-visible::after { opacity: .3; }
/* fix: the picture area was being squashed flat by the card's flex layout */
.thumb { flex: none; width: 100%; height: 132px; aspect-ratio: auto; }
.thumb {
  background:
    radial-gradient(rgba(255, 255, 255, .09) 1.4px, transparent 1.8px) 0 0 / 15px 15px,
    linear-gradient(180deg, #0d0f2a, #151840);
  animation: dots 18s linear infinite;
}
@keyframes dots { to { background-position: 150px 75px, 0 0; } }
.thumb::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--c), transparent 68%); opacity: .5; transition: opacity .35s, transform .45s var(--spring); }
.card-main:hover .thumb::before { opacity: .75; transform: scale(1.15); }
.thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, rgba(16, 18, 44, .95)); }
.thumb .ico { font-size: 3.6rem; position: relative; z-index: 1; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); transition: transform .45s var(--spring); }
.card-main:hover .ico { transform: translateZ(40px) scale(1.18) rotate(-6deg); }
.thumb .tag { z-index: 2; backdrop-filter: blur(6px); background: rgba(8, 9, 28, .6); border-color: rgba(255, 255, 255, .16); }
.meta { position: relative; z-index: 1; }
.meta h3 { transition: color .25s; }
.card-main:hover .meta h3 { color: var(--c); }
.fav { position: absolute; z-index: 3; backdrop-filter: blur(6px); transition: transform .2s var(--spring), color .2s, border-color .2s; }
.fav:hover { transform: scale(1.12); }
.fav[aria-pressed="true"] { animation: favPop .45s var(--spring); background: rgba(255, 204, 51, .15); }
@keyframes favPop { 40% { transform: scale(1.35) rotate(-12deg); } }
.foot .b { font-weight: 600; }

/* ---------- play screen ---------- */
.playbar {
  margin: 0 -16px; padding: 12px 16px; border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, rgba(8, 9, 28, .85), rgba(8, 9, 28, .6));
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--stroke);
}
.ptitle .pico { animation: popIn .5s var(--spring); background: rgba(255, 255, 255, .06); border-color: var(--c); box-shadow: 0 0 22px -6px var(--c); }
@keyframes popIn { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
.pill { background: var(--glass); border-color: var(--stroke); }
.pill.best { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.stage {
  border: 1.5px solid transparent; margin-top: 10px;
  background:
    linear-gradient(180deg, rgba(26, 29, 66, .92), rgba(12, 13, 34, .96)) padding-box,
    conic-gradient(from var(--ang, 0deg), var(--c), transparent 22%, transparent 48%, #b48cff 60%, transparent 78%, var(--c)) border-box;
  animation: spinAng 7s linear infinite;
  box-shadow: 0 40px 100px -60px var(--c), var(--shadow-lg);
}
.cv { box-shadow: 0 20px 50px -25px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04); }
.help { opacity: .85; }
.timebar { height: 10px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.timebar i { background: linear-gradient(90deg, var(--c), #fff); box-shadow: 0 0 14px var(--c); }

/* game-over / start panels */
.overlay { background: radial-gradient(circle at 50% 40%, rgba(20, 16, 60, .55), rgba(5, 6, 18, .85)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .3s ease; }
.ov {
  border: 1.5px solid transparent; border-radius: 24px; padding: 30px 28px;
  background: linear-gradient(160deg, rgba(40, 45, 100, .95), rgba(20, 22, 54, .97)) padding-box, conic-gradient(from var(--ang, 0deg), var(--c), transparent 30%, #fff3 50%, transparent 70%, var(--c)) border-box;
  animation: pop .5s var(--spring), spinAng 6s linear infinite; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 60px -20px var(--c);
}
.ov .oi { font-size: 3rem; animation: bob 2.4s ease-in-out infinite; display: inline-block; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-6deg); } }
@keyframes fadeIn { from { opacity: 0; } }
.xpgain { box-shadow: 0 0 20px rgba(255, 204, 51, .6); }

/* ---------- dialogs ---------- */
.modal { background: radial-gradient(circle at 50% 30%, rgba(30, 20, 80, .5), rgba(3, 4, 14, .82)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fadeIn .25s ease; }
.dialog {
  border: 1.5px solid transparent; border-radius: 24px;
  background: linear-gradient(160deg, rgba(40, 45, 100, .97), rgba(18, 20, 50, .98)) padding-box, linear-gradient(140deg, rgba(180, 140, 255, .6), rgba(57, 208, 255, .25) 40%, rgba(255, 77, 109, .45)) border-box;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .95), 0 0 80px -30px rgba(180, 140, 255, .5);
  animation: dialogIn .45s var(--spring);
}
@keyframes dialogIn { from { transform: translateY(24px) scale(.94); opacity: 0; } }
.closex { transition: transform .3s var(--spring), background .2s; }
.closex:hover { transform: rotate(90deg); background: var(--glass-hi); }
.field input { background: rgba(8, 9, 28, .6); border-color: var(--stroke); transition: border-color .2s, box-shadow .2s; }
.field input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(180, 140, 255, .18); }
.tabs { background: rgba(8, 9, 28, .6); }
.tabs button { transition: background .25s, color .25s; }
.tabs button[aria-selected="true"] { background: linear-gradient(135deg, #2e3378, #232766); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .8); }
.picker button { transition: transform .2s var(--spring), border-color .2s; }
.picker button:hover { transform: scale(1.12); }

/* leaderboards, badges, hall */
.lb li { transition: transform .2s var(--ease), background .2s; animation: riseIn .4s var(--ease) both; }
.lb li:nth-child(2) { animation-delay: .04s; } .lb li:nth-child(3) { animation-delay: .08s; } .lb li:nth-child(4) { animation-delay: .12s; } .lb li:nth-child(5) { animation-delay: .16s; } .lb li:nth-child(n+6) { animation-delay: .2s; }
.lb li:hover { transform: translateX(4px); background: #1c2050; }
.lb li:nth-child(1) .rank { text-shadow: 0 0 12px rgba(255, 204, 51, .9); }
.badge { transition: transform .25s var(--spring); }
.badge:hover { transform: translateY(-4px) scale(1.04); }
.badge.got .bi { box-shadow: 0 0 18px rgba(255, 204, 51, .55); animation: glint 3s ease-in-out infinite; }
@keyframes glint { 50% { box-shadow: 0 0 28px rgba(255, 204, 51, .9); } }
.panel { background: linear-gradient(160deg, rgba(36, 40, 92, .85), rgba(18, 20, 48, .9)); border-color: var(--stroke); box-shadow: var(--shadow-lg); }
.champ { background: linear-gradient(160deg, rgba(36, 40, 92, .85), rgba(18, 20, 48, .9)); border-color: var(--stroke); transition: transform .25s var(--spring), border-color .25s, box-shadow .25s; animation: riseIn .5s var(--ease) both; }
.champ:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 16px 30px -20px var(--c); }
.champ.mine { animation: riseIn .5s var(--ease) both, glintY 2.6s ease-in-out infinite; }
@keyframes glintY { 50% { box-shadow: 0 0 0 1px var(--yellow), 0 0 26px rgba(255, 204, 51, .45); } }

/* toast */
.toast {
  background: linear-gradient(135deg, #ffe07a, #ffb347); color: #1a1100; border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 16px 40px -10px rgba(255, 180, 60, .7), 0 0 0 4px rgba(255, 204, 51, .15);
  transition: transform .45s var(--spring), opacity .3s; opacity: 0;
}
.toast.show { opacity: 1; }

/* misc polish */
.status { transition: color .2s; }
.cbanner { backdrop-filter: blur(4px); }
.glist li { transition: transform .2s var(--ease), background .2s; }
.glist li:hover { transform: translateX(3px); background: #1b1f4c; }
.tile, .pad, .lgrid button, .slide button, .numg button, .gs-grid button, .kn button, .hole, .c4 button, .ttt button, .echo button { transition: transform .15s var(--spring), background .2s, box-shadow .2s, opacity .1s; }
.tile:not(.done):hover, .slide button:not(.blank):hover, .numg button:hover, .gs-grid button:hover, .kn button:hover, .ttt button:hover { transform: translateY(-2px) scale(1.03); }
.footer { padding: 24px 0 8px; border-top: 1px solid var(--stroke); margin-top: 48px; }

/* =========================================================================
   v11: real screenshots on every card, app-store rows, picture banners
   ========================================================================= */

/* ---- picture cards ---- */
.thumb.has-img { height: 150px; background: #0d0f2a; animation: none; }
.thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.32); transition: transform .6s var(--ease), filter .4s; filter: saturate(1.1) brightness(.92); }
.card-main:hover .thumb > img { transform: scale(1.42); filter: saturate(1.25) brightness(1.05); }
.thumb.has-img::before { display: none; }
.thumb.has-img::after { height: 55%; background: linear-gradient(transparent, rgba(14, 16, 42, .96)); z-index: 1; }
.thumb.has-img .ico {
  position: absolute; left: 12px; bottom: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.25rem; background: rgba(8, 9, 28, .72); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 0 12px var(--c); filter: none;
}
.card-main:hover .thumb.has-img .ico { transform: translateY(-2px) scale(1.06); }
.playbadge {
  position: absolute; z-index: 2; right: 12px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #0b0c1a; font-size: .95rem; padding-left: 3px; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(8px) scale(.8); transition: opacity .3s, transform .35s var(--spring);
}
.card-main:hover .playbadge, .card-main:focus-visible .playbadge { opacity: 1; transform: none; }
.thumb:not(.has-img) .playbadge { display: none; }
.thumb .tag { z-index: 2; }
.thumb .tag.new { background: linear-gradient(135deg, #ffe07a, #ffb347); color: #1a1100; border-color: transparent; font-weight: 800; box-shadow: 0 4px 14px -4px rgba(255, 180, 60, .8); }
.card-main { border-radius: 18px; }
.meta { padding: 12px 14px 14px; gap: 4px; }
.meta h3 { font-size: 1.05rem; }
.meta p { font-size: .82rem; -webkit-line-clamp: 2; }

/* ---- category rows (scroll sideways) ---- */
.shelves { display: grid; gap: 30px; }
.shelf { min-width: 0; animation: riseIn .6s var(--ease) both; }
.shelf-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.shelf-head h3 { margin: 0; font-family: var(--display); font-size: 1.35rem; letter-spacing: .02em; }
.shelf-head span { color: var(--dim); font-family: var(--mono); font-size: .78rem; }
.see-all { margin-left: auto; background: none; border: 0; color: var(--cyan); font-weight: 700; font-size: .9rem; padding: 6px 4px; border-radius: 8px; transition: transform .2s var(--spring), color .2s; }
.see-all:hover { color: #fff; transform: translateX(3px); }
.shelf-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 250px); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 6px 4px 18px; margin: -6px -4px 0;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.shelf-row .card { scroll-snap-align: start; animation-delay: 0s; }
.shelf-row::-webkit-scrollbar { height: 8px; }

/* ---- picture banner (hero) ---- */
.hero-art.has-img { min-height: 300px; background: #0d0f2a; }
.hero-art .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .95; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.12) translate(-2%, 1%); } }
.hero-art.has-img::before, .hero-art.has-img::after, .hero-art.has-img .ring { display: none; }
.hero-art.has-img .big {
  position: absolute; right: 22px; bottom: 18px; font-size: 2.2rem; width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center;
  background: rgba(8, 9, 28, .7); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-shadow: 0 0 16px var(--hc); animation: none;
}
.d-art.has-img { min-height: 170px; }
.d-art .d-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-art.has-img::before { display: none; }
.d-art.has-img::after { content: ""; inset: 0; width: auto; aspect-ratio: auto; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent 55%, rgba(18, 20, 48, .95)); animation: none; }
.d-art.has-img span { position: absolute; left: 12px; bottom: 12px; font-size: 1.4rem; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(8, 9, 28, .7); border: 1px solid rgba(255, 255, 255, .16); animation: none; text-shadow: 0 0 12px var(--c); }
.daily { grid-template-columns: 210px minmax(0, 1fr); }
@media (max-width: 720px) { .daily { grid-template-columns: 1fr; } .d-art.has-img { min-height: 150px; } .d-art.has-img::after { background: linear-gradient(transparent 50%, rgba(18, 20, 48, .95)); } }

/* ---- a cleaner, more modern feel overall ---- */
.hero-copy { padding: clamp(24px, 4vw, 44px); }
.hero h1 { letter-spacing: -.01em; }
.section-head { margin-top: 6px; }
.chips { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 74px); z-index: 20; padding: 10px 2px; margin: 0 -4px 14px; background: linear-gradient(180deg, rgba(6, 7, 26, .9), rgba(6, 7, 26, .6)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; }
@media (max-width: 720px) { .chips { top: calc(env(safe-area-inset-top, 0px) + 128px); } .shelf-row { grid-auto-columns: 72%; } }

/* ---- photo mode (?shot): just the game, filling the window ---- */
html.shot body { padding: 0; overflow: hidden; }
html.shot .playbar, html.shot .help, html.shot #fx-spot, html.shot #fx-bg, html.shot .toast, html.shot #fx-intro, html.shot #fx-bye, html.shot .sky { display: none !important; }
html.shot .stage { position: fixed; inset: 0; margin: 0; border: 0; border-radius: 0; padding: 16px; display: grid; place-items: center; animation: none; box-shadow: none; background: radial-gradient(circle at 50% 35%, #232766, #0a0b1e 75%); }
html.shot #area { width: 100%; min-height: 0; }
html.shot .cv { max-height: calc(100vh - 32px); }
html.shot #play:not([hidden]) { animation: none; }
html.shot .overlay { display: none; }

html.still *, html.still *::before, html.still *::after { animation-delay: -10s !important; animation-play-state: paused !important; transition: none !important; }

/* --------- reduce motion: keep it calm --------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card-main { transform: none !important; }
  #fx-intro, #fx-bye, #fx-bg { display: none !important; }
}