/* FOSSIL32 · 3D cartridge boxes on the site (tiles, the Games page carousel, and the dark focus stage). Paired with fossil32.js.
   Title fonts available to games.js box.font: Bungee, Luckiest Guy, Press Start 2P, Titan One, Bowlby One, Righteous. */

/* ── tiles ─────────────────────────────────────────────── */
.f32-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.f32-grid>*{min-width:0}
.f32-tile{cursor:pointer}
.f32-stage{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(ellipse 62% 54% at 50% 52%,color-mix(in srgb,var(--f32-c,#9BE338) 30%,transparent),transparent 72%)}
.f32-stage .badge{position:absolute;left:10px;top:10px;z-index:3}
.f32-ribbon{position:absolute;right:10px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;font:800 11px/1 "Outfit",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 10px 6px 8px;border-radius:999px;background:color-mix(in srgb,var(--hc-c,var(--sel-a,#9be338)) 72%,#fff);color:#0b0d09;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.f32-ribbon .gi{width:14px;height:14px}
/* the flat cover shows until the 3D box is ready (and stays if there's no WebGL) */
.f32-flat{position:absolute;left:13%;top:16%;width:74%;height:58%;object-fit:cover;border-radius:3px;
  box-shadow:0 14px 26px rgba(0,0,0,.28),0 0 0 6px #0b0d09;transform:perspective(700px) rotateY(-16deg) rotateX(3deg);transition:opacity .35s}
.f32-on .f32-flat{opacity:0}
.f32-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
/* soft floor shadow under the floating box */
.f32-stage::after{content:"";position:absolute;left:24%;right:24%;bottom:7%;height:9%;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.30),rgba(0,0,0,0));transform:scale(calc(1.06 - var(--f32-bob,0) * .12));opacity:calc(.95 - var(--f32-bob,0) * .25)}
.f32-away .f32-cv,.f32-away .f32-stage::after{visibility:hidden}
.f32-wait{cursor:progress}
.f32-wait .f32-stage{animation:f32pulse .9s ease-in-out infinite alternate}
@keyframes f32pulse{to{filter:brightness(1.12)}}
.f32-tile .body .title{display:flex;align-items:center;gap:8px}
.f32-tile .f32-was{color:var(--mut);font-size:12.5px;font-weight:600}

/* ── the Games page carousel (Fossil32.rack) ─────────────── */
.f32-rackcv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .5s}
.f32-rack-on .f32-rackcv{opacity:1}

/* ── the focus stage: the page goes dark and soft, the box and cartridge stay sharp ── */
html.f32-lock{overscroll-behavior:none}
.f32-ov{position:fixed;inset:0;z-index:200;--f32-accent:#9BE338;--f32-ink:#f3f5ff;color:var(--f32-ink);
  font-family:"F32 Outfit","Outfit",system-ui,sans-serif}
.f32-ov[hidden]{display:none}
.f32-ov:focus{outline:none}
.f32-white{position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(14,24,80,.35) 0%,rgba(3,5,18,.72) 70%,rgba(2,3,12,.86) 100%);opacity:0;transition:opacity .6s ease}
/* the page behind drifts out of focus (fogbg.js holds the fog still meanwhile) */
#g-fog,html body>main,.g-top,.g-tabs{transition:filter .8s ease}
html.f32-lock #g-fog,html.f32-lock body>main,html.f32-lock .g-top,html.f32-lock .g-tabs{filter:blur(9px) brightness(.6) saturate(1.1)}
@media (prefers-reduced-motion:reduce){html.f32-lock #g-fog,html.f32-lock body>main,html.f32-lock .g-top,html.f32-lock .g-tabs{filter:brightness(.5)}}
/* a pool of the game's colour that follows the cartridge (fossil32.js moves --f32-fx / --f32-fy every frame) */
.f32-focus{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s ease .2s;
  background:radial-gradient(circle 30vmax at var(--f32-fx,50%) var(--f32-fy,50%),color-mix(in srgb,var(--f32-accent) 48%,transparent) 0%,color-mix(in srgb,var(--f32-accent) 18%,transparent) 34%,transparent 70%);mix-blend-mode:screen}
.f32-on .f32-focus{opacity:1}
.f32-on .f32-white{opacity:1}
.f32-ov:not(.f32-on){pointer-events:none}
.f32-gl{position:absolute;inset:0}
.f32-glcv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.f32-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6}
.f32-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:5;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(190,205,255,.22);background:rgba(8,12,34,.8);color:#fff;font:700 18px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:0;transition:opacity .3s .2s,transform .15s}
.f32-on .f32-close{opacity:1}
.f32-close:hover{transform:scale(1.06)}
.f32-skip{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;border:1px solid rgba(190,205,255,.22);background:rgba(8,12,34,.7);
  color:#e8ecff;font:800 12px/1 "F32 Mono",ui-monospace,monospace;letter-spacing:.14em;padding:10px 16px;border-radius:999px;cursor:pointer;opacity:0;transition:opacity .3s .6s}
.f32-on .f32-skip{opacity:.85}
.f32-skip[hidden],.f32-booting .f32-skip{display:none}
/* the big skip during the console boot: a thumb-sized pill at the bottom, hard to miss */
.f32-bootskip{position:absolute;left:50%;bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px));transform:translate(-50%,30px);z-index:7;display:none;flex-direction:column;align-items:center;gap:3px;min-width:min(340px,calc(100vw - 48px));min-height:72px;padding:12px 34px;border-radius:999px;border:2px solid rgba(255,255,255,.35);
  background:linear-gradient(135deg,var(--f32-accent,#9BE338),color-mix(in srgb,var(--f32-accent,#9BE338) 70%,#fff));color:#0b0e14;cursor:pointer;box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.12);opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.f32-bootskip-k{font:900 26px/1 var(--display,"Cal Sans","Outfit",system-ui,sans-serif);letter-spacing:.16em}
.f32-bootskip-s{font:700 12px/1 "F32 Mono",ui-monospace,monospace;letter-spacing:.12em;opacity:.8;text-transform:uppercase}
.f32-booting .f32-bootskip{display:flex;opacity:1;transform:translate(-50%,0)}
.f32-bootskip:hover{filter:brightness(1.08)}.f32-bootskip:active{transform:translate(-50%,0) scale(.97)}
@media (max-height:480px){.f32-bootskip{min-height:56px;padding:8px 24px}.f32-bootskip-k{font-size:20px}}
.f32-credit{position:absolute;left:14px;bottom:10px;z-index:4;font:500 10px/1.4 "F32 Mono",ui-monospace,monospace;color:#7f89b3;opacity:0;transition:opacity .4s}
.f32-credit a{color:inherit}
.f32-panel-on .f32-credit{opacity:.8}

/* game panel: right side on wide screens, bottom sheet on tall ones */
.f32-panel{position:absolute;z-index:4;right:max(32px,5vw);top:50%;width:min(470px,40vw);max-height:calc(100% - 120px);overflow:auto;
  transform:translate(40px,-50%);opacity:0;pointer-events:none;transition:opacity .55s,transform .6s cubic-bezier(.2,.8,.2,1);padding:4px 6px 8px 4px}
.f32-panel-on .f32-panel{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.f32-eyebrow{font:700 12px/1.3 "F32 Mono",ui-monospace,monospace;letter-spacing:.18em;color:#8f9bcf}
/* title + text: the site's own header font, plain white (the retro lettering lives on the box art) */
.f32-title{margin:10px 0 4px;font-family:var(--display,"Cal Sans","Outfit",system-ui,sans-serif);font-weight:600;font-size:clamp(34px,3.8vw,54px);line-height:1.04;
  letter-spacing:.003em;color:#fff;text-wrap:balance}
.f32-sub{font-family:var(--display,"Cal Sans","Outfit",system-ui,sans-serif);font-weight:600;font-size:19px;line-height:1.25;color:color-mix(in srgb,var(--f32-accent) 55%,#fff);margin:0 0 14px}
.f32-chips{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 16px}
.f32-chips span{font:600 13px/1 "Outfit",system-ui,sans-serif;color:#e8ecff;border:1px solid rgba(190,205,255,.2);border-radius:999px;padding:7px 11px;background:rgba(190,205,255,.07)}
.f32-desc{font:500 16px/1.55 "Outfit",system-ui,sans-serif;color:rgba(236,240,255,.86);margin:0 0 16px}
.f32-h{font-family:var(--display,"Cal Sans","Outfit",system-ui,sans-serif);font-weight:600;font-size:18px;color:#fff;margin:4px 0 8px}
.f32-feats{list-style:disc;margin:0 0 16px;padding-left:20px;display:grid;gap:6px;color:#e8ecff}
.f32-feats li{font:500 15px/1.45 "Outfit",system-ui,sans-serif;color:rgba(236,240,255,.86)}
.f32-feats li::marker{color:var(--f32-accent)}
.f32-stats{font:600 14px/1.4 "Outfit",system-ui,sans-serif;color:#e8ecff;margin:0 0 12px}
.f32-actions{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-top:6px;padding-bottom:6px}
.f32-more{font:600 15px/1 "Outfit",system-ui,sans-serif;color:#e8ecff;text-decoration:underline;text-underline-offset:3px}
.f32-play{display:inline-flex;align-items:center;gap:12px;font-family:var(--display,"Cal Sans","Outfit",system-ui,sans-serif);font-weight:600;font-size:22px;line-height:1;letter-spacing:.04em;color:#0b0d09;background:var(--f32-accent);
  border:0;border-radius:12px;padding:16px 30px;cursor:pointer;box-shadow:0 7px 0 #0b0d09,0 10px 30px color-mix(in srgb,var(--f32-accent) 35%,transparent);transition:transform .1s,box-shadow .1s}
.f32-play:hover{filter:brightness(1.05)}
.f32-play:active{transform:translateY(4px);box-shadow:0 3px 0 #0b0d09}
.f32-play:focus-visible,.f32-close:focus-visible{outline:3px solid #fff;outline-offset:3px}
.f32-play svg{width:18px;height:18px}

@media (max-aspect-ratio:20/21){
  .f32-panel{left:16px;right:16px;width:auto;top:auto;bottom:0;max-height:56%;transform:translate(0,40px);padding:16px 16px calc(14px + env(safe-area-inset-bottom));
    background:rgba(8,12,34,.92);border:1px solid rgba(190,205,255,.14);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.4)}
  .f32-panel-on .f32-panel{transform:none}
  .f32-title{font-size:clamp(30px,8.5vw,42px)}
  .f32-desc{font-size:15px}
  .f32-actions{position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom));margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(rgba(8,12,34,0),rgb(8,12,34) 30%)}
  .f32-play{font-size:19px;padding:14px 24px}
  .f32-credit{display:none}
}
@media (prefers-reduced-motion:reduce){.f32-white,.f32-panel,.f32-focus{transition:none}}