/* GoalDigger — design CSS, ported verbatim from the frozen prototypes (Aug 2026).
   Source: uploads/design/goaldigger-home.html. Page-specific additions live in their views. */
:root{
  --a:#D4AF37; --wash:212,175,55;
  --metal:linear-gradient(160deg,#FFF8DC 0%,#F2DC8A 16%,#D4AF37 44%,#8E6A18 68%,#FFEEB0 88%,#C9A233 100%);
  --metal2:linear-gradient(160deg,#FFFFFF 0%,#F6F9FC 16%,#DDE5EE 44%,#A9B5C2 70%,#FFFFFF 88%,#D2DBE5 100%);
  --void:#080D15; --pane:#0D141F; --lift:#131C29;
  --tx:#EFF4F9; --mute:rgba(239,244,249,.7); --dim:rgba(239,244,249,.44);
  --rule:rgba(239,244,249,.15);
  --display:"Cinzel",Georgia,serif; --dw:600;
  --ui:"Manrope",system-ui,sans-serif;
  --pad:clamp(20px,4vw,58px); --head:60px; --rail:104px;
  --m-hi:#FFF8DC; --m-lo:#8E6A18; --a2:#DCE4EC; --n-hi:#FFFFFF; --n-lo:#9BA8B6;

  /* --gd-* names. Fifteen views under views/ were written against assets/tokens.css,
     which layout.php has never loaded. An undefined var() voids the whole declaration,
     so those pages were losing borders, input backgrounds and serif headings outright.
     Aliased onto this palette rather than loading tokens.css, whose body/h1 rules
     would fight d.css depending on link order. */
  --gd-canvas:var(--void); --gd-paper:var(--pane); --gd-night:#050A12; --gd-lift:var(--lift);
  --gd-ink:var(--tx); --gd-muted:var(--mute); --gd-grey:var(--dim); --gd-line:var(--rule);
  --gd-gold:var(--a); --gd-gold-grad:var(--metal); --gd-gold-deep:#241703;
  --gd-blue:#3EC6FF; --gd-red:#E53E4D;
  --gd-green-pitch:linear-gradient(180deg,#0F4A2A,#0A301C);
  --gd-lime:var(--a); --gd-grn:var(--a); --gd-hero-em:var(--a);
  --gd-green:#0C1B30; --gd-pink:#3EC6FF;
  --gd-serif:var(--display); --gd-sans:var(--ui);
  --gd-r-card:12px; --gd-r-btn:7px; --gd-gutter:24px; --gd-max:1600px;
}
@media(max-width:1439px){:root{--gd-gutter:20px}}
@media(max-width:1023px){:root{--gd-gutter:18px}}
@media(max-width:767px){:root{--gd-r-card:14px;--gd-gutter:16px}}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--void);color:var(--tx);font-family:var(--ui);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;padding-left:var(--rail)}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:4px}
.wrap{max-width:1380px;margin:0 auto;padding:0 var(--pad)}
.metal{background-image:var(--metal);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}

/* ---------- the rail: seven sections, always there ---------- */
/* the hover name sits beside the coin, so it reaches past the rail's own width — the rail must
   not clip it. The same fix lives in gd_rail_law() for the design pages; this is the copy the
   pages built from views need, and without it the label is sliced off at the rail's edge. */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);overflow:visible;max-height:100vh;z-index:60;background:rgba(4,8,13,.94);
  border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;align-items:center;
  padding:16px 0 14px;backdrop-filter:blur(10px)}
.logo{display:grid;place-items:center;gap:6px;text-align:center;position:relative}
.mark{width:30px;height:30px;flex:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8)) drop-shadow(0 0 14px rgba(var(--wash),.4));
  transition:transform .5s cubic-bezier(.16,.8,.24,1)}
