/* remii.online — shared tokens, card faces and holofoil finishes */
:root{
  --bg:#05060b; --fg:#eef0ff; --mut:#9094b3; --line:rgba(255,255,255,.14); --panel:#141726;
  --accent:#8f8cff; --mint:#5ef0cf; --hot:#ff79b0; --sun:#ffc861; --ink:#0b0c12;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
.space-bg{background:radial-gradient(ellipse at 18% 8%,rgba(143,140,255,.16),transparent 52%),radial-gradient(ellipse at 88% 90%,rgba(255,121,176,.11),transparent 50%),radial-gradient(ellipse at 60% 40%,rgba(94,240,207,.05),transparent 60%),var(--bg)}

/* ---- card faces (the element holding .card-in sets --cw) ---- */
.card-in{position:absolute;inset:0;transform-style:preserve-3d}
.face{position:absolute;inset:0;border-radius:calc(var(--cw)*.05);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;isolation:isolate}
.front{background:linear-gradient(160deg,color-mix(in srgb,var(--a) 24%,#1b1e30),#0c0d15 60%,color-mix(in srgb,var(--b) 16%,#0c0d15));border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 0 0 calc(var(--cw)*.018) color-mix(in srgb,var(--a) 32%,transparent);padding:calc(var(--cw)*.06);display:flex;flex-direction:column;gap:calc(var(--cw)*.026);container-type:inline-size;color:var(--fg)}
.c-head{display:flex;justify-content:space-between;align-items:center;gap:2cqw;font-family:var(--mono);font-size:4.6cqw;color:#d8daf0;white-space:nowrap}
.gem{color:var(--a)}
.c-art{position:relative;flex:none;aspect-ratio:200/130;border-radius:3cqw;overflow:hidden;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--a) 26%,#0a0b12),#06070b 76%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.c-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.c-name{font-family:var(--display);font-size:11.5cqw;font-weight:800;line-height:.92;font-variation-settings:"wdth" 75,"opsz" 96;text-wrap:balance;margin-top:1.2cqw}
.c-sub{font-family:var(--display);font-size:5cqw;color:#bfc2da;line-height:1.25}
.c-foot{margin-top:auto;display:flex;justify-content:space-between;gap:2cqw;font-family:var(--mono);font-size:4cqw;color:#a9acc8;border-top:1px solid rgba(255,255,255,.14);padding-top:2.4cqw;white-space:nowrap;font-variant-numeric:tabular-nums}
.back{transform:rotateY(180deg);background:radial-gradient(circle at 50% 42%,#30356a,#141629 72%);border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:var(--fg)}
.back::before{content:"";position:absolute;inset:7%;border-radius:calc(var(--cw)*.03);border:1px solid rgba(255,255,255,.22);background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 1px,transparent 1px 8px)}
.bk-mid{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--cw)*.05)}
.re{position:relative;width:calc(var(--cw)*.5);aspect-ratio:1}
.re>svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.re .spin{animation:respin 48s linear infinite;will-change:transform}
.re .spin-r{animation:respin 30s linear infinite reverse;will-change:transform}
@keyframes respin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.re .spin,.re .spin-r{animation:none}}
.bk-word{font-family:var(--display);font-weight:800;font-size:calc(var(--cw)*.14);line-height:1;font-variation-settings:"wdth" 75,"opsz" 96;white-space:nowrap;color:#e6e8f6}
/* rune watermark behind every card front */
.front>.rw{position:absolute;right:-14%;bottom:4%;width:74%;height:auto;color:#fff;opacity:.06;z-index:0;pointer-events:none}
.front>:not(.rw):not(.foil):not(.sparkle):not(.glare):not(.shade){position:relative;z-index:1}
.bk-word small{display:block;font-size:.42em;font-weight:500;color:#c9cbe6;letter-spacing:.02em}
/* ---- "remii.online" type rows (pack + card backs) ---- */
.tr{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75,"opsz" 96;--rs:16px;--hs:32px}
.tr .r{white-space:nowrap;line-height:1.04;font-size:var(--rs);letter-spacing:.01em}
.tr .r span{display:inline-block}
.tr .r.s{color:rgba(255,255,255,.06)}
.tr .r.o{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14)}
.tr .r.h{font-size:var(--hs);text-align:center;line-height:1.1;margin-block:.08em;letter-spacing:-.005em;background:linear-gradient(180deg,#fff 35%,#b9bdf0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.back .tr{--rs:calc(var(--cw)*.075);--hs:calc(var(--cw)*.15);inset:7%;border-radius:calc(var(--cw)*.03)}
.shade{position:absolute;inset:0;pointer-events:none;background:#04050a;opacity:var(--shade,0);z-index:4}

/* ---- holo layers ----
   Every moving layer is no-repeat with long transparent ramps, and its position is clamped in JS,
   so the reflection fades out instead of ending in a hard edge at steep angles. */
.glare{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.2),rgba(255,255,255,.06) 30%,transparent 60%)}
.sparkle{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.2;z-index:2;
  background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 .6px,transparent 1.3px),radial-gradient(circle,rgba(255,255,255,.7) 0 .5px,transparent 1.1px);
  background-size:23px 29px,17px 13px;background-position:calc(var(--fx,50%)*.6) calc(var(--fy,50%)*.4),calc(var(--fx,50%)*-.4) var(--fy,50%)}
.foil{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:var(--fo,.5);z-index:2;background-repeat:no-repeat}
.foil::before{content:"";position:absolute;inset:0}

/* 1 prism: classic diagonal rainbow band */
.fv-prism{background-image:linear-gradient(115deg,transparent 22%,rgba(255,121,176,.12) 30%,rgba(255,121,176,.5) 37%,rgba(255,200,97,.5) 43%,rgba(94,240,207,.5) 49%,rgba(143,140,255,.5) 55%,rgba(143,140,255,.12) 62%,transparent 70%);background-size:300% 300%;background-position:var(--fx,50%) var(--fy,50%)}
.fv-prism::before{background:repeating-linear-gradient(60deg,rgba(255,255,255,.07) 0 2px,transparent 2px 7px)}
/* 2 cosmos: drifting colour clouds over a star field */
.fv-cosmos{--fo:.55;background-image:radial-gradient(45% 45% at var(--fx,50%) var(--fy,50%),rgba(255,121,176,.55),transparent 72%),radial-gradient(50% 50% at calc(100% - var(--fx,50%)) calc(100% - var(--fy,50%)),rgba(94,240,207,.5),transparent 72%),radial-gradient(38% 38% at var(--fy,50%) var(--fx,50%),rgba(255,200,97,.45),transparent 72%)}
.fv-cosmos::before{background-image:radial-gradient(circle,rgba(255,255,255,.8) 0 .7px,transparent 1.2px);background-size:11px 13px;opacity:.3}
/* 3 bars: reverse-holo vertical spectrum lines revealed by a soft sweep */
.fv-bars{--fo:.45;background-image:repeating-linear-gradient(90deg,rgba(255,121,176,.45) 0 3px,rgba(255,200,97,.45) 3px 6px,rgba(94,240,207,.45) 6px 9px,rgba(143,140,255,.45) 9px 12px);
  -webkit-mask-image:linear-gradient(105deg,transparent 25%,#000 45%,#000 55%,transparent 75%);mask-image:linear-gradient(105deg,transparent 25%,#000 45%,#000 55%,transparent 75%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:var(--fx,50%) 0;mask-position:var(--fx,50%) 0}
/* 4 galaxy: rotating spectrum arcs inside a soft spotlight */
.fv-galaxy{--fo:.5;background-image:conic-gradient(from var(--fa,0deg) at 50% -30%,rgba(255,121,176,.5),rgba(255,200,97,.5),rgba(94,240,207,.5),rgba(143,140,255,.5),rgba(255,121,176,.5));
  -webkit-mask-image:radial-gradient(65% 65% at var(--fx,50%) var(--fy,50%),#000,transparent 75%);mask-image:radial-gradient(65% 65% at var(--fx,50%) var(--fy,50%),#000,transparent 75%)}
.fv-galaxy::before{background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 .8px,transparent 1.4px);background-size:19px 23px;opacity:.35}
/* 5 lattice: crosshatch etching */
.fv-lattice{--fo:.55;background-image:repeating-linear-gradient(45deg,rgba(192,132,252,.6) 0 1px,transparent 1px 8px),repeating-linear-gradient(-45deg,rgba(94,240,207,.6) 0 1px,transparent 1px 8px),linear-gradient(120deg,transparent 30%,rgba(255,200,97,.35) 50%,transparent 70%);background-size:auto,auto,300% 300%;background-repeat:repeat,repeat,no-repeat;background-position:0 0,0 0,var(--fx,50%) var(--fy,50%);
  -webkit-mask-image:radial-gradient(70% 70% at var(--fx,50%) var(--fy,50%),#000 20%,transparent 78%);mask-image:radial-gradient(70% 70% at var(--fx,50%) var(--fy,50%),#000 20%,transparent 78%)}
/* 6 rings: concentric ripples that follow the light */
.fv-rings{--fo:.5;background-image:repeating-radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(255,178,107,.5) 0,rgba(255,121,176,.5) 9px,rgba(143,140,255,.5) 18px,rgba(94,240,207,.5) 27px,rgba(255,178,107,.5) 36px);
  -webkit-mask-image:radial-gradient(75% 75% at var(--fx,50%) var(--fy,50%),#000 10%,transparent 80%);mask-image:radial-gradient(75% 75% at var(--fx,50%) var(--fy,50%),#000 10%,transparent 80%)}
/* 7 scales: tiled scale texture under a warm band */
.fv-scales{--fo:.5;background-image:linear-gradient(70deg,transparent 25%,rgba(255,159,67,.45) 40%,rgba(123,228,149,.45) 50%,rgba(127,209,255,.45) 60%,transparent 75%);background-size:300% 300%;background-position:var(--fx,50%) var(--fy,50%)}
.fv-scales::before{background-image:radial-gradient(circle at 50% 0,transparent 5px,rgba(255,255,255,.28) 5.5px,transparent 7px);background-size:12px 8px;opacity:.45}
/* 8 glitter: layered flakes moving at different speeds */
.fv-glitter{--fo:.42;background-image:radial-gradient(circle,rgba(255,255,255,1) 0 .7px,transparent 1.2px),radial-gradient(circle,rgba(123,228,149,.9) 0 .8px,transparent 1.4px),radial-gradient(circle,rgba(143,140,255,.9) 0 .9px,transparent 1.5px),linear-gradient(135deg,transparent 30%,rgba(123,228,149,.3) 50%,transparent 70%);
  background-size:9px 11px,14px 13px,21px 17px,300% 300%;background-repeat:repeat,repeat,repeat,no-repeat;
  background-position:calc(var(--fx,50%)*.3) calc(var(--fy,50%)*.3),calc(var(--fx,50%)*-.5) calc(var(--fy,50%)*.6),calc(var(--fx,50%)*.8) calc(var(--fy,50%)*-.4),var(--fx,50%) var(--fy,50%)}

/* ---- lighter render for phones and tablets ---- */
.lite .sparkle,.lite .foil,.lite .glare{display:none}
.lite .foil::before{display:none}
.lite .back .re .spin,.lite .back .re .spin-r{animation:none;will-change:auto}
.face,.fc{contain:paint}