/* =========================================================================
   BIOGEOTECHNICS — v6 "UNDERSTORY" · FIELD INTELLIGENCE
   Tool components. Loads AFTER biov6.css and inherits every token from it.
   ========================================================================= */

/* ---------------------------------------------------------------
   01 · PAGE INTRO
   --------------------------------------------------------------- */
.fihero{position:relative;background:var(--forest-950);padding:clamp(132px,16vh,190px) 0 clamp(56px,7vw,92px);overflow:hidden}
.fihero__glow{position:absolute;width:min(72vw,860px);aspect-ratio:1;top:-34%;right:-14%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(79,122,92,.22),transparent 72%);filter:blur(24px);animation:breathe 14s ease-in-out infinite}
.fihero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fihero .wrap{position:relative;z-index:2}
.fihero h1{font-size:clamp(38px,5.2vw,72px);max-width:17ch;margin:26px 0 30px}
.fihero h1 em{color:var(--beige-200)}
.fihero .lede{max-width:64ch}

/* numbered tool index */
.toolindex{margin-top:clamp(44px,5vw,72px);border-top:1px solid var(--line-d)}
.toolindex a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px 22px;
  padding:20px 0;border-bottom:1px solid var(--line-d);position:relative;transition:padding-left .55s var(--e-out)}
@media (min-width:760px){.toolindex a{grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr) auto;gap:32px}}
.toolindex a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(110,155,120,.07);
  transition:width .55s var(--e-out)}
.toolindex a:hover{padding-left:18px}
.toolindex a:hover::before{width:100%}
.toolindex .ti-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--moss-400);position:relative;z-index:1}
.toolindex .ti-name{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.1vw,26px);letter-spacing:-.028em;position:relative;z-index:1}
.toolindex .ti-src{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--lite-3);position:relative;z-index:1;line-height:1.5}
.toolindex .ti-ar{font-family:var(--mono);font-size:15px;color:var(--lite-3);position:relative;z-index:1;
  transition:transform .55s var(--e-out),color .35s ease}
.toolindex a:hover .ti-ar{transform:translateX(6px);color:var(--beige-200)}
@media (max-width:759px){.toolindex .ti-src{grid-column:2/-1;margin-top:-6px}}

/* shared tool section head */
.tool{position:relative;padding-block:var(--sec-y)}
.tool--a{background:var(--forest-900)}
.tool--b{background:var(--charcoal)}
.tool--c{background:var(--forest-950)}
.tool--d{background:var(--forest-850)}
.livetag{display:inline-flex;align-items:center;gap:9px}
.livetag i{width:14px;height:1px;background:var(--moss-400);flex:none;opacity:.85}
.srcline{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--lite-3)}
.srcline b{color:var(--lite-2);font-weight:500}
.srcline a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(247,244,237,.3)}
.srcline a:hover{color:var(--lite)}

/* ---------------------------------------------------------------
   02 · CONTROLS — chips, segmented, slider, transport
   --------------------------------------------------------------- */
.ctrl{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  padding:10px 16px;border-radius:100px;border:1px solid var(--line-d);background:rgba(247,244,237,.03);
  color:var(--lite-2);transition:border-color .35s ease,background .35s ease,color .35s ease,transform .5s var(--e-out)}
.ctrl:hover{border-color:rgba(110,155,120,.5);background:rgba(110,155,120,.1);color:var(--lite);transform:translateY(-2px)}
.ctrl:active{transform:translateY(0)}
.ctrl.on{border-color:var(--moss-400);background:var(--moss-500);color:var(--paper)}
.ctrl svg{width:13px;height:13px;flex:none}
.ctrl--wide{padding:10px 18px}

.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* segmented control (satellite layers) */
.seg{display:flex;flex-wrap:wrap;gap:3px;padding:4px;border-radius:100px;border:1px solid var(--line-d);
  background:rgba(7,13,10,.72);backdrop-filter:blur(12px)}
.seg button{cursor:pointer;border:0;background:none;border-radius:100px;padding:9px 16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lite-3);
  transition:background .35s ease,color .35s ease}
.seg button:hover{color:var(--lite);background:rgba(247,244,237,.06)}
.seg button.on{background:var(--paper);color:var(--ink)}

