/* ============================================================
   monopole.ai // Dirac Station — Field Rig 01
   neubrutalism + chrome-metallic + warm-inviting
   ============================================================ */

:root{
  --steel:#E8E4DD;        /* polished steel — bg */
  --pewter:#C4BEB3;       /* brushed pewter */
  --pewter-lo:#B8B2A6;
  --pewter-hi:#D2CCC1;
  --iron:#1A1714;         /* iron black — ink */
  --amber:#E0A435;        /* honey amber — hero accent */
  --red:#C0392B;          /* cherry signal red */
  --coil:#7A8C99;         /* cold coil blue-grey */
  --bone:#F4F1EB;         /* bone highlight */
  --chrome:linear-gradient(160deg,#D2CCC1,#B8B2A6);
  --chrome-light:linear-gradient(160deg,#F4F1EB,#D2CCC1);
  --shadow:6px 6px 0 var(--iron);
  --shadow-sm:3px 3px 0 var(--iron);
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--steel);
  background-image:
    repeating-linear-gradient(0deg, rgba(26,23,20,.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(26,23,20,.018) 0 1px, transparent 1px 4px);
  color:var(--iron);
  overflow-x:hidden;
  letter-spacing:.01em;
}

/* ---------- background field-line texture ---------- */
.bg-field{
  position:fixed; inset:0; z-index:0; opacity:.10; pointer-events:none;
}
.bg-field svg{width:100%;height:100%;display:block;}

/* ============================================================
   HUD LAYER
   ============================================================ */
.hud{position:fixed; inset:0; z-index:100; pointer-events:none;}
.hud .panel, .hud .pad{pointer-events:auto;}

.panel{
  background:var(--chrome);
  border:3px solid var(--iron);
  box-shadow:var(--shadow);
  position:absolute;
  padding:.7rem .9rem;
}
.panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--bone);
}
.panel::after{
  content:""; position:absolute; top:0; left:0; bottom:0; width:2px;
  background:var(--bone);
}

/* --- top-left station plate --- */
.hud-plate{top:14px; left:14px; min-width:212px;}
.plate-mark{display:flex; align-items:center; gap:.5rem;}
.needle{
  font-size:1.3rem; color:var(--amber); line-height:1; display:inline-block;
  text-shadow:0 0 8px rgba(224,164,53,.55);
  transition:transform .42s cubic-bezier(.2,.9,.3,1);
  transform-origin:50% 50%;
}
.plate-name{
  font-family:'Archivo Black',sans-serif; font-size:1.05rem; letter-spacing:.02em;
}
.plate-sub{
  font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.06em;
  margin-top:.3rem; color:#4a443d;
}

/* --- top-right confidence gauge --- */
.hud-gauge{top:14px; right:14px; width:236px;}
.gauge-label{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.6rem;
  letter-spacing:.13em; text-transform:uppercase; color:#4a443d; margin-bottom:.4rem;
}
.gauge-track{
  height:18px; background:var(--bone); border:3px solid var(--iron);
  position:relative; overflow:hidden;
}
.gauge-fill{
  height:100%; width:0%; background:var(--amber);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 6px, transparent 6px 12px);
  transition:width .9s cubic-bezier(.4,0,.2,1);
}
.gauge-fill.clunk{transition:width .28s cubic-bezier(.7,-0.3,.9,.2);}
.gauge-readout{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.82rem;
  margin-top:.35rem; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:.5rem;
}
.gauge-state{
  margin-left:auto; font-size:.55rem; letter-spacing:.1em; background:var(--iron); color:var(--steel);
  padding:.12rem .35rem;
}
.gauge-state.recal{background:var(--red); color:var(--bone);}

