/* GAME LAYER
   Loaded last on every page, so it wins over each page's inline styles.
   Turns a stack of dark documents into one interface.

   Colour does a job, it is not decoration:
     GOLD    structure. headings, borders, the frame itself.
     VIOLET  the game layer. indices, doors, anything you can interact with.
     GREEN   live systems. the controls, status, things currently running. */

:root{
  --g-gold:#d8b36a;
  --g-violet:#8F88FF;
  --g-green:#2FBFAE;
}

/* ---------- sacred geometry, seed of life, gold, barely there ---------- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'%3E%3Cg fill='none' stroke='%23d8b36a' stroke-width='0.6'%3E%3Ccircle cx='100' cy='100' r='30'/%3E%3Ccircle cx='130' cy='100' r='30'/%3E%3Ccircle cx='115' cy='125.98' r='30'/%3E%3Ccircle cx='85' cy='125.98' r='30'/%3E%3Ccircle cx='70' cy='100' r='30'/%3E%3Ccircle cx='85' cy='74.02' r='30'/%3E%3Ccircle cx='115' cy='74.02' r='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size:340px 340px; background-position:center -40px;
  opacity:.07;
  -webkit-mask-image:radial-gradient(130% 80% at 50% 0%, #000 0%, transparent 82%);
  mask-image:radial-gradient(130% 80% at 50% 0%, #000 0%, transparent 82%);
}
/* faint scan grid, sits over the geometry */
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(143,136,255,.05) 1px, transparent 1px);
  background-size:100% 3px;
  opacity:.5;
}
body > *{position:relative;z-index:1;}

/* ---------- status light ---------- */
.status{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(233,230,219,.62);
  border:1px solid rgba(47,191,174,.3); border-radius:999px;
  padding:7px 14px 7px 12px; background:rgba(47,191,174,.05);
}
.status .dot{
  width:6px;height:6px;border-radius:50%; background:var(--g-green);
  box-shadow:0 0 0 0 rgba(47,191,174,.55);
  animation:g-pulse 2.4s cubic-bezier(.25,.7,.35,1) infinite;
}
.status.pending{color:rgba(233,230,219,.45);border-color:rgba(216,179,106,.28);background:rgba(216,179,106,.04);}
.status.pending .dot{background:var(--g-gold);animation:none;box-shadow:0 0 10px rgba(216,179,106,.55);}
@keyframes g-pulse{
  0%{box-shadow:0 0 0 0 rgba(47,191,174,.5);}
  70%{box-shadow:0 0 0 7px rgba(47,191,174,0);}
  100%{box-shadow:0 0 0 0 rgba(47,191,174,0);}
}

/* ---------- colour the content types ---------- */
/* mechanic index numbers read as game indices */
.rnum{
  color:var(--g-violet) !important;
  text-shadow:0 0 14px rgba(143,136,255,.5);
}
/* the takeaway line of each mechanic is a live control */
.key{
  color:#bff0e9 !important;
  border-left-color:rgba(47,191,174,.55) !important;
  text-shadow:0 0 18px rgba(47,191,174,.18);
}
/* headings get a faint gold bloom so they feel lit, not printed */
h1,h2,.rtitle,.sec{ text-shadow:0 0 26px rgba(216,179,106,.2); }
/* the small caps labels above sections */
.eyebrow,.seckick,.h2,.stamp{ text-shadow:0 0 16px rgba(216,179,106,.35); }

/* easter-egg links glow violet, so a door feels different to a normal link */
.egg{
  color:var(--g-violet) !important;
  border-bottom-color:rgba(143,136,255,.4) !important;
  text-shadow:0 0 14px rgba(143,136,255,.45);
}
.egg:hover{ color:#cfcbff !important; text-shadow:0 0 20px rgba(143,136,255,.8); }

/* ---------- HUD corner brackets on every panel ---------- */
.offer,.tier,.box,.buybox,.ev,.cta-wrap{ position:relative; }
.offer::before,.tier::before,.box::before,.buybox::before,
.offer::after,.tier::after,.box::after,.buybox::after{
  content:""; position:absolute; width:13px; height:13px; pointer-events:none;
}
.offer::before,.tier::before,.box::before,.buybox::before{
  top:-1px; left:-1px;
  border-top:1px solid var(--g-gold); border-left:1px solid var(--g-gold);
}
.offer::after,.tier::after,.box::after,.buybox::after{
  bottom:-1px; right:-1px;
  border-bottom:1px solid var(--g-gold); border-right:1px solid var(--g-gold);
}

/* ---------- the buy button should feel like it is powered ---------- */
.cta{
  box-shadow:0 0 24px rgba(216,179,106,.28);
  transition:box-shadow .25s, background .2s, transform .15s;
}
.cta:hover{ box-shadow:0 0 38px rgba(216,179,106,.5); transform:translateY(-1px); }

@media (prefers-reduced-motion:reduce){
  .status .dot{animation:none;box-shadow:0 0 10px rgba(47,191,174,.5);}
  .cta{transition:none;}
}

/* Rule 23 is not one of the twenty two. It belongs to the Oracle Laws, so it
   carries the violet of the deeper layer rather than the gold of this one. */
.r23{
  color:var(--g-violet) !important;
  text-shadow:0 0 16px rgba(143,136,255,.55);
}

/* RECODE 001 is the audio, and the audio is the controls. Green, like every
   other live system on the site. Overrides the gold heading bloom above. */
.recode{
  color:#7fe6d8 !important;
  text-shadow:0 0 22px rgba(47,191,174,.5) !important;
}