/*
 * rq-primitives.css — Painterly UI vocabulary
 *
 * Single source of truth for the painted JRPG UI material
 * shared across dialogue / pause / HUD / battle. Targets in
 * docs/visual-targets/ use one consistent material vocabulary
 * (parallelogram chips, gold-edged painted cards, painterly
 * card-stock inner texture). Today that vocabulary is scattered
 * across battle.js, hud-layers.css, dialog.js, pause-menu.css
 * with no shared primitive. This file consolidates.
 *
 * Consumers should reference these by variable / mixin class
 * rather than redeclaring clip-paths or backgrounds locally.
 *
 * --rq-parallelogram-chip   : clip-path polygon (12px diag cuts)
 * --rq-card                 : painted card background (multi-layer)
 * --rq-painted-frame        : rectangular frame, gold edge, dark fill
 * --rq-gold-edge            : 1px linear-gradient border treatment
 * --rq-painterly-texture    : tiled paint-stroke noise SVG
 * --rq-rim-light            : radial-gradient top-edge highlight
 *
 * Mixin classes:
 *   .rq-chip       — consumes parallelogram + gold-edge + texture
 *   .rq-painted-bar — gold edge + dark fill + painterly inner glow
 *   .rq-card-bg    — painted card without the chip clip
 */

:root {
    /* ── [HUD-SCALE] viewport HUD scale ───────────────
       Written by engine/ui-scale.js (1 on mobile,
       up to 1.5 on a 1440p window). Consumers:
       calc(Npx * var(--ui-scale, 1)). */
    --ui-scale: 1;

    /* ── Material clip-paths ──────────────────────── */
    --rq-parallelogram-chip: polygon(
        12px 0,
        100% 0,
        calc(100% - 12px) 100%,
        0 100%
    );

    /* Symmetric octagonal chip (both ends slanted in).
       Used by .notif-item already — exposed for reuse. */
    --rq-octogonal-chip: polygon(
        0 12px,
        12px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% 100%,
        12px 100%,
        0 calc(100% - 12px)
    );

    /* ── Painterly texture ──────────────────────── */
    --rq-painterly-texture: url('/static/img/ui/painterly-noise.svg');

    /* ── Color tokens for painted surfaces ────────── */
    --rq-paint-fill: rgba(8, 6, 20, 0.78);
    --rq-paint-fill-strong: rgba(6, 4, 16, 0.92);
    --rq-paint-fill-soft: rgba(14, 10, 28, 0.55);
    --rq-paint-shadow: 0 4px 18px rgba(0, 0, 0, 0.55),
                       0 1px 2px rgba(0, 0, 0, 0.8);

    /* Painted gold edge — linear gradient used as a border
       image so the highlight can wrap around the clipped
       chip shape without separate paths. */
    --rq-gold-edge-color: linear-gradient(
        135deg,
        rgba(255, 222, 145, 0.95) 0%,
        rgba(255, 188, 80, 0.45) 35%,
        rgba(120, 80, 30, 0.35) 70%,
        rgba(255, 215, 130, 0.80) 100%
    );

    --rq-rim-light: radial-gradient(
        ellipse 120% 35% at 50% 0%,
        rgba(255, 220, 150, 0.18) 0%,
        rgba(255, 220, 150, 0.06) 30%,
        transparent 65%
    );

    /* Painted card backdrop — composed of painterly texture
       (multiply blend implied via low opacity) + paint fill +
       rim light. Consumers stack as `background`. */
    --rq-card-bg:
        var(--rq-rim-light),
        var(--rq-painterly-texture),
        linear-gradient(
            180deg,
            rgba(20, 14, 38, 0.40) 0%,
            rgba(8, 5, 22, 0.92) 100%
        );

    /* Background-blend modes for --rq-card-bg above:
       rim-light: normal, painterly-texture: multiply,
       gradient: normal. Consumers should apply
       `background-blend-mode: normal, multiply, normal`. */

    --rq-scroll-thumb: rgba(255, 215, 130, 0.38);
    --rq-scroll-track: rgba(0, 0, 0, 0.28);
    --rq-room-wash:
        radial-gradient(
            ellipse 72% 64% at 50% 46%,
            rgba(6, 4, 16, 0.16) 0%,
            rgba(6, 4, 16, 0.40) 60%,
            rgba(6, 4, 16, 0.76) 100%),
        linear-gradient(
            180deg,
            rgba(6, 4, 16, 0.55) 0%,
            rgba(6, 4, 16, 0) 18%,
            rgba(6, 4, 16, 0) 80%,
            rgba(6, 4, 16, 0.70) 100%);
}

:root {
    scrollbar-width: thin;
    scrollbar-color: var(--rq-scroll-thumb) var(--rq-scroll-track);
}

.hud2-icon--painted {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    image-rendering: auto;
}

