/* ---------- overview building blocks (gamemodes.html) ---------- */
.page-hero{min-height:78svh;display:flex;align-items:flex-end;padding:120px 0 72px}
.page-hero .hero-inner{position:relative;z-index:2}
.mode-grid,.compare,.sheet{display:grid;gap:24px}
.mode-grid,.compare{grid-template-columns:1fr 1fr}
.compare{align-items:stretch}
.mode-card,.compare article,.roadmap li{display:block;padding:28px;background:rgba(14,14,32,.82);border:1px solid var(--line)}
.mode-card h2,.compare h2{font:400 clamp(2rem,4vw,3.4rem)/.9 var(--display);text-transform:uppercase;margin:12px 0}
.mode-card p,.compare p{color:var(--muted);margin:0 0 18px}
.roadmap{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.roadmap b{color:var(--yellow)}
.sheet{grid-template-columns:1.1fr .9fr;align-items:start}
@media (max-width:800px){.mode-grid,.compare,.sheet{grid-template-columns:1fr}}
@media (prefers-reduced-motion: no-preference){
  .js:not(.gsap) [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js:not(.gsap) [data-reveal].in{opacity:1;transform:none}
}

/* ---------- shared section shell ---------- */
.gm-sec{padding:clamp(96px,13vw,170px) 0;position:relative;overflow:hidden}
.gm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 60px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.gm-head .lead{max-width:520px}
.ghost-word{position:absolute;right:-4vw;top:30px;font:400 clamp(7rem,19vw,18rem)/.8 var(--display);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);white-space:nowrap;pointer-events:none;user-select:none;text-transform:uppercase}
.hero-title .l2.alt{-webkit-text-stroke-color:var(--cyan);filter:drop-shadow(0 0 18px rgba(54,231,255,.55))}
.mode-switch{display:inline-flex;align-self:flex-start;gap:6px;padding:5px;margin-top:22px;border:1px solid var(--line);background:rgba(5,5,12,.55);backdrop-filter:blur(10px)}
.mode-switch a{padding:10px 14px;font:400 .95rem/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);transition:background .3s,color .3s}
.mode-switch a[aria-current]{background:var(--yellow);color:#0b0b12}
.mode-switch a:not([aria-current]):hover{color:#fff;background:rgba(255,255,255,.08)}
.wiggle-hint{display:inline-block;animation:wig 2.4s ease-in-out infinite}
@keyframes wig{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-8deg)}88%{transform:rotate(7deg)}92%{transform:rotate(-4deg)}96%{transform:rotate(2deg)}}

