/* JR v3 "Red noir" skin. Loads after app.css + app2.css and only changes the look:
   black background, red accents and buttons with white text, white/silver secondary, a touch of gold.
   Remove this file (and its <link>) to go back to the v2 look. */
:root{--red:#FF2E3E;--red2:#FF6E78;--red3:#B80F1F;--silver:#E9E9EE;--gold:#F5B942;
  --bg:#0A0A0C;--s1:#121014;--s2:#1B171C;--line:rgba(255,255,255,.11);--line2:rgba(255,255,255,.22);--mute:#B4B0B6}
html,body{background:#0A0A0C !important}
::selection{background:rgba(255,46,62,.45);color:#fff}

/* colour sky behind the 3D cards */
#bg{background:
  radial-gradient(55% 45% at 12% 8%,rgba(255,46,62,.22),transparent 70%),
  radial-gradient(45% 45% at 88% 22%,rgba(233,233,238,.10),transparent 70%),
  radial-gradient(60% 55% at 50% 105%,rgba(245,185,66,.13),transparent 70%),
  linear-gradient(180deg,#1E080B,#0A0A0C 55%,#101012)}
body.pick{cursor:pointer}

/* header: light glass with a red hairline */
.hdr.solid{background:rgba(22,14,18,.62);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 rgba(255,46,62,.18)}
.nav a::after{background:var(--red)}
.nav a.nav-jc,.drawer a.nav-jc{color:var(--red2)}
.nav a.nav-jc::after{background:linear-gradient(90deg,var(--red),#fff,var(--red))}
.dot{background:var(--red);color:#fff}
.balchip em{background:linear-gradient(135deg,var(--red2),var(--red3));color:#fff}
.cta-sm{background:linear-gradient(135deg,var(--red2),var(--red3));color:#fff;box-shadow:0 10px 30px -12px rgba(255,46,62,.7)}

/* hero: white title, last word white-to-red */
.htitle .ln:last-child>span{background:linear-gradient(100deg,#fff,var(--red) 45%,var(--red3));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px rgba(255,46,62,.35))}
.hpill{border-color:rgba(255,46,62,.45)}
.hpill b{background:linear-gradient(135deg,var(--red2),var(--red3));color:#fff}
.hpill span{color:var(--red2)}
.hbtn.main{background:linear-gradient(135deg,var(--red2),var(--red) 45%,var(--red3));color:#fff;box-shadow:0 0 0 1px rgba(255,110,120,.45),0 18px 60px -12px rgba(255,46,62,.7)}
.hbtn.main .hb-i{background:#fff;color:var(--red3)}
.hbtn.main::after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%)}
.hbtn.alt::before{background:conic-gradient(from var(--a,0deg),rgba(255,46,62,.95),rgba(255,255,255,.08) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.9) 75%,rgba(255,255,255,.08))}

/* buttons: red with white text (ghost and danger keep their own look) */
.cta{background:linear-gradient(135deg,var(--red2),var(--red) 45%,var(--red3));color:#fff;box-shadow:0 12px 40px -12px rgba(255,46,62,.65)}
.cta span{background:#fff;color:var(--red3)}
.cta.ghost{background:transparent;color:var(--ink);box-shadow:none}
.btn:not(.ghost):not(.danger){background:linear-gradient(135deg,var(--red2),var(--red) 45%,var(--red3));color:#fff;box-shadow:0 10px 30px -14px rgba(255,46,62,.7)}
.btn:not(.ghost):not(.danger):hover{box-shadow:0 0 0 5px rgba(255,46,62,.15),0 14px 40px -12px rgba(255,46,62,.8)}

/* accents that were gold become red (the gold JR CART tier keeps its gold metal) */
.kick{color:var(--red2)}
.jladder>div.on{border-color:rgba(255,46,62,.5);background:linear-gradient(135deg,rgba(255,46,62,.14),rgba(255,255,255,.03))}
.jladder small{color:var(--red2)}
.jc-home{border-color:rgba(255,46,62,.22);background:radial-gradient(120% 140% at 100% 0%,rgba(255,46,62,.12),transparent 55%),rgba(255,255,255,.02)}
.ptag em{background:linear-gradient(135deg,var(--red2),var(--red3));color:#fff}
.jctips{border-color:rgba(255,46,62,.35)}
.gc-plus{background:linear-gradient(135deg,var(--red2),var(--red3));color:#fff}
.gc-plus:hover,.gc-plus:focus-visible{box-shadow:0 12px 24px -6px #000,0 0 0 3px rgba(255,46,62,.4)}
.trust>div{background:rgba(255,255,255,.035)}
.trust>div:hover{border-color:rgba(255,46,62,.4)}
.bx:hover{border-color:rgba(255,46,62,.45)}
input:focus,select:focus,textarea:focus{border-color:rgba(255,46,62,.6) !important;outline:none}

/* progress bar under the header, back-to-top */
.nprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none}
.nprog i{display:block;height:100%;width:var(--np,0%);background:linear-gradient(90deg,#fff,var(--red),var(--red3));box-shadow:0 0 12px rgba(255,46,62,.6)}
.ntop{position:fixed;right:18px;bottom:18px;z-index:60;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(22,14,18,.7);border:1px solid var(--line2);backdrop-filter:blur(10px);color:#fff;font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.ntop.on{opacity:1;pointer-events:auto}
.ntop:hover{transform:translateY(-3px);border-color:var(--red)}

/* cinematic entry when a floating card is clicked */
body::before,body::after{content:'';position:fixed;left:0;right:0;height:0;background:#000;z-index:200;pointer-events:none;transition:height .6s cubic-bezier(.2,.8,.2,1)}
body::before{top:0}body::after{bottom:0}
body.cine::before,body.cine::after{height:13vh}
body.cine #app{opacity:0;transition:opacity .4s}
body.cine #bg{opacity:1 !important}
#app{transition:opacity .5s}
.cine-t{position:fixed;left:0;right:0;bottom:16vh;z-index:210;text-align:center;pointer-events:none;opacity:0;transform:translateY(14px);transition:opacity .5s .3s,transform .7s .3s cubic-bezier(.2,.8,.2,1)}
body.cine .cine-t{opacity:1;transform:none}
.cine-t span{display:block;font:600 12px 'Space Grotesk',sans-serif;letter-spacing:.4em;text-transform:uppercase;color:var(--red2)}
.cine-t b{display:block;font:600 clamp(34px,6vw,72px)/1 'Space Grotesk',sans-serif;letter-spacing:-.04em;color:#fff;text-shadow:0 0 40px rgba(255,46,62,.5)}
.cine-flash{position:fixed;inset:0;z-index:220;background:#fff;opacity:0;pointer-events:none}
.cine-flash.go{animation:cflash .7s ease-out}
@keyframes cflash{0%{opacity:0}20%{opacity:.85}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){body::before,body::after,.cine-t{transition:none}}

/* v1.5.2: surfaces that were grey/silver become black with red light */
.gc-card,.gcard3d-in,.walletcard,.wcard,.bcard,.mc-f,.mc-b{
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,46,62,.30),transparent 55%),linear-gradient(140deg,#2a0b10 0%,#130a0c 45%,#060506 100%) !important;
  border-color:rgba(255,46,62,.32) !important}
.gc-card{box-shadow:0 24px 40px -26px #000,inset 0 1px 0 rgba(255,110,120,.28)}
.gc:hover .gc-card{box-shadow:0 40px 60px -30px #000,0 0 0 1px rgba(255,46,62,.55),0 18px 50px -20px rgba(255,46,62,.45)}
.gc-top{color:rgba(255,160,168,.8)}
.line-card,.need-logo,.empty-cards span,.stack span,.acct-bal{
  background:linear-gradient(140deg,#2a0b10,#0a0809) !important;border-color:rgba(255,46,62,.28) !important}
.bx{background:radial-gradient(120% 120% at 100% 0%,rgba(255,46,62,.24) 0%,#140a0d 45%,#070607 100%);border-color:rgba(255,46,62,.16)}
.bx:hover{border-color:rgba(255,46,62,.5);box-shadow:0 20px 50px -25px rgba(255,46,62,.5)}
.band{background:radial-gradient(90% 140% at 0% 100%,rgba(255,46,62,.20),transparent 60%),linear-gradient(180deg,#150b0e,#080607) !important;border-color:rgba(255,46,62,.18) !important}
.split-art{background:radial-gradient(80% 70% at 30% 20%,rgba(255,46,62,.28),transparent 70%),linear-gradient(180deg,#140a0d,#060506) !important}
.sum,.panel,.sup,.card,.need-stat,.need,.qa-box{background:linear-gradient(180deg,#150d10,#09070a) !important;border-color:rgba(255,46,62,.14) !important}
.sup:hover,.need:hover{border-color:rgba(255,46,62,.45) !important}
.mc-stripe{background:linear-gradient(180deg,#0a0a0a,#2a0b10)}