/* Blood Moon — near-black night, deep crimson, bone-white text. Rare tier:
   adds a slow heartbeat pulse on panel borders and an eclipse corona texture. */
[data-skin="blood-moon"] {
    /* Accent — arterial crimson */
    --hbd-accent-1:              rgb(140, 22, 28);
    --hbd-accent-2:              rgb(200, 42, 48);

    /* Surface — near-black with a dried-blood undertone */
    --hbd-bg-rgb:           16 8 10;
    --hbd-bg-popover:       rgb(14, 7, 9);
    --hbd-bg-table-1:       #120709;
    --hbd-bg-table-2:       #1c0b0e;
    --hbd-bg-input:         rgb(232, 222, 214);

    /* Text hierarchy — bone white on black */
    --hbd-text:             rgb(226, 214, 204);
    --hbd-text-subtle:      rgb(122, 90, 92);
    --hbd-text-input:       rgb(26, 10, 12);

    /* Interactive */
    --hbd-btn-neutral:          rgb(74, 26, 30);
    --hbd-btn-neutral-hover:    rgb(104, 36, 42);
    --hbd-btn-neutral-disabled: rgb(38, 16, 18);

    --hbd-btn-alert:            #7a1418;
    --hbd-btn-ok:               #1e4a30;
    --hbd-btn-alternate:        #4a1e50;

    --hbd-link:             rgb(214, 96, 100);

    /* Border hierarchy — crimson trim */
    --hbd-border-rgb:     170 34 40;
    --hbd-border-opacity: 0.6;
    --hbd-divider:        rgb(52, 20, 24);

    /* State */
    --hbd-valid:            #4aaa68;
    --hbd-invalid:          #e03424;

    /* Animation — crimson flash to shadow */
    --hbd-flash-1:          rgb(214, 60, 66);
    --hbd-flash-2:          rgb(74, 26, 30);

    /* Fonts — sharp, gothic-leaning serif (system fonts, like Agent Noir) */
    --hbd-font-display:  Georgia, 'Times New Roman', serif;
    --hbd-font-body:     Georgia, 'Times New Roman', serif;
    --hbd-font-ui:       Georgia, 'Times New Roman', serif;

    /* Panel opacity — heavy night */
    --hbd-card-opacity:     0.92;
    --hbd-modal-opacity:    0.97;

    /* Panel texture — faint eclipse corona: dark disc with a red rim glow */
    --hbd-panel-texture:
        radial-gradient(
            circle at 82% 12%,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.30) 7%,
            rgba(190, 40, 46, 0.10) 9%,
            rgba(190, 40, 46, 0.04) 13%,
            transparent 20%
        );
    --hbd-panel-blend-mode: normal;
}

/* ── Rare flair ───────────────────────────────────────────────────────────
   Panels only (not buttons or inputs). Two layers of life:
   1. Heartbeat — an anatomical lub-dub on the border with an inset glow, so
      the light comes from within. The thumps stay tight (~0.6s apart); the
      10.5s cycle is almost all rest, like something sleeping.
   2. Background — a 39s choreography over continuous falling ash motes (two
      parallax depths): a moonlight sheen passes, a pause, then a tide of
      warmth swells and sinks. The static eclipse corona sits beneath it all
      (it replaces --hbd-panel-texture on panels, which these rules override). */
[data-skin="blood-moon"] .ui-card,
[data-skin="blood-moon"] .hbd-modal-panel {
    background-image:
        linear-gradient(120deg, transparent 30%, rgb(214 60 66 / 0.14) 48%, rgb(230 66 72 / 0.09) 52%, transparent 70%),
        radial-gradient(1.6px at 22% 18%, rgb(235 96 96 / 0.6) 50%, transparent 100%),
        radial-gradient(1.3px at 68% 60%, rgb(210 66 72 / 0.5) 50%, transparent 100%),
        radial-gradient(1.1px at 45% 85%, rgb(190 125 115 / 0.4) 50%, transparent 100%),
        radial-gradient(1.3px at 85% 35%, rgb(190 125 115 / 0.45) 50%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgb(200 46 52 / 0.12) 45%, rgb(140 28 34 / 0.16) 55%, transparent 100%),
        radial-gradient(circle at 82% 12%, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0.30) 7%, rgb(190 40 46 / 0.10) 9%, rgb(190 40 46 / 0.04) 13%, transparent 20%);
    background-size: 300% 100%, 150px 190px, 150px 190px, 260px 330px, 260px 330px, 100% 300%, 100% 100%;
    background-repeat: no-repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
    animation:
        blood-moon-heartbeat 10.5s ease-in-out infinite,
        blood-moon-drift 39s linear infinite;
}

@keyframes blood-moon-heartbeat {
    0%, 13%, 100% { border-color: rgb(170 34 40 / 0.5);  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1), inset 0 0 0 rgb(140 22 28 / 0); }
    3%            { border-color: rgb(200 50 56 / 0.8);  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1), inset 0 0 16px rgb(140 22 28 / 0.35); }
    6%            { border-color: rgb(170 34 40 / 0.55); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1), inset 0 0 6px rgb(140 22 28 / 0.15); }
    8.5%          { border-color: rgb(200 50 56 / 0.65); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1), inset 0 0 10px rgb(140 22 28 / 0.25); }
}

/* Layer order: sweep, ash ×4 (near ×2, far ×2), tide, corona (static).
   Ash falls whole tile-multiples per cycle (570px / 330px) so the loop is
   seamless; the sweep only resets while fully off-panel. */
@keyframes blood-moon-drift {
    0%   { background-position: 200% 0, 0 0, 0 0, 0 0, 0 0, 0% 100%, 0 0; }
    36%  { background-position: -100% 0, 0 205.2px, 0 205.2px, 0 118.8px, 0 118.8px, 0% 100%, 0 0; }
    45%  { background-position: -100% 0, 0 256.5px, 0 256.5px, 0 148.5px, 0 148.5px, 0% 90%, 0 0; }
    67%  { background-position: -100% 0, 0 381.9px, 0 381.9px, 0 221.1px, 0 221.1px, 0% 0%, 0 0; }
    90%  { background-position: -100% 0, 0 513px, 0 513px, 0 297px, 0 297px, 0% 100%, 0 0; }
    100% { background-position: -100% 0, 0 570px, 0 570px, 0 330px, 0 330px, 0% 100%, 0 0; }
}