.mark.sm{width:24px;height:24px}
.mark .pin{fill:url(#gdA);stroke:rgba(0,0,0,.55);stroke-width:.7}
.mark .ball{fill:url(#gdB);stroke:rgba(0,0,0,.45);stroke-width:.6}
.mark .seam{fill:#0B0F16;opacity:.88}
.mark .seam2{fill:none;stroke:#0B0F16;stroke-width:1.1;stroke-linecap:round;opacity:.72}
.logo:hover .mark{transform:translateY(-2px) rotate(-6deg)}

.stack{display:flex;flex-direction:column;gap:11px;margin:22px 0 auto;perspective:520px}
.rico{position:relative;transform-style:preserve-3d;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(var(--wash),.3);color:rgba(var(--wash),.9);display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,rgba(var(--wash),.1),transparent 70%);transition:.24s}
.rico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rico:hover{border-color:var(--a);color:var(--a);box-shadow:0 0 20px -6px var(--a);transform:translateZ(14px) translateY(-2px) rotateY(-10deg)}
.rico[aria-current=true]{background-image:var(--metal);border-color:var(--a);color:#17120A;box-shadow:0 0 24px -2px var(--a)}
.rico::after{content:attr(data-name);position:absolute;left:52px;top:50%;transform:translateY(-50%) translateX(-6px);
  background:rgba(6,11,18,.96);border:1px solid var(--rule);border-radius:6px;padding:5px 10px;font-size:11px;
  color:var(--tx);white-space:nowrap;opacity:0;pointer-events:none;transition:.22s}
.rico:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;height:var(--head);display:flex;align-items:center;gap:14px;
  padding:0 var(--pad);background:rgba(4,7,12,.84);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.lockmark{height:24px;width:182px;display:block;flex:none;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 5px 10px rgba(0,0,0,.7))
  drop-shadow(0 0 18px rgba(var(--wash),.35))}
.lockmark text{font-family:var(--display);font-weight:600;font-size:118px;
  stroke:#05090F;stroke-width:5;paint-order:stroke;stroke-linejoin:round}
.now{font-family:var(--display);font-weight:var(--dw);font-size:12px;letter-spacing:.16em;
  background-image:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.crumb{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.hend{display:flex;align-items:center;gap:11px;margin-left:auto}
/* On a phone the header did not wrap: the city switch and the two buttons ran on past the
   right edge and gave every page a sideways scroll. The lockmark and the way out matter on a
   small screen; the breadcrumb and the city switch do not. */
@media(max-width:640px){
  .hdr{height:auto;min-height:var(--head);padding-top:9px;padding-bottom:9px;gap:9px;flex-wrap:wrap}
  .hdr .crumb{display:none}
  .hdr .city{display:none}
  .hend{gap:7px}
  .hend .btn{padding:0 12px;font-size:10.5px;height:32px}
  .lockmark{max-width:150px}
}
@media(max-width:390px){
  .hdr .now{display:none}
  .hend .btn{padding:0 10px}
}
.city{display:flex;border:1px solid rgba(var(--wash),.34);border-radius:999px;padding:3px}
.city a,.city button{font-size:12px;color:rgba(var(--wash),.85);padding:5px 14px;border-radius:999px;transition:.2s}
.city a[aria-pressed=true],.city button[aria-pressed=true]{background-image:var(--metal);color:#17120A;font-weight:600}
.btn{position:relative;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:11px 22px;
  border-radius:999px;transition:.24s;white-space:nowrap;display:inline-block}
.btn.solid{background-image:var(--metal);color:#17120A;animation:pulseB 3.8s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.35),0 16px 30px -16px #000}
@keyframes pulseB{0%,100%{box-shadow:0 0 32px -12px var(--a)}50%{box-shadow:0 0 56px -8px var(--a)}}
.btn.solid:hover{transform:translateY(-2px) scale(1.02)}
.btn.line{border:1px solid rgba(var(--wash),.42);color:var(--a)}
.btn.line:hover{border-color:var(--a);background:rgba(var(--wash),.12);box-shadow:0 0 24px -10px var(--a)}

/* ---------- hero: whole artwork, nothing on it ---------- */
.hero{position:relative;width:100%;aspect-ratio:1915/821;overflow:hidden;background:#04070C}
.heroInner{position:absolute;inset:0;will-change:transform}
.hero img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.045);
  transition:opacity 1.5s ease,transform 11s linear}
.hero img.live{opacity:1;transform:scale(1)}
#field{position:absolute;inset:0;z-index:2;pointer-events:none}
.bloom{position:absolute;z-index:3;width:34%;padding-bottom:34%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(198,222,255,.2),rgba(198,222,255,.05) 42%,transparent 68%);
  animation:breathe 6.4s ease-in-out infinite}
.bloom.l{top:-13%;left:-6%}.bloom.r{top:-15%;right:-4%;animation-delay:-3.2s}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
.hemi{position:absolute;left:0;right:0;bottom:0;height:32%;z-index:4;pointer-events:none;
  background:linear-gradient(to top,var(--void) 2%,rgba(4,7,12,.5) 44%,transparent)}
.heroMark{position:absolute;left:7.3%;top:53%;width:26%;transform:translateY(-50%);z-index:5;isolation:isolate;
  opacity:0;animation:markIn 1.3s .5s cubic-bezier(.16,.8,.24,1) forwards}
@keyframes markIn{from{opacity:0;transform:translateY(calc(-50% + 22px))}to{opacity:1;transform:translateY(-50%)}}
.heroMark .lockmark{width:100%;height:auto;aspect-ratio:1000/132;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.45)) drop-shadow(0 8px 22px rgba(0,0,0,.7))
    drop-shadow(0 0 40px rgba(var(--wash),.4))}
.heroMark .lockmark text{stroke-width:6}
.heroMark::before{content:"";position:absolute;left:-14%;top:-70%;width:132%;height:250%;z-index:-1;
  background:radial-gradient(ellipse at 40% 50%,rgba(3,6,11,.72),rgba(3,6,11,.34) 46%,transparent 72%);
  pointer-events:none}
.heroMark .tag{margin-top:clamp(4px,.7vw,11px);font-size:clamp(11px,1.32vw,25px);letter-spacing:.02em;
  color:#DCE6F0;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.scroller{position:absolute;left:50%;bottom:14px;z-index:5;transform:translateX(-50%);font-size:9px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--a);display:grid;justify-items:center;gap:6px;
  animation:sink 2.4s ease-in-out infinite}
.scroller i{display:block;width:1px;height:20px;background:linear-gradient(var(--a),transparent)}
@keyframes sink{0%,100%{opacity:.45;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,5px)}}

/* ---------- shared blocks ---------- */
.rv{opacity:0;transform:perspective(1400px) translateY(26px) rotateX(7deg);transform-origin:50% 0;transition:opacity .85s cubic-bezier(.16,.8,.24,1),transform .85s cubic-bezier(.16,.8,.24,1)}
.rv.in{opacity:1;transform:perspective(1400px) translateY(0) rotateX(0)}
.blk{padding:clamp(34px,5vw,66px) 0;border-top:1px solid var(--rule);perspective:1500px;perspective-origin:50% 40%}
.blk:first-child{border-top:0}
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .5s cubic-bezier(.16,.8,.24,1)}
.tilt.grab{transition:transform .12s linear}
.sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(var(--wash),.22),transparent 62%)}
.tilt:hover .sheen{opacity:1}
.bevel{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.6),0 26px 52px -26px #000}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--a);margin-bottom:16px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--a)}
h1.big{font-family:var(--display);font-weight:var(--dw);font-size:clamp(29px,4.2vw,56px);line-height:1.04;max-width:16ch;
  background-image:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-family:var(--display);font-weight:var(--dw);font-size:clamp(22px,2.8vw,36px);line-height:1.1}
.lede{margin-top:16px;font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.72;color:var(--mute);max-width:56ch}
.lede a{color:var(--a);border-bottom:1px solid rgba(var(--wash),.42)}
.lede a:hover{color:#F3D492}
.acts{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.band{padding:clamp(20px,2.6vw,32px) 0 clamp(16px,2vw,24px);border-top:0}
.bandgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(18px,3vw,46px);align-items:end}
.band .eyebrow{margin-bottom:11px;font-size:9.5px}
.band h1.big{font-size:clamp(21px,2.5vw,35px);line-height:1.06;max-width:15ch}
.band .lede{margin-top:11px;font-size:13.5px;line-height:1.62;max-width:52ch}
.band .acts{margin-top:17px;gap:9px}
.band .btn{padding:9px 18px;font-size:10.5px}
.counts.mini{margin-top:0;background:none;border:0;border-radius:0;
  grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:clamp(10px,1.4vw,20px)}
.counts.mini .ct{background:none;padding:0}
.counts.mini .ct b{font-size:clamp(19px,2vw,28px)}
.counts.mini .ct span{margin-top:3px;font-size:8.5px;letter-spacing:.16em}
.counts{transform-style:preserve-3d;display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;
  background:rgba(var(--wash),.16);border:1px solid rgba(var(--wash),.2);border-radius:14px;overflow:hidden;margin-top:clamp(26px,3vw,44px)}
.ct{background:linear-gradient(160deg,var(--lift),var(--pane));padding:20px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.ct b{display:block;font-family:var(--display);font-weight:var(--dw);font-size:clamp(24px,2.8vw,36px);
  line-height:1;background-image:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.ct span{display:block;margin-top:6px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

.two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3.4vw,48px);align-items:center}
.card{position:relative;background:linear-gradient(165deg,var(--lift),var(--pane) 60%);
  border:1px solid rgba(var(--wash),.28);border-radius:16px;padding:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 34px 64px -30px #000}
.card>*{position:relative}
.card h3,.card .slots{transform:translateZ(30px)}
.card .sub,.card .tally,.card .rate{transform:translateZ(14px)}
.card h3{font-family:var(--display);font-weight:var(--dw);font-size:18px;letter-spacing:.03em}
.card .sub{font-size:12px;color:var(--dim);margin:4px 0 16px}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{padding:14px 0;border:1px solid rgba(var(--wash),.24);border-radius:10px;transform-style:preserve-3d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);font-size:11px;letter-spacing:.08em;text-align:center;
  color:var(--mute);transition:.22s;opacity:0;animation:deal .5s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes deal{from{opacity:0;transform:translateY(9px) scale(.95)}to{opacity:1;transform:none}}
.slot:hover:not([disabled]){border-color:var(--a);color:var(--a);transform:translateZ(16px) translateY(-3px)}
.slot[disabled]{color:rgba(255,255,255,.18);border-style:dashed;cursor:not-allowed}
.slot[aria-pressed=true]{background:rgba(var(--wash),.18);border-color:var(--a);color:#F3D492;box-shadow:0 0 26px -8px var(--a)}
.tally{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--rule);font-size:12.5px;color:var(--mute)}
.tally b{font-family:var(--display);font-weight:var(--dw);font-size:20px;
  background-image:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.rate{margin-top:9px;font-size:11.5px;color:var(--dim)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px;margin-top:26px}
.tile{background:linear-gradient(160deg,var(--lift),var(--pane));border:1px solid rgba(var(--wash),.2);border-radius:14px;
  padding:20px 18px;text-align:left;position:relative;overflow:hidden;display:block;width:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 44px -26px #000}
.tile::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--a);transform:scaleX(0);
  transform-origin:left;transition:transform .4s cubic-bezier(.16,.8,.24,1)}
.tile:hover{border-color:rgba(var(--wash),.42)}
.tile:hover::after{transform:scaleX(1)}
.tile svg{position:relative;transform:translateZ(38px);width:21px;height:21px;fill:none;stroke:var(--a);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-family:var(--display);font-weight:var(--dw);font-size:16px;letter-spacing:.03em;margin:12px 0 5px;
  transform:translateZ(26px)}
.tile p{font-size:12.5px;line-height:1.55;color:var(--dim);transform:translateZ(14px)}
.tile .state{display:inline-block;margin-top:10px;transform:translateZ(20px);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--a);opacity:.8}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{border:1px solid rgba(var(--wash),.26);border-radius:999px;padding:9px 16px;font-size:12.5px;
  color:rgba(var(--wash),.9);transition:.22s;display:inline-block}
.chip:hover{border-color:var(--a);color:var(--a);transform:translateY(-2px)}

.wall{overflow:hidden;margin-top:24px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);perspective:900px}
.wall-track{display:flex;gap:12px;width:max-content;animation:slide 46s linear infinite;transform-style:preserve-3d}
@keyframes slide{to{transform:translateX(-50%)}}
.crest{width:50px;height:50px;border-radius:50%;border:1px solid rgba(var(--wash),.34);display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 26px -14px #000;transition:transform .4s cubic-bezier(.16,.8,.24,1);
  font-family:var(--display);font-weight:var(--dw);font-size:11.5px;color:var(--a);flex:none;background:var(--pane)}
.crest:hover{transform:translateZ(40px) scale(1.1)}

.soon{margin-top:20px;padding:18px 20px;border:1px dashed var(--rule);border-radius:12px;font-size:13px;
  line-height:1.65;color:var(--mute);max-width:62ch}

.ftr{border-top:1px solid var(--rule);padding:clamp(28px,4vw,48px) 0 24px;background:#060A11}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:26px}
.fgrid h4{font-family:var(--display);font-weight:var(--dw);font-size:12.5px;color:var(--a);letter-spacing:.06em;margin-bottom:11px}
.fgrid ul{list-style:none;display:grid;gap:8px;font-size:13px;color:var(--mute)}
.fgrid a:hover{color:var(--tx)}
.fbot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px;padding-top:18px;
  border-top:1px solid var(--rule);font-size:11.5px;color:var(--dim)}
.fbot .free{color:var(--a);letter-spacing:.15em;text-transform:uppercase;font-size:10px}
.fbot nav{margin-left:auto;display:flex;gap:15px}

/* ---------- travel ---------- */
#travel{position:fixed;inset:0 0 0 var(--rail);z-index:70;display:grid;place-items:center;pointer-events:none;
  opacity:0;background:rgba(3,6,10,.88);backdrop-filter:blur(3px);transition:opacity .42s ease}
#travel.on{opacity:1}
#travel .t{font-size:9.5px;letter-spacing:.5em;text-transform:uppercase;color:var(--a);text-align:center}
#travel .d{font-family:var(--display);font-weight:var(--dw);font-size:clamp(26px,4vw,42px);letter-spacing:.06em;
  margin-top:12px;text-align:center}

/* ---------- tuner + cupid ---------- */
.tuner{width:100%;margin-top:16px;padding:15px 0 4px;display:grid;justify-items:center;gap:11px;
  border-top:1px solid rgba(255,255,255,.07)}
.tgroup{display:grid;justify-items:center;gap:7px}
.tlbl{font-size:6.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);line-height:1}
#swatches{display:grid;grid-template-columns:repeat(4,15px);gap:6px}
#types{display:grid;grid-template-columns:repeat(3,17px);gap:5px}
.sw{width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.2);transition:.24s cubic-bezier(.16,.8,.24,1)}
.sw:hover{transform:scale(1.18)}
.sw[aria-pressed=true]{box-shadow:0 0 0 2px var(--void),0 0 0 3.5px currentColor,0 0 14px currentColor}
.ty{width:17px;height:17px;border-radius:5px;border:1px solid rgba(var(--wash),.3);color:rgba(var(--wash),.75);font-size:9.5px;
  line-height:1;display:grid;place-items:center;transition:.24s}
