/* ===== Motion round (Oct 13-14 overnight): one arcade, scroll coin, type-in headings, smooth card slides =====
   Loaded last. Everything here is transform/opacity/clip only, ease-out 300-600ms, and off with reduced motion or Motion: OFF. */
:root{--ka-ease:cubic-bezier(.22,.9,.3,1);--ease-out:cubic-bezier(.16,1,.3,1);--dur-in:.6s;--dur-hover:.2s}
/* 1) the one arcade: static machine, the coin waits above the slot, then drops in once when you first see it */
.arc-wrap .arc-coin{animation:none!important;transform:translateY(0);opacity:1}
.arc-wrap .arc-1up{animation:none!important;opacity:1;transition:opacity .45s ease}
.arc-wrap .arc-pop{animation:none!important;opacity:0;transform:translate(-50%,6px);transition:opacity .5s var(--ka-ease),transform .5s var(--ka-ease)}
@media (prefers-reduced-motion:no-preference){
 html:not(.calm) .arc-wrap.go .arc-coin{animation:kaCoinIn 1.1s cubic-bezier(.5,0,.75,.4) both!important}
 html:not(.calm) .arc-wrap.in .arc-1up{opacity:0}
 html:not(.calm) .arc-wrap.in .arc-pop{opacity:1;transform:translate(-50%,0)}
 html:not(.calm) .arc-wrap.in .arc-cab{animation:kaCabGlow .6s ease-out}
}
@keyframes kaCoinIn{0%{transform:translateY(0) scaleX(1);opacity:1}25%{transform:translateY(22px) scaleX(.35)}50%{transform:translateY(58px) scaleX(1)}75%{transform:translateY(94px) scaleX(.35)}92%{transform:translateY(116px) scaleX(.8);opacity:1}100%{transform:translateY(124px) scaleX(.6);opacity:0}}
@keyframes kaCabGlow{0%{filter:drop-shadow(0 0 10px rgba(34,230,255,.45))}40%{filter:drop-shadow(0 0 18px rgba(255,210,63,.75))}100%{filter:drop-shadow(0 0 10px rgba(34,230,255,.45))}}
html.calm .arc-wrap .arc-coin{opacity:0}
@media (prefers-reduced-motion:reduce){.arc-wrap .arc-coin{opacity:0}}
/* 2) scroll coin: a little pixel coin spins and rolls along a thin rail at the top as you scroll (shows only once you scroll) */
.ka-rail{position:fixed;left:0;right:0;top:0;height:26px;z-index:250;pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity .4s ease,transform .4s var(--ka-ease)}
.ka-rail.show{opacity:1;transform:none}
.ka-rail .kr-track{position:absolute;left:0;right:0;top:0;height:6px;background:rgba(11,16,48,.85);border-bottom:2px solid rgba(34,230,255,.45)}
.ka-rail .kr-fill{position:absolute;left:0;top:0;height:6px;width:calc(var(--p,0) * (100% - 24px) + 12px);background:repeating-linear-gradient(90deg,#ffd23f 0 10px,rgba(255,210,63,.35) 10px 14px)}
.ka-rail .kr-coin{position:absolute;left:0;top:2px;width:24px;height:24px;line-height:0;will-change:transform}
.ka-rail .kr-coin svg{display:block;filter:drop-shadow(0 0 5px rgba(255,210,63,.7)) drop-shadow(0 2px 0 rgba(0,0,0,.5))}
html.calm .ka-rail,html.hc .ka-rail{display:none}
@media (prefers-reduced-motion:reduce){.ka-rail{display:none}}
@media print{.ka-rail{display:none!important}}
/* 3) headings type in (letter by letter, with a cyan cursor); cards slide in one after another */
.ka-type{position:relative}
.ka-type .ka-tcaret{position:absolute;top:4%;height:92%;width:clamp(6px,.9vw,12px);background:#22e6ff;box-shadow:0 0 10px rgba(34,230,255,.7);opacity:0;transition:opacity .35s ease;pointer-events:none}
.ka-type.typing .ka-tcaret{opacity:.9}
@media (prefers-reduced-motion:no-preference){
 .v5-up{transform:translate3d(0,28px,0) scale(.98);opacity:0;transition:opacity .55s var(--ka-ease),transform .55s var(--ka-ease)!important;transition-delay:calc(var(--i,0)*90ms)!important}
 .v5-up.in{transform:none;opacity:1}
 /* page-to-page fade: a touch slower so it never snaps */
 ::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:ease-out}
 /* soften the old stepped (jerky) loops */
 .photo-frame .sprite{animation-timing-function:ease-in-out!important}
 .prop.fly .sp{animation-timing-function:ease-in-out!important}
 .page-head::after{animation-duration:.9s!important;animation-timing-function:var(--ka-ease)!important}
}
html.calm .v5-up{opacity:1!important}
/* readability: small pixel labels (section labels, price chips, sign-in tags) never drop below 13px */
main .label,main .label a,.tierchip,.ps-tag{font-size:max(13px,.8125rem)!important;line-height:1.7}

/* ===== Round 2 (Oct 13-14 overnight): "Keep playing" row on every game page (internal links + next step) ===== */
.more-games{padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.5rem,6vw,4rem);border-top:2px dashed rgba(34,230,255,.25);margin-top:clamp(1.5rem,4vw,2.5rem)}
.more-games h2{font-family:"Press Start 2P",monospace;color:#f8b800;font-size:clamp(18px,2.2vw,26px);line-height:1.4;text-align:center;margin:0 0 1.5rem;text-shadow:3px 3px 0 #0b1030}
.more-games .mg-grid{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-width:1080px}
.more-games .mg-card{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:132px;padding:16px 10px;text-align:center;text-decoration:none;color:#fff;
  background:linear-gradient(180deg,#0c2370,#06164a);border:2px solid rgba(60,188,252,.55);border-radius:6px;box-shadow:4px 4px 0 #000a24;
  transition:transform var(--dur-hover) var(--ka-ease),box-shadow var(--dur-hover) var(--ka-ease),border-color var(--dur-hover) ease}
.more-games .mg-card svg{width:40px;height:40px;filter:drop-shadow(0 0 6px rgba(34,230,255,.45))}
.more-games .mg-name{font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-weight:700;font-size:1.1rem;line-height:1.25}
.more-games .mg-diff{font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-size:1.05rem;color:#9fdcff}
.more-games .mg-card:hover,.more-games .mg-card:focus-visible{transform:translate3d(-2px,-3px,0);border-color:#f8b800;box-shadow:6px 7px 0 #000a24,0 0 16px rgba(248,184,0,.35)}
.more-games .mg-card:active{transform:translate3d(2px,2px,0);box-shadow:1px 1px 0 #000a24;transition-duration:.1s}
.more-games .mg-card:focus-visible{outline:3px solid #f8b800;outline-offset:3px}
.more-games .mg-next{text-align:center;font-size:1.15rem;line-height:1.6;margin:1.75rem auto 0;max-width:46rem;color:#e8f1ff}
.more-games .mg-next a{color:#3cbcfc;font-weight:700;text-underline-offset:3px}
@media (max-width:900px){.more-games .mg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.more-games .mg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.more-games .mg-card{min-height:116px}}
html.hc .more-games .mg-card{background:#000;border-color:#fff;box-shadow:none}
@media (prefers-reduced-motion:reduce){.more-games .mg-card{transition:none}.more-games .mg-card:hover{transform:none}}
html.calm .more-games .mg-card:hover{transform:none}
@media print{.more-games{display:none}}

/* ===== Round 2: one readable button style everywhere (seniors). Same gold-on-navy arcade look,
   but labels use Atkinson Hyperlegible bold at 18px+ instead of 14px pixel letters. Headings stay pixel.
   Low specificity on purpose so the bigger home/footer CTA sizes still win. ===== */
html .btn,html .btn .ka-gt{font-family:"Atkinson Hyperlegible",system-ui,sans-serif!important;font-weight:700!important;letter-spacing:.01em!important}
html .btn{font-size:max(1.15rem,18px)!important;line-height:1.25!important;min-height:52px}
html .btn .ka-gt{font-size:inherit!important;line-height:inherit!important}
/* button labels: solid gold, no pink glow, so 18px letters stay crisp (gold-filled CTA buttons keep navy text via their own, stronger rules) */
:where(.btn:not([aria-pressed="true"])) .ka-gt{background:none!important;-webkit-text-fill-color:#ffd23f!important;color:#ffd23f!important;filter:none!important;text-shadow:none!important}
html.hc :where(.btn:not([aria-pressed="true"])) .ka-gt{-webkit-text-fill-color:#ffe14d!important;color:#ffe14d!important}
html .btn small{font-family:"Atkinson Hyperlegible",system-ui,sans-serif!important;font-size:max(.85em,16px)!important;font-weight:700}
.cabinets{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.page-head .diff{margin-bottom:.6rem}.more-games .mg-diff.diff{font-size:12.8px;color:#0b1030;align-self:center}