/* DEEPWORKS — shared site chrome (nav, tokens, intro, cursor, typography).
   Loaded by every page. Page-specific layout (home hero, armory drum/spec,
   leaderboard, updates changelog) lives in that page's own <style> block. */

/* tokens are the game's :root, verbatim. do not diverge. */
:root{
  --void:#0e0f0d; --panel:rgba(20,22,19,0.82); --edge:rgba(255,176,32,0.28);
  --amber:#ffb020; --amber-dim:#8a6320; --bone:#e8e2d4; --danger:#ff4433;
  --ice:#6fd3ff; --volt:#b98cff; --ember:#ff7a2f; --cred:#7dd6a0;
  --display:'Chakra Petch',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --measure:760px; --wide:1280px;
  --glow:#ffb020;                     /* set per selected rarity / tier */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--bone);font-family:var(--mono);min-height:100vh;
  overflow-x:hidden;display:flex;align-items:stretch}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,176,32,.25)}
:focus-visible{outline:1px solid var(--amber);outline-offset:3px}

/* plain block, not flex — main/footer rely on block-level margin:auto
   centering, which flex's cross-axis auto-margin stretch rules break */
#content{flex:1;min-width:0}

/* ---------- page shell ---------- */
main{max-width:var(--wide);margin:0 auto;padding:26px 24px 90px}
main.enter > *{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
main.enter > *:nth-child(2){animation-delay:.06s}
main.enter > *:nth-child(3){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.slotbar{font-size:10px;letter-spacing:.3em;color:var(--amber-dim);text-transform:uppercase;margin-bottom:8px}

/* ---------- text ---------- */
section.col{max-width:var(--measure);margin:0 auto;padding-top:56px}
.kicker{font-family:var(--display);font-size:11px;letter-spacing:.42em;color:var(--amber);margin-bottom:12px}
.rule{height:1px;background:var(--edge);margin-bottom:18px}
p{font-size:13.5px;line-height:1.85;color:#b8b4a8}
p + p{margin-top:14px}
.abrand{font-family:var(--display);font-weight:700;letter-spacing:.14em;color:var(--amber);
  text-shadow:0 0 18px rgba(255,176,32,.45)}

footer{max-width:var(--measure);margin:0 auto;padding:60px 24px 40px;
  font-size:10px;letter-spacing:.24em;color:var(--amber-dim);text-transform:uppercase;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{transition:color .18s}
footer a:hover{color:var(--amber)}

/* ---------- intro (home only — no-op markup on other pages) ---------- */
#intro{position:fixed;inset:0;z-index:9000;background:var(--void);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
#intro.leave{opacity:0;transition:opacity .5s ease;pointer-events:none}
#intro .iword{font-family:var(--display);font-weight:700;color:var(--amber);
  font-size:clamp(24px,6vw,58px);letter-spacing:.5em;opacity:0;transform:translateY(6px);
  text-shadow:0 0 24px rgba(255,176,32,.4);position:relative;z-index:2;white-space:nowrap}
#intro.play .iword{transition:opacity .7s ease .45s,letter-spacing .9s cubic-bezier(.2,.7,.3,1) .45s,
  transform .7s ease .45s;opacity:1;letter-spacing:.2em;transform:translateY(0)}
#intro .h,#intro .v{position:absolute;background:var(--edge)}
#intro .h{left:10%;right:10%;height:1px;transform:scaleX(0)}
#intro .h.top{top:18%;transform-origin:left center}
#intro .h.bottom{bottom:18%;transform-origin:right center}
#intro .v{top:14%;bottom:14%;width:1px;transform:scaleY(0)}
#intro .v.l1{left:6%;transform-origin:top center}
#intro .v.l2{left:26%;transform-origin:bottom center}
#intro .v.r2{right:26%;transform-origin:top center}
#intro .v.r1{right:6%;transform-origin:bottom center}
#intro.play .h,#intro.play .v{transition:transform .6s cubic-bezier(.16,.84,.44,1)}
#intro.play .h.top{transform:scaleX(1);transition-delay:.02s}
#intro.play .h.bottom{transform:scaleX(1);transition-delay:.02s}
#intro.play .v.l1{transform:scaleY(1);transition-delay:.1s}
#intro.play .v.r1{transform:scaleY(1);transition-delay:.1s}
#intro.play .v.l2{transform:scaleY(1);transition-delay:.18s}
#intro.play .v.r2{transform:scaleY(1);transition-delay:.18s}

/* ---------- custom cursor ---------- */
body.dw-cursor{cursor:none}
#cursor{position:fixed;top:0;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--amber);pointer-events:none;z-index:9999;mix-blend-mode:difference;
  opacity:0;transition:width .25s cubic-bezier(.2,.8,.25,1),height .25s cubic-bezier(.2,.8,.25,1),opacity .2s}
#cursor.show{opacity:1}
#cursor.hover{width:30px;height:30px}

/* Trail. Sits BELOW the dot in z-order so the cursor always reads as the head
   of the chain, and carries no blend mode — the dot uses difference to stay
   visible over any surface, but a differenced tail on the amber plates goes
   muddy grey. Flat amber keeps it amber. Sizes and opacities are set per link
   in JS, since they taper along the chain rather than being uniform. */
#ctrail{position:fixed;inset:0;pointer-events:none;z-index:9998;
  opacity:0;transition:opacity .25s}
