/*
  justincook.dev · home B · ART LAYER (styles)
  Include after the page's own <style>:  <link rel="stylesheet" href="art/home-b-art.css">
  Every rule here targets an <img class="jc-art ..."> that art/home-b-art.js inserts ONLY when the image file loads.
  With no image, nothing here matches and the page's code drawing (flat zone colour, printed card back, bare tile)
  shows exactly as before. Slot sizes and crop rules: art/README.md.
*/
:root{
  --jc-art-h1-opacity:.18;   /* H1 · Stage A backdrop, very low contrast so the wordmark stays the hero */
  --jc-art-zone-opacity:1;   /* H2 to H4 · zone art over the flat zone colour */
}

/* every art image: decorative, absolutely placed, never catches input, never tints */
img.jc-art{position:absolute;display:block;max-width:none;border:0;pointer-events:none;user-select:none;-webkit-user-drag:none}

/* H1 · Stage A backdrop: first child of the door, so the wordmark, voice line, cursor and figure paint above it */
.door>img.jc-art-h1{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:var(--jc-art-h1-opacity)}

/* H2 to H4 · zone art: first child of the zone, filling the zone inside its 1 px ink rule and clipped to the zone's
   corners (border-radius follows the zone if it is ever rounded). The zone's flat colour stays underneath, and the
   title, the room tiles, the corridor card and the hidden cards are later positioned siblings, so they paint above. */
#board .zone>img.jc-art-zone{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit;opacity:var(--jc-art-zone-opacity)}

/* H5 · room-tile cover: 48 x 48 at the tile's top right. The tile keeps its code-drawn ink outline and hard shadow,
   and the art moves with the tile when it presses. The count and the name are lifted above the art, and the name
   wraps before the art so no letter ever sits under it (only while a cover is present). */
#board .tile>img.jc-art-cover{top:8px;right:8px;width:48px;height:48px;object-fit:contain;z-index:0}
#board .tile.jc-art-on .ct,#board .tile.jc-art-on .nm{position:relative;z-index:1}
#board .tile.jc-art-on .nm{max-width:min(128px,calc(100% - 50px))}

/* H7 · face-down card back: a 180 x 26 printed band along the bottom of the back face, under the condition text.
   The printed inset frame (the back's ::before) and the text stay code. */
.hcard .back>img.jc-art-back{left:0;right:0;bottom:10px;margin:0 auto;width:180px;height:26px;object-fit:cover}

/* review aid: ?art=outline outlines every slot that received an image (dark slots are otherwise hard to see) */
html.jc-art-outline img.jc-art{outline:1px dashed #FF2E9A;outline-offset:-1px}