/* Scholar Arcade — the Scholar Dashboard's Arcade tab and its card reveal.
   ---------------------------------------------------------------------------
   Every colour comes from the Studio token contract (studio-tokens.css). The
   panel is a .dark-well "vault": inside the daylight dashboard the well restores
   the dark studio palette, which is what all 488 collection artworks were
   painted against. Dialogs are appended to <body> and inherit the same dark
   :root tokens, on the dashboard and on game pages that load this file for the
   reveal. Rarity hues map to existing course tokens; nothing here is a new hex.
   Motion is decorative only and is removed entirely under reduced motion. */

/* Top chrome while the Arcade is on screen: the fixed site header, the gap
   above the sticky section bar, the bar itself (a 44px-or-larger target plus
   its padding and border) and a little breathing room below it. */
:root {
  --sac-sticky-top: calc(var(--header-height, 72px) + .5rem);
  --sac-bar-block: calc(max(44px, 2.75rem) + .7rem + 2px);
  --sac-clear-top: calc(var(--sac-sticky-top) + var(--sac-bar-block) + .75rem);
}
/* Anything that scrolls into view on the Arcade panel (a section link, an
   album, a new binder page, the next control reached with Tab or Shift+Tab,
   focus returning from a dialog) lands below the header and the section bar,
   never under them. Older engines without :has() get per-target margins. */
html:has(#sd-root .sd-panel.sac.active) { scroll-padding-top: var(--sac-clear-top); }
/* A focused search box or menu brings its label into view with it. */
.sac-field :is(input, select) { scroll-margin-top: 1.6rem; }
@supports not selector(:has(*)) {
  .sac-section, .sac-album-head, .sac-tools, .sac-count, .sac :is(a[href], button, input, select, summary, [tabindex]) { scroll-margin-top: var(--sac-clear-top); }
  .sac .sac-field :is(input, select) { scroll-margin-top: calc(var(--sac-clear-top) + 1.6rem); }
}

.sac, .sac-dialog {
  --sac-radius: 18px;
  --sac-radius-sm: 12px;
  --sac-gap: clamp(.75rem, 1.6vw, 1.25rem);
  color: var(--ink-2);
  font-family: var(--font-body, Outfit, system-ui, sans-serif);
}
.sac *, .sac-dialog * { box-sizing: border-box; }
.sac [hidden], .sac-dialog [hidden] { display: none !important; }
#sd-root .sac h2, #sd-root .sac h3, #sd-root .sac h4, .sac-dialog h2, .sac-dialog h3 { color: var(--ink); font-family: var(--font-body, Outfit, sans-serif); margin: 0; }
#sd-root .sac p, .sac-dialog p { margin: 0; }
/* Base resets carry zero specificity so component rules always win. */
:where(.sac, .sac-dialog) a { color: inherit; }
:where(.sac, .sac-dialog) :where(button, select, input) { font: inherit; }
.sac :focus-visible, .sac-dialog :focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; border-radius: 10px; }
.sac-icon { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; vertical-align: -.15em; }
.sac-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sac-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Rarity: one hue per tier, resolved where the card sits so a dark well or a
   dialog always uses its own palette. */
[data-rarity] { --rc: var(--muted); }
[data-rarity="uncommon"] { --rc: var(--c-geo); }
[data-rarity="rare"] { --rc: var(--c-alg1); }
[data-rarity="epic"] { --rc: var(--c-alg2); }
[data-rarity="legendary"] { --rc: var(--gold); }
[data-rarity="mythic"] { --rc: var(--c-calc); }
[data-rarity="divine"] { --rc: var(--c-precalc); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.sac-btn, .sac .sd-pack-btn, .sac-dialog .sac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: .7rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  font-family: var(--font-body, Outfit, sans-serif); font-weight: 700; font-size: .92rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.sac-btn:hover, .sac-btn:focus-visible { border-color: var(--accent-bright); background: var(--surface); }
.sac-btn--play, #sd-root .sac .sd-pack-btn, .sac-dialog .sac-btn--play {
  border-color: var(--gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 72%, var(--ink)), var(--gold));
  color: var(--void); font-weight: 800;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--gold) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 55%, transparent);
}
.sac-btn--play:hover, .sac-btn--play:focus-visible, #sd-root .sac .sd-pack-btn:hover:not(:disabled), .sac-dialog .sac-btn--play:hover {
  transform: translateY(-2px); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 60%, var(--ink)), var(--gold));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--gold) 38%, transparent);
}
.sac-btn--ghost { background: transparent; }
.sac-btn--quiet { background: var(--surface); border-color: var(--line-strong); }
.sac button:disabled, .sac-dialog button:disabled { cursor: not-allowed; }
/* Unavailable (no earlier page, last card, not enough Bucks): flat, quiet text
   and a dashed outline like the binder's empty slots, with no hover lift. */
:is(.sac, .sac-dialog) .sac-btn:disabled, :is(.sac, .sac-dialog) .sac-btn:disabled:hover {
  border-color: var(--line-strong); border-style: dashed; background: transparent; color: var(--muted);
  box-shadow: none; transform: none;
}
#sd-root .sac .sd-pack-btn:disabled { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-2); box-shadow: none; transform: none; opacity: 1; }