/* --- bottom-left field log --- */
.hud-log{bottom:14px; left:14px; width:284px;}
.log-title{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.6rem;
  letter-spacing:.13em; color:#4a443d; margin-bottom:.35rem;
}
.log-lines{
  background:var(--bone); border:3px solid var(--iron); padding:.4rem .5rem;
  font-family:'JetBrains Mono',monospace; font-size:.62rem; line-height:1.5;
  height:5.6rem; overflow:hidden; box-shadow:inset 2px 2px 0 rgba(26,23,20,.12);
}
.log-line{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.log-line.fresh{animation:logIn .4s ease;}
.log-line.lost{color:var(--red); font-weight:700;}
@keyframes logIn{from{opacity:0; transform:translateX(-8px);} to{opacity:1; transform:none;}}

/* --- bottom-right nav pads --- */
.hud-nav{
  position:absolute; bottom:14px; right:14px; display:flex; gap:.5rem; align-items:stretch;
}
.pad{
  pointer-events:auto;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.66rem; letter-spacing:.06em;
  background:var(--chrome); color:var(--iron);
  border:4px solid var(--iron); box-shadow:var(--shadow);
  padding:.55rem .7rem; cursor:pointer; position:relative; text-transform:uppercase;
}
.pad::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--bone);}
.pad:hover{background:linear-gradient(160deg,#E8B85a,#D89A30); color:var(--iron);}
.pad:active{transform:translate(4px,4px); box-shadow:2px 2px 0 var(--iron);}
.pad-static{
  background:var(--iron); color:var(--amber); cursor:default;
  font-family:'JetBrains Mono',monospace; display:flex; align-items:center;
  box-shadow:var(--shadow);
}
.pad-static::before{display:none;}
.pad-static:hover{background:var(--iron);}
.pad-static:active{transform:none; box-shadow:var(--shadow);}

/* ============================================================
   FULL-STAGE FLIP OVERLAY
   ============================================================ */
.flip-overlay{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  perspective:1600px; opacity:0; visibility:hidden;
}
.flip-overlay.on{opacity:1; visibility:visible;}
.flip-card{
  width:min(560px,80vw); height:min(380px,52vh);
  transform-style:preserve-3d; transform:rotateX(90deg);
}
.flip-card.flip-go{
  animation:stageFlip .72s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes stageFlip{
  0%{transform:rotateX(90deg);}
  45%{transform:rotateX(0deg);}
  55%{transform:rotateX(0deg);}
  100%{transform:rotateX(-90deg);}
}
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden;
  background:var(--iron); border:4px solid var(--iron);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  box-shadow:8px 8px 0 rgba(26,23,20,.4);
}
.flip-back svg{filter:drop-shadow(0 0 6px rgba(122,140,153,.35));}
.flip-cap{
  font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.14em;
  color:var(--coil); text-transform:uppercase;
}

/* ============================================================
   CENTRAL STAGES
   ============================================================ */
.stages{position:relative; z-index:1; scroll-snap-type:y proximity;}
.stage{
  min-height:100vh; width:100%; position:relative;
  padding:7rem clamp(1.5rem,6vw,7rem) 8rem;
  scroll-snap-align:start;
  display:flex; flex-wrap:wrap; align-content:center; gap:2rem;
  overflow:hidden;
}
.stage:nth-child(even){background:linear-gradient(180deg, rgba(196,190,179,.18), transparent 40%, rgba(196,190,179,.14));}

/* ---- shared card recipe ---- */
.card{
  background:var(--chrome);
  border:3px solid var(--iron);
  box-shadow:var(--shadow);
  padding:1.6rem 1.8rem;
  position:relative;
}
.card::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--bone);}
.card::after{content:""; position:absolute; top:0; left:0; bottom:0; width:2px; background:var(--bone);}
.card.tilt-l{transform:rotate(-1.5deg);}
.card.tilt-r{transform:rotate(1.5deg);}

.rivets{position:absolute; inset:0; pointer-events:none;}
.rivets i{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #F4F1EB, #8b8579 75%);
  border:1.5px solid var(--iron);
}
.rivets i:nth-child(1){top:8px; left:8px;}
.rivets i:nth-child(2){top:8px; right:8px;}
.rivets i:nth-child(3){bottom:8px; left:8px;}
.rivets i:nth-child(4){bottom:8px; right:8px;}

/* ---- typographic primitives ---- */
.card-kicker{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:#4a443d; margin-bottom:1rem;
}
.card-kicker.small{font-size:.58rem; margin-bottom:.5rem;}
.giant{
  font-family:'Archivo Black',sans-serif; font-weight:400;
  font-size:clamp(3.5rem,11vw,12rem); line-height:.92; letter-spacing:-.02em;
  text-transform:uppercase; margin:.2rem 0 1.4rem;
}
.big{
  font-family:'Archivo Black',sans-serif; font-weight:400;
  font-size:clamp(2.6rem,7vw,6.2rem); line-height:.94; letter-spacing:-.02em;
  text-transform:uppercase; margin:.2rem 0 1.1rem;
}
.big.center,.big.white{text-align:left;}
.big.center{text-align:center;}
.amber{color:var(--amber); text-shadow:1px 1px 0 var(--iron);}
.white{color:var(--bone);}
.red{color:var(--red); font-weight:700;}

