/*
  justincook.dev · games B (the toy shelf) · ART LAYER (styles)
  Include after the page's own <style>:  <link rel="stylesheet" href="art/games-b-art.css">
  Every rule here targets an element that art/games-b-art.js marks ONLY once its image has loaded. With no image,
  nothing matches and the code drawing (the CSS/SVG box face, the SVG loot) shows exactly as before.
  Slot sizes and the key-out tool: art/README.md, section "Games B".
*/
:root{
  /* box faces: the art is 2:3, the page's face is 300 x 390 (292 x 382 inside the 4 px ink border).
     contain keeps the art's own border band whole and fills the side gap with the art's sampled paper ground;
     cover fills the face and crops about 7% off the top and bottom (the band goes). */
  --jc-art-box-fit:contain;
  --jc-art-box-pos:50% 50%;
}

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

/* ---- box front face ----
   The <img> is the first child of .fc.front, inside the face's 4 px ink border (the border, the box's 3D turn,
   its sides, top and floor shadow all stay code). It fills the padding box and is clipped by the face's own
   overflow:hidden and radius. The code-drawn face contents are hidden while the art is on, except the "play it"
   button, which stays live above the art. The face ground becomes the art's own paper (sampled by the JS). */
.fc.front.jc-art-on{background:var(--jc-art-box-ground,var(--paper))}
.fc.front>img.jc-art-box{left:0;top:0;width:100%;height:100%;object-fit:var(--jc-art-box-fit);object-position:var(--jc-art-box-pos);border-radius:inherit;z-index:0}
.fc.front.jc-art-on>:not(img.jc-art):not(.play){visibility:hidden}
.fc.front.jc-art-on>.play{z-index:1}

/* ---- loot sprites ----
   The <img> sits inside the .loot element, which the page moves and turns to the Matter body's position and
   angle every frame. The JS sizes and offsets it exactly as Matter's render.sprite would (xScale, yScale,
   xOffset, yOffset, drawn about the body centre), and also writes those values onto body.render.sprite.
   The body itself (its size, chamfer and the drag target) is unchanged; only the SVG drawing is hidden. */
.loot>img.jc-art-loot{z-index:0}
.loot.jc-art-on>svg{visibility:hidden}

/* review aid: ?art=outline outlines every art image (magenta) and each loot body it is drawn on (blue) */
html.jc-art-outline img.jc-art{outline:1px dashed #FF2E9A;outline-offset:-1px}
html.jc-art-outline .loot.jc-art-on{outline:1px dashed #276EBD;outline-offset:-1px}