/* ── The vault ───────────────────────────────────────────────────────────── */
#sd-root .sac-vault {
  position: relative; padding: clamp(.75rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line); border-radius: 28px; color: var(--ink-2);
  background:
    radial-gradient(900px 520px at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    radial-gradient(760px 520px at 100% 22%, color-mix(in srgb, var(--c-geo) 9%, transparent), transparent 70%),
    radial-gradient(900px 600px at 50% 100%, color-mix(in srgb, var(--c-alg1) 8%, transparent), transparent 70%),
    var(--paper);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--void) 32%, transparent);
}
.sac-kicker { display: inline-flex; align-items: center; gap: .45rem; color: var(--c-geo); font-family: var(--font-mono, ui-monospace, monospace); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sac-section { margin-top: clamp(2.5rem, 6vw, 4.25rem); }
.sac-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.sac-section-head h3 { margin-top: .35rem !important; font-size: clamp(1.6rem, 3.4vw, 2.35rem); font-weight: 850; letter-spacing: -.03em; line-height: 1.05; }
.sac-section-sub { max-width: 52ch; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.sac-note { margin-top: 1rem !important; max-width: 78ch; color: var(--ink-2); font-size: .85rem; line-height: 1.6; }
.sac-count { margin: 1rem 0 .85rem !important; color: var(--ink-2); font-family: var(--font-mono, monospace); font-size: .78rem; }
.sac-empty { grid-column: 1 / -1; padding: 1.75rem; border: 1px dashed var(--line-strong); border-radius: var(--sac-radius); color: var(--ink-2); text-align: center; }

/* ── Hero: featured world ───────────────────────────────────────────────── */
.sac-hero { display: grid; gap: var(--sac-gap); }
.sac-hero-stage {
  position: relative; display: grid; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line-strong); border-radius: 24px; background: var(--recessed);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
.sac-hero-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.sac-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 50%; }
.sac-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--recessed) 88%); }
.sac-hero-copy { position: relative; z-index: 1; display: grid; gap: .8rem; align-content: center; padding: 0 1.15rem 1.35rem; margin-top: -.75rem; }
.sac-title { font-size: clamp(2.2rem, 7.5vw, 4.6rem); font-weight: 900; line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
.sac-hero-desc { max-width: 38ch; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.sac-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.sac-tag { display: inline-flex; align-items: center; min-height: 26px; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.sac-tag--graded { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold); }
.sac-tag--free { border-color: color-mix(in srgb, var(--c-geo) 55%, transparent); color: var(--c-geo); }
.sac-hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .35rem; }
.sac-hero-progress { color: var(--ink-2); font-size: .88rem; line-height: 1.55; }
.sac-hero-progress a { display: inline-flex; align-items: center; min-height: 44px; margin-left: .25rem; padding: .35rem .85rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--c-geo); font-weight: 700; text-decoration: none; }
.sac-hero-progress a:hover { border-color: var(--c-geo); }
.sac-hero-progress:empty { display: none; }

/* ── HUD ─────────────────────────────────────────────────────────────────── */
.sac-hud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.sac-stat {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon label" "icon value" "note note";
  align-items: center; column-gap: .7rem; row-gap: .15rem; min-width: 0; padding: .85rem .9rem;
  border: 1px solid var(--line); border-radius: var(--sac-radius); background: linear-gradient(165deg, var(--surface-2), var(--surface));
}
.sac-stat-icon, .sac-ring { grid-area: icon; width: 42px; height: 42px; object-fit: contain; }
.sac-stat-label, #sd-root .sac .sd-arcade-summary-label { grid-area: label; margin: 0; color: var(--ink-2); font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.sac-stat-value { grid-area: value; color: var(--ink); font-family: var(--font-mono, monospace); font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.sac-stat-note, .sac-stat-link, .sac-stat .sac-meter { grid-area: note; margin-top: .4rem; }
.sac-stat-note { color: var(--ink-2); font-size: .74rem; line-height: 1.45; }
.sac-stat-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-geo); font-size: .78rem; font-weight: 700; text-underline-offset: 3px; }
.sac-stat--level { grid-template-areas: "icon label" "icon value" "meter meter" "note note"; }
.sac-stat--level .sac-meter { grid-area: meter; }
.sac-stat--level .sac-stat-note { margin-top: .3rem; }
@media (max-width: 1179px) {
  .sac-stat { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "icon label" "value value" "note note"; padding: .75rem; column-gap: .5rem; }
  .sac-stat--level { grid-template-areas: "icon label" "value value" "meter meter" "note note"; }
  .sac-stat-icon, .sac-ring { width: 30px; height: 30px; }
  .sac-ring span { inset: 5px; }
  .sac-stat-value { margin-top: .25rem; font-size: 1.3rem; }
  .sac-stat--wallet { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon label" "icon value" "note note"; }
  .sac-stat--wallet .sac-stat-icon { width: 40px; height: 40px; }
  .sac-stat--wallet .sac-stat-value { font-size: 1.6rem; margin: 0; }
}
.sac-stat--wallet { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, var(--surface)), var(--surface)); }
.sac-stat--wallet .sac-stat-value { color: var(--gold); }
.sac-meter { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--recessed); border: 1px solid var(--line); overflow: hidden; }
.sac-meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--c-geo)); transition: width .6s ease; }
.sac-ring { --p: 0; position: relative; border-radius: 50%; background: conic-gradient(var(--c-geo) calc(var(--p) * 1%), var(--line-strong) 0); }
.sac-ring span { position: absolute; inset: 6px; border-radius: 50%; background: var(--surface-2); }