/* transport row + custom range */
.transport{display:flex;align-items:center;gap:18px;margin-top:18px;
  border:1px solid var(--line-d);border-radius:100px;padding:10px 20px 10px 10px;background:rgba(7,13,10,.55)}
.tbtn{flex:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--moss-500);color:var(--paper);transition:background .35s ease,transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.tbtn:hover{background:var(--moss-400);transform:scale(1.06);box-shadow:0 10px 30px -12px rgba(110,155,120,.8)}
.tbtn svg{width:15px;height:15px;fill:currentColor}
.tbtn .ic-pause{display:none}
.tbtn[aria-pressed="true"] .ic-play{display:none}
.tbtn[aria-pressed="true"] .ic-pause{display:block}

.range{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;height:22px;background:none;cursor:pointer}
.range::-webkit-slider-runnable-track{height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--ember) var(--fill,100%),rgba(247,244,237,.16) var(--fill,100%))}
.range::-moz-range-track{height:2px;border-radius:2px;background:rgba(247,244,237,.16)}
.range::-moz-range-progress{height:2px;border-radius:2px;background:var(--ember)}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  margin-top:-7px;background:var(--paper);border:2px solid var(--ember);cursor:grab;
  box-shadow:0 2px 10px rgba(0,0,0,.5);transition:transform .3s var(--e-out)}
.range::-webkit-slider-thumb:hover{transform:scale(1.22)}
.range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--ember);cursor:grab}
.range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--moss-400);outline-offset:2px}
.tdate{flex:none;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--beige-200);
  font-variant-numeric:tabular-nums;min-width:12ch;text-align:right}

/* ---------------------------------------------------------------
   03 · SOIL EXPLORER
   --------------------------------------------------------------- */
.soilgrid{display:grid;gap:clamp(20px,2.6vw,34px)}
@media (min-width:1060px){
  .soilgrid{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);align-items:start}
  /* the readout runs taller than the map — keep the map in view while it scrolls */
  .soilgrid>div:first-child{position:sticky;top:96px}
}

.mapframe{position:relative;border:1px solid var(--line-d);border-radius:var(--r-l);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,rgba(79,122,92,.12),transparent 64%),var(--forest-950);
  padding:clamp(8px,1.4vw,18px)}
.mapframe svg{width:100%;height:auto;cursor:crosshair;display:block}
.mapframe .grat{fill:none;stroke:rgba(247,244,237,.07);stroke-width:.5;vector-effect:non-scaling-stroke}
.mapframe .land{fill:rgba(247,244,237,.055);stroke:rgba(247,244,237,.17);stroke-width:.5;vector-effect:non-scaling-stroke;
  transition:fill .3s ease}
.mapframe svg:hover .land{fill:rgba(247,244,237,.075)}
.pin{fill:var(--ember-soft);filter:drop-shadow(0 0 6px rgba(196,98,45,.9))}
.pin-halo{fill:none;stroke:var(--ember);stroke-width:1.4}
.maphint{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--lite-3)}

.readout{border:1px solid var(--line-d);border-radius:var(--r-l);background:rgba(10,20,16,.7);backdrop-filter:blur(12px);
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:24px;transition:opacity .4s ease}
.readout.busy{opacity:.55}
.ro-head{display:flex;flex-direction:column;gap:6px}
.ro-coords{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--moss-400);font-variant-numeric:tabular-nums}
.ro-place{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.1vw,27px);letter-spacing:-.03em;line-height:1.14}
.ro-marine{margin-top:8px;align-self:flex-start;display:none;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:#8FBEDC;
  border:1px solid rgba(143,190,220,.3);border-radius:100px;padding:6px 12px}

.ro-hero{border-top:1px solid var(--line-d);padding-top:22px}
.ro-hero .n{font-family:var(--display);font-weight:800;font-size:clamp(48px,5.6vw,68px);line-height:.9;
  letter-spacing:-.05em;color:var(--beige-200);font-variant-numeric:tabular-nums}
.ro-hero .u{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--lite-3)}
.ro-hero .k{display:block;margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lite-2)}

