/* PALANTIR INU $PI - official stylesheet - made in notepad - do not refactor */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive, sans-serif;
  color: #eaffef;
  background-color: #000a06;
  background-image: url('/assets/pi5.jpg');
  background-size: 420px auto;
  background-repeat: repeat;
  background-attachment: fixed;
  overflow-x: hidden;
  cursor: crosshair;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,255,90,.10) 0 2px, rgba(0,0,0,.55) 2px 4px);
  pointer-events: none;
  z-index: 2;
  animation: scanroll 8s linear infinite;
}
@keyframes scanroll { from { background-position: 0 0; } to { background-position: 0 400px; } }

#page { position: relative; z-index: 3; }

a { color: #00ffea; }
a:visited { color: #ff00d0; }
a:hover { color: #ffff00; background: #ff0044; }

code {
  font-family: "Courier New", monospace;
  background: #001a0c;
  color: #00ff66;
  padding: 2px 8px;
  border: 2px outset #00ff66;
  word-break: break-all;
}

/* ---------- text effects ---------- */
.rainbow {
  background: linear-gradient(90deg,#ff0000,#ff8a00,#ffee00,#00ff2f,#00fff2,#2a5bff,#c400ff,#ff0000);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowmove 3s linear infinite;
  text-shadow: none;
  filter: drop-shadow(2px 2px 0 #000);
}
@keyframes rainbowmove { from { background-position: 0% 50%; } to { background-position: 400% 50%; } }

.blink { animation: blink 0.7s steps(1) infinite; }
.blink2 { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.flash { animation: flashbg 0.5s steps(1) infinite; font-weight: bold; }
@keyframes flashbg {
  0% { background: #ff0000; color: #ffff00; }
  50% { background: #ffff00; color: #ff0000; }
}

.wobble { animation: wobble 1.6s ease-in-out infinite; display: inline-block; }
@keyframes wobble {
  0%,100% { transform: rotate(-6deg) scale(1); }
  50% { transform: rotate(6deg) scale(1.14); }
}

.hl { color: #ffee00; text-shadow: 2px 2px 0 #ff0044, 0 0 14px #ffee00; }

/* ---------- gate ---------- */
#gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(0,255,120,.25), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(0,90,255,.30), transparent 60%),
    url('/assets/pi3.jpg');
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}
#gate.gone { display: none; }
.gatebox {
  background: rgba(0,0,0,.82);
  border: 6px ridge #00ff66;
  padding: 22px 18px;
  max-width: 720px;
  box-shadow: 0 0 60px #00ff66;
}
.gwarn { color: #ff2b2b; font-size: 20px; font-weight: bold; letter-spacing: 1px; }
.gatecoin { width: 150px; height: 150px; border-radius: 50%; animation: spin 3s linear infinite; margin: 10px auto; display: block; }
.gatetitle { font-family: Impact, "Arial Black", sans-serif; font-size: clamp(34px,9vw,74px); margin: 6px 0; letter-spacing: 2px; }
.gsub { font-size: 13px; color: #baffd2; margin-bottom: 16px; line-height: 1.5; }
.gsmall { font-size: 11px; color: #7fe6a4; margin-top: 12px; }

/* ---------- buttons ---------- */
.bigbtn {
  display: inline-block;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(15px,2.4vw,24px);
  letter-spacing: 1px;
  padding: 14px 20px;
  margin: 6px;
  color: #000;
  background: linear-gradient(#fffb00,#ff9d00);
  border: 5px outset #fff200;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 1px 1px 0 #fff;
  animation: btnpulse .9s ease-in-out infinite alternate;
}
.bigbtn:hover { background: linear-gradient(#00ff88,#00c2ff); color: #001; transform: scale(1.06) rotate(-1.5deg); }
@keyframes btnpulse { from { box-shadow: 0 0 0 #ff0; } to { box-shadow: 0 0 28px #ff0, 0 0 60px #f0f; } }
.bigbtn.xbtn { background: linear-gradient(#00e5ff,#0044ff); color: #fff; border-color: #00e5ff; text-shadow: 2px 2px 0 #000; }

.minibtn {
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 10px;
  background: linear-gradient(#dfffe9,#7bffb0);
  color: #002d11;
  border: 3px outset #00ff66;
  cursor: pointer;
}
.minibtn:hover { background: #ff00c8; color: #fff; }

/* ---------- ticker bar ---------- */
#tickerbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 900;
  background: #000;
  border-bottom: 3px solid #00ff66;
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: #00ff66;
  white-space: nowrap;
  overflow: hidden;
  height: 24px;
  line-height: 24px;
}
#tickertext { display: inline-block; padding-left: 100%; animation: tickmove 26s linear infinite; }
@keyframes tickmove { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.up { color: #00ff66; } .down { color: #ff3b3b; }

/* ---------- music dock ---------- */
#musicdock {
  position: fixed;
  left: 8px; bottom: 8px;
  z-index: 950;
  background: #06170d;
  border: 4px ridge #00ff66;
  padding: 8px 10px;
  font-size: 12px;
  color: #b9ffd2;
  box-shadow: 0 0 22px rgba(0,255,102,.5);
  max-width: 260px;
}
.mdrow { display: flex; align-items: center; gap: 6px; margin: 3px 0; flex-wrap: wrap; }
#eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
#eq i { width: 4px; background: linear-gradient(#0f0,#ff0); display: block; }

#lasertoggle {
  position: fixed; right: 10px; bottom: 10px; z-index: 950;
  font-size: 34px; cursor: pointer;
  filter: drop-shadow(0 0 10px #f00);
  animation: eyepulse 1.4s ease-in-out infinite;
  user-select: none;
}
@keyframes eyepulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* ---------- marquee ---------- */
marquee {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  padding: 6px 0;
}
#topmarq {
  margin-top: 24px;
  background: #ff0044;
  color: #ffff00;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
  text-shadow: 2px 2px 0 #000;
}

/* ---------- hero ---------- */
#hero { position: relative; overflow: hidden; padding: 10px 8px 0; text-align: center; }
.herovid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .35;
  filter: hue-rotate(0deg) saturate(1.6);
  animation: huespin 12s linear infinite;
}
@keyframes huespin { to { filter: hue-rotate(360deg) saturate(1.6); } }
.starfield {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 140px 90px, #0ff, transparent),
    radial-gradient(1px 1px at 260px 40px, #ff0, transparent),
    radial-gradient(2px 2px at 340px 160px, #f0f, transparent);
  background-size: 400px 220px;
  animation: starmove 6s linear infinite;
  opacity: .8;
}
@keyframes starmove { to { background-position: 400px 220px; } }

.herowrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 0 8px;
}
.spincoin {
  width: 15vw; max-width: 190px; min-width: 84px;
  border-radius: 50%;
  animation: spin 4s linear infinite;
  filter: drop-shadow(0 0 22px #ffee00);
}
.spincoin.right { animation-direction: reverse; filter: drop-shadow(0 0 22px #00b3ff); }
@keyframes spin { to { transform: rotateY(360deg); } }
.minicoin { width: 82px; border-radius: 50%; }
.spin { animation: spin 3.4s linear infinite; }
.spin.rev { animation-direction: reverse; }

.herocenter { flex: 1 1 420px; max-width: 820px; }
.megatitle {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(36px,10vw,110px);
  margin: 0;
  line-height: .95;
  letter-spacing: 2px;
  color: #fff200;
  text-shadow:
    3px 3px 0 #ff0044, 6px 6px 0 #0066ff, 9px 9px 0 #00ff66,
    0 0 30px #fff200;
  animation: titleshake .18s infinite;
}
@keyframes titleshake {
  0% { transform: translate(0,0) skewX(0deg); }
  25% { transform: translate(-2px,1px) skewX(-1deg); }
  50% { transform: translate(2px,-1px) skewX(1deg); }
  75% { transform: translate(-1px,-2px) skewX(0deg); }
}
.tickerword {
  font-family: Impact, sans-serif;
  font-size: clamp(30px,7vw,64px);
  color: #00ff66;
  text-shadow: 0 0 20px #00ff66, 3px 3px 0 #000;
}
.tagline {
  font-size: clamp(14px,2.6vw,24px);
  font-weight: bold;
  color: #fff;
  background: #ff0044;
  display: inline-block;
  padding: 6px 12px;
  border: 4px dashed #ffff00;
  margin: 8px 0;
  text-shadow: 2px 2px 0 #000;
}
.ctarow { margin: 10px 0; }
.cabox {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center;
  background: rgba(0,0,0,.72);
  border: 4px double #00ff66;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 13px;
}
.cabox.big { font-size: 15px; padding: 14px; display: flex; }
.calabel { color: #ffee00; font-weight: bold; }

.constrip {
  position: relative;
  background: repeating-linear-gradient(45deg,#ffdd00 0 22px,#000 22px 44px);
  color: #000;
  font-family: Impact, sans-serif;
  font-size: 15px;
  padding: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 0 6px #fff, 1px 1px 0 #fff;
  margin-top: 12px;
}

/* ---------- nav ---------- */
#nav {
  position: relative;
  background: #000;
  border-top: 3px solid #ff00d0;
  border-bottom: 3px solid #00ffea;
  text-align: center;
  padding: 8px 6px;
  font-size: 15px;
  font-weight: bold;
  line-height: 2;
}
#nav a { text-decoration: none; padding: 2px 6px; white-space: nowrap; display: inline-block; }
#nav a:hover { animation: blink .3s steps(1) infinite; }
#nav .sep { color: #444; }
.navx { color: #fff !important; background: #0066ff; }

/* ---------- glitter divider ---------- */
.hrglitter {
  height: 14px;
  background: repeating-linear-gradient(90deg,#ff0044 0 10px,#ffee00 10px 20px,#00ff66 20px 30px,#00c8ff 30px 40px,#c400ff 40px 50px);
  animation: glitterslide 1.4s linear infinite;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
@keyframes glitterslide { to { background-position: 50px 0; } }

/* ---------- sections ---------- */
.sect {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 14px 34px;
  background: rgba(0,10,6,.86);
  border-left: 4px solid #00ff66;
  border-right: 4px solid #00ff66;
}
.sect.alt { background: rgba(0,6,26,.88); border-color: #00a2ff; }
.sechead {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(24px,5.6vw,52px);
  text-align: center;
  margin: 0 0 18px;
  letter-spacing: 1px;
}
.cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.col { flex: 1 1 340px; min-width: 280px; }
.text p { font-size: 17px; line-height: 1.65; }
.text p.big { font-size: 21px; background: #16003a; border: 3px dotted #ff00d0; padding: 10px; }
.tiny { font-size: 12px; color: #8fd8ab; }
.center { text-align: center; }

.pic {
  width: 100%;
  border: 6px ridge #ffee00;
  box-shadow: 0 0 26px rgba(255,238,0,.5);
  display: block;
}
.tiltl { transform: rotate(-2deg); }
.tiltr { transform: rotate(2.4deg); }
.pic:hover { transform: rotate(0deg) scale(1.03); border-color: #ff00d0; }
.cap { font-size: 12px; color: #9dffc0; text-align: center; margin: 6px 0 16px; }

/* ---------- steps ---------- */
.steps { display: flex; flex-wrap: wrap; gap: 14px; }
.step {
  flex: 1 1 240px;
  display: flex; gap: 10px; align-items: flex-start;
  background: #001c33;
  border: 4px outset #00a2ff;
  padding: 12px;
  font-size: 15px;
  line-height: 1.5;
}
.stepnum {
  font-family: Impact, sans-serif;
  font-size: 34px;
  color: #ffee00;
  text-shadow: 2px 2px 0 #ff0044;
  line-height: 1;
}
.stockbox {
  margin-top: 20px;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  background: #12002b;
  border: 5px double #ff00d0;
  padding: 14px;
  text-align: center;
}
.stockhead { font-family: Impact, sans-serif; font-size: clamp(20px,4.4vw,40px); color: #00ff66; }
.stocksub { font-size: 14px; color: #ffd0f4; }

/* ---------- table ---------- */
.uglytable {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: #000d05;
  border: 5px ridge #00ff66;
}
.uglytable th {
  background: #ff0044; color: #ffff00;
  font-family: Impact, sans-serif; font-size: 20px;
  padding: 8px; letter-spacing: 1px;
}
.uglytable td { border: 2px solid #0b5c2e; padding: 8px 10px; }
.uglytable tr:nth-child(odd) td { background: #041a0d; }
.uglytable tr:hover td { background: #1c0033; color: #ffee00; }

/* ---------- roadmap ---------- */
.roadmap { font-size: 17px; line-height: 1.9; padding-left: 22px; }
.roadmap li { border-bottom: 1px dotted #0b5c2e; }
.done { color: #00ff66; font-weight: bold; }
.pend { color: #ffb300; font-weight: bold; }
.wideclip {
  width: 100%; margin-top: 16px;
  border: 6px ridge #00a2ff;
  display: block;
}

/* ---------- gallery ---------- */
.galgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 14px; }
.galgrid figure { margin: 0; background: #000; border: 5px outset #00ff66; padding: 6px; }
.galgrid img { width: 100%; display: block; }
.galgrid figcaption { font-size: 12px; color: #ffee00; text-align: center; padding-top: 5px; }
.galgrid figure:hover { border-color: #ff00d0; transform: rotate(-1.5deg) scale(1.04); box-shadow: 0 0 30px #ff00d0; }

/* ---------- videos ---------- */
.vidgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 16px; }
.vidcard { background: #000; border: 6px ridge #ffee00; padding: 6px; }
.vidcard video { width: 100%; display: block; }

/* ---------- buy ---------- */
.buysect { background: rgba(30,0,10,.9); border-color: #ff0044; }
.buywrap { text-align: center; }
.buysteps { font-size: 17px; line-height: 1.7; text-align: left; max-width: 700px; margin: 0 auto 14px; }

/* ---------- faq ---------- */
.faq p { font-size: 16px; line-height: 1.6; background: #001309; border-left: 6px solid #00ff66; padding: 10px 12px; }
.faq b { color: #ffee00; }

/* ---------- guestbook ---------- */
.guestbook {
  background: #fffbe6;
  color: #101010;
  font-family: "Courier New", monospace;
  font-size: 14px;
  border: 6px inset #ffee00;
  padding: 12px;
  max-height: 320px;
  overflow-y: auto;
}
.gbentry { border-bottom: 1px dashed #999; padding: 6px 0; }
.gbentry b { color: #b1006e; }
.gbentry span { color: #444; font-size: 11px; }
.gbform { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 6px; }
.gbform input {
  flex: 1 1 200px;
  font-family: "Comic Sans MS", cursive;
  padding: 8px;
  border: 3px inset #00ff66;
  background: #001309;
  color: #baffd2;
}

/* ---------- footer ---------- */
#foot {
  background: #000;
  border-top: 6px double #00ff66;
  padding: 10px 12px 34px;
  text-align: center;
}
#foot marquee { color: #ffee00; font-size: 20px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.badge {
  font-size: 10px; font-weight: bold;
  background: linear-gradient(#222,#000);
  color: #00ff66;
  border: 2px outset #00ff66;
  padding: 4px 8px;
}
.counter {
  display: inline-block;
  font-family: "Courier New", monospace;
  background: #000;
  color: #00ff66;
  border: 3px inset #00ff66;
  padding: 6px 12px;
  margin: 8px 0;
  font-size: 14px;
}
.footlinks { margin: 10px 0; font-size: 15px; font-weight: bold; }
.legal { font-size: 11px; color: #6fbb8a; max-width: 820px; margin: 14px auto 0; line-height: 1.6; }

/* ---------- popups ---------- */
#popuplayer { position: fixed; inset: 0; pointer-events: none; z-index: 980; }
.popup {
  position: absolute;
  width: 300px;
  background: #c0c0c0;
  border: 3px outset #fff;
  pointer-events: auto;
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  font-family: "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
}
.popbar {
  background: linear-gradient(90deg,#000080,#1084d0);
  color: #fff; font-size: 12px; font-weight: bold;
  padding: 3px 6px; display: flex; justify-content: space-between; cursor: move;
}
.popbar button { background: #c0c0c0; border: 2px outset #fff; font-size: 10px; cursor: pointer; padding: 0 5px; }
.popbody { padding: 10px; font-size: 12px; line-height: 1.5; text-align: center; }
.popbody img { width: 90px; border-radius: 50%; animation: spin 2.5s linear infinite; }

/* ---------- cursor trail canvas ---------- */
#trail { position: fixed; inset: 0; pointer-events: none; z-index: 990; }

/* ---------- laser mode ---------- */
body.laser { animation: lasershake .12s infinite; }
body.laser .pic, body.laser .galgrid img, body.laser .vidcard video { filter: hue-rotate(90deg) contrast(1.6) saturate(2); }
body.laser::after {
  content: "";
  position: fixed; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,0,0,.18) 0 12px, transparent 12px 24px);
  pointer-events: none; z-index: 4;
}
@keyframes lasershake {
  0% { transform: translate(0,0); } 50% { transform: translate(-2px,2px); } 100% { transform: translate(2px,-1px); }
}

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  body { background-size: 260px auto; }
  .spincoin { display: none; }
  marquee { font-size: 16px; }
  #musicdock { font-size: 11px; max-width: 190px; }
  .sect { border-left-width: 3px; border-right-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 6s !important; }
}