.deck{
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:clamp(1.05rem,1.4vw,1.2rem);
  line-height:1.55; max-width:62ch; color:#2c2823;
}
.deck.small{font-size:clamp(.95rem,1.2vw,1.05rem); max-width:54ch;}
.deck.center{text-align:center; margin:1.2rem auto 0;}
.deck.white{color:#e6e2da;}
.deck em{color:var(--iron); font-style:normal; border-bottom:2px solid var(--amber);}
.deck.white em{color:var(--bone); border-color:var(--amber);}

.mono{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; font-size:.78rem; line-height:1.6; color:#3a3530;}
.mono.small{font-size:.66rem;}
.mono.tiny{font-size:.6rem;}
.mono.center{text-align:center;}
.mono em{color:var(--iron); font-style:normal; border-bottom:2px solid var(--amber);}
.mono .amber{text-shadow:none;}

/* ---- evidence stamps / tags ---- */
.stage-tag,.field-stamp{
  position:absolute; font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--bone); color:var(--iron);
  border:3px solid var(--iron); padding:.3rem .6rem; box-shadow:var(--shadow-sm);
}
.tag-rot{transform:rotate(-4deg);}
.stage-tag{top:5.4rem; right:clamp(1.5rem,6vw,7rem);}
#stage-2 .stage-tag,#stage-4 .stage-tag{transform:rotate(3deg);}

/* ============================================================
   STAGE 1 — THE PREDICTION
   ============================================================ */
.card-quote{flex:1 1 640px; max-width:860px; padding:2.2rem 2.4rem;}
.pull{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.3rem,2.4vw,2rem);
  line-height:1.3; max-width:30ch; margin:0 0 1.4rem; color:var(--iron);
  border-left:6px solid var(--amber); padding-left:1.1rem;
}
.pull cite{display:block; margin-top:.7rem; font-size:.85rem; font-weight:500; font-style:normal; color:#4a443d;}
.card-mini{
  align-self:flex-end; background:var(--pewter); padding:1.1rem 1.3rem;
}
.mini-a{margin-bottom:2rem;}

/* ============================================================
   STAGE 2 — WHY IT SHOULD EXIST
   ============================================================ */
.card-half{flex:1 1 420px; max-width:560px; align-self:flex-start;}
.card-empty{
  flex:1 1 280px; max-width:380px; align-self:center;
  background:repeating-linear-gradient(135deg, var(--steel) 0 12px, #ddd9d1 12px 24px);
  border-style:dashed; border-width:3px; box-shadow:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem;
  min-height:240px; text-align:center;
}
.card-empty::before,.card-empty::after{display:none;}
.empty-label{font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.12em; color:#7a746a; text-transform:uppercase;}
.empty-glyph{font-size:3.2rem; color:#b5afa3;}
.empty-note{color:#8a8378;}
.card-dipole{
  flex:1 1 240px; max-width:300px; align-self:flex-end; text-align:center;
  background:var(--chrome-light);
}
.dipole-svg{margin:.4rem auto .6rem; display:block; overflow:visible;}
.stamp-x{
  font-family:'Archivo Black',sans-serif; font-size:64px; fill:var(--red);
  text-anchor:middle; opacity:.85;
}

/* ============================================================
   STAGE 3 — THE HUNT
   ============================================================ */
#stage-3{flex-direction:column; align-content:flex-start; justify-content:center;}
.hunt-head{max-width:680px; margin-bottom:.5rem;}
.hunt-row{
  display:flex; gap:1.4rem; width:100%; padding:1rem .2rem 1.5rem;
  overflow-x:auto; scroll-snap-type:x proximity;
}
.detector{
  flex:0 0 230px; height:300px; perspective:1100px; scroll-snap-align:center;
}
.detector:nth-child(odd){transform:rotate(-1.5deg);}
.detector:nth-child(even){transform:rotate(1.5deg);}
.det-inner{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.5,0,.2,1);
}
.detector:hover .det-inner,.detector:focus .det-inner,.detector.flipped .det-inner{transform:rotateY(180deg);}
.det-face{
  position:absolute; inset:0; backface-visibility:hidden;
  border:3px solid var(--iron); box-shadow:var(--shadow);
  padding:1.1rem 1.2rem; display:flex; flex-direction:column;
}
.det-face::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--bone);}
.det-front{
  background:var(--chrome); align-items:center; justify-content:center; gap:1rem;
}
.iso{width:128px; height:128px;}
.det-name{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; text-align:center;
}
.det-back{
  background:linear-gradient(160deg,#F4F1EB,#D9D4CB);
  transform:rotateY(180deg); justify-content:flex-start; gap:.55rem;
}
.det-found{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.6rem; letter-spacing:.18em;
  background:var(--red); color:var(--bone); align-self:flex-start; padding:.18rem .4rem; text-transform:uppercase;
}
.det-back p{font-size:.78rem; line-height:1.42; color:#2c2823;}
.det-back em{font-style:normal; border-bottom:2px solid var(--amber);}

/* ============================================================
   STAGE 4 — THE MATH
   ============================================================ */
#stage-4{flex-direction:column; align-content:flex-start; justify-content:center;}
.lattice{position:absolute; inset:0; z-index:0; opacity:.08; pointer-events:none;}
.lattice svg{width:100%; height:100%;}
#stage-4 .stage-tag,#stage-4 .hunt-head,#stage-4 .card{position:relative; z-index:1;}
.math-head{max-width:640px;}
.card-plaque{
  flex:0 0 auto; max-width:640px; margin-top:1rem;
  background:linear-gradient(150deg,#E8C870,#C99A2E 55%,#B5862a);
  padding:2rem 2.2rem;
}
.card-plaque::before{background:rgba(255,255,255,.5);}
.plaque-label{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:#4a3a14; margin-bottom:1rem;
}
.equation{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:clamp(2.2rem,5vw,3.4rem);
  color:var(--iron); display:flex; align-items:center; gap:.4rem; margin:.5rem 0 1.2rem;
}
.frac{display:inline-flex; flex-direction:column; align-items:center; line-height:1;}
.frac .num{padding:0 .4rem .12rem;}
.frac .den{padding:.12rem .4rem 0; border-top:3px solid var(--iron); width:100%; text-align:center;}
.plaque-note{font-size:.78rem; color:#3a3010; max-width:56ch; line-height:1.55;}
.plaque-note em{border-color:var(--iron);}
.mini-b{align-self:flex-start; margin-top:1.4rem; background:var(--pewter);}
.mini-b .amber{text-shadow:none; font-weight:700;}

/* ============================================================
   STAGE 5 — THE FIELD
   ============================================================ */
.stage-field{
  background:var(--steel) !important; align-content:center; padding-top:7rem;
}
#fieldCanvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; cursor:crosshair;
}
.field-overlay{position:relative; z-index:1; max-width:760px; pointer-events:none;}
.field-overlay .big{
  -webkit-text-stroke:2px var(--iron);
  paint-order:stroke fill;
}
.field-overlay .big.white{color:var(--steel);}
.field-stamp{
  position:relative; display:inline-block; margin-top:1.4rem; background:var(--iron); color:var(--bone);
}
.flicker{color:var(--red); animation:flick 1.6s steps(1) infinite;}
@keyframes flick{0%,42%,46%,72%,100%{opacity:1;}44%,73%{opacity:.15;}}

/* ============================================================
   STAGE 6 — STILL LOOKING
   ============================================================ */
.stage-close{align-content:center; justify-content:center;
  background:linear-gradient(180deg, var(--steel), #ddd9d1) !important;}
.card-close{
  flex:0 0 auto; max-width:640px; text-align:center; padding:2.6rem 2.6rem 2rem;
  background:var(--chrome-light);
}
.card-close .card-kicker{text-align:center;}
.close-needle{
  font-size:clamp(3rem,7vw,5rem); color:var(--amber); line-height:1; margin:.4rem 0 1rem;
  text-shadow:0 0 16px rgba(224,164,53,.5);
  animation:hover-pole 5s ease-in-out infinite;
}
@keyframes hover-pole{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-6px) rotate(2deg);}}
.red-underline{
  display:block; height:7px; width:62%; margin:.5rem auto 0; background:var(--red);
  box-shadow:3px 3px 0 var(--iron);
}
.close-mono{margin-top:1.6rem; font-size:.74rem;}
.close-foot{
  margin-top:1.8rem; font-size:.6rem; letter-spacing:.08em; color:#7a746a;
  border-top:2px solid #c4beb3; padding-top:1rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .stage{padding:9rem 1.2rem 11rem;}
  .hud-plate{min-width:0; padding:.5rem .6rem;}
  .plate-name{font-size:.85rem;}
  .plate-sub{font-size:.5rem;}
  .hud-gauge{width:170px; padding:.5rem .6rem;}
  .gauge-label{font-size:.5rem; letter-spacing:.08em;}
  .gauge-readout{font-size:.7rem;}
  .gauge-state{font-size:.45rem;}
  .hud-log{width:200px; padding:.5rem .6rem;}
  .log-lines{font-size:.52rem; height:4.6rem;}
  .hud-nav{flex-direction:column; gap:.35rem; bottom:10px; right:10px;}
  .pad{font-size:.55rem; padding:.4rem .5rem; border-width:3px;}
  .stage-tag{top:8.4rem;}
  .card{padding:1.2rem 1.3rem;}
  .card.tilt-l,.card.tilt-r{transform:rotate(0);}
  .detector{flex:0 0 200px; height:280px;}
}
@media (max-width:560px){
  .hud-gauge{width:140px;}
  .hud-log{display:none;}
  .giant{font-size:clamp(2.8rem,16vw,5rem);}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .needle,.det-inner,.gauge-fill,.close-needle,.flicker,.log-line.fresh{transition:none !important; animation:none !important;}
  .flip-card.flip-go{animation:fadeFlip .4s ease forwards;}
  @keyframes fadeFlip{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
}