/* texture bar */
.texture{display:flex;flex-direction:column;gap:12px}
.tex-track{display:flex;height:10px;border-radius:100px;overflow:hidden;background:rgba(247,244,237,.06)}
.tex-track i{display:block;height:100%;transition:width .8s var(--e-out)}
.tex-key{display:flex;flex-wrap:wrap;gap:6px 20px}
.tex-key span{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;color:var(--lite-3)}
.tex-key span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--sw,var(--lite-3))}
.tex-key b{color:var(--lite);font-weight:500;font-variant-numeric:tabular-nums}
.tex-class{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--moss-300)}

/* metric grid */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-d);
  border:1px solid var(--line-d);border-radius:var(--r-m);overflow:hidden}
.mgrid>div{background:rgba(10,20,16,.9);padding:16px 18px}
.mgrid .mv{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.mgrid .ml{margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--lite-3);line-height:1.5}

/* live conditions sub-block */
.cond{border:1px solid var(--line-d);border-radius:var(--r-m);padding:18px}
.cond-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--lite-3)}
.cond-h .w{color:var(--beige-300);text-transform:none;letter-spacing:.05em;text-align:right}
.cond-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px}
.cond-g .cv{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.cond-g .cl{margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--lite-3)}

/* species */
.species .sp-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--lite-3);margin-bottom:12px}
.sp-list{display:flex;flex-wrap:wrap;gap:7px}
.sp-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;
  border:1px solid var(--line-d);border-radius:100px;padding:7px 13px;font-size:12.5px;color:var(--lite-2);
  transition:border-color .35s ease}
.sp-chip:hover{border-color:rgba(247,244,237,.3)}
.sp-chip i{width:7px;height:7px;border-radius:50%;flex:none}
.sp-chip em{font-style:italic;color:var(--lite);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-chip span{color:var(--lite-3);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-hint{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--lite-3)}

.ro-foot{border-top:1px solid var(--line-d);padding-top:16px;display:flex;flex-wrap:wrap;gap:8px 20px;
  justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:var(--lite-3)}
.ro-foot b{color:var(--lite-2);font-weight:500}

/* ---------------------------------------------------------------
   04 · SATELLITE
   --------------------------------------------------------------- */
/* NB: aspect-ratio + min-height lets the box derive its WIDTH from the forced
   height and blow past its container. Narrow screens use a definite height. */
.satstage{position:relative;border:1px solid var(--line-d);border-radius:var(--r-l);overflow:hidden;
  background:var(--forest-950);aspect-ratio:16/9;min-width:0}
@media (max-width:760px){.satstage{aspect-ratio:auto;height:clamp(300px,82vw,440px)}}
.satmap{position:absolute;inset:0;width:100%;height:100%;background:var(--forest-950)}
.satstage .seg{position:absolute;left:16px;top:16px;z-index:500;max-width:calc(100% - 32px)}
/* on a phone a wrapped 4-row switcher swallows the map — one scrollable line,
   inset from the zoom controls at the top right */
@media (max-width:760px){
  .satstage .seg{left:10px;right:56px;top:10px;max-width:none;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .satstage .seg::-webkit-scrollbar{display:none}
  .satstage .seg button{flex:none;white-space:nowrap;padding:8px 13px}
  .satstage .leaflet-control-zoom{margin:10px!important}
}
.satload{position:absolute;inset:0;z-index:400;display:grid;place-items:center;background:var(--forest-950);
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--lite-3)}
/* Leaflet chrome, restyled */
.satstage .leaflet-control-zoom a{background:rgba(7,13,10,.86)!important;color:var(--lite)!important;
  border:1px solid var(--line-d)!important;border-radius:8px!important;width:32px!important;height:32px!important;
  line-height:30px!important;font-weight:400!important;backdrop-filter:blur(10px)}
.satstage .leaflet-control-zoom a:hover{background:var(--moss-500)!important;border-color:var(--moss-400)!important}
.satstage .leaflet-control-zoom{border:0!important;box-shadow:none!important;margin:16px!important;display:flex;flex-direction:column;gap:5px}
.satstage .leaflet-control-attribution{background:rgba(7,13,10,.8)!important;color:var(--lite-3)!important;
  font-family:var(--mono)!important;font-size:9.5px!important;letter-spacing:.05em;padding:4px 9px!important;border-radius:6px 0 0 0}
.satstage .leaflet-control-attribution a{color:var(--lite-2)!important}

/* ---------------------------------------------------------------
   05 · CAMERAS
   --------------------------------------------------------------- */
.camgrid{display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.cam{position:relative;aspect-ratio:16/10;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line-d);
  background:var(--forest-850);display:block;transition:transform .6s var(--e-out),border-color .4s ease,box-shadow .6s var(--e-out)}
.cam:hover{transform:translateY(-5px);border-color:rgba(196,98,45,.45);box-shadow:0 26px 54px -30px rgba(0,0,0,.9)}
.cam img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out),filter .5s ease;filter:saturate(.86)}
.cam:hover img{transform:scale(1.055);filter:saturate(1)}
.cam .fail{display:none;position:absolute;inset:0;place-items:center;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--lite-3);background:var(--forest-850)}
.cam .cov{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,13,10,.55) 0%,transparent 34%,transparent 52%,rgba(7,13,10,.88) 100%)}
.cam .top{position:absolute;top:11px;left:11px;right:11px;display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:2}
.cam .live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper);background:rgba(7,13,10,.62);backdrop-filter:blur(6px);
  border:1px solid rgba(247,244,237,.15);border-radius:100px;padding:5px 10px}
