/* ★ 2026-10-07 · THEME · THE EIGHT GEM CRYSTALS ON COSMIC BLACK
   A skin over the guidebook spine. Load AFTER site-guidebook.css and site-game.css.
   Nothing here changes layout, pages, menu, rail or the Part structure — only
   colour, type, panel finish and the background. Remove this file and its
   <link> to fall back to the guidebook look.

   The eight canon gem colours (same order as GEM_COLORS in the game):
   Ruby · Sapphire · Emerald · Citrine · Pearl · Amber · Amethyst · Onyx */

:root{
  --ruby:#E0245E;     --ruby-hi:#FF7A9C;
  --sapphire:#2F6BFF; --sapphire-hi:#8FB4FF;
  --emerald:#22C17A;  --emerald-hi:#7FF0B8;
  --citrine:#F2C94C;  --citrine-hi:#FFE694;
  --pearl:#F2EDE4;    --pearl-hi:#FFFFFF;
  --amber:#F08A2E;    --amber-hi:#FFC58A;
  --amethyst:#9B5CFF; --amethyst-hi:#D2B4FF;
  --onyx:#3A3446;     --onyx-hi:#A9A2B8;

  --spectrum:linear-gradient(90deg,var(--ruby),var(--amber),var(--citrine),var(--emerald),var(--sapphire),var(--amethyst),var(--pearl),var(--onyx-hi));
  --spectrum-d:linear-gradient(135deg,var(--ruby),var(--amber),var(--citrine),var(--emerald),var(--sapphire),var(--amethyst),var(--pearl),var(--onyx-hi));
  --spectrum-v:linear-gradient(180deg,var(--ruby),var(--amber),var(--citrine),var(--emerald),var(--sapphire),var(--amethyst),var(--pearl),var(--onyx-hi));
  --facet:12px;

  /* remap the guidebook tokens */
  --void:#000000;
  --ground:#04030a;
  --panel:rgba(12,10,22,.72);
  --panel-2:rgba(24,20,40,.8);
  --panel-3:rgba(8,7,16,.78);
  --gold:var(--citrine);
  --gold-hi:var(--citrine-hi);
  --gold-dim:#9C9484;
  --gold-deep:rgba(255,255,255,.12);
  --blue:var(--sapphire);
  --blue-hi:var(--sapphire-hi);
  --blue-deep:rgba(47,107,255,.16);
  --red:var(--ruby);
  --red-hi:var(--ruby-hi);
  --crimson:var(--ruby);
  --amethyst-dp:rgba(0,0,0,0);      /* kills the hard pixel drop-shadows everywhere */
  --text:#F4F1FA;
  --text-dim:#C9C4D8;
  --muted:#8F89A3;

  --pixel:'Cinzel','Times New Roman',serif;
  --tiny:'Inter','Helvetica Neue',Arial,sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
}
body{ background:#000; font-weight:300; }
strong{ color:var(--citrine-hi); font-weight:600; }

/* ───────── cosmic black + pulsing stars ───────── */
.starfield{
  background:
    radial-gradient(ellipse at 12% 8%,rgba(155,92,255,.10),transparent 45%),
    radial-gradient(ellipse at 88% 30%,rgba(47,107,255,.07),transparent 50%),
    radial-gradient(ellipse at 30% 92%,rgba(224,36,94,.06),transparent 50%),
    radial-gradient(ellipse at 75% 85%,rgba(34,193,122,.05),transparent 45%),
    #000;
}
.starfield::before{ background:#000; }
.star-parallax span{ --pulse-low:.2; --pulse-high:1; animation-duration:480s,4s; }
.star-parallax:nth-of-type(2) span{ --pulse-low:.1; --pulse-high:.9; animation-duration:1140s,6.5s; }
.gem-stars{ position:absolute; inset:0; overflow:hidden; }
.gem-stars i{ position:absolute; width:var(--s); height:var(--s); border-radius:50%; background:var(--c);
  box-shadow:0 0 calc(var(--s) * 3) calc(var(--s) * .6) var(--c); opacity:.15;
  animation:gem-twinkle var(--d) ease-in-out var(--w) infinite; }
.gem-stars i.x::before, .gem-stars i.x::after{ content:''; position:absolute; left:50%; top:50%; background:var(--c);
  transform:translate(-50%,-50%); border-radius:2px; opacity:.85; }
.gem-stars i.x::before{ width:calc(var(--s) * 7); height:1px; }
.gem-stars i.x::after{ width:1px; height:calc(var(--s) * 7); }
@keyframes gem-twinkle{ 0%,100%{ opacity:.12; transform:scale(.7); } 50%{ opacity:1; transform:scale(1.15); } }
@media (prefers-reduced-motion:reduce){ .gem-stars i{ animation:none; opacity:.6; } }

/* ───────── type ───────── */
h1,h2,h3,.railmark,.door .nm,.card .nm,.slot .nm,.world .nm,.quote,.versus .nm,.covermeta .v,
.gm-title-h,.gm-u-nm,.gm-levelup b,.gm-mi-nm,.gm-save-nm,.gm-j-big,.gm-toast-v,.gm-q-nm,.gm-t-nm,.gm-patch h4,.gm-u-list b,.gm-j-grid b,.menu-save .ms b{
  font-family:var(--pixel); font-weight:600; letter-spacing:.04em;
}
h1{ font-weight:700; letter-spacing:.06em; color:var(--pearl-hi);
  text-shadow:0 0 28px rgba(155,92,255,.55),0 0 2px rgba(255,255,255,.6); }
.cover.gm-titlecover h1{ text-shadow:0 0 34px rgba(155,92,255,.6),0 0 70px rgba(47,107,255,.25); }
h1::after{ height:3px; transform:none; background:var(--spectrum); box-shadow:0 0 14px rgba(155,92,255,.5); }
h2{ color:var(--pearl-hi); text-shadow:0 0 18px rgba(155,92,255,.35); border-bottom:1px solid; border-image:var(--spectrum) 1; }
h3{ border-left:3px solid var(--amethyst); color:var(--citrine-hi); }
.door .nm,.card .nm,.slot .nm{ text-shadow:0 0 14px color-mix(in srgb,var(--c,var(--amethyst)) 50%,transparent); }
.railmark{ color:var(--pearl-hi); text-shadow:0 0 16px rgba(155,92,255,.6); }
.covermeta .v{ color:var(--pearl-hi); }

/* every small label: clean tracked caps instead of pixels */
.kicker,.tag,.partnum,.boxttl,.btn,.build,.railttl,.railmark span,.covermeta .k,.door .doorttl,.door .go,.card .code,.slot .code,
.roster li,.world .lk,.figttl,footer .stamp,.h1sub,summary,.lock-t,.menu-eyebrow,.gm-hud,.gm-toast-k,.gm-new,.gm-hint,.gm-stamp,
.gm-press,.gm-start,.gm-u-k,.gm-u-t,.gm-u-kind,.gm-tabs button,.gm-j-head,.gm-mi-t,.gm-mi-lock,.gm-patch header,.gm-save-row,.gm-q-n,
.gm-title-k,.gm-title-sub,.gm-warp-t,.gm-settings label,.gm-j-grid span,section.gm-reveal .parthead::after,.gm-levelup span,.gm-levelup i,.gm-u-xp,.gm-u-list a,.gm-patch-tag{
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1.6;
}
.menu-eyebrow{font-size:0.71rem}
.menu-save .ms{font-size:0.596rem}
.railmark span{font-size:0.596rem}
.build{font-size:0.71rem}
.railttl{font-size:0.625rem}
.kicker{font-size:0.71rem}
.h1sub{font-size:clamp(0.738rem,1.5vw,1.108rem)}
.tag{font-size:0.653rem}
.covermeta .k{font-size:0.568rem}
.partnum{font-size:0.653rem}
.boxttl{font-size:0.653rem}
.slot .code{font-size:0.625rem}
summary{font-size:0.653rem}
footer .stamp{font-size:0.71rem}
.figttl{font-size:0.625rem}
.lock-t{font-size:0.653rem}
.btn{font-size:0.795rem}
.door .doorttl{font-size:0.653rem}
.door .go{font-size:0.682rem}
.card .code{font-size:0.596rem}
.roster li{font-size:0.596rem}
.world .lk{font-size:0.54rem}
.gm-toast-k{font-size:0.568rem}
.gm-levelup span{font-size:0.994rem}
.gm-levelup i{font-size:0.71rem}
section.gm-reveal .parthead::after{font-size:0.596rem}
.gm-new{font-size:0.71rem}
.gm-hint{font-size:0.625rem}
.gm-stamp{font-size:0.568rem}
.gm-save-row{font-size:0.596rem}
.gm-patch header{font-size:0.596rem}
.gm-patch-tag{font-size:0.568rem}
.gm-mapinfo .boxttl{font-size:0.625rem}
.gm-mi-t{font-size:0.596rem}
.gm-mi-lock{font-size:0.653rem}
.gm-j-head{font-size:0.781rem}
.gm-tabs button{font-size:0.625rem}
.gm-j-grid span{font-size:0.54rem}
.gm-q-n{font-size:0.653rem}
.gm-settings label{font-size:0.71rem}
.gm-title-k{font-size:0.71rem}
.gm-title-sub{font-size:clamp(0.682rem,1.6vw,0.937rem)}
.gm-start{font-size:clamp(0.937rem,2vw,1.207rem)}
.gm-u-k{font-size:0.852rem}
.gm-u-t{font-size:0.781rem}
.gm-u-xp{font-size:0.71rem}
.gm-u-kind{font-size:0.568rem}
.gm-u-list a{font-size:0.852rem}
.gm-warp-t{font-size:0.994rem}
.gm-press{font-size:0.88rem}
.gm-lv{font-size:.74rem} .gm-lv b{font-size:.95rem} .gm-ttl{font-size:.6rem} .gm-xp-n{font-size:.54rem}
.gm-hud-chip,.gm-hud-btn{font-size:.64rem} .gm-hud-btn kbd{font-size:.54rem}
.gm-q,.gm-sun-lbl,.gm-plbl{ font-family:'Inter',sans-serif; font-weight:600; letter-spacing:.12em; }
.gm-q{font-size:15px} .gm-sun-lbl{font-size:12px} .gm-plbl{font-size:13px; stroke:#000;}

/* ───────── crystal panels · faceted corners, spectrum edge ───────── */
.box,.covermeta,.door,.win,.ultimate,.gm-levelup-in{
  border:1px solid transparent; border-radius:0;
  background:linear-gradient(var(--panel),var(--panel)) padding-box, linear-gradient(#05040a,#05040a) padding-box, var(--spectrum-d) border-box;
  box-shadow:inset 0 0 40px -10px rgba(155,92,255,.25), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  clip-path:polygon(var(--facet) 0,calc(100% - var(--facet)) 0,100% var(--facet),100% calc(100% - var(--facet)),calc(100% - var(--facet)) 100%,var(--facet) 100%,0 calc(100% - var(--facet)),0 var(--facet));
}
.box.amethyst,.door.blue{ background:linear-gradient(var(--panel),var(--panel)) padding-box, linear-gradient(#05040a,#05040a) padding-box, linear-gradient(135deg,var(--sapphire),var(--amethyst)) border-box; }
.versus .box.red{ background:linear-gradient(var(--panel),var(--panel)) padding-box, linear-gradient(#05040a,#05040a) padding-box, linear-gradient(135deg,var(--ruby),var(--amber)) border-box; }
.door{ transition:transform .25s ease, filter .25s ease; }
.door:hover{ transform:translateY(-4px); filter:drop-shadow(0 0 18px rgba(155,92,255,.45)); box-shadow:inset 0 0 50px -10px rgba(155,92,255,.4), inset 0 1px 0 rgba(255,255,255,.12); }
.door.soon{ background:linear-gradient(var(--panel-3),var(--panel-3)) padding-box, linear-gradient(#05040a,#05040a) padding-box, linear-gradient(135deg,var(--onyx),var(--onyx-hi)) border-box; }
.door.soon:hover{ transform:none; filter:none; }
.door .doorttl,.boxttl{ border-bottom:1px solid rgba(255,255,255,.08); color:var(--citrine-hi); }
.door.blue .doorttl,.box.amethyst .boxttl{ color:var(--sapphire-hi); border-bottom-color:rgba(47,107,255,.25); }
.covermeta div{ border-right:1px solid rgba(255,255,255,.08); }

.card,.slot,.world,.type,.gem,.tip,.meter,.tchip,.fig,.quote,.lock,.typegrid,.tablewrap,
.gm-patch,.gm-quest,.gm-trophy,.gm-j-grid div,.gm-hud-chip,.gm-hud-btn,.gm-map,.gm-u-list li{
  border-radius:0; border-color:rgba(255,255,255,.1);
  background-color:var(--panel-3);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.card{ border-top:2px solid var(--c,var(--amethyst)); box-shadow:inset 0 14px 30px -18px var(--c,var(--amethyst)); }
.card .code,.slot .code{ background:var(--c,var(--amethyst)); color:#000; }
.slot .code{ background:linear-gradient(90deg,var(--sapphire),var(--amethyst)); color:#fff; }
.quote{ border-left:3px solid var(--amethyst); color:var(--pearl-hi); text-shadow:0 0 18px rgba(155,92,255,.5); }
.world{ border-style:dashed; }
th{ background:rgba(47,107,255,.14); color:var(--sapphire-hi); }
tbody tr:nth-child(even){ background:rgba(155,92,255,.06); }

/* the PART tags cycle through the eight gems */
.partnum{ background:rgba(0,0,0,.6); border:1px solid currentColor; color:var(--amethyst-hi); box-shadow:0 0 12px -2px currentColor;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
main section:nth-of-type(8n+1) .partnum{ color:var(--ruby-hi); }
main section:nth-of-type(8n+2) .partnum{ color:var(--sapphire-hi); }
main section:nth-of-type(8n+3) .partnum{ color:var(--emerald-hi); }
main section:nth-of-type(8n+4) .partnum{ color:var(--citrine-hi); }
main section:nth-of-type(8n+5) .partnum{ color:var(--pearl-hi); }
main section:nth-of-type(8n+6) .partnum{ color:var(--amber-hi); }
main section:nth-of-type(8n+7) .partnum{ color:var(--amethyst-hi); }
main section:nth-of-type(8n+8) .partnum{ color:var(--onyx-hi); }

.kicker{ background:none; color:var(--pearl-hi); padding:.35rem 0; border-bottom:1px solid; border-image:var(--spectrum) 1; }
.tag{ border-width:1px; clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.tag.g{ color:var(--citrine-hi); border-color:var(--citrine); background:rgba(242,201,76,.08); }
.tag.p{ color:var(--sapphire-hi); border-color:var(--sapphire); background:rgba(47,107,255,.1); }
.tag.hi{ color:#000; border-color:transparent; background:var(--spectrum); }

/* buttons: cut crystal */
.btn{ border:none; color:#fff; background:linear-gradient(135deg,var(--amethyst),var(--sapphire)); box-shadow:0 0 22px -6px rgba(155,92,255,.8);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); transition:filter .2s, transform .2s; }
.btn:hover{ color:#fff; background:linear-gradient(135deg,var(--amethyst-hi),var(--sapphire)); transform:translateY(-2px); filter:brightness(1.15) drop-shadow(0 0 12px rgba(155,92,255,.7)); box-shadow:none; }
.btn:active{ transform:none; }
.btn.ghost{ color:var(--pearl-hi); background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)) padding-box, linear-gradient(#05040a,#05040a) padding-box, var(--spectrum-d) border-box; border:1px solid transparent; }
.btn.ghost:hover{ background:linear-gradient(rgba(20,16,36,.9),rgba(20,16,36,.9)) padding-box, linear-gradient(#05040a,#05040a) padding-box, var(--spectrum-d) border-box; color:#fff; }

/* ───────── the spine, re-finished ───────── */
.rail{ background:linear-gradient(180deg,rgba(6,5,12,.92),rgba(0,0,0,.95)); border-right:1px solid; border-image:var(--spectrum-v) 1; }
.build{ background:transparent; border:1px solid var(--amethyst); color:var(--amethyst-hi); }
.railttl{ color:var(--sapphire-hi); }
.rail a.on{ background:linear-gradient(90deg,rgba(155,92,255,.22),transparent); color:var(--pearl-hi); box-shadow:inset 2px 0 var(--amethyst-hi); }
.rail a.on .cur,.rail a.on .num{ color:var(--amethyst-hi); }
.rail a:hover{ background:rgba(255,255,255,.04); color:var(--pearl-hi); }
.railfoot{ border-top:1px solid rgba(255,255,255,.1); }
.cover{ background:transparent; border-bottom:1px solid; border-image:var(--spectrum) 1; }
footer{ background:rgba(0,0,0,.85); border-top:1px solid; border-image:var(--spectrum) 1; }
footer .stamp{ background:transparent; border:1px solid var(--amethyst); color:var(--amethyst-hi); }
.sitelinks a:hover{ color:var(--amethyst-hi); }
.closer{ border-top:1px solid rgba(255,255,255,.1); }
a{ color:var(--amethyst-hi); }
.door,.door:hover{ color:var(--text); }

/* the eight-gem crown (injected into each cover by site-theme.js) */
.gemrow{ display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 0; padding:0; list-style:none; }
.gemrow li{ margin:0; }
.gemrow button{ display:flex; flex-direction:column; align-items:center; gap:9px; margin:0; padding:4px 2px; background:none; border:none; cursor:pointer;
  color:inherit; font:inherit; transition:opacity .25s, transform .25s; }
.gemrow button:hover{ transform:translateY(-2px); }
.gemrow button:focus-visible{ outline:1px solid var(--c); outline-offset:4px; }
.gemrow .gx{ width:20px; height:20px; transform:rotate(45deg); background:linear-gradient(135deg,#fff 0%,var(--c) 38%,color-mix(in srgb,var(--c) 55%,#000) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 16px -2px var(--c); animation:gem-pulse 4s ease-in-out var(--w) infinite; transition:width .25s,height .25s; }
.gemrow .gn{ font-family:var(--tiny); font-weight:600; font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); transition:color .25s; }
.gemrow button:hover .gn{ color:var(--text-dim); }
/* one gem chosen: it leads, the others rest */
.gemrow.picked button{ opacity:.38; }
.gemrow.picked button:hover{ opacity:.75; }
.gemrow button[aria-pressed="true"]{ opacity:1; }
.gemrow button[aria-pressed="true"] .gx{ width:26px; height:26px; margin:-3px 0; animation-duration:2s; }
.gemrow button[aria-pressed="true"] .gn{ color:var(--c); }
.gemhint{ margin:10px 0 0; font-family:var(--tiny); font-weight:600; font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
/* the whole site's lines take the chosen gem's colour */
html[data-gem]{
  --spectrum:linear-gradient(90deg,var(--gem-c),var(--gem-hi),var(--gem-c));
  --spectrum-d:linear-gradient(135deg,var(--gem-hi),var(--gem-c) 45%,var(--gem-c) 55%,var(--gem-hi));
  --spectrum-v:linear-gradient(180deg,var(--gem-c),var(--gem-hi),var(--gem-c));
}
html[data-gem] h1::after{ box-shadow:0 0 14px var(--gem-c); }
html.gem-flash main{ animation:gem-flash .6s ease-out; }
@keyframes gem-flash{ 0%{ filter:brightness(1.25) saturate(1.3); } 100%{ filter:none; } }
@keyframes gem-pulse{ 0%,100%{ filter:brightness(.85); box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 10px -4px var(--c); }
  50%{ filter:brightness(1.35); box-shadow:0 0 0 1px rgba(255,255,255,.45),0 0 26px 2px var(--c); } }
@media (prefers-reduced-motion:reduce){ .gemrow .gx{ animation:none; } }

/* ───────── menu drawer ───────── */
.menu-toggle{ background:rgba(0,0,0,.8); border:1px solid transparent; background:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.85)) padding-box, linear-gradient(#05040a,#05040a) padding-box, var(--spectrum-d) border-box;
  box-shadow:0 0 18px -4px rgba(155,92,255,.7); }
.menu-toggle:hover{ transform:none; background:linear-gradient(rgba(20,16,36,.95),rgba(20,16,36,.95)) padding-box, linear-gradient(#05040a,#05040a) padding-box, var(--spectrum-d) border-box; box-shadow:0 0 24px -2px rgba(155,92,255,.9); }
.menu-toggle .bar{ height:2px; background:var(--pearl-hi); box-shadow:none; }
.menu-toggle.open{ border-color:transparent; }
.menu-toggle.open .bar{ background:var(--ruby-hi); }
.menu-backdrop{ background:rgba(0,0,0,.78); }
.menu-drawer{ background:
    radial-gradient(1px 1px at 18% 12%,#fff,transparent), radial-gradient(1px 1px at 72% 8%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 88% 34%,#fff,transparent), radial-gradient(1px 1px at 34% 46%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 62% 58%,rgba(255,255,255,.8),transparent), radial-gradient(2px 2px at 12% 72%,#fff,transparent),
    radial-gradient(ellipse at 90% 0%,rgba(155,92,255,.18),transparent 55%), #000;
  border-left:1px solid; border-image:var(--spectrum-v) 1;
  box-shadow:-24px 0 60px rgba(0,0,0,.8); }
.menu-drawer::before{ display:none; }
.menu-eyebrow{ background:none; color:var(--pearl-hi); padding:.3rem 0; border-bottom:1px solid; border-image:var(--spectrum) 1; }
.menu-list{ border:1px solid transparent; background:linear-gradient(rgba(10,8,18,.85),rgba(10,8,18,.85)) padding-box, linear-gradient(#05040a,#05040a) padding-box, var(--spectrum-d) border-box; box-shadow:none;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px); }
.menu-list li{ border-bottom:1px solid rgba(255,255,255,.07); }
.menu-link{ font-family:var(--pixel); font-weight:600; font-size:1.15rem; letter-spacing:.08em; color:var(--text-dim); }
.menu-link::before{ content:'◆'; font-size:.7rem; }
.menu-link:hover{ color:var(--pearl-hi); background:rgba(255,255,255,.04); }
.menu-link:hover::before{ color:var(--amethyst-hi); }
.menu-link.active{ color:var(--pearl-hi); background:linear-gradient(90deg,rgba(155,92,255,.25),transparent); box-shadow:inset 2px 0 var(--amethyst-hi); text-shadow:0 0 12px rgba(155,92,255,.6); }
.menu-link.active::before,.menu-link.active::after{ color:var(--amethyst-hi); }
.menu-socials a{ border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.6); }
.menu-socials a:hover{ border-color:var(--amethyst); color:var(--amethyst-hi); box-shadow:0 0 12px -2px var(--amethyst); transform:none; }
.menu-save .ms{ border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.6); }

/* ───────── game layer ───────── */
.gm-hud{ background:linear-gradient(180deg,rgba(8,7,16,.92),rgba(0,0,0,.97)); border-top:1px solid; border-image:var(--spectrum) 1; box-shadow:0 -14px 30px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.gm-xp-bar{ border:1px solid rgba(255,255,255,.15); }
.gm-xp-bar i{ background:var(--spectrum); box-shadow:0 0 10px rgba(155,92,255,.6); }
.gm-gem,.gm-save-gem,.menu-save .gem{ box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 16px -2px #B87CFF; }
.gm-hud-chip:hover,.gm-hud-btn:hover{ border-color:var(--amethyst); color:var(--pearl-hi); }
.gm-toast{ border-color:transparent; }
.gm-tabs button.on{ background:linear-gradient(180deg,rgba(155,92,255,.22),transparent); color:var(--pearl-hi); box-shadow:inset 0 -2px var(--amethyst-hi); }
.gm-patch{ border-left:3px solid var(--amethyst); }
.gm-patch:first-child{ border-left-color:var(--ruby); }
.gm-patch-b{ background:var(--spectrum); color:#000; }
.gm-map{ background:radial-gradient(circle at 50% 50%,rgba(155,92,255,.08),rgba(0,0,0,.92)); clip-path:none; }
.gm-axis{ stroke:rgba(255,255,255,.08); }
.gm-q{ fill:rgba(210,180,255,.45); }
.gm-planet .gm-body{ fill:#16131f; stroke:#4a4458; }
.gm-planet.sel .gm-body,.gm-planet:focus .gm-body{ stroke:var(--pearl-hi); }
.gm-title{ background:radial-gradient(ellipse at 50% 45%,rgba(155,92,255,.18),transparent 60%),#000; }
.gm-title::before{ display:none; }
.gm-title-h{ color:var(--pearl-hi); text-shadow:0 0 40px rgba(155,92,255,.6),0 0 90px rgba(47,107,255,.3); }
.gm-start{ color:var(--pearl-hi); }
.gm-unlock{ background:rgba(0,0,0,.95); }
.gm-burst{ background:repeating-conic-gradient(from 0deg,rgba(155,92,255,.12) 0 6deg,transparent 6deg 18deg); }
.gm-u-k{ background:var(--spectrum); color:#000; }
.gm-u-nm{ text-shadow:0 0 36px var(--pc,var(--amethyst)); }
.gm-u-list a{ border:1px solid var(--amethyst); color:var(--amethyst-hi); }
.gm-u-list a:hover{ background:var(--amethyst); color:#000; }
.gm-levelup-in{ box-shadow:0 0 60px rgba(155,92,255,.5); }
.gm-warp{ background:repeating-linear-gradient(90deg,#000 0 calc(100%/12),#07060d calc(100%/12) calc(100%/6)); }
.gm-new{ background:var(--ruby); color:#fff; border:none; box-shadow:0 0 14px -2px var(--ruby); }
section.gm-reveal .parthead::after{ background:var(--spectrum); color:#000; }

/* facets would clip game pieces sitting on a panel's edge (shards, NEW! badges) */
.box:has(.gm-shard),.door:has(.gm-shard),.door:has(.gm-new),.card:has(.gm-shard),.fig:has(.gm-shard),.tchip:has(.gm-shard){ clip-path:none; }

/* ───────── the Macro Book (macrobook.html) ───────── */
:root{ --display:var(--pixel); }
.tchip,.gname{ font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.tchip{font-size:0.625rem}
.gname{font-size:0.653rem}
.tchip.ult{ border-color:var(--amethyst); color:var(--amethyst-hi); box-shadow:inset 0 0 12px -4px var(--amethyst); }
.gemgrid .gem:hover,.gemgrid .gem[aria-expanded="true"]{ background:rgba(155,92,255,.12); border-color:var(--amethyst-hi); }
.gswatch,.gem.comp .gswatch{ box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 18px -3px var(--c); }
.gem.comp{ border-color:var(--amethyst); }
.gem-emblem{ border:1px solid rgba(255,255,255,.6); box-shadow:0 0 0 4px #000,0 0 0 5px rgba(255,255,255,.2),0 0 40px -6px var(--gem-glow); }
.atlas-map{ background:#000; }
.atlas-region:hover polygon,.atlas-region:focus-visible polygon,.atlas-region[aria-expanded="true"] polygon{ fill:rgba(155,92,255,.16); stroke:var(--amethyst-hi); }
.atlas-region circle{ fill:#000; stroke:var(--pearl); }
.atlas-region:hover circle,.atlas-region:focus-visible circle{ fill:#1b1030; }
.atlas-key button,.atlas-control{ border-color:rgba(255,255,255,.12); clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.atlas-key button span{ color:var(--amethyst-hi); }
.atlas-key button:hover,.atlas-key button[aria-expanded="true"],.atlas-control:hover{ background:rgba(155,92,255,.14); border-color:var(--amethyst); }
.district-dialog,.gemlord-dialog,.gem-dialog{ background:#06050c; border:1px solid transparent;
  background:linear-gradient(#06050c,#06050c) padding-box, var(--spectrum-d) border-box; box-shadow:0 0 60px -10px rgba(155,92,255,.45); }
.district-dialog::backdrop,.gemlord-dialog::backdrop,.gem-dialog::backdrop{ background:rgba(0,0,0,.85); }
.district-dialog-header{ background:rgba(6,5,12,.96); }
.district-details,.gemlord-record{ border-top:1px solid; border-image:var(--spectrum) 1;
  background:radial-gradient(circle at 85% 8%,rgba(155,92,255,.12),transparent 40%); }
.district-question{ border-left:3px solid var(--ruby); }
.gemlord-card{ border:1px solid rgba(255,255,255,.12); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.gemlord-card strong{ font-weight:600; letter-spacing:.04em; font-size:1rem; }
.gemlord-card:hover,.gemlord-card[aria-expanded="true"]{ background:rgba(155,92,255,.12); border-color:var(--amethyst-hi); }
.gemlord-record blockquote,.gem-law{ border-left-color:var(--amethyst); }
.gemlord-name-trigger{ color:var(--amethyst-hi); text-decoration-color:rgba(210,180,255,.4); }
.ultimate h3{ color:var(--pearl-hi); text-shadow:0 0 18px rgba(155,92,255,.5); }
.rail a .num{ color:var(--muted); }
/* the theme's wider type must not push the layout column past the phone width — tables scroll in their own box */
.wrap > main{ min-width:0; }
/* canon-lock panels keep their ruby rule edge */
.lock{ border-color:rgba(224,36,94,.45); border-left:3px solid var(--ruby); background:linear-gradient(90deg,rgba(224,36,94,.08),transparent 60%),var(--panel-3); }

/* ───────── each Gemlord record (and card) wears its own gem ───────── */
.gemlord-dialog[data-gemlord="rakoron"],.gemlord-card[data-gemlord="rakoron"]{ --lc:var(--ruby); --lc-hi:var(--ruby-hi); --lc-line:linear-gradient(90deg,var(--ruby),var(--ruby-hi),var(--ruby)); --lc-frame:linear-gradient(135deg,var(--ruby-hi),var(--ruby) 45%,var(--ruby) 55%,var(--ruby-hi)); --lc-gem:linear-gradient(135deg,#fff,var(--ruby) 40%,color-mix(in srgb,var(--ruby) 50%,#000)); }
.gemlord-dialog[data-gemlord="ivirium"],.gemlord-card[data-gemlord="ivirium"]{ --lc:var(--pearl); --lc-hi:var(--pearl-hi); --lc-line:linear-gradient(90deg,var(--pearl),var(--pearl-hi),var(--pearl)); --lc-frame:linear-gradient(135deg,var(--pearl-hi),var(--pearl) 45%,var(--pearl) 55%,var(--pearl-hi)); --lc-gem:linear-gradient(135deg,#fff,var(--pearl) 40%,color-mix(in srgb,var(--pearl) 50%,#000)); }
.gemlord-dialog[data-gemlord="mutaryn"],.gemlord-card[data-gemlord="mutaryn"]{ --lc:var(--citrine); --lc-hi:var(--citrine-hi); --lc-line:linear-gradient(90deg,var(--citrine),var(--citrine-hi),var(--citrine)); --lc-frame:linear-gradient(135deg,var(--citrine-hi),var(--citrine) 45%,var(--citrine) 55%,var(--citrine-hi)); --lc-gem:linear-gradient(135deg,#fff,var(--citrine) 40%,color-mix(in srgb,var(--citrine) 50%,#000)); }
.gemlord-dialog[data-gemlord="emeralix"],.gemlord-card[data-gemlord="emeralix"]{ --lc:var(--emerald); --lc-hi:var(--emerald-hi); --lc-line:linear-gradient(90deg,var(--emerald),var(--emerald-hi),var(--emerald)); --lc-frame:linear-gradient(135deg,var(--emerald-hi),var(--emerald) 45%,var(--emerald) 55%,var(--emerald-hi)); --lc-gem:linear-gradient(135deg,#fff,var(--emerald) 40%,color-mix(in srgb,var(--emerald) 50%,#000)); }
.gemlord-dialog[data-gemlord="eurakeon"],.gemlord-card[data-gemlord="eurakeon"]{ --lc:var(--amethyst); --lc-hi:var(--amethyst-hi); --lc-line:linear-gradient(90deg,var(--amethyst),var(--amethyst-hi),var(--amethyst)); --lc-frame:linear-gradient(135deg,var(--amethyst-hi),var(--amethyst) 45%,var(--amethyst) 55%,var(--amethyst-hi)); --lc-gem:linear-gradient(135deg,#fff,var(--amethyst) 40%,color-mix(in srgb,var(--amethyst) 50%,#000)); }
.gemlord-dialog[data-gemlord="azurel"],.gemlord-card[data-gemlord="azurel"]{ --lc:var(--sapphire); --lc-hi:var(--sapphire-hi); --lc-line:linear-gradient(90deg,var(--sapphire),var(--sapphire-hi),var(--sapphire)); --lc-frame:linear-gradient(135deg,var(--sapphire-hi),var(--sapphire) 45%,var(--sapphire) 55%,var(--sapphire-hi)); --lc-gem:linear-gradient(135deg,#fff,var(--sapphire) 40%,color-mix(in srgb,var(--sapphire) 50%,#000)); }
.gemlord-dialog[data-gemlord="obsidius"],.gemlord-card[data-gemlord="obsidius"]{ --lc:var(--onyx-hi); --lc-hi:#E4E0EC; --lc-line:linear-gradient(90deg,var(--onyx-hi),#E4E0EC,var(--onyx-hi)); --lc-frame:linear-gradient(135deg,#E4E0EC,var(--onyx-hi) 45%,var(--onyx-hi) 55%,#E4E0EC); --lc-gem:linear-gradient(135deg,#fff,var(--onyx-hi) 40%,color-mix(in srgb,var(--onyx-hi) 50%,#000)); }
.gemlord-dialog[data-gemlord="ambrevon"],.gemlord-card[data-gemlord="ambrevon"]{ --lc:var(--amber); --lc-hi:var(--amber-hi); --lc-line:linear-gradient(90deg,var(--amber),var(--amber-hi),var(--amber)); --lc-frame:linear-gradient(135deg,var(--amber-hi),var(--amber) 45%,var(--amber) 55%,var(--amber-hi)); --lc-gem:linear-gradient(135deg,#fff,var(--amber) 40%,color-mix(in srgb,var(--amber) 50%,#000)); }
.gemlord-dialog[data-gemlord="oathane"],.gemlord-card[data-gemlord="oathane"]{ --lc:#5FA8E8; --lc-hi:#CFE6FF; --lc-line:linear-gradient(90deg,#C4133C,#1F5FD0,#1E8E52,#E8C84A); --lc-frame:linear-gradient(135deg,#C4133C,#1F5FD0,#1E8E52,#E8C84A); --lc-gem:conic-gradient(from 220deg,#C4133C,#1F5FD0,#1E8E52,#E8C84A,#C4133C); }
.gemlord-dialog[data-gemlord="oatheus"],.gemlord-card[data-gemlord="oatheus"]{ --lc:#B48CE0; --lc-hi:#F2EDE4; --lc-line:linear-gradient(90deg,#F2EDE4,#D9812A,#7A4FCF,#3A3446); --lc-frame:linear-gradient(135deg,#F2EDE4,#D9812A,#7A4FCF,#3A3446); --lc-gem:conic-gradient(from 220deg,#F2EDE4,#D9812A,#7A4FCF,#141018,#F2EDE4); }
.gemlord-dialog[data-gemlord]{
  background:linear-gradient(#06050c,#06050c) padding-box, var(--lc-frame) border-box;
  box-shadow:0 0 80px -12px var(--lc); }
.gemlord-dialog[data-gemlord]::backdrop{ background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--lc) 16%,transparent),rgba(0,0,0,.9) 70%); }
.gemlord-dialog[data-gemlord] .district-dialog-header{ color:var(--lc-hi); border-bottom-color:color-mix(in srgb,var(--lc) 35%,transparent); }
.gemlord-dialog[data-gemlord] .gemlord-record{ border-image:var(--lc-line) 1;
  background:radial-gradient(circle at 88% 6%,color-mix(in srgb,var(--lc) 24%,transparent),transparent 42%),
             radial-gradient(circle at 0% 100%,color-mix(in srgb,var(--lc) 10%,transparent),transparent 55%); }
.gemlord-dialog[data-gemlord] .gemlord-kicker,.gemlord-dialog[data-gemlord] .gemlord-facts dt{ color:var(--lc-hi); opacity:.85; }
.gemlord-dialog[data-gemlord] #gemlord-title{ color:var(--lc-hi); text-shadow:0 0 26px var(--lc),0 0 2px rgba(255,255,255,.5); }
.gemlord-dialog[data-gemlord] .gemlord-title{ color:var(--lc-hi); }
.gemlord-dialog[data-gemlord] .gemlord-facts{ border-color:color-mix(in srgb,var(--lc) 30%,transparent); }
.gemlord-dialog[data-gemlord] .gemlord-facts dd{ color:var(--text); }
.gemlord-dialog[data-gemlord] #gemlord-gem::before{ content:''; display:inline-block; width:11px; height:11px; margin:0 12px 1px 2px; transform:rotate(45deg);
  background:var(--lc-gem); box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 12px var(--lc); }
.gemlord-dialog[data-gemlord] .gemlord-lore h3,.gemlord-dialog[data-gemlord] .gemlord-lore:nth-of-type(2) h3{ border-left-color:var(--lc); color:var(--lc-hi); }
.gemlord-dialog[data-gemlord] blockquote{ border-left-color:var(--lc); color:var(--lc-hi); background:linear-gradient(90deg,color-mix(in srgb,var(--lc) 12%,transparent),transparent 70%); }
.gemlord-dialog[data-gemlord] .atlas-control{ color:var(--lc-hi); border-color:color-mix(in srgb,var(--lc) 45%,transparent); }
.gemlord-dialog[data-gemlord] .atlas-control:hover{ background:color-mix(in srgb,var(--lc) 18%,transparent); border-color:var(--lc); }
.gemlord-card[data-gemlord]{ border-color:color-mix(in srgb,var(--lc) 40%,transparent); box-shadow:inset 3px 0 0 var(--lc); }
.gemlord-card[data-gemlord] strong{ color:var(--lc-hi); }
.gemlord-card[data-gemlord]:hover,.gemlord-card[data-gemlord][aria-expanded="true"]{ background:color-mix(in srgb,var(--lc) 14%,rgba(8,7,16,.8)); border-color:var(--lc); }

/* the Macro Book guidebook panel */
.guidebook .gb-k{ font-size:.62rem; font-weight:600; letter-spacing:.16em; color:var(--sapphire-hi); }
.guidebook .gb-nm{ font-weight:700; color:var(--pearl-hi); text-shadow:0 0 18px rgba(155,92,255,.5); }
.guidebook .gb-go{ font-size:.7rem; font-weight:600; letter-spacing:.16em; color:var(--amethyst-hi); }
.guidebook .gb-book svg{ filter:drop-shadow(0 0 10px rgba(155,92,255,.6)); }
.guidebook{ transition:transform .25s ease, filter .25s ease; }
.guidebook:hover{ transform:translateY(-3px); filter:drop-shadow(0 0 16px rgba(155,92,255,.45)); }

/* the Codex page */
.zx-tf,.zx-type,.zx-empty-k{ font-weight:600; letter-spacing:.14em; }
.zx-tf{ font-size:.62rem; } .zx-type{ font-size:.54rem; } .zx-empty-k{ font-size:.7rem !important; }
.zx-tools input,.zx-tools select,.zx-card,.zx-tf,.zx-empty,.zx-anatomy div{ border-color:rgba(255,255,255,.12); }
.zx-card{ clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.zx-nm,.zx-e-nm{ font-weight:600; }

/* dev door */
.devdoor{ border:1px solid transparent; background:linear-gradient(#06050c,#06050c) padding-box, var(--spectrum-d) border-box; box-shadow:0 0 60px -10px rgba(155,92,255,.5); }
.devdoor-k{ font-size:.62rem; font-weight:600; letter-spacing:.16em; }
.devdoor-t{ font-weight:700; color:var(--pearl-hi); text-shadow:0 0 18px rgba(155,92,255,.5); }
.devdoor-l input{ border-color:rgba(255,255,255,.14); }