/* ── Today's card drops ──────────────────────────────────────────────────── */
.sac-drops { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--line-strong); border-radius: 22px; background: linear-gradient(160deg, var(--surface), var(--recessed)); }
.sac-drops-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; }
.sac-drops-head h3 { font-size: 1.1rem; font-weight: 850; letter-spacing: -.01em; }
.sac-drops-head p { color: var(--ink-2); font-size: .82rem; }
.sac-drops-list { display: grid; grid-template-columns: 1fr; gap: .5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 480px) { .sac-drops-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sac-drop a { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "art name" "art state"; align-items: center; column-gap: .6rem; min-height: 64px; padding: .5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.sac-drop a:hover, .sac-drop a:focus-visible { border-color: var(--accent-bright); transform: translateY(-2px); }
.sac-drop img { grid-area: art; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.sac-drop-name { grid-area: name; font-size: .82rem; font-weight: 800; line-height: 1.2; }
.sac-drop-state { grid-area: state; display: inline-flex; align-items: center; gap: .3rem; color: var(--ink-2); font-family: var(--font-mono, monospace); font-size: .7rem; }
.sac-drop[data-state="ready"] .sac-drop-state { color: var(--gold); }
.sac-drop[data-state="claimed"] a { border-color: color-mix(in srgb, var(--c-geo) 50%, transparent); }
.sac-drop[data-state="claimed"] .sac-drop-state { color: var(--c-geo); }
.sac-next { display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem; border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--ink); font-size: .86rem; font-weight: 600; line-height: 1.45; }
.sac-next .sac-icon { color: var(--gold); width: 1.25em; height: 1.25em; }

/* ── Section navigation ──────────────────────────────────────────────────── */
.sac-tabs {
  position: sticky; top: var(--sac-sticky-top); z-index: 6; display: flex; gap: .35rem; margin: var(--sac-gap) 0 0;
  padding: .35rem; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line-strong); border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--void) 35%, transparent);
}
.sac-tabs::-webkit-scrollbar { display: none; }
.sac-tabs a { flex: none; display: inline-flex; align-items: center; min-height: max(44px, 2.75rem); padding: .5rem 1rem; border-radius: 999px; color: var(--ink-2); font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .18s ease, color .18s ease; }
.sac-tabs a:hover { color: var(--ink); background: var(--surface-2); }
.sac-tabs a[aria-current="true"] { background: var(--accent); color: var(--void); }

/* ── Filters ─────────────────────────────────────────────────────────────── */
.sac-field { display: grid; gap: .4rem; min-width: 0; color: var(--ink-2); font-size: .78rem; font-weight: 700; }
.sac-field input, .sac-field select {
  width: 100%; min-width: 0; min-height: 46px; padding: .65rem .8rem; border: 1px solid var(--muted); border-radius: 12px;
  background: var(--recessed); color: var(--ink); font-weight: 500;
}
.sac-field select { appearance: auto; }
.sac-input-wrap { position: relative; display: block; }
.sac-input-wrap .sac-icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.sac-input-wrap input { padding-left: 2.4rem; }
.sac-field input::placeholder { color: var(--ink-2); opacity: 1; }
.sac-chips { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.sac-chips legend { width: 100%; margin-bottom: .4rem; padding: 0; color: var(--ink-2); font-size: .78rem; font-weight: 700; }
.sac-chips label { position: relative; cursor: pointer; }
.sac-chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sac-chips span { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .95rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: .82rem; font-weight: 700; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.sac-chips input:checked + span { border-color: var(--accent-bright); background: var(--accent); color: var(--void); }
.sac-chips input:focus-visible + span { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
.sac-chips label:hover span { border-color: var(--accent-bright); }

/* ── Game worlds ─────────────────────────────────────────────────────────── */
.sac-game-tools { display: grid; gap: .9rem; align-items: end; }
.sac-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.sac-game {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--sac-radius); background: var(--surface); color: var(--ink-2); text-decoration: none;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.sac-game-art { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--recessed); }
.sac-game-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.sac-game-art::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(180deg, transparent, var(--surface)); }
.sac-game-body { display: flex; flex: 1; flex-direction: column; gap: .45rem; padding: .75rem .8rem .9rem; }
.sac-game-name { color: var(--ink); font-size: 1rem; font-weight: 850; line-height: 1.2; letter-spacing: -.01em; }
.sac-game-description { color: var(--ink-2); font-size: .8rem; line-height: 1.5; }
.sac-game-progress { min-height: 1.45em; color: var(--c-geo); font-family: var(--font-mono, monospace); font-size: .72rem; line-height: 1.45; }
.sac-game-progress[data-played="false"], .sac-game[data-record="none"] .sac-game-progress { color: var(--ink-2); }
.sac-game-action { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .2rem; color: var(--gold); font-size: .85rem; font-weight: 800; }
.sac-game:hover, .sac-game:focus-visible { transform: translateY(-5px); border-color: var(--accent-bright); box-shadow: 0 18px 40px color-mix(in srgb, var(--void) 55%, transparent), 0 0 0 1px var(--accent-bright), 0 0 32px color-mix(in srgb, var(--accent) 30%, transparent); }
.sac-game:hover .sac-game-art img, .sac-game:focus-visible .sac-game-art img { transform: scale(1.07); }
.sac-game:hover .sac-game-action .sac-icon, .sac-game:focus-visible .sac-game-action .sac-icon { transform: translateX(3px); }
.sac-game-action .sac-icon { transition: transform .2s ease; }
.sac-game.is-featured { border-color: color-mix(in srgb, var(--gold) 60%, transparent); }

/* ── Free card paths ─────────────────────────────────────────────────────── */
.sac-steps { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: sac-step; }
.sac-steps li { position: relative; display: grid; gap: .15rem; padding: .85rem .9rem .85rem 3.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); counter-increment: sac-step; }
.sac-steps li::before { content: counter(sac-step); position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--accent); color: var(--void); font-family: var(--font-mono, monospace); font-size: .8rem; font-weight: 800; }
.sac-steps strong { color: var(--ink); font-size: .9rem; }
.sac-steps span { color: var(--ink-2); font-size: .8rem; line-height: 1.45; }
.sac-paths { display: grid; gap: .75rem; }
.sac-path { display: flex; flex-direction: column; gap: .45rem; overflow: hidden; padding: 0 0 1rem; border: 1px solid var(--line-strong); border-radius: var(--sac-radius); background: var(--surface); color: var(--ink-2); text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.sac-path img { display: block; width: 100%; height: auto; aspect-ratio: 2; object-fit: cover; margin-bottom: .4rem; }
.sac-path > :not(img) { margin-inline: 1rem; }
.sac-path-kind { color: var(--c-geo); font-family: var(--font-mono, monospace); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.sac-path strong { color: var(--ink); font-size: 1.1rem; font-weight: 850; }
.sac-path-goal { color: var(--ink-2); font-size: .85rem; line-height: 1.5; }
.sac-path-state { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; min-height: 28px; padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-2); font-family: var(--font-mono, monospace); font-size: .72rem; }
.sac-path[data-state="ready"] .sac-path-state { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold); }
.sac-path[data-state="claimed"] .sac-path-state { border-color: color-mix(in srgb, var(--c-geo) 55%, transparent); color: var(--c-geo); }
.sac-path-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .3rem; color: var(--gold); font-size: .86rem; font-weight: 800; }
.sac-path:hover, .sac-path:focus-visible { transform: translateY(-4px); border-color: var(--accent-bright); box-shadow: 0 16px 36px color-mix(in srgb, var(--void) 50%, transparent); }

