/* The arcade on the homepage (js/pages/home-arcade.js): a full-page moment.
 *
 * The section is tall and its stage is sticky. As it scrolls in, the games'
 * gold star tiles bloom over the screen from the middle out, keeping clear of
 * the title; once it's pinned the four games are dealt out of the tiles one by
 * one; then the next section ("Get involved") slides up over it like the next
 * card in a stack while the arcade dims and settles back. Everything is
 * scroll-linked and moves only transform and opacity.
 *
 * Heights: the stage is one screen; --ar-a is the scroll it takes to bloom and
 * deal; the last screen is where the next card slides over (.involve-sheet
 * pulls itself up by one screen).
 */
.arcade { --ar-a: 110svh; position: relative; height: calc(100svh + var(--ar-a) + 100svh); background: #0b231f; }
.ar-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-content: center; justify-items: center; gap: clamp(18px, 3.2vh, 34px);
    padding: calc(var(--nav-h, 62px) + 2vh) 20px 5vh; isolation: isolate; transform-origin: 50% 0;
    background:
        radial-gradient(ellipse 80% 70% at 50% 45%, rgba(4, 16, 13, 0) 40%, rgba(4, 16, 13, .55) 100%),
        var(--veil-lattice-static) center / 100px 100px,
        radial-gradient(circle at 50% 42%, #1d4e42 0%, #12362f 45%, #0a211c 100%); }
.ar-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ar-stars i { position: absolute; background: var(--ar-star) center / contain no-repeat; transform: scale(0); will-change: transform; }

.ar-head { text-align: center; max-width: 34rem; will-change: transform, opacity; }
.ar-head .eyebrow { color: #e3a340; }
.ar-head .eyebrow::before { display: none; }
.ar-head h2 { margin: .35rem 0 .45rem; font: 800 clamp(34px, 4.6vw, 64px)/1.02 var(--font-display); letter-spacing: -.035em; color: #fbf3e2; text-wrap: balance; }
.ar-head p { margin: 0; color: rgba(251, 243, 226, .78); font-size: 1.02rem; }

.ar-deck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); width: min(1080px, 94vw); }
.ar-card { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fffaf1; color: #12362f; text-decoration: none;
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7), 0 0 0 1px rgba(243, 200, 119, .35); opacity: 0; will-change: transform, opacity; transition: box-shadow .25s; }
.ar-card:hover { color: #12362f; text-decoration: none; box-shadow: 0 36px 70px -26px rgba(0, 0, 0, .75), 0 0 0 2px #e3a340; }
.ar-card:focus-visible { outline: 3px solid #e3a340; outline-offset: 3px; opacity: 1 !important; transform: none !important; }
.ar-card img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 640; object-fit: cover; object-position: 50% 10%; background: #12362f; }
.ar-body { display: grid; gap: 3px; padding: 12px 14px 14px; }
.ar-body b { font: 700 17px/1.15 var(--font-display); letter-spacing: -.01em; }
.ar-body small { font-size: 12.5px; line-height: 1.35; color: #5b6964; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-play { justify-self: start; margin-top: 6px; display: inline-flex; align-items: center; gap: 3px; font: 700 13px var(--font-display); color: #081c18; background: #e3a340; padding: 5px 12px 5px 9px; border-radius: 999px; }
.ar-play i { font-size: 16px; }
.ar-all { font: 600 15px var(--font-display); color: #f6c46e; text-decoration: none; border-bottom: 2px solid rgba(246, 196, 110, .6); padding-bottom: 2px; will-change: opacity; }
.ar-all:hover { color: #fbeed6; }
.ar-dim { position: absolute; inset: 0; z-index: 5; background: #04100d; opacity: 0; pointer-events: none; }

/* The next card slides up over the arcade. */
.arcade + .involve-sheet { position: relative; z-index: 2; margin-top: -100svh; background: var(--paper, #faf6ee); border-radius: 30px 30px 0 0;
    box-shadow: 0 -30px 60px -34px rgba(0, 0, 0, .55); padding-top: 3.2rem; }

/* Phones: two by two, shorter pictures, room for the tab bar. */
@media (max-width: 991.98px) {
    .ar-stage { padding: calc(var(--nav-h, 56px) + 10px) 14px calc(64px + env(safe-area-inset-bottom) + 12px); gap: 14px; }
    body:not(.has-tabbar) .ar-stage { padding-bottom: 18px; }
    .ar-head h2 { font-size: clamp(28px, 8vw, 36px); }
    .ar-head p { font-size: .92rem; }
    .ar-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(560px, 100%); }
    .ar-card { border-radius: 18px; }
    .ar-card img { aspect-ratio: 4 / 3; }
    .ar-body { padding: 9px 11px 11px; gap: 2px; }
    .ar-body b { font-size: 14.5px; }
    .ar-body small { font-size: 11px; -webkit-line-clamp: 2; }
    .ar-play { font-size: 12px; padding: 4px 10px 4px 7px; margin-top: 4px; }
    .arcade + .involve-sheet { border-radius: 24px 24px 0 0; padding-top: 2rem; }
}
@media (max-width: 991.98px) and (max-height: 700px) {
    .ar-head p { display: none; }
    .ar-body small { display: none; }
}

/* Reduced motion (and no JS yet): a plain section, everything visible. */
.ar-static.arcade { height: auto; }
.ar-static .ar-stage { position: relative; height: auto; padding-top: 4rem; padding-bottom: 4rem; }
.ar-static .ar-card { opacity: 1; }
.ar-static + .involve-sheet { margin-top: 0; }