/*
 * Holographic profile card (prototype)
 *
 * Effect driven by custom properties that /js/holo_card.js updates on pointer movement:
 *   --pointer-x/y, --pointer-from-center, --background-x/y, --rotate-x/y, --card-opacity
 * Technique inspired by poke-holo (https://poke-holo.simey.me); styles here are original.
 */

.holo-card {
    --pointer-x: 50%;
    --pointer-y: 50%;
    --pointer-from-center: 0;
    --pointer-from-left: 0.5;
    --pointer-from-top: 0.5;
    --background-x: 50%;
    --background-y: 50%;
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --card-opacity: 0;

    --card-radius: 4.5% / 3.2%;
    --card-glow: hsl(190, 100%, 70%);
    --frame-a: #b9c3d6;
    --frame-b: #6f7a91;
    --frame-c: #eef2fa;
    --ink: #f3f4ff;               /* text over the portrait */

    /* info panel text; its background is set per flare tier and subrank (see "panel background") */
    --info-ink: #1d1a26;
    --info-muted: var(--chip-dark);
    --info-accent: var(--chip-dark);

    width: min(80vw, 360px);
    aspect-ratio: 63 / 88;
    perspective: 700px;
    container-type: inline-size;   /* lets the face scale its text with the card (cqw units) */
    touch-action: none;
    font-family: 'Poppins', 'Rounded Mplus 1c', sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.holo-card__rotator {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius);
    transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.6);
    transition: box-shadow 0.4s ease;
    overflow: hidden;
    isolation: isolate;
}

.holo-card--active .holo-card__rotator {
    box-shadow:
        0 0 3px -1px white,
        0 0 3px 1px var(--card-glow),
        0 0 12px 2px var(--card-glow),
        0 10px 20px -5px black,
        0 0 40px -30px var(--card-glow),
        0 0 50px -20px var(--card-glow);
}

/* ---------- card face ----------
 * Sizes are in em off .holo-card__front's 4cqw font size (14.4px on a 360px card), so the whole
 * face scales with the card.
 */

.holo-card__front {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 1.95cqw;
    box-sizing: border-box;
    border-radius: var(--card-radius);
    font-size: 4cqw;
    /* tier-coloured metal frame */
    background: linear-gradient(135deg, var(--frame-c) 0%, var(--frame-a) 22%, var(--frame-b) 50%, var(--frame-a) 78%, var(--frame-c) 100%);
    color: var(--ink);
}

.hc-inner {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 2.8% / 2%;
    overflow: hidden;
    isolation: isolate;
    background: var(--tier-base);
}

/* portrait: the avatar (square, 360px) inset in the panel, with the flare chips and name over it */

.hc-art {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 1 / 0.92;
    margin: 0.75em 0.75em 0;
    border-radius: 0.6em;
    box-shadow:
        0 0 0 0.12em rgba(255, 255, 255, 0.55),
        0 0.25em 0.7em rgba(4, 38, 58, 0.35);
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b);
    background-size: cover;
    background-repeat: no-repeat;
    /* the window is slightly wider than tall; trim from the bottom rather than cutting off heads */
    background-position: center 25%;
}

/* darken the top edge for the chips and the bottom for the name */
.hc-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 22%, transparent 55%, rgba(8, 8, 20, 0.85) 100%);
}

.hc-chips {
    position: absolute;
    z-index: 1;
    top: 0.7em;
    left: 0.7em;
    right: 0.7em;
    display: flex;
    justify-content: space-between;
    gap: 0.5em;
}

/*
 * Flare chips: foil in the colours of that rank's DDR WORLD flare icon (--chip-dark/mid/light, set per
 * .hc-tier--* below), with white outlined text like the icons' lettering. The foil slides as the card
 * tilts and a sheen follows the pointer.
 */
