/* css/gacha.css — gacha.html's own rules. They were an inline <style>
   until 2026-10-22; the pages' CSP refuses inline style
   (style-src 'self', deploy/nginx/elopros.com.conf). */
/* the machine (js/gacha-plate.js → js/scene/machine.js), hidden until the
   scene's first frame. Width and height are set because a canvas would
   otherwise keep its intrinsic size and grow on every resize. */
.gacha-plate{margin:8px auto 4px;max-width:520px}
.gacha-plate .plate{position:relative}
.gacha-plate canvas{display:block;width:100%;aspect-ratio:1/1.08;height:auto;max-height:72vh;margin:0 auto;touch-action:pan-y}
.gacha-plate .caption{text-align:center;max-width:46em;margin:4px auto 0}
.gacha-plate .caption:empty{display:none}
/* the prize rail: art from /api/trove/art/. A coin pack renders as words,
   and js/gacha.js removes an image that fails to load. */
.pot-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:10px}
.pot-rail .pot-card{margin:0;border:1px solid var(--store-line-2);padding:8px}
.pot-rail img{display:block;width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:6px}
.pot-rail figcaption{font-size:.85em}
.pot-rail .mono-note{display:block;margin-top:2px}
.pot-rail .pot-coins{display:flex;align-items:center;min-height:76px}
/* what is inside the machine (js/gacha-case.js): one cell per prize */
.case-glass{position:relative;border:1px solid var(--store-line-2);padding:10px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--store-line-2) 22%,transparent),transparent 60%)}
.case-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.case-cell{border:1px solid var(--store-line-2);padding:6px;display:flex;flex-direction:column;gap:2px;font-size:.85em;
  transition:transform .3s ease,box-shadow .3s ease}
.case-cell img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.case-tok{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px dashed var(--store-line-2)}
.case-odds{opacity:.75}
.case-cell.won{transform:translateY(-4px);box-shadow:0 0 0 2px var(--g-live)}
.case-empty{grid-column:1/-1;padding:22px 8px 18px;display:grid;justify-items:center;gap:8px;text-align:center}
.case-empty b{font-family:var(--sg);font-size:1.05rem}
.case-empty span{color:var(--store-muted);max-width:36ch}
.case-empty .btn{margin-top:4px}
/* an empty machine: the caption under it says nothing */
#case-cap:empty{display:none}
/* an empty pool has no odds: one line, not a table of dashes */
#odds[data-empty="1"] .tiles,#odds[data-empty="1"] .klabel,#odds[data-empty="1"] .scroll-x,#odds[data-empty="1"]>p.mono-note{display:none}
.pack-row{display:flex;gap:8px;flex-wrap:wrap}
.pack-row .btn[aria-pressed="true"]{box-shadow:inset 0 0 0 2px currentColor;font-weight:600}
@media (prefers-reduced-motion:reduce){
  .case-cell{transition:none}
}