.cam .live i{width:12px;height:1px;background:var(--ember);opacity:.9}
.cam .cty{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(247,244,237,.72);
  text-shadow:0 1px 6px rgba(0,0,0,.9)}
.cam .bot{position:absolute;left:14px;right:14px;bottom:12px;z-index:2}
.cam .nm{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.02em;color:var(--paper);
  text-shadow:0 1px 8px rgba(0,0,0,.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cam .tm{margin-top:4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:rgba(247,244,237,.6);
  font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------
   06 · LIVING SOIL SIMULATION
   --------------------------------------------------------------- */
.simwrap{display:grid;gap:clamp(18px,2.2vw,28px)}
.simwrap>*{min-width:0}
@media (min-width:1040px){.simwrap{grid-template-columns:minmax(0,1fr) 306px;align-items:start}}

/* same aspect-ratio/min-height caveat as .satstage above */
.simstage{position:relative;border:1px solid var(--line-d);border-radius:var(--r-l);overflow:hidden;
  background:var(--forest-950);aspect-ratio:16/9;min-width:0}
@media (max-width:760px){.simstage{aspect-ratio:auto;height:clamp(320px,86vw,460px)}}
.simstage canvas{position:absolute;inset:0;width:100%;height:100%}

.simmeters{position:absolute;left:16px;top:16px;z-index:3;width:min(216px,46%);
  background:rgba(7,13,10,.7);backdrop-filter:blur(12px);border:1px solid var(--line-d);border-radius:var(--r-m);padding:15px 16px}
.simres{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line-d)}
.simres .rl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lite-3)}
.simres .rv{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.04em;color:var(--beige-200);
  font-variant-numeric:tabular-nums}
.simbars{display:flex;flex-direction:column;gap:9px}
.sbar .bl{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--lite-3);margin-bottom:5px}
.sbar .bt{height:3px;border-radius:3px;background:rgba(247,244,237,.1);overflow:hidden}
.sbar .bf{height:100%;width:0;border-radius:3px;transition:width .3s linear}