/* ── Pack shop ───────────────────────────────────────────────────────────── */
#sd-root .sac .sd-shop-message { min-height: 0; margin: 0 0 .85rem; color: var(--ink-2); font-size: .88rem; }
#sd-root .sac .sd-shop-message:empty { margin: 0; }
#sd-root .sac .sd-shop-message.good { color: var(--c-geo); }
#sd-root .sac .sd-shop-message.warn { color: var(--gold); }
.sac-pending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--gold); border-radius: var(--sac-radius); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); color: var(--ink); }
#sd-root .sac .sd-shop-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
#sd-root .sac .sd-pack-card {
  --pack: var(--c-geo); position: relative; display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); align-items: center; gap: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 22px;
  background: radial-gradient(120% 90% at 20% 30%, color-mix(in srgb, var(--pack) 22%, transparent), transparent 65%), var(--surface);
}
#sd-root .sac .sd-pack-card[data-pack-card="premium"] { --pack: var(--c-alg2); }
#sd-root .sac .sd-pack-card[data-pack-card="legendary"] { --pack: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.sac-pack-case { position: relative; padding: .9rem .4rem .9rem .9rem; perspective: 900px; }
.sac-pack-case::before { content: ""; position: absolute; left: 18%; right: 12%; bottom: .6rem; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pack) 55%, transparent), transparent); filter: blur(6px); }
.sac-pack-art { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; box-shadow: 0 14px 30px color-mix(in srgb, var(--void) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--pack) 45%, transparent); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.sac-pack-body { display: flex; flex-direction: column; gap: .4rem; min-width: 0; padding: 1rem 1rem 1rem .6rem; }
.sac-pack-tier { align-self: flex-start; padding: .15rem .55rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pack) 60%, transparent); color: var(--pack); font-family: var(--font-mono, monospace); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#sd-root .sac .sd-pack-title { color: var(--ink); font-family: var(--font-body, Outfit, sans-serif); font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 850; letter-spacing: -.02em; }
#sd-root .sac .sd-pack-price { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--gold); font-family: var(--font-mono, monospace); font-size: 1rem; font-weight: 700; }
.sac-coin { width: 22px; height: 22px; object-fit: contain; }
#sd-root .sac .sd-pack-note { flex: 0; color: var(--ink-2); font-size: .82rem; line-height: 1.5; }
.sac-afford { display: grid; gap: .3rem; color: var(--ink-2); font-size: .76rem; line-height: 1.4; }
.sac-afford:empty { display: none; }
.sac-afford[data-ready="true"] { color: var(--c-geo); font-weight: 700; }
#sd-root .sac .sd-pack-btn { width: 100%; margin-top: .35rem; font-size: .9rem; }
#sd-root .sac .sd-pack-card:hover .sac-pack-art, #sd-root .sac .sd-pack-card:focus-within .sac-pack-art { transform: translateY(-6px) rotateY(-8deg) rotateX(4deg); }
.sac-pack-case::after { content: ""; position: absolute; inset: .9rem .4rem .9rem .9rem; border-radius: 14px; background: linear-gradient(110deg, transparent 38%, color-mix(in srgb, var(--ink) 30%, transparent) 50%, transparent 62%); background-size: 260% 100%; background-position: 140% 0; pointer-events: none; transition: background-position .9s ease; }
#sd-root .sac .sd-pack-card:hover .sac-pack-case::after { background-position: -40% 0; }
.sac-disclosure { margin-top: 1rem; padding: .25rem 1rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--sac-radius); background: var(--surface); }
.sac-disclosure summary { display: flex; align-items: center; min-height: 46px; color: var(--ink); font-weight: 700; cursor: pointer; }
.sac-disclosure p { margin-top: .8rem !important; color: var(--ink-2); font-size: .84rem; line-height: 1.6; }
.sac-table-scroll { overflow-x: auto; }
.sac-odds { width: 100%; border-collapse: collapse; color: var(--ink); font-size: .85rem; text-align: left; }
.sac-odds caption { padding-bottom: .6rem; color: var(--ink-2); text-align: left; }
.sac-odds th, .sac-odds td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.sac-odds td { font-family: var(--font-mono, monospace); }

/* ── Binder ──────────────────────────────────────────────────────────────── */
.sac-ladder { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.25rem; }
.sac-ladder button { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem .8rem .35rem .45rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .8rem; font-weight: 700; cursor: pointer; }
.sac-ladder button:hover, .sac-ladder button[aria-pressed="true"] { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, var(--surface)); }
.sac-ladder b { color: var(--rc); font-weight: 800; }
.sac-ladder small { color: var(--ink-2); font-family: var(--font-mono, monospace); font-size: .72rem; }
.sac-gem { width: 26px; height: 26px; object-fit: contain; flex: none; }
[data-rarity="mythic"] > .sac-gem, .sac-gem[data-rarity="mythic"] { filter: hue-rotate(58deg) saturate(1.25); }
.sac-albums-group { margin: 0 0 .6rem; color: var(--ink-2); font-family: var(--font-mono, monospace); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.sac-albums { display: grid; gap: 1.1rem; margin-bottom: 1.25rem; }
.sac-album-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.25rem), 1fr)); gap: .6rem; }
.sac-album {
  position: relative; display: grid; gap: .45rem; padding: 0 0 .75rem; overflow: hidden; text-align: left; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); color: var(--ink);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sac-album img { display: block; width: 100%; height: auto; aspect-ratio: 2; object-fit: cover; }
