/* ===========================
   ART SKIN - rendered art under the comic theme (js/ui/art-skin.js sets the class)
   Arena backdrops behind the battle board, a lobby backdrop, and printed textures
   under panels and buttons. The art comes from html/tools/card-art (ui-prompts.js,
   render-ui.js, make-textures.py).

   Textures are greyscale and multiplied over the theme's own colours, so every
   surface keeps its token colour and its text contrast; turning the skin off
   (?skin=0) leaves the flat theme exactly as it was.
   =========================== */

html.art-skin {
    --skin-style: tvkey;
    --tex-paper: url("../art/ui/mono/texture-paper.webp");
    --tex-halftone: url("../art/ui/mono/texture-halftone.webp");
    --tex-ink: url("../art/ui/mono/texture-ink.webp");
    --skin-lobby: url("../art/ui/tvkey/lobby-backdrop.webp");
    /* the veil laid over a backdrop so panels on top stay readable */
    --skin-veil: linear-gradient(to bottom, rgba(12, 18, 48, 0.42), rgba(12, 18, 48, 0.62));
}
html.art-skin.art-skin-mono {
    --skin-lobby: url("../art/ui/mono/lobby-backdrop.webp");
    --skin-veil: linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.52));
}

/* ---- arena backdrops: the place the fight is in, behind the board ---- */
html.art-skin .game-container[data-arena="caddebostan"] { --skin-arena: url("../art/arenas/tvkey/arena-caddebostan.webp"); }
html.art-skin .game-container[data-arena="kadikoy"] { --skin-arena: url("../art/arenas/tvkey/arena-kadikoy.webp"); }
html.art-skin .game-container[data-arena="diyarbakir"] { --skin-arena: url("../art/arenas/tvkey/arena-diyarbakir.webp"); }
html.art-skin .game-container[data-arena="shibuya"] { --skin-arena: url("../art/arenas/tvkey/arena-shibuya.webp"); }
html.art-skin .game-container[data-arena="london"] { --skin-arena: url("../art/arenas/tvkey/arena-london.webp"); }
html.art-skin.art-skin-mono .game-container[data-arena="caddebostan"] { --skin-arena: url("../art/arenas/mono/arena-caddebostan.webp"); }
html.art-skin.art-skin-mono .game-container[data-arena="kadikoy"] { --skin-arena: url("../art/arenas/mono/arena-kadikoy.webp"); }
html.art-skin.art-skin-mono .game-container[data-arena="diyarbakir"] { --skin-arena: url("../art/arenas/mono/arena-diyarbakir.webp"); }
html.art-skin.art-skin-mono .game-container[data-arena="shibuya"] { --skin-arena: url("../art/arenas/mono/arena-shibuya.webp"); }
html.art-skin.art-skin-mono .game-container[data-arena="london"] { --skin-arena: url("../art/arenas/mono/arena-london.webp"); }