.hc-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35em;
    min-width: 0;
    padding: 0.2em 0.65em;
    border-radius: 999px;
    overflow: hidden;
    font-size: 0.76em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: white;
    text-shadow:
        0 0 0.2em var(--chip-dark),
        0 0.06em 0 var(--chip-dark);
    background: linear-gradient(115deg,
        var(--chip-dark) 0%, var(--chip-mid) 22%, var(--chip-light) 40%,
        var(--chip-mid) 55%, var(--chip-dark) 75%, var(--chip-mid) 100%);
    background-size: 250% 100%;
    background-position: var(--background-x) 50%;
    border: 1px solid var(--chip-light);
    box-shadow:
        inset 0 0.1em 0.15em rgba(255, 255, 255, 0.45),
        inset 0 -0.1em 0.2em rgba(0, 0, 0, 0.25),
        0 0.1em 0.35em rgba(0, 0, 0, 0.4);
}

.hc-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent calc(var(--pointer-x) - 25%),
        rgba(255, 255, 255, 0.55) var(--pointer-x),
        transparent calc(var(--pointer-x) + 25%));
    opacity: var(--card-opacity);
}

/* the DP chip sits on the right even when there's no SP chip */
.hc-chip--dp {
    margin-left: auto;
}

.hc-chip__label {
    font-size: 0.73em;
    letter-spacing: 0.18em;
    opacity: 0.85;
}

.hc-names {
    position: absolute;
    z-index: 1;
    left: 0.97em;
    right: 0.97em;
    bottom: 0.83em;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.hc-username {
    font-size: 2.36em;
    font-weight: 800;
    letter-spacing: -0.01em;
    /* room for descenders, which overflow: hidden would otherwise clip */
    line-height: 1.25;
    margin-bottom: -0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hc-dancer {
    display: flex;
    align-items: center;
    gap: 0.55em;
    font-size: 0.76em;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tier-ink, var(--ink));
}

.hc-dancer img {
    height: 0.8em;
    display: block;
}

/* info panel: best scores + footer */

.hc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
    padding: 0.7em 0.83em 0.55em;
    color: var(--info-ink);
}

/* grows to fill the panel, so the empty-state message can centre in it */
.hc-best {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.hc-label {
    display: flex;
    align-items: center;
    gap: 0.8em;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--info-muted);
}

.hc-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}

.hc-feats__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7em;
    margin-top: 0.5em;
}

.hc-feat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
    min-width: 0;
}

.hc-feat__jacket {
    width: 4.9em;
    height: 4.9em;
    border-radius: 0.45em;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0.15em 0.45em rgba(0, 0, 0, 0.28);
}

