.collection-heading, .collection-filters, .collection-grid, .collection-pagination, .wish-feature, .wish-information {
  max-width: 1180px;
  margin-inline: auto;
}
.menu-intro { margin-bottom: 28px; }
.collection-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 17px; }
.collection-tabs { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 3px; border: 1px solid #cfb08730; border-radius: 9px; background: #181222; }
.collection-tabs::before {
  content: ""; position: absolute; inset: 3px auto 3px 3px; width: calc((100% - 10px) / 2); box-sizing: border-box;
  border: 1px solid #cfb08754; border-radius: 6px; pointer-events: none;
  background: linear-gradient(155deg, #d3b38026, #99748d17);
  box-shadow: inset 0 1px #fce1ae1c, inset 0 -2px #d8b5817a;
  transition: translate 240ms var(--ease-out);
}
.collection-tabs:has(#wish-tab[aria-selected=true])::before { translate: calc(100% + 4px) 0; }
.collection-tabs button { position: relative; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 6px; background: transparent; color: #b9a8c8; font-size: 13px; letter-spacing: .06em; white-space: nowrap; }
.collection-tabs button[aria-selected=true] { color: #f5dfbc; }
.wallet { display: flex; gap: 21px; color: #bfb0cc; font-size: 11px; }
.wallet b { color: #f1d8a9; font: 18px Georgia, serif; padding-left: 7px; font-variant-numeric: tabular-nums; }
.collection-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; padding: 20px 0 0; }
.collection-filters label { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #a795b9; }
.collection-filters label, .collection-filters select { min-width: 0; }
.collection-panel, .collection-filters { scroll-margin-top: calc(83px + var(--safe-top)); }
.collection-filters select { min-height: 44px; max-width: 135px; padding: 7px 28px 7px 10px; color: #d9c6e7; background: #21192e; border: 1px solid #cfb9df30; border-radius: 6px; font: 11px system-ui; }
.collection-count { margin-left: auto; color: #c2acd1; font-size: 11px; }
.series-lore { --series: #d8c49c; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 17px; max-width: 1180px; margin: 17px auto 0; padding: 16px 19px; border: 1px solid color-mix(in srgb, var(--series) 23%, transparent); border-left: 2px solid color-mix(in srgb, var(--series) 55%, transparent); border-radius: 9px; background: linear-gradient(110deg, color-mix(in srgb, var(--series) 7%, transparent), #1b14251f); }
.series-symbol { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--series) 35%, transparent); border-radius: 50%; color: var(--series); font: 24px Georgia, serif; }
.series-copy { min-width: 0; }
.series-copy .series-eyebrow { margin: 0 0 5px; font: 8px Georgia, serif; letter-spacing: .17em; color: #9f8cad; }
.series-copy h3 { margin: 0 0 6px; color: var(--series); font: 500 17px var(--serif); letter-spacing: .07em; }
.series-copy > p:last-child { margin: 0; max-width: 720px; color: #af9bbe; font-size: 11px; line-height: 1.8; }
.series-completion { min-width: 116px; color: #cdb9db; font-size: 10px; font-variant-numeric: tabular-nums; }
.series-progress-meter { overflow: hidden; height: 3px; margin-top: 10px; border-radius: 3px; background: #ceb8df15; }
.series-progress-meter i { display: block; height: 100%; background: var(--series); border-radius: inherit; }
.collection-help { max-width: 1180px; margin: 12px auto 20px; color: #8f7d9e; font-size: 10px; }
.collection-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; padding: 3px; }
.collectible {
  --rarity: #77acfa;
  --reflect-x: 50%;
  --reflect-y: 40%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative; display: block; min-width: 0; padding: 0; aspect-ratio: 3 / 4;
  border: 2px solid var(--rarity); border-radius: 10px; background: #1b1629;
  border-block-start-color: color-mix(in srgb, var(--rarity) 66%, #fff1da);
  border-block-end-color: color-mix(in srgb, var(--rarity) 65%, #201727);
  box-shadow: 0 9px 25px #05030c6b, 0 0 0 1px #eddabb1c;
  transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .18s ease-out, box-shadow .2s, opacity .2s;
  isolation: isolate; -webkit-user-drag: none; touch-action: pan-y;
}
.collectible.rarity-blue { --rarity: #78b5ff; }
.collectible.rarity-orange { --rarity: #edaa70; }
.collectible.rarity-purple { --rarity: #bb8df1; }
.collectible.rarity-silver { --rarity: #c9d6e2; }
.collectible.rarity-gold { --rarity: #eaca76; }
.collectible.rarity-rainbow { --rarity: #e9caff; border-color: #f5dbf7; box-shadow: 0 0 0 1px #a8ecff88, 0 0 23px #dd81ee2c, 0 9px 25px #05030c6b; }
.collectible.unowned { opacity: .73; }
.card-front { position: absolute; inset: 0; display: block; border-radius: inherit; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-front img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; -webkit-user-drag: none; pointer-events: none; }
.progressive-art { background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--rarity) 22%, #251831), #171020 78%); }
.progressive-art > img { position: absolute; inset: 0; }
.progressive-art .card-preview { filter: blur(2px); scale: 1.025; }
.progressive-art .card-art { opacity: 0; transition: opacity 220ms ease-out; }
.progressive-art.art-ready .card-art { opacity: 1; }
.progressive-art.art-preview-only .card-preview { filter: none; scale: 1; }
.collectible .card-front::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px #fff0d74d, inset 0 -2px #17101d70;
}
.collection-grid .card-front::after, .flip-card .card-front::after {
  --corner-light: color-mix(in srgb, var(--rarity) 70%, #fff5e6);
  background:
    linear-gradient(135deg, var(--corner-light), transparent 75%) top left,
    linear-gradient(225deg, var(--corner-light), transparent 75%) top right,
    linear-gradient(45deg, var(--corner-light), transparent 75%) bottom left,
    linear-gradient(315deg, var(--corner-light), transparent 75%) bottom right;
  background-size: 9px 9px; background-repeat: no-repeat;
}
.foil-layer, .foil-glitter { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; display: none; z-index: 2; }
.rarity-rainbow .foil-layer {
  display: block; opacity: .38; mix-blend-mode: color-dodge;
  background-image: conic-gradient(from 135deg at var(--reflect-x) var(--reflect-y), #ffe89f, #9aeeff, #bd83ff, #ff99c2, #c0ff9b, #ffe89f);
  mask-image: radial-gradient(ellipse at var(--reflect-x) var(--reflect-y), #000 3%, #0008 40%, #0001 83%);
}
.rarity-rainbow .foil-glitter {
  display: block; opacity: .45; mix-blend-mode: screen;
  background-image: radial-gradient(circle at var(--reflect-x) var(--reflect-y), #fff9 0, #fff3 18%, transparent 56%),
    repeating-linear-gradient(122deg, transparent 0 11px, #e9ffff27 12px 13px, transparent 14px 27px),
    radial-gradient(circle, #fff 0 0.65px, transparent 1.2px);
  background-size: 100% 100%, 170% 170%, 13px 17px;
  background-position: center, var(--reflect-x) var(--reflect-y), var(--reflect-x) var(--reflect-y);
}
.equipped-mark { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; height: 23px; width: 23px; border: 1px solid #f7e6c7a1; background: #181324ad; border-radius: 50%; color: #f3ddbd; font-size: 12px; z-index: 3; }
.empty-collection { grid-column: 1 / -1; text-align: center; padding: 50px 0; color: #ae9cba; font-size: 13px; }
.collection-pagination { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 23px; margin-bottom: 22px; color: #ac99bd; font-size: 11px; }
.collection-pagination button { width: 44px; height: 44px; border: 1px solid #bea2cd40; border-radius: 7px; background: #261d33; }
.collection-pagination button:disabled { opacity: .35; }
.departure { position: sticky; bottom: calc(-22px - var(--safe-bottom)); z-index: 5; max-width: 1200px; margin-top: 25px; padding: 16px 20px; border: 1px solid #e5cb9e40; border-radius: 12px; background: linear-gradient(145deg, #22182cfb, #171122fc); box-shadow: inset 0 1px #ebd5a711, 0 -10px 30px #0c08184d; }
.contract-deck { display: flex; gap: 12px; flex-shrink: 0; }
.contract-slot { display: grid; justify-items: center; gap: 6px; }
.contract-slot > span { color: #a38daf; font-size: 9px; }
.contract-slot .collectible { width: 54px; border-radius: 5px; }
.deck-summary { flex: 1; }
.deck-summary p { font-size: 10px; }
.menu-bottom { margin-bottom: 10px; }
.wish-feature { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 340px; gap: 35px; align-items: center; padding: 35px 45px; }
.wish-orb { position: relative; display: grid; place-items: center; width: min(270px, 100%); aspect-ratio: 1; margin: auto; border-radius: 50%; background: radial-gradient(circle, #c9a2ff63, #733eb833 38%, #3c1d6320 61%, transparent 72%); }
.wish-orb > span { font-size: 83px; color: #f4dcaf; text-shadow: 0 0 27px #ebc281, 0 0 60px #b28ce9; }
.wish-orb i { position: absolute; inset: 14%; border: 1px solid #e6bf8c75; border-radius: 50%; box-shadow: 0 0 18px #a578c91c; }
.wish-orb i:nth-child(2) { inset: 3%; transform: rotateX(65deg) rotateZ(25deg); border-color: #ca9ff8a3; }
.wish-orb i:nth-child(3) { inset: 3%; transform: rotateY(65deg) rotateZ(-25deg); }
.wish-copy h2 { font: 500 29px var(--serif); letter-spacing: .08em; color: #f1ddbc; margin: 0 0 15px; }
.wish-copy > p:not(.eyebrow) { color: #b6a2c4; font-size: 12px; line-height: 1.8; }
.wish-actions { display: flex; gap: 14px; margin-top: 26px; }
.wish-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 170px; min-height: 76px; border: 1px solid #c7a6e15c; border-radius: 8px; background: linear-gradient(125deg, #4c2e5c, #2b1d3d); color: #f7e5cf; }
.wish-button strong { font: 600 16px var(--serif); letter-spacing: .12em; }
.wish-button span { font-size: 10px; color: #cbb2db; }
.wish-button.featured { color: #392638; background: linear-gradient(125deg, #ecd6aa, #cfa774); border-color: #f5dfb1; }
.wish-button.featured span { color: #71523c; }
.wish-button:disabled { opacity: .38; }
.wish-copy .wish-hint { font-size: 10px; color: #a18aaf; margin-top: 17px; }
.wish-copy .wish-hint.wish-error { color: #ffd4bb; font-size: 12px; }
.wish-information { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; border-top: 1px solid var(--line); padding: 25px 20px 16px; }
.wish-information h3 { font: 600 16px var(--serif); color: #dfc79f; margin: 0 0 15px; }
.wish-information p { font-size: 10px; color: #9d89ad; line-height: 1.9; }
.pity-counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pity-counters > span { display: grid; justify-items: start; gap: 5px; padding-left: 12px; border-left: 1px solid #cfa6dd35; }
.pity-counters small { font-size: 9px; color: #ac96bb; }
.pity-counters b { font: 25px Georgia, serif; color: #ebd2aa; }
.rarity-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 20px; }
.rarity-rates span { display: flex; align-items: center; gap: 7px; color: #b7a5c5; font-size: 11px; }
.rarity-rates i { width: 7px; height: 7px; border-radius: 50%; background: var(--rarity); box-shadow: 0 0 8px color-mix(in srgb, var(--rarity) 35%, transparent); }
.rarity-rates b { margin-left: auto; font-weight: 400; color: #e4d2ee; }
.collection-modal { inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); color: #f0e3f6; border: 1px solid #dfc1e658; border-radius: 16px; background: radial-gradient(ellipse at top, #33213f, #171123 70%); box-shadow: inset 0 1px #f7d5dd23, 0 20px 48px #05030da6; padding: 30px; max-height: calc(100dvh - 36px - var(--safe-top) - var(--safe-bottom)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.collection-modal::backdrop { background: #070411de; }
.collection-modal .eyebrow { text-align: center; margin-bottom: 22px; font-size: 9px; }
.modal-close { position: absolute; top: 9px; right: 9px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #0b07134d; color: #bba6cc; font-size: 26px; z-index: 5; }
.card-detail { width: min(480px, calc(100vw - 24px - var(--safe-left) - var(--safe-right))); padding-top: 35px; }
.card-stage { display: flex; justify-content: center; perspective: 1200px; }
.flip-card { width: 100%; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 11px; perspective: 1200px; isolation: auto; }
.card-stage .flip-card { width: min(300px, 100%); }
.flip-inner { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.65,.2,1); }
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-inner > .card-front { border: 2px solid var(--rarity); box-shadow: 0 10px 35px #07030f73; }
.card-back { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 2px solid var(--rarity); border-radius: inherit; background: radial-gradient(ellipse at top, color-mix(in srgb, var(--rarity) 13%, transparent), transparent 60%), linear-gradient(145deg, #30213e, #171225); box-shadow: inset 0 0 0 1px #f5e1c838; color: #decce8; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow-y: auto; text-align: left; touch-action: pan-y; }
.card-back { scrollbar-width: thin; scrollbar-color: #9b7bac #261b32; }
.back-rarity { color: var(--rarity); font-size: 10px; letter-spacing: .14em; }
.back-series { display: flex; align-items: center; gap: 6px; color: var(--series, #c4afda); font-size: 9px; letter-spacing: .08em; }
.back-series i { font-style: normal; font-size: 12px; }
.back-name { font: 600 25px var(--serif); color: #f4e1c1; letter-spacing: .06em; }
.back-spell { font-size: 12px; color: var(--rarity); letter-spacing: .08em; }
.back-description { font-size: 11px; line-height: 1.8; color: #c4afd3; }
.back-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 5px; padding: 11px 0; border-top: 1px solid #ccb0d52b; border-bottom: 1px solid #ccb0d52b; }
.back-stats > span { display: grid; gap: 5px; }
.back-stats small { font-size: 9px; color: #a992bc; }
.back-stats b { font: 16px Georgia, serif; color: #e8cfa6; }
.back-story { font-size: 11px; line-height: 1.9; color: #b09ac0; }
.back-owned { margin-top: auto; font-size: 9px; color: #c0a5d0; }
.back-passive { display: grid; flex-shrink: 0; gap: 6px; padding: 10px 11px; border: 1px solid #dfb5ef42; border-radius: 7px; background: linear-gradient(125deg, #bd8fda13, #9ccce610); }
.back-passive-label { color: #dfbfe9; font-size: 9px; letter-spacing: .14em; }
.back-passive > strong { color: #f0d3b5; font: 600 15px var(--serif); letter-spacing: .06em; }
.flip-instruction { text-align: center; color: #a28caf; font-size: 10px; line-height: 1.8; margin: 16px 0 20px; }
.detail-actions { text-align: center; }
.detail-actions[aria-busy=true] { cursor: progress; }
.detail-feedback { color: #e3c6a3; font-size: 11px; text-align: center; line-height: 1.8; }
.detail-feedback:empty { display: none; }
.detail-actions p { font-size: 11px; color: #ccb6dc; margin: 0 0 12px; }
.detail-actions small { display: block; font-size: 9px; color: #9a83aa; margin-top: 12px; line-height: 1.8; }
.detail-actions .primary-button { width: 100%; min-width: 0; padding: 14px 8px; font-size: 12px; }
.equip-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.equip-options button { padding: 10px 4px; min-height: 44px; border: 1px solid #c7a5dc57; background: #382347; border-radius: 6px; color: #e1c9ef; font-size: 11px; }
.equip-options button:disabled { opacity: .35; }
.reveal-modal { width: min(1100px, calc(100vw - 28px - var(--safe-left) - var(--safe-right))); padding: 35px; text-align: center; }
.reveal-modal h2 { font: 500 30px var(--serif); letter-spacing: .12em; color: #f0d7af; margin: 4px 0 12px; }
.reveal-instruction { font-size: 11px; color: #ac95bb; margin-bottom: 25px; }
.reveal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 18px; }
.reveal-grid.single-reveal { max-width: 300px; grid-template-columns: 1fr; margin-inline: auto; }
.reveal-item { min-width: 0; perspective: 1200px; }
.reveal-grid .flip-card { min-width: 0; }
.reveal-grid:not(.single-reveal) .card-back { padding: 12px; gap: 8px; }
.reveal-grid:not(.single-reveal) .back-name { font-size: 19px; }
.reveal-grid:not(.single-reveal) .back-spell, .reveal-grid:not(.single-reveal) .back-description, .reveal-grid:not(.single-reveal) .back-story { font-size: 9px; }
.reveal-grid:not(.single-reveal) .back-stats b { font-size: 13px; }
.card-mystery { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse, #4c2e65 0%, #20142f 62%); border: 2px solid #bf9ad0; border-radius: inherit; box-shadow: inset 0 0 25px #0a06134a; transition: opacity 340ms ease-out, scale 360ms var(--ease-out); backface-visibility: hidden; }
.card-mystery::before, .card-mystery::after { content: ""; position: absolute; inset: 9px; border: 1px solid #ddb9de4a; border-radius: 6px; }
.card-mystery::after { inset: 17px; border-color: #bb91ca24; }
.card-mystery > span { color: #e8c49a; font-size: 48px; text-shadow: 0 0 22px #d3a0e257; }
.card-mystery i { position: absolute; width: 55%; aspect-ratio: 1; border: 1px solid #e2bbd75c; transform: rotate(45deg); }
.unrevealed .flip-inner { opacity: 0; }
.revealed .card-mystery { opacity: 0; pointer-events: none; }
.duplicate-note { font-size: 9px; color: #b49ac5; line-height: 1.8; margin: 10px 0 0; }
.reveal-actions { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 28px; }
.reveal-actions .primary-button { font-size: 12px; padding: 13px 22px; min-width: 180px; }
.combat-card-slot { width: 108px; display: grid; gap: 5px; min-width: 0; }
.combat-card-hint { display: flex; justify-content: space-between; align-items: center; color: #d5c0e5; font-size: 9px; }
.combat-card-hint kbd { font-size: 8px; }
.combat-card-slot .skill-card { width: 100%; height: 139px; padding: 0; border-radius: 9px; }
.combat-card-slot .skill-card::after { display: none; }
.skill-state { display: block; min-height: 12px; text-align: center; font: 9px system-ui; color: #d4b8e2; font-variant-numeric: tabular-nums; }
.result-card { display: inline-block; flex-shrink: 0; height: auto; }

.collection-tabs button, .collection-pagination button, .wish-button, .equip-options button, .modal-close, .collection-modal .text-button, .wish-copy .text-button {
  transition: translate 140ms var(--ease-out), color 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out;
}
.collection-tabs button:focus-visible, .collection-modal button:focus-visible { outline-offset: 2px; }
.collection-tabs button:active, .collection-pagination button:active:not(:disabled), .wish-button:active:not(:disabled),
.equip-options button:active:not(:disabled), .modal-close:active, .collectible:not(.flip-card):active { filter: brightness(1.09); }
@media (hover: hover) and (pointer: fine) {
  .collection-tabs button:hover, .collection-modal .text-button:hover, .wish-copy .text-button:hover { color: #f5dfbc; }
  .collection-pagination button:hover:not(:disabled), .equip-options button:hover:not(:disabled) { border-color: #e0bded9c; }
  .wish-button:hover:not(:disabled) { filter: brightness(1.1); }
  .modal-close:hover { background-color: #7356884d; color: #f5e5ff; }
  .collectible:not(.flip-card):hover { box-shadow: 0 0 0 1px var(--rarity), 0 0 20px color-mix(in srgb, var(--rarity) 24%, transparent); }
  .collectible.unowned:hover { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .collection-panel:not([hidden]) > :is(.collection-filters, .collection-help, .wish-feature, .wish-information) {
    animation: panel-arrive 235ms var(--ease-out);
  }
  .cards-enter > .collectible, .collection-modal[open] .reveal-item {
    animation: card-arrive 260ms var(--ease-out) var(--entry-delay, 0ms) backwards;
  }
  .collection-modal[open] { animation: panel-arrive 245ms var(--ease-out); }
  .collection-modal[open]::backdrop { animation: backdrop-arrive 200ms ease-out; }
  .revealed .card-mystery { scale: 1.04; }
}
@keyframes panel-arrive { from { opacity: 0; translate: 0 6px; } }
@keyframes card-arrive { from { opacity: 0; translate: 0 8px; } }
@keyframes backdrop-arrive { from { opacity: 0; } }

@media (max-width: 1100px) {
  .collection-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .departure { max-width: none; }
  .wish-feature { padding-inline: 15px; }
}
@media (max-width: 800px) {
  .collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .collection-heading { gap: 12px; }
  .wallet { gap: 13px; font-size: 10px; }
  .wallet b { font-size: 16px; }
  .departure { gap: 15px; padding: 12px; }
  .departure .primary-button { min-width: 180px; padding-inline: 12px; font-size: 12px; }
  .deck-summary { min-width: 0; }
  .selection-label { font-size: 10px; letter-spacing: 0; }
  .selection-label strong { margin-left: 7px; font-size: 13px; }
  .wish-copy h2 { font-size: 23px; }
  .wish-feature { gap: 20px; }
  .wish-button { width: 145px; }
  .wish-information { gap: 25px; padding-inline: 5px; }
  .reveal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .menu-intro h1 { font-size: 24px; }
  .menu-intro > p:last-child { max-width: 280px; margin-inline: auto; line-height: 1.8; }
  .collection-heading { flex-wrap: wrap; }
  .collection-tabs button { padding-inline: 15px; font-size: 12px; }
  .wallet { margin-left: auto; }
  .collection-filters { gap: 9px; padding-top: 16px; }
  .collection-panel, .collection-filters { scroll-margin-top: calc(68px + var(--safe-top)); }
  .collection-filters label { display: grid; gap: 5px; flex: 1; }
  .collection-filters select { width: 100%; max-width: none; font-size: 10px; padding-left: 8px; padding-right: 8px; }
  .collection-count { width: 100%; margin: 4px 0 0; text-align: right; font-size: 10px; }
  .series-lore { grid-template-columns: 30px minmax(0, 1fr); gap: 10px 12px; padding: 13px 12px; margin-top: 13px; }
  .series-symbol { width: 30px; height: 30px; font-size: 20px; align-self: start; margin-top: 5px; }
  .series-copy h3 { font-size: 14px; line-height: 1.6; margin-bottom: 5px; }
  .series-copy .series-eyebrow { font-size: 7px; letter-spacing: .1em; }
  .series-copy > p:last-child { font-size: 10px; }
  .series-completion { grid-column: 2; min-width: 0; max-width: 180px; font-size: 9px; }
  .series-progress-meter { margin-top: 7px; }
  .collection-help { font-size: 9px; margin-top: 8px; margin-bottom: 14px; }
  .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .collectible { border-radius: 7px; }
  .equipped-mark { width: 19px; height: 19px; right: 5px; bottom: 5px; font-size: 10px; }
  .departure { display: grid; grid-template-columns: 1fr auto; bottom: calc(-22px - var(--safe-bottom)); gap: 10px 12px; align-items: center; padding: 11px; }
  .contract-deck { gap: 9px; }
  .contract-slot .collectible { width: 44px; min-width: 44px; }
  .contract-slot > span { font-size: 8px; }
  .departure .primary-button { min-width: 0; width: auto; font-size: 11px; gap: 12px; padding: 12px 14px; }
  .departure .deck-summary { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 7px; }
  .deck-summary p { margin: 0; font-size: 8px; text-align: right; }
  .selection-label { white-space: nowrap; font-size: 9px; }
  .selection-label strong { font-size: 11px; }
  .wish-feature { display: flex; flex-direction: column; padding: 24px 4px; gap: 12px; text-align: center; }
  .wish-orb { width: 160px; }
  .wish-orb > span { font-size: 53px; }
  .wish-copy .eyebrow { font-size: 8px; }
  .wish-copy h2 { font-size: 23px; }
  .wish-copy > p:not(.eyebrow) { font-size: 10px; }
  .wish-actions { justify-content: center; margin-top: 22px; }
  .wish-copy { width: 100%; }
  .wish-button { width: 137px; min-width: 0; min-height: 72px; }
  .wish-information { grid-template-columns: 1fr; gap: 24px; padding: 23px 4px 12px; }
  .wish-information h3 { font-size: 15px; }
  .rarity-rates { gap: 13px 20px; }
  .collection-modal { padding: 25px 18px; max-height: calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom)); }
  .card-detail { padding-top: 38px; }
  .card-stage .flip-card { width: min(285px, 100%); }
  .collection-modal .eyebrow { font-size: 8px; letter-spacing: .15em; }
  .card-back { padding: 15px; gap: 8px; }
  .back-name { font-size: 23px; }
  .back-description, .back-story { font-size: 10px; }
  .back-stats { padding-block: 8px; }
  .back-owned { font-size: 8px; }
  .equip-options { gap: 6px; }
  .equip-options button { font-size: 10px; }
  .reveal-modal h2 { font-size: 25px; }
  .reveal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .reveal-grid.single-reveal { max-width: 270px; }
  .reveal-grid:not(.single-reveal) .back-name { font-size: 16px; }
  .reveal-grid:not(.single-reveal) .card-back { gap: 6px; padding: 10px; }
  .reveal-actions { flex-direction: column; gap: 8px; }
  .combat-card-slot { flex: 1; width: 0; gap: 4px; }
  .combat-card-slot .skill-card { height: 97px; width: 100%; min-width: 44px; }
  .combat-card-hint { font-size: 8px; }
  .combat-card-hint kbd { font-size: 7px; min-width: 0; margin: 0; padding-inline: 2px; }
  .skill-state { font-size: 8px; }
}
@media (max-width: 380px) {
  .collection-filters label { flex-basis: calc(50% - 9px); }
  .collection-tabs button { padding-inline: 12px; font-size: 11px; }
  .wallet { width: 100%; justify-content: flex-end; }
  .collection-grid { gap: 10px; }
  .collectible { border-width: 1.5px; }
  .departure { padding: 10px; gap: 8px; }
  .contract-deck { gap: 6px; }
  .contract-slot .collectible { width: 44px; min-width: 44px; }
  .departure .primary-button { padding-inline: 9px; font-size: 10px; gap: 7px; }
  .departure .deck-summary { display: block; }
  .deck-summary p { margin-top: 5px; text-align: left; }
  .card-back { padding: 12px; gap: 7px; }
  .back-name { font-size: 21px; }
  .back-story { font-size: 9px; }
  .wish-button { width: 125px; }
  .combat-card-hint span { font-size: 7px; }
  .combat-card-slot .skill-card { height: 86px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .collection-panel, .collection-filters { scroll-margin-top: calc(62px + var(--safe-top)); }
  .collection-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .menu-intro { margin-bottom: 22px; }
  .menu-intro h1 { font-size: 24px; }
  .collection-heading { flex-wrap: nowrap; }
  .wallet { width: auto; }
  .departure { display: flex; padding: 10px 14px; }
  .contract-slot .collectible { width: 44px; min-width: 44px; }
  .contract-deck { gap: 9px; }
  .contract-slot > span { font-size: 8px; }
  .departure .primary-button { min-width: 160px; }
  .departure .deck-summary { display: block; }
  .deck-summary p { text-align: left; }
  .wish-feature { display: grid; grid-template-columns: .6fr 1fr; text-align: left; padding-block: 25px; gap: 20px; }
  .wish-orb { width: 175px; }
  .wish-actions { justify-content: flex-start; }
  .wish-information { grid-template-columns: 1fr 1fr; }
  .reveal-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .combat-card-slot { flex: none; width: 66px; }
  .combat-card-slot .skill-card { height: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  .collectible { transform: none !important; }
  .rarity-rainbow .foil-layer { mask-image: linear-gradient(125deg, #0001, #000a, #0001); }
  .foil-layer, .foil-glitter { background-position: center !important; }
  .flip-inner { transition: none; }
  .progressive-art .card-art { transition: none; }
}

/* A saved summon is presented here; every animation can be skipped. */
.reveal-modal { --summon-color: #c6a2ec; }
.collection-modal { scrollbar-width: thin; scrollbar-color: #80658f #1d142a; }
.collection-modal::-webkit-scrollbar { width: 6px; }
.collection-modal::-webkit-scrollbar-track { background: #1d142a; }
.collection-modal::-webkit-scrollbar-thumb { background: #80658f; border-radius: 6px; }
.reveal-modal.summon-playing { width: min(740px, calc(100vw - 24px - var(--safe-left) - var(--safe-right))); padding: 20px 32px 25px; }
.summon-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-right: 35px; text-align: left; }
.summon-mode { color: #b6a0c8; font-size: 10px; line-height: 1.7; }
.summon-topline .text-button { min-height: 44px; padding: 6px 3px; font-size: 11px; line-height: 1.6; color: #dcc9ed; }
.summon-topline .text-button span { display: inline-block; margin-left: 4px; color: #e5c496; }
.summon-status { min-height: 16px; margin: 1px 0 10px; color: #ba9fce; font-size: 10px; line-height: 1.6; text-align: center; font-variant-numeric: tabular-nums; }
.summon-cinematic { padding: 18px 0 12px; }
.summon-cinematic .eyebrow { color: #d8b9ed; font-size: 9px; letter-spacing: .23em; margin-bottom: 4px; }
.summon-cinematic h2 { font-size: clamp(21px, 4vw, 29px); margin: 12px 0 9px; }
.summon-saved { color: #a28bac; font-size: 10px; line-height: 1.8; margin: 0; }
.summon-altar { position: relative; width: min(355px, 100%); aspect-ratio: 1; margin-inline: auto; isolation: isolate; overflow: clip; }
.summon-altar::before { content: ""; position: absolute; inset: 2%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--summon-color) 23%, transparent), transparent 68%); transition: background-color 500ms; }
.summon-seal { position: absolute; inset: 7%; width: 86%; height: 86%; stroke: var(--summon-color); stroke-width: .8; opacity: .3; transform: rotate(-30deg) scale(.8); transition: opacity 600ms ease-out, transform 900ms cubic-bezier(.2,.7,.2,1), stroke 450ms; }
.seal-outer { stroke-width: 1.4; }
.seal-ticks { stroke-width: 6; stroke-dasharray: 1 12; }
.seal-triangle { stroke-width: .7; opacity: .75; }
.seal-inner { stroke-dasharray: 2 5; }
.seal-diamond { opacity: .35; }
.seal-compass { stroke-width: 3; }
.summon-horizon { position: absolute; left: 10%; right: 10%; bottom: 15%; height: 24%; border: 1px solid color-mix(in srgb, var(--summon-color) 38%, transparent); border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--summon-color) 15%, transparent), transparent 70%); transform: rotate(-9deg); }
.summon-core { position: absolute; inset: 35%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #fff7df 0 2%, color-mix(in srgb, var(--summon-color) 65%, transparent) 5%, transparent 66%); }
.summon-core i { position: absolute; inset: 18%; border: 1px solid #f6dca680; rotate: 45deg; box-shadow: 0 0 24px color-mix(in srgb, var(--summon-color) 25%, transparent); }
.summon-core span { color: #fff0cf; font: 68px Georgia, serif; text-shadow: 0 0 18px var(--summon-color); }
.summon-seal-wave { position: absolute; inset: 18%; border: 1px solid var(--summon-color); border-radius: 50%; opacity: 0; }
.summon-gather-motes, .summon-reveal-sparks { position: absolute; inset: 0; pointer-events: none; }
.summon-gather-motes i, .summon-reveal-sparks i { position: absolute; top: 50%; left: 50%; rotate: var(--spark-angle); }
.summon-gather-motes b, .summon-reveal-sparks b { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--summon-color); box-shadow: 0 0 8px var(--summon-color); opacity: 0; }
.reveal-modal[data-phase=seal] .summon-seal, .reveal-modal[data-phase=opening] .summon-seal { transform: rotate(0deg) scale(1); opacity: .95; }
.reveal-modal[data-phase=opening] .summon-core { opacity: 0; scale: 1.5; transition: opacity 450ms, scale 450ms; }
.summon-focus { --summon-card-width: clamp(150px, calc((100dvh - 355px) * .75), 270px); display: flex; flex-direction: column; align-items: center; padding-top: 3px; }
.summon-focus.is-multi { --summon-card-width: clamp(150px, calc((100dvh - 405px) * .75), 270px); }
.summon-tier { color: var(--summon-color); font-size: 11px; line-height: 1.8; letter-spacing: .16em; margin: 0 0 5px; }
.summon-focus-stage { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; padding: 12px 0 15px; overflow: clip; }
.summon-card-slot { position: relative; width: var(--summon-card-width); z-index: 2; }
.summon-card-slot .flip-card { width: 100%; }
.summon-card-slot .card-front { box-shadow: 0 15px 32px #0804128c, 0 0 28px color-mix(in srgb, var(--summon-color) 20%, transparent); }
.summon-radiance { position: absolute; width: calc(var(--summon-card-width) * 1.65); aspect-ratio: 1; border-radius: 50%; opacity: .36; background: repeating-conic-gradient(from 0deg, transparent 0deg 24deg, var(--summon-color) 27deg, transparent 30deg); mask-image: radial-gradient(circle, transparent 27%, #000 44%, transparent 70%); pointer-events: none; }
.summon-reveal-ring { position: absolute; width: calc(var(--summon-card-width) * 1.17); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--summon-color) 40%, transparent); border-radius: 50%; opacity: .65; pointer-events: none; }
.summon-reveal-ring::after { content: ""; position: absolute; inset: 7%; border: 1px dashed color-mix(in srgb, var(--summon-color) 36%, transparent); border-radius: 50%; }
.reveal-modal[data-rarity=blue] .summon-radiance { opacity: .22; }
.reveal-modal[data-rarity=orange] .summon-reveal-sparks b { width: 3px; height: 8px; border-radius: 50%; }
.reveal-modal[data-rarity=purple] .summon-reveal-ring { border-style: dashed; rotate: 24deg; }
.reveal-modal[data-rarity=silver] .summon-radiance { opacity: .48; background: repeating-conic-gradient(transparent 0deg 26deg, #e7f5ff 29deg, transparent 30deg); }
.reveal-modal[data-rarity=gold] .summon-radiance { opacity: .54; background: repeating-conic-gradient(transparent 0deg 12deg, #ffe3a1 14deg, transparent 15deg); }
.reveal-modal[data-rarity=gold] .summon-reveal-ring { border-width: 2px; box-shadow: 0 0 22px #edc97124; }
.reveal-modal[data-rarity=rainbow] .summon-radiance { opacity: .72; background: conic-gradient(#ffb5d8, #ffe7a0, #b8ffdf, #a6deff, #bdb0ff, #ffb5d8); mask-image: radial-gradient(circle, transparent 24%, #000 41%, transparent 70%); }
.reveal-modal[data-rarity=rainbow] .summon-reveal-ring { border-color: #f2d0ff; box-shadow: 0 0 0 5px #9adfff15, 0 0 0 12px #f2b7e713; }
.reveal-modal[data-rarity=rainbow] .summon-reveal-sparks i:nth-child(3n) b { background: #9be7ff; box-shadow: 0 0 8px #9be7ff; }
.reveal-modal[data-rarity=rainbow] .summon-reveal-sparks i:nth-child(3n + 1) b { background: #ffe0a0; box-shadow: 0 0 8px #ffe0a0; }
.summon-caption { position: relative; z-index: 3; text-align: center; }
.summon-caption h2 { font-size: 26px; line-height: 1.3; margin: 0 0 6px; letter-spacing: .08em; }
.summon-caption p { font-size: 11px; line-height: 1.7; margin: 0 0 3px; color: var(--summon-color); }
.summon-caption > span { color: #a58fb6; font-size: 9px; }
.summon-progress { display: flex; justify-content: center; flex-wrap: wrap; width: min(440px, 100%); margin: 9px 0 5px; }
.summon-gem { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 0; background: transparent; border-radius: 6px; }
.summon-gem i { width: 8px; height: 8px; rotate: 45deg; border: 1px solid var(--gem-color); background: transparent; transition: background-color 220ms, box-shadow 220ms, scale 220ms; }
.summon-gem.is-known i { background: var(--gem-color); box-shadow: 0 0 9px color-mix(in srgb, var(--gem-color) 50%, transparent); }
.summon-gem[aria-current=step] i { scale: 1.45; outline: 1px solid color-mix(in srgb, var(--gem-color) 52%, transparent); outline-offset: 4px; }
.summon-gem:disabled { opacity: .5; }
.summon-next { min-width: 240px; min-height: 46px; padding: 13px 22px; margin-top: 9px; font-size: 12px; }
.summon-next[aria-disabled=true] { cursor: default; }
.summon-playing .modal-close { color: #e3d0ed; }
.reveal-modal[data-phase=summary] .summon-topline { min-height: 24px; }
.reveal-modal[data-phase=summary] .summon-status { margin-bottom: 20px; }
.reveal-modal[data-phase=summary] .reveal-actions { position: sticky; bottom: -20px; z-index: 4; padding: 15px 0 5px; background: linear-gradient(transparent, #191124 24%); }

@media (prefers-reduced-motion: no-preference) {
  .reveal-modal[data-phase=gather] .summon-gather-motes b, .reveal-modal[data-phase=seal] .summon-gather-motes b { animation: summon-gather 1200ms cubic-bezier(.25,.25,.1,1) var(--spark-delay) both; }
  .reveal-modal[data-phase=gather] .summon-core { animation: summon-core-awake 1400ms cubic-bezier(.2,.8,.2,1) both; }
  .reveal-modal[data-phase=opening] .summon-seal-wave { animation: summon-seal-open 650ms ease-out both; }
  .summon-arrival .summon-card-slot { animation: summon-card-arrive 650ms cubic-bezier(.17,.75,.22,1) both; }
  .summon-arrival .summon-radiance { animation: summon-ray-arrive 1400ms ease-out both; }
  .summon-arrival .summon-reveal-ring { animation: summon-ring-arrive 1100ms cubic-bezier(.16,.65,.23,1) both; }
  .summon-arrival .summon-reveal-sparks b { animation: summon-spark-arrive 1050ms ease-out var(--spark-delay) both; }
  .summon-arrival .summon-caption { animation: panel-arrive 400ms ease-out 160ms backwards; }
  .reveal-modal[data-rarity=rainbow] .summon-arrival .summon-radiance { animation-duration: 1900ms; }
}
@keyframes summon-gather { 0% { opacity: 0; translate: 0 calc(var(--spark-distance) * -1); scale: .5; } 15% { opacity: .9; } 84% { opacity: .85; } 100% { opacity: 0; translate: 0 0; scale: .15; } }
@keyframes summon-core-awake { from { opacity: .25; scale: .45; rotate: -25deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes summon-seal-open { from { opacity: .9; scale: .7; } to { opacity: 0; scale: 2.2; } }
@keyframes summon-card-arrive { from { opacity: 0; translate: 0 25px; scale: .88; rotate: -3deg; } to { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; } }
@keyframes summon-ray-arrive { from { opacity: 0; scale: .7; rotate: -18deg; } 35% { opacity: .65; } to { scale: 1; rotate: 0deg; } }
@keyframes summon-ring-arrive { from { opacity: 0; scale: .7; rotate: -28deg; } 35% { opacity: .9; } to { opacity: .65; scale: 1; rotate: 0deg; } }
@keyframes summon-spark-arrive { from { opacity: 0; translate: 0 -25px; scale: 1.4; } 15% { opacity: .9; } to { opacity: 0; translate: 0 calc(var(--spark-distance) * -1); scale: .4; } }

@media (max-width: 700px) {
  .reveal-modal.summon-playing { padding: 13px 18px 20px; }
  .summon-topline { gap: 8px; padding-right: 32px; }
  .summon-mode { font-size: 9px; }
  .summon-topline .text-button { max-width: 135px; font-size: 10px; }
  .summon-status { font-size: 9px; margin-bottom: 7px; }
  .summon-cinematic { padding-top: 18px; }
  .summon-altar { width: min(310px, calc(100dvh - 260px), 100%); }
  .summon-cinematic h2 { font-size: clamp(18px, 5vw, 22px); line-height: 1.5; }
  .summon-tier { font-size: 9px; letter-spacing: .12em; }
  .summon-caption h2 { font-size: 22px; }
  .summon-caption p { font-size: 10px; }
  .summon-progress { max-width: 220px; margin-top: 6px; }
  .summon-next { width: min(270px, 100%); min-width: 0; font-size: 11px; margin-top: 7px; }
  .summon-card-slot .card-back { padding: 12px; gap: 7px; }
  .summon-card-slot .back-name { font-size: 21px; }
  .summon-card-slot .back-description, .summon-card-slot .back-story { font-size: 10px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .reveal-modal.summon-playing { padding: 8px 20px 14px; }
  .summon-status { margin: 0 0 4px; }
  .summon-cinematic { display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 15px; padding: 0; }
  .summon-cinematic .eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 12px; }
  .summon-altar { grid-column: 1; grid-row: 1 / span 3; width: min(245px, calc(100dvh - 110px)); }
  .summon-cinematic h2 { grid-column: 2; grid-row: 2; font-size: 22px; line-height: 1.6; margin: 0; }
  .summon-saved { grid-column: 2; grid-row: 3; align-self: start; font-size: 9px; }
  .summon-focus, .summon-focus.is-multi { --summon-card-width: clamp(130px, calc((100dvh - 138px) * .75), 205px); display: grid; grid-template-columns: minmax(150px, .9fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 24px; align-items: center; padding: 0 14px; }
  .summon-focus-stage { grid-column: 1; grid-row: 1 / span 4; padding: 6px 0; }
  .summon-tier { grid-column: 2; grid-row: 1; align-self: end; font-size: 9px; margin: 0; }
  .summon-caption { grid-column: 2; grid-row: 2; }
  .summon-caption h2 { font-size: 23px; }
  .summon-caption p { font-size: 10px; }
  .summon-progress { grid-column: 2; grid-row: 3; width: 220px; max-width: 100%; margin: 0 auto; }
  .summon-gem { height: 44px; }
  .summon-next { grid-column: 2; grid-row: 4; align-self: start; min-width: 0; width: 100%; margin: 0; min-height: 44px; padding: 10px 7px; font-size: 11px; }
}
@media (orientation: portrait) and (max-height: 650px) {
  .reveal-modal.summon-playing { padding-top: 9px; padding-bottom: 14px; }
  .summon-focus.is-multi { --summon-card-width: clamp(126px, calc((100dvh - 390px) * .75), 180px); }
  .summon-focus-stage { padding-block: 8px 10px; }
  .summon-progress { margin-block: 3px; }
  .summon-status { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .summon-seal, .summon-core, .summon-gem i { transition: none !important; }
  .summon-radiance { opacity: .3; }
}

/* Sanctuary instruments: a world-first title screen and a separate archive.
   Metal edges and ink grounds replace the former stack of website panels. */
:root { --gold:#d9c394; --muted:#a9b2bf; --line:#c6ad7140; --panel:#111a25f5; }
.touch-guide { display:none; color:#b9c6d4; line-height:1.9; font-size:13px; }
@media(pointer:coarse), (max-width:700px) { .touch-guide { display:block; } .pause-panel .controls-list { display:none; } }
body[data-phase=menu] .world-shade { backdrop-filter:none; background:linear-gradient(90deg,#070f1be8, #09132099 26%,#08132312 53%,#09131cb5 81%,#070e19eb),linear-gradient(0deg,#070d18f2,transparent 34%,transparent 72%,#07101ac9); }
.utility { border-radius:2px; border-color:#d2b87938; background:#0d1722b8; backdrop-filter:none; min-height:40px; box-shadow:inset 0 1px #e5d0a20b; }
.utility:hover { background:#24303b; border-color:#d6bf8985; }
.brand-seal { text-shadow:none; }
.brand-name { color:#aab1bd; }
.menu-screen { display:grid; grid-template-columns:minmax(240px,.9fr) minmax(60px,1fr) minmax(260px,.78fr); grid-template-rows:minmax(0,1fr) auto auto; column-gap:35px; row-gap:14px; padding:calc(105px + var(--safe-top)) calc(48px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(48px + var(--safe-left)); }
.menu-home { grid-column:1; grid-row:1; display:flex; flex-direction:column; justify-content:center; gap:34px; min-width:0; padding-bottom:12px; }
.menu-intro { text-align:left; margin:0; }
.title-crest { width:105px; height:56px; color:#c8b27d; stroke:currentColor; stroke-width:.8; margin-left:-7px; margin-bottom:13px; }
.menu-intro .eyebrow { color:#cfbc91; font:11px Georgia,serif; letter-spacing:.45em; margin:0 0 13px; }
.menu-intro h1 { color:#f0e5cc; font:500 clamp(44px,4.9vw,74px)/1.15 var(--serif); letter-spacing:.09em; margin:0 0 13px; white-space:nowrap; text-shadow:0 3px 20px #03070f80; }
.menu-intro .title-subline { margin:0 0 25px; font:16px var(--serif); letter-spacing:.32em; color:#cfbf99; }
.menu-intro > p:last-child { color:#b1bac5; font-size:12px; line-height:2; letter-spacing:.13em; }
.sanctuary-actions { display:grid; gap:0; max-width:290px; }
.sanctuary-actions button { display:flex; align-items:center; gap:15px; min-height:65px; padding:11px 2px; text-align:left; border:0; border-bottom:1px solid #a28c554a; background:linear-gradient(90deg,#ac936410,transparent); }
.sanctuary-actions button:first-child { border-top:1px solid #a28c554a; }
.sanctuary-glyph { display:grid; place-items:center; width:35px; color:#d8c28e; font:31px Georgia,serif; }
.sanctuary-actions b { display:block; color:#e1d6bf; font:500 17px var(--serif); letter-spacing:.1em; }
.sanctuary-actions small { display:block; margin-top:6px; color:#8f9ba9; font-size:9px; letter-spacing:.15em; }
.sanctuary-actions i { margin-left:auto; margin-right:10px; color:#aa9363; font-style:normal; font-size:25px; }
.sanctuary-actions button:hover { background:linear-gradient(90deg,#d3b87d23,transparent); }
.menu-screen > .stage-selection { grid-column:3; grid-row:1; align-self:center; width:100%; min-width:0; margin:0 0 15px; padding:0; }
.stage-heading { padding:0 1px 13px; margin-bottom:8px; border-bottom:1px solid #c6ad714a; }
.stage-heading .eyebrow { color:#d4bf92; font:500 16px var(--serif); letter-spacing:.22em; }
.stage-heading > span:last-child { color:#8895a5; font-size:9px; }
.stage-options { display:grid; grid-template-columns:minmax(0,1fr); gap:0; min-width:0; max-height:min(43dvh,352px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#9b87565e transparent; padding-inline:5px; margin-inline:0; }
.stage-card { min-width:0; min-height:73px; gap:14px; padding:11px 5px; border:0; border-bottom:1px solid #9ca9b021; border-radius:0; background:transparent; overflow:visible; }
.stage-card::before { inset:3px 0; opacity:0; background:linear-gradient(90deg,color-mix(in srgb,var(--stage) 12%,transparent),transparent); border-left:2px solid var(--stage); }
.stage-card:focus-visible { outline-offset:-2px; }
.stage-card[aria-pressed=true] { border-color:#ac97614a; box-shadow:none; }
.stage-card[aria-pressed=true]::before { opacity:1; }
.stage-symbol { width:42px; height:42px; flex-basis:42px; border-radius:0; border:0; font-size:29px; text-shadow:none; background:radial-gradient(ellipse,color-mix(in srgb,var(--stage) 13%,transparent),transparent 70%); }
.stage-copy b { color:#ddd7c9; font:500 17px var(--serif); letter-spacing:.12em; }
.stage-copy small { color:#8c9bab; font-size:9px; }
.stage-check { color:#dcc48a; padding-right:3px; }
.stage-description { color:#9aa9b9; margin:14px 0 0; font-size:10px; line-height:1.9; min-height:3.8em; height:auto; max-height:none; overflow:visible; overflow-wrap:anywhere; }
.menu-screen > .departure { grid-column:1/-1; grid-row:2; position:relative; bottom:auto; width:100%; max-width:none; margin:0; padding:17px 0 13px; border:0; border-top:1px solid #c6ad7166; border-bottom:1px solid #c6ad7126; border-radius:0; background:linear-gradient(90deg,#09131bab,#111a21a3,#09131b94); box-shadow:none; gap:25px; }
.menu-screen > .departure::before { content:""; position:absolute; top:-3px; left:0; width:5px; height:5px; background:#c6ad71; rotate:45deg; }
.menu-screen > .departure::after { content:""; position:absolute; top:-3px; right:0; width:5px; height:5px; background:#c6ad71; rotate:45deg; }
.contract-slot .collectible { width:52px; border-radius:3px; }
.contract-slot > span { color:#9aa4ad; }
.selection-label { color:#d7d0bd; font-size:11px; }
.deck-summary p { color:#929fae; }
.primary-button { position:relative; border-radius:2px; border:1px solid #cdb582; background:linear-gradient(180deg,#e6d2a3,#c5a76b); color:#292316; box-shadow:inset 0 0 0 3px #705a3330,inset 0 1px #fff3d3; font:600 14px var(--serif); letter-spacing:.09em; min-height:48px; }
.primary-button:hover:not(:disabled) { box-shadow:inset 0 0 0 3px #705a3330,0 0 18px #c1a56d27; }
.menu-screen > .menu-bottom { grid-column:1/-1; grid-row:3; width:100%; max-width:none; margin:0; color:#788696; font-size:9px; letter-spacing:.1em; }
.player-status { border:0; border-left:2px solid #c7ad755c; border-radius:0; background:linear-gradient(90deg,#09121de8,#09121d87 80%,transparent); backdrop-filter:none; padding:12px 15px; }
.player-heading { color:#e2d6bd; font-family:var(--serif); letter-spacing:.08em; margin-bottom:10px; }
.vital { color:#a7afbc; }
.meter { border-radius:0; background:#070d16ce; box-shadow:0 0 0 1px #b5a88322; }
.meter i { border-radius:0; }
.meter.health i { background:linear-gradient(90deg,#9a5364,#e3a09f); }
.meter.mana i { background:linear-gradient(90deg,#456b93,#9dc4df); }
.run-status { background:linear-gradient(270deg,#09121dc7,transparent); border:0; border-radius:0; backdrop-filter:none; }
.wave-status { text-shadow:0 2px 9px #030912; }
.wave-status h2 { color:#e3d6b9; font-family:var(--serif); }
.boss-status .meter { height:5px; border:1px solid #dbbd7863; padding:1px; background:#09111de3; }
.boss-status .meter i { background:linear-gradient(90deg,#8e5e72,#d3999d); }
.boss-status > div:first-child { color:#dfd1b2; font-family:var(--serif); letter-spacing:.08em; }
.combat-dock::before { content:""; position:absolute; z-index:-1; inset:35% -22px -12px; background:radial-gradient(ellipse at 50% 100%,#070e1cdd,transparent 72%); pointer-events:none; }
.action-skill { border-radius:2px; border:1px solid #c7ad754f; background:linear-gradient(180deg,#172331e8,#0a1420ef); backdrop-filter:none; }
.action-symbol { text-shadow:none; }
.combat-card-slot .skill-card { border-radius:4px; border-width:1px; box-shadow:0 5px 14px #0009,0 0 0 2px #111923; }
.combat-card-slot:first-child { rotate:-3deg; translate:0 4px; }
.combat-card-slot:last-child { rotate:3deg; translate:0 4px; }
.skill-state { color:#d1c4a9; }
.combat-card-hint { color:#c0c8d1; }
.notice, .passive-toast { border-radius:2px; background:#101c2cf2; border-color:#bca16c73; color:#e7d6af; }
.overlay-screen { background:#060d18b8; backdrop-filter:blur(3px); }
.reward-panel, .pause-panel, .result-panel, .collection-modal { border:1px solid #bfa16b72; border-radius:3px; background:linear-gradient(135deg,#1c2937,#111b29 60%,#18212e); box-shadow:inset 0 0 0 5px #03091480,0 28px 90px #0008; }
.reward-card { border-radius:1px; border-color:#b69c6557; background:linear-gradient(180deg,#26323e,#141f2d); }
.reward-card b { color:#dfd1b1; }
.reward-card p, .panel-description { color:#aab7c7; }
.archive-screen { position:fixed; inset:0; width:min(1220px,calc(100vw - 64px - var(--safe-left) - var(--safe-right))); max-width:none; height:calc(100dvh - 70px - var(--safe-top) - var(--safe-bottom)); max-height:none; margin:auto; padding:28px 35px 0; overflow:auto; overscroll-behavior:contain; color:#e4dfd4; border:1px solid #bfa16b80; border-radius:3px; background:linear-gradient(120deg,#172330f9,#101a27fc 55%,#192332fa); box-shadow:inset 0 0 0 5px #050b12a1,0 25px 100px #000a; scrollbar-width:thin; scrollbar-color:#8c7b5a #111b27; }
.archive-screen:not([open]) { display:none; }
.archive-screen::backdrop { background:#050c17c7; backdrop-filter:blur(4px); }
.archive-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:24px; }
.archive-heading .eyebrow { font-size:8px; letter-spacing:.28em; color:#a38f65; margin-bottom:8px; }
.archive-heading h2 { color:#e6d6b2; font:500 29px var(--serif); letter-spacing:.18em; margin:0; }
.archive-close { display:flex; align-items:center; gap:8px; min-width:44px; min-height:44px; padding:2px 10px; border:1px solid #af99633d; border-radius:1px; background:#07111b66; color:#d1bf98; }
.archive-close > span { font:28px Georgia,serif; }
.archive-close small { font-size:10px; }
.archive-footer { position:sticky; bottom:0; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px; margin:25px -29px 0; padding:14px 29px; border-top:1px solid #bd9e6352; background:#101a27f5; }
.archive-footer > span { color:#8e9dae; font-size:10px; line-height:1.8; }
.archive-footer .primary-button { min-width:150px; min-height:44px; font-size:12px; padding:10px 16px; }
.collection-heading { border-color:#b69c653d; }
.collection-tabs { border:0; border-radius:0; background:transparent; padding:0; gap:22px; }
.collection-tabs::before { display:none; }
.collection-tabs button { border-radius:0; padding:10px 3px; border-bottom:2px solid transparent; color:#9da9b9; font-family:var(--serif); font-size:15px; letter-spacing:.13em; }
.collection-tabs button[aria-selected=true] { color:#ead8ae; border-color:#ccaf76; }
.wallet { color:#a6b2c0; }
.wallet b { color:#d9c18f; }
.collection-filters select { border-radius:2px; border-color:#ac95603d; background:#14202e; color:#cbd2da; }
.collection-filters label, .collection-count { color:#98a7b9; }
.series-lore { background:transparent; border:0; border-left:2px solid var(--series); border-radius:0; padding-block:7px; }
.series-copy > p:last-child, .collection-help { color:#94a4b6; }
.series-symbol { border-radius:0; border:0; }
.collectible { border-radius:5px; }
.collection-pagination button, .equip-options button { border-radius:2px; background:#1b2b3c; border-color:#b49d665c; }
.wish-copy h2 { color:#e2d1ad; }
.wish-copy > p:not(.eyebrow) { color:#a3b1c3; }
.wish-button { border-radius:2px; }
.wish-information { border-color:#a68d6140; }
.back-story, .back-description { color:#c1b5c8; }
@media (min-width:701px) and (max-width:1050px) {
  .menu-screen { grid-template-columns:minmax(220px,1fr) minmax(240px,.75fr); column-gap:80px; padding-inline:calc(36px + var(--safe-left)) calc(36px + var(--safe-right)); }
  .menu-screen > .stage-selection { grid-column:2; }
  .menu-intro h1 { font-size:52px; }
  .menu-screen > .departure { gap:17px; }
  .departure .primary-button { min-width:190px; padding-inline:17px; }
}
@media (max-width:700px) {
  body[data-phase=menu] .world-shade { background:linear-gradient(180deg,#07101bd4,#0914236b 35%,#091423b8 70%,#07101bf2); }
  .utility { min-height:44px; }
  .menu-screen { display:flex; flex-direction:column; gap:20px; padding:calc(77px + var(--safe-top)) calc(20px + var(--safe-right)) calc(15px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
  .menu-home { display:flex; flex-direction:column; flex:1 0 auto; justify-content:center; width:100%; padding:0; gap:23px; min-height:245px; }
  .menu-intro { text-align:center; }
  .title-crest { width:76px; height:40px; margin:0 0 4px; }
  .menu-intro .eyebrow { font-size:8px; letter-spacing:.4em; margin-bottom:9px; }
  .menu-intro h1 { font-size:43px; letter-spacing:.13em; margin-bottom:9px; }
  .menu-intro .title-subline { font-size:12px; margin-bottom:13px; }
  .menu-intro > p:last-child { font-size:10px; line-height:1.8; letter-spacing:.08em; }
  .sanctuary-actions { display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:none; width:100%; }
  .sanctuary-actions button, .sanctuary-actions button:first-child { min-height:59px; gap:8px; padding:8px 0; border-top:1px solid #a28c554a; }
  .sanctuary-glyph { width:26px; font-size:25px; }
  .sanctuary-actions b { font-size:14px; }
  .sanctuary-actions small { font-size:8px; margin-top:4px; }
  .sanctuary-actions i { margin-right:1px; font-size:20px; }
  .menu-screen > .stage-selection { margin:0; }
  .stage-heading { padding-bottom:9px; margin-bottom:4px; }
  .stage-heading .eyebrow { font-size:13px; }
  .stage-options { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:19px; max-height:185px; }
  .stage-card { min-height:61px; padding:8px 0; gap:6px; }
  .stage-symbol { width:30px; height:34px; flex-basis:30px; font-size:24px; }
  .stage-copy b { font-size:13px; letter-spacing:.06em; }
  .stage-copy small { font-size:8px; }
  .stage-check { font-size:9px; padding-right:0; }
  .stage-card::before { inset:3px 0; }
  .stage-description { font-size:9px; min-height:3.8em; line-height:1.8; margin:10px 0 0; }
  .menu-screen > .departure { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px 12px; padding:13px 0 10px; }
  .contract-deck { gap:8px; }
  .contract-slot .collectible { width:44px; }
  .contract-slot > span { font-size:8px; }
  .departure .primary-button { width:auto; min-width:0; min-height:48px; padding:10px 12px; gap:9px; font-size:11px; }
  .departure .deck-summary { grid-column:1/-1; grid-row:2; display:flex; justify-content:space-between; gap:8px; }
  .selection-label { font-size:9px; }
  .deck-summary p { font-size:8px; margin:0; text-align:right; }
  .menu-screen > .menu-bottom { gap:10px; margin:0; font-size:8px; }
  .menu-bottom > span:first-child { white-space:nowrap; }
  .player-status { padding:9px 10px; }
  .combat-card-slot:first-child, .combat-card-slot:last-child { rotate:0deg; translate:0 0; }
  .archive-screen { width:calc(100vw - 16px - var(--safe-left) - var(--safe-right)); height:calc(100dvh - 18px - var(--safe-top) - var(--safe-bottom)); padding:20px 16px 0; }
  .archive-heading { padding-bottom:20px; }
  .archive-heading h2 { font-size:23px; }
  .archive-heading .eyebrow { font-size:7px; }
  .archive-close { padding:0 6px; }
  .archive-close small { display:none; }
  .archive-footer { margin:22px -10px 0; padding:12px 10px; gap:12px; }
  .archive-footer > span { font-size:9px; }
  .archive-footer .primary-button { min-width:115px; font-size:11px; gap:12px; }
  .collection-tabs { gap:18px; }
  .collection-tabs button { font-size:13px; padding-inline:0; }
  .collection-grid { gap:12px; }
}
@media (max-width:380px) {
  .menu-screen { padding-inline:calc(16px + var(--safe-left)) calc(16px + var(--safe-right)); gap:17px; }
  .menu-intro h1 { font-size:38px; }
  .stage-copy b { font-size:12px; }
  .stage-options { column-gap:13px; }
  .departure .primary-button { padding-inline:9px; font-size:10px; }
  .contract-deck { gap:6px; }
}
@media (orientation:landscape) and (max-height:600px) {
  .menu-screen { display:grid; grid-template-columns:minmax(220px,1fr) minmax(270px,1fr); grid-template-rows:minmax(145px,1fr) auto auto; gap:10px 45px; padding:calc(62px + var(--safe-top)) calc(30px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(30px + var(--safe-left)); }
  .menu-home { grid-column:1; grid-row:1; min-height:0; gap:15px; padding:0; justify-content:center; }
  .menu-intro { text-align:left; }
  .title-crest, .menu-intro > p:last-child { display:none; }
  .menu-intro h1 { font-size:34px; margin-bottom:7px; }
  .menu-intro .eyebrow { font-size:7px; margin-bottom:7px; }
  .menu-intro .title-subline { display:block; font-size:10px; margin:0; }
  .sanctuary-actions { grid-template-columns:1fr 1fr; gap:15px; width:100%; max-width:330px; }
  .sanctuary-actions button, .sanctuary-actions button:first-child { min-height:44px; padding:6px 0; gap:6px; border-top:1px solid #a28c554a; }
  .sanctuary-actions b { font-size:12px; }
  .sanctuary-actions small { display:none; }
  .sanctuary-glyph { width:24px; font-size:23px; }
  .sanctuary-actions i { margin-right:0; font-size:18px; }
  .menu-screen > .stage-selection { grid-column:2; margin:0; }
  .stage-heading { padding-bottom:7px; margin-bottom:3px; }
  .stage-heading .eyebrow { font-size:13px; }
  .stage-options { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; max-height:120px; }
  .stage-card { min-height:53px; gap:6px; padding:7px 0; }
  .stage-symbol { width:29px; height:32px; flex-basis:29px; font-size:24px; }
  .stage-copy b { font-size:12px; letter-spacing:.03em; }
  .stage-copy small { font-size:8px; }
  .stage-description { font-size:10px; line-height:1.65; min-height:3.3em; max-width:54ch; margin-top:8px; }
  .menu-screen > .departure { display:flex; padding:10px 0 8px; gap:18px; }
  .contract-slot .collectible { width:44px; }
  .contract-deck { gap:8px; }
  .contract-slot > span { font-size:7px; }
  .departure .deck-summary { display:block; }
  .selection-label { font-size:9px; }
  .deck-summary p { font-size:8px; text-align:left; margin-top:5px; }
  .departure .primary-button { min-width:160px; font-size:11px; min-height:46px; padding:10px 13px; }
  .menu-screen > .menu-bottom { font-size:8px; }
  .archive-screen { height:calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom)); width:calc(100vw - 30px - var(--safe-left) - var(--safe-right)); padding-top:17px; }
  .archive-heading { padding-bottom:16px; }
  .archive-heading h2 { font-size:22px; }
  .archive-heading .eyebrow { display:none; }
  .combat-card-slot:first-child, .combat-card-slot:last-child { rotate:0deg; translate:0 0; }
}
@media (prefers-reduced-motion:no-preference) {
  .menu-home, .menu-screen > .stage-selection { animation:sanctuary-arrive 700ms cubic-bezier(.2,.7,.2,1) both; }
  .menu-screen > .stage-selection { animation-delay:100ms; }
  .archive-screen[open] { animation:sanctuary-arrive 230ms cubic-bezier(.2,.7,.2,1) both; }
  .sanctuary-actions button { transition:background-color 180ms,color 180ms; }
  @keyframes sanctuary-arrive { from {opacity:0;translate:0 12px;} to {opacity:1;translate:0 0;} }
}

/* A discovered form is a memory, never a preview of an undiscovered branch. */
.back-shards { display:block; flex-shrink:0; padding-top:9px; border-top:1px solid #bfa56d57; color:#c7cdd5; font-size:10px; line-height:1.7; }
.back-shards b { color:#f0d69c; font:600 14px Georgia,serif; padding-inline:3px; }
.card-detail { --evolution-color:#d9bc7d; background:linear-gradient(145deg,#202e43,#101b2d 70%,#18253a); border-color:#bd9e63a8; box-shadow:inset 0 0 0 4px #080f1db0,inset 0 0 0 5px #a88c4229,0 24px 70px #000b; }
.card-detail .modal-close { border:1px solid #8c9cb45c; border-radius:2px; background:#101b2cea; color:#d8dfe8; }
.card-detail .modal-close:hover { border-color:#e0c992; color:#fff2d1; }
.card-detail .flip-instruction { color:#b2c0d2; margin:14px 0 17px; }
.card-detail .flip-card:disabled { cursor:progress; }
.evolution-controls { position:relative; padding:17px 0 19px; margin-bottom:21px; border-top:1px solid #c5a76f92; border-bottom:1px solid #c5a76f4a; text-align:left; }
.evolution-controls::before, .evolution-controls::after { content:""; position:absolute; top:-3px; width:5px; height:5px; rotate:45deg; background:#e2c48a; box-shadow:0 0 8px #c8a75f30; }
.evolution-controls::before { left:0; }.evolution-controls::after { right:0; }
.evolution-heading, .shard-ledger { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.evolution-heading > span { color:#f0dfbd; font:500 15px var(--serif); letter-spacing:.12em; }
.evolution-heading > b { font:10px system-ui; color:#b6c0d0; }
.shard-ledger { margin:17px 0 9px; color:#cbd4e1; font-size:11px; }
.shard-ledger i { color:#eac987; font-style:normal; font-size:17px; vertical-align:-1px; }
.shard-ledger strong { font:600 21px Georgia,serif; color:#f1d9a6; font-variant-numeric:tabular-nums; }
.shard-meter { height:4px; margin-bottom:17px; padding:1px; background:#07101c; box-shadow:0 0 0 1px #8d9db038; }
.shard-meter > i { display:block; height:100%; background:linear-gradient(90deg,#a07840,#f0d498); box-shadow:0 0 9px #c8a66045; }
.detail-actions .evolution-hint { margin:12px 0 0; color:#c0ccdc; font-size:10px; line-height:1.8; text-align:center; }
.card-detail :is(#evolve-card,#evolution-retry,#evolution-done) { position:relative; min-height:48px; border:1px solid #ecd39c; border-radius:2px; background:linear-gradient(180deg,#e3ca94 0%,#c2a06a 48%,#ad8954 100%); color:#211c17; box-shadow:inset 0 1px #fff3d2,inset 0 0 0 3px #71582d4d,0 3px 0 #514025,0 6px 14px #0005; font:600 13px var(--serif); letter-spacing:.065em; transition:filter .15s,translate .12s,box-shadow .12s; }
.card-detail :is(#evolve-card,#evolution-retry,#evolution-done)::after { content:""; pointer-events:none; position:absolute; inset:5px; border:1px solid #65481f40; }
.card-detail :is(#evolve-card,#evolution-retry,#evolution-done):hover:not(:disabled) { filter:brightness(1.08); box-shadow:inset 0 1px #fff5dd,inset 0 0 0 3px #71582d4d,0 3px 0 #514025,0 7px 20px #a1844b24; }
.card-detail :is(#evolve-card,#evolution-retry,#evolution-done):active:not(:disabled) { translate:0 2px; filter:brightness(.94); box-shadow:inset 0 2px 5px #5e431d55,inset 0 0 0 3px #71582d4d,0 1px 0 #514025; }
.card-detail #evolve-card:disabled { background:linear-gradient(180deg,#344155,#263246); color:#aeb8c6; border-color:#68778b; box-shadow:inset 0 1px #91a1b220,inset 0 0 0 3px #0b142738; opacity:1; cursor:default; }
.card-detail #evolve-card[aria-busy=true] { color:#ecd7ac; cursor:progress; }
.card-detail button:focus-visible { outline:2px solid #d9eeff; outline-offset:4px; }
.card-detail .loadout-controls { padding-top:2px; }
@media (min-width:620px) and (max-height:600px) {
  .card-detail[open]:not(.is-evolving) { display:grid; grid-template-columns:minmax(0,.9fr) minmax(250px,1fr); gap:8px 25px; width:min(740px,calc(100vw - 32px - var(--safe-left) - var(--safe-right))); padding:24px; }
  .card-detail:not(.is-evolving) > .eyebrow { grid-column:1/-1; margin:4px 35px 10px; }
  .card-detail:not(.is-evolving) .card-stage { grid-column:1; grid-row:2; }
  .card-detail:not(.is-evolving) .card-stage .flip-card { width:clamp(160px,calc((100dvh - 150px)*.75),240px); }
  .card-detail:not(.is-evolving) > .flip-instruction { grid-column:1; grid-row:3; margin:4px 0; font-size:9px; }
  .card-detail:not(.is-evolving) .detail-actions { grid-column:2; grid-row:2/4; align-self:center; }
  .card-detail:not(.is-evolving) .detail-history, .card-detail:not(.is-evolving) .detail-feedback { grid-column:1/-1; }
  .card-detail:not(.is-evolving) .evolution-controls { padding-block:12px; margin-bottom:16px; }
}
.card-detail .equip-options button { min-height:46px; color:#d9e2ef; background:linear-gradient(180deg,#283a54,#17263d); border:1px solid #8394ae8c; border-radius:2px; box-shadow:inset 0 1px #c2d4eb1a,0 2px 0 #080f1c; }
.card-detail .equip-options button:hover:not(:disabled) { color:#fff0ce; border-color:#d6b77a; }
.card-detail .equip-options button:active:not(:disabled) { translate:0 1px; box-shadow:inset 0 2px 5px #080f1c88; }
.card-detail .equip-options button:disabled { color:#97a4b7; background:#172337; border-color:#52637b70; opacity:1; }
.detail-history { padding-top:18px; margin-top:20px; border-top:1px solid #bba06b50; }
.detail-history > p { display:flex; justify-content:space-between; gap:8px; margin:0 0 11px; color:#d6c49f; font:13px var(--serif); }
.detail-history > p > span { color:#a6b5c9; font:9px system-ui; }
.form-history { display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding:4px 3px 8px; scrollbar-width:thin; scrollbar-color:#a28a60 transparent; touch-action:pan-x; }
.form-history button { flex:0 0 55px; min-width:44px; min-height:72px; padding:2px; border:1px solid #6b7c954f; border-radius:2px; background:#101a2a; color:#adbacb; }
.form-history img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; pointer-events:none; }
.form-history button > span { display:block; padding:6px 0 4px; font:9px system-ui; }
.form-history button[aria-pressed=true] { color:#f0d9a2; border-color:#e0bc77; box-shadow:0 0 0 1px #e0bc774d; }
.form-history button:disabled { opacity:.6; }
.history-return { margin-bottom:15px; padding:14px 0; border-block:1px solid #bca56f5c; }
.history-return .text-button { min-height:44px; color:#edd39e; }
.card-detail.is-evolving { overflow-x:hidden; }
.card-detail.is-evolving > .eyebrow { color:#b7c5d8; letter-spacing:.2em; margin-bottom:13px; }
.evolution-ritual { position:relative; min-height:445px; text-align:center; padding:6px 0 8px; isolation:isolate; }
.evolution-status { position:relative; z-index:2; margin:0 0 13px; color:#c5d0df; font-size:10px; letter-spacing:.045em; line-height:1.7; }
.evolution-aperture { position:relative; width:min(280px,100%); aspect-ratio:1; display:grid; place-items:center; margin:10px auto 20px; color:var(--evolution-color); }
.evolution-aperture::before { content:""; position:absolute; inset:-10%; background:radial-gradient(ellipse,color-mix(in srgb,var(--evolution-color) 20%,transparent),transparent 64%); opacity:.75; }
.evolution-aperture svg { position:absolute; inset:0; width:100%; height:100%; stroke:currentColor; stroke-width:.8; opacity:.85; }
.evolution-orbit { stroke-dasharray:2 7; stroke-width:2; transform-origin:150px 150px; }
.evolution-inscription { transform-origin:150px 150px; opacity:.65; }
.evolution-aperture > span { font:58px Georgia,serif; text-shadow:0 0 24px color-mix(in srgb,var(--evolution-color) 55%,transparent); }
.evolution-aperture > i { position:absolute; width:20%; height:34%; border:1px solid currentColor; rotate:45deg; opacity:.6; }
.evolution-ritual h2 { position:relative; margin:12px 0 10px; font:500 24px/1.4 var(--serif); letter-spacing:.08em; color:#f2dfb7; }
.evolution-ritual > p:last-of-type { color:#b4c3d7; font-size:11px; line-height:1.9; margin:0 auto 18px; max-width:30em; }
.evolution-actions { position:relative; z-index:2; display:grid; justify-items:center; gap:12px; margin-top:15px; }
.evolution-actions > button { min-height:46px; min-width:210px; }
.evolution-actions .text-button { color:#d8c69e; padding:10px 16px; }
.evolution-art { position:relative; z-index:1; width:min(264px,84%); margin:22px auto 24px; }
.evolution-art .collectible { width:100%; }
.card-detail[data-evolution-phase=revealed] .evolution-aperture { position:absolute; z-index:-1; top:33px; left:50%; width:118%; max-width:none; margin:0; translate:-50% 0; opacity:.36; }
.card-detail[data-evolution-phase=revealed] .evolution-aperture > :is(span,i) { visibility:hidden; }
.card-detail[data-evolution-phase=art-error] .evolution-aperture { width:150px; opacity:.55; }
@media (max-width:700px) {
  .evolution-controls { padding-top:15px; margin-bottom:17px; }
  .evolution-heading > span { font-size:14px; }
  .evolution-ritual { min-height:400px; }
  .evolution-ritual h2 { font-size:22px; }
  .evolution-art { width:min(250px,88%); }
  .evolution-aperture { width:min(250px,100%); }
}
@media (orientation:landscape) and (max-height:600px) {
  .card-detail.is-evolving { width:min(740px,calc(100vw - 32px - var(--safe-left) - var(--safe-right))); padding:24px; }
  .card-detail.is-evolving > .eyebrow { display:none; }
  .evolution-ritual { min-height:260px; display:grid; grid-template-columns:minmax(160px,.85fr) minmax(210px,1fr); column-gap:24px; align-content:center; }
  .evolution-status { grid-column:2; grid-row:1; align-self:end; }
  .evolution-aperture, .evolution-art { grid-column:1; grid-row:1/5; align-self:center; width:min(185px,100%); margin:0 auto; }
  .evolution-art { width:min(170px,100%); }
  .evolution-ritual h2 { grid-column:2; grid-row:2; font-size:22px; margin:10px 0; }
  .evolution-ritual > p:last-of-type { grid-column:2; grid-row:3; font-size:10px; }
  .evolution-actions { grid-column:2; grid-row:4; margin:0; }
  .evolution-actions > button { min-width:0; width:100%; }
  .card-detail[data-evolution-phase=revealed] .evolution-aperture { position:relative; top:auto; left:auto; width:130%; max-width:260px; translate:none; }
}
@media (prefers-reduced-motion:no-preference) {
  .card-detail[data-evolution-phase=weaving] .evolution-orbit { animation:evolution-orbit 8s linear infinite; }
  .card-detail[data-evolution-phase=weaving] .evolution-inscription { animation:evolution-orbit 11s linear reverse infinite; }
  .card-detail[data-evolution-phase=weaving] .evolution-aperture > i { animation:evolution-gather 1s cubic-bezier(.2,.7,.2,1) both; }
  .card-detail[data-evolution-phase=revealed] .evolution-art { animation:evolution-arrival 650ms cubic-bezier(.17,.76,.24,1) both; }
  @keyframes evolution-orbit { to { transform:rotate(360deg); } }
  @keyframes evolution-gather { from {scale:2;opacity:0;} 50% {opacity:.8;} to {scale:.45;opacity:.2;} }
  @keyframes evolution-arrival { from {opacity:0;translate:0 12px;scale:.95;} to {opacity:1;translate:0 0;scale:1;} }
}

/* The star disc shares the reveal dialog with the card and controls. */
.reveal-modal.summon-playing {
  isolation: isolate;
  width: min(920px, calc(100vw - 20px - var(--safe-left) - var(--safe-right)));
  max-width: none;
  border-color: #ac926562;
  background: radial-gradient(ellipse at 50% 42%, #28324a, #0a111d 64%);
  box-shadow: 0 26px 100px #03050bd8, inset 0 0 0 4px #090c17b5;
}
.reveal-modal.summon-playing::backdrop { background: #060a13ed; }
.summon-stage-scene {
  position: absolute;
  inset: 44px 0 10px;
  z-index: -1;
  visibility: hidden;
  pointer-events: none;
  overflow: clip;
  mask-image: radial-gradient(ellipse at 50% 51%, #000 45%, #0007 77%, transparent 98%);
}
.reveal-modal[data-stage-ready=true] .summon-stage-scene { visibility: visible; }
.summon-stage-scene canvas { display: block; width: 100%; height: 100%; }
.reveal-modal[data-stage-ready=true] .summon-altar > * { visibility: hidden; }
.reveal-modal[data-stage-ready=true] .summon-altar::before,
.reveal-modal[data-stage-ready=true] .summon-radiance { opacity: .2; }
.summon-topline { position: relative; z-index: 2; }
.summon-mode { color: #e3d7bc; }
.summon-status { color: #d9d4dc; }
.summon-cinematic h2, .summon-caption h2 { color: #f6ead3; text-shadow: 0 2px 15px #030711; }
.summon-cinematic .eyebrow { color: #c8b790; }
.summon-saved { color: #d0c5b7; }
.summon-focus { --summon-card-width: clamp(175px, calc((100dvh - 305px) * .75), 340px); }
.summon-focus.is-multi { --summon-card-width: clamp(148px, calc((100dvh - 359px) * .75), 300px); }
.summon-focus-stage { padding-block: 8px 12px; }
.summon-card-slot .card-front {
  box-shadow: 0 12px 34px #01040ddd, 0 0 28px color-mix(in srgb, var(--summon-color) 36%, transparent);
}
.summon-card-slot .card-art { object-fit: contain; }
.summon-tier { color: #eddfc4; }
.summon-caption p { color: #e1d5c4; }
.summon-caption > span { color: #c0bdc9; }
.summon-next[aria-disabled=true] { opacity: .8; }
@media (prefers-reduced-motion:no-preference) {
  .summon-arrival .summon-card-slot { animation: summon-film-arrive 320ms cubic-bezier(.18,.8,.22,1) both; }
  .summon-arrival .summon-caption { animation-duration: 290ms; animation-delay: 35ms; }
  .summon-arrival .summon-radiance, .summon-arrival .summon-reveal-ring { animation-duration: 570ms; }
  .summon-arrival .summon-reveal-sparks b { animation-duration: 520ms; }
  .reveal-modal[data-rarity=rainbow] .summon-arrival .summon-radiance { animation-duration: 760ms; }
  @keyframes summon-film-arrive {
    from { opacity: .25; transform: translateY(12px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}
@media (max-width:700px) and (orientation:portrait) {
  .reveal-modal.summon-playing { padding-inline: 14px; }
  .summon-focus { --summon-card-width: clamp(155px, calc((100dvh - 287px) * .75), 260px); }
  .summon-focus.is-multi { --summon-card-width: clamp(140px, calc((100dvh - 375px) * .75), 240px); }
  .summon-stage-scene { inset: 44px 0 54px; }
  .summon-progress { max-width: 264px; }
}
@media (orientation:landscape) and (max-height:600px) {
  .reveal-modal.summon-playing { padding: 7px 18px 12px; }
  .summon-focus, .summon-focus.is-multi {
    --summon-card-width: clamp(135px, calc((100dvh - 132px) * .75), 239px);
    grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1fr);
    align-items: center;
  }
  .summon-stage-scene { inset: 35px 44% 0 0; }
  .summon-focus-stage { padding-block: 5px 8px; }
}