.simmain{position:relative}
.simcontrols{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.simcontrols .btn{font-size:14px;padding:12px 20px}
@media (min-width:761px){
  /* enough room to float over the scene; on phones it drops below the stage */
  .simcontrols{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;margin-top:0}
}
@media (max-width:760px){
  .simmeters{left:10px;right:10px;top:auto;bottom:10px;width:auto;padding:11px 13px}
  .simres{margin-bottom:10px;padding-bottom:9px}
  .simres .rl{font-size:9px}
  .simres .rv{font-size:19px}
  .simbars{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
  .sbar .bl{font-size:8.5px;margin-bottom:4px}
  .simedu{left:10px;right:10px;top:10px;width:auto}
  .simcontrols .btn{font-size:13px;padding:11px 17px}
}

.simedu{position:absolute;right:16px;top:16px;z-index:4;width:min(300px,58%);
  background:rgba(7,13,10,.82);backdrop-filter:blur(14px);border:1px solid var(--line-d);border-radius:var(--r-m);
  padding:16px 18px;opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .5s ease,transform .6s var(--e-out)}
.simedu.show{opacity:1;transform:none}
.simedu .et{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.02em;color:var(--beige-200);margin-bottom:7px}
.simedu .eb{font-size:13px;line-height:1.55;color:var(--lite-2)}

.simevent{position:absolute;left:50%;top:16px;transform:translate(-50%,-14px);z-index:5;
  background:rgba(120,44,18,.9);border:1px solid rgba(196,98,45,.55);backdrop-filter:blur(10px);
  border-radius:100px;padding:9px 18px;max-width:min(84%,540px);text-align:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#FBD9BC;line-height:1.5;
  opacity:0;pointer-events:none;transition:opacity .5s ease,transform .6s var(--e-out)}
.simevent.show{opacity:1;transform:translate(-50%,0)}

.simdone{position:absolute;inset:0;z-index:6;display:grid;place-items:center;text-align:center;padding:28px;
  background:radial-gradient(closest-side,rgba(10,20,16,.9),rgba(7,13,10,.97));backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .7s ease}
.simdone.show{opacity:1;pointer-events:auto}
.simdone h3{font-size:clamp(22px,2.6vw,34px);max-width:18ch;margin-bottom:14px}
.simdone p{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--lite-3);margin-bottom:26px}

/* species deck */
.simdeck{display:grid;gap:10px}
@media (max-width:1039px){.simdeck{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}}
.simdeck__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--lite-3);
  display:flex;align-items:center;gap:9px}
.simdeck__h::after{content:"";flex:1;height:1px;background:var(--line-d)}
.scard{position:relative;border:1px solid var(--line-d);border-radius:var(--r-m);padding:15px 16px 15px 19px;
  background:rgba(10,20,16,.62);cursor:grab;overflow:hidden;touch-action:none;
  transition:transform .5s var(--e-out),border-color .4s ease,background .4s ease}
.scard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sp,var(--moss-500))}
.scard:hover{transform:translateY(-3px);border-color:rgba(247,244,237,.26);background:rgba(13,26,20,.86)}
.scard.dragging{opacity:.42;cursor:grabbing;transform:none}
.scard__top{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.spore{flex:none;width:26px;height:26px;position:relative}
.spore::before{content:"";position:absolute;left:0;right:0;top:2px;height:13px;border-radius:13px 13px 3px 3px;
  background:var(--sp,var(--moss-500))}
.spore::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:13px;width:7px;height:11px;
  border-radius:0 0 3px 3px;background:rgba(247,244,237,.82)}
.scard__nm{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.02em;font-style:italic;line-height:1.2}
.scard__tg{margin-top:4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--lite-3)}
.scard__tr{display:flex;flex-wrap:wrap;gap:5px}
.scard__tr span{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--line-d);border-radius:100px;padding:4px 8px;color:var(--lite-3)}
.simhint{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--lite-3);line-height:1.6}

.simghost{position:fixed;z-index:200;pointer-events:none;width:34px;height:34px;transform:translate(-50%,-50%);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7))}
.simghost .spore{width:34px;height:34px}
.simghost .spore::before{top:3px;height:17px;border-radius:17px 17px 4px 4px}
.simghost .spore::after{top:17px;width:9px;height:14px}

/* ---------------------------------------------------------------
   07 · ROUTE BACK
   --------------------------------------------------------------- */
.backband{background:var(--forest-900);border-top:1px solid var(--line-d);padding-block:clamp(56px,7vw,96px)}
.backband .wrap{display:grid;gap:26px;align-items:center}
@media (min-width:860px){.backband .wrap{grid-template-columns:minmax(0,1fr) auto;gap:48px}}
.backband h2{font-size:clamp(26px,3vw,40px);max-width:18ch}
.backband p{margin-top:14px;color:var(--lite-2);max-width:56ch}