.ty:hover{border-color:rgba(var(--wash),.6);color:var(--tx)}
.ty[aria-pressed=true]{border-color:var(--a);color:var(--a);background:rgba(var(--wash),.12)}
.cupid{position:fixed;right:18px;bottom:18px;z-index:62}
.cbtn{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 38px -18px #000;display:flex;align-items:center;gap:10px;height:47px;padding:0 20px 0 15px;border-radius:999px;
  background:rgba(7,12,20,.92);border:1px solid rgba(var(--wash),.4);color:var(--a);font-size:12.5px;font-weight:600;
  backdrop-filter:blur(10px);transition:.24s}
.cbtn:hover{transform:translateY(-3px);border-color:var(--a)}
.cbtn svg{width:19px;height:19px;fill:currentColor;filter:drop-shadow(0 0 8px var(--a));animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.16)}24%{transform:scale(1)}36%{transform:scale(1.09)}}
.cpanel{position:absolute;right:0;bottom:58px;width:266px;background:rgba(7,12,20,.96);border:1px solid var(--rule);
  border-radius:14px;padding:15px;transform-origin:bottom right;transform:translateY(12px) scale(.94) rotateX(14deg);
  opacity:0;pointer-events:none;transition:.32s cubic-bezier(.16,.8,.24,1)}