/* ---------- MINI-GAME: Taschenlampen-Jagd ---------- */
.hunt{position:relative;border:1px solid var(--line);background:#06060e;overflow:hidden;isolation:isolate;--hx:50%;--hy:50%;user-select:none;touch-action:manipulation}
.hunt-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:16px 20px;border-bottom:1px solid var(--line);background:rgba(5,5,12,.85);position:relative;z-index:3}
.hunt-stats{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.hunt-stat{display:grid;gap:6px;min-width:120px}
.hunt-stat b{font:400 1.8rem/1 var(--nums);color:var(--yellow);font-variant-numeric:tabular-nums}
.hunt-stat .bar{width:140px}
.hunt-stat .bar i{background:linear-gradient(90deg,#ffb400,var(--yellow));box-shadow:0 0 12px var(--yellow);transition:none}
.hunt-shelf{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1.4vw,18px);padding:clamp(22px,3vw,40px);background:
  repeating-linear-gradient(180deg,transparent 0 calc(50% - 10px),rgba(160,140,255,.16) calc(50% - 10px) 50%),
  linear-gradient(180deg,#141127,#0c0b19)}
.shelf-item{position:relative;aspect-ratio:1/1.25;display:grid;place-items:end center;padding-bottom:6px;cursor:pointer}
.shelf-item i{display:block;background:var(--ic,#6f6aa8);box-shadow:inset -6px 0 0 rgba(0,0,0,.25),inset 0 4px 0 rgba(255,255,255,.12);transition:transform .2s var(--ease)}
.shelf-item:hover i{transform:translateY(-3px)}
.s-can i{width:44%;height:62%;border-radius:6px 6px 4px 4px;--ic:#d24b6a}
.s-bottle i{width:28%;height:86%;border-radius:40% 40% 6px 6px/22% 22% 6px 6px;--ic:#3fae8a}
.s-box i{width:72%;height:58%;border-radius:3px;--ic:#c08a4a}
.s-melon i{width:70%;height:52%;border-radius:50%;--ic:#4c9c3c;background:repeating-linear-gradient(90deg,#4c9c3c 0 8px,#35772b 8px 14px)}
.s-jar i{width:52%;height:56%;border-radius:10px 10px 8px 8px;--ic:#c9b04a}
.s-bin i{width:62%;height:78%;border-radius:4px 4px 10px 10px;--ic:#5a6478}
.shelf-item.wiggle i{animation:propWig .7s ease-in-out}
@keyframes propWig{0%,100%{transform:none}20%{transform:translateX(-3px) rotate(-5deg)}45%{transform:translateX(3px) rotate(5deg)}70%{transform:translateX(-2px) rotate(-2deg)}}
.shelf-item.found i{animation:none;outline:2px solid var(--red);outline-offset:4px;box-shadow:0 0 26px var(--red)}
.shelf-item.miss i{animation:miss .35s}
@keyframes miss{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.hunt-dark{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle 120px at var(--hx) var(--hy),transparent 0,rgba(3,3,8,.4) 45%,rgba(3,3,8,.94) 100%);transition:opacity .4s}
.hunt-glow{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(circle 110px at var(--hx) var(--hy),rgba(255,236,170,.75),transparent 70%)}
.hunt:not(.live) .hunt-dark{background:rgba(3,3,8,.72)}
.hunt:not(.live) .hunt-glow{opacity:0}
.hunt.flash .hunt-shelf{animation:flash .45s}
@keyframes flash{0%{filter:brightness(2.2) saturate(1.6)}100%{filter:none}}
.hunt-msg{font:700 .66rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hunt-msg.good{color:var(--yellow)}.hunt-msg.bad{color:var(--red)}
.hunt-start{position:absolute;left:50%;top:58%;z-index:4;transform:translate(-50%,-50%)}
.hunt.live .hunt-start{opacity:0;pointer-events:none}
.hunt-start-wrap{display:none}
.hunt .stamp{position:absolute;left:50%;top:44%;z-index:4;transform:translate(-50%,-50%) rotate(-6deg);font:400 clamp(2.4rem,7vw,5rem)/1 var(--display);text-transform:uppercase;color:var(--red);-webkit-text-stroke:1.5px #fff;text-shadow:5px 5px 0 #000;opacity:0;pointer-events:none;transition:opacity .3s}
.hunt.over .stamp{opacity:1}
.hunt-note{margin:14px 0 0;font-size:.82rem;color:var(--dim)}

/* ---------- KEYMAP ---------- */
.keymap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.key{position:relative;padding:22px 20px 20px;border:1px solid var(--line);background:linear-gradient(170deg,rgba(255,255,255,.04),transparent);display:flex;flex-direction:column;gap:14px;transition:transform .35s var(--ease),border-color .3s}
.key:hover{transform:translateY(-4px);border-color:var(--kc,var(--yellow))}
.key kbd{min-width:62px;height:62px;font-size:1rem;border-bottom-width:5px;align-self:flex-start;transition:transform .15s,border-bottom-width .15s}
.key:hover kbd{transform:translateY(3px);border-bottom-width:2px}
.key b{font:400 1.4rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.key span{color:var(--muted);font-size:.86rem}
.key small{position:absolute;right:16px;top:18px;font:700 .55rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--kc,var(--dim))}

/* ---------- SCOREBOARD ---------- */
.scoreboard{border:1px solid var(--line);background:linear-gradient(180deg,#0e0d22,#08081a)}
.score-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:18px clamp(18px,3vw,30px);border-top:1px solid var(--line)}
.score-row:first-child{border-top:0}
.score-row .who{font:700 .58rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:7px 9px;border:1px solid currentColor}
.score-row .who.p{color:var(--pink)}.score-row .who.h{color:var(--cyan)}.score-row .who.a{color:var(--yellow)}
.score-row p{margin:0;color:#d8d4ef}
.score-row p small{display:block;color:var(--dim);font-size:.78rem}
.score-row strong{font:400 clamp(2rem,3.4vw,3rem)/1 var(--nums);color:var(--yellow);text-align:right;white-space:nowrap}
.score-row strong small{font:700 .55rem/1 var(--mono);letter-spacing:.14em;color:var(--muted);margin-left:6px}

/* ---------- TIPS + FAQ + PLANNED ---------- */
.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tip{position:relative;padding:28px 26px;border:1px solid var(--line);background:rgba(255,255,255,.02);overflow:hidden}
.tip:before{content:attr(data-n);position:absolute;right:14px;top:-6px;font:400 6rem/1 var(--nums);color:rgba(255,255,255,.05)}
.tip .tip-who{font:700 .58rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tc,var(--pink))}
.tip h3{margin:12px 0 10px;font:400 1.7rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.tip p{margin:0;color:var(--muted);font-size:.9rem}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;font:400 clamp(1.2rem,2vw,1.6rem)/1.15 var(--display);letter-spacing:.03em;text-transform:uppercase;transition:color .3s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";flex:none;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);font:400 1.3rem/1 var(--mono);color:var(--yellow);transition:transform .35s var(--ease),background .3s}
.faq-list details[open] summary:after{transform:rotate(45deg);background:rgba(255,233,74,.1)}
.faq-list summary:hover{color:var(--yellow)}
.faq-list details p{margin:0 0 22px;max-width:720px;color:var(--muted)}
.planned{display:flex;flex-wrap:wrap;gap:10px}
.planned span{padding:12px 16px;border:1px dashed rgba(255,255,255,.22);font:700 .64rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#cfcbe6;transition:border-color .3s,color .3s}
.planned span:hover{border-color:var(--yellow);color:var(--yellow)}

/* ---------- CROSS-LINK ---------- */
.cross{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:end;padding:clamp(30px,6vw,80px);border:1px solid var(--line);overflow:hidden;isolation:isolate}
.cross-bg{position:absolute;inset:-15% 0;z-index:-2;background:url("/assets/map-market.png") center/cover;filter:saturate(.7)}
.cross:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,5,12,.97),rgba(5,5,12,.82) 55%,rgba(5,5,12,.5))}
.cross.to-ac:before{background:linear-gradient(90deg,rgba(4,8,22,.97),rgba(4,10,30,.84) 55%,rgba(10,30,80,.45))}
.cross h2{margin:14px 0;font:400 clamp(2.2rem,4.8vw,4.2rem)/.86 var(--display);letter-spacing:.03em;text-transform:uppercase}
.cross p{margin:0;color:#c9c4e0;max-width:520px}
.cross-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}

/* ---------- AFTER CLOSING: hero tint + scanners ---------- */
.mode-ac .hero-warm{background:radial-gradient(circle calc(var(--rs)*max(160px,15vw)) at var(--mx) var(--my),rgba(150,200,255,.5),transparent 70%)}
.mode-ac .hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,40,120,.28),rgba(0,0,0,0) 60%);mix-blend-mode:color}
.hero-scanners{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero-scanners i{position:absolute;top:-4%;width:46vmin;height:110vmin;transform-origin:50% 0;background:linear-gradient(180deg,rgba(255,51,85,.38),rgba(255,51,85,0) 85%);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);mix-blend-mode:screen;animation:heroSweep 6s ease-in-out infinite alternate}
.hero-scanners i:nth-child(1){left:52%}
.hero-scanners i:nth-child(2){left:78%;animation-duration:7.5s;animation-delay:-3s}
@keyframes heroSweep{from{transform:translateX(-50%) rotate(-28deg)}to{transform:translateX(-50%) rotate(28deg)}}
.hero-scanners i:before{content:"";position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--scan,#ff3355);box-shadow:0 0 18px #ff3355}
.chip.blue{border-color:rgba(77,141,255,.55);background:rgba(77,141,255,.12);color:#9cc0ff}

/* ---------- AFTER CLOSING: loop wheel ---------- */
.loop{background:radial-gradient(ellipse at 70% 40%,rgba(77,141,255,.12),transparent 55%),var(--bg)}
.loop-pin{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;padding:96px var(--gutter) 60px;max-width:1420px;margin:0 auto}
.loop-ring{position:relative;width:min(100%,520px,62svh);aspect-ratio:1;justify-self:center}
.loop-ring svg{width:100%;height:100%;overflow:visible}
.loop-node{fill:#0b0b18;stroke:rgba(255,255,255,.25);stroke-width:2;transition:fill .4s,stroke .4s}
.loop-node.on{fill:var(--nc);stroke:var(--nc);filter:drop-shadow(0 0 10px var(--nc))}
.loop-label{font:400 15px var(--display);letter-spacing:.06em;text-transform:uppercase;fill:#d8d4ef}
.loop-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.loop-center strong{display:block;font:400 clamp(3rem,6vw,5rem)/.9 var(--nums);color:var(--yellow)}
.loop-center span{font:700 .6rem/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.loop-steps{list-style:none;margin:28px 0 0;padding:0;display:grid}
.loop-step{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;padding:16px 0;border-top:1px solid var(--line);transition:opacity .4s}
.loop-step:last-child{border-bottom:1px solid var(--line)}
.loop-pinned .loop-step:not(.active){opacity:.35}
.loop-step em{grid-row:span 2;font:400 2rem/1 var(--nums);font-style:normal;color:var(--sc,var(--yellow))}
.loop-step h3{margin:0;font:400 1.5rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.loop-step p{margin:0;color:var(--muted);font-size:.9rem}

/* ---------- AFTER CLOSING: ambush game ---------- */
.ambush{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center;outline:none}
.amb-stage{position:relative;aspect-ratio:1.3;border:1px solid var(--line);background:
  linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/40px 40px,
  radial-gradient(circle at 50% 50%,#121130,#07070f 75%);overflow:hidden}
.amb-cone{position:absolute;left:50%;top:50%;width:0;height:0;transform-origin:0 0}
.amb-cone:before{content:"";position:absolute;left:0;top:-27vmin;width:40vmin;height:54vmin;max-width:none;background:linear-gradient(90deg,rgba(255,233,120,.5),rgba(255,233,120,.04));clip-path:polygon(0 50%,100% 0,100% 100%)}
.amb-guard{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#ffe94a;box-shadow:0 0 20px #ffe94a;z-index:2;transition:background .3s}
.amb-guard:after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px dashed rgba(255,233,74,.4);animation:spin 8s linear infinite}
.ambush.ko .amb-guard{background:#555;box-shadow:none}
.ambush.ko .amb-cone{opacity:0}
.amb-guard-tag{position:absolute;left:50%;top:calc(50% + 26px);transform:translateX(-50%);font:700 .55rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;z-index:2}
.ambush.ko .amb-guard-tag:after{content:" · K.O.";color:var(--cyan)}
.amb-prop{position:absolute;left:24%;top:30%;width:34px;height:42px;border-radius:6px 6px 4px 4px;background:#ff2bd6;box-shadow:0 0 20px #ff2bd6;z-index:3;transition:filter .2s}
.ambush.seen .amb-prop{filter:brightness(1.6);box-shadow:0 0 30px var(--red),0 0 0 3px var(--red)}
.amb-prop.dash{animation:dash .45s var(--ease)}
@keyframes dash{40%{transform:translate(70px,50px) scale(1.1)}100%{transform:none}}
.amb-stage.hit{animation:shake .3s}
.amb-stage.crit{animation:shake .45s}
.amb-stage.crit:after{content:"×2,5";position:absolute;left:50%;top:30%;transform:translateX(-50%);font:400 3.4rem/1 var(--nums);color:var(--yellow);text-shadow:0 0 30px var(--yellow);animation:pop .8s forwards}
@keyframes shake{20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
@keyframes pop{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}30%{opacity:1;transform:translate(-50%,0) scale(1.15)}100%{opacity:0;transform:translate(-50%,-30px) scale(1)}}
.amb-legend{position:absolute;left:12px;bottom:10px;font:700 .55rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.amb-panel{display:grid;gap:18px}
.amb-panel h3{margin:8px 0 0;font:400 clamp(2rem,3.6vw,3.2rem)/.9 var(--display);letter-spacing:.03em;text-transform:uppercase}
.amb-panel p{margin:0;color:var(--muted)}
.amb-bars{display:grid;gap:14px;padding:20px;border:1px solid var(--line);background:rgba(5,5,12,.6)}
.amb-bars .nerve i{background:linear-gradient(90deg,var(--yellow),var(--red));box-shadow:0 0 12px var(--red);transition:width .25s}
.amb-bars .hp i{background:linear-gradient(90deg,var(--pink),var(--violet));box-shadow:0 0 12px var(--pink);transition:none}
.amb-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.amb-scrap{font:700 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.amb-scrap b{font:400 1.6rem/1 var(--nums);color:#ffb020;margin-right:6px}
.amb-msg{min-height:2.8em;font:700 .66rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.amb-msg.good{color:var(--yellow)}.amb-msg.warn{color:#ffb020}.amb-msg.bad{color:var(--red)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- AFTER CLOSING: guard states live ---------- */
.states li.on span{background:var(--sc,#fff);color:#0b0b12;box-shadow:0 0 24px var(--sc,#fff)}
.states li span{transition:background .3s,color .3s,box-shadow .3s}

/* ---------- AFTER CLOSING: threat calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:stretch;margin-top:10px}
.calc-inputs{display:grid;gap:20px;padding:clamp(22px,3vw,34px);border:1px solid var(--line);background:rgba(255,255,255,.02)}
.calc-in{display:grid;gap:10px}
.calc-in label{display:flex;justify-content:space-between;font:700 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.calc-in label b{color:var(--ink)}
.calc-in.muted label{color:#3dff8a}
.calc-in input{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:rgba(255,255,255,.1);outline:none;clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%);cursor:pointer}
.calc-in input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--yellow);box-shadow:0 0 14px var(--yellow);transform:rotate(45deg)}
.calc-in input::-moz-range-thumb{width:16px;height:16px;border:0;background:var(--yellow);box-shadow:0 0 14px var(--yellow)}
.calc-in.muted input::-webkit-slider-thumb{background:#3dff8a;box-shadow:0 0 14px #3dff8a}
.calc-in.muted input::-moz-range-thumb{background:#3dff8a}
.calc-out{--tc:#3dff8a;position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(26px,4vw,48px);border:1px solid var(--tc);background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--tc) 22%,transparent),transparent 60%),#07070f;transition:border-color .4s}
.calc-out small{font:700 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.calc-out strong{font:400 clamp(5rem,10vw,8.5rem)/.8 var(--nums);color:var(--tc);text-shadow:0 0 40px var(--tc);transition:color .4s}
.calc-out h3{margin:0;font:400 clamp(2.2rem,4vw,3.4rem)/.9 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--tc);transition:color .4s}
.calc-out.bump strong{animation:bump .35s var(--ease)}
@keyframes bump{40%{transform:scale(1.08)}}
.calc-out #upNote{font:700 .62rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#3dff8a;margin:8px 0 0}
#calcTiers{margin-top:40px}
#calcTiers .tier{opacity:.35;transition:opacity .4s}
#calcTiers .tier.on{opacity:1}

/* ---------- AFTER CLOSING: class bars + roadmap ---------- */
.cls-bars{display:grid;gap:10px;margin:0 0 16px}
.cls-bar{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:10px;font:700 .55rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.cls-bar i{position:relative;display:block;height:6px;background:rgba(255,255,255,.08)}
.cls-bar i:after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0);background:linear-gradient(90deg,var(--pink),var(--violet));box-shadow:0 0 10px var(--pink);transition:width 1.2s var(--ease)}
.cls{transition:transform .4s var(--ease),border-color .3s}
.cls:hover{transform:translateY(-6px);border-color:var(--pink)}
.road{position:relative;display:grid;gap:0;padding-left:44px}
.road-line{position:absolute;left:14px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.1)}
.road-line i{position:absolute;inset:0;background:linear-gradient(180deg,#3dff8a,var(--cyan),var(--violet));transform-origin:50% 0;box-shadow:0 0 12px #3dff8a}
.road-item{position:relative;padding:0 0 34px}
.road-item:before{content:"";position:absolute;left:-37px;top:4px;width:16px;height:16px;transform:rotate(45deg);background:var(--bg);border:2px solid var(--rc,#3dff8a)}
.road-item.done:before{background:var(--rc,#3dff8a);box-shadow:0 0 14px var(--rc,#3dff8a)}
.road-item small{font:700 .6rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--rc,#3dff8a)}
.road-item h3{margin:8px 0 6px;font:400 1.7rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.road-item p{margin:0;color:var(--muted);max-width:620px}
.road-item.later{--rc:var(--dim)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.trio article{position:relative;padding:28px 26px;border:1px solid var(--line);background:linear-gradient(170deg,rgba(255,255,255,.035),transparent);overflow:hidden}
.trio .t-ico{display:grid;place-items:center;width:58px;height:58px;margin-bottom:20px;border:1px solid var(--tc,var(--cyan));transform:rotate(45deg)}
.trio .t-ico svg{width:26px;height:26px;transform:rotate(-45deg);fill:none;stroke:var(--tc,var(--cyan));stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--tc,var(--cyan)))}
.trio h3{margin:0 0 10px;font:400 1.8rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.trio p{margin:0;color:var(--muted);font-size:.9rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .loop-pin{grid-template-columns:1fr;min-height:0}
  .loop-ring{width:min(100% - 70px,420px)}
  .ambush,.calc,.cross{grid-template-columns:1fr}
  .cross-actions{justify-content:flex-start}
  .tips,.trio{grid-template-columns:1fr 1fr}
  .hunt-shelf{grid-template-columns:repeat(8,1fr);background:linear-gradient(180deg,#141127,#0c0b19)}
}
@media (max-width:600px){
  .tips,.trio{grid-template-columns:1fr}
  .hunt-shelf{grid-template-columns:repeat(6,1fr);gap:6px;padding:16px}
  .hunt-stat .bar{width:100px}
  .score-row{grid-template-columns:1fr auto}.score-row .who{grid-column:1/-1;justify-self:start}
  .hero-scanners i{width:70vmin}
}
@media (prefers-reduced-motion:reduce){.hero-scanners i{animation:none;transform:translateX(-50%)}}
.mode-ac{--exit:#3dff8a;--lift:#4d8dff;--scrap:#ffb020;--energy:#36c8ff;--rare:#b06bff;--term:#36e7ff;--fuse:#ffe94a;--scan:#ff3355}

/* ---------- PROP HUNT: lobby panel + gallery ---------- */
.lobby-panel{max-width:880px;border:1px solid var(--line);background:linear-gradient(180deg,#100f26,#08081a);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.lobby-row{display:grid;grid-template-columns:1fr auto 210px;align-items:center;gap:20px;padding:18px clamp(18px,3vw,30px);border-top:1px solid var(--line)}
.lobby-row:first-child{border-top:0}
.lobby-row > span{font:400 1.25rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.lobby-row > b{font:400 2rem/1 var(--nums);color:var(--yellow)}
.lobby-row > em{font:700 .55rem/1.4 var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-align:right}
.lobby-row .split{position:relative;display:flex;align-items:center;gap:12px;font-size:1.4rem;white-space:nowrap}
.lobby-row .split i{display:block;flex:none;width:120px;height:10px;background:linear-gradient(90deg,var(--pink) 70%,var(--cyan) 70%);box-shadow:0 0 12px rgba(255,43,214,.4)}
.toggle{display:inline-flex;align-items:center;gap:12px;font:400 1.1rem/1 var(--display);letter-spacing:.05em;text-transform:uppercase}
.toggle i{position:relative;width:58px;height:30px;border:1px solid var(--line);background:rgba(255,255,255,.08);transition:background .3s}
.toggle i:after{content:"";position:absolute;left:4px;top:4px;width:20px;height:20px;background:#fff;transition:transform .35s var(--ease)}
.toggle[aria-checked="true"] i{background:var(--yellow);border-color:var(--yellow)}
.toggle[aria-checked="true"] i:after{transform:translateX(28px);background:#0b0b12}
.shots-3{grid-auto-rows:clamp(180px,22vw,320px)}
.shots-3 .shot:nth-child(1){grid-column:span 6;grid-row:span 2}
.shots-3 .shot:nth-child(2),.shots-3 .shot:nth-child(3){grid-column:span 6;grid-row:span 1}
@media (max-width:600px){.lobby-row{grid-template-columns:1fr auto}.lobby-row > em{grid-column:1/-1;text-align:left}.shots-3 .shot:nth-child(n){grid-column:span 2}}
@media (max-width:900px){.shots-3 .shot:nth-child(n){grid-column:span 1;grid-row:span 1}.shots-3 .shot:nth-child(1){grid-column:span 2;grid-row:span 2}}
@media (max-width:600px){.shots-3 .shot:nth-child(n){grid-column:span 2}}
.soon-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.mode-card.is-soon{position:relative}.mode-card.is-soon .soon-badge{top:18px;right:18px;font-size:.6rem;padding:6px 10px}