/* Moving between screens: a quicker slide-up, then the screen's blocks pop in one after another.
   Full-attention screens (quiz, exam, jobs, games) only get the quick slide, so nothing moves under your thumb. */
section.enter{animation:pgIn .24s cubic-bezier(.2,.9,.3,1) both}
@keyframes pgIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
section.enter:not(#home):not(#play):not(#exam):not(#job):not(#host):not(#player):not(#leak):not(#arena):not(#model):not(#gaps) > :not(.back):not(.hidden):not(script),
section#home.enter #cHome > *{animation:pgItem .42s cubic-bezier(.2,1.25,.4,1) both}
@keyframes pgItem{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
section.enter > :nth-child(2),section#home.enter #cHome > :nth-child(2){animation-delay:.04s}
section.enter > :nth-child(3),section#home.enter #cHome > :nth-child(3){animation-delay:.08s}
section.enter > :nth-child(4),section#home.enter #cHome > :nth-child(4){animation-delay:.12s}
section.enter > :nth-child(5),section#home.enter #cHome > :nth-child(5){animation-delay:.16s}
section.enter > :nth-child(6),section#home.enter #cHome > :nth-child(6){animation-delay:.2s}
section.enter > :nth-child(n+7),section#home.enter #cHome > :nth-child(n+7){animation-delay:.24s}
html.rm section.enter,html.rm section.enter > *,html.rm #cHome > *{animation:none!important}

/* Earn: the topic picker that opens over a game (earnpick.js) */
.tps{position:fixed;inset:0;z-index:150;display:flex;align-items:flex-end;justify-content:center;background:rgba(4,8,22,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:bpdFade .2s ease both}
.tps.out{animation:bpdFade .2s ease reverse both}
.tps-card{width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;border-radius:26px 26px 0 0;overflow:hidden;background:linear-gradient(175deg,#1A3576,#0E1D48 60%,#0A1433);box-shadow:inset 0 0 0 2px rgba(150,200,255,.2),0 -16px 40px rgba(0,0,0,.55);animation:tpsUp .34s cubic-bezier(.2,1.1,.3,1) both;padding-bottom:env(safe-area-inset-bottom,0px)}
@keyframes tpsUp{from{transform:translateY(100%)}to{transform:none}}
.tps-hero{position:relative;flex:none;height:132px;background-size:cover;background-position:center 40%}
.tps-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,51,0) 30%,rgba(14,29,72,.96))}
.tps-hero-tx{position:absolute;left:18px;bottom:10px;z-index:1}
.tps-hero-tx small{display:block;font:800 12px/1 Barlow,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#FFD964}
.tps-hero-tx h2{margin:4px 0 0;font:400 34px/1 var(--shout,'Barlow Condensed'),sans-serif;letter-spacing:.03em;text-transform:uppercase;color:#fff;-webkit-text-stroke:5px #0A1433;paint-order:stroke fill;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
.tps-x{position:absolute;right:12px;top:12px;z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:rgba(10,15,31,.75);color:#fff;font:800 18px/1 system-ui;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.tps-body{overflow-y:auto;padding:10px 16px 20px;overscroll-behavior:contain}
.tps-body h3{margin:4px 0 2px;font:800 22px/1 'Barlow Condensed',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.tps-sub{margin:0 0 12px;font:600 14px/1.35 Barlow,system-ui,sans-serif;color:#B9CCF2}
.tps-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tps-t{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:6px 6px 10px;border:0;border-radius:16px;text-align:left;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--uc) 55%,#14234F),color-mix(in srgb,var(--uc) 22%,#0E1A3E));box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),0 4px 0 rgba(0,0,0,.35);transition:transform .1s;animation:pgItem .4s cubic-bezier(.2,1.25,.4,1) both}
.tps-t:nth-child(2){animation-delay:.03s}.tps-t:nth-child(3){animation-delay:.06s}.tps-t:nth-child(4){animation-delay:.09s}.tps-t:nth-child(5){animation-delay:.12s}.tps-t:nth-child(n+6){animation-delay:.15s}
.tps-t:active{transform:translateY(3px) scale(.98)}
.tps-ti{width:100%;aspect-ratio:3/2;border-radius:11px;overflow:hidden;background:rgba(0,0,0,.22);display:grid;place-items:center}
.tps-ti img{width:100%;height:100%;object-fit:cover}
.tps-ti img.all{width:72%;height:auto;object-fit:contain}
.tps-t b{font:800 16px/1.05 'Barlow Condensed',sans-serif;letter-spacing:.03em;text-transform:uppercase;padding:2px 4px 0}
.tps-t small{font:600 11.5px/1.2 Barlow,system-ui,sans-serif;color:rgba(255,255,255,.82);padding:0 4px}
.tps-t.on{box-shadow:inset 0 0 0 3px #FFD964,0 0 16px rgba(255,217,100,.4),0 4px 0 rgba(0,0,0,.35)}
.tps-last{position:absolute;right:10px;top:10px;font:800 10.5px/1 'Barlow Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:#2B1D00;background:linear-gradient(#FFE066,#F0A000);padding:4px 7px;border-radius:99px}
html.rm .tps-card,html.rm .tps-t{animation:none!important}