.cupid[data-open=true] .cpanel{transform:none;opacity:1;pointer-events:auto}
.cpanel a,.cpanel button{display:block;width:100%;text-align:left;font-size:12.5px;padding:10px 12px;
  border:1px solid rgba(var(--wash),.24);
  border-radius:9px;color:var(--mute);margin-top:6px;transition:.2s}
.cpanel a:hover,.cpanel button:hover{border-color:var(--a);color:var(--a);background:rgba(var(--wash),.1);transform:translateX(3px)}

@media(max-width:1100px){.bandgrid{grid-template-columns:1fr;gap:22px;align-items:start}}
@media(max-width:900px){
  .heroMark{left:5%;top:46%;width:42%}
  :root{--rail:56px}
  .logo span{display:none}
  .rico::after{display:none}
  .two{grid-template-columns:1fr}
  .city{display:none}
  #swatches{grid-template-columns:repeat(4,11px);gap:4px}
  #types{grid-template-columns:repeat(3,14px);gap:4px}
  .sw{width:11px;height:11px}
  .ty{width:14px;height:14px;font-size:8px}
  .tuner{margin-top:10px;padding:10px 0 8px;gap:9px}
  .fbot nav{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
  .hero img{transform:none;opacity:1}
  .slot{opacity:1}
}

/* ---------- legacy shim: undesigned pages live inside the new world until their screens arrive ---------- */
.gd-wrap{max-width:1380px;margin:0 auto;padding:26px var(--pad) 80px}
.gd-card,.gd-card-dark{background:linear-gradient(165deg,var(--lift),var(--pane) 60%);border:1px solid rgba(var(--wash),.24);
  border-radius:14px;padding:18px;color:var(--tx);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -28px #000}
.gd-eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--a);margin:0 0 8px;font-weight:600}
.gd-tabhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.gd-tabhead h1,main h1{font-family:var(--display);font-weight:var(--dw);line-height:1.08;
  background-image:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
main h2{color:var(--tx)}
.gd-btn{position:relative;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 20px;border-radius:999px;transition:.24s;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;text-decoration:none;min-height:0}
.gd-btn-lime,.gd-btn-primary{background-image:var(--metal);color:#17120A;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 26px -14px #000}
.gd-btn-lime:hover,.gd-btn-primary:hover{transform:translateY(-2px)}
.gd-btn-ghost,.gd-btn-ondark{border:1px solid rgba(var(--wash),.42);color:var(--a);background:none}
.gd-btn-ghost:hover,.gd-btn-ondark:hover{border-color:var(--a);background:rgba(var(--wash),.12)}
.pill{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.18em;padding:6px 14px;border-radius:999px;margin:0 6px 6px 0;text-transform:uppercase}
.pill-gold,.pill-blue{background-image:var(--metal);color:#17120A}
.pill-grey,.pill-pink{border:1px solid var(--rule);color:var(--dim);background:none}
.pill-grn{border:1px solid rgba(var(--wash),.4);color:var(--a);background:none}
em.acc-gold,em.acc-pink,em.acc-grn,em.acc-blue{font-style:italic;background-image:var(--metal);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gd-status{font-size:9px;font-weight:600;letter-spacing:.14em;padding:4px 10px;border-radius:999px;text-transform:uppercase}
.gd-status-launch{background-image:var(--metal);color:#17120A}
.gd-status-building,.gd-status-coming_soon{border:1px solid var(--rule);color:var(--dim)}
.gd-status-live{background:#E2564B;color:#fff}
.lay3,.lay3-wide{display:grid;grid-template-columns:250px minmax(0,1fr) 260px;gap:18px;align-items:start}
.lay3-wide{grid-template-columns:330px minmax(0,1fr) 280px}
/* .rail means two different things in this file: the fixed navigation rail above, and a side
   column inside these page layouts. A column is a column — without this it inherits
   position:fixed and 104px and piles up over the left edge of the window. */
.lay3 > .rail,.lay3-wide > .rail{position:static!important;inset:auto!important;
  width:auto!important;height:auto!important;max-height:none!important;overflow:visible!important;
  z-index:auto!important;background:none!important;border:0!important;padding:0!important;
  backdrop-filter:none!important;display:grid;gap:12px;align-content:start;
  /* same trap one level down: this grid's implicit column is auto, whose floor is the
     min-content width of the cards in it — and a <select> contributes a wide intrinsic
     minimum however narrow the phone is */
  grid-template-columns:minmax(0,1fr)}
.rail-nav{display:grid;gap:5px}
.rail-nav a{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 11px;border-radius:9px;
  font-size:13px;color:var(--mute);transition:.2s}
.rail-nav a:hover{color:var(--tx);background:rgba(255,255,255,.04)}
.rail-nav a.on{color:var(--a);box-shadow:inset 2px 0 0 var(--a);background:rgba(var(--wash),.08)}
.rail-nav a small{font-size:10px;color:var(--dim)}
.rail{--x:0}
aside.rail2,.gd-7{display:grid;gap:14px}
.pf{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.pf input,.pf select,.pf textarea{display:block;width:100%;margin-top:5px;padding:10px;border:1px solid rgba(var(--wash),.22);
  border-radius:9px;font-size:13px;letter-spacing:0;text-transform:none;background:rgba(6,11,18,.8);color:var(--tx);font-family:var(--ui)}
.rail>form.gd-card,.card-light{background:#EFF4F9;border-color:#fff;color:#0A1220}
.rail>form.gd-card .pf,.card-light .pf{color:#5E6B80}
.rail>form.gd-card input,.rail>form.gd-card select{background:#fff;border-color:#D9DEE8;color:#0A1220}
.gd-imgph{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,var(--lift),var(--void));
  display:grid;place-items:center;min-height:120px}
.gd-imgph svg{position:absolute;inset:0;width:100%;height:100%;opacity:.22}
.gd-imgph span{position:relative;font-size:9px;letter-spacing:.2em;color:var(--dim)}
.gd-imgph.tall{min-height:180px}
.gd-pitch{position:relative;background:linear-gradient(180deg,#0F4A2A,#0A301C);border-radius:14px;overflow:hidden}
.gd-pitch svg{position:absolute;inset:0;width:100%;height:100%}
.gd-pos{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
  background:#EFF4F9;color:#0C1B30;font-size:10px;font-weight:700;display:grid;place-items:center;
  border:2px solid #0C1B30;cursor:pointer;transition:.15s}
.gd-pos:hover,.gd-pos.on{background-image:var(--metal)}
.gd-pos.tk{background:#3a4657;border-color:#5E6B80;color:#c8d2df;cursor:not-allowed}
.gd-media{aspect-ratio:16/7.5;border-radius:10px;background:var(--void);display:grid;place-items:center;
  color:rgba(var(--wash),.6);font-size:11px;letter-spacing:.14em;margin:8px 0}
.gd-provider{font-size:10px;color:var(--dim);letter-spacing:.05em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rt-grid{display:grid;gap:8px}
.rt-tile{position:relative;cursor:pointer}
.rt-tile input{position:absolute;opacity:0;pointer-events:none}
.rt-in{display:grid;place-items:center;text-align:center;min-height:40px;padding:8px 9px;border:1px solid rgba(var(--wash),.24);
  border-radius:10px;background:rgba(6,11,18,.7);transition:.15s}
.rt-in b{font-size:12px;color:var(--tx);font-weight:600}
.rt-tile:hover .rt-in{border-color:var(--a)}
.rt-tile input:checked+.rt-in{border-color:var(--a);background:rgba(var(--wash),.14);box-shadow:0 0 18px -8px var(--a)}
/* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), whose floor is the column's
   min-content width, so on a 320px phone the side column refused to shrink past its card
   and pushed My Space 42px into a sideways scroll. */
@media(max-width:1150px){.lay3,.lay3-wide{grid-template-columns:minmax(0,1fr)}}

/* ── The seven screen classes ────────────────────────────────────────────────
   .wrap/.gd-wrap were frozen at 1380px, so a 2560px office display or a video
   wall rendered a narrow band down the middle with the rest black. The three
   small classes already worked; these rules cover the four large ones, plus a
   pointer:coarse pass for the kiosk, which is not a width at all.
   Page-level tuning for the match grid stays in views/matches.php. */

/* 4. desktop monitor */
@media(min-width:1440px) and (max-width:1919px){
  .wrap,.gd-wrap{max-width:1340px}
  .lay3{grid-template-columns:280px minmax(0,1fr) 300px}
  .lay3-wide{grid-template-columns:360px minmax(0,1fr) 320px}
}
/* 5. large-format office display */
@media(min-width:1920px) and (max-width:2559px){
  html{font-size:17px}
  .wrap,.gd-wrap{max-width:1680px}
  .lay3{grid-template-columns:320px minmax(0,1fr) 340px;gap:24px}
  .lay3-wide{grid-template-columns:400px minmax(0,1fr) 360px;gap:24px}
}
/* 6 & 7. video wall and multi-monitor spans. Capped on purpose: a 3840px line of
   text is unreadable, so the page centres and stops growing past this. */
@media(min-width:2560px){
  html{font-size:20px}
  .wrap,.gd-wrap{max-width:2200px}
  .lay3{grid-template-columns:380px minmax(0,1fr) 400px;gap:30px}
  .lay3-wide{grid-template-columns:460px minmax(0,1fr) 420px;gap:30px}
}
/* 3. interactive kiosk — touch, but not a phone. Detected by input device.
   44px is the smallest reliable finger target; the rail icons and every
   control below were sized for a mouse. */
@media(pointer:coarse){
  .gd-btn,.pf input,.pf select,input,select,textarea,button{min-height:44px}
  .rail a,.rail button{min-height:44px;min-width:44px}
  a{-webkit-tap-highlight-color:rgba(var(--wash),.2)}
}
/* kiosks stand portrait on a large panel — phone rules must not apply there */
@media(pointer:coarse) and (orientation:portrait) and (min-width:1000px){
  .wrap,.gd-wrap{max-width:960px}
  .lay3,.lay3-wide{grid-template-columns:1fr}
}

/* The position and format tick-lists. .rt-grid/.rt-tile/.rt-in above already dress a tile for
   the radio pickers and work unchanged for checkboxes; these two only lay the tiles out four
   across, wrapping on a phone, and quieten the "tick any" hint beside the label.
   Here rather than in one page's own <style> because two pages use them now — the match join
   form and the My Space profile — and a second copy would drift. */
.mx-pick4{grid-template-columns:repeat(auto-fit,minmax(86px,1fr));margin-top:5px}
.mx-any{font-weight:500;letter-spacing:0;text-transform:none;color:var(--dim);font-size:11px}

/* Closed-by-default multi-selects. Markup comes from gd_dropdown() in boot.php and the
   rules from gd_dropdown_css(), so the frozen design pages — which never load this file —
   get the identical control from the same source. Edit it there, not here. */
.dd{position:relative;display:inline-block}.dd>summary{list-style:none;cursor:pointer;display:flex;gap:8px;align-items:baseline;padding:7px 11px;border:1px solid rgba(212,175,55,.24);border-radius:9px;white-space:nowrap}.dd>summary::-webkit-details-marker{display:none}.dd>summary::after{content:"";border:4px solid transparent;border-top-color:currentColor;margin-left:auto;transform:translateY(2px);opacity:.7}.dd[open]>summary,.dd[data-on="1"]>summary{border-color:#D4AF37}.dd-lab{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.72}.dd-say{font-size:12.5px;font-weight:600;color:#D4AF37}.dd-panel{position:absolute;z-index:60;top:calc(100% + 5px);left:0;min-width:210px;max-height:275px;overflow:auto;padding:6px;border:1px solid rgba(212,175,55,.3);border-radius:11px;background:#0B111A;box-shadow:0 18px 42px -14px rgba(0,0,0,.85)}.dd-opt{display:flex;gap:9px;align-items:center;padding:7px 9px;border-radius:7px;cursor:pointer}.dd-opt:hover{background:rgba(212,175,55,.10)}.dd-opt input{accent-color:#D4AF37;width:15px;height:15px;flex:none}.dd-opt span{font-size:12.5px}@media(max-width:560px){.dd{display:block}.dd-panel{left:0;right:0;min-width:0}}