#ctrail.show{opacity:1}
#ctrail i{position:absolute;top:0;left:0;display:block;border-radius:50%;
  background:var(--amber);will-change:transform}


@media (max-width:860px){
  body{flex-direction:column;min-height:0}
  #rail{position:relative;flex-direction:row;align-items:center;justify-content:space-between;
    height:auto;gap:20px;padding:16px 18px}
  .raillinks{flex-direction:row;gap:22px}
}
@media (max-width:720px){
  .nav{font-size:9.5px;letter-spacing:.1em}
  main{padding:18px 16px 60px}
  section.col{padding-top:44px}
}
@media (prefers-reduced-motion:reduce){
  #ctrail{display:none}
  html{scroll-behavior:auto}
  main.enter > *{animation:none}
  #intro .h,#intro .v,#intro .iword{transition:none!important}
}

/* ============================================================
   v2 chrome — site redesign (direction B). Pages opt in with
   <body class="v2">. Legacy #rail styles above stay until every
   page is migrated, then they get removed in one cleanup pass.
   ============================================================ */
body.v2{display:block}
.bar{position:fixed;inset:0 0 auto;height:76px;z-index:30;display:flex;align-items:center;
  justify-content:space-between;padding:0 clamp(22px,4vw,54px);
  background:rgba(14,15,13,0);border-bottom:1px solid transparent;
  transition:height .28s cubic-bezier(.2,.7,.3,1),background .28s,border-color .28s,backdrop-filter .28s}
.bar.stuck{height:52px;background:rgba(14,15,13,.9);backdrop-filter:blur(9px);border-bottom-color:rgba(255,176,32,.16)}
.brand{display:flex;align-items:center;gap:12px}
.brand .m{display:block;width:17px}
.brand .m i{display:block;height:3px;background:var(--amber);margin-bottom:2px;border-radius:1px}
.brand .m i:nth-child(2){width:76%}
.brand .m i:nth-child(3){width:50%}
.brand b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.19em;color:var(--bone)}
.barlinks{display:flex;gap:clamp(16px,2.4vw,34px)}
.barlinks a{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.16em;
  color:rgba(232,226,212,.46);padding:6px 0;border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s}
.barlinks a:hover,.barlinks a:focus-visible{color:var(--amber);border-bottom-color:var(--amber)}
.barlinks a.here{color:var(--bone);border-bottom-color:var(--amber)}
.band{position:relative;padding:clamp(64px,9vh,110px) clamp(22px,4vw,54px)}
.band>.inner{max-width:1120px;margin:0 auto}
.band.hatch{background:repeating-linear-gradient(135deg,rgba(255,176,32,.038) 0 2px,transparent 2px 15px),#121409;
  border-block:1px solid rgba(255,176,32,.13)}