.room-backdrop-host {
    background-image: var(--rq-room-wash), var(--room-art) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


/* ─────────────────────────────────────────────────────
 * .rq-chip
 * Painted parallelogram action chip. Used by:
 *   - battle action menu (.btl-menu-btn)
 *   - notification shelf items (.notif-item — already
 *     consumes a near-identical octagonal variant)
 *   - dialogue name pill (.dlg-name)
 *   - pause menu sidebar tabs (.pause-menu__tab)
 *   - interaction prompts (.le-interact-prompt — Phase 2B)
 *
 * Variants (modifier classes):
 *   .rq-chip--octagonal  : symmetric both-ends slant
 *   .rq-chip--accent     : amber/gold ramp instead of neutral
 *   .rq-chip--active     : highlighted selected state
 * ───────────────────────────────────────────────────── */
.rq-chip {
    position: relative;
    clip-path: var(--rq-parallelogram-chip);
    -webkit-clip-path: var(--rq-parallelogram-chip);
    background:
        var(--rq-rim-light),
        var(--rq-painterly-texture),
        linear-gradient(
            180deg,
            rgba(28, 20, 52, 0.55) 0%,
            rgba(8, 5, 22, 0.92) 100%
        );
    background-blend-mode: normal, multiply, normal;
    background-size: auto, 240px 240px, auto;
    color: var(--rq-text);
    font-family: var(--rq-font-display);
    box-shadow: var(--rq-paint-shadow);
    transition:
        transform 0.15s ease,
        filter 0.2s ease,
        background 0.25s ease;
}

.rq-chip--octagonal {
    clip-path: var(--rq-octogonal-chip);
    -webkit-clip-path: var(--rq-octogonal-chip);
}

.rq-chip--accent {
    background:
        var(--rq-rim-light),
        var(--rq-painterly-texture),
        linear-gradient(
            180deg,
            rgba(80, 55, 18, 0.72) 0%,
            rgba(40, 22, 6, 0.94) 100%
        );
    background-blend-mode: normal, multiply, normal;
    background-size: auto, 240px 240px, auto;
    color: #ffd58a;
}

.rq-chip--active {
    filter: brightness(1.15)
            drop-shadow(0 0 12px rgba(255, 200, 90, 0.45));
    transform: translateX(2px);
}

.rq-chip:hover {
    filter: brightness(1.10);
}

.rq-chip:focus-visible {
    outline: none;
    filter: brightness(1.25);
    transform: translateX(2px);
}


/* ─────────────────────────────────────────────────────
 * .rq-painted-bar
 * Painted progress/meter bar — used by HP/MP/XP/Objective
 * bars and the chapter-banner accent in pause menu.
 * Consumer wraps an inner .rq-painted-bar__fill element.
 * ───────────────────────────────────────────────────── */
.rq-painted-bar {
    position: relative;
    height: 8px;
    background:
        var(--rq-painterly-texture),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.85) 100%
        );
    background-blend-mode: multiply, normal;
    background-size: 240px 240px, auto;
    border: 1px solid rgba(255, 215, 130, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 130, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        0 0 6px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.rq-painted-bar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(
        90deg,
        rgba(255, 165, 60, 0.85) 0%,
        rgba(255, 220, 140, 1.0) 100%
    );
    box-shadow:
        0 0 8px rgba(255, 200, 80, 0.45),
        inset 0 1px 0 rgba(255, 255, 200, 0.4);
    transition: width 0.4s var(--rq-ease, ease);
}

/* HP / MP / XP / objective variants — color ramps */
.rq-painted-bar--hp .rq-painted-bar__fill {
    background: linear-gradient(
        90deg,
        rgba(160, 30, 30, 0.85) 0%,
        rgba(255, 80, 80, 1.0) 100%
    );
}

.rq-painted-bar--mp .rq-painted-bar__fill {
    background: linear-gradient(
        90deg,
        rgba(60, 110, 200, 0.85) 0%,
        rgba(140, 200, 255, 1.0) 100%
    );
}

.rq-painted-bar--xp .rq-painted-bar__fill {
    background: linear-gradient(
        90deg,
        rgba(120, 70, 200, 0.85) 0%,
        rgba(200, 150, 255, 1.0) 100%
    );
}


/* ─────────────────────────────────────────────────────
 * .rq-card-bg
 * Painted card backdrop — for surfaces that need the
 * painterly material but NOT the parallelogram clip:
 * dialogue letterbox card (Phase 2A), party cards in
 * pause menu (Phase 2D), location info card (Phase 2B).
 * ───────────────────────────────────────────────────── */
.rq-card-bg {
    background: var(--rq-card-bg);
    background-blend-mode: normal, multiply, normal;
    background-size: auto, 240px 240px, auto;
    box-shadow: var(--rq-paint-shadow);
    border: 1px solid rgba(255, 215, 130, 0.18);
}


/* ───────────────────────────────────────────────────
 * .rq-kbd / kbd pills (visual-fidelity wave)
 * Keyboard-hint chips matching the target frames'
 * ornamented "[F] Listen" pills — small octagonal
 * painted chip with a gold edge. Scoped so generic
 * <kbd> in chat/docs is untouched; opt in via the
 * class or the listed containers.
 * ─────────────────────────────────────────────────── */
.rq-kbd,
.pause-menu__footer-hint kbd,
.le-ui kbd,
.dlg-box kbd {
    display: inline-block;
    min-width: 16px;
    padding: 2px 7px;
    background:
        linear-gradient(180deg,
            rgba(38, 30, 60, 0.95),
            rgba(16, 12, 30, 0.95));
    border: 1px solid rgba(255, 215, 130, 0.38);
    border-bottom-color: rgba(255, 215, 130, 0.18);
    border-radius: 0;
    clip-path: polygon(
        0 4px, 4px 0,
        calc(100% - 4px) 0, 100% 4px,
        100% calc(100% - 4px),
        calc(100% - 4px) 100%,
        4px 100%, 0 calc(100% - 4px));
    font-family: var(--rq-font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    color: rgba(255, 236, 200, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    margin: 0 2px;
}


/* ─────────────────────────────────────────────────────
 * Reduced-motion respect.
 * ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .rq-chip,
    .rq-painted-bar__fill {
        transition: none;
    }
}