/* =====================================================================
   AKU FUN ZONE — activities.html page styles
   Built on the Dream Console system (tokens.css + styles.css loaded
   first). Same gutters/gaps as the homepage grids.
   Layout: split hero → sticky Mission Index (left rail on desktop,
   horizontal chip rail on mobile) + collapsed sheet "stacks".
   ===================================================================== */

/* ---- hero (dark · starfield · split copy/photo) ------------------- */
.fzhero{ background:#030712; color:#fff; overflow:hidden;
  padding-block:clamp(52px,8vh,104px); }
.fzhero__grid{ position:relative; z-index:1; width:min(var(--wrap),100% - var(--gut)*2);
  margin-inline:auto; display:grid; align-items:center;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(30px,4.5vw,68px); }
.fzhero__copy{ display:flex; flex-direction:column; align-items:flex-start; }
.fzhero__hud{ width:min(340px,100%); color:var(--blue-glow); margin-bottom:clamp(20px,3.4vh,36px); }
.fzhero__hud::after{ background:rgba(255,255,255,.18); }
.fzhero__eyebrow{ color:var(--blue-glow); }
.fzhero__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:#fff;
  font-size:clamp(2.9rem,5.8vw,5.2rem); line-height:.92; letter-spacing:-.02em; margin:12px 0 0;
  text-shadow:0 0 60px rgba(63,180,255,.28); }
.fzhero__sub{ margin:18px 0 28px; color:rgba(255,255,255,.74); max-width:46ch;
  font-size:clamp(1rem,1.25vw,1.14rem); line-height:1.6; }
.fzhero__sub em{ font-style:italic; }
.fzhero__ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.fzhero__meta{ margin:24px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.5); }
.fzhero__meta b{ font-weight:400; color:var(--blue-glow); }

.fzhero__media{ margin:0; position:relative; border:1px solid rgba(255,255,255,.16);
  background:#0A1326; box-shadow:0 40px 80px -40px rgba(0,0,0,.8); }
.fzhero__media img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.fzhero__tag{ position:absolute; left:20px; bottom:20px; z-index:4; display:inline-flex;
  align-items:center; gap:8px; padding:7px 11px 6px; border:1px solid rgba(63,180,255,.5);
  background:rgba(3,7,18,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-glow); }
.fzhero__tag .dot{ width:6px; height:6px; border-radius:50%; background:#12B886;
  box-shadow:0 0 7px #12B886; flex:0 0 auto; }

/* ---- body: sticky Mission Index + content column ------------------- */
.fzbody{ background:var(--paper); display:grid; align-items:start;
  grid-template-columns:250px minmax(0,1fr); gap:clamp(8px,0.9vw,14px);
  padding-inline:clamp(8px,0.9vw,14px); }

/* desktop: vertical sticky rail */
.fzside{ position:sticky; top:78px; display:flex; flex-direction:column; gap:4px;
  padding-block:clamp(44px,6vh,72px) 20px; }
.fzside__label{ margin:0 0 14px 2px; }
.fzside__item{ display:flex; align-items:center; gap:12px; padding:8px 10px;
  text-decoration:none; border:1px solid transparent; border-left:2px solid transparent;
  transition:background var(--dur-fast), border-color var(--dur-fast); }
.fzside__item img{ width:34px; height:44px; object-fit:cover; object-position:top;
  border:1px solid var(--line); background:#fff; flex:0 0 auto; }
.fzside__name{ font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:.76rem; letter-spacing:.02em; line-height:1.1; color:var(--ink-2);
  transition:color var(--dur-fast); }
.fzside__count{ font-style:normal; margin-left:auto; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; color:var(--ink-3); transition:color var(--dur-fast); }
.fzside__item:hover{ background:#fff; border-color:var(--line); border-left-color:var(--line-2); }
.fzside__item.is-active{ background:#fff; border-color:var(--line); border-left:2px solid var(--blue); }
.fzside__item.is-active .fzside__name,
.fzside__item.is-active .fzside__count{ color:var(--blue); }

/* small answers link pinned under the Mission Index */
.fzside__answers{ margin-top:12px; padding:10px 10px 0; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none; transition:color var(--dur-fast); }
.fzside__answers:hover{ color:var(--blue); }

/* ---- category sections -------------------------------------------- */
.fzcat{ padding-block:clamp(40px,6vh,72px); border-top:1px solid var(--line);
  scroll-margin-top:84px; }
.fzmain > .fzcat:first-of-type{ border-top:0; }
.fzcat__head{ margin-bottom:clamp(20px,3vh,32px); }
.fzcat__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--ink);
  font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1; letter-spacing:-.02em; margin:12px 0 0; }
.fzcat__intro{ margin:12px 0 0; color:var(--ink-2); max-width:62ch;
  font-size:clamp(.98rem,1.15vw,1.1rem); line-height:1.6; }

/* same gutter/gap rhythm as the homepage grids */
.fzcat__grid{ display:grid; gap:clamp(8px,0.9vw,14px);
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

/* collapsed state (added by JS — no-JS shows everything):
   desktop keeps 7 sheets + the stack card; mobile keeps 3 + stack.
   nth-of-type counts <a> only, so the <button> stack card stays. */
.fzcat__grid.is-collapsed > a.acard:nth-of-type(n+8){ display:none; }

/* ---- activity card -------------------------------------------------
   White sheet-card: US-Letter thumb, name, mono download cue. The
   whole card is the download link. */
.acard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  padding:clamp(10px,1vw,14px); text-decoration:none; position:relative; isolation:isolate;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out); }
.acard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--line-2); }
.acard__thumb{ display:block; aspect-ratio:425/550; overflow:hidden; background:#fff;
  border:1px solid var(--line); }