.hc-feat__points {
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.hc-feat__meta {
    display: flex;
    align-items: center;
    gap: 0.3em;
    white-space: nowrap;
}

.hc-feat__diff {
    padding: 0.05em 0.4em;
    border-radius: 0.3em;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: white;
    background: #777;
}

/* DDR difficulty colours, a shade darker than .diff-bg-color-* in common.css so white text reads */
.hc-feat__diff[data-diff="0"] { background: #1a9fbd; }
.hc-feat__diff[data-diff="1"], .hc-feat__diff[data-diff="5"] { background: #c48a05; }
.hc-feat__diff[data-diff="2"], .hc-feat__diff[data-diff="6"] { background: #e0213a; }
.hc-feat__diff[data-diff="3"], .hc-feat__diff[data-diff="7"] { background: #1f9a13; }
.hc-feat__diff[data-diff="4"], .hc-feat__diff[data-diff="8"] { background: #b523c4; }

.hc-feat__grade {
    font-size: 0.76em;
    font-weight: 700;
    color: var(--info-accent);
}

/*
 * PFC / MFC: a foil badge in place of the letter grade, and a matching ring around the jacket.
 * PFC is gold, MFC is iridescent; like the chips, the foil slides with the tilt and a sheen follows
 * the pointer.
 */
.hc-feat--pfc { --fc-ring: #f5c542; --fc-glow: rgba(255, 196, 40, 0.6); }
.hc-feat--mfc { --fc-ring: #ffffff; --fc-glow: rgba(190, 150, 255, 0.7); }

.hc-feat--pfc .hc-feat__jacket,
.hc-feat--mfc .hc-feat__jacket {
    box-shadow:
        0 0 0 0.12em var(--fc-ring),
        0 0 0.6em 0.05em var(--fc-glow),
        0 0.15em 0.45em rgba(0, 0, 0, 0.28);
}

.hc-feat__grade--pfc,
.hc-feat__grade--mfc {
    position: relative;
    overflow: hidden;
    padding: 0.02em 0.45em;
    border-radius: 0.3em;
    font-size: 0.7em;
    font-weight: 800;
    letter-spacing: 0.08em;
    background-size: 300% 100%;
    background-position: var(--background-x) 50%;
    box-shadow:
        inset 0 0.08em 0.1em rgba(255, 255, 255, 0.7),
        0 0 0.4em var(--fc-glow);
}

.hc-feat__grade--pfc {
    color: #5a3a00;
    background-image: linear-gradient(115deg,
        #b8860b 0%, #f5c542 18%, #fff6c8 32%, #f0b429 48%,
        #fff1a8 64%, #d4a017 80%, #f5c542 100%);
    border: 1px solid #fff1a8;
}

.hc-feat__grade--mfc {
    color: #2a1d5c;
    background-image: linear-gradient(115deg,
        #ffc2e2 0%, #ffe9a8 14%, #c2ffd8 28%, #b3ecff 42%,
        #d6c2ff 56%, #ffc2e2 70%, #ffffff 82%, #b3ecff 100%);
    border: 1px solid white;
}

.hc-feat__grade--pfc::after,
.hc-feat__grade--mfc::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent calc(var(--pointer-x) - 20%),
        rgba(255, 255, 255, 0.85) var(--pointer-x),
        transparent calc(var(--pointer-x) + 20%));
    opacity: var(--card-opacity);
}

.hc-empty {
    margin: auto 0;
    text-align: center;
    font-size: 0.75em;
    font-style: italic;
    color: var(--info-muted);
}

.hc-footer {
    display: flex;
    justify-content: flex-end;
    font-size: 0.55em;
}

.hc-logo {
    height: 1.9em;
    width: auto;
    display: block;
}

/* ---------- flare tiers ----------
 * The frame metal and glow follow the player's best flare rank (see pc_tier in profile_card.ejs).
 * NONE keeps the default chrome from .holo-card.
 */

.hc-tier--mercury { --frame-c: #e4e2de; --frame-a: #a9a6a0; --frame-b: #5f5c58; --card-glow: hsl(30, 10%, 75%); }
.hc-tier--venus   { --frame-c: #fff3d6; --frame-a: #e6c98f; --frame-b: #9c7b45; --card-glow: hsl(40, 90%, 70%); --tier-ink: #f1d9a6; }
.hc-tier--earth   { --frame-c: #d8f4ff; --frame-a: #5fb2e0; --frame-b: #2c6a4a; --card-glow: hsl(195, 90%, 60%); --tier-ink: #8fd3f5; }
.hc-tier--mars    { --frame-c: #ffd9c7; --frame-a: #e0724a; --frame-b: #7d2a18; --card-glow: hsl(15, 95%, 60%); --tier-ink: #ff9d7a; }
.hc-tier--jupiter { --frame-c: #fbe7d0; --frame-a: #d7a36e; --frame-b: #8a5530; --card-glow: hsl(30, 90%, 62%); --tier-ink: #f0bf8c; }
.hc-tier--saturn  { --frame-c: #fff4c2; --frame-a: #e2c35a; --frame-b: #7e6620; --card-glow: hsl(48, 100%, 60%); --tier-ink: #f5d76e; }
.hc-tier--uranus  { --frame-c: #e0fffc; --frame-a: #73e3dc; --frame-b: #237a82; --card-glow: hsl(175, 90%, 60%); --tier-ink: #8cf0e8; }
.hc-tier--neptune { --frame-c: #d6e2ff; --frame-a: #5277e8; --frame-b: #1b2a78; --card-glow: hsl(225, 100%, 65%); --tier-ink: #93aefc; }
.hc-tier--sun     { --frame-c: #fffbe0; --frame-a: #ffc43d; --frame-b: #d9480f; --card-glow: hsl(38, 100%, 58%); --tier-ink: #ffd166; }

/* WORLD: an iridescent frame instead of a single metal */
.hc-tier--world {
    --card-glow: hsl(290, 100%, 72%);
    --tier-ink: #ffb3f0;
}

/* flare chip foils, picked from the DDR WORLD flare rank icons */
.hc-tier--none    { --chip-dark: #2b2b30; --chip-mid: #7c7c84; --chip-light: #e6e6ea; }
.hc-tier--mercury { --chip-dark: #0b4fae; --chip-mid: #2aa8ec; --chip-light: #b8efff; }
.hc-tier--venus   { --chip-dark: #b36a00; --chip-mid: #f2b300; --chip-light: #fff1a0; }
.hc-tier--earth   { --chip-dark: #0b6b35; --chip-mid: #27c563; --chip-light: #c4ffd6; }
.hc-tier--mars    { --chip-dark: #a3151f; --chip-mid: #ec4a3f; --chip-light: #ffc2b0; }
.hc-tier--jupiter { --chip-dark: #7d5117; --chip-mid: #cf9e55; --chip-light: #fbe6bd; }
.hc-tier--saturn  { --chip-dark: #7e0c5f; --chip-mid: #d8409e; --chip-light: #ffc4ea; }
.hc-tier--uranus  { --chip-dark: #2a8190; --chip-mid: #7fd6df; --chip-light: #e8feff; }
.hc-tier--neptune { --chip-dark: #1d1560; --chip-mid: #4638b0; --chip-light: #b4aaff; }
.hc-tier--sun     { --chip-dark: #c23300; --chip-mid: #ff8212; --chip-light: #ffe066; }
.hc-tier--world   { --chip-dark: #3a1670; --chip-mid: #a060ff; --chip-light: #ffffff; }

.hc-chip.hc-tier--world {
    background-image: linear-gradient(115deg,
        #ff4f9a 0%, #ffb13b 14%, #f6f04a 26%, #3ee08a 38%,
        #2fc4ff 50%, #6a5cff 62%, #d24dff 74%, #ff4f9a 86%, #ffb13b 100%);
}

.hc-tier--world .holo-card__front {
    background: linear-gradient(135deg,
        #ffd1e8 0%, #ff8fc7 14%, #ffd36e 28%, #9ef0c4 42%,
        #7fd6ff 56%, #a98bff 70%, #ff8fc7 84%, #ffe9f4 100%);
}

/* ---------- panel background ----------
 * Tinted in the player's flare colours (the .hc-tier--* chip foils), and escalating with the subrank
 * (.hc-sub--0..3 = RANK, RANK+, RANK++, RANK+++; see pc_sub in profile_card.ejs): the tint reaches
 * further down the panel and the motif changes at each step, from a plain tint to pinstripes, chevrons,
 * and finally a diamond lattice over a sunburst with a lit rim. The holo level climbs with it too
 * (see "holo level by subrank" below).
 * Stick to plain linear/radial gradients and SVG images here: the html2canvas build behind "Save image"
 * can't draw repeating/conic gradients, color-mix(), masks or blend modes. Patterns drift a little
 * against the tilt so they read as sitting under the surface.
 */
.holo-card {
    --drift-x: calc((var(--pointer-from-left) - 0.5) * -1.5em);
    --drift-y: calc((var(--pointer-from-top) - 0.5) * -1.5em);
    /* pattern colours; WORLD's dark panel tones these down */
    --tier-white: rgba(255, 255, 255, 0.5);
    --tier-white-strong: rgba(255, 255, 255, 0.72);
    --tier-stripes: linear-gradient(135deg,
            var(--tier-white) 25%, transparent 25%, transparent 50%,
            var(--tier-white) 50%, var(--tier-white) 75%, transparent 75%) var(--drift-x) var(--drift-y) / 0.5em 0.5em;
    --tier-burst: radial-gradient(ellipse at 50% 22%, var(--chip-mid) 0%, transparent 50%);
    /* how far down the tint reaches before fading to white */
    --tier-reach: 45%;
    --tier-base: linear-gradient(180deg, var(--chip-light) 0%, #ffffff var(--tier-reach));
}

.hc-sub--1 { --tier-reach: 80%; }
.hc-sub--2 { --tier-reach: 115%; }
.hc-sub--3 { --tier-reach: 160%; }

/*
 * WORLD sits above the planets, so it gets a look of its own rather than a tint: a dark deep-space
 * panel with a rainbow aurora that brightens with the subrank, and light ink. It's the only dark card
 * in the ladder.
 */
.hc-tier--world {
    --world-aurora: 0.22;
    --tier-white: rgba(255, 255, 255, 0.07);
    --tier-white-strong: rgba(255, 255, 255, 0.12);
    --tier-base:
        radial-gradient(ellipse at 15% 55%, rgba(255, 80, 180, var(--world-aurora)) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 45%, rgba(60, 200, 255, var(--world-aurora)) 0%, transparent 45%),
        radial-gradient(ellipse at 55% 92%, rgba(150, 90, 255, var(--world-aurora)) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 100%, rgba(255, 200, 80, var(--world-aurora)) 0%, transparent 35%),
        linear-gradient(180deg, #1c1245 0%, #0c0a26 100%);
    --info-ink: #f3f4ff;
    --info-muted: #cbbfff;
    --info-accent: #ffb3f0;
}

.hc-tier--world.hc-sub--1 { --world-aurora: 0.32; }
.hc-tier--world.hc-sub--2 { --world-aurora: 0.45; }
.hc-tier--world.hc-sub--3 { --world-aurora: 0.6; }

.hc-sub--1 .hc-inner {
    background: var(--tier-stripes), var(--tier-base);
}

/* chevrons */
.hc-sub--2 .hc-inner {
    background:
        linear-gradient(135deg, var(--tier-white) 25%, transparent 25%) calc(var(--drift-x) - 0.5em) var(--drift-y) / 1em 1em,
        linear-gradient(225deg, var(--tier-white) 25%, transparent 25%) calc(var(--drift-x) - 0.5em) var(--drift-y) / 1em 1em,
        linear-gradient(315deg, var(--tier-white) 25%, transparent 25%) var(--drift-x) var(--drift-y) / 1em 1em,
        linear-gradient(45deg, var(--tier-white) 25%, transparent 25%) var(--drift-x) var(--drift-y) / 1em 1em,
        var(--tier-base);
}

/* diamond lattice over a sunburst from behind the portrait, with a rim lit in the tier colour */
.hc-sub--3 .hc-inner {
    background:
        linear-gradient(45deg, transparent 45%, var(--tier-white-strong) 45%, var(--tier-white-strong) 55%, transparent 55%) var(--drift-x) var(--drift-y) / 1.4em 1.4em,
        linear-gradient(135deg, transparent 45%, var(--tier-white-strong) 45%, var(--tier-white-strong) 55%, transparent 55%) var(--drift-x) var(--drift-y) / 1.4em 1.4em,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='xMidYMin slice' fill='%23fff' fill-opacity='.22'%3E%3Cpath d='M100 60L400 60L396.3 106.9ZM100 60L385.3 152.7L367.3 196.2ZM100 60L342.7 236.3L312.1 272.1ZM100 60L276.3 302.7L236.2 327.3ZM100 60L192.7 345.3L146.9 356.3ZM100 60L100 360L53.1 356.3ZM100 60L7.3 345.3L-36.2 327.3ZM100 60L-76.3 302.7L-112.1 272.1ZM100 60L-142.7 236.3L-167.3 196.2ZM100 60L-185.3 152.7L-196.3 106.9ZM100 60L-200 60L-196.3 13.1ZM100 60L-185.3 -32.7L-167.3 -76.2ZM100 60L-142.7 -116.3L-112.1 -152.1ZM100 60L-76.3 -182.7L-36.2 -207.3ZM100 60L7.3 -225.3L53.1 -236.3ZM100 60L100 -240L146.9 -236.3ZM100 60L192.7 -225.3L236.2 -207.3ZM100 60L276.3 -182.7L312.1 -152.1ZM100 60L342.7 -116.3L367.3 -76.2ZM100 60L385.3 -32.7L396.3 13.1Z'/%3E%3C/svg%3E") calc(50% + var(--drift-x)) 0 / cover no-repeat,
        var(--tier-burst),
        var(--tier-base);
    box-shadow:
        inset 0 0 0 0.16em var(--chip-mid),
        inset 0 0 1.6em var(--chip-light);
}

/*
 * Glitter (++ and up) and a pointer-following sheen (+++) only show while the card is handled, so a
 * card lying flat stays clean; z-index -1 keeps them under the panel's content (.hc-inner isolates).
 */
.hc-sub--2 .hc-inner::before,
.hc-sub--3 .hc-inner::before,
.hc-sub--3 .hc-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--card-opacity);
}

.hc-inner::before {
    background:
        radial-gradient(circle, var(--chip-mid) 0.06em, transparent 0.1em) calc(var(--drift-x) * 2) calc(var(--drift-y) * 2) / 1.7em 1.9em,
        radial-gradient(circle, var(--chip-light) 0.08em, transparent 0.12em) calc(var(--drift-x) * -1.5 + 0.6em) calc(var(--drift-y) * -1.5 + 0.9em) / 2.3em 2.1em,
        radial-gradient(circle, #ffffff 0.07em, transparent 0.11em) calc(var(--drift-x) * 2.5 + 1.1em) calc(var(--drift-y) * 2.5 + 0.3em) / 1.3em 1.5em;
}

.hc-inner::after {
    background: linear-gradient(115deg,
        transparent calc(var(--pointer-x) - 20%),
        rgba(255, 255, 255, 0.6) var(--pointer-x),
        transparent calc(var(--pointer-x) + 20%));
}

/* ---------- holo layers ---------- */

.holo-card__shine,
.holo-card__glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--card-opacity);
    transition: opacity 0.2s ease;
}

/*
 * Foil: a wide rainbow sweep, crossed with fine diagonal ridges, both sliding opposite the pointer.
 * color-dodge makes it light up the art underneath rather than paint over it.
 */
.holo-card__shine {
    z-index: 3;
    mix-blend-mode: color-dodge;
    background-image:
        repeating-linear-gradient(
            110deg,
            hsl(2, 100%, 73%) 0%,
            hsl(53, 100%, 69%) 5%,
            hsl(93, 100%, 69%) 10%,
            hsl(176, 100%, 76%) 15%,
            hsl(228, 100%, 74%) 20%,
            hsl(283, 100%, 73%) 25%,
            hsl(2, 100%, 73%) 30%
        ),
        repeating-linear-gradient(
            -45deg,
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        ),
        radial-gradient(
            farthest-corner circle at var(--pointer-x) var(--pointer-y),
            rgba(0, 0, 0, 0.1) 12%,
            rgba(0, 0, 0, 0.15) 20%,
            rgba(0, 0, 0, 0.25) 120%
        );
    background-size: 400% 400%, 300% 300%, 200% 200%;
    background-position:
        calc(100% - var(--background-x)) calc(100% - var(--background-y)),
        var(--background-x) var(--background-y),
        center;
    background-blend-mode: exclusion, hue, hard-light;
    filter: brightness(calc(0.5 + var(--pointer-from-center) * 0.4)) contrast(1.6) saturate(1.4);
}

/* one even foil across the whole face, kept light so the portrait stays readable */
.holo-card__front > .holo-card__shine {
    opacity: calc(var(--card-opacity) * 0.5);
}


/* sparkle: scattered pin-points that twinkle as the angle changes */
.holo-card__shine::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, white 0 1px, transparent 1.5px),
        radial-gradient(circle, white 0 0.8px, transparent 1.3px),
        radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 2px);
    background-size: 37px 41px, 23px 29px, 53px 47px;
    background-position:
        calc(var(--background-x) * 0.6) calc(var(--background-y) * 0.4),
        calc(var(--background-y) * -0.5) calc(var(--background-x) * 0.7),
        calc(var(--background-x) * 0.3) calc(var(--background-y) * -0.8);
    opacity: calc(0.25 + var(--pointer-from-center) * 0.75);
    mix-blend-mode: overlay;
}

/* glare: soft light hotspot that follows the pointer */
.holo-card__glare {
    z-index: 4;
    mix-blend-mode: overlay;
    background-image: radial-gradient(
        farthest-corner circle at var(--pointer-x) var(--pointer-y),
        rgba(255, 255, 255, 0.8) 10%,
        rgba(255, 255, 255, 0.65) 20%,
        rgba(0, 0, 0, 0.5) 90%
    );
}

/* ---------- holo level by subrank ----------
 * RANK      matte: no foil, a softer glare and no glow
 * RANK+     foil on the frame only
 * RANK++    a light, softened foil across the face with sparkle
 * RANK+++   stronger foil and more sparkle than ++, and the card glows even at rest
 */
.hc-sub--0 .holo-card__front > .holo-card__shine {
    display: none;
}

.hc-sub--0 .holo-card__glare {
    opacity: calc(var(--card-opacity) * 0.5);
}

.hc-sub--0.holo-card--active .holo-card__rotator {
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.6);
}

/* a ring the width of the frame (.holo-card__front's padding) */
.hc-sub--1 .holo-card__front > .holo-card__shine {
    opacity: var(--card-opacity);
    clip-path: polygon(evenodd,
        0 0, 100% 0, 100% 100%, 0 100%, 0 0,
        1.95cqw 1.95cqw, 1.95cqw calc(100% - 1.95cqw), calc(100% - 1.95cqw) calc(100% - 1.95cqw), calc(100% - 1.95cqw) 1.95cqw, 1.95cqw 1.95cqw);
}

.hc-sub--1 .holo-card__shine::after {
    display: none;
}

/* ++ and +++ tone the foil's colour down from the frame-only foil at +, which is too loud across the whole face */
.hc-sub--2 .holo-card__front > .holo-card__shine {
    opacity: calc(var(--card-opacity) * 0.4);
    filter: brightness(calc(0.5 + var(--pointer-from-center) * 0.4)) contrast(1.4) saturate(0.9);
}

.hc-sub--2 .holo-card__shine::after {
    opacity: calc(0.2 + var(--pointer-from-center) * 0.75);
}

/* +++: a little stronger and more colourful than ++, with more sparkle */
.hc-sub--3 .holo-card__front > .holo-card__shine {
    filter: brightness(calc(0.5 + var(--pointer-from-center) * 0.4)) contrast(1.4) saturate(0.95);
}

.hc-sub--3 .holo-card__shine::after {
    opacity: calc(0.45 + var(--pointer-from-center) * 0.45);
}

.hc-sub--3:not(.holo-card--active) .holo-card__rotator {
    box-shadow:
        0 0 3px -1px white,
        0 0 10px 1px var(--card-glow),
        0 0 30px -8px var(--card-glow),
        0 10px 20px -5px rgba(0, 0, 0, 0.6);
}

/* ---------- profile page overlay (views/profile_card.ejs) ---------- */

.pc-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(8, 9, 20, 0.85);
    backdrop-filter: blur(6px);
    animation: pc-fade-in 0.2s ease;
}

.pc-overlay[hidden],
.hc-feats__grid[hidden],
.hc-empty[hidden] {
    display: none;
}

.pc-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.pc-button {
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #f3f4ff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pc-button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
}

.pc-button:disabled {
    cursor: progress;
    opacity: 0.7;
}

/* shown in front of a button's label while it works (e.g. "Copy link" uploading the preview) */
.pc-spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.5em;
    vertical-align: -0.12em;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #f3f4ff;
    border-radius: 50%;
    animation: pc-spin 0.8s linear infinite;
}

/* phones: fill the screen width, but leave room below for the buttons on short screens. The site has no
   viewport meta tag, so phones lay the page out ~980px wide; match touch devices too, and size in vw */
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
    .pc-overlay {
        gap: 3vw;
        padding: 3vw;
    }

    .pc-overlay .holo-card {
        width: min(94vw, (100vh - 24vw) * 63 / 88);
        width: min(94vw, (100dvh - 24vw) * 63 / 88);
    }

    .pc-actions {
        gap: 3vw;
    }

    .pc-button {
        padding: max(12px, 2.4vw) max(28px, 6vw);
        font-size: max(18px, 4.4vw);
    }
}

@keyframes pc-fade-in {
    from { opacity: 0; }
}

@keyframes pc-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .holo-card__rotator {
        transform: none;
    }
}