/* Gacha tile (index.html): the Mosaic poster language (terminal.css tokens: 2px ink lines, hard offset shadows, violet band
   headers, Anton display numbers, one acid block). Dark by default, html:not([data-theme="dark"]) is warm paper.
   Loaded after terminal.css. Owns the scrolling three-column grid and every gacha-specific widget; app.js ids/classes untouched. */

/* ---------- tokens + shell ---------- */
/* rarity: -bg is the swatch / card rail (brand accents), the plain token is the readable text colour for that rarity */
html.gx{--common:#8a8f86;--uncommon:var(--green);--rare:var(--violet-t);--epic:var(--peach-t);--mythic:var(--acid-t);
  --rare-bg:var(--violet);--epic-bg:var(--peach);--mythic-bg:var(--acid);--tier-silver:#5c6470;--tier-gold:var(--warn)}
html.gx[data-theme="dark"]{--tier-silver:#b8bec7}
html.gx,html.gx body{height:auto;min-height:100%}
body.gx-body{overflow-x:hidden;overflow-y:auto}
.app.gx{height:auto;grid-template-columns:380px minmax(0,1fr) 340px;grid-template-rows:40px auto 46px minmax(0,1fr) auto 24px;grid-template-areas:none;align-content:start}
.app.gx>.top,.app.gx>.hero,.app.gx>.ticker,.app.gx>.rs,.app.gx>.foot{grid-area:auto;grid-column:1 / -1}
.app.gx>.top{grid-row:1;height:40px;overflow:hidden}.app.gx>.hero{grid-row:2}.app.gx>.ticker{grid-row:3;height:46px}.app.gx>.rs{grid-row:5}.app.gx>.foot{grid-row:6;height:24px}
.app.gx>.panel{grid-area:auto;min-height:0}
.app.gx>.pl,.app.gx>.od,.app.gx>.jp{grid-row:4}
.app.gx .ph>span:first-child{white-space:nowrap;flex:none}
.app.gx .nav{min-width:0}
.app.gx .nav a{white-space:nowrap}
.app.gx [hidden],.is-hidden{display:none!important}
.app.gx .foot .chips{margin-left:0}
.tag{display:inline-block;font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--faint);padding:1px 4px;line-height:1.3;vertical-align:middle;margin-left:6px;color:var(--muted);white-space:nowrap}
.tag.est{border-style:dashed}

/* ---------- hero + stats ---------- */
.app.gx .hero{padding:26px 4px 14px;gap:16px 40px;align-items:center}
.app.gx .hero-brand{align-items:flex-start;gap:16px}
.app.gx .hero-brand .mosmark.lg{margin-top:6px}
.hero-kicker{display:block;font-style:normal;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.app.gx .hero-brand b{font-size:40px;white-space:normal}
.app.gx .hero-brand small{margin-top:6px;font-size:12px;white-space:normal;line-height:1.45;max-width:52ch}
.app.gx .hn b.disp{font-size:34px}
.hn-vault::before{background:var(--ink);outline:1px solid var(--ink-line)}.hn-jackpot::before{background:var(--acid);outline:1px solid var(--ink-line)}.hn-pulls::before{background:var(--peach)}
.ticker.stats .tk-v{gap:6px;align-items:center}
.ticker.stats .tk-v b{font-size:12px;font-weight:600;letter-spacing:.06em}
.ticker.stats .tk b{font-family:var(--mono)}

/* ---------- pull panel ---------- */
.g-machine{padding:12px 12px 0;flex:none}
.g-machine-frame{position:relative;aspect-ratio:1.55;border:2px solid var(--line);border-radius:2px;background:var(--panel2);display:grid;place-items:center;overflow:hidden}
.g-machine-frame::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:24px 24px;opacity:.35;pointer-events:none}
.g-capsule{width:112px;height:112px;display:grid;grid-template-columns:1fr 1fr;gap:5px;rotate:45deg;position:relative;filter:drop-shadow(6px 6px 0 var(--shadow))}
.g-capsule i{display:block;background:var(--ink);border:2px solid var(--ink-line)}
.g-capsule i:nth-child(2){background:var(--violet);border-color:var(--violet)}.g-capsule i:nth-child(3){background:var(--peach);border-color:var(--peach)}.g-capsule i:nth-child(4){background:var(--acid);border-color:var(--acid)}
.g-machine.is-spinning .g-capsule{animation:g-spin .9s cubic-bezier(.6,.05,.2,1) infinite}
.g-machine.is-shaking .g-capsule{animation:g-shake .35s linear infinite}
.g-machine.is-hit .g-capsule{animation:g-pop .6s ease-out 1}
@keyframes g-spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.82)}100%{transform:rotate(360deg) scale(1)}}
@keyframes g-shake{0%{transform:translate(0,0)}25%{transform:translate(-6px,4px)}50%{transform:translate(5px,-5px)}75%{transform:translate(-4px,-4px)}100%{transform:translate(0,0)}}
@keyframes g-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.g-machine-caption{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.g-controls{display:flex;flex-direction:column;gap:10px;padding:12px 12px 14px;flex:none}
.g-count{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.g-chip{height:30px;border:2px solid var(--line);border-radius:2px;background:var(--panel);box-shadow:var(--hard-sm);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.g-chip:hover{color:var(--text);background:var(--bg)}
.g-chip:active{translate:1px 1px;box-shadow:none}
.g-chip.is-active{color:var(--pri-fg);background:var(--pri-bg)}
/* the one acid button: ink text on acid, 2px line, hard shadow; presses in */
.g-pull{height:50px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:var(--acid);color:var(--on-acid);border:2px solid var(--line);border-radius:2px;box-shadow:var(--hard);font-family:var(--display);font-size:24px;font-weight:400;letter-spacing:.04em;text-transform:uppercase}
.g-pull:hover:not(:disabled){filter:brightness(1.04)}
.g-pull:active:not(:disabled){translate:2px 2px;box-shadow:2px 2px 0 var(--shadow)}
.g-pull:disabled{background:var(--panel2);border-color:var(--border);color:var(--muted);box-shadow:none;cursor:not-allowed}
.g-pull small{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:none}
.g-state{margin:0;font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--muted);min-height:16px}
.g-state a{color:var(--text);border-bottom:1px solid var(--faint)}
.g-banner{padding:8px 10px;border:2px solid var(--line);border-left:6px solid var(--peach);border-radius:2px;color:var(--text);background:var(--panel2);font-family:var(--mono);font-size:11px;line-height:1.45}
.g-state.is-error{color:var(--red)}
.kv.g-how{grid-template-columns:1fr;padding:0 12px 10px}
.kv.g-how div{padding:7px 0}
.kv.g-how span{color:var(--text);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.kv.g-how b{white-space:normal;font-weight:400;font-size:11.5px;line-height:1.5;color:var(--muted)}

/* ---------- odds panel ---------- */
.kv.g-you{padding:6px 12px 8px;gap:0 16px;flex:none}
.kv.g-you div{gap:3px;padding:8px 0 10px;border-bottom:1px solid var(--border)}
.kv.g-you span{text-transform:uppercase;letter-spacing:.1em;display:inline-flex;align-items:center;font-weight:600}
.kv.g-you b{font-size:20px;font-weight:500;line-height:1.1;white-space:normal;overflow:visible;text-overflow:clip}
.kv.g-you b.disp{font-size:26px;font-weight:400}
.kv.g-you small{font-family:var(--mono);font-size:10px;color:var(--muted);line-height:1.4;white-space:normal}
.g-dim{color:var(--muted);font-size:11px;font-weight:400}
#rtpPity{display:block;font-size:10.5px;margin-top:2px}
.g-luck[data-tier="Silver"]{color:var(--tier-silver)}.g-luck[data-tier="Gold"]{color:var(--tier-gold)}.g-luck[data-tier="Diamond"]{color:var(--rare)}
.card-meter{margin:4px 0 2px;height:6px}
.card-meter i{background:var(--violet);opacity:1}
.g-table{flex:none}
.g-table th,.g-table td{padding:5px 12px}
.g-table td:nth-child(n+2){text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.g-table td:first-child{font-family:var(--mono);font-weight:600;font-size:11.5px}
.g-table tr[data-rarity="4"] td:first-child::after{content:" · 50% of the jackpot";font-weight:400;color:var(--muted);font-size:10px}
.g-swatch{display:inline-block;width:7px;height:7px;margin:0 9px 0 1px;vertical-align:0;rotate:45deg;background:var(--common)}
.g-swatch[data-r="1"]{background:var(--uncommon)}.g-swatch[data-r="2"]{background:var(--rare-bg)}.g-swatch[data-r="3"]{background:var(--epic-bg)}.g-swatch[data-r="4"]{background:var(--mythic-bg);outline:1px solid var(--ink-line)}
.g-table tr[data-rarity="4"] td{color:var(--mythic)}
.g-table tr[data-rarity="3"] td:first-child{color:var(--epic)}
.g-table tr[data-rarity="2"] td:first-child{color:var(--rare)}
.g-table tr[data-rarity="1"] td:first-child{color:var(--uncommon)}
.g-tiers td{color:var(--muted)}.g-tiers td.sym{color:var(--text)}
.app.gx .od .ph.sub{margin-top:0}

/* ---------- jackpot panel ---------- */
.jp-big{display:flex;flex-direction:column;gap:2px;padding:12px 12px 8px;flex:none}
.jp-big span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.jp-big b.disp{font-size:36px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.jp-big small{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.jp .prog{padding:4px 12px}
.jp .prog .bar i{background:var(--violet);opacity:1}
.jp .prog b{font-size:10px}
.jp .kv{padding:0 12px 4px}
.jp .kv b{font-family:var(--mono)}
.jp .ph.sub{margin-top:0}
.g-history{list-style:none;margin:0;padding:2px 12px 8px;overflow:auto;flex:1;min-height:80px;max-height:420px;scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
.g-history li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--hair);font-size:11px}
.g-history li span{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:600;color:var(--green);white-space:nowrap}
.g-history li.is-refunded{color:var(--muted)}.g-history li.is-refunded span{color:var(--muted)}
.g-history li div{display:flex;flex-direction:column;gap:2px;min-width:0}
.g-history li b{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.02em}
.g-history li small{font-size:10px;line-height:1.35;color:var(--muted);white-space:normal}
.g-history li .g-tx{color:inherit;text-decoration:underline;text-underline-offset:2px}
.g-history li[data-tone="green"] b,.g-history li[data-tone="green"] span{color:var(--green)}
.g-history li[data-tone="peach"] b,.g-history li[data-tone="peach"] span,.g-history li[data-tone="peach"] .g-note{color:var(--peach-t)}
.g-history li[data-tone="acid"] b,.g-history li[data-tone="acid"] span{color:var(--acid-t)}
.g-history li[data-tone="muted"] b,.g-history li[data-tone="muted"] span{color:var(--muted)}
.g-history li[data-tone="muted"] b{color:var(--text);font-weight:500}
.g-history .g-empty{display:block;color:var(--muted);border:0;padding:8px 0;font-family:var(--mono)}

/* ---------- result ---------- */
.rs{padding-bottom:12px}
.g-h2{font-size:30px;line-height:1.1;padding:12px 12px 10px;font-weight:400}
.g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:14px;padding:0 12px 6px}
.g-card{aspect-ratio:.8;perspective:900px}
.g-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.g-card.is-flipped .g-card-inner{transform:rotateY(180deg)}
.g-face{position:absolute;inset:0;backface-visibility:hidden;border:2px solid var(--line);border-radius:2px;background:var(--panel2);box-shadow:var(--hard);display:flex;flex-direction:column;justify-content:space-between;padding:10px}
.g-face-back{background-image:repeating-linear-gradient(45deg,transparent 0 6px,var(--hair) 6px 12px)}
.g-face-back::after{content:"?";font-family:var(--display);font-size:44px;margin:auto;color:var(--faint)}
.g-face-front{transform:rotateY(180deg);border-top:6px solid var(--common)}
.g-face-front .g-rarity{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--common)}
.g-face-front strong{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.01em;line-height:1;font-variant-numeric:tabular-nums}
.g-face-front em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.08em}
.g-card[data-rarity="1"] .g-face-front{border-top-color:var(--uncommon)}.g-card[data-rarity="1"] .g-rarity{color:var(--uncommon)}
.g-card[data-rarity="2"] .g-face-front{border-top-color:var(--rare-bg)}.g-card[data-rarity="2"] .g-rarity{color:var(--rare)}
.g-card[data-rarity="3"] .g-face-front{border-top-color:var(--epic-bg)}.g-card[data-rarity="3"] .g-rarity{color:var(--epic)}
.g-card[data-rarity="4"] .g-face-front{background:var(--acid);border-color:var(--line);border-top-color:var(--line);color:var(--on-acid)}
.g-card[data-rarity="4"] .g-rarity,.g-card[data-rarity="4"] .g-face-front em{color:var(--on-acid)}
.g-card.is-big .g-face-front{animation:g-pop .6s ease-out 1}

/* ---------- confetti ---------- */
.g-confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.g-confetti i{position:absolute;top:-12px;width:6px;height:12px;background:var(--acid);animation:g-fall 1.8s linear forwards}
.g-confetti i:nth-child(3n){background:var(--violet)}.g-confetti i:nth-child(3n+1){background:var(--peach)}.g-confetti i:nth-child(5n){background:var(--green)}
@keyframes g-fall{to{transform:translateY(110vh) rotate(540deg);opacity:.2}}

@media(prefers-reduced-motion:reduce){.g-card-inner{transition:none}.g-confetti i{animation:none}}

/* ---------- embed mode (embed.js sets html.embed): just the app body on a transparent background ---------- */
html.embed,html.embed body{background:transparent;height:auto;min-height:0}
html.embed body{overflow:hidden}
html.embed .app.gx{height:auto;min-height:0;background:transparent;padding:8px 8px 0;gap:18px;grid-template-rows:none;grid-auto-rows:auto}
html.embed .app.gx>*{grid-row:auto}
html.embed .app.gx>.foot{height:0}
html.embed .app.gx>.top,html.embed .app.gx>.foot,html.embed .wallets,html.embed .theme,html.embed .conn{display:none!important}
html.embed .app.gx .hero{padding:8px 4px 10px}
html.embed .g-confetti{position:absolute}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .app.gx{grid-template-columns:320px minmax(0,1fr) 300px}
  .app.gx .hero-brand b{font-size:32px}
  .app.gx .hn b.disp{font-size:26px}
  .g-tiers{display:none}
}
@media(max-width:860px){
  .app.gx{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto}
  .app.gx>.top,.app.gx>.hero,.app.gx>.ticker,.app.gx>.pl,.app.gx>.od,.app.gx>.jp,.app.gx>.rs,.app.gx>.foot{grid-row:auto}
  .app.gx>.top{height:auto;overflow:visible}
  .app.gx .hero{padding:16px 12px 12px;gap:14px}
  .app.gx .hero-brand b{font-size:32px}
  .app.gx .hero-brand small{font-size:12px}
  .hero-kicker{font-size:11px}
  .hero-nums{grid-template-columns:1fr 1fr}
  .hn{min-width:0}
  .hn-pulls{grid-column:1 / -1}
  .app.gx .hn b.disp{font-size:26px;overflow:hidden;text-overflow:ellipsis}
  .app.gx>.ticker{height:auto}
  .app.gx .ph.sub{margin-top:0}
  .g-machine-frame{aspect-ratio:2}
  .g-chip{height:40px;font-size:11.5px}
  .g-pull{height:54px}
  .g-state,.g-banner,.kv.g-how b,.kv.g-you small,.jp-big small,.g-history li small,.g-history li,.g-machine-caption,.tag{font-size:12px}
  .kv.g-you{grid-template-columns:1fr}
  .g-history{max-height:240px}
  .g-table th,.g-table td{padding:5px 8px}
  .g-table tr[data-rarity="4"] td:first-child::after{content:none}
  .g-cards{grid-template-columns:repeat(2,1fr)}
  .app.gx>.foot{height:auto}
  html.embed .app.gx{padding:6px 6px 0;gap:14px}
}