html.art-skin .game-container[data-arena]:not([data-arena=""]) {
    background-color: var(--arena-ground, #1b1f3a);
    background-image: var(--skin-veil), var(--skin-arena, none);
    background-size: cover, cover;
    background-position: center, center 40%;
    background-repeat: no-repeat;
}

/* ---- lobby: the rooftop backdrop instead of the blue sunburst ---- */
html.art-skin .lobby-screen {
    background-color: var(--page);
    background-image: var(--skin-veil), var(--skin-lobby);
    background-size: cover, cover;
    background-position: center, center;
    background-attachment: fixed, fixed;
}

/* ---- panels: printed newsprint under the paper colour ---- */
html.art-skin :is(.lobby-panel, .player-info, .grammar-zone, .hand-area, .crowd-section, .battle-log,
    .game-screen-frame, .game-dialog, .fighter-record > div, .lobby-section.live-panel, .lobby-decks, .cv-sheet) {
    background-image: var(--tex-paper);
    background-size: 256px 256px;
    background-blend-mode: multiply;
}
html.art-skin .victory-content {
    background-image: var(--halftone), var(--tex-paper);
    background-size: 9px 9px, 256px 256px;
    background-blend-mode: normal, multiply;
}

/* ---- buttons: halftone print over each button's own colour ----
   white (secondary), red (primary / say), yellow (picked, special) - the colour
   stays the token's; the dots only add print texture */
html.art-skin :is(.lobby-button, .control-button, .chip, .screen-select, .set-pill, .cv-say, .cv-nav, .cv-close) {
    background-image: var(--tex-halftone);
    background-size: 128px 128px;
    background-blend-mode: multiply;
}
html.art-skin :is(.lobby-primary, .cast-button) {
    background-image: var(--tex-ink), var(--tex-halftone);
    background-size: 192px 192px, 128px 128px;
    background-blend-mode: multiply, multiply;
}
/* disabled buttons stay flat (no texture fighting the faded look) */
html.art-skin :is(.lobby-button, .cast-button, .control-button):disabled { background-image: none; }

@media (prefers-reduced-motion: reduce) {
    html.art-skin .lobby-screen { background-attachment: scroll, scroll; }
}
/* Phones: the lobby backdrop scrolls with the page (fixed backgrounds jank on mobile) */
@media (max-width: 760px) {
    html.art-skin .lobby-screen { background-attachment: scroll, scroll; background-position: center, 60% top; }
}

/* ---- lobby, wide screens: the backdrop shows around the sections ----
   (the full-screen lobby panel would otherwise cover it): the outer panel becomes a
   frame on the art, its sections stay on printed paper, the tagline gets an outline */
@media (min-width: 1200px) and (min-height: 700px) {
    html.art-skin .lobby-screen:has(.lobby-layout:not([hidden])) .lobby-panel {
        background: transparent;
        box-shadow: none;
        border-color: transparent;
    }
    html.art-skin .lobby-screen:has(.lobby-layout:not([hidden])) .lobby-tagline {
        color: #fff;
        text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 3px 4px 0 var(--ink);
    }
    html.art-skin .lobby-layout .lobby-section,
    html.art-skin .lobby-layout .fighter-card {
        background-color: var(--paper);
        background-image: var(--tex-paper);
        background-size: 256px 256px;
        background-blend-mode: multiply;
        box-shadow: var(--drop-heavy);
    }
    html.art-skin .lobby-screen:has(.lobby-layout:not([hidden])) .lobby-status:not(:empty) {
        padding: 2px 10px;
        background: var(--paper);
        border: 2px solid var(--ink);
    }
}

/* ---- battle: the sentence panel lets the arena read through it, faintly ---- */
html.art-skin .game-container[data-arena]:not([data-arena=""]) .grammar-zone {
    /* no texture here: an opaque tile would cover the translucency */
    background-color: rgba(255, 251, 240, 0.8);
    background-image: none;
    backdrop-filter: blur(4px) saturate(0.8);
}

/* ---- lobby: the backdrop printed offset (js/ui/offset-print.js) ----
   A canvas fixed behind the lobby's content; the veil sits over the print so the
   panels stay readable; the CSS backdrop underneath is the fallback (no WebGL) */
.offset-print-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.offset-print-bg[hidden] { display: none; }
.offset-print-bg canvas { display: block; width: 100%; height: 100%; }
.offset-print-bg::after { content: ''; position: absolute; inset: 0; background: var(--skin-veil); }
html.art-skin .lobby-screen.has-offset-print { background-image: none; }
.lobby-screen.has-offset-print > :not(.offset-print-bg) { position: relative; z-index: 1; }
html:not(.art-skin) .offset-print-bg { display: none; }

/* ---- panels printed like the buttons: the same halftone dots over the paper grain,
   multiplied over each panel's own colour (so text keeps its contrast) - on the outer
   panels and the inner ones (fighter card, editor panes, fight entries) alike ---- */
html.art-skin :is(.lobby-panel, .player-info, .grammar-zone, .hand-area, .crowd-section, .battle-log,
    .game-screen-frame, .game-dialog, .fighter-record > div, .lobby-section.live-panel, .lobby-decks, .cv-sheet,
    .fighter-card, .editor-pool, .editor-deck, .live-match, .lobby-section, .spectator-bar, .vl-card) {
    background-image: var(--tex-halftone), var(--tex-paper);
    background-size: 128px 128px, 256px 256px;
    background-blend-mode: multiply, multiply;
}
/* the inner boxes too: reward days, quests and milestones, deck tiles, the victory
   quests, the collection summary chips */
html.art-skin :is(.rw-day, .rw-quest, .rw-mile, .rw-extra, .rw-guest, .deck-body, .vx-quest, .rarity-count, .pack-summary) {
    background-image: var(--tex-halftone), var(--tex-paper);
    background-size: 128px 128px, 256px 256px;
    background-blend-mode: multiply, multiply;
}