/* Paradigm World page (css for world.html). Decoration and layout only. */

/* (example page) Layout: a header, a row of switches, the world map on the left and a reading panel on the right, stacking on phones. Single dark look to match the Terminus site. */
.world-page{--bg:#05050b;--panel:#0a0b14;--ink:#e3e9ef;--muted:#8fa0b0;--cyan:#65faff;--orange:#ff7a18;--lav:#c6a0ff;--pink:#ff4fa8;--red:#ff3b42;color-scheme:dark;
  --mono:"Courier New",ui-monospace,monospace;--display:"Orbitron","Arial Black",sans-serif}
.world-page{max-width:1240px;margin:28px auto 60px;padding:0 20px;position:relative;z-index:5;color:var(--ink);font:15px/1.55 system-ui,sans-serif}
.world-page *{box-sizing:border-box}
.lede{color:var(--muted);max-width:70ch;margin:0 0 18px}
.bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 14px}
.seg{display:flex;border:1px solid rgba(198,160,255,.45)}
.seg button,.tog,.act{font:700 11px var(--mono);letter-spacing:.14em;color:#cbb6ee;background:rgba(5,7,14,.9);border:0;padding:9px 13px;cursor:pointer}
.seg button+button{border-left:1px solid rgba(198,160,255,.45)}
.seg button[aria-pressed="true"]{background:rgba(255,122,24,.22);color:#fff;text-shadow:0 0 8px rgba(255,122,24,.6)}
.tog{border:1px solid rgba(101,250,255,.4)}
.tog[aria-pressed="true"]{color:#fff;border-color:var(--cyan);box-shadow:0 0 10px rgba(101,250,255,.3)}
.act{border:1px solid rgba(255,122,24,.6);color:#ffd9b0}
.zoom{border-color:#fff;color:#fff;box-shadow:0 0 12px rgba(255,255,255,.2)}
button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}
@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}}
.stage{position:relative;border:1px solid rgba(101,250,255,.5);background-color:#03070b;background-image:linear-gradient(rgba(101,250,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(101,250,255,.07) 1px,transparent 1px);background-size:48px 48px;box-shadow:0 0 30px rgba(255,122,24,.1);overflow:hidden}
svg{display:block;width:100%;height:auto}
.br{position:absolute;width:26px;height:26px;pointer-events:none;z-index:2}
.br.a{top:10px;left:10px;border-top:3px solid #fff;border-left:3px solid #fff}
.br.b{top:10px;right:10px;border-top:3px solid var(--orange);border-right:3px solid var(--orange)}
.br.c{bottom:10px;left:10px;border-bottom:3px solid var(--pink);border-left:3px solid var(--pink)}
.br.d{bottom:10px;right:10px;border-bottom:3px solid var(--cyan);border-right:3px solid var(--cyan)}
.cap{position:absolute;z-index:2;font:700 10px var(--mono);letter-spacing:.14em;pointer-events:none}
.cap.a{top:16px;left:48px;color:#fff}.cap.b{top:16px;right:48px;color:var(--orange)}.cap.c{bottom:16px;left:48px;color:var(--pink)}.cap.d{bottom:16px;right:48px;color:var(--cyan)}
.side{border:1px solid rgba(198,160,255,.35);background:var(--panel);padding:16px;min-width:0}
.side h2{font:800 15px var(--mono);letter-spacing:.18em;color:var(--orange);margin:0 0 8px}
.side .name{font:800 20px var(--display);color:#fff;margin:0 0 4px;letter-spacing:.05em;overflow-wrap:anywhere}
.side .state{font:700 11px var(--mono);letter-spacing:.16em;color:var(--lav);margin:0 0 10px}
.side p{margin:0 0 10px;color:#c3ced8;font-size:14px}
.side .tag{display:inline-block;margin:2px 6px 0 0;padding:3px 8px;border:1px solid rgba(101,250,255,.35);font:700 10px var(--mono);letter-spacing:.12em;color:#bff8ff}
.legend{margin-top:14px;font:700 10px var(--mono);letter-spacing:.12em;color:var(--muted);line-height:2}
.legend i{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:-1px}
.note{margin-top:18px;color:var(--muted);font-size:13.5px;max-width:80ch}
.note b{color:#fff}
/* world pieces */
.pcbody{fill:rgba(10,14,26,.9);stroke:rgba(101,250,255,.5);stroke-width:2.5}
.pcscreen{fill:rgba(3,6,12,.75);stroke:rgba(255,122,24,.45);stroke-width:2}
.spin{animation:spin var(--spin,3.4s) linear infinite;transform-box:fill-box;transform-origin:center}
.spin.r{animation-duration:calc(var(--spin,3.4s)*1.5);animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.rgb{fill:none;stroke-width:3;stroke-dasharray:18 14;animation:flow 2.4s linear infinite}
.trace{fill:none;stroke:rgba(101,250,255,.14);stroke-width:1.6}
.chipbox{fill:rgba(10,16,30,.95);stroke:rgba(101,250,255,.5);stroke-width:1.6}
.glass{fill:rgba(60,90,140,.07);stroke:rgba(255,255,255,.2);stroke-width:1.5}
.wall{stroke:rgba(198,160,255,.45);stroke-width:2.4;stroke-dasharray:14 10}
.wifi{fill:none;stroke:#65faff;stroke-width:2.2;stroke-linecap:round}
.wireless{stroke:#65faff;stroke-width:2.4;fill:none;stroke-dasharray:3 9;stroke-linecap:round;animation:flow 3s linear infinite}
.pkt2{fill:#e6feff;filter:drop-shadow(0 0 5px #65faff)}
.board{fill:rgba(6,30,34,.88);stroke:rgba(101,250,255,.45);stroke-width:2}
.iopanel{fill:rgba(14,18,34,.9);stroke:rgba(255,122,24,.35);stroke-width:2}
.screw{fill:#0a0f1a;stroke:rgba(255,255,255,.35);stroke-width:1.4}
.trace2{fill:none;stroke:rgba(101,250,255,.3);stroke-width:2.2;stroke-linejoin:round}
.slot{fill:rgba(255,122,24,.06);stroke:rgba(255,122,24,.35);stroke-width:1.2;stroke-dasharray:4 3}
.gpuline{opacity:var(--gpu,.6)}
#pc{transition:filter .6s}
#pc.night{filter:brightness(.5) saturate(.8)}
.rng{display:flex;align-items:center;gap:8px;font:700 11px var(--mono);letter-spacing:.12em;color:#cbb6ee}
.rng input{accent-color:#ff7a18;width:130px}
.stagetxt{font:700 11px var(--mono);letter-spacing:.1em;color:#ffd9b0;min-width:0}
.burst{fill:none;stroke:#fff;stroke-width:2.4;transform-box:fill-box;transform-origin:center;animation:burst 1.6s ease-out forwards}
.bursttxt{font:800 11px "Courier New",monospace;letter-spacing:.2em;fill:#fff;text-anchor:middle;text-shadow:0 0 10px #ff7a18;animation:bursttxt 2.4s ease-out forwards;pointer-events:none}
@keyframes burst{0%{transform:scale(.4);opacity:1}100%{transform:scale(3.2);opacity:0}}
@keyframes bursttxt{0%{opacity:0}20%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
.win{fill:rgba(8,12,30,.92);stroke:rgba(101,250,255,.5);stroke-width:3}
.winbar{stroke:rgba(101,250,255,.35);stroke-width:3}
.winsill{fill:rgba(10,14,26,.95);stroke:rgba(101,250,255,.4);stroke-width:2}
.door{fill:rgba(10,14,26,.95);stroke:rgba(255,196,77,.5);stroke-width:2.4}
.bolt{fill:none;stroke:#fff;stroke-width:3.2;stroke-linejoin:miter;filter:drop-shadow(0 0 8px #cfe0ff) drop-shadow(0 0 16px #9fb8ff);opacity:0}
.led{animation:ledblink 1.3s steps(1,end) infinite}
@keyframes ledblink{0%,45%{opacity:1}50%,95%{opacity:.15}}
.tpkt{fill:#e6feff;filter:drop-shadow(0 0 4px #65faff);opacity:.5}
[data-level="1"] .tpkt{opacity:1}
[data-level="1"] .trace2{stroke:rgba(101,250,255,.55)}
.fragg text{font:800 13px "Courier New",monospace;fill:#eafcff;text-anchor:middle;text-shadow:0 0 6px #65faff;pointer-events:none}
.fragg text.o{fill:#ffc79a}
.fragsay{font:800 15px "Courier New",monospace;letter-spacing:.2em;fill:#fff;text-anchor:middle;opacity:0;transition:opacity .4s;pointer-events:none;text-shadow:0 0 8px #fff,0 0 16px #65faff,0 0 26px #ff7a18}
.gamebox{pointer-events:none;fill:rgba(255,79,168,.05);stroke:rgba(255,79,168,.55);stroke-width:2;stroke-dasharray:6 6}
.gametxt{font:800 17px "Courier New",monospace;letter-spacing:.3em;fill:#ff9ccf;text-anchor:middle;text-shadow:0 0 10px #ff4fa8,0 0 22px rgba(101,250,255,.7)}
.crt{animation:crt 3.2s steps(1,end) infinite}
@keyframes crt{0%,88%{opacity:1}90%{opacity:.6}92%{opacity:1}95%{opacity:.75}100%{opacity:1}}
.star{fill:#fff;animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:1}}
.neon{font:800 15px "Courier New",monospace;letter-spacing:.2em;text-anchor:middle;fill:#ffd0ea;text-shadow:0 0 8px #ff4fa8,0 0 18px #ff4fa8;animation:neon 4s steps(1,end) infinite}
@keyframes neon{0%,60%,64%,100%{opacity:1}61%{opacity:.3}62%{opacity:.9}63%{opacity:.4}}
.lampglow{opacity:.12;transition:opacity .6s}
.isnight .lampglow{opacity:.4}
.desk{fill:rgba(40,26,18,.9);stroke:rgba(255,196,77,.4);stroke-width:2}
.hand{stroke:#fff;stroke-linecap:round}
.bit{font:800 12px "Courier New",monospace;pointer-events:none;text-anchor:middle;paint-order:stroke}
.bit.b0{fill:#bff8ff;filter:drop-shadow(0 0 3px #65faff)}
.bit.b1{fill:#fff;filter:drop-shadow(0 0 3px #ffffff)}
.bit.b2{fill:#ffc79a;filter:drop-shadow(0 0 3px #ff7a18)}
.bit.drift{opacity:0;animation:driftbit 6s ease-in-out infinite}
@keyframes driftbit{0%{opacity:0;transform:translate(0,0)}15%{opacity:.85}80%{opacity:.5}100%{opacity:0;transform:translate(var(--dx,12px),var(--dy,-30px))}}
.bay{fill:rgba(101,250,255,.08);stroke:rgba(101,250,255,.35);stroke-width:1.4}
.fans circle{fill:none;stroke:rgba(101,250,255,.3);stroke-width:2}
.grid{stroke:rgba(101,250,255,.07);stroke-width:1}
.path{stroke:rgba(255,122,24,.45);stroke-width:2;fill:none;stroke-dasharray:7 8;animation:flow 4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-30}}
.fog{cursor:pointer}
.fog .cloud{fill:url(#fogGrad);animation:fogpulse 7s ease-in-out infinite}
.fog text.q{font:800 30px "Courier New",monospace;fill:#efe3ff;text-anchor:middle;pointer-events:none;text-shadow:0 0 10px #c6a0ff;opacity:.85}
.fog text.n{font:700 11px "Courier New",monospace;fill:#cbb6ee;text-anchor:middle;pointer-events:none;letter-spacing:.14em}
.fog:hover .cloud{opacity:1}
@keyframes fogpulse{0%,100%{opacity:.5}50%{opacity:.95}}
.fog.reveal .cloud{animation:clear 1.4s ease-out forwards}
@keyframes clear{to{opacity:0;transform:scale(1.5)}}
.storm{fill:url(#stormGrad);animation:fogpulse 5s ease-in-out infinite}
.edgetxt{font:700 13px "Courier New",monospace;letter-spacing:.3em;fill:#8fa0b0;text-anchor:middle}
.shield{fill:rgba(255,122,24,.06);stroke:#eaffff;stroke-width:2.2;stroke-linejoin:miter;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #65faff)}
.tpath{stroke:rgba(255,122,24,.6);stroke-width:1.4;fill:none;stroke-dasharray:4 5;animation:flow 3s linear infinite}
.pillar{cursor:pointer}
.pillar .body{stroke-width:1.6;fill:rgba(5,7,14,.95)}
.pillar:hover image,.pillar:focus image{filter:drop-shadow(0 0 6px #fff) brightness(1.2)}
.pillar:focus{outline:none}
.pbox{fill:none;stroke-width:1;opacity:0;transition:opacity .4s}
.zoomed .pbox{opacity:.85}
.plabel.sub{fill:#c3ced8;font-weight:400}
.plabel{font:700 11px "Courier New",monospace;letter-spacing:.1em;fill:#fff;text-anchor:middle;pointer-events:none;transition:opacity .4s}
.world .plabel{opacity:0}
.zoomed .plabel{opacity:1}
.wlabel{font:800 14px "Courier New",monospace;letter-spacing:.2em;fill:#ffd9b0;text-anchor:middle;pointer-events:none;transition:opacity .4s}
.zoomed .wlabel{opacity:0}
.chip{font:700 10px "Courier New",monospace;letter-spacing:.1em;text-anchor:middle;fill:#4dff9a;pointer-events:none}
.mark13{fill:rgba(255,122,24,.4);stroke:#ff7a18;stroke-width:1.8;filter:drop-shadow(0 0 6px #ff7a18);animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
.proj{fill:none;stroke:rgba(101,250,255,.6);stroke-width:1.6;stroke-dasharray:3 5}
.projtxt{font:700 9.5px "Courier New",monospace;letter-spacing:.08em;fill:#bff8ff;text-anchor:middle;pointer-events:none}
.pulse{fill:#ffd3ea;filter:drop-shadow(0 0 4px #ff4fa8)}
.hide{display:none}
@media(prefers-reduced-motion:reduce){.path,.tpath,.fog .cloud,.storm,.mark13{animation:none}}

/* ---- the page's own title: blue-black letters, outline cyan on the left, white in the middle, orange on the right ---- */
.world-page h1{position:relative;display:inline-block;margin:0 0 10px;font:900 clamp(34px,6vw,64px)/.95 "Orbitron","Arial Black",sans-serif;letter-spacing:.04em;color:#030a1c;-webkit-text-stroke:2px #65faff;text-shadow:-4px 0 14px rgba(101,250,255,.6),4px 0 14px rgba(255,122,24,.45)}
.world-page h1::before,.world-page h1::after{content:"THE PARADIGM WORLD";position:absolute;inset:0;color:#030a1c}
.world-page h1::before{-webkit-text-stroke:2px #fff;clip-path:polygon(30% 0,63% 0,63% 100%,30% 100%);text-shadow:0 0 12px rgba(255,255,255,.45)}
.world-page h1::after{-webkit-text-stroke:2px #ff7a18;clip-path:polygon(63% 0,100% 0,100% 100%,63% 100%)}
.world-page .eyebrow{margin:0 0 12px;color:#ff7a18;font-size:11px;letter-spacing:.24em;font-weight:700}
.world-page svg{max-width:100%}
@media(prefers-reduced-motion:reduce){.world-page *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ---- a bigger map: it uses the whole width, and the reading panel moves underneath ---- */
.world-page{max-width:min(1540px,95vw);padding:0 12px}
.layout{grid-template-columns:minmax(0,1fr)}
.stage svg{max-height:84vh}
.side{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:32px;align-items:start}
.side>*{grid-column:1}
.side .legend{grid-column:2;grid-row:1 / span 6;margin-top:0}
@media(max-width:900px){.side{display:block}.side .legend{margin-top:14px}}

/* the big squares around the buildings are gone: the names stay, and the buildings are still clickable through an invisible hit area */
.pbox{fill:transparent;stroke:none}
.plabel{paint-order:stroke;stroke:rgba(3,7,11,.92);stroke-width:1.1px;stroke-linejoin:round}

/* labels: smaller, tucked right under each building, on a dark background */
.lblbg{fill:rgba(3,7,11,.86);stroke:rgba(101,250,255,.28);stroke-width:.4;opacity:0;transition:opacity .4s;pointer-events:none}
.zoomed .lblbg{opacity:1}
.plabel{stroke-width:.5px}

/* the world's name, on the board above the graphics card */
.pname-txt{font:900 40px "Arial Black",Impact,"Helvetica Neue",Arial,sans-serif;text-anchor:middle;pointer-events:none}
.pname-main{fill:#fff;stroke:#ff7a18;stroke-width:.8;paint-order:stroke;filter:drop-shadow(0 0 6px #ff7a18) drop-shadow(0 0 14px rgba(255,122,24,.8))}
.pname-edge{filter:drop-shadow(0 0 6px #ff7a18)}
@media (prefers-reduced-motion:no-preference){.pname-edge{animation:pnamePulse 2.4s ease-in-out infinite}.pname-main{animation:pnameFlick 5.5s steps(1) infinite}}
@keyframes pnamePulse{0%,100%{filter:drop-shadow(0 0 4px #ff7a18)}50%{filter:drop-shadow(0 0 14px #ff7a18) drop-shadow(0 0 26px rgba(255,122,24,.7))}}
@keyframes pnameFlick{0%,92%,96%,100%{opacity:1}94%{opacity:.55}98%{opacity:.8}}