.sac-album > span:not(.sac-seal):not(.sac-album-new) { margin-inline: .7rem; }
.sac-album-name { font-size: .85rem; font-weight: 800; line-height: 1.25; }
.sac-album-count { color: var(--ink-2); font-family: var(--font-mono, monospace); font-size: .72rem; }
.sac-album:hover, .sac-album:focus-visible, .sac-album[aria-pressed="true"] { transform: translateY(-3px); border-color: var(--accent-bright); box-shadow: 0 12px 28px color-mix(in srgb, var(--void) 45%, transparent); }
.sac-album[data-complete="true"] { border-color: color-mix(in srgb, var(--gold) 65%, transparent); }
.sac-seal { position: absolute; top: .5rem; right: .5rem; display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem; border-radius: 999px; background: var(--gold); color: var(--void); font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 45%, transparent); }
.sac-album-new { position: absolute; top: .5rem; left: .5rem; padding: .2rem .5rem; border-radius: 999px; background: var(--c-calc); color: var(--void); font-size: .66rem; font-weight: 800; }
.sac-album-head { display: grid; gap: 1rem; margin-bottom: 1.25rem; padding: 1rem; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 22px; background: linear-gradient(160deg, var(--surface-2), var(--recessed)); }
.sac-album-head img { display: block; width: 100%; height: auto; aspect-ratio: 2; object-fit: cover; border-radius: 16px; }
.sac-album-head h4 { margin: .35rem 0 .5rem !important; color: var(--ink); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 850; letter-spacing: -.02em; }
.sac-album-head p { color: var(--ink-2); font-size: .88rem; line-height: 1.55; }
.sac-album-head .sac-meter { height: 10px; margin: .75rem 0 .5rem; }
.sac-album-stats { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.sac-album-stats .sac-tag { border-color: color-mix(in srgb, var(--rc) 50%, transparent); color: var(--rc); }
.sac-album-head .sac-btn { margin-top: .9rem; }
.sac-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-bottom: .25rem; }
.sac-tools .sac-field--search { grid-column: 1 / -1; }
.sac-collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem .6rem; }

/* A card: rarity frame, artwork, foil. Shared by the binder, reveal and dossier. */
.sac-card {
  position: relative; display: block; aspect-ratio: 1; padding: 3px; border-radius: 16px; isolation: isolate;
  background: linear-gradient(145deg, var(--line-strong), var(--surface-2));
}
.sac-card-art { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 13px; background: var(--recessed); }
.sac-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sac-card::after { content: ""; position: absolute; inset: 3px; z-index: 1; border-radius: 13px; pointer-events: none; background: linear-gradient(115deg, transparent 36%, color-mix(in srgb, var(--ink) 26%, transparent) 48%, transparent 60%); background-size: 280% 100%; background-position: 150% 0; mix-blend-mode: overlay; opacity: 0; transition: opacity .3s ease; }
[data-rarity="uncommon"] .sac-card, .sac-card[data-rarity="uncommon"] { background: linear-gradient(145deg, var(--rc), color-mix(in srgb, var(--rc) 35%, var(--surface))); }
[data-rarity="rare"] .sac-card, .sac-card[data-rarity="rare"] { background: linear-gradient(145deg, var(--rc), color-mix(in srgb, var(--rc) 30%, var(--surface)) 50%, var(--rc)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 35%, transparent); }
[data-rarity="epic"] .sac-card, .sac-card[data-rarity="epic"] { padding: 4px; background: linear-gradient(135deg, var(--rc), color-mix(in srgb, var(--rc) 25%, var(--surface)) 45%, var(--rc) 70%, color-mix(in srgb, var(--rc) 40%, var(--ink))); box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 40%, transparent); }
[data-rarity="legendary"] .sac-card, .sac-card[data-rarity="legendary"],
[data-rarity="mythic"] .sac-card, .sac-card[data-rarity="mythic"] { padding: 4px; background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 55%, var(--ink)), var(--rc) 30%, color-mix(in srgb, var(--rc) 35%, var(--void)) 55%, var(--rc) 78%, color-mix(in srgb, var(--rc) 55%, var(--ink))); box-shadow: 0 0 24px color-mix(in srgb, var(--rc) 50%, transparent); }
[data-rarity="divine"] .sac-card, .sac-card[data-rarity="divine"] { padding: 4px; background: conic-gradient(from var(--sac-spin, 0deg), var(--c-precalc), var(--c-alg2), var(--c-calc), var(--gold), var(--c-geo), var(--c-precalc)); box-shadow: 0 0 28px color-mix(in srgb, var(--c-precalc) 45%, transparent), 0 0 46px color-mix(in srgb, var(--c-alg2) 30%, transparent); }
:is([data-rarity="epic"], [data-rarity="legendary"], [data-rarity="mythic"], [data-rarity="divine"]) .sac-card::after,
.sac-card:is([data-rarity="epic"], [data-rarity="legendary"], [data-rarity="mythic"], [data-rarity="divine"])::after { opacity: 1; }
:is([data-rarity="mythic"], [data-rarity="divine"]) .sac-card::after, .sac-card:is([data-rarity="mythic"], [data-rarity="divine"])::after {
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--c-precalc) 30%, transparent) 42%, color-mix(in srgb, var(--c-calc) 30%, transparent) 50%, color-mix(in srgb, var(--gold) 30%, transparent) 58%, transparent 70%);
  background-size: 280% 100%; mix-blend-mode: color-dodge;
}
.sac-card-new { position: absolute; z-index: 2; top: -6px; left: -6px; padding: .18rem .5rem; border-radius: 999px; background: var(--c-calc); color: var(--void); font-size: .66rem; font-weight: 900; letter-spacing: .08em; box-shadow: 0 4px 12px color-mix(in srgb, var(--c-calc) 45%, transparent); }
.sac-card-count { position: absolute; z-index: 2; right: 8px; bottom: 8px; padding: .12rem .45rem; border-radius: 999px; background: var(--void); border: 1px solid var(--line-strong); color: var(--ink); font-family: var(--font-mono, monospace); font-size: .7rem; font-weight: 700; }
.sac-card-lock { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: var(--ink-2); }
.sac-card-lock .sac-icon { width: 30%; height: 30%; max-width: 44px; max-height: 44px; padding: 9px; border-radius: 50%; background: var(--void); border: 1px solid var(--line-strong); }
[data-owned="false"] .sac-card { background: linear-gradient(145deg, var(--line), var(--surface)); box-shadow: none; padding: 3px; }
[data-owned="false"] .sac-card::after { opacity: 0; }
[data-owned="false"] .sac-card-art img { filter: grayscale(1) brightness(.62) contrast(1.3) blur(2.5px); transform: scale(1.08); }
[data-owned="false"] .sac-card-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 30%, color-mix(in srgb, var(--void) 70%, transparent) 100%); }

