@import url('./artifacts.css');
/* Shared Duel Monsters identity. Keep duel geometry and rarity colours in their own stylesheets. */
:root {
  color-scheme: dark;
  --bg: #0d0b16;
  --panel: #1a1527;
  --line: #e8c77720;
  --border: #d4bce127;
  --gold: #e8c777;
  --text: #f3eddf;
  --cream: #f3eddf;
  --muted: #b5aac3;
  --soft: #b5aac3;
  --teal: #92d1b7;
  --green: #a5d6b6;
}
/* Acquisition odds and rarity emphasis, shared by packs and duel rewards. */
.pull-reward{--pull-color:#aab6c2;position:relative;isolation:isolate;border-radius:12px}
.pull-tier-1{--pull-color:#74c4f3}
.pull-tier-2{--pull-color:#bc99ff}
.pull-tier-3{--pull-color:#edca73}
.pull-tier-4{--pull-color:#ff9fca}
.pull-tier-5{--pull-color:#e6ab76}
.pull-tier-6{--pull-color:#d7f1ee}
.pull-tier-7{--pull-color:#82e5c5}
.pull-tier-8{--pull-color:#e4ccff}
.pull-tier-9{--pull-color:#f4d887}
.pull-reward.pull-tier-2,.pull-reward.pull-tier-3{border-color:color-mix(in srgb,var(--pull-color) 65%,transparent);box-shadow:inset 0 3px 0 var(--pull-color)}
.pull-reward:is(.pull-tier-4,.pull-tier-5){border-color:var(--pull-color);box-shadow:inset 0 3px 0 var(--pull-color),0 0 18px color-mix(in srgb,var(--pull-color) 14%,transparent);background:linear-gradient(155deg,color-mix(in srgb,var(--pull-color) 12%,#1a1427),#171220)}
.pull-reward:is(.pull-tier-6,.pull-tier-7){border-color:var(--pull-color);box-shadow:inset 0 3px 0 var(--pull-color),0 0 24px color-mix(in srgb,var(--pull-color) 25%,transparent);background:radial-gradient(ellipse at top,color-mix(in srgb,var(--pull-color) 19%,#1a1427),#171220 75%)}
.pull-reward:is(.pull-tier-8,.pull-tier-9){border:2px solid var(--pull-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--pull-color) 16%,transparent),0 0 36px color-mix(in srgb,var(--pull-color) 30%,transparent),inset 0 0 24px color-mix(in srgb,var(--pull-color) 10%,transparent);background:radial-gradient(ellipse at 30% 0,#d8b1ff26,transparent 60%),linear-gradient(145deg,#33233e,#15111e 80%)}
.pull-reward:is(.pull-tier-8,.pull-tier-9)::after{content:'✦';position:absolute;right:8px;top:7px;font-size:19px;color:var(--pull-color);text-shadow:0 0 14px var(--pull-color);pointer-events:none}
.pull-reward:is(.pull-tier-4,.pull-tier-5,.pull-tier-6,.pull-tier-7,.pull-tier-8,.pull-tier-9) :is(.rarity,.reward-rarity,.treasury-rarity,.coop-tier){font-weight:800;letter-spacing:.04em;color:var(--pull-color)}
.pull-reward.selected{outline:2px solid #fff1c7;outline-offset:3px}
/* Odds stay quiet; the pulled card's rarity is the visual focus. */
.pull-odds{container-type:inline-size;display:block;border:0;border-radius:6px;padding:10px;margin:6px 0;background:#08061130;text-align:left;line-height:1.4;color:#f1e9f6;min-width:0;width:100%;max-width:100%;box-sizing:border-box}
.pull-odds .pull-odds-context{display:block;font:400 10px/1.4 'DM Sans',sans-serif!important;color:#a99eb7;margin:0 0 8px}
.pull-odds-equation{display:grid;gap:6px}
.pull-odds-term{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.pull-odds .pull-odds-term-label{display:flex;align-items:baseline;gap:4px;font:500 10px/1.4 'DM Sans',sans-serif!important;color:#bcb1c8;min-width:0}
.pull-odds .pull-odds-symbol{display:inline-block;width:8px;flex:none;font:500 12px/1 'DM Sans',sans-serif!important;color:#9d91ad}
.pull-odds-values{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:2px 7px;min-width:0}
.pull-odds .pull-odds-values>strong{font:650 12px/1.4 'DM Sans',sans-serif!important;letter-spacing:-.015em;color:#eee6f3;overflow-wrap:anywhere;min-width:0}
.pull-odds .pull-odds-values>small{display:inline!important;font:400 10px/1.4 'DM Sans',sans-serif!important;letter-spacing:0;color:#a99eb7;margin:0;overflow-wrap:anywhere}
.pull-odds-combined{padding-top:6px;border-top:1px solid #ffffff10}
.pull-odds .pull-odds-combined :is(.pull-odds-term-label,strong){color:var(--pull-color,#e4d3ed);font-weight:750!important}
@container(min-width:230px){.pull-odds-equation{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}.pull-odds-term{display:block;position:relative;text-align:center}.pull-odds .pull-odds-term-label{display:block;margin-bottom:4px}.pull-odds .pull-odds-symbol{position:absolute;left:-15px;top:24px}.pull-odds-values{display:flex;flex-direction:column;align-items:center;gap:2px}.pull-odds-combined{padding-top:0;border-top:0}.pull-odds .pull-odds-values>strong{font-size:13px!important}}
/* The final probability is a single rarity-matched result, without a label. */
.pull-odds .pull-odds-combined{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;margin-top:3px;padding:10px 8px;border:1px solid color-mix(in srgb,var(--pull-color,#b9a5ca) 60%,transparent);border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--pull-color,#b9a5ca) 13%,#171220),#171220);box-shadow:var(--pull-result-shadow,inset 0 1px 0 #ffffff12)}
.pull-odds .pull-odds-combined>.pull-odds-symbol{position:static;display:block;width:auto;flex:0 0 auto;align-self:flex-start;margin-top:3px;font-size:16px!important;color:var(--pull-color,#e4d3ed)}
.pull-odds .pull-odds-combined>.pull-odds-values{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;text-align:center}
.pull-odds .pull-odds-combined .pull-odds-values>strong{font-size:17px!important;line-height:1.3!important;color:var(--pull-color,#e4d3ed);font-weight:800!important;overflow-wrap:anywhere}
@container(min-width:230px){.pull-odds .pull-odds-combined .pull-odds-values>strong{font-size:20px!important}}
.pull-reward:is(.pull-tier-4,.pull-tier-5){--pull-result-shadow:0 0 12px color-mix(in srgb,var(--pull-color) 22%,transparent),inset 0 1px 0 #ffffff30}
.pull-reward:is(.pull-tier-6,.pull-tier-7){--pull-result-shadow:0 0 16px color-mix(in srgb,var(--pull-color) 30%,transparent),inset 0 0 14px color-mix(in srgb,var(--pull-color) 12%,transparent)}
.pull-reward:is(.pull-tier-8,.pull-tier-9){--pull-result-shadow:0 0 0 1px color-mix(in srgb,var(--pull-color) 30%,transparent),0 0 20px color-mix(in srgb,var(--pull-color) 40%,transparent),inset 0 0 18px color-mix(in srgb,var(--pull-color) 15%,transparent)}
/* Escalating frames and foil-like badges make rare pulls unmistakable. */
.pull-reward.pull-reward:is(.pull-tier-4,.pull-tier-5){border-color:var(--pull-color);border-top-width:4px;box-shadow:0 0 22px color-mix(in srgb,var(--pull-color) 22%,transparent),inset 0 1px 0 #fff5}
.pull-reward.pull-reward:is(.pull-tier-6,.pull-tier-7){border:2px solid var(--pull-color);border-top-width:5px;box-shadow:0 0 28px color-mix(in srgb,var(--pull-color) 34%,transparent),inset 0 0 24px color-mix(in srgb,var(--pull-color) 12%,transparent);background:radial-gradient(ellipse at top,color-mix(in srgb,var(--pull-color) 27%,#1a1427),#171220 70%)}
.pull-reward.pull-reward:is(.pull-tier-8,.pull-tier-9){border:2px solid var(--pull-color);border-top-width:6px;box-shadow:0 0 0 3px color-mix(in srgb,var(--pull-color) 24%,transparent),0 0 38px color-mix(in srgb,var(--pull-color) 43%,transparent),inset 0 0 35px color-mix(in srgb,var(--pull-color) 17%,transparent);background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--pull-color) 38%,#271c35),transparent 65%),linear-gradient(125deg,#c5f8ff0f,#e6b2ff14,#fff1b80e),#171220}
.pull-reward:is(.pull-tier-4,.pull-tier-5,.pull-tier-6,.pull-tier-7,.pull-tier-8,.pull-tier-9) :is(.offer-rarity,.market-rarity,.rarity,.reward-rarity,.treasury-rarity,.coop-tier){color:var(--pull-color);font-weight:800;text-shadow:0 0 16px color-mix(in srgb,var(--pull-color) 50%,transparent)}
.pull-reward:is(.pull-tier-6,.pull-tier-7,.pull-tier-8,.pull-tier-9) .offer-rarity>b{background:linear-gradient(135deg,#fff8,color-mix(in srgb,var(--pull-color) 88%,#fff));color:#23172f;border-color:#fff9;box-shadow:0 0 18px color-mix(in srgb,var(--pull-color) 40%,transparent);text-shadow:none}
.pull-reward:is(.pull-tier-8,.pull-tier-9)::after{font-size:18px;right:6px;top:6px;text-shadow:0 0 8px #fff,0 0 22px var(--pull-color)}
.pull-reward:is(.pull-tier-6,.pull-tier-7,.pull-tier-8,.pull-tier-9) .full-face{box-shadow:0 0 20px color-mix(in srgb,var(--pull-color) 24%,transparent)}
.reveal-grid .pull-reward :is(.art-label,.bonus){display:none}
.pull-reward .pull-status{font-size:10px;font-weight:500;line-height:1.5;color:#c7bad1}
@media(prefers-reduced-motion:no-preference){.reveal-grid .pull-reward:is(.pull-tier-6,.pull-tier-7,.pull-tier-8,.pull-tier-9){animation:rare-pull-glow 1.4s ease-out both;animation-delay:var(--delay,0ms)}@keyframes rare-pull-glow{from{filter:brightness(1.35)}to{filter:brightness(1)}}}
body {
  background: radial-gradient(ellipse at 80% 0, #58336b24, transparent 55%),
    radial-gradient(ellipse at 10% 25%, #ba8b3410, transparent 45%), var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
}
::selection { background: #e8c77744; color: #fff8e7; }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 4px;
}
input, select, textarea { background: #110e1c; border-color: #c2aed137; color: var(--text); }
input::placeholder, textarea::placeholder { color: #9f94ad; }
h1, h2, .brand, .sim-brand { font-family: 'Cinzel', Georgia, serif; }
h1 em { font-style: normal; }
.app-shell { background: none; }
.app-shell > header, .store-header, .sim-header {
  background: #100d19e8;
  border-bottom-color: #e8c77732;
  box-shadow: inset 0 2px #d7af5d75, 0 6px 24px #00000012;
}
.brand-mark, .brand-mark img { display: block; width: 40px; height: 40px; flex-shrink: 0; }
.sim-brand > img, .store-header .brand > img { width: 38px; height: 38px; flex-shrink: 0; }
.brand, .sim-brand { color: var(--text); }
.brand small, .sim-brand small { color: #b8a7c8; }
.text-btn, .header-tools, .header-right > a { color: var(--muted); }
.text-btn:hover, .header-tools :is(button, a):hover, .header-right > a:hover { color: var(--gold); }
.tag, .engine-pill, .core-tags span { border-color: #e8c77730; background: #e8c77707; }
.eyebrow { color: var(--gold); letter-spacing: .19em; }
.btn:not(.secondary), .gold-btn, .buy {
  background: linear-gradient(135deg, #f0d991, #d8b35f);
  border-color: #f4dfa699; color: #21172a;
  box-shadow: inset 0 1px #fff5, 0 3px 12px #0002;
}
.btn:not(.secondary):hover:not(:disabled), .gold-btn:hover:not(:disabled), .buy:hover:not(:disabled) {
  background: linear-gradient(135deg, #f8e7b4, #e8c777); box-shadow: 0 4px 20px #d7ad5e22;
}
.btn.secondary, .quiet-btn { background: #b99cd00c; border-color: #bca5d03d; color: var(--text); }
.btn.secondary:hover, .quiet-btn:hover { background: #b99cd01b; }
.hero { min-height: 475px; }
.hero h1 { letter-spacing: -.035em; }
.hero p { color: #c0b5cd; }
.hero-note { color: #a79ab6; font-size: 10px; line-height: 1.8; }
.hero-art { isolation: isolate; }
.hero-art::before {
  content: ''; position: absolute; inset: 2% -5%; z-index: -1; pointer-events: none;
  background: url('millennium-mark.svg') center / contain no-repeat; opacity: .1;
}
.orbit { border-color: #e8c77730; box-shadow: 0 0 100px #9151c52b, inset 0 0 70px #c5a45a0c; }
.orbit::before { border-color: #e8c77729; }
.orbit::after { border-color: #e8c77725; }
.hero-art .full-face { filter: drop-shadow(0 18px 20px #0008); }
.hero-art .art-card.full-face { position: absolute; }
.section-head { border-color: #e8c7772b; }
.starter {
  background: linear-gradient(140deg, #282035, #161321 75%);
  border-color: #b7a0c42b; border-radius: 8px;
  box-shadow: inset 0 3px #bb986b28; transition: border-color .2s, transform .2s, background .2s;
}
.starter:nth-child(2) { box-shadow: inset 0 3px #a67bc644; }
.starter:nth-child(3) { box-shadow: inset 0 3px #80b8aa44; }
.starter:hover { transform: translateY(-3px); background: linear-gradient(140deg, #342641, #1b1628); }
.starter.selected { background: linear-gradient(140deg, #3b2c2d, #21182b 75%); border-color: #e8c777b3; }
.starter.selected .choice { box-shadow: inset 0 0 0 4px #332339; }
.starter h3 { color: #f1e5cf; }
.starter-icon { background: #e8c77708; border: 1px solid #e8c77722; border-radius: 8px; padding: 4px; }
.footnote, footer { color: #a398b0; }
.footnote { border-top: 1px solid var(--line); margin-top: 28px; }

/* The expedition reads like a path through an ancient temple. */
.sidebar { background: #15102099; border-color: var(--line); }
.journey { background: radial-gradient(ellipse at center, #78529416, transparent 70%); }
.map-node, .reward-card, .choice-card, .response-card {
  background: linear-gradient(145deg, #241c33, #171321); border-color: #b6a1c42b;
}
.map-node.available { border-color: #e8c77790; box-shadow: 0 0 24px #e8c77708; }
.map-node.available:hover { background: #34263c; }
.map-node.locked { opacity: .65; }
.map-node.visited { background: #1b2c27; border-color: #92d1b74d; }
.map-node.boss { background: linear-gradient(120deg, #493132, #24182e); }
.node-symbol { text-shadow: 0 0 18px #e8c77724; }
.relic-icon { background: #e8c7770b; border-color: #e8c77740; }
.relic-list:has(.artifact-hint) { position: relative; }
.relic-icon.artifact-hint { display: inline-grid; place-items: center; padding: 0; min-width: 38px; min-height: 38px; }
.artifact-hint:hover, .artifact-hint:focus-visible { border-color: var(--gold); background: #e8c77718; }
.artifact-tooltip {
  position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 25;
  display: none; width: min(280px, calc(100vw - 40px)); padding: 14px 16px;
  background: #251d32; border: 1px solid #e8c77770; border-radius: 10px;
  box-shadow: 0 8px 28px #0008; text-align: left; white-space: normal;
  font: 13px/1.55 'DM Sans', system-ui, sans-serif; color: var(--text);
}
.artifact-tooltip::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 11px; }
.artifact-tooltip strong { display: block; color: var(--gold); font-size: 14px; margin-bottom: 6px; }
.artifact-tooltip>span { display: block; }
.artifact-tooltip small { display: block; color: var(--muted); font-size: 11px; margin-top: 9px; }
.artifact-hint:hover .artifact-tooltip, .artifact-hint:focus-visible .artifact-tooltip { display: block; }
@media(max-width:800px) {
  .artifact-tooltip { bottom: auto; top: calc(100% + 10px); }
  .artifact-tooltip::after { top: auto; bottom: 100%; }
}
.modal, dialog, .sim-modal { background: #1a1427; border-color: #e8c77740; }
.modal-backdrop, .sim-modal-backdrop { background: #08060edb; }
dialog::backdrop { background: #08060edb; }
.library-controls :is(input, select), .settings-form select, .practice-import select, #deck-import { background: #110e1c; }
.detail-panel, .log-panel, .replay-side { background: #1b1628; border-color: var(--line); }
#toast, #notice { background: #282032; border-color: #e8c77770; color: #fff1cb; }

/* Card shop: quiet displays let the real card art and rarity labels lead. */
.store-header .brand { font-size: 14px; letter-spacing: .1em; }
.store-header .brand small { font: 9px 'DM Sans', sans-serif; letter-spacing: .18em; }
.store-intro { position: relative; isolation: isolate; }
.store-intro::after {
  content: ''; position: absolute; right: 22%; top: 12px; width: 220px; height: 220px;
  background: url('millennium-mark.svg') center / contain no-repeat;
  opacity: .035; z-index: -1; pointer-events: none;
}
.store-intro h1 { font-size: clamp(32px, 3.6vw, 49px); letter-spacing: -.025em; line-height: 1.2; }
.wallet { background: linear-gradient(135deg, #46341f77, #2c203544); border-color: #e8c77750; border-radius: 8px; }
.wallet b { color: #f1d48a; }
.earn-note > span {
  width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center;
  border: 1px solid #e8c77770; border-radius: 50%; background: #7b592420;
  box-shadow: inset 0 0 0 4px #e8c7770c; font-size: 31px;
}
.earn-note { border-color: #e8c7772b; }
.store-tabs { border-color: #e8c77730; gap: 10px; }
.store-tabs button { padding: 13px 17px; border-radius: 6px 6px 0 0; }
.store-tabs button:hover { background: #bca4d00c; color: var(--text); }
.store-tabs button.active { background: #e8c7770d; border-bottom-color: var(--gold); }
.card-tile { background: linear-gradient(145deg, #241c31, #171320); border-color: #b49cc62b; box-shadow: 0 5px 18px #0002; }
.card-tile h3 { color: #f3eddf; font-family: 'DM Sans', sans-serif; }
.pack-panel, .deck-panel { background: linear-gradient(145deg, #231b30, #171320); border-color: #e8c7772e; }
.pack-panel h3 { font-family: 'Cinzel', Georgia, serif; font-size: 23px; }
.pack-art {
  position: relative; background: repeating-linear-gradient(135deg, #b998d407 0 1px, transparent 1px 9px), linear-gradient(145deg, #614181, #21152e 58%, #775297);
  border-color: #b58ec6; color: #e6c8f4; outline-color: #d5b1e955; border-radius: 2px;
}
.pack-art.royal { background: repeating-linear-gradient(135deg, #ffe0a409 0 1px, transparent 1px 9px), linear-gradient(145deg, #a17a38, #302038 60%, #bb9248); border-color: #e8c777; color: #ffe5ab; }
.pack-art::before, .pack-art::after { content: ''; position: absolute; left: 0; right: 0; height: 7px; background: repeating-linear-gradient(90deg, #fff2 0 1px, #0002 1px 4px); }
.pack-art::before { top: 0; } .pack-art::after { bottom: 0; }
.pack-art b { width: 66px; height: 66px; font-size: 0; background: url('millennium-mark.svg') center / contain no-repeat; }
.pack-art strong { font-family: 'Cinzel', Georgia, serif; font-size: 15px; }
.deck-row { border-color: #b49cc61f; }
.remove { background: #b49cc60c; }
.rarity-guide { border-color: #e8c7772b; }
.rarity-picker button { background: #b8a0d008; }
.upgrade-detail { background: #e8c77709; border-color: #e8c77735; }
.dialog-close { background: #bba6cc14; }

/* The same identity in the arena, without competing with legal-action highlights. */
.setup-panel { background: linear-gradient(145deg, #2b2037, #171322); border-color: #e8c7773d; }
.setup-copy { position: relative; isolation: isolate; }
.setup-copy::before { content: ''; display: block; width: 80px; height: 80px; margin-bottom: 24px; background: url('millennium-mark.svg') center / contain no-repeat; opacity: .8; }
.setup-copy h1 { letter-spacing: -.035em; }
.deck-preset { background: #0f0c1855; border-color: #bda7ce21; }
.deck-preset:hover { background: #b99ad013; border-color: #bda7ce66; }
.deck-preset.active { background: #e8c7770d; border-color: var(--gold); }
.scope-note { color: #a99bb8; }
.sim-board, .reference-layout .sim-board, .arena {
  background: radial-gradient(ellipse at center, #6a416521, transparent 65%), linear-gradient(145deg, #21192e, #15111e);
  border-color: #e8c7773b;
}
.reference-layout .sim-sidebar, .sim-inspector, .decision-panel, .sim-log, .sim-chain {
  background: #191422; border-color: #c5afd12b;
}
.info-tabs { background: #171120; border-color: #e8c77730; }
.info-tabs button.active { background: #e8c77715; color: var(--gold); border-bottom-color: var(--gold); }
.reference-layout .sim-life::before { content: ''; background: url('millennium-mark.svg') center / 76% no-repeat, #2a1e36; border-color: #e8c77765; }
.reference-layout .sim-life:first-child::before { background-color: #252139; border-color: #b5a0d063; }
.sim-life > div > span, .inspector-copy p, .hover-card-copy p { color: #d2c7db; }
.sim-half .sim-zone:not(.place-option) { border-color: #c6ab6c70; background-color: #100c1933; }
.sim-half .spell-zones .sim-zone:not(.place-option) { border-color: #b983b670; }
.sim-zone > span { color: #a99bb76b; }
.sim-pile { background: #100d1bcc; border-color: #c4a65b4f; }
.sim-pile.deck { background: repeating-radial-gradient(ellipse at 45% 50%, #151014 0px, #69432b 3px, #2a1b18 5px, #0e0b14 9px); }
.sim-pile.deck :is(small, b) { background: #100c18cc; border-radius: 3px; padding-inline: 3px; }
.sim-hand { background: #17101fbb; border-color: #e8c77730; }
.sim-phasebar { background: #130f1d; border-color: #bca2d22b; }
.sim-phasebar > span { color: #b5a5c1; }
.sim-phasebar .current { color: var(--gold); background: #e8c77718; }
.extra-bridge { background: #100c1866; border-color: #e8c77729; }
.card-action-menu, .card-hover-preview { background: #1c1429f7; border-color: #e8c77777; }
.card-action-menu button { background: #382743; border-color: #e8c77745; }
.card-action-menu button:hover, .card-action-menu button:focus-visible { background: #57405e; }
.card-action-menu button::after { background: #160f23; border-color: #e8c77755; }
.sim-stat { background: #100d19f5; border-color: #e8c77766; color: #fff5d9; }
.sim-stat small { color: #c9b8d8; }
.source-page main { background: #1a142680; padding: 28px!important; border: 1px solid #e8c77729; border-radius: 10px; }
.source-page main a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.source-page main p { color: #c5b9d0; }
.source-page .sim-header > a:last-child { font-size: 12px; }

@media (min-width: 761px) and (max-width: 1050px) {
  .card-grid.featured { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .collection-layout, .pack-grid { grid-template-columns: 1fr; }
  .card-grid.owned { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pack-panel { grid-template-columns: 145px minmax(0, 1fr); gap: 30px; }
  .pack-art { height: 222px; }
}
@media (max-width: 900px) {
  body:not(.duel-mode) .app-shell > header { height: auto; min-height: 80px; padding-block: 16px; flex-wrap: wrap; }
  body:not(.duel-mode) .app-shell > header nav { gap: 16px; flex-wrap: wrap; }
  body:not(.duel-mode) .app-shell > header nav .tag { display: none; }
  .hero { min-height: auto; }
  .store-intro::after { right: 0; }
}
@media (max-width: 600px) {
  body:not(.duel-mode) .app-shell > header { gap: 12px; padding: 14px 20px 10px; }
  body:not(.duel-mode) .app-shell > header .brand { font-size: 13px; letter-spacing: 1.3px; }
  body:not(.duel-mode) .app-shell > header .brand small { font-size: 8px; letter-spacing: 2px; }
  body:not(.duel-mode) .app-shell > header nav { width: 100%; justify-content: space-between; gap: 8px; }
  body:not(.duel-mode) .app-shell > header nav .text-btn { font-size: 11px; min-height: 34px; display: inline-flex; align-items: center; }
  .brand-mark, .brand-mark img { width: 33px; height: 33px; }
  .hero h1 { font-size: clamp(33px, 8.8vw, 46px); }
  .hero-art::before { inset: 0 8%; }
  .hero-note { font-size: 8px; letter-spacing: .05em; }
  .starter:hover { transform: none; }
  .store-header .brand { font-size: 11px; letter-spacing: .08em; gap: 8px; }
  .store-header .brand > img { width: 31px; height: 31px; }
  .store-header .brand small { font-size: 7px; }
  .store-intro h1 { font-size: 31px; }
  .store-intro::after { width: 150px; height: 150px; opacity: .04; }
  .store-tabs { gap: 0; justify-content: space-between; }
  .store-tabs button { padding: 13px 9px; font-size: 12px; }
  .earn-note > span { width: 38px; height: 38px; font-size: 26px; }
  .pack-art b { width: 55px; height: 55px; }
  .pack-art strong { font-size: 12px; }
  .setup-copy::before { width: 60px; height: 60px; margin-bottom: 18px; }
  .sim-brand > img { width: 27px; height: 27px; }
  body:not(:has(.reference-layout)) .sim-header { min-height: 64px; height: auto; padding-block: 12px; flex-wrap: wrap; gap: 12px; }
  body:not(:has(.reference-layout)) .sim-brand { font-size: 11px; }
  body:not(:has(.reference-layout)) .header-tools { gap: 18px; }
  body:not(:has(.reference-layout)) .header-tools button { font-size: 11px; min-height: 32px; }
  .core-tags span { font-size: 9px; }
  .source-page main { margin: 24px 12px!important; padding: 20px!important; }
}
@media (max-width: 480px) {
  .deck-presets { grid-template-columns: 1fr; }
  .deck-preset { padding: 12px; min-height: 96px; gap: 16px; }
  .deck-preset b { font-size: 14px; }
  .deck-preset small { font-size: 12px; line-height: 1.6; }
  .deck-preset > span { width: 48px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none!important; transition: none!important; }
}

/* Duelists use the same local character portraits as campaign encounters. */
.reference-layout .sim-life::before{display:none}
.reference-layout .duelist-avatar{width:58px;height:58px;flex-shrink:0;border:1px solid #b5a0d063;border-radius:7px;background:radial-gradient(ellipse at bottom,#59416c,#252139);box-shadow:0 3px 12px #0003}
.reference-layout .duelist-avatar>img{object-fit:cover;object-position:center 20%}
.reference-layout .duelist-avatar>.art-fallback{display:grid;place-items:center;color:var(--gold);font:16px 'Cinzel',serif}
.reference-layout .duelist-avatar.art-ready>.art-fallback{display:none}
@media(max-width:1100px){.reference-layout .duelist-avatar{width:40px;height:40px}}
@media(max-width:759px){.reference-layout .duelist-avatar{width:30px;height:30px}.reference-layout .duelist-avatar>.art-fallback{font-size:10px}}
@media(max-height:550px){.reference-layout .duelist-avatar{width:24px;height:24px}}

/* Awakening belongs to an individual visible copy, independently of its rarity.
   Only the border layer pulses: artwork, hit targets and layout stay still. */
.awakened-card{position:relative;isolation:isolate}
.awakened-card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:none;border-radius:inherit;border:1px solid #fff1bd;box-shadow:inset 0 0 4px #fff0ba99,0 0 4px 1px #f7d780b3,0 0 12px 2px #dfb4ff70;opacity:.8;animation:awakening-border-pulse 3.8s ease-in-out infinite}
.card-art.awakened-card{overflow:visible}
.card-art.awakened-card>img{border-radius:inherit}
@keyframes awakening-border-pulse{0%,100%{opacity:.6}50%{opacity:1}}
:root[data-card-motion="off"] .awakened-card::after{animation:none;opacity:.85}
@media(prefers-reduced-motion:reduce){.awakened-card::after{animation:none;opacity:.85}}