.band.lit{background:radial-gradient(80% 120% at 50% 0%,rgba(255,176,32,.07),transparent 62%)}
body.v2 h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.4vw,54px);line-height:1.06;letter-spacing:.02em;margin:0 0 14px;color:var(--bone)}
body.v2 h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,38px);line-height:1.14;letter-spacing:.01em;margin:0 0 20px;color:var(--bone)}
body.v2 p{font-size:14px;line-height:1.65;color:rgba(232,226,212,.82);max-width:70ch}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.22em;color:var(--amber-dim);margin:0 0 22px}
.lede{font-size:clamp(15px,1.5vw,17px);color:var(--bone)}
.v2js .reveal>:not(.inner){opacity:0;transform:translateY(14px)}
.v2js .reveal>.inner>*{opacity:0;transform:translateY(14px)}
.v2js .reveal.in>:not(.inner){opacity:1;transform:none;animation:rise .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(.06s*var(--i,0))}
.v2js .reveal.in>.inner>*{opacity:1;transform:none;animation:rise .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(.06s*var(--i,0))}
.spine{position:fixed;left:0;right:0;bottom:0;z-index:30;height:44px;display:flex;align-items:center;
  gap:14px;padding:0 clamp(22px,4vw,54px);background:rgba(14,15,13,.92);backdrop-filter:blur(9px);
  border-top:1px solid rgba(255,176,32,.16);font-family:var(--mono);font-weight:500;font-size:9.5px;
  letter-spacing:.16em;color:rgba(232,226,212,.46)}
.spine .now{color:var(--amber);font-variant-numeric:tabular-nums;min-width:96px;white-space:nowrap}
.spine.term .now{color:var(--danger)}
.ticks{flex:1;display:flex;gap:2px;align-items:center}
.ticks i{flex:1;height:9px;background:rgba(255,176,32,.14);transition:background .18s,height .18s}
.ticks i.on{background:var(--amber)}
.vtabs{display:flex;gap:1px;border:1px solid rgba(255,176,32,.22);width:max-content;background:rgba(255,176,32,.22)}
.vtabs button{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.2em;padding:13px 26px;
  background:var(--void);color:rgba(232,226,212,.46);border:0;cursor:pointer;transition:background .18s,color .18s}
.vtabs button:hover{color:var(--bone)}
.vtabs button.on{background:var(--amber);color:#0b0c09}
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,176,32,.14);border:1px solid rgba(255,176,32,.14)}
.plate{background:var(--void);padding:22px 24px}
.plate small{display:block;font-size:9.5px;letter-spacing:.16em;color:rgba(232,226,212,.46);margin-bottom:9px}
.plate b{font-family:var(--display);font-weight:600;font-size:32px;line-height:1;color:var(--amber);font-variant-numeric:tabular-nums}
.plate em{font-style:normal;font-size:11px;color:rgba(232,226,212,.46);margin-left:8px}
.vchip{display:inline-block;font-size:9.5px;letter-spacing:.1em;border:1px solid rgba(255,176,32,.3);padding:3px 8px;margin:2px 5px 2px 0;color:rgba(232,226,212,.72)}
.vchip.ab{border-style:dashed;border-color:rgba(185,140,255,.5);color:var(--volt)}
.vcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.vcard{border:1px solid rgba(255,176,32,.18);background:rgba(20,22,19,.6);padding:20px 20px 22px}
.vcard b{display:block;font-family:var(--display);font-weight:600;font-size:15px;line-height:1.2;letter-spacing:.03em;margin-bottom:8px;color:var(--bone)}
.vcard p{font-size:11.5px;margin:0;color:rgba(232,226,212,.46);line-height:1.55;max-width:none}
.vcard small{display:block;font-size:9px;letter-spacing:.18em;color:var(--amber-dim);margin-top:12px}
.ladder{display:flex;gap:6px;flex-wrap:wrap}
.tierchip{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;padding:6px 11px;border:1px solid currentColor}
.tierchip.t1{color:#9aa08e}.tierchip.t2{color:var(--cred)}.tierchip.t3{color:var(--ice)}.tierchip.t4{color:var(--volt)}.tierchip.t5{color:var(--amber)}
.vghost{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;color:rgba(232,226,212,.46);
  border-bottom:1px solid rgba(255,176,32,.3);padding-bottom:4px;transition:color .18s}
.vghost:hover{color:var(--amber)}
@media (prefers-reduced-motion:reduce){
  .bar,.ticks i,.vghost{transition:none}
  .reveal>:not(.inner),.reveal>.inner>*,.reveal.in>:not(.inner),.reveal.in>.inner>*{opacity:1;transform:none;animation:none}
}
@media (max-width:820px){
  .plates{grid-template-columns:1fr}
  .vcards{grid-template-columns:1fr 1fr}
  .barlinks{gap:14px}
}