.sac .sac-item { display: flex; flex-direction: column; gap: .55rem; min-width: 0; padding: 0; text-align: left; border: 0; border-radius: 16px; background: none; color: var(--ink-2); cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.sac-item-body { display: grid; gap: .2rem; padding: 0 .2rem; }
.sac-item-name { color: var(--ink); font-size: .86rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
[data-owned="false"] .sac-item-name { color: var(--ink-2); }
.sac-item-meta { display: inline-flex; align-items: center; gap: .3rem; color: var(--rc); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
[data-owned="false"] .sac-item-meta { color: var(--ink-2); }
.sac-item-meta .sac-gem { width: 18px; height: 18px; }
.sac-item-owned { color: var(--ink-2); font-family: var(--font-mono, monospace); font-size: .7rem; }
.sac .sac-item:hover, .sac .sac-item:focus-visible { transform: translateY(-4px); }
.sac .sac-item:hover .sac-card::after, .sac .sac-item:focus-visible .sac-card::after { opacity: 1; animation: sac-foil 1.1s ease forwards; }
.sac .sac-item[data-owned="false"]:hover .sac-card::after { animation: none; opacity: 0; }
.sac-paging { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; color: var(--ink-2); font-size: .82rem; }
.sac-paging > span { font-family: var(--font-mono, monospace); }

/* ── History ─────────────────────────────────────────────────────────────── */
.sac-history { display: grid; gap: .65rem; }
.sac-history-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .5rem .85rem; align-items: center; padding: .8rem; border: 1px solid var(--line); border-radius: var(--sac-radius); background: var(--surface); }
.sac-history-art { width: 56px; height: 70px; border-radius: 10px; object-fit: cover; }
.sac-history-art[data-kind="earned"] { height: 56px; }
.sac-history-row strong { color: var(--ink); font-size: .95rem; }
.sac-history-row p { margin-top: .2rem !important; color: var(--ink-2); font-size: .78rem; line-height: 1.45; }
.sac-history-cards { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.sac-history-cards .sac-card { width: 44px; padding: 2px; border-radius: 10px; }
.sac-history-cards .sac-card-art { border-radius: 8px; }
.sac-history-cards .sac-card::after { display: none; }
.sac-history-cards .sac-btn { margin-left: auto; min-height: 44px; padding: .5rem .9rem; font-size: .82rem; }
#sac-history-more { margin-top: .85rem; }

/* ── Achievement wall (cards rendered by the dashboard controller) ───────── */
#sd-root .sac .sd-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: .65rem; }
#sd-root .sac .sd-badge-card { min-height: 150px; padding: 1rem .85rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; opacity: 1; filter: none; transition: transform .2s ease, border-color .2s ease; }
#sd-root .sac .sd-badge-card.is-earned { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%), var(--surface); box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 16%, transparent); }
#sd-root .sac .sd-badge-card.is-locked { border-style: dashed; border-color: var(--line-strong); opacity: 1; filter: none; }
#sd-root .sac .sd-badge-card.is-locked .sd-badge-emoji, #sd-root .sac .sd-badge-card.is-locked .sd-badge-status { filter: grayscale(1) brightness(.75); }
#sd-root .sac .sd-badge-name { color: var(--ink); font-family: var(--font-body, Outfit, sans-serif); font-size: .82rem; font-weight: 800; }
#sd-root .sac .sd-badge-desc { color: var(--ink-2); font-size: .72rem; line-height: 1.45; }
#sd-root .sac .sd-badge-card:hover { transform: translateY(-3px); }

/* ── Dialogs ─────────────────────────────────────────────────────────────── */
.sac-dialog {
  /* A global reset zeroes margins; restore the native modal centring. */
  margin: auto; width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto;
  border: 1px solid var(--line-strong); border-radius: 24px; color: var(--ink-2);
  background: radial-gradient(800px 420px at 20% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--paper);
  box-shadow: 0 30px 90px color-mix(in srgb, var(--void) 70%, transparent);
}
.sac-dialog::backdrop { background: color-mix(in srgb, var(--void) 82%, transparent); backdrop-filter: blur(6px); }
.sac-dialog-body { padding: clamp(1rem, 3.5vw, 2rem); }
.sac-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sac-dialog h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 850; letter-spacing: -.02em; line-height: 1.1; }
.sac-dialog p { color: var(--ink-2); line-height: 1.6; }
.sac-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .65rem; margin-top: 1.5rem; }
.sac-dialog .sac-sound { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-right: auto; color: var(--ink-2); font-size: .86rem; }
.sac-dialog .sac-sound input { width: 20px; height: 20px; accent-color: var(--accent); }
.sac-close { min-width: 46px; }

/* Pack review */
.sac-confirm { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: clamp(1rem, 3vw, 1.75rem); align-items: center; }
.sac-confirm img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 40px color-mix(in srgb, var(--void) 60%, transparent); }
.sac-balance { display: grid; gap: .5rem; margin-top: 1rem; }
.sac-balance div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .8rem; border-radius: 12px; background: var(--surface); }
.sac-balance span { color: var(--ink-2); font-size: .85rem; }
.sac-balance strong { color: var(--ink); font-family: var(--font-mono, monospace); font-size: 1rem; }
.sac-balance div:last-child { border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.sac-balance div:last-child strong { color: var(--gold); }

/* Card detail */
.sac-dossier { display: grid; gap: clamp(1rem, 3vw, 2rem); }
.sac-dossier-card { position: relative; width: min(100%, 420px); justify-self: center; }
.sac-dossier .sac-card { border-radius: 22px; padding: 5px; }
.sac-dossier .sac-card-art, .sac-dossier .sac-card::after { border-radius: 18px; }
.sac-dossier .sac-card::after { inset: 5px; }
.sac-dossier-info { display: grid; align-content: start; gap: .7rem; }
.sac-rarity-pill { display: inline-flex; align-items: center; gap: .4rem; justify-self: start; padding: .25rem .7rem .25rem .3rem; border-radius: 999px; border: 1px solid var(--rc); color: var(--rc); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sac-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.sac-facts div { padding: .6rem .75rem; border-radius: 12px; background: var(--surface); }
.sac-facts dt { color: var(--ink-2); font-size: .72rem; font-weight: 700; }
.sac-facts dd { margin: .15rem 0 0; color: var(--ink); font-family: var(--font-mono, monospace); font-size: .95rem; font-weight: 700; }
.sac-dossier-about { padding: .8rem .9rem; border-left: 3px solid var(--rc); border-radius: 0 12px 12px 0; background: var(--surface); }
.sac-dossier-about h3 { margin-bottom: .3rem !important; color: var(--ink); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sac-dossier .sac-odds { font-size: .82rem; }
.sac-dossier-nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.25rem; }

/* Pack reveal */
.sac-dialog--reveal { width: min(1120px, calc(100vw - 16px)); }
.sac-reveal-stage { position: relative; display: grid; justify-items: center; gap: 1.25rem; min-height: 280px; padding: .5rem 0 0; }
.sac-reveal-pack { position: relative; width: min(220px, 52vw); }
.sac-reveal-pack img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent), 0 24px 60px color-mix(in srgb, var(--void) 70%, transparent), 0 0 60px color-mix(in srgb, var(--accent) 35%, transparent); }
.sac-reveal-pack::after { content: ""; position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 55%, transparent), transparent); opacity: 0; pointer-events: none; }
.sac-reveal-stage[data-phase="opening"] .sac-reveal-pack { animation: sac-pack-shake .62s cubic-bezier(.36,.07,.19,.97) both; }
.sac-reveal-stage[data-phase="opening"] .sac-reveal-pack::after { animation: sac-burst .62s ease-out both; }
.sac-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem .7rem; width: 100%; margin: 0; padding: 0; list-style: none; }
.sac-result { position: relative; min-width: 0; perspective: 1000px; }
.sac-flip-card { position: relative; display: block; aspect-ratio: 1; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.sac-result[data-state="down"] .sac-flip-card { transform: rotateY(180deg); }
.sac-face, .sac-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* The back face owns its orientation; the button inside owns hover and focus
   motion. Keeping them on separate elements means a lift on the button can
   never replace the 180-degree turn and hide the face-down card. The button
   repeats backface-visibility so engines that composite it as its own layer
   still hide it once the card has turned face up. */
.sac-back { z-index: 3; transform: rotateY(180deg); }
.sac-flip {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 4px; border: 0; border-radius: 16px; cursor: pointer;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(145deg, var(--gold), color-mix(in srgb, var(--gold) 30%, var(--void)) 50%, var(--gold));
  box-shadow: 0 0 0 1px var(--line-strong), 0 0 26px color-mix(in srgb, var(--rc) 55%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sac-flip img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
.sac-flip span { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: .25rem .65rem; border-radius: 999px; background: var(--void); color: var(--ink); font-size: .72rem; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.sac-flip:hover, .sac-flip:focus-visible { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 0 2px var(--accent-bright), 0 0 36px color-mix(in srgb, var(--rc) 70%, transparent); }
.sac-result-info { display: grid; gap: .15rem; margin-top: .55rem; text-align: center; }
.sac-result[data-state="down"] .sac-result-info { visibility: hidden; }
.sac-result h3 { color: var(--ink); font-size: .9rem; font-weight: 800; line-height: 1.25; }
.sac-result p { color: var(--ink-2); font-size: .74rem; line-height: 1.35; }
.sac-result .sac-result-rarity { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; color: var(--rc); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sac-result .sac-result-rarity .sac-gem { width: 18px; height: 18px; }
.sac-result .sac-result-status { font-weight: 600; }
.sac-result[data-new="true"] .sac-result-status { color: var(--c-calc); font-weight: 800; }
.sac-result[data-state="up"][data-flash="true"]::before { content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 60%, transparent), transparent); animation: sac-burst 1s ease-out both; pointer-events: none; }
.sac-reveal-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.sac-reveal-summary span { padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: .8rem; font-weight: 700; }
.sac-reveal-summary b { color: var(--gold); }
.sac-reveal-hint { color: var(--ink-2); font-size: .88rem; text-align: center; }

@keyframes sac-foil { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes sac-pack-shake { 0%, 100% { transform: none; } 15% { transform: rotate(-4deg) scale(1.03); } 30% { transform: rotate(4deg) scale(1.05); } 45% { transform: rotate(-3deg) scale(1.07); } 60% { transform: rotate(2deg) scale(1.1); } 80% { transform: scale(1.18); } }
@keyframes sac-burst { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes sac-deal { from { opacity: 0; transform: translateY(40px) rotate(-6deg) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes sac-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@property --sac-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes sac-spin { to { --sac-spin: 360deg; } }
.sac-result[data-dealt="true"] { animation: sac-deal .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms); }
[data-rarity="divine"] .sac-card, .sac-card[data-rarity="divine"] { animation: sac-spin 6s linear infinite; }
[data-rarity="legendary"] .sac-card::after, [data-rarity="mythic"] .sac-card::after, [data-rarity="divine"] .sac-card::after { animation: sac-foil 3.6s ease-in-out infinite; }
.sac-dialog--reveal [data-state="down"] .sac-card::after { animation: none; }

/* ── Breakpoints ─────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .sac-collection { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sac-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 641px) {
  .sac-hud { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sac-hud > .sac-stat { grid-column: span 2; }
  .sac-hud > .sac-stat:nth-child(n+4) { grid-column: span 3; }
  .sac-games { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .sac-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sac-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #sd-root .sac .sd-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #sd-root .sac .sd-pack-card { grid-template-columns: 1fr; align-items: stretch; }
  .sac-pack-case { width: min(100%, 290px); justify-self: center; padding: 1.4rem 1.4rem .4rem; }
  .sac-pack-case::after { inset: 1.4rem 1.4rem .4rem; }
  .sac-pack-body { padding: .8rem 1.2rem 1.25rem; }
  .sac-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sac-collection { grid-template-columns: repeat(auto-fill, minmax(10.25rem, 1fr)); gap: 1.1rem .9rem; }
  .sac-album-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; padding: 1.25rem; }
  .sac-album-head img { order: 2; }
  .sac-dossier { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
  .sac-result-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sac-history-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .sac-history-cards { grid-column: auto; }
}
@media (min-width: 900px) {
  .sac-hero-stage { grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); min-height: 380px; }
  .sac-hero-art { order: 2; aspect-ratio: auto; min-height: 100%; }
  .sac-hero-art img { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, transparent, var(--void) 28%); mask-image: linear-gradient(90deg, transparent, var(--void) 28%); }
  .sac-hero-art::after { display: none; }
  .sac-hero-copy { margin: 0; padding: clamp(1.5rem, 3vw, 2.75rem); }
  .sac-hud { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sac-hud > .sac-stat, .sac-hud > .sac-stat:nth-child(n+4) { grid-column: auto; }
  .sac-game-tools { grid-template-columns: minmax(220px, 1fr) auto auto; }
  .sac-chips legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sac-paths { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .sac-games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sac-tools { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
  .sac-tools .sac-field--search { grid-column: auto; }
  .sac-hero { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); align-items: stretch; }
  .sac-hero-stage { grid-column: 1; grid-row: 1 / span 2; }
  .sac-hud { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .sac-hud > .sac-stat, .sac-hud > .sac-stat:nth-child(n+4) { grid-column: auto; }
  .sac-hud > .sac-stat.sac-stat--wallet { grid-column: 1 / -1; }
  .sac-drops { grid-column: 2; grid-row: 2; }
  .sac-drops-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sac-hero-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

/* Phones: worlds, learn paths and a fresh pack become swipeable rails. */
@media (max-width: 640px) {
  .sac-games, .sac-paths {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; gap: .75rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
    margin-inline: -2px; padding: 2px 2px 10px; scrollbar-width: thin;
  }
  .sac-game, .sac-path { scroll-snap-align: start; }
  .sac-paths { grid-auto-columns: 84%; }
  .sac-result-grid { grid-auto-flow: column; grid-auto-columns: 70%; grid-template-columns: none; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 15% 14px; margin-inline: calc(-1 * clamp(1rem, 3.5vw, 2rem)); width: calc(100% + 2 * clamp(1rem, 3.5vw, 2rem)); }
  .sac-result { scroll-snap-align: center; }
  .sac-confirm { grid-template-columns: 96px minmax(0, 1fr); }
  .sac-dialog-actions .sac-btn { flex: 1 1 auto; }
}

/* Motion is decorative: remove all of it on request. */
@media (prefers-reduced-motion: reduce) {
  .sac, .sac *, .sac *::before, .sac *::after, .sac-dialog, .sac-dialog *, .sac-dialog *::before, .sac-dialog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  #sd-root .sd-panel.sac { opacity: 1; transform: none; }
  .sac .sac-item:hover, .sac .sac-item:focus-visible, .sac-game:hover, .sac-game:focus-visible, .sac-path:hover, .sac-path:focus-visible, .sac-album:hover, .sac-album:focus-visible,
  .sac-btn--play:hover, .sac-drop a:hover, #sd-root .sac .sd-pack-card:hover .sac-pack-art, .sac-flip:hover, .sac-flip:focus-visible, #sd-root .sac .sd-badge-card:hover { transform: none; }
  .sac-game:hover .sac-game-art img, .sac-game:focus-visible .sac-game-art img { transform: none; }
}
@media (forced-colors: active) {
  .sac-card, .sac-flip { border: 2px solid CanvasText; }
  .sac-tabs a[aria-current="true"], .sac-chips input:checked + span { outline: 2px solid Highlight; }
  :is(.sac, .sac-dialog) .sac-btn:disabled { border-color: GrayText; color: GrayText; }
}