/* THE PLAYABLE DEMOS -- limited versions of the Devouring Altar, the Pentagram, the passive slots and the bag.
   Same tokens as site.css. Panels borrow the game's procedural slot look (scr_menu_card_slot): ink fill, gilt hairline. */
.demo .pitch { margin-bottom: 1.8rem; }
.demo-note { font-size: .9rem; color: var(--bone-dim); font-style: italic; margin: 1.2rem 0 0; max-width: 70ch; }
.demo-root { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.panel-x { background: #0e0b14; box-shadow: inset 0 0 0 1px var(--gilt-dk), 6px 6px 0 #0006; padding: clamp(1rem, 2.4vw, 1.6rem); }
.x-label { font: 400 .7rem/1 var(--f-mark); letter-spacing: .16em; text-transform: uppercase; font-style: italic; color: var(--gilt); margin: 0 0 .6rem; display: block; }
.x-btn { font: 400 .8rem/1 var(--f-mark); letter-spacing: .1em; text-transform: uppercase; padding: .8rem 1.1rem; border: 0; cursor: pointer; background: var(--bone); color: var(--ink); box-shadow: 4px 4px 0 var(--crimson); transform: skewX(-12deg); }
.x-btn:hover:not(:disabled) { background: var(--gilt-hi); }
.x-btn:disabled { background: #3a3340; color: #8a8290; box-shadow: none; cursor: not-allowed; }
.x-btn.ghost { background: none; color: var(--bone); box-shadow: inset 0 0 0 1px var(--bone-dim); }
.x-btn.ghost:hover:not(:disabled) { background: none; color: var(--gilt-hi); box-shadow: inset 0 0 0 1px var(--gilt); }
.x-actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin: 1.1rem 0 0; padding-left: .4rem; }
.x-why { font-size: .88rem; color: var(--bone-dim); font-style: italic; }
.x-log { margin: 1rem 0 0; padding: 0; list-style: none; font-size: .95rem; color: #d2cab8; display: grid; gap: .45rem; max-width: 62ch; }
.x-log li { padding-left: .9rem; border-left: 2px solid var(--gilt-dk); }
.x-log li:first-child { border-left-color: var(--gilt-hi); color: var(--bone); }
.x-log b { color: var(--bone); font-weight: 700; } .x-log em { color: var(--gilt-hi); font-style: normal; }

/* ---- the mini card ---- */
.mc { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: var(--bone); text-align: left; font: inherit; }
.mc img { width: 100%; height: auto; aspect-ratio: 240 / 448; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 18px #000b, 0 0 0 1px #d8b25a44; transition: transform .2s ease, box-shadow .2s ease; }
.mc:hover img, .mc:focus-visible img { transform: translateY(-4px); box-shadow: 0 14px 24px #000d, 0 0 0 1px var(--gilt); }
.mc:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 3px; }
.mc-cap { display: flex; justify-content: space-between; gap: .4rem; margin-top: .35rem; font-size: .8rem; line-height: 1.2; }
.mc-cap b { font-weight: 700; } .mc-cap i { font-style: normal; color: var(--bone-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: .9rem .7rem; }
.hand:empty::after { content: "No cards left. Reset to deal again."; color: var(--bone-dim); font-style: italic; font-size: .9rem; grid-column: 1 / -1; }
.slot { position: relative; aspect-ratio: 240 / 448; border-radius: 8px; background: #08060c; box-shadow: inset 0 0 0 1px var(--gilt-dk), inset 0 0 30px #000; display: grid; place-items: center; }
.slot.on { box-shadow: inset 0 0 0 1px var(--gilt), 0 0 26px #d8b25a33; }
.slot > .slot-name { font: 400 .62rem/1.3 var(--f-mark); letter-spacing: .14em; text-transform: uppercase; font-style: italic; color: var(--gilt-dk); text-align: center; padding: .3rem; }
.slot > .mc { position: absolute; inset: 0; } .slot > .mc .mc-cap { display: none; } .slot > .mc img { height: 100%; }
.ember { position: fixed; z-index: 60; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 10px 2px currentColor; }

/* ---- the Devouring Altar ---- */
.altar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.altar-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: center; max-width: 430px; }
.altar-mid { font: 400 .7rem/1.2 var(--f-mark); letter-spacing: .14em; text-transform: uppercase; font-style: italic; color: var(--crimson); text-align: center; }
.altar-mid::before { content: ""; display: block; width: 3.4rem; height: 3px; background: var(--crimson); transform: skewX(-30deg); margin: 0 auto .5rem; }
.slot-h { font: 400 .68rem/1 var(--f-mark); letter-spacing: .14em; text-transform: uppercase; font-style: italic; color: var(--bone-dim); margin: 0 0 .5rem; text-align: center; }
.slot-sub { font-size: .8rem; color: var(--bone-dim); text-align: center; margin: .45rem 0 0; min-height: 1.2em; font-variant-numeric: tabular-nums; }
.evo { max-width: 430px; margin-top: 1.1rem; }
.evo-row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--bone-dim); margin-bottom: .3rem; font-variant-numeric: tabular-nums; }
.evo-bar { height: 10px; background: #08060c; box-shadow: inset 0 0 0 1px var(--gilt-dk); transform: skewX(-20deg); overflow: hidden; }
.evo-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--crimson), var(--gilt-hi)); transition: width .4s ease; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .7rem 0 0; padding: 0; list-style: none; max-width: 430px; }
.chips li { font-size: .78rem; padding: .2rem .55rem; background: var(--plum-hi); color: #e2d9c6; }
.chips li b { color: var(--gilt-hi); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- the Pentagram ---- */
.penta { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.penta-stage { position: relative; width: min(100%, 520px); aspect-ratio: 1 / 1.06; margin-inline: auto; }
.penta-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.penta-stage .ring, .penta-stage .star { fill: none; stroke: var(--gilt-dk); stroke-width: .5; transition: stroke .5s, filter .5s; }
.penta-stage.lit .ring, .penta-stage.lit .star { stroke: #ff6a4a; filter: drop-shadow(0 0 1.2px #ff3b2f); }
.penta-stage .slot { position: absolute; width: 15%; transform: translate(-50%, -50%); }
.penta-stage .slot.centre { width: 18.5%; }
.penta-flash { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff 0, #ffd58acc 25%, #ff5a3a55 50%, transparent 70%); }
.fates { margin: 0 0 .4rem; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: .92rem; }
.fates li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .6rem; align-items: center; }
.fates li b { font-variant-numeric: tabular-nums; color: var(--gilt-hi); text-align: right; font-weight: 700; }
.fates li span { position: relative; padding: .15rem .5rem; z-index: 0; }
.fates li span::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #b2222866; z-index: -1; }
.reveal { margin-top: 1.1rem; padding: 1rem 1.1rem; background: #08060c; box-shadow: inset 0 0 0 1px var(--gilt); }
.reveal[hidden] { display: none; }
.reveal h4 { font: 400 1.5rem/1.1 var(--f-head); margin: 0 0 .2rem; }
.reveal .recipe { color: var(--gilt-hi); font-style: italic; margin: 0 0 .5rem; }
.reveal p { margin: 0 0 .8rem; font-size: .92rem; color: #d2cab8; }
.reveal .x-actions { margin-top: 0; }

/* ---- passives ---- */
.pv { grid-template-columns: minmax(0, 190px) minmax(0, 1fr) minmax(0, 1fr); }
.pv-native { margin-top: .9rem; font-size: .88rem; color: #d2cab8; }
.pv-native b { display: block; color: var(--gilt-hi); font: 400 1.15rem/1.2 var(--f-head); }
.pv-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1.2rem; }
.pv-slot { aspect-ratio: 1; border: 0; padding: .3rem; cursor: pointer; background: #08060c; box-shadow: inset 0 0 0 1px var(--gilt-dk); color: var(--bone); font: 400 .72rem/1.2 var(--f-body); display: grid; place-items: center; text-align: center; }
.pv-slot.full { box-shadow: inset 0 0 0 1px var(--gilt), inset 0 0 18px #d8b25a22; }
.pv-slot.locked { cursor: not-allowed; background: repeating-linear-gradient(135deg, #15101c 0 6px, #0e0b14 6px 12px); color: var(--bone-dim); }
.pv-slot b { display: block; color: var(--gilt-hi); font-variant-numeric: tabular-nums; }
.pv-slot:focus-visible, .pv-item:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 2px; }
.pv-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.pv-item { width: 100%; text-align: left; border: 0; cursor: pointer; padding: .55rem .7rem; background: var(--plum-hi); color: var(--bone); font: inherit; font-size: .88rem; line-height: 1.35; display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; }
.pv-item:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gilt); }
.pv-item b { font-weight: 700; } .pv-item i { font-style: normal; color: var(--gilt-hi); font-variant-numeric: tabular-nums; }
.pv-item small { grid-column: 1 / -1; color: var(--bone-dim); font-size: .8rem; }
.pv-item:disabled { opacity: .45; cursor: not-allowed; }
.pv-stats { margin: 0; display: grid; gap: .1rem; }
.pv-stats div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid #ffffff12; font-size: .92rem; }
.pv-stats dt { color: #d2cab8; } .pv-stats dd { margin: 0; color: var(--gilt-hi); font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.pv-stats small { display: block; font-weight: 400; color: var(--bone-dim); font-size: .76rem; }
.pv-stats .was { animation: bump .5s ease; } @keyframes bump { 0% { background: #d8b25a33; } 100% { background: transparent; } }

/* ---- the bag ---- */
.bag { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.bag-grid { position: relative; --cell: 44px; width: calc(var(--cell) * 10); height: calc(var(--cell) * 6); background-color: #08060c; touch-action: none; user-select: none;
  background-image: linear-gradient(#d8b25a2e 1px, transparent 1px), linear-gradient(90deg, #d8b25a2e 1px, transparent 1px); background-size: var(--cell) var(--cell); box-shadow: inset 0 0 0 1px var(--gilt-dk), 0 0 0 1px #000; }
.bag-grid:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 3px; }
.it { position: absolute; padding: 0; border: 0; cursor: grab; background: #ffffff0d; box-shadow: inset 0 0 0 1px var(--rc, #d2d2d2); display: grid; place-items: center; }
.it::before { content: ""; position: absolute; inset: 1px; background: var(--rc, #d2d2d2); opacity: .1; }
.it img { position: relative; max-width: 86%; max-height: 86%; pointer-events: none; filter: drop-shadow(0 3px 3px #000a); }
.it.unread img { filter: brightness(.45) sepia(1) hue-rotate(-30deg) saturate(3); }
.it .n { position: absolute; right: 3px; bottom: 1px; font: 700 .72rem/1 var(--f-body); color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
.it .sk { position: absolute; left: 4px; bottom: 4px; display: flex; gap: 3px; }
.it .sk i { width: 9px; height: 9px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px #aaa; } .it .sk i.f { background: var(--gilt-hi); box-shadow: 0 0 5px var(--gilt-hi); }
.it:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: -2px; z-index: 2; }
.it.lift { opacity: .25; }
.fp { position: absolute; pointer-events: none; background: #6bd18a44; box-shadow: inset 0 0 0 2px #6bd18a; z-index: 3; }
.fp.bad { background: #d14a4a44; box-shadow: inset 0 0 0 2px #d14a4a; } .fp.use { background: #ffe08a44; box-shadow: inset 0 0 0 2px var(--gilt-hi); }
.bag-ghost { position: fixed; z-index: 70; pointer-events: none; transform: translate(-50%, -50%); display: grid; place-items: center; }
.bag-ghost img { max-width: 86%; max-height: 86%; filter: drop-shadow(0 8px 8px #000c); }
.tip { min-height: 15rem; }
.tip h4 { font: 400 1.35rem/1.15 var(--f-head); margin: 0; color: var(--rc, var(--bone)); }
.tip .base { color: var(--bone-dim); font-size: .85rem; margin: .1rem 0 .7rem; }
.tip ul { margin: 0 0 .7rem; padding: 0; list-style: none; font-size: .95rem; display: grid; gap: .15rem; }
.tip li.mod { color: #8fb4ff; } .tip li.rw { color: #e7c97a; } .tip li.dim { color: var(--bone-dim); }
.tip p { margin: 0 0 .7rem; font-size: .9rem; color: #d2cab8; } .tip p.fl { font-style: italic; color: var(--bone-dim); }
.tip .x-btn { margin: .2rem 0 0 .3rem; }

@media (max-width: 900px) { .altar, .penta, .pv, .bag { grid-template-columns: 1fr; } .pv-card { max-width: 170px; } }
@media (prefers-reduced-motion: reduce) { .mc img, .evo-bar span, .penta-stage .ring, .penta-stage .star { transition: none; } .pv-stats .was { animation: none; } }