/* ==========================================================
   THE FOSSIL DIG (fossil.html)
   Layered on learn.css + zones.css (big stage, card, quiz), a
   sibling of the Earth Lab and the Bug Lab. Warm riverbank
   sandstone, field-notebook cream and fossil brown, with a
   "dig stamp" passport.
   ========================================================== */
.fossil-page{background:#f2e9d6;--fs-ink:#3a2616;--fs-deep:#4a3220;--fs-rust:#b5562a;--fs-gold:#e3aa3c}

/* ---------- hero: a dig site on a Florida riverbank ---------- */
.zone-hero.fs-hero{padding-bottom:var(--fs-ground,300px)}
.fs-hero::before{content:"";position:absolute;z-index:-2;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:linear-gradient(180deg,#b9d9e6 0%,#dcebe4 50%,#f2e9d6 100%)}
.fs-hero .zh-pano{top:0;height:100%}
.fs-hero h1{color:var(--fs-ink);font-size:clamp(2.3rem,5.6vw,3.9rem)}
.fs-hero .eyebrow{color:#9a4a1e}
.fs-hero .nb-lede{max-width:36rem;margin-inline:auto;color:#3a2e20}
.fs-tools{align-items:center}
.fs-passport{display:inline-flex;align-items:center;gap:.45rem;min-height:46px;margin:0;padding:.5rem 1.05rem;border-radius:14px;background:var(--fs-deep);color:#ffe2a0;font:600 1rem/1 var(--display);box-shadow:inset 0 0 0 2px rgba(227,170,60,.55),inset 0 0 0 5px var(--fs-deep),inset 0 0 0 6px rgba(227,170,60,.28),0 4px 0 #2a1c10}
.fs-passport b{color:#fff;font-size:1.12rem}
.fs-passport.bump{animation:fsBump .9s cubic-bezier(.2,1.6,.4,1)}
@keyframes fsBump{30%{transform:scale(1.14) rotate(-2deg)}}

/* ---------- station picker ---------- */
.fs-picker{max-width:1240px;margin:0 auto;padding:.4rem clamp(.6rem,3vw,1.5rem) 1.1rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.fs-chip{position:relative;display:inline-flex;align-items:center;gap:.4rem;min-height:46px;padding:.4rem .95rem .4rem .6rem;border-radius:999px;border:2px solid #dccaa6;background:#fffaf0;color:var(--fs-ink);font:600 .95rem/1 var(--display);cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.fs-chip .fc-emo{font-size:1.25rem;line-height:1}
.fs-chip .fc-n{display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:#f0e2c6;color:#7a4a1e;font:700 .74rem/1 var(--display)}
.fs-chip:hover{transform:translateY(-2px);border-color:#b99a68}
.fs-chip[aria-pressed="true"]{background:var(--fs-deep);border-color:var(--fs-deep);color:#fff1d8;box-shadow:0 4px 0 #2a1c10}
.fs-chip[aria-pressed="true"] .fc-n{background:var(--fs-gold);color:#2a1a08}
.fs-chip .fc-stamp{display:none;position:absolute;top:-10px;right:-8px;width:25px;height:25px;border-radius:50%;place-items:center;background:#fffaf0;color:var(--fs-rust);font-size:.8rem;line-height:1;border:2px solid var(--fs-rust);box-shadow:inset 0 0 0 1.5px #fffaf0,inset 0 0 0 3px rgba(181,86,42,.75);transform:rotate(-14deg)}
.fs-chip.stamped .fc-stamp{display:grid}
.fs-chip.stamped.fresh .fc-stamp{animation:fsChipStamp .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes fsChipStamp{from{transform:scale(2.6) rotate(-40deg);opacity:0}to{transform:scale(1) rotate(-14deg);opacity:1}}

/* ---------- the big stage ---------- */
.fossil-page .big-stage{background:#c9b28a}
.fs-stage canvas{cursor:pointer;-webkit-tap-highlight-color:transparent}
.fs-stage canvas.drag{touch-action:none}
.fs-stage-title{padding:.4rem .9rem .45rem .7rem;border-radius:16px;background:rgba(255,249,234,.95);color:var(--fs-ink);text-shadow:none;font-size:clamp(1.15rem,2.2vw,1.8rem);box-shadow:0 6px 18px rgba(30,20,8,.18)}
.fossil-page .big-stage .stage-note{background:rgba(58,38,22,.86);color:#fff1d8}
.fs-note{display:inline-block;max-width:30rem;padding:.4rem .85rem;border-radius:999px;font:600 .92rem/1.25 var(--display)}
.fs-count{position:absolute;z-index:2;right:calc(var(--card-w) + 2*var(--gap));top:var(--gap);margin:0;padding:.45rem 1rem;border-radius:16px;background:rgba(255,249,234,.95);color:var(--fs-ink);font:600 clamp(.95rem,1.6vw,1.2rem)/1.2 var(--display);box-shadow:0 6px 18px rgba(30,20,8,.2);pointer-events:none;white-space:nowrap}
.fs-count b{color:var(--fs-rust)}
.fs-stampfx{position:absolute;z-index:4;left:calc((100% - var(--card-w) - 2*var(--gap))/2);top:44%;width:clamp(170px,20vw,230px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;gap:.15rem;text-align:center;color:var(--fs-rust);background:rgba(255,249,234,.95);border:6px solid var(--fs-rust);box-shadow:inset 0 0 0 5px rgba(255,249,234,.93),inset 0 0 0 8px var(--fs-rust),0 22px 50px rgba(40,20,10,.35);font:700 1.1rem/1.05 var(--display);text-transform:uppercase;letter-spacing:.06em;transform:translate(-50%,-50%) rotate(-12deg);pointer-events:none}
.fs-stampfx .sf-emoji{font-size:3.1rem;line-height:1;letter-spacing:0}
.fs-stampfx small{font:600 .78rem/1.1 var(--display);letter-spacing:.1em;max-width:80%}
.fs-stampfx.go{animation:fsStampIn 3.2s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes fsStampIn{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-34deg) scale(2.5)}
  13%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(.96)}
  18%{transform:translate(-50%,-50%) rotate(-12deg) scale(1.05)}
  24%{transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
  84%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(.92)}}

/* ---------- controls along the bottom of the stage ---------- */
.big-zone>.fs-ctrl{align-items:center;gap:.4rem .5rem;background:linear-gradient(rgba(34,22,10,0),rgba(34,22,10,.5) 60%)}
.fs-ctrl .bk{display:inline-flex;align-items:center;gap:.35rem;min-height:42px;padding:.35rem .8rem;border-radius:999px;border:2px solid rgba(255,249,234,.9);background:rgba(255,249,234,.96);color:var(--fs-ink);font:600 .9rem/1 var(--display);cursor:pointer;box-shadow:0 3px 10px rgba(20,12,4,.2);transition:transform .12s,background .12s}
.fs-ctrl .bk:hover{transform:translateY(-2px)}
.fs-ctrl .bk[aria-pressed="true"]{background:var(--fs-deep);border-color:var(--fs-deep);color:#fff1d8}
.fs-ctrl .bk.go{background:#5f7f3a;border-color:#5f7f3a;color:#fff}
.fs-ctrl .bk.warn{background:var(--fs-rust);border-color:var(--fs-rust);color:#fff}
.fs-ctrl .bk .bk-emo{font-size:1.1rem;line-height:1;display:inline-grid;place-items:center}
.fs-ctrl .bk .bk-emo img{display:block}
.fs-ctrl .bk.done::after{content:"✓";display:grid;place-items:center;width:1.1rem;height:1.1rem;margin-left:.1rem;border-radius:50%;background:#5f7f3a;color:#fff;font-size:.7rem}
.fs-ctrl .bk[aria-pressed="true"].done::after{background:var(--fs-gold);color:#2a1a08}
.fs-ctrl .bk-sep{flex-basis:100%;height:0}
.fs-ctrl .bk-lab{font:600 .78rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:#fff1d8;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.fs-slider{display:flex;align-items:center;gap:.6rem;padding:.35rem .95rem;border-radius:999px;background:rgba(255,251,242,.97);box-shadow:0 4px 12px rgba(0,0,0,.18);font:600 .95rem/1 var(--display);color:var(--fs-ink)}
.fs-slider input{width:clamp(150px,26vw,340px);accent-color:var(--fs-rust);height:32px}
.fs-readout{padding:.5rem .95rem;border-radius:999px;background:var(--fs-deep);color:#ffe2a0;font:600 1rem/1.15 var(--display)}

/* ---------- card ---------- */
.fossil-page .big-card{border-color:#e2cfa8}
.fossil-page .big-card h2{color:var(--fs-ink)}
.fs-card .sc-order{color:var(--fs-rust)}
.fs-block{margin:.6rem 0;padding:.65rem .85rem;border-radius:14px;font-size:1.04rem;line-height:1.45}
.fs-block>b{display:block;font:600 .74rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.2rem}
.fs-block p{margin:0}
.fs-block[hidden]{display:none}
.fb-what{background:#f6ecd9}.fb-what>b{color:#8a4e1c}
.fb-how{background:#eef1e0}.fb-how>b{color:#56702c}
.fb-matters{background:#e9f0f3}.fb-matters>b{color:#2f6680}
.fb-look{background:#fffaf0;border:2px dashed #d9a54a}
.fb-look>b{color:var(--fs-rust)}
.fb-look h3{margin:.1rem 0 .1rem;font:600 1.3rem/1.1 var(--display);color:var(--fs-ink)}
.fb-look h3:empty,.fs-sci:empty,.fs-badges:empty{display:none}
.fs-sci{margin:0 0 .35rem!important;font:italic 400 .98rem/1.3 var(--read);color:#6a5a44}
.fs-badges{display:flex;flex-wrap:wrap;gap:.3rem;margin:.1rem 0 .45rem}
.fs-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.22rem .62rem;border-radius:999px;font:600 .8rem/1.2 var(--display);border:1.5px solid #dcc79c;background:#f7eedc;color:#6a4418}
.fs-badge.fl{background:var(--fs-deep);color:#ffe2a0;border-color:var(--fs-deep)}
.fs-card .sc-facts li{background:#f8f1e2}

/* ---------- quiz with a fossil picture ---------- */
.fs-quiz{border-color:#e2cfa8}
.fs-quiz .quiz-q{color:var(--fs-ink)}
.fs-qpic{width:130px;height:130px;margin:.4rem auto .2rem;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%,#fffdf6,#efdfc0);box-shadow:inset 0 0 0 4px #fff,0 4px 14px rgba(60,40,20,.16)}
.fs-qpic:empty{display:none}
.fs-qpic img{width:108px;height:108px;object-fit:contain}

/* ---------- phones and tablets ---------- */
@media(max-width:1099px){
  .big-zone>.fs-ctrl{background:none;padding-top:.8rem;flex-wrap:wrap;justify-content:center;overflow:visible}
  .fs-ctrl .bk-lab{color:var(--fs-ink);text-shadow:none}
  .fs-ctrl .bk{border-color:#dccaa6}
  .fs-stampfx{left:50%}
  .fs-count{top:auto;bottom:12px;right:auto;left:50%;transform:translateX(-50%)}
}
@media(max-width:620px){
  .fs-chip{min-height:42px;font-size:.84rem;padding:.35rem .7rem .35rem .45rem;gap:.3rem}
  .fs-chip .fc-emo{font-size:1.1rem}.fs-chip .fc-n{display:none}
  .fs-ctrl .bk{min-height:38px;padding:.3rem .62rem;font-size:.82rem}
  .fs-slider{flex-wrap:wrap;justify-content:center;border-radius:18px}
  .fs-slider input{width:min(260px,70vw)}
  .fs-note{font-size:.8rem;max-width:calc(100vw - 40px)}
  .fs-count{font-size:.9rem;white-space:normal;text-align:center;max-width:calc(100% - 24px)}
  .fs-passport{font-size:.95rem}
  .fs-stage-title{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){
  .fs-passport.bump,.fs-chip.stamped.fresh .fc-stamp{animation:none}
  .fs-stampfx.go{animation:none;opacity:1}
}