.acard__thumb img{ width:100%; height:100%; object-fit:cover; object-position:top;
  transition:transform .45s var(--ease-out); }
.acard:hover .acard__thumb img{ transform:scale(1.03); }
.acard__name{ font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(.82rem,.95vw,.95rem); letter-spacing:.01em; color:var(--ink);
  line-height:1.15; margin-top:11px; }
.acard__sub{ font-family:var(--body); font-size:.8rem; color:var(--ink-3); margin-top:3px; }
.acard__dl{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin-top:9px; opacity:.75; transition:opacity var(--dur-fast); }
.acard:hover .acard__dl{ opacity:1; }

/* ---- "the rest of the pile" stack card (injected by JS) ------------ */
.acard--stack{ appearance:none; -webkit-appearance:none; cursor:pointer; font-family:inherit;
  text-align:left; background:var(--paper-2); }
.acard--stack .acard__thumb{ background:transparent; border-style:dashed; border-color:var(--line-2);
  position:relative; overflow:hidden; }
.stack__fan{ position:absolute; inset:0; display:block; }
.stack__fan img{ position:absolute; top:9%; left:50%; width:68%; aspect-ratio:425/550;
  object-fit:cover; object-position:top; border:1px solid var(--line); background:#fff;
  box-shadow:0 14px 28px -16px rgba(20,20,20,.45);
  transition:transform var(--dur) var(--ease-out); }
.stack__fan img:nth-child(1){ transform:translateX(-50%) rotate(-8deg); }
.stack__fan img:nth-child(2){ transform:translateX(-50%) rotate(5deg) translateY(4%); }
.stack__fan img:nth-child(3){ transform:translateX(-50%) rotate(-1.5deg) translateY(9%); }
.acard--stack:hover .stack__fan img:nth-child(1){ transform:translateX(-58%) rotate(-12deg); }
.acard--stack:hover .stack__fan img:nth-child(2){ transform:translateX(-42%) rotate(9deg) translateY(4%); }
.acard--stack:hover .stack__fan img:nth-child(3){ transform:translateX(-50%) rotate(0deg) translateY(7%); }
.stack__plus{ position:absolute; inset:0; z-index:2; display:flex; align-items:center;
  justify-content:center; font-family:var(--display); font-weight:900; font-style:normal;
  font-size:clamp(1.9rem,2.6vw,2.5rem); letter-spacing:-.01em; color:#fff;
  background:linear-gradient(180deg,rgba(6,26,68,.12) 0%,rgba(6,26,68,.62) 100%);
  text-shadow:0 0 28px rgba(63,180,255,.6), 0 2px 14px rgba(6,26,68,.7); }
.acard--stack .acard__dl{ opacity:1; }
.acard--stack[hidden]{ display:none; }

/* ---- sheet preview lightbox (JS-only — .fz-zoom set by app.js) ------
   Thumb click previews the sheet big; the card's mono line still
   downloads directly. */
.fz-zoom a.acard .acard__thumb{ position:relative; cursor:zoom-in; }
.fz-zoom a.acard .acard__thumb::after{ content:"⤢"; position:absolute; top:8px; right:8px; z-index:2;
  display:flex; align-items:center; justify-content:center; width:26px; height:26px;
  background:rgba(19,85,185,.92); color:#fff; font-family:var(--mono); font-size:14px; line-height:1;
  opacity:0; transition:opacity var(--dur-fast); }
.fz-zoom a.acard:hover .acard__thumb::after,
.fz-zoom a.acard:focus-visible .acard__thumb::after{ opacity:1; }

