/* GRANDMASTER GAINS — vivid / 3D theme (OPTIONAL, FULLY REVERSIBLE)
   ------------------------------------------------------------------
   ENABLE:  add ONE line to any page's <head>, after the existing <style>:
              <link rel="stylesheet" href="/theme-vivid.css">
   REVERT:  delete that line. Nothing else changes. No markup was altered.
   ------------------------------------------------------------------

   WHAT THIS DOES, AND THE ONE THING IT DELIBERATELY DOESN'T

   "3D and vivid" done badly means drop shadows on everything and saturated
   colour everywhere — which reads as amateur, not premium. What actually makes
   an interface feel three-dimensional is CONSISTENT LIGHT: one light source,
   surfaces that catch it on the top edge, and shadows that agree about where it
   is coming from. That is what this does.

   It raises saturation on the accent and on interactive elements only. Body text
   stays high-contrast and calm, because vivid body text is unreadable and the
   guides are 800-1600 words each.

   Every colour pair here was checked to stay above WCAG AA. */

:root{
  --v-ink:#07070a;
  --v-surface:#12121a;
  --v-raised:#191925;
  --v-gold:#f0c33c;
  --v-gold-hi:#ffe89a;
  --v-gold-lo:#a8801c;
  --v-blue:#5aa9f0;
  --v-green:#4fd18b;
  --v-ivory:#f6f1e6;
}

/* ---- one light source, top-left. Everything below agrees with it. ---- */
body{
  background:
    radial-gradient(1100px 640px at 18% -8%, rgba(240,195,60,.075), transparent 62%),
    radial-gradient(900px 560px at 88% 4%, rgba(90,169,240,.055), transparent 60%),
    var(--v-ink);
  color:var(--v-ivory);
}

/* ---- surfaces: a lit top edge, a shadow that falls the same way every time ---- */
.card,.door,.pxCard,.metroCard,.admGroup,.modal,.callout{
  background:linear-gradient(180deg, var(--v-raised) 0%, var(--v-surface) 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),      /* the lit top edge — this is the 3D */
    0 1px 2px rgba(0,0,0,.55),
    0 12px 30px -8px rgba(0,0,0,.6);
}
.card:hover,.door:hover,.metroCard:hover{
  border-color:rgba(240,195,60,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 1px 2px rgba(0,0,0,.55),
    0 20px 44px -10px rgba(0,0,0,.72),
    0 0 0 1px rgba(240,195,60,.10);
  transform:translateY(-3px);
}
.pxCard.hot,.door.doorLead{
  border-color:rgba(240,195,60,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 1px 2px rgba(0,0,0,.55),
    0 18px 46px -10px rgba(0,0,0,.7),
    0 0 34px -14px rgba(240,195,60,.5);
}

/* ---- buttons that look pressable, and press ---- */
.btn,button.btn{
  background:linear-gradient(180deg,#2a2a38,#1b1b26);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.45);
  transition:transform .1s, box-shadow .16s, filter .16s;
}
.btn:not(.ghost):not(.tiny){
  background:linear-gradient(180deg,var(--v-gold-hi) 0%,var(--v-gold) 42%,var(--v-gold-lo) 100%);
  color:#17130a; font-weight:700; border-color:transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 3px 10px rgba(0,0,0,.5),
    0 0 26px -12px rgba(240,195,60,.7);
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35)}

/* ---- the accent gets the saturation; body copy does not ---- */
a{color:var(--v-gold)}
a:hover{color:var(--v-gold-hi)}
.eyebrow,.doorKind,.conBulkLabel,.tourTable th,.admSec{color:var(--v-gold)}
h1,h2,h3,.pageTitle,.pxName,.door h3{color:var(--v-ivory)}
h1{text-shadow:0 2px 18px rgba(0,0,0,.55)}
p,li{color:rgba(246,241,230,.86)}

/* ---- the board gets depth without changing a square ---- */
.board,.boardWrap,#board,#lboard{
  border-radius:10px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.5),
    0 26px 54px -18px rgba(0,0,0,.8);
}

/* ---- map pins glow, which is the one place vivid genuinely helps ---- */
.pin circle:last-of-type{filter:drop-shadow(0 0 7px currentColor)}
.mapWrap{box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px -12px rgba(0,0,0,.7)}

/* ---- states, in colour, consistently ---- */
.asgTag.part,.fChip.on{box-shadow:0 0 18px -8px var(--v-gold)}
.asgTag.done{color:var(--v-green)}
.nm.liveRing{box-shadow:0 0 0 2px var(--v-green), 0 0 14px -3px var(--v-green)}

/* ---- accessibility is not optional, and vivid themes usually break it ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--v-gold) !important;
  outline-offset:3px !important;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .card:hover,.door:hover,.metroCard:hover{transform:none}
}
/* a phone renders large soft shadows expensively; keep the lit edge, drop the rest */
@media (max-width:640px){
  .card,.door,.pxCard,.metroCard,.admGroup{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px -6px rgba(0,0,0,.6)}
}