.fzlb{ position:fixed; inset:0; z-index:160; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,3vh,40px); background:rgba(3,7,18,.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.fzlb[hidden]{ display:none; }
.fzlb__panel{ display:flex; flex-direction:column; gap:14px; width:auto; max-width:min(92vw,620px); }
.fzlb__frame{ margin:0; align-self:center; background:#fff; border:1px solid rgba(255,255,255,.22);
  box-shadow:0 60px 140px -40px rgba(0,0,0,.95); }
.fzlb__img{ display:block; max-width:min(88vw,560px); max-height:min(72vh,725px); height:auto; width:auto; }
.fzlb__bar{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.fzlb__name{ font-family:var(--display); font-weight:700; text-transform:uppercase; color:#fff;
  font-size:clamp(.85rem,1.1vw,1rem); letter-spacing:.02em; line-height:1.2; }
.fzlb__dl{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; padding:11px 16px;
  border:1px solid var(--blue-glow); color:var(--blue-glow); text-decoration:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  transition:background var(--dur-fast), color var(--dur-fast); }
.fzlb__dl svg{ flex:0 0 auto; }
.fzlb__dl:hover{ background:var(--blue-glow); color:var(--blue-night); }
.fzlb__close{ position:absolute; top:16px; right:16px; appearance:none; -webkit-appearance:none;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(3,7,18,.6); border:1px solid rgba(255,255,255,.35); color:#fff;
  font-family:var(--mono); font-size:16px; line-height:1;
  transition:border-color var(--dur-fast), color var(--dur-fast); }
.fzlb__close:hover{ border-color:var(--blue-glow); color:var(--blue-glow); }

@media (max-width:600px){
  .fzlb{ padding:14px; }
  .fzlb__img{ max-width:calc(100vw - 28px); max-height:66vh; }
  .fzlb__bar{ flex-direction:column; align-items:stretch; gap:10px; text-align:center; }
  .fzlb__dl{ justify-content:center; }
}

/* ---- answer keys (// 08) — native <details>, no JS needed ---------- */
.fzans{ display:flex; flex-direction:column; gap:clamp(8px,0.9vw,14px); max-width:920px; }
.fzans__group{ background:#fff; border:1px solid var(--line); }
.fzans__group summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:14px 16px; font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); transition:color var(--dur-fast); }
.fzans__group summary::-webkit-details-marker{ display:none; }
.fzans__group summary::before{ content:"[ + ]"; color:var(--blue); flex:0 0 auto; }
.fzans__group[open] summary::before{ content:"[ - ]"; }
.fzans__group summary:hover{ color:var(--blue); }
.fzans__hint{ margin-left:auto; font-style:normal; font-size:10px; letter-spacing:.12em;
  color:var(--ink-3); }
.fzans__body{ padding:2px 16px 16px; border-top:1px solid var(--line); }
.fzans__item{ padding-block:12px; border-bottom:1px solid var(--line); }
.fzans__item:last-child{ border-bottom:0; padding-bottom:4px; }
.fzans__item h3{ font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:.85rem; letter-spacing:.02em; color:var(--ink); margin:0 0 6px; }
.fzans__item p{ margin:3px 0; font-family:var(--mono); font-size:11.5px; line-height:1.8;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); }
.fzans__item p b{ font-weight:400; color:var(--blue); }

/* "show less" control under an expanded grid */
.fz-less{ margin-top:clamp(14px,2.4vh,22px); font-size:12px; padding:10px 14px; }
.fz-less[hidden]{ display:none; }

/* ---- responsive ----------------------------------------------------- */
@media (max-width:880px){
  /* hero stacks: copy first, photo under */
  .fzhero{ padding-block:clamp(44px,7vh,72px); }
  .fzhero__grid{ grid-template-columns:1fr; gap:30px; }
  .fzhero__hud{ width:min(300px,100%); }

  /* Mission Index becomes a sticky horizontal chip rail under the nav */
  .fzbody{ display:block; padding-inline:clamp(8px,0.9vw,14px); }
  .fzside{ position:sticky; top:53px; z-index:90; flex-direction:row; align-items:stretch; gap:8px;
    margin-inline:calc(clamp(8px,0.9vw,14px) * -1); padding:10px clamp(12px,3vw,20px);
    overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-padding-inline:12px;
    background:color-mix(in srgb,var(--paper) 88%,transparent);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    scrollbar-width:none; }
  .fzside::-webkit-scrollbar{ display:none; }
  .fzside__label{ display:none; }
  .fzside__item{ flex:0 0 auto; gap:8px; padding:6px 10px; border:1px solid var(--line-2);
    border-left:1px solid var(--line-2); background:#fff; }
  .fzside__item img{ width:22px; height:28px; }
  .fzside__name{ font-size:.7rem; white-space:nowrap; }
  .fzside__count{ margin-left:2px; }
  .fzside__item.is-active{ border:1px solid var(--blue); background:#fff;
    box-shadow:inset 0 -2px 0 var(--blue); }
  .fzside__answers{ flex:0 0 auto; align-self:center; margin:0; padding:7px 10px;
    border:1px dashed var(--line-2); background:#fff; white-space:nowrap; }

  /* room for nav + rail when jumping to a category */
  .fzcat{ scroll-margin-top:128px; }
}

@media (max-width:600px){
  .fzcat__grid{ grid-template-columns:repeat(2,1fr); }
  .fzcat__grid.is-collapsed > a.acard:nth-of-type(n+4){ display:none; }
  .acard__sub{ display:none; }
}