:root {
  color-scheme: dark;
  --ink: #f7f0de;
  --muted: #aaa495;
  --paper: #111713;
  --panel: #19211b;
  --panel-2: #202a22;
  --line: #354139;
  --acid: #b7f34a;
  --ember: #ff7849;
  --gold: #e8bb55;
  --shadow: 0 22px 55px rgb(0 0 0 / 35%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
html.record-dialog-open, body.record-dialog-open { overflow: hidden; overscroll-behavior: none; }
.read-only-banner { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 20px; border-bottom: 1px solid #6d743f; background: #292d17; color: #dce6c6; font-size: .72rem; line-height: 1.45; }
.read-only-banner strong { flex: none; color: var(--acid); letter-spacing: .04em; text-transform: uppercase; }
.read-only-banner span { min-width: 0; }
.read-only-banner code { padding: 2px 5px; border-radius: 3px; background: #11170e; color: #fff; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.masthead { max-width: 1480px; margin: auto; padding: 38px 34px 26px; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.eyebrow { margin: 0 0 9px; color: var(--acid); font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(3rem, 6vw, 5.35rem); line-height: .87; letter-spacing: -.055em; }
h1 span { color: var(--ember); font-style: italic; font-weight: 400; }
.lede { max-width: 610px; margin: 22px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.collection-count { flex: none; width: 105px; height: 105px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-content: center; text-align: center; background: #151d17; box-shadow: inset 0 0 0 7px var(--paper); }
.collection-count strong { display: block; color: var(--acid); font-family: Georgia, serif; font-size: 2.35rem; line-height: 1; }
.collection-count span { color: var(--muted); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
main { max-width: 1480px; margin: auto; padding: 0 34px 150px; }
.view-switcher { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 12px; padding: 1px; border: 1px solid var(--line); border-radius: 5px; background: var(--line); overflow: hidden; }
.view-switcher button { min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 11px; padding: 0 22px; border: 0; border-bottom: 3px solid transparent; background: #18201a; color: var(--muted); font-family: Georgia, serif; font-size: 1.05rem; font-weight: 500; }
.view-switcher button span { color: #6f786f; font: 800 .6rem Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; }
.view-switcher button b { min-width: 22px; padding: 2px 6px; border-radius: 100px; background: #2d352e; color: var(--muted); font-size: .6rem; }
.view-switcher button:hover { background: #202922; color: var(--ink); }
.view-switcher button.active { border-bottom-color: var(--acid); background: #232d25; color: var(--acid); }
.view-switcher button.active b { background: var(--acid); color: #17200f; }
.controls { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: minmax(210px, 2fr) repeat(6, minmax(105px, 1fr)); gap: 10px; padding: 14px; border: 1px solid var(--line); background: rgb(17 23 19 / 92%); backdrop-filter: blur(16px); box-shadow: 0 12px 30px rgb(0 0 0 / 18%); }
label span { display: block; margin: 0 0 6px 3px; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
input, select { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 3px; outline: none; background: var(--panel); color: var(--ink); padding: 0 11px; }
input:focus, select:focus { border-color: var(--acid); box-shadow: 0 0 0 2px rgb(183 243 74 / 13%); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.active-filters { min-height: 46px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 530px), 1fr)); gap: 18px; align-items: start; }
.gallery.roster-view { grid-template-columns: repeat(var(--grid-columns, 4), minmax(0, 1fr)); gap: 13px; }
.roster-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); transition: transform .16s ease, border-color .16s ease; }
.roster-card:hover { transform: translateY(-3px); border-color: #667066; }
.roster-card.v2-no-reference { border-color: #5a5132; }
.roster-card.selected { border-color: #617a42; }
.roster-card.no-default, .roster-card.unavailable { border-color: #574438; }
.roster-image { position: relative; width: 100%; aspect-ratio: 1; display: block; border: 0; padding: 10px; overflow: hidden; background-color: #d9d5c8; background-image: linear-gradient(45deg, #c6c1b3 25%, transparent 25%), linear-gradient(-45deg, #c6c1b3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c6c1b3 75%), linear-gradient(-45deg, transparent 75%, #c6c1b3 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; }
.roster-image img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 7px 4px rgb(0 0 0 / 14%)); transition: transform .18s ease; }
.no-default-image { width: 100%; height: 100%; display: grid; place-content: center; padding: 20px; background: repeating-linear-gradient(135deg, rgb(24 32 26 / 92%), rgb(24 32 26 / 92%) 11px, rgb(27 36 29 / 92%) 11px, rgb(27 36 29 / 92%) 22px); color: var(--muted); text-align: center; }
.no-default-image strong { color: var(--gold); font: 500 1rem Georgia, serif; }
.no-default-image small { margin-top: 7px; font-size: .62rem; }
.roster-card:hover .roster-image img { transform: scale(1.035); }
.alternate-badge { position: absolute; right: 8px; bottom: 8px; padding: 5px 8px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 100px; background: rgb(17 23 19 / 88%); color: var(--ink); font-size: .58rem; font-weight: 800; box-shadow: 0 3px 10px rgb(0 0 0 / 22%); }
.roster-card-body { padding: 12px 13px 14px; }
.canonical-status { margin: 0 0 5px; overflow: hidden; color: var(--muted); font-size: .57rem; font-weight: 900; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.canonical-status.v1-reference { color: #a7b4a9; }
.canonical-status.selected { color: var(--acid); }
.canonical-status.v2-no-reference { color: var(--gold); }
.canonical-status.no-default, .canonical-status.unavailable { color: var(--ember); }
.roster-card h2 { margin: 0 0 10px; overflow: hidden; font: 500 1.25rem Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.roster-meta { display: flex; justify-content: space-between; gap: 7px; color: var(--muted); font-size: .62rem; }
.gallery.review-view { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gallery.review-view.review-cols-1 { grid-template-columns: minmax(0, 900px); justify-content: center; }
.gallery.review-view.review-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gallery.review-view .record-card { box-shadow: 0 18px 45px rgb(0 0 0 / 18%); }
.gallery.review-view .record-header { min-height: 94px; padding-inline: 22px; }
.gallery.review-view .record-header h2 { font-size: 1.45rem; }
.gallery.review-view .variant-image { max-height: 390px; }
.registry-layout { grid-template-columns: 235px minmax(0, 1fr); min-height: 650px; border: 1px solid var(--line); background: var(--panel); }
.registry-layout:not([hidden]) { display: grid; }
.domain-nav { padding: 18px 10px; border-right: 1px solid var(--line); background: #151c17; }
.domain-nav > .eyebrow { padding: 5px 10px 15px; }
.domain-nav button { width: 100%; display: grid; grid-template-columns: 25px 1fr; gap: 2px 8px; padding: 13px 10px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--muted); text-align: left; }
.domain-nav button > span { grid-row: span 2; color: #6f786f; font-size: .56rem; font-weight: 900; letter-spacing: .08em; }
.domain-nav button strong { color: inherit; font: 500 .9rem Georgia, serif; }
.domain-nav button small { overflow: hidden; color: #747d75; font-size: .57rem; line-height: 1.35; text-overflow: ellipsis; }
.domain-nav button:hover { background: #1b241d; color: var(--ink); }
.domain-nav button.active { border-left-color: var(--acid); background: #202a22; color: var(--acid); }
.domain-header { min-height: 145px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 27px 30px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #202a22, #19211b); }
.domain-header h2 { margin: 0; font: 500 2.2rem Georgia, serif; }
.domain-header p:last-child { max-width: 690px; margin: 8px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.source-badge { flex: none; padding: 7px 9px; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); font-size: .6rem; }
.world-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 25px 27px; border: 1px solid var(--line); background: var(--line); }
.world-metrics article { padding: 20px; background: var(--panel); }
.world-metrics strong { display: block; font: 500 2.1rem Georgia, serif; }
.world-metrics span { color: var(--muted); font-size: .65rem; }
.world-metrics .warning strong { color: var(--gold); }
.system-flow, .type-matchups, .rarity-budgets, .calculation-pipeline, .type-bases, .definitions-section, .modifier-workspace { margin: 30px 27px; }
.system-flow > div { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px; }
.system-flow article { padding: 16px; border: 1px solid var(--line); background: #1b241d; }
.system-flow article span { color: var(--acid); font-size: .58rem; font-weight: 900; }
.system-flow article strong { display: block; margin: 7px 0 4px; font: 500 1rem Georgia, serif; }
.system-flow article small { color: var(--muted); font-size: .6rem; line-height: 1.4; }
.system-flow > div > b { align-self: center; color: #667067; }
.distribution-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 12px; margin: 25px 27px; }
.distribution-card { padding: 18px; border: 1px solid var(--line); background: #19221b; }
.distribution-card h3 { margin: 0 0 17px; font: 500 1.2rem Georgia, serif; }
.distribution-row { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr 28px; align-items: center; gap: 8px; margin: 8px 0; font-size: .66rem; }
.distribution-row > i { height: 6px; overflow: hidden; border-radius: 100px; background: #303a32; }
.distribution-row b { display: block; height: 100%; background: var(--ember); }
.distribution-row strong { text-align: right; }
.attention-panel { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 25px 27px 35px; padding: 20px; border: 1px solid #645b36; background: #282719; }
.attention-panel h3 { margin: 0; font: 500 1.25rem Georgia, serif; }
.attention-items { display: flex; flex-wrap: wrap; gap: 8px; }
.attention-items span { padding: 7px 9px; border: 1px solid #5a5438; border-radius: 100px; color: #c5bfa3; font-size: .63rem; }
.attention-items strong { color: var(--gold); }
.type-matchups .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.type-matchups .section-heading > p:last-child { max-width: 520px; margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; text-align: right; }
.matchup-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.matchup-legend span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.matchup-legend b { font-size: .7rem; }
.matchup-legend .strong { border-color: rgb(93 163 75 / 58%); background: rgb(58 124 48 / 22%); color: #b7f38f; }
.matchup-legend .resisted { border-color: rgb(198 65 53 / 58%); background: rgb(153 46 38 / 22%); color: #ff9e8e; }
.matchup-scroll { overflow: auto; border: 1px solid #475248; background: #151c17; box-shadow: inset 0 0 30px rgb(0 0 0 / 18%); }
.matchup-matrix { width: 100%; min-width: 790px; border-collapse: separate; border-spacing: 2px; padding: 2px; font-size: .66rem; }
.matchup-matrix caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.matchup-matrix th, .matchup-matrix td { height: 54px; min-width: 78px; padding: 5px; text-align: center; }
.matchup-matrix thead th { position: sticky; top: 0; z-index: 2; background: #202a22; }
.matchup-matrix tbody th { position: sticky; left: 0; z-index: 1; min-width: 118px; background: #202a22; text-align: left; }
.matchup-axis { left: 0; z-index: 3 !important; width: 118px; min-width: 118px !important; background: linear-gradient(32deg, #202a22 49%, #536158 49.5%, #536158 50.5%, #202a22 51%) !important; }
.matchup-axis span, .matchup-axis b { position: absolute; color: #b7beb8; font-size: .5rem; letter-spacing: .04em; text-transform: uppercase; }
.matchup-axis span { top: 7px; right: 7px; }
.matchup-axis b { bottom: 7px; left: 7px; }
.matchup-type { --matchup-color: #89928b; display: inline-flex; align-items: center; justify-content: center; min-height: 25px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--matchup-color) 72%, #fff 8%); border-radius: 100px; background: color-mix(in srgb, var(--matchup-color) 28%, #172019); color: color-mix(in srgb, var(--matchup-color) 48%, #fff 52%); font-size: .57rem; font-weight: 900; letter-spacing: .02em; line-height: 1.05; text-align: center; text-transform: uppercase; }
.matchup-type-cigarette { --matchup-color: #d8b66e; }
.matchup-type-cigarillo { --matchup-color: #d58a4c; }
.matchup-type-cigar { --matchup-color: #a96c36; }
.matchup-type-mary-j { --matchup-color: #7fc95f; }
.matchup-type-pipe { --matchup-color: #c77769; }
.matchup-type-vape { --matchup-color: #71d6e8; }
.matchup-type-paraphernalia { --matchup-color: #bd7bd2; }
.matchup-matrix td { border: 1px solid #313b33; background: #1a231c; }
.matchup-matrix td strong { display: block; font: 900 .82rem/1 Inter, sans-serif; }
.matchup-matrix td small { display: block; margin-top: 4px; font-size: .48rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.matchup-matrix td.strong { border-color: #5a9b49; background: linear-gradient(145deg, #254824, #1d361e); color: #b7f38f; }
.matchup-matrix td.resisted { border-color: #a84a40; background: linear-gradient(145deg, #512823, #3a211e); color: #ff9e8e; }
.matchup-matrix td.neutral { color: #778079; }
.matchup-matrix td.neutral small { opacity: .5; }
.matchup-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.matchup-notes article { display: grid; grid-template-columns: 112px 1fr; gap: 5px 10px; align-items: center; padding: 10px; border: 1px solid var(--line); background: #19221b; }
.matchup-notes article > .matchup-type { grid-row: span 2; }
.matchup-notes p { margin: 0; color: #c8c5ba; font-size: .62rem; }
.matchup-notes p b { color: #ffac99; }
.matchup-notes small { color: var(--muted); font-size: .55rem; line-height: 1.35; }
.taxonomy-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 27px; }
.taxonomy-groups article { border: 1px solid var(--line); background: #19221b; }
.taxonomy-groups header { display: flex; justify-content: space-between; gap: 15px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.taxonomy-groups h3 { margin: 0; font: 500 1.15rem Georgia, serif; }
.taxonomy-groups header span { color: var(--muted); font-size: .6rem; }
.taxonomy-groups article > div { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; }
.taxonomy-groups article > div span { padding: 5px 8px; border: 1px solid #3b473e; border-radius: 100px; background: #202a22; color: #c9c5ba; font-size: .62rem; }
.section-heading { margin-bottom: 18px; }
.section-heading h3 { margin: 0; font: 500 1.7rem Georgia, serif; }
.definition-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.definition-list article { padding: 15px; border: 1px solid var(--line); background: #19221b; }
.definition-list article > div { display: flex; justify-content: space-between; gap: 10px; }
.definition-list article > div strong { font: 500 1rem Georgia, serif; }
.definition-list article > div span { color: var(--acid); font-size: .58rem; text-transform: uppercase; }
.definition-list p { min-height: 40px; color: #c6c2b7; font-size: .7rem; line-height: 1.5; }
.definition-list small { display: block; margin-top: 5px; color: var(--muted); font-size: .6rem; }
.rarity-budgets > div:last-child { height: 180px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 8px; }
.rarity-budgets article { position: relative; height: 100%; display: grid; place-content: end center; padding: 15px; overflow: hidden; border: 1px solid var(--line); background: #19221b; text-align: center; }
.rarity-budgets article i { position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(0deg, rgb(255 120 73 / 30%), rgb(232 187 85 / 8%)); }
.rarity-budgets article span, .rarity-budgets article strong { position: relative; z-index: 1; }
.rarity-budgets article span { color: var(--muted); font-size: .65rem; }
.rarity-budgets article strong { font: 500 1.8rem Georgia, serif; }
.calculation-pipeline ol { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--line); }
.calculation-pipeline li { min-width: 0; padding: 13px; background: #19221b; }
.calculation-pipeline li > span { color: var(--acid); font-size: .6rem; font-weight: 900; }
.calculation-pipeline li strong { display: block; min-height: 32px; margin-top: 7px; font: 500 .85rem Georgia, serif; }
.calculation-pipeline li p { min-height: 65px; color: var(--muted); font-size: .58rem; line-height: 1.4; }
.calculation-pipeline li small { display: block; min-height: 52px; color: #a9a598; font-size: .55rem; line-height: 1.35; }
.calculation-pipeline code { display: block; margin-top: 9px; overflow: hidden; color: var(--gold); font-size: .52rem; text-overflow: ellipsis; }
.matrix-scroll { overflow: auto; border: 1px solid var(--line); }
.stat-matrix { width: 100%; border-collapse: collapse; font-size: .68rem; }
.stat-matrix th, .stat-matrix td { min-width: 72px; padding: 10px 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.stat-matrix thead th { position: sticky; top: 0; z-index: 2; background: #242e26; color: var(--muted); font-size: .57rem; text-transform: uppercase; }
.stat-matrix tbody th { position: sticky; left: 0; z-index: 1; min-width: 145px; background: #1e2820; color: var(--ink); text-align: left; font: 500 .78rem Georgia, serif; }
.stat-matrix td.positive { background: rgb(183 243 74 / calc(.04 + var(--intensity) * .18)); color: #d6f4a4; }
.stat-matrix td.negative { background: rgb(255 120 73 / calc(.04 + var(--intensity) * .18)); color: #ffb39a; }
.stat-matrix td.neutral { color: #697269; }
.modifier-tabs { display: flex; gap: 2px; padding: 15px 27px 0; overflow-x: auto; }
.modifier-tabs button { flex: 1; min-width: 120px; min-height: 42px; border: 1px solid var(--line); background: #19221b; color: var(--muted); font-size: .67rem; font-weight: 800; }
.modifier-tabs button.active { border-color: var(--acid); background: #26331d; color: var(--acid); }
.modifier-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.modifier-heading h3 { margin: 0; font: 500 1.5rem Georgia, serif; }
.modifier-heading label { width: 230px; }
.modifier-heading input { height: 38px; font-size: .7rem; }
.sheet-nav { padding: 20px 12px; border-right: 1px solid var(--line); background: #151c17; }
.sheet-nav > .eyebrow { padding-inline: 7px; }
.registry-search { display: block; margin: 17px 0 12px; }
.registry-search input { height: 38px; font-size: .75rem; }
.sheet-group { margin: 18px 7px 6px; color: #727b73; font-size: .58rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.sheet-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 8px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--muted); text-align: left; font-size: .72rem; }
.sheet-button span { min-width: 23px; padding: 2px 5px; border-radius: 100px; background: #242c26; color: #8c958d; text-align: center; font-size: .55rem; }
.sheet-button:hover { background: #1b241d; color: var(--ink); }
.sheet-button.active { border-left-color: var(--acid); background: #202a22; color: var(--acid); }
.registry-content { min-width: 0; }
.registry-header { min-height: 130px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 24px 27px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #202a22, #19211b); }
.registry-header h2 { margin: 0; font: 500 2rem Georgia, serif; }
.registry-header p:last-child { max-width: 650px; margin: 8px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.sheet-count { flex: none; color: var(--acid); font: 500 1.2rem Georgia, serif; }
.table-scroll { max-height: calc(100vh - 320px); min-height: 500px; overflow: auto; }
.registry-table, #registryTable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .72rem; }
#registryTable th { position: sticky; z-index: 2; top: 0; min-width: 110px; padding: 11px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid #566157; background: #242e26; color: var(--ink); text-align: left; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
#registryTable th:first-child, #registryTable td:first-child { position: sticky; left: 0; z-index: 1; min-width: 56px; width: 56px; color: #737c74; text-align: right; }
#registryTable th:first-child { z-index: 3; }
#registryTable td { max-width: 330px; padding: 9px 12px; border-right: 1px solid #2b352d; border-bottom: 1px solid #2b352d; background: var(--panel); color: #d3cfc3; line-height: 1.4; vertical-align: middle; }
#registryTable tbody tr:hover td { background: #202a22; }
#registryTable td.formula-cell { color: #c7d7b1; }
.formula-mark { display: inline-block; margin-left: 6px; color: var(--gold); font: italic 700 .58rem Georgia, serif; }
.roster-asset { width: 48px; height: 48px; padding: 3px; border: 1px solid var(--line); border-radius: 3px; background: #d9d5c8; object-fit: contain; image-rendering: pixelated; cursor: pointer; }
.registry-loading { padding: 90px 30px; color: var(--muted); text-align: center; }
.record-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); transition: border-color .18s ease, transform .18s ease; }
.record-card:hover { transform: translateY(-2px); border-color: #5c685e; }
.record-card.record-decided { border-color: #688344; box-shadow: inset 0 3px 0 var(--acid); }
.record-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 17px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #202a22, #19211b); }
.record-header h2 { margin: 3px 0 0; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 500; }
.record-header .chip { flex: none; }
.card-kicker { margin: 0; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.version-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.version-grid.single-version { grid-template-columns: repeat(2, minmax(0, 1fr)); background: #151c17; }
.version-grid.single-version::after { display: none; }
.version-strip.many { position: relative; }
.version-strip-toolbar { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.version-strip-toolbar > span { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); padding: 5px 8px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 100px; background: rgb(18 25 20 / 88%); color: #d4d9d1; font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.version-strip-toolbar > div { display: contents; }
.version-strip-toolbar button { position: absolute; top: 50%; width: 32px; height: 42px; transform: translateY(-50%); border: 1px solid rgb(255 255 255 / 28%); border-radius: 4px; background: rgb(18 25 20 / 82%); color: var(--ink); cursor: pointer; pointer-events: auto; box-shadow: 0 3px 12px rgb(0 0 0 / 25%); }
.version-strip-toolbar button:first-child { left: 15px; }
.version-strip-toolbar button:last-child { right: 15px; }
.version-grid.many-versions { display: flex; gap: 1px; padding: 0; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-color: #56614e #171e18; }
.version-grid.many-versions::after { display: none; }
.version-grid.many-versions .variant-panel { flex: 0 0 calc((100% - 1px) / 2); scroll-snap-align: start; }
.version-grid::after { content: "same record"; position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); padding: 4px 7px; border: 1px solid var(--line); border-radius: 100px; background: var(--panel); color: #8f998f; font-size: .52rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.variant-panel { min-width: 0; background: #182019; transition: box-shadow .18s ease; }
.stale-asset-badge { position: absolute; right: 8px; bottom: 8px; padding: 5px 7px; border: 1px solid #8a5a36; border-radius: 3px; background: rgb(36 24 14 / 90%); color: var(--gold); font-size: .55rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.legacy-image-note { margin: 0; padding: 11px 14px; border-top: 1px solid #654b32; background: #211b14; color: #c4ad8d; font-size: .65rem; line-height: 1.45; }
.variant-panel.preferred { position: relative; z-index: 2; box-shadow: inset 0 0 0 2px var(--acid); }
.version-banner { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 11px; border-bottom: 1px solid var(--line); }
.version-banner strong { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.version-banner span { overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.v1 .version-banner { background: #242a26; border-top: 3px solid #a9a89f; }
.v1 .version-banner strong { color: #deddd4; }
.v2 .version-banner { background: #282719; border-top: 3px solid var(--gold); }
.v2 .version-banner strong { color: var(--gold); }
.v3 .version-banner, .v4 .version-banner { background: #1c292a; border-top: 3px solid #6acbd0; }
.variant-panel.preferred .version-banner { background: #26331d; }
.variant-panel.preferred .version-banner span { color: var(--acid); font-weight: 800; }
.variant-image { position: relative; width: 100%; aspect-ratio: 1; display: block; border: 0; padding: 12px; background-color: #d9d5c8; background-image: linear-gradient(45deg, #c6c1b3 25%, transparent 25%), linear-gradient(-45deg, #c6c1b3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c6c1b3 75%), linear-gradient(-45deg, transparent 75%, #c6c1b3 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; }
.variant-image img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 7px 4px rgb(0 0 0 / 14%)); transition: transform .18s ease; }
.variant-image:hover img { transform: scale(1.04); }
.variant-meta { min-height: 34px; display: flex; justify-content: space-between; gap: 5px; padding: 9px 11px 7px; color: var(--muted); font-size: .58rem; }
.variant-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.variant-actions { display: grid; grid-template-columns: auto 1fr; gap: 6px; padding: 0 9px 10px; }
.variant-actions button { min-height: 35px; border-radius: 3px; font-size: .68rem; font-weight: 800; }
.inspect-button { padding: 0 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.prefer-button { border: 1px solid #657346; background: #242d1f; color: var(--acid); }
.preferred .prefer-button { background: var(--acid); color: #17200f; }
.missing-version { min-height: 100%; }
.missing-version > div:last-child { min-height: 260px; display: grid; place-content: center; padding: 30px; text-align: center; background: repeating-linear-gradient(135deg, #1a211b, #1a211b 10px, #1c241e 10px, #1c241e 20px); }
.missing-version > div:last-child strong { color: #777f78; font: 500 1rem Georgia, serif; }
.missing-version > div:last-child span { max-width: 170px; margin-top: 7px; color: #626b63; font-size: .68rem; line-height: 1.45; }
.card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); transition: transform .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-3px); border-color: #667066; }
.card.selected { border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid); }
.image-button { width: 100%; aspect-ratio: 1; display: block; border: 0; padding: 15px; background-color: #d9d5c8; background-image: linear-gradient(45deg, #c6c1b3 25%, transparent 25%), linear-gradient(-45deg, #c6c1b3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c6c1b3 75%), linear-gradient(-45deg, transparent 75%, #c6c1b3 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; }
.image-button img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 4px rgb(0 0 0 / 16%)); transition: transform .2s ease; }
.card:hover .image-button img { transform: scale(1.035); }
.card-body { padding: 15px; }
.card-kicker { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .63rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.card h2 { margin: 8px 0 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { padding: 4px 7px; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); font-size: .65rem; }
.chip.approved { border-color: #638848; color: var(--acid); }
.compare-toggle { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; background: rgb(17 23 19 / 78%); color: white; font-weight: 900; box-shadow: 0 3px 10px rgb(0 0 0 / 30%); }
.selected .compare-toggle { background: var(--acid); color: #14200d; border-color: var(--acid); }
.empty { padding: 90px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; margin-bottom: 16px; color: var(--ink); font-family: Georgia, serif; font-size: 1.5rem; }
.empty button { border: 0; border-bottom: 1px solid var(--acid); background: none; color: var(--acid); }
.compare-tray { position: fixed; z-index: 10; left: 50%; bottom: 18px; width: min(760px, calc(100% - 28px)); transform: translateX(-50%); padding: 12px 14px; border: 1px solid #59645a; border-radius: 7px; background: rgb(25 33 27 / 96%); backdrop-filter: blur(18px); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.compare-tray .eyebrow { margin-bottom: 5px; }
.compare-tray strong { font-family: Georgia, serif; font-size: 1rem; font-weight: 500; }
.compare-thumbs { display: flex; gap: 5px; }
.compare-thumbs img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; border-radius: 3px; background: #d9d5c8; }
.tray-actions { display: flex; align-items: center; gap: 8px; }
.tray-actions span { color: var(--muted); font-size: .72rem; }
.button { min-height: 38px; padding: 0 15px; border: 1px solid var(--acid); border-radius: 3px; background: var(--acid); color: #15200e; font-weight: 800; }
.button:disabled { opacity: .35; cursor: not-allowed; }
.button.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
dialog { width: min(1560px, calc(100% - 32px)); max-height: calc(100vh - 24px); padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid #4d594f; border-radius: 7px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
dialog.detail-dialog { overflow: hidden; }
dialog::backdrop { background: rgb(4 8 5 / 78%); backdrop-filter: blur(5px); }
.dialog-close { position: sticky; z-index: 4; float: right; top: 12px; right: 12px; width: 38px; height: 38px; margin: 12px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.4rem; }
.record-loading { min-height: 500px; display: grid; place-content: center; gap: 12px; color: var(--muted); text-align: center; }
.record-loading span { width: 28px; height: 28px; margin: auto; border: 2px solid var(--line); border-top-color: var(--acid); border-radius: 50%; animation: spin .7s linear infinite; }
.record-shell { clear: both; min-height: 650px; }
.detail-dialog .record-shell { min-width: 0; min-height: 0; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; }
.detail-dialog .record-admin-header, .detail-dialog .record-tabs { flex: none; }
.detail-dialog .record-tab-body { flex: 1 1 auto; min-height: 0; max-height: none; padding-top: 12px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.detail-dialog .record-admin-header { padding: 9px 24px; gap: 16px; }
.detail-dialog .record-admin-header h2 { font-size: 1.35rem; }
.detail-dialog .record-admin-header .eyebrow { margin-bottom: 1px; font-size: .6rem; }
.detail-dialog .record-admin-header > div > p:last-child { margin-top: 1px; font-size: .66rem; }
.detail-dialog .record-tabs button { min-height: 34px; font-size: .66rem; }
.detail-dialog .card-template-controls { margin-bottom: 10px; padding: 8px 14px; }
.detail-dialog .card-template-controls h3 { font-size: .92rem; }
.detail-dialog .card-template-controls p:not(.eyebrow) { display: none; }
.record-admin-header { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 14px 28px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #202a22, #19211b); }
.record-admin-header h2 { margin: 0; font: 500 1.8rem Georgia, serif; }
.record-admin-header .eyebrow { margin-bottom: 4px; }
.record-admin-header > div > p:last-child { margin: 4px 0 0; color: var(--muted); font-size: .72rem; }
.record-state { flex: none; padding: 7px 10px; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.record-state.v2-no-reference { border-color: #6e6137; color: var(--gold); }
.record-state.selected { border-color: #698a45; color: var(--acid); }
.record-tabs { position: sticky; z-index: 3; top: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); background: rgb(25 33 27 / 96%); backdrop-filter: blur(12px); }
.record-tabs button { min-height: 44px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 800; }
.record-tabs button:hover { color: var(--ink); }
.record-tabs button.active { border-bottom-color: var(--acid); color: var(--acid); }
.record-tab-body { padding: 20px 28px 36px; }
.record-overview { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr); gap: 30px; }
.record-canonical-art { position: relative; min-height: 480px; display: grid; place-items: center; padding: 25px; background-color: #d9d5c8; background-image: linear-gradient(45deg, #c6c1b3 25%, transparent 25%), linear-gradient(-45deg, #c6c1b3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c6c1b3 75%), linear-gradient(-45deg, transparent 75%, #c6c1b3 75%); background-size: 22px 22px; background-position: 0 0, 0 11px, 11px -11px, -11px 0; }
.record-canonical-art img { width: 100%; max-height: 440px; object-fit: contain; image-rendering: pixelated; }
.record-canonical-art > span { position: absolute; left: 12px; bottom: 12px; padding: 6px 9px; border-radius: 100px; background: rgb(17 23 19 / 88%); color: var(--ink); font-size: .62rem; font-weight: 800; }
.record-canonical-art > span.v2-no-reference { color: var(--gold); }
.record-canonical-art > span.selected { color: var(--acid); }
.record-summary { padding: 10px 0; }
.identity-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.identity-chips span { padding: 12px; border: 1px solid var(--line); background: #1c251e; font-size: .82rem; }
.identity-chips small { display: block; margin-bottom: 3px; color: var(--muted); font-size: .55rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.stat-heading { margin-top: 28px; }
.stat-list { display: grid; gap: 10px; }
.stat-list > div { display: grid; grid-template-columns: 75px 1fr 32px; align-items: center; gap: 9px; font-size: .72rem; }
.stat-list > div > div { height: 7px; overflow: hidden; border-radius: 100px; background: #303a32; }
.stat-list i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--gold)); }
.stat-list strong { text-align: right; }
.record-assets-action { margin-top: 28px; }
.record-summary .button.ghost.record-assets-action { margin-right: 8px; }
.card-template-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 200px) minmax(130px, 180px); gap: 12px; align-items: center; min-width: 0; margin-bottom: 14px; padding: 10px 16px; border: 1px solid #47543f; background: linear-gradient(120deg, #182019, #202a22); }
.card-template-controls .eyebrow { display: none; }
.card-template-controls h3 { margin: 0 0 3px; font: 500 1.05rem Georgia, serif; }
.card-template-controls p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.4; }
.card-template-controls label, .card-template-controls select { min-width: 0; width: 100%; }
.card-template-controls select { height: 38px; max-width: 100%; }
.card-preview-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(360px, 1fr); gap: 28px; align-items: start; min-width: 0; }
.cigimon-tcg-card { position: relative; isolation: isolate; overflow: hidden; padding: 18px; border: 7px solid #d8ad4f; border-radius: 22px; background: radial-gradient(circle at 18% 10%, #3c4b36 0 22%, transparent 42%), linear-gradient(145deg, #2a2017, #111713 55%, #2b341f); box-shadow: 0 28px 70px rgb(0 0 0 / 38%), inset 0 0 0 2px rgb(255 255 255 / 16%); }
.cigimon-tcg-card::before { content: ""; position: absolute; inset: 8px; z-index: -1; border: 1px solid rgb(255 255 255 / 18%); border-radius: 14px; pointer-events: none; }
.tcg-card-shine { position: absolute; inset: -35%; z-index: -1; background: conic-gradient(from 120deg, transparent, rgb(183 243 74 / 12%), transparent, rgb(255 120 73 / 14%), transparent); opacity: .75; transform: rotate(-12deg); }
.card-design-ledger { border-color: #c9b98c; border-radius: 12px; background: linear-gradient(135deg, #2e2a1f, #171610 54%, #2a2418); box-shadow: 0 28px 70px rgb(0 0 0 / 38%), inset 0 0 0 2px rgb(245 224 176 / 18%); }
.card-design-ledger::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; background: repeating-linear-gradient(0deg, transparent, transparent 23px, #f4d78a 24px), repeating-linear-gradient(90deg, transparent, transparent 23px, #f4d78a 24px); pointer-events: none; }
.card-design-ledger .tcg-art-frame { border-color: #6f5a35; border-radius: 4px; background: linear-gradient(135deg, #d8c79d, #a89565); }
.card-design-ledger .tcg-stat-board { border: 1px solid rgb(232 187 85 / 22%); border-radius: 3px; background: rgb(20 18 13 / 70%); }
.card-design-neon-foil { border-color: #7de7ff; background: radial-gradient(circle at 25% 12%, rgb(183 243 74 / 24%), transparent 32%), linear-gradient(145deg, #111713, #16112c 52%, #06303a); box-shadow: 0 28px 70px rgb(0 0 0 / 42%), 0 0 38px rgb(125 231 255 / 18%), inset 0 0 0 2px rgb(255 255 255 / 20%); }
.card-design-neon-foil .tcg-card-shine { opacity: 1; background: conic-gradient(from 45deg, rgb(125 231 255 / 0), rgb(125 231 255 / 22%), rgb(255 120 73 / 22%), rgb(183 243 74 / 26%), rgb(125 231 255 / 0)); animation: foil-drift 8s linear infinite; }
.card-design-neon-foil .tcg-art-frame { border-color: #7de7ff; background: radial-gradient(circle at 50% 42%, #eaffff 0 14%, #8ecde3 46%, #2f4d72 100%); }
.edition-layer { position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; }
.edition-holo .edition-layer { opacity: .48; mix-blend-mode: screen; background: repeating-linear-gradient(115deg, rgb(125 231 255 / 32%) 0 34px, rgb(255 120 207 / 28%) 34px 68px, rgb(255 233 74 / 24%) 68px 102px, rgb(126 255 158 / 28%) 102px 136px), radial-gradient(circle at 22% 28%, rgb(255 255 255 / 85%) 0 1px, transparent 2.5px), radial-gradient(circle at 68% 62%, rgb(255 255 255 / 75%) 0 1px, transparent 2.5px), radial-gradient(circle at 42% 84%, rgb(255 255 255 / 70%) 0 1px, transparent 2.5px); background-size: 340% 340%, 110px 130px, 150px 170px, 130px 90px; animation: edition-drift 10s linear infinite alternate; }
.edition-first .edition-layer { box-shadow: inset 0 0 64px rgb(64 42 14 / 32%); background: rgb(120 90 40 / 5%); }
.edition-gold .edition-layer { mix-blend-mode: overlay; background: linear-gradient(115deg, transparent 30%, rgb(255 219 130 / 85%) 48%, transparent 66%); background-size: 320% 100%; box-shadow: inset 0 0 0 3px rgb(255 205 96 / 60%), inset 0 0 46px rgb(255 190 80 / 30%); animation: edition-drift 6s ease-in-out infinite alternate; }
@keyframes edition-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.tcg-card-header { min-height: 86px; display: flex; align-items: start; justify-content: space-between; gap: 15px; padding: 8px 8px 13px; }
.tcg-card-header h3 { margin: 0; font: 700 2.1rem/1 Georgia, serif; letter-spacing: -.04em; text-shadow: 0 2px 0 rgb(0 0 0 / 28%); }
.tcg-card-header small { display: block; margin-top: 4px; color: #d8d2bf; font-size: .68rem; }
.tcg-card-header > span { min-width: 74px; padding: 8px 10px; border: 1px solid rgb(255 255 255 / 24%); border-radius: 100px; background: rgb(17 23 19 / 68%); color: var(--gold); text-align: center; font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tcg-type-row, .cigimon-tcg-card footer { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid rgb(255 255 255 / 16%); background: rgb(8 12 9 / 42%); color: #e9e1ce; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tcg-type-row span { color: var(--acid); }
.tcg-art-frame { position: relative; margin: 12px 0; padding: 16px; border: 3px solid #c28b3f; border-radius: 12px; background: radial-gradient(circle at 50% 42%, #f1e2b8 0 18%, #cabd99 48%, #8d7c5b 100%); box-shadow: inset 0 0 28px rgb(0 0 0 / 18%); }
.tcg-art-frame img, .tcg-missing-art { width: 100%; aspect-ratio: 1.05; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 13px 6px rgb(0 0 0 / 25%)); }
.tcg-missing-art { display: grid; place-content: center; color: #534632; font: 700 .85rem Inter, sans-serif; text-transform: uppercase; }
.tcg-art-frame figcaption { position: absolute; right: 12px; bottom: 10px; left: 12px; padding: 5px 8px; border-radius: 3px; background: rgb(17 23 19 / 78%); color: #efe7d3; font-size: .58rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.tcg-tag-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.tcg-tag-strip span { flex: 1 1 auto; padding: 7px 8px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 100px; background: rgb(183 243 74 / 10%); color: #dce8c9; text-align: center; font-size: .61rem; font-weight: 800; }
.tcg-stat-board { display: grid; gap: 7px; padding: 12px; border-radius: 10px; background: rgb(9 13 10 / 55%); }
.tcg-stat-row { display: grid; grid-template-columns: 88px 1fr 34px; align-items: center; gap: 8px; font-size: .72rem; }
.tcg-stat-row span { overflow: hidden; color: #f4ecd9; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.tcg-stat-row i { height: 8px; overflow: hidden; border-radius: 100px; background: rgb(255 255 255 / 13%); }
.tcg-stat-row b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ember), var(--gold), var(--acid)); }
.tcg-stat-row strong { color: var(--acid); text-align: right; }
.cigimon-tcg-card footer { margin-top: 12px; align-items: center; color: #c7b894; font-size: .55rem; font-weight: 700; }
.cigimon-tcg-card footer strong { color: var(--acid); font-size: .72rem; letter-spacing: .08em; }
.card-preview-notes { padding: 20px; border: 1px solid var(--line); background: #171f19; }
.card-preview-notes h3 { margin: 0 0 9px; font: 500 1.8rem Georgia, serif; }
.card-preview-notes p:not(.eyebrow) { margin: 0 0 20px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
@keyframes foil-drift { to { transform: rotate(348deg); } }
.tab-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 25px; }
.tab-intro h3 { margin: 0; font: 500 2rem Georgia, serif; }
.tab-intro > p { max-width: 480px; margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.record-assets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.record-asset-card { overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #182019; }
.record-asset-card.chosen { border-color: #6c8649; box-shadow: inset 0 0 0 1px var(--acid); }
.asset-version { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); text-transform: uppercase; }
.asset-version strong { color: var(--gold); }
.asset-version span { color: var(--muted); font-size: .6rem; }
.asset-art { aspect-ratio: 1; padding: 12px; background: #d9d5c8; }
.asset-art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.asset-facts { display: flex; justify-content: space-between; gap: 5px; padding: 9px 10px; color: var(--muted); font-size: .58rem; }
.asset-card-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 0 9px 9px; }
.asset-card-actions .prefer-button { min-height: 38px; }
.delete-variant { border: 1px solid #74423d; border-radius: 3px; background: #291714; color: #e09a8f; padding: 8px 10px; cursor: pointer; font: inherit; font-size: .6rem; font-weight: 700; }
.delete-variant:hover:not(:disabled) { border-color: var(--ember); background: #3a1c18; color: #ffd0c8; }
.delete-variant:disabled { cursor: not-allowed; opacity: .45; }
.game-data-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.game-data-grid > div { padding: 14px; background: var(--panel); }
.game-data-grid dt { margin-bottom: 5px; color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.game-data-grid dd { margin: 0; font-size: .85rem; }
.generation-list { display: grid; gap: 8px; }
.generation-composer { margin-bottom: 28px; padding: 18px; border: 1px solid #53623d; background: #182019; }
.generation-composer-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.generation-composer-heading h3 { margin: 3px 0 0; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 500; }
.generation-composer-heading label { width: min(260px, 42%); }
.generation-composer label > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.prompt-editor textarea { width: 100%; min-height: 360px; resize: vertical; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: #d4d0c5; padding: 14px; font: .72rem/1.55 ui-monospace, SFMono-Regular, monospace; }
.prompt-editor textarea:focus { outline: 2px solid rgb(183 243 74 / 20%); border-color: var(--acid); }
.prompt-editor small { display: block; margin-top: 6px; color: var(--muted); font-size: .62rem; line-height: 1.4; }
.generation-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.generation-status { min-height: 1.4em; margin: 12px 0 0; color: var(--gold); font-size: .72rem; }
.generation-progress { margin-top: 16px; padding: 15px; border: 1px solid #48543c; border-radius: 4px; background: #111812; }
.generation-progress > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.generation-progress > header > div { display: flex; align-items: center; gap: 9px; }
.generation-progress > header strong { color: #e4e0d5; font-size: .76rem; }
.generation-progress > header time { color: var(--muted); font: .67rem ui-monospace, SFMono-Regular, monospace; }
.generation-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 0 rgb(183 243 74 / 45%); animation: generation-pulse 1.8s infinite; }
.generation-progress.completed .generation-pulse { background: var(--gold); animation: none; }
.generation-progress.failed .generation-pulse { background: var(--ember); animation: none; }
.generation-progress-track { height: 4px; margin: 13px 0 15px; overflow: hidden; border-radius: 2px; background: #293126; }
.generation-progress-track i { display: block; width: 38%; height: 100%; background: linear-gradient(90deg, transparent, var(--acid), transparent); animation: generation-track 1.5s ease-in-out infinite; }
.generation-progress.completed .generation-progress-track i { width: 100%; background: var(--gold); animation: none; }
.generation-progress.failed .generation-progress-track i { background: var(--ember); animation: none; }
.generation-progress ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 0; padding: 0; list-style: none; }
.generation-progress li { display: flex; align-items: center; gap: 5px; color: #687064; font-size: .58rem; text-transform: uppercase; letter-spacing: .04em; }
.generation-progress li span { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; border: 1px solid #41483e; border-radius: 50%; font-size: .55rem; }
.generation-progress li.done, .generation-progress li.active { color: #cbd3c2; }
.generation-progress li.done span { border-color: #66794e; color: var(--acid); }
.generation-progress li.active span { border-color: var(--acid); background: rgb(183 243 74 / 12%); color: var(--acid); }
.generation-waiting, .generation-warning { margin: 13px 0 0; color: var(--muted); font-size: .64rem; line-height: 1.45; }
.generation-warning { color: var(--gold); }
.generation-log { margin-top: 13px; border-top: 1px solid #30382e; }
.generation-log summary { padding: 10px 0 0; color: var(--muted); cursor: pointer; font-size: .63rem; }
.generation-log pre { max-height: 180px; margin: 9px 0 0; padding: 10px; overflow: auto; white-space: pre-wrap; background: #0b100c; color: #aeb6aa; font: .61rem/1.5 ui-monospace, SFMono-Regular, monospace; }
@keyframes generation-pulse { 70% { box-shadow: 0 0 0 8px rgb(183 243 74 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(183 243 74 / 0%); } }
@keyframes generation-track { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.generation-list details { border: 1px solid var(--line); background: #182019; }
.generation-list summary { display: flex; justify-content: space-between; gap: 15px; padding: 15px; cursor: pointer; }
.generation-list summary span { color: var(--muted); font-size: .68rem; }
.generation-list .meta-grid { margin: 0 15px 12px; }
.generation-list pre { max-height: 360px; margin: 0; padding: 16px; overflow: auto; white-space: pre-wrap; background: var(--paper); color: #c9c4b8; font: .7rem/1.55 ui-monospace, SFMono-Regular, monospace; }
.generation-delete { display: flex; justify-content: flex-end; padding: 10px 15px 15px; background: var(--paper); }
.data-admin { min-height: 650px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.data-admin .domain-header { border-bottom: 1px solid var(--line); }
.add-cigimon-panel, .table-editor-panel { margin: 24px 27px; padding: 22px; border: 1px solid var(--line); background: #171f19; }
.section-heading { margin-bottom: 18px; }
.section-heading h3 { margin: 2px 0 7px; font: 500 1.65rem Georgia, serif; }
.section-heading > p:last-child { max-width: 720px; margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.add-cigimon-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.add-cigimon-form label { min-width: 0; }
.add-cigimon-form label > span { display: block; margin: 0 0 6px 3px; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.add-cigimon-form label > small { display: block; margin: 6px 3px 0; color: var(--muted); font-size: .62rem; line-height: 1.4; }
.admin-form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 5px; padding-top: 16px; border-top: 1px solid var(--line); }
.admin-form-actions p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.new-cigimon-generation { margin: 22px 0 0; }
.table-editor-panel > select { width: min(470px, 100%); margin-bottom: 8px; }
.table-editor-status { min-height: 1.4em; margin: 5px 0 13px; color: var(--gold); font-size: .7rem; }
.admin-table-scroll { max-height: calc(100vh - 270px); min-height: 360px; overflow: auto; border: 1px solid var(--line); }
.admin-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .68rem; }
.admin-table th { position: sticky; z-index: 2; top: 0; min-width: 145px; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid #566157; background: #242e26; color: var(--ink); text-align: left; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.admin-table th:last-child { right: 0; z-index: 3; min-width: 105px; }
.admin-table td { min-width: 145px; padding: 6px; border-right: 1px solid #2b352d; border-bottom: 1px solid #2b352d; background: var(--panel); vertical-align: middle; }
.admin-table td:last-child { position: sticky; right: 0; z-index: 1; min-width: 105px; background: #202a22; }
.admin-table input { min-width: 135px; height: 36px; font-size: .68rem; }
.admin-table input:disabled { border-color: transparent; background: transparent; color: #777f78; opacity: 1; cursor: not-allowed; }
.admin-table .button { width: 100%; min-height: 34px; padding-inline: 9px; font-size: .65rem; white-space: nowrap; }
.domain-editor, .cigimon-editor { margin: 24px 27px; padding: 22px; border: 1px solid var(--line); background: #171f19; }
.vector-editor { display: grid; gap: 8px; }
.vector-edit-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(6, minmax(74px, .7fr)) 82px; align-items: end; gap: 8px; padding: 10px; border: 1px solid #2c372f; background: var(--panel); }
.vector-edit-row > strong { align-self: center; overflow-wrap: anywhere; font: 500 .9rem Georgia, serif; }
.vector-edit-row label span, .identity-editor-grid label > span, .tuning-editor-grid label > span { font-size: .55rem; }
.vector-edit-row input { height: 36px; padding-inline: 7px; }
.vector-edit-row .button { min-height: 36px; padding-inline: 8px; }
.vector-edit-row > small { grid-column: 1 / -1; min-height: 1em; color: var(--gold); font-size: .62rem; }
.documentation-editor { display: grid; gap: 7px; }
.documentation-editor .section-heading { margin-bottom: 10px; }
.document-edit-row { border: 1px solid var(--line); background: var(--panel); }
.document-edit-row summary { display: flex; justify-content: space-between; gap: 16px; padding: 13px 15px; cursor: pointer; }
.document-edit-row summary span { color: var(--muted); font-size: .65rem; }
.document-edit-row > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 12px; }
.document-edit-row label > span { font-size: .55rem; }
.document-edit-row textarea { width: 100%; min-height: 78px; resize: vertical; border: 1px solid var(--line); background: #111713; color: var(--ink); padding: 9px; font-size: .7rem; line-height: 1.4; }
.document-edit-row > .button { margin: 0 14px 14px; }
.cigimon-editor { margin: 0 0 18px; }
.identity-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.identity-editor-grid label small { display: block; margin: 5px 2px 0; color: var(--muted); font-size: .58rem; }
.tuning-editor-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.editor-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.editor-actions p { margin: 0; color: var(--gold); font-size: .68rem; line-height: 1.4; }
.detail-layout { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(380px, 1.1fr); clear: both; }
.detail-art { min-height: 520px; display: grid; place-items: center; padding: 38px; background-color: #d9d5c8; background-image: linear-gradient(45deg, #c6c1b3 25%, transparent 25%), linear-gradient(-45deg, #c6c1b3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c6c1b3 75%), linear-gradient(-45deg, transparent 75%, #c6c1b3 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
.detail-art img { width: 100%; max-height: 520px; object-fit: contain; image-rendering: pixelated; }
.detail-copy { padding: 30px 34px 44px; }
.detail-copy h2, .compare-dialog h2 { margin: 4px 0 8px; font-family: Georgia, serif; font-size: 2.5rem; font-weight: 500; }
.meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 25px 0; background: var(--line); border: 1px solid var(--line); }
.meta { min-width: 0; padding: 12px; background: var(--panel); }
.meta dt { margin-bottom: 4px; color: var(--muted); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.meta dd { margin: 0; overflow-wrap: anywhere; font-size: .83rem; }
.generation-note { margin: 20px 0; padding-left: 14px; border-left: 2px solid var(--ember); color: #d9d4c8; line-height: 1.55; }
.prompt-details { margin-top: 20px; border-top: 1px solid var(--line); }
.prompt-details summary { padding: 15px 0; color: var(--acid); cursor: pointer; font-weight: 700; }
.prompt-details pre { margin: 0; padding: 16px; overflow: auto; white-space: pre-wrap; background: var(--paper); color: #c9c4b8; font: .74rem/1.55 ui-monospace, SFMono-Regular, monospace; }
.compare-wrap { clear: both; padding: 8px 26px 36px; }
.compare-grid { display: grid; gap: 1px; min-width: 700px; background: var(--line); border: 1px solid var(--line); }
.compare-scroll { overflow-x: auto; }
.compare-cell { min-width: 0; padding: 13px; background: var(--panel); overflow-wrap: anywhere; font-size: .78rem; line-height: 1.45; }
.compare-cell.label { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.compare-cell.image { padding: 12px; background: #d9d5c8; }
.compare-cell.image img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.compare-cell strong { font-family: Georgia, serif; font-size: 1.15rem; font-weight: 500; }
.loading { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; gap: 12px; text-align: center; background: var(--paper); color: var(--muted); }
.loading span { width: 28px; height: 28px; margin: auto; border: 2px solid var(--line); border-top-color: var(--acid); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .controls { grid-template-columns: repeat(3, 1fr); } .search { grid-column: span 3; } .gallery.roster-view { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery.review-view, .gallery.review-view.review-cols-3 { grid-template-columns: 1fr; } .detail-layout, .record-overview, .card-preview-layout { grid-template-columns: 1fr; } .detail-art { min-height: 360px; } .registry-layout { grid-template-columns: 1fr; } .domain-nav { display: flex; padding: 7px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .domain-nav > .eyebrow { display: none; } .domain-nav button { flex: 1; min-width: 140px; border-left: 0; border-bottom: 2px solid transparent; } .domain-nav button.active { border-bottom-color: var(--acid); } .world-metrics { grid-template-columns: repeat(2, 1fr); } .system-flow > div { grid-template-columns: repeat(2, 1fr); } .system-flow > div > b { display: none; } .calculation-pipeline ol { grid-template-columns: repeat(4, 1fr); } .taxonomy-groups { grid-template-columns: 1fr; } .sheet-nav { border-right: 0; border-bottom: 1px solid var(--line); } #sheetList { display: flex; gap: 4px; overflow-x: auto; } .sheet-group { display: none; } .sheet-button { flex: none; width: auto; border-left: 0; border-bottom: 2px solid transparent; } .sheet-button.active { border-bottom-color: var(--acid); } }
@media (max-width: 600px) { .masthead { align-items: start; padding: 28px 18px 20px; } .collection-count { width: 82px; height: 82px; } .collection-count strong { font-size: 1.7rem; } .lede { display: none; } main { padding-inline: 12px; } .view-switcher button { min-height: 55px; padding-inline: 7px; font: 500 .78rem Georgia, serif; } .view-switcher button span { display: none; } .view-switcher button b { display: none; } .controls { position: static; grid-template-columns: repeat(2, 1fr); } .search { grid-column: span 2; } .gallery, .gallery.roster-view { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .roster-card-body { padding: 9px; } .roster-card h2 { font-size: 1rem; } .record-header { min-height: 72px; padding: 11px; } .record-header h2, .gallery.review-view .record-header h2 { font-size: 1.15rem; } .version-banner { padding-inline: 7px; } .version-banner span { display: none; } .variant-actions { grid-template-columns: 1fr; } .inspect-button { display: none; } .prefer-button { font-size: .62rem !important; } .version-grid::after { display: none; } .version-grid.many-versions .variant-panel { flex-basis: 82%; } .compare-tray { align-items: end; } .tray-actions span, #clearDecisions { display: none; } .record-admin-header { padding: 18px; } .record-admin-header h2 { font-size: 1.7rem; } .record-state { display: none; } .record-tabs button { font-size: .62rem; } .record-tab-body { padding: 18px 14px 30px; } .record-canonical-art { min-height: 330px; } .tab-intro { display: block; } .tab-intro > p { margin-top: 10px; } .game-data-grid { grid-template-columns: repeat(2, 1fr); } .domain-header { min-height: 120px; padding: 18px; } .domain-header h2 { font-size: 1.6rem; } .world-metrics, .system-flow, .distribution-grid, .attention-panel, .taxonomy-groups, .type-matchups, .rarity-budgets, .calculation-pipeline, .type-bases, .definitions-section, .modifier-workspace { margin: 16px 13px; } .distribution-grid, .definition-list, .matchup-notes { grid-template-columns: 1fr; } .type-matchups .section-heading { display: block; } .type-matchups .section-heading > p:last-child { margin-top: 8px; text-align: left; } .attention-panel, .modifier-heading { display: block; } .attention-items { margin-top: 12px; } .calculation-pipeline ol { grid-template-columns: repeat(2, 1fr); } .rarity-budgets > div:last-child { height: 150px; } .modifier-heading label { width: 100%; margin-top: 12px; } .source-badge { display: none; } .detail-copy { padding: 24px 18px 35px; } .detail-copy h2 { font-size: 2rem; } .registry-header { padding: 18px; } .registry-header h2 { font-size: 1.5rem; } .sheet-count { display: none; } }
@media (max-width: 900px) {
  .add-cigimon-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vector-edit-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vector-edit-row > strong, .vector-edit-row > small { grid-column: 1 / -1; }
  .identity-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuning-editor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .view-switcher { grid-template-columns: repeat(3, 1fr); }
  .add-cigimon-panel, .table-editor-panel { margin: 14px 12px; padding: 15px; }
  .add-cigimon-form { grid-template-columns: 1fr; }
  .admin-form-actions { display: grid; }
  .generation-composer { padding: 14px; }
  .generation-composer-heading { display: block; }
  .generation-composer-heading label { width: 100%; margin-top: 13px; }
  .prompt-editor textarea { min-height: 280px; }
  .generation-actions { display: grid; }
  .generation-progress ol { grid-template-columns: 1fr; }
  .domain-editor, .cigimon-editor { margin: 14px 12px; padding: 15px; }
  .record-tab-body .cigimon-editor { margin-inline: 0; }
  .vector-edit-row, .identity-editor-grid, .tuning-editor-grid, .document-edit-row > div { grid-template-columns: 1fr; }
  .editor-actions { display: grid; }
}

@media (max-width: 700px) {
  dialog.detail-dialog { width: calc(100dvw - 24px); max-width: 375px; max-height: calc(100dvh - 24px); margin: auto; overflow: hidden; }
  .detail-dialog::backdrop { background: rgb(4 8 5 / 88%); backdrop-filter: blur(7px); }
  .detail-dialog .dialog-close { top: 8px; right: 8px; width: 34px; height: 34px; margin: 8px; }
  .detail-dialog .record-admin-header { gap: 12px; min-width: 0; padding-right: 54px; }
  .detail-dialog .record-admin-header > div:first-child { min-width: 0; }
  .detail-dialog .record-admin-header h2, .detail-dialog .record-admin-header p { overflow-wrap: anywhere; }
  .record-header-side { gap: 8px; }
  .detail-dialog .record-tabs { grid-template-columns: repeat(5, minmax(76px, 1fr)); overflow-x: auto; overscroll-behavior-x: contain; }
  .detail-dialog .record-tab-body { overflow-x: hidden; }
  .detail-dialog .record-tab-body > * { max-width: 100%; }
  .detail-dialog .card-template-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .card-template-controls > div { grid-column: 1 / -1; }
  .detail-dialog .card-preview-layout { gap: 18px; width: 100%; max-width: 100%; overflow: hidden; }
  .detail-dialog .card-preview-layout .card-stage:not(.edition-standard), .detail-dialog .card-stage.edition-standard > .cigimon-tcg-card { margin-inline: auto; max-width: min(100%, 340px); }
  .detail-dialog .card-preview-layout .card-stage:not(.edition-standard) { position: static; }
  .detail-dialog .card-preview-notes, .detail-dialog .move-bank, .detail-dialog .move-bank-grid { min-width: 0; max-width: 100%; }
  .tcg-card-shine { inset: 0; pointer-events: none; }
  .card-stage:not(.edition-standard) { padding: 10px; border-radius: 18px; }
  .slab-label { flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; }
  .slab-name { order: 3; flex-basis: 100%; }
  .profile-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-skill { flex: none; }
  .move-bank-grid { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .card-template-controls { grid-template-columns: 1fr; }
  .card-template-controls h3 { font-size: 1rem; }
  .card-template-controls p:not(.eyebrow) { font-size: .62rem; }
  .cigimon-tcg-card { padding: 14px; border-width: 5px; border-radius: 18px; }
  .tcg-card-header { min-height: 0; gap: 9px; padding: 6px 5px 10px; }
  .tcg-card-header h3 { font-size: 1.65rem; }
  .tcg-type-row, .cigimon-tcg-card footer { font-size: .58rem; letter-spacing: .04em; }
  .tcg-stat-row { grid-template-columns: minmax(66px, 82px) minmax(0, 1fr) 30px; }
  .card-preview-notes { padding: 15px; }
  .profile-strip { grid-template-columns: 1fr; }
}

/* ===== Expanded card design variants (holo / pocket / vintage / sticker / full-art) ===== */
.cigimon-tcg-card { --type-a: #b9c2c6; --type-b: #75848c; }
.cigimon-tcg-card.type-cigarette { --type-a: #e6d1a0; --type-b: #97794a; }
.cigimon-tcg-card.type-cigarillo { --type-a: #dda878; --type-b: #85572f; }
.cigimon-tcg-card.type-cigar { --type-a: #c08a52; --type-b: #58371d; }
.cigimon-tcg-card.type-mary-j { --type-a: #a9dc7d; --type-b: #3b7a37; }
.cigimon-tcg-card.type-pipe { --type-a: #d59d90; --type-b: #6c3833; }
.cigimon-tcg-card.type-vape { --type-a: #8fe3f2; --type-b: #5348b4; }
.cigimon-tcg-card.type-paraphernalia { --type-a: #d9a2e8; --type-b: #6d3d9c; }

/* --- Cigimon Base Set: classic trading-card frame --- */
.card-design-holo-champion { padding: 12px 14px 14px; border: 13px solid #f2cf46; border-radius: 16px; background: linear-gradient(155deg, var(--type-a), var(--type-b)); color: #221a0e; box-shadow: 0 28px 70px rgb(0 0 0 / 45%), inset 0 0 0 2px rgb(120 84 20 / 45%); font-family: Georgia, serif; }
.card-design-holo-champion::before { inset: 4px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 6px; }
.card-design-holo-champion .tcg-card-shine { opacity: .5; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 35%) 44%, transparent 58%); transform: none; }
.holo-topline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 2px 4px 4px; }
/* The name gets the same full-width row as Grimoire instead of competing with
   set/rarity and HP. Long names can use the entire frame before wrapping. */
.holo-name { margin: 0 4px 8px; font: 800 clamp(1.15rem, 1.5vw + .72rem, 1.85rem)/1.08 Georgia, serif; letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
.holo-card-type { min-width: 0; color: rgb(34 26 14 / 88%); font: 900 clamp(.5rem, .3vw + .4rem, .6rem)/1.15 Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; overflow-wrap: anywhere; }
.holo-stage { color: rgb(34 26 14 / 72%); font: 800 .5rem Inter, sans-serif; letter-spacing: .08em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.holo-hp { justify-self: end; display: flex; align-items: center; gap: 6px; color: #a31414; font: 900 1.45rem/1 Georgia, serif; }
.holo-hp b { font: 800 .58rem Inter, sans-serif; letter-spacing: .06em; }
.holo-energy { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgb(0 0 0 / 35%); background: radial-gradient(circle at 32% 28%, #fff 0 12%, var(--type-a) 34%, var(--type-b) 100%); box-shadow: 0 1px 3px rgb(0 0 0 / 35%); }
.holo-art { position: relative; margin: 0 2px; padding: 14px; border: 5px solid #8a6f33; border-radius: 3px; background: radial-gradient(circle at 50% 38%, #fdf6e2 0 16%, var(--type-a) 55%, var(--type-b) 100%); box-shadow: inset 0 0 24px rgb(0 0 0 / 22%), 0 1px 0 rgb(255 255 255 / 45%); }
.holo-art img { width: 100%; aspect-ratio: 1.12; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 10px 5px rgb(0 0 0 / 30%)); }
.holo-moves { display: grid; gap: 0; margin: 0 2px 8px; padding: 2px 5px; list-style: none; background: rgb(255 255 255 / 26%); border-radius: 4px; }
.holo-moves li { display: grid; grid-template-columns: 44px 1fr 52px; align-items: center; gap: 10px; padding: 8px 7px; }
.holo-moves li + li { border-top: 1px solid rgb(34 26 14 / 28%); }
.holo-cost { display: flex; flex-wrap: wrap; gap: 3px; }
.holo-cost i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 40%); background: radial-gradient(circle at 32% 28%, #fff 0 14%, var(--type-a) 36%, var(--type-b) 100%); }
.holo-moves strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; font: 800 clamp(.88rem, .5vw + .68rem, 1.05rem)/1.15 Georgia, serif; }
.holo-move-channel { padding: 2px 4px; border: 1px solid rgb(34 26 14 / 30%); border-radius: 4px; background: rgb(255 255 255 / 40%); color: rgb(34 26 14 / 72%); font: 900 .43rem/1 Inter, sans-serif; letter-spacing: .05em; white-space: nowrap; }
.holo-move-channel.role-nicotine, .holo-move-channel.role-draw { border-color: rgb(143 46 30 / 38%); background: rgb(255 225 213 / 60%); color: #7f281e; }
.holo-moves p { margin: 3px 0 0; color: rgb(34 26 14 / 86%); font: clamp(.7rem, .42vw + .54rem, .84rem)/1.4 Inter, sans-serif; }
.holo-moves li > b { text-align: right; font: 900 clamp(1.25rem, .6vw + 1rem, 1.5rem) Georgia, serif; }
.holo-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 16px; margin: 11px 6px 9px; }
.holo-stats > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 7px; align-items: center; }
.holo-stats dt { display: flex; min-width: 0; align-items: center; gap: 4px; color: rgb(34 26 14 / 78%); font: 800 clamp(.5rem, .34vw + .38rem, .6rem)/1.2 Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.holo-stats dt > span { min-width: 0; overflow-wrap: anywhere; }
.holo-stat-role { flex: none; padding: 2px 4px; border: 1px solid rgb(34 26 14 / 28%); border-radius: 100px; background: rgb(255 255 255 / 48%); color: rgb(34 26 14 / 76%); font: 900 .42rem/1 Inter, sans-serif; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.holo-stat-role.role-nicotine, .holo-stat-role.role-draw { border-color: rgb(143 46 30 / 38%); background: rgb(255 225 213 / 60%); color: #7f281e; }
.holo-stat-role.role-tar, .holo-stat-role.role-filter { border-color: rgb(40 75 130 / 34%); background: rgb(220 233 255 / 62%); color: #294f80; }
.holo-stat-role.role-burnRate { border-color: rgb(128 91 15 / 35%); background: rgb(255 239 180 / 62%); color: #73520f; }
.holo-stats dd { display: grid; grid-template-columns: minmax(0, 1fr) 21px; gap: 5px; align-items: center; margin: 0; }
.holo-stats i { display: block; height: 7px; border: 1px solid rgb(120 84 20 / 50%); border-radius: 100px; background: rgb(255 250 232 / 55%); }
.holo-stats b { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--type-a), var(--type-b)); }
.holo-stats dd > span { font: 900 clamp(.64rem, .38vw + .5rem, .78rem) Georgia, serif; text-align: right; }
/* Authored type matchups ride the bottom corners of the art window. */
.holo-art-tags { position: absolute; right: 10px; bottom: 10px; left: 10px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.holo-tag { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border: 1px solid rgb(0 0 0 / 45%); border-radius: 100px; background: rgb(18 12 4 / 82%); box-shadow: 0 2px 6px rgb(0 0 0 / 35%); }
.holo-tag small { color: rgb(255 255 255 / 70%); font: 800 clamp(.46rem, .3vw + .36rem, .55rem) Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.holo-tag b { font: 900 clamp(.62rem, .38vw + .48rem, .76rem) Inter, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.holo-tag-weak b { color: #ff9a8a; }
.holo-tag-resist b { color: #b7f34a; }
/* Weakness/resistance read as chips, not lost in a run-on text row. */
.holo-matchup { display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; padding: 4px 7px; border: 1px solid rgb(120 84 20 / 50%); border-radius: 100px; background: rgb(255 250 232 / 70%); }
.holo-matchup small { color: rgb(34 26 14 / 68%); font: 800 clamp(.42rem, .26vw + .33rem, .5rem) Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.holo-matchup b { font: 900 clamp(.58rem, .34vw + .46rem, .7rem) Inter, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.holo-matchup i { font: 900 clamp(.5rem, .3vw + .4rem, .6rem) Inter, sans-serif; font-style: normal; }
.holo-matchup-weak { border-color: rgb(163 20 20 / 45%); background: rgb(255 226 218 / 78%); }
.holo-matchup-weak b, .holo-matchup-weak i { color: #a31414; }
.holo-matchup-resist { border-color: rgb(40 86 44 / 40%); background: rgb(224 242 219 / 78%); }
.holo-matchup-resist b, .holo-matchup-resist i { color: #2c6b32; }
.holo-matchup-meta { border-color: rgb(120 84 20 / 45%); background: rgb(255 250 232 / 55%); }
.holo-matchup-meta b { color: rgb(34 26 14 / 88%); }
.holo-matchup-meta i { color: rgb(34 26 14 / 62%); }
.holo-resource-rule { flex: 1 1 auto; border-color: rgb(66 82 122 / 42%); background: rgb(229 238 255 / 68%); }
.holo-resource-rule b { color: #33466f; }
.holo-resource-rule i { color: rgb(34 48 82 / 68%); }
.holo-flavor { margin: 7px 8px 5px; padding-top: 7px; border-top: 2px solid rgb(120 84 20 / 45%); font: italic clamp(.72rem, .42vw + .56rem, .86rem)/1.45 Georgia, serif; color: rgb(34 26 14 / 82%); }
.holo-footer { display: flex; justify-content: center; margin: 0 4px; color: rgb(34 26 14 / 72%); letter-spacing: .07em; text-transform: uppercase; }
.holo-footer > .holo-matchup { flex: 1 1 auto; min-width: 0; justify-content: center; white-space: nowrap; }
.holo-footer > .holo-matchup-meta { flex: 0 1 auto; }


/* --- Dex Codex: stat line beside the art, abilities below --- */
.card-design-dex-codex { --type-a: #cfe3ff; --type-b: #4b5f86; padding: 13px; border: 9px solid #26324a; border-radius: 16px; background: linear-gradient(158deg, #f2f5fb, #d5deee 52%, #b9c6dd); color: #1b2434; font-family: Georgia, serif; box-shadow: 0 28px 70px rgb(0 0 0 / 45%), inset 0 0 0 2px rgb(255 255 255 / 70%); }
.card-design-dex-codex::before { inset: 4px; border: 1px solid rgb(38 50 74 / 40%); border-radius: 8px; }
.card-design-dex-codex .tcg-card-shine { opacity: .45; background: linear-gradient(118deg, transparent 32%, rgb(255 255 255 / 60%) 47%, transparent 61%); transform: none; }
.codex-topline { display: flex; align-items: flex-start; gap: 10px; padding: 2px 4px 8px; }
.codex-topline h3 { flex: 1; min-width: 0; margin: 0; font: 800 clamp(1rem, 1.15vw + .66rem, 1.5rem)/1.1 Georgia, serif; letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
.codex-stage { order: -1; max-width: 88px; color: rgb(27 36 52 / 68%); font: 800 .48rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.codex-hp { flex: none; color: #a3231b; font: 900 1.3rem/1 Georgia, serif; }
.codex-hp b { font: 800 .55rem Inter, sans-serif; letter-spacing: .06em; }
.codex-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 11px; align-items: start; }
.codex-art { margin: 0; padding: 9px; border: 4px solid #3c4d6e; border-radius: 4px; background: radial-gradient(circle at 50% 36%, #fff 0 14%, var(--type-a) 56%, var(--type-b) 100%); box-shadow: inset 0 0 20px rgb(0 0 0 / 22%); }
.codex-art img { width: 100%; aspect-ratio: 1.02; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 5px rgb(0 0 0 / 32%)); }
.codex-stats { display: grid; gap: 5px; margin: 0; }
.codex-stats > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 7px; align-items: center; }
.codex-stats dt { overflow: hidden; color: rgb(27 36 52 / 74%); font: 800 .46rem Inter, sans-serif; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.codex-stats dd { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 6px; align-items: center; margin: 0; }
.codex-stats i { display: block; height: 7px; border: 1px solid rgb(38 50 74 / 45%); border-radius: 100px; background: rgb(255 255 255 / 55%); }
.codex-stats b { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #6d86b8, #2c3d5e); }
.codex-stats span { font: 900 .62rem Georgia, serif; text-align: right; }
.codex-band { margin: 9px 0 8px; padding: 4px 10px; border: 1px solid rgb(38 50 74 / 45%); border-radius: 100px; background: linear-gradient(180deg, #fff, #dce4f1); text-align: center; font: italic 700 .56rem Georgia, serif; }
.codex-abilities { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.codex-abilities li { padding: 7px 9px; border: 1px solid rgb(38 50 74 / 32%); border-left: 3px solid #4b5f86; border-radius: 4px; background: rgb(255 255 255 / 58%); }
.codex-abilities header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.codex-abilities strong { font: 800 .72rem Georgia, serif; }
.codex-abilities em { flex: none; color: rgb(27 36 52 / 62%); font: 800 .44rem Inter, sans-serif; font-style: normal; letter-spacing: .05em; text-transform: uppercase; }
.codex-abilities p { margin: 3px 0 0; font: .6rem/1.4 Georgia, serif; color: rgb(27 36 52 / 88%); }
.codex-signature { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; margin: 0 0 8px; padding: 7px 9px; border: 1px solid rgb(38 50 74 / 40%); border-radius: 4px; background: linear-gradient(120deg, #e7edf8, #d2dcee); }
.codex-signature strong { font: 800 .74rem Georgia, serif; }
.codex-signature b { color: #a3231b; font: 900 .95rem Georgia, serif; }
.codex-signature span { grid-column: 1 / -1; font: .6rem/1.4 Georgia, serif; color: rgb(27 36 52 / 85%); }
.codex-flavor { margin: 0 2px 7px; padding-top: 7px; border-top: 2px solid rgb(38 50 74 / 35%); font: italic .6rem/1.45 Georgia, serif; color: rgb(27 36 52 / 80%); }
.codex-foot { display: flex; justify-content: space-between; gap: 10px; padding: 0 4px; color: rgb(27 36 52 / 70%); font: 800 .52rem Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; }

/* --- Spell Grimoire: tome page, type-tinted, with an ability list --- */
/* Inherits --type-a/--type-b from .cigimon-tcg-card.type-*, so the frame,
   art well, and ability pips all shift with the Cigimon's type. */
.card-design-spell-grimoire { padding: 14px 15px; border: 10px solid #4a3722; border-radius: 8px; background: linear-gradient(168deg, #f6ecd6, #e6d7b8 55%, #d2bf97); color: #33260f; font-family: Georgia, serif; box-shadow: 0 28px 70px rgb(0 0 0 / 45%), inset 0 0 0 2px rgb(255 250 232 / 70%), inset 0 0 40px rgb(120 88 40 / 22%); }
.card-design-spell-grimoire::before { inset: 5px; border: 1px solid rgb(74 55 34 / 45%); border-radius: 3px; }
.card-design-spell-grimoire .tcg-card-shine { opacity: .35; background: linear-gradient(112deg, transparent 34%, rgb(255 248 224 / 55%) 48%, transparent 62%); transform: none; }
.grim-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 4px; }
.grim-eyebrow { min-width: 0; overflow: hidden; color: rgb(51 38 15 / 62%); font: 800 .48rem Inter, sans-serif; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.grim-hp { flex: none; display: flex; align-items: center; gap: 6px; color: #a31414; font: 900 1.35rem/1 Georgia, serif; }
.grim-hp b { font: 800 .55rem Inter, sans-serif; letter-spacing: .06em; }
.grim-energy { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgb(0 0 0 / 35%); background: radial-gradient(circle at 32% 28%, #fff 0 12%, var(--type-a) 34%, var(--type-b) 100%); box-shadow: 0 1px 3px rgb(0 0 0 / 35%); }
/* The name gets its own full-width line rather than competing with the badges. */
.grim-name { margin: 0 2px 9px; font: 800 clamp(1.15rem, 1.5vw + .72rem, 1.85rem)/1.08 Georgia, serif; letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
.grim-frame { position: relative; margin-bottom: 9px; }
.grim-art { margin: 0; padding: 12px; border: 5px solid #6d4f2b; border-radius: 3px; background: radial-gradient(circle at 50% 38%, #fffaf0 0 15%, var(--type-a) 55%, var(--type-b) 100%); box-shadow: inset 0 0 26px rgb(80 55 20 / 30%); }
.grim-art img { width: 100%; aspect-ratio: 1.15; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 9px 5px rgb(60 40 12 / 40%)); }
.grim-type { position: absolute; right: 10px; bottom: 10px; padding: 3px 10px; border: 1px solid #6d4f2b; border-radius: 100px; background: rgb(30 20 8 / 84%); color: #e8d8b4; font: 800 .46rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.grim-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; margin: 12px 0 12px; }
.grim-stats > div { display: grid; grid-template-columns: minmax(58px, auto) minmax(0, 1fr); gap: 7px; align-items: center; }
.grim-stats dt { min-width: 0; color: rgb(51 38 15 / 76%); font: 800 clamp(.5rem, .34vw + .38rem, .6rem)/1.2 Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.grim-stats dd { display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 5px; align-items: center; margin: 0; }
.grim-stats i { display: block; height: 7px; border: 1px solid rgb(74 55 34 / 45%); border-radius: 100px; background: rgb(255 250 235 / 60%); }
.grim-stats b { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--type-a), var(--type-b)); }
.grim-stats span { font: 900 clamp(.64rem, .38vw + .5rem, .78rem) Georgia, serif; text-align: right; }
/* Ability rows mirror .holo-moves: pip, name + text, magnitude on the right. */
.grim-abilities { display: grid; gap: 11px; margin: 0 0 10px; padding: 12px 11px; border-top: 2px solid rgb(74 55 34 / 40%); border-bottom: 2px solid rgb(74 55 34 / 40%); list-style: none; }
.grim-abilities li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: start; }
.grim-cost { display: flex; gap: 3px; padding-top: 3px; }
.grim-cost i { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgb(0 0 0 / 32%); background: radial-gradient(circle at 32% 28%, #fff 0 12%, var(--type-a) 34%, var(--type-b) 100%); }
.grim-abilities strong { font: 800 clamp(.88rem, .5vw + .68rem, 1.05rem) Georgia, serif; }
.grim-abilities p { margin: 4px 0 0; font: clamp(.7rem, .42vw + .54rem, .84rem)/1.5 Georgia, serif; color: rgb(51 38 15 / 88%); }
.grim-abilities b { color: #a31414; font: 900 clamp(1.25rem, .6vw + 1rem, 1.5rem)/1 Georgia, serif; }
.grim-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 0 4px; color: rgb(51 38 15 / 70%); font: 800 .52rem Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; }

/* --- Pocket Handheld: four-shade LCD dex entry --- */
.card-design-pocket-monster { padding: 18px 18px 30px; border: 2px solid #77736a; border-radius: 10px 10px 44px 10px; background: linear-gradient(170deg, #c6c2b9, #a8a49b); box-shadow: 0 28px 70px rgb(0 0 0 / 45%), inset 0 2px 0 rgb(255 255 255 / 55%); }
.card-design-pocket-monster::before, .card-design-pocket-monster .tcg-card-shine { display: none; }
.gb-screen { position: relative; overflow: hidden; padding: 12px 13px 14px; border: 7px solid #43473c; border-radius: 6px; background: #9dbb27; color: #12380d; font: 700 .68rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .04em; box-shadow: inset 0 0 26px rgb(18 56 13 / 30%); }
.gb-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(18 56 13 / 9%) 0 1px, transparent 1px 3px); }
.gb-head { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 2px dashed #2f5c1c; }
.gb-name { margin: 9px 0 8px; font-size: 1.3rem; letter-spacing: .06em; }
.gb-art { margin: 0 0 9px; padding: 10px; border: 3px solid #12380d; background: #b8cc51; }
.gb-art img { width: 100%; aspect-ratio: 1.15; object-fit: contain; image-rendering: pixelated; filter: grayscale(1) contrast(1.3) sepia(.9) hue-rotate(52deg) saturate(2.6) brightness(.92); }
.gb-line { margin: 0 0 9px; padding: 5px 7px; border: 2px solid #12380d; background: rgb(18 56 13 / 12%); }
.gb-stats { display: grid; gap: 5px; }
.gb-stat-row { display: grid; grid-template-columns: 86px 1fr 32px; align-items: center; gap: 7px; font-size: .6rem; }
.gb-stat-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-stat-row i { height: 10px; border: 2px solid #12380d; overflow: hidden; background: rgb(18 56 13 / 10%); }
.gb-stat-row b { display: block; height: 100%; background: repeating-linear-gradient(90deg, #12380d 0 5px, transparent 5px 8px); }
.gb-stat-row strong { text-align: right; }
.gb-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 7px; border-top: 2px dashed #2f5c1c; font-size: .56rem; }

/* --- Vintage Pack: turn-of-the-century tobacco label --- */
.card-design-vintage-pack { padding: 20px 22px; border: 7px solid #691e21; border-radius: 5px; background: linear-gradient(180deg, #f4e9cc, #e8d7ab); color: #46281a; text-align: center; font-family: Georgia, serif; box-shadow: 0 28px 70px rgb(0 0 0 / 40%), inset 0 0 0 3px #f4e9cc, inset 0 0 0 5px #b98f3e; }
.card-design-vintage-pack::before { inset: 11px; border: 1px solid rgb(105 30 33 / 45%); border-radius: 1px; }
.card-design-vintage-pack .tcg-card-shine { display: none; }
.vint-rule { color: #b98f3e; font-size: .62rem; letter-spacing: .55em; }
.vint-kicker { margin: 9px 0 3px; color: #691e21; font: 800 .6rem Inter, sans-serif; letter-spacing: .3em; text-transform: uppercase; }
.vint-name { margin: 0; color: #691e21; font: 700 2.05rem/1.05 Georgia, serif; font-variant: small-caps; letter-spacing: .02em; }
.vint-sub { margin: 3px 0 13px; font: italic .68rem Georgia, serif; color: rgb(70 40 26 / 75%); }
.vint-art { position: relative; margin: 0; padding: 16px; border: 2px solid #b98f3e; background: radial-gradient(circle at 50% 40%, #fcf5df 0 30%, #ddc796 100%); box-shadow: inset 0 0 22px rgb(70 40 26 / 18%); }
.vint-art img { width: 100%; aspect-ratio: 1.1; object-fit: contain; image-rendering: pixelated; filter: sepia(.35) saturate(.85) drop-shadow(0 9px 5px rgb(70 40 26 / 30%)); }
.vint-crest { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #b98f3e; border-radius: 50%; background: #691e21; color: #f4e9cc; font: 700 1.05rem Georgia, serif; font-variant: small-caps; }
.vint-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; margin: 14px 4px 12px; text-align: left; }
.vint-stats > div { display: flex; align-items: baseline; gap: 6px; font-size: .68rem; }
.vint-stats span { font-variant: small-caps; letter-spacing: .04em; }
.vint-stats i { flex: 1; border-bottom: 2px dotted rgb(70 40 26 / 45%); }
.vint-stats strong { font-size: .8rem; }
.vint-warning { margin: 0 2px 12px; padding: 9px 11px; border: 2px solid #26201a; background: #efe2c0; text-align: left; font: .58rem/1.5 Inter, sans-serif; color: #26201a; }
.vint-foot { display: flex; justify-content: space-between; gap: 10px; padding: 0 4px; color: rgb(70 40 26 / 80%); font-variant: small-caps; font-size: .68rem; letter-spacing: .06em; }

/* --- Sticker Slap: die-cut street sticker --- */
.card-design-sticker-slap { padding: 11px; border: 0; border-radius: 30px; background: #fff; transform: rotate(-1.7deg); box-shadow: 0 30px 70px rgb(0 0 0 / 50%), 0 3px 0 rgb(0 0 0 / 25%); }
.card-design-sticker-slap::before, .card-design-sticker-slap .tcg-card-shine { display: none; }
.stk-inner { position: relative; overflow: hidden; padding: 18px 16px 16px; border-radius: 21px; background: linear-gradient(160deg, #ff3d8b, #ff9d00 46%, #ffe94a 78%, #29d3ff 115%); color: #16110b; }
.stk-inner::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 3px rgb(22 17 11 / 85%); }
.stk-rarity { position: absolute; z-index: 2; top: 14px; right: 12px; padding: 7px 10px; border: 2px dashed #16110b; border-radius: 100px; background: #ffe94a; transform: rotate(8deg); font: 1000 .62rem Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.stk-name { margin: 2px 0 0; font: italic 1000 2.15rem/1 Inter, sans-serif; letter-spacing: -.05em; text-transform: uppercase; color: #fff; -webkit-text-stroke: 2px #16110b; text-shadow: 3px 3px 0 #16110b; }
.stk-type { display: inline-block; margin: 8px 0 12px; padding: 4px 9px; background: #16110b; color: #fff; transform: rotate(-2deg); font: 900 .6rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.stk-art { margin: 0 0 12px; padding: 12px; border: 3px dashed rgb(22 17 11 / 60%); border-radius: 15px; background: rgb(255 255 255 / 30%); }
.stk-art img { width: 100%; aspect-ratio: 1.1; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(4px 6px 0 rgb(22 17 11 / 35%)); }
.stk-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.stk-tags span { padding: 4px 9px; background: rgb(255 255 255 / 88%); transform: rotate(var(--tilt, -2deg)); box-shadow: 0 2px 5px rgb(0 0 0 / 25%); font: 700 .58rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.stk-badges { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 12px; }
.stk-badge { width: 66px; height: 66px; display: grid; place-content: center; gap: 1px; border-radius: 50%; background: #16110b; color: #ffe94a; text-align: center; box-shadow: 0 3px 0 rgb(0 0 0 / 30%); }
.stk-badge:nth-child(odd) { transform: rotate(-5deg); }
.stk-badge:nth-child(even) { transform: rotate(4deg); }
.stk-badge b { font: 1000 1.15rem Inter, sans-serif; }
.stk-badge small { max-width: 56px; overflow: hidden; font: 800 .44rem Inter, sans-serif; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.stk-serial { margin: 0; text-align: center; font: 700 .58rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; }

/* --- Full Art Battle: full-bleed arena scene --- */
.card-design-full-art { display: flex; flex-direction: column; justify-content: flex-end; min-height: 600px; padding: 0; border: 5px solid #101613; border-radius: 20px; background: linear-gradient(180deg, var(--type-a), var(--type-b) 72%, #10161a); }
.card-design-full-art::before { inset: 5px; border-color: rgb(255 255 255 / 30%); border-radius: 13px; z-index: 3; }
.card-design-full-art .tcg-card-shine { z-index: 2; opacity: .45; background: linear-gradient(115deg, transparent 32%, rgb(255 255 255 / 30%) 46%, transparent 60%); transform: none; }
.fa-scene { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 58%, rgb(255 255 255 / 38%) 0 12%, transparent 46%), radial-gradient(ellipse at 50% 105%, rgb(6 10 8 / 70%), transparent 60%); }
.fa-art { position: absolute; top: 7%; left: 50%; width: min(76%, 330px); aspect-ratio: 1; transform: translateX(-50%); object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 22px 14px rgb(0 0 0 / 45%)); }
.fa-top { position: absolute; z-index: 2; top: 15px; right: 16px; left: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fa-type { padding: 6px 11px; border: 1px solid rgb(255 255 255 / 35%); border-radius: 100px; background: rgb(10 14 11 / 62%); color: #fff; font: 800 .6rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.fa-hp { color: #fff; font: 900 1.5rem/1 Georgia, serif; text-shadow: 0 2px 8px rgb(0 0 0 / 55%); }
.fa-plate { position: relative; z-index: 2; margin-top: auto; padding: 84px 18px 18px; background: linear-gradient(180deg, transparent, rgb(8 12 10 / 55%) 34%, rgb(8 12 10 / 92%) 72%); color: #fff; }
.fa-rarity { font: 800 .58rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / 75%); }
.fa-plate h3 { margin: 4px 0 2px; font: 800 2.3rem/1 Georgia, serif; letter-spacing: -.03em; text-shadow: 0 3px 12px rgb(0 0 0 / 55%); }
.fa-plate small { display: block; margin-bottom: 13px; color: rgb(255 255 255 / 65%); font-size: .66rem; }
.fa-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.fa-chip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 100px; background: rgb(255 255 255 / 10%); backdrop-filter: blur(4px); }
.fa-chip small { overflow: hidden; font: 800 .52rem Inter, sans-serif; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; color: rgb(255 255 255 / 80%); }
.fa-chip i { height: 5px; overflow: hidden; border-radius: 100px; background: rgb(255 255 255 / 18%); }
.fa-chip i b { display: block; height: 100%; background: linear-gradient(90deg, var(--type-a), #fff); }
.fa-chip > b { font: 900 .78rem Inter, sans-serif; }

/* --- Prism Foil: full-bleed holographic chase card --- */
.card-design-prism-foil { display: flex; flex-direction: column; justify-content: flex-end; min-height: 600px; padding: 0; border: 5px solid #dfe3ee; border-radius: 20px; background: linear-gradient(160deg, #1b1630, #0c0b1c 55%, #101a2c); box-shadow: 0 28px 70px rgb(0 0 0 / 50%), 0 0 30px rgb(160 150 255 / 22%), inset 0 0 0 2px rgb(255 255 255 / 25%); }
.card-design-prism-foil::before { inset: 5px; border-color: rgb(255 255 255 / 30%); border-radius: 13px; z-index: 3; }
.card-design-prism-foil .fa-scene { background: repeating-linear-gradient(115deg, rgb(125 231 255 / 32%) 0 44px, rgb(255 120 207 / 28%) 44px 88px, rgb(255 233 74 / 24%) 88px 132px, rgb(126 255 158 / 28%) 132px 176px), radial-gradient(ellipse at 50% 58%, rgb(255 255 255 / 30%) 0 12%, transparent 46%), radial-gradient(circle at 24% 26%, rgb(255 255 255 / 85%) 0 1px, transparent 2.5px), radial-gradient(circle at 70% 44%, rgb(255 255 255 / 75%) 0 1px, transparent 2.5px); background-size: 300% 300%, 100% 100%, 120px 140px, 160px 120px; animation: edition-drift 12s linear infinite alternate; }
.card-design-prism-foil .tcg-card-shine { z-index: 2; opacity: .8; background: linear-gradient(115deg, transparent 25%, rgb(255 255 255 / 26%) 45%, transparent 62%); background-size: 300% 100%; transform: none; animation: edition-drift 5s ease-in-out infinite alternate; }
.card-design-prism-foil .fa-art { filter: drop-shadow(0 22px 14px rgb(0 0 0 / 45%)) drop-shadow(0 0 18px rgb(125 231 255 / 35%)); }
.card-design-prism-foil .fa-plate { background: linear-gradient(180deg, transparent, rgb(10 8 20 / 62%) 34%, rgb(10 8 20 / 94%) 72%); }
.card-design-prism-foil .fa-hp { text-shadow: 0 0 14px rgb(125 231 255 / 80%), 0 2px 8px rgb(0 0 0 / 55%); }
.card-design-prism-foil .fa-chip i b { background: linear-gradient(90deg, #7de7ff, #ff78cf, #ffe94a); }

/* --- Gilded Relic: solid-gold collector pressing --- */
.card-design-gilded-relic { --type-a: #ffe9a8; --type-b: #9c741f; padding: 12px 14px 14px; border: 13px solid #8a641f; border-radius: 16px; background: linear-gradient(150deg, #f4dd90, #cba045 46%, #92691f); color: #3a2a08; font-family: Georgia, serif; box-shadow: 0 28px 70px rgb(0 0 0 / 45%), inset 0 0 0 2px rgb(255 244 200 / 65%), inset 0 0 34px rgb(120 84 20 / 35%); }
.card-design-gilded-relic::before { inset: 4px; border: 1px solid rgb(120 84 20 / 55%); border-radius: 6px; }
.card-design-gilded-relic .tcg-card-shine { opacity: .7; background: linear-gradient(115deg, transparent 30%, rgb(255 250 220 / 55%) 46%, transparent 60%); background-size: 300% 100%; transform: none; animation: edition-drift 6s ease-in-out infinite alternate; }
.card-design-gilded-relic .holo-hp { color: #7c1a10; }
.card-design-gilded-relic .holo-art { border-color: #6d4d15; background: radial-gradient(circle at 50% 38%, #fff3cd 0 14%, #e3c374 52%, #96701f 100%); }
.card-design-gilded-relic .holo-art img { filter: sepia(1) saturate(1.35) hue-rotate(-12deg) contrast(1.05) drop-shadow(0 10px 5px rgb(70 48 8 / 45%)); }
.card-design-gilded-relic .holo-moves { background: rgb(255 248 220 / 42%); }
/* Gilded Relic overrides the holo palette to gold, so the bars follow suit
   rather than inheriting the type gradient the base frame uses. */
.card-design-gilded-relic .holo-stats i { border-color: rgb(109 77 21 / 60%); background: rgb(255 248 220 / 55%); }
.card-design-gilded-relic .holo-stats b { background: linear-gradient(90deg, #e3c374, #96701f); }
.card-design-gilded-relic .holo-flavor { border-top-color: rgb(109 77 21 / 55%); }

/* --- Ash & Ember: charred slab with a live ember rim --- */
.card-design-ash-ember { border-color: #241813; background: radial-gradient(circle at 50% 115%, #3d1c0b 0 18%, transparent 55%), linear-gradient(160deg, #171310, #0b0806 60%, #1d120b); box-shadow: 0 28px 70px rgb(0 0 0 / 55%), 0 0 36px rgb(255 96 34 / 22%), inset 0 0 0 2px rgb(255 120 73 / 28%), inset 0 -18px 44px rgb(255 96 34 / 16%); }
.card-design-ash-ember::before { border-color: rgb(255 120 73 / 30%); }
.card-design-ash-ember .tcg-card-shine { opacity: .8; background: conic-gradient(from 200deg, transparent, rgb(255 96 34 / 16%), transparent 40%, rgb(255 176 66 / 12%), transparent 75%); animation: ember-breathe 3.5s ease-in-out infinite alternate; }
.card-design-ash-ember .tcg-card-header > span { color: #ffb066; }
.card-design-ash-ember .tcg-type-row span { color: #ffb066; }
.card-design-ash-ember .tcg-art-frame { border-color: #4a2415; background: radial-gradient(circle at 50% 42%, #57301a 0 12%, #2a160c 58%, #140a05 100%); box-shadow: inset 0 0 30px rgb(0 0 0 / 55%), inset 0 0 18px rgb(255 96 34 / 18%); }
.card-design-ash-ember .tcg-art-frame figcaption { color: #ffd9be; }
.card-design-ash-ember .tcg-tag-strip span { border-color: rgb(255 150 90 / 25%); background: rgb(255 96 34 / 12%); color: #ffc9a8; }
.card-design-ash-ember .tcg-stat-row b { background: linear-gradient(90deg, #4a1200, #ff5a1e, #ffc36b); }
.card-design-ash-ember .tcg-stat-row strong { color: #ffb066; }
.card-design-ash-ember footer strong { color: #ffb347; }
@keyframes ember-breathe { from { opacity: .45; } to { opacity: 1; } }

/* --- Record modal prev/next navigation --- */
.record-header-side { flex: none; display: flex; align-items: center; gap: 14px; }
.record-nav { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .06em; }
.record-nav button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: .95rem; }
.record-nav button:hover { border-color: var(--acid); color: var(--acid); }

/* --- Collector slab: edition presentation around the card, never over it --- */
.card-stage { position: relative; min-width: 0; }
.card-stage.edition-standard { display: contents; }
.card-stage:not(.edition-standard) { padding: 14px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 22px; background: linear-gradient(165deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 2%) 45%, rgb(255 255 255 / 7%)); box-shadow: var(--shadow), inset 0 1px 0 rgb(255 255 255 / 20%), inset 0 0 0 1px rgb(0 0 0 / 30%); transform-origin: top center; transition: transform .12s ease; }
.card-stage.edition-standard > .cigimon-tcg-card { transform-origin: top center; transition: transform .12s ease; }
.slab-glare { position: absolute; inset: 0; z-index: 8; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / 10%) 49%, transparent 58%); }
.slab-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; padding: 10px 14px; border-radius: 9px; box-shadow: 0 3px 10px rgb(0 0 0 / 30%); }
.slab-edition { font: 1000 .74rem Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.slab-name { flex: 1; overflow: hidden; text-align: center; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.card-stage.edition-holo { border-color: rgb(125 231 255 / 35%); box-shadow: var(--shadow), 0 0 30px rgb(125 231 255 / 14%), inset 0 1px 0 rgb(255 255 255 / 20%); }
.card-stage.edition-holo .slab-label { border: 1px solid rgb(125 231 255 / 40%); background: linear-gradient(120deg, #0e1620, #1a2333); color: #dff5ff; }
.card-stage.edition-holo .slab-edition { background: linear-gradient(90deg, #7de7ff, #ff78cf, #ffe94a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-stage.edition-first .slab-label { border: 1px solid #4a3a24; background: #17120c; color: #efe6d2; }
.card-stage.edition-gold { border-color: rgb(212 164 55 / 55%); box-shadow: var(--shadow), 0 0 30px rgb(255 190 80 / 16%), inset 0 1px 0 rgb(255 255 255 / 22%); }
.card-stage.edition-gold .slab-label { border: 1px solid #8a641f; background: linear-gradient(180deg, #f7e2a4, #c99f3c); color: #4a3208; }

/* --- Playable battle moves and exploratory game concepts --- */
.move-bank { margin-top: 32px; }
.move-bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.move-card { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 6px; background: #182019; }
.move-card header { display: flex; justify-content: space-between; align-items: baseline; font-size: .55rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.move-card header b { color: var(--ember); font-size: .8rem; }
.move-card strong { font: 600 1rem Georgia, serif; }
.move-card p { flex: 1; margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }
.move-card footer { color: #8f998f; font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.move-attack header span { color: var(--ember); }
.move-defense header span { color: #7de7ff; }
.move-debuff header span { color: #d9a2e8; }
.move-support header span { color: var(--acid); }
.move-passive header span { color: var(--gold); }
.move-signature { border-color: #7c5c22; background: linear-gradient(160deg, #241d10, #182019); }
.move-signature header span { color: var(--gold); }

/* --- Arcane Duel: Magic-style duel frame --- */
.card-design-arcane-duel { padding: 13px; border: 12px solid #16130e; border-radius: 14px; background: linear-gradient(165deg, var(--type-a), var(--type-b)); color: #17130c; font-family: Georgia, serif; box-shadow: 0 28px 70px rgb(0 0 0 / 45%), inset 0 0 0 2px rgb(255 255 255 / 25%); }
.card-design-arcane-duel::before { inset: 4px; border-color: rgb(0 0 0 / 25%); border-radius: 5px; }
.card-design-arcane-duel .tcg-card-shine { display: none; }
.mtg-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; border: 2px solid rgb(20 15 8 / 55%); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, rgb(255 255 255 / 60%), rgb(255 255 255 / 30%)); }
.mtg-titlebar h3 { min-width: 0; margin: 0; font: 700 clamp(.82rem, .62vw + .55rem, 1.12rem)/1.15 Georgia, serif; overflow-wrap: anywhere; text-wrap: balance; }
.mtg-cost { display: flex; align-items: center; gap: 3px; }
.mtg-cost b, .mtg-cost i { width: 20px; height: 20px; border: 1px solid rgb(0 0 0 / 40%); border-radius: 50%; box-shadow: inset 0 -2px 3px rgb(0 0 0 / 22%); }
.mtg-cost b { display: grid; place-items: center; background: #cfc7b8; font: 800 .7rem Inter, sans-serif; }
.mtg-cost i { background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--type-a) 45%, var(--type-b) 100%); }
.mtg-art { margin: 0 6px; padding: 12px; border-inline: 2px solid rgb(20 15 8 / 45%); background: radial-gradient(circle at 50% 40%, #fdf6e2 0 14%, var(--type-a) 55%, var(--type-b) 100%); }
.mtg-art img { width: 100%; aspect-ratio: 1.28; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 9px 5px rgb(0 0 0 / 30%)); }
.mtg-typeline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 11px; border: 2px solid rgb(20 15 8 / 55%); background: linear-gradient(180deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 28%)); font: 700 .66rem Georgia, serif; }
.mtg-typeline b { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid rgb(0 0 0 / 45%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, #9c741f); font: 800 .55rem Inter, sans-serif; }
.mtg-text { margin: 0 6px; padding: 11px 12px; border: 2px solid rgb(20 15 8 / 45%); border-top: 0; background: #f4edda; font: .66rem/1.5 Georgia, serif; }
.mtg-text p { margin: 0 0 7px; }
.mtg-flavor { margin: 0; padding-top: 7px; border-top: 1px solid rgb(0 0 0 / 15%); color: #5c503a; font-style: italic; }
.mtg-bottomline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px 0; color: rgb(0 0 0 / 60%); font: 700 .54rem Inter, sans-serif; letter-spacing: .05em; }
.mtg-pt { padding: 4px 13px; border: 2px solid rgb(20 15 8 / 60%); border-radius: 6px; background: linear-gradient(180deg, #fff8e2, #d8ceb4); color: #17130c; font: 900 1rem Georgia, serif; }

/* --- Dungeon Crawl: RPG character sheet --- */
.card-design-dungeon-crawl { padding: 16px; border: 5px solid #4a3b6b; border-radius: 10px; background: linear-gradient(170deg, #221a33, #120e1c 60%, #1c1230); color: #e8e2f2; box-shadow: 0 28px 70px rgb(0 0 0 / 50%), 0 0 26px rgb(122 92 220 / 16%), inset 0 0 0 1px rgb(180 160 255 / 22%); }
.card-design-dungeon-crawl::before { border-color: rgb(180 160 255 / 16%); border-radius: 5px; }
.card-design-dungeon-crawl .tcg-card-shine { display: none; }
.rpg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #4a3b6b; }
.rpg-head h3 { margin: 0; font: 700 1.5rem Georgia, serif; color: #f2ecff; }
.rpg-head p { margin: 3px 0 0; color: #a89ec4; font-size: .66rem; }
.rpg-class { flex: none; padding: 6px 10px; border: 1px solid #6b57a0; border-radius: 100px; background: rgb(122 92 220 / 14%); color: #cabdf0; font: 800 .58rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.rpg-body { display: grid; grid-template-columns: 42% 1fr; gap: 12px; margin-bottom: 12px; }
.rpg-portrait { margin: 0; padding: 10px; border: 2px solid #4a3b6b; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #3b2d5e, #191126); }
.rpg-portrait img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 6px rgb(0 0 0 / 45%)); }
.rpg-attrs { display: grid; align-content: center; gap: 7px; margin: 0; }
.rpg-attrs > div { display: grid; grid-template-columns: 76px 1fr 30px; align-items: center; gap: 7px; font-size: .6rem; }
.rpg-attrs dt { overflow: hidden; font-weight: 800; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; color: #b7a9de; }
.rpg-attrs dd { display: contents; margin: 0; }
.rpg-attrs i { height: 7px; overflow: hidden; border-radius: 100px; background: rgb(255 255 255 / 10%); }
.rpg-attrs b { display: block; height: 100%; background: linear-gradient(90deg, #7a5cdc, #7de7ff); }
.rpg-attrs span { text-align: right; font-weight: 800; }
.rpg-skills h4 { margin: 0 0 8px; color: #cabdf0; font: 800 .6rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.rpg-skills ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.rpg-skills li { padding: 8px 11px; border: 1px solid #3a2f52; border-radius: 6px; background: rgb(255 255 255 / 4%); }
.rpg-skills strong { display: block; font: 600 .82rem Georgia, serif; }
.rpg-skills em { color: #b7a9de; font: 800 .52rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.rpg-skills p { margin: 4px 0 0; color: #c6bede; font-size: .62rem; line-height: 1.45; }
.rpg-trait { margin: 12px 0 0; padding: 9px 11px; border: 1px dashed #55437c; border-radius: 6px; color: #cfc6e6; font-size: .62rem; line-height: 1.5; }
.rpg-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; color: #8d82ab; font-size: .56rem; }

/* --- Arena Brawl: arena-minion board style --- */
.card-design-arena-brawl { padding: 20px 18px 66px; border: 6px solid #17130c; border-radius: 26px; background: radial-gradient(circle at 50% 20%, #5b4a33, #2b241a 55%, #17130c); color: #f7ecd8; text-align: center; font-family: Georgia, serif; box-shadow: 0 28px 70px rgb(0 0 0 / 50%), inset 0 0 0 2px rgb(255 230 170 / 22%); }
.card-design-arena-brawl::before { display: none; }
.card-design-arena-brawl .tcg-card-shine { opacity: .4; background: radial-gradient(circle at 50% 8%, rgb(255 230 170 / 30%), transparent 45%); transform: none; }
.arena-mana { position: absolute; z-index: 2; top: 12px; left: 12px; width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid #0a2c60; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #9fd8ff, #1d6fd1 60%, #0c3f8a); color: #fff; font: 900 1.45rem Georgia, serif; text-shadow: 0 2px 2px rgb(0 0 0 / 55%); box-shadow: 0 4px 10px rgb(0 0 0 / 45%), inset 0 2px 3px rgb(255 255 255 / 55%); }
.arena-portrait { width: 72%; margin: 4px auto 0; padding: 14px; aspect-ratio: 1; border: 5px solid #6b5836; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #e8d9b8 0 20%, #a08d67 70%, #58482c 100%); box-shadow: inset 0 0 26px rgb(0 0 0 / 35%), 0 6px 18px rgb(0 0 0 / 40%); }
.arena-portrait img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 9px 6px rgb(0 0 0 / 40%)); }
.arena-ribbon { position: relative; z-index: 1; width: 88%; margin: -20px auto 0; padding: 8px 12px; border: 2px solid #3a1109; border-radius: 10px; background: linear-gradient(180deg, #8a2f1d, #5c1c10); transform: rotate(-1.2deg); box-shadow: 0 5px 14px rgb(0 0 0 / 45%); }
.arena-ribbon h3 { min-width: 0; margin: 0; font: 800 clamp(.95rem, .72vw + .62rem, 1.3rem)/1.15 Georgia, serif; overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 2px 0 rgb(0 0 0 / 45%); }
.arena-tribe { margin: 11px 0 9px; color: #cdbb92; font: 800 .58rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.arena-text { min-height: 96px; display: grid; place-content: center; margin: 0 6px; padding: 12px 14px; border: 3px solid #6b5836; border-radius: 12px; background: #f3e7c9; color: #33270f; font: .7rem/1.5 Georgia, serif; }
.arena-attack, .arena-health { position: absolute; z-index: 2; bottom: 10px; width: 54px; height: 54px; display: grid; place-items: center; border: 3px solid rgb(0 0 0 / 45%); border-radius: 50%; color: #fff; font: 900 1.55rem Georgia, serif; text-shadow: 0 2px 2px rgb(0 0 0 / 55%); box-shadow: 0 4px 10px rgb(0 0 0 / 45%), inset 0 2px 3px rgb(255 255 255 / 45%); }
.arena-attack { left: 10px; background: radial-gradient(circle at 35% 28%, #ffe08a, #d99a1b 55%, #8a5c07); }
.arena-health { right: 10px; background: radial-gradient(circle at 35% 28%, #ff9a8a, #d12f1d 55%, #7c130a); }

/* --- Card tab side-by-side: sticky card, moves alongside on roomy viewports only --- */
.card-side { min-width: 0; display: grid; gap: 14px; align-content: start; }
@media (min-width: 701px) {
  .card-preview-layout .card-stage:not(.edition-standard), .card-preview-layout .card-stage.edition-standard > .cigimon-tcg-card { position: static; width: 100%; }
}
.move-bank { margin-top: 0; }
.move-bank-heading { margin-bottom: 12px; }
.move-bank-heading h3 { margin: 0 0 6px; font: 500 1.4rem Georgia, serif; }
.move-bank-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.move-bank-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
.move-system-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.move-system-badges span { padding: 4px 8px; border: 1px solid rgb(183 243 74 / 42%); border-radius: 100px; background: rgb(183 243 74 / 8%); color: var(--acid); font-size: .52rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.move-canonical { border-color: rgb(183 243 74 / 42%); background: linear-gradient(145deg, rgb(183 243 74 / 8%), #182019 55%); }
.concept-bank { margin-top: 24px; padding-top: 20px; border-top: 1px dashed #47543f; }
.concept-bank-heading h3 { color: #c4abc8; }
.move-concept { opacity: .86; }

/* --- Derived battle profile strip + grouped move bank --- */
.profile-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-bottom: 16px; }
.profile-chip { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid #47543f; border-radius: 6px; background: #1c261d; }
.profile-chip small, .profile-skill small { color: var(--muted); font-size: .52rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.profile-chip strong { color: var(--acid); font: 600 .92rem Georgia, serif; }
.profile-skill { flex: 1 1 120px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: #182019; }
.profile-skill i { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 100px; background: #303a32; }
.profile-skill b { display: block; height: 100%; background: linear-gradient(90deg, #7a5cdc, #7de7ff); }
.profile-skill strong { text-align: right; font-size: .82rem; }
.move-group { margin-bottom: 16px; }
.move-group h4 { margin: 0 0 8px; color: #8f998f; font: 800 .58rem Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.move-trait header span { color: #d9a2e8; }
.move-field header span { color: #7de7ff; }
.move-heist header span { color: #ffb066; }

/* --- Heist Dossier: confidential crew file --- */
.card-design-heist-dossier { padding: 18px; border: 1px solid #8a7a55; border-radius: 4px; background: linear-gradient(170deg, #ddcda7, #c9b688 70%, #bda976); color: #2e2618; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: 0 28px 70px rgb(0 0 0 / 40%), inset 0 0 0 1px rgb(255 255 255 / 35%); }
.card-design-heist-dossier::before { inset: 8px; border: 1px dashed rgb(46 38 24 / 40%); border-radius: 2px; }
.card-design-heist-dossier .tcg-card-shine { display: none; }
.dossier-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid rgb(46 38 24 / 55%); }
.dossier-file { margin: 0 0 4px; font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(46 38 24 / 65%); }
.dossier-head h3 { margin: 0; font: 700 1.5rem/1.05 Georgia, serif; letter-spacing: .01em; }
.dossier-alias { margin: 3px 0 0; font-size: .62rem; font-style: italic; color: rgb(46 38 24 / 70%); }
.dossier-role { flex: none; padding: 6px 10px; border: 2px solid #6d1a12; color: #6d1a12; font-weight: 800; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; transform: rotate(3deg); }
.dossier-stamp { position: absolute; z-index: 2; top: 88px; right: 20px; padding: 4px 10px; border: 3px double #a3241a; border-radius: 3px; color: #a3241a; font: 900 .72rem ui-monospace, SFMono-Regular, monospace; letter-spacing: .22em; text-transform: uppercase; transform: rotate(-8deg); opacity: .82; pointer-events: none; }
.dossier-body { display: grid; grid-template-columns: 44% 1fr; gap: 14px; margin: 14px 0 12px; }
.dossier-mugshot { margin: 0; padding: 8px 8px 6px; border: 1px solid rgb(46 38 24 / 35%); background: #f4ecd8; box-shadow: 0 4px 10px rgb(46 38 24 / 25%); transform: rotate(-1.6deg); }
.dossier-mugshot img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.dossier-mugshot figcaption { padding-top: 5px; text-align: center; font-size: .54rem; letter-spacing: .06em; text-transform: uppercase; color: rgb(46 38 24 / 70%); }
.dossier-skills { display: grid; align-content: center; gap: 9px; margin: 0; }
.dossier-skills > div { display: grid; grid-template-columns: 62px 1fr 30px; align-items: center; gap: 7px; font-size: .6rem; }
.dossier-skills dt { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dossier-skills dd { display: contents; margin: 0; }
.dossier-skills i { height: 9px; border: 1px solid rgb(46 38 24 / 55%); overflow: hidden; background: rgb(255 255 255 / 30%); }
.dossier-skills b { display: block; height: 100%; background: repeating-linear-gradient(90deg, #6d1a12 0 6px, transparent 6px 9px); }
.dossier-skills span { text-align: right; font-weight: 800; }
.dossier-specialty, .dossier-notes { margin: 0 0 10px; padding: 9px 11px; border: 1px solid rgb(46 38 24 / 40%); background: rgb(255 255 255 / 28%); font-size: .6rem; line-height: 1.55; }
.dossier-notes { background: transparent; border-style: dashed; }
.dossier-foot { display: flex; justify-content: space-between; gap: 10px; font-size: .54rem; letter-spacing: .06em; color: rgb(46 38 24 / 75%); }
.dossier-foot b { color: #a3241a; letter-spacing: .12em; }

/* --- League Ticket: sports-style rookie card --- */
.card-design-league-ticket { padding: 0 0 14px; border: 9px solid #f0efe9; border-radius: 18px; background: linear-gradient(180deg, #1d222a, #12161c); color: #f2f4f7; font-family: Inter, ui-sans-serif, system-ui, sans-serif; box-shadow: 0 28px 70px rgb(0 0 0 / 45%); }
.card-design-league-ticket::before { display: none; }
.card-design-league-ticket .tcg-card-shine { opacity: .35; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 22%) 46%, transparent 60%); transform: none; }
.league-band { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; background: linear-gradient(100deg, var(--type-b), var(--type-a)); clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); color: #101318; }
.league-band h3 { flex: 1; min-width: 0; margin: 0; text-align: center; font: 1000 clamp(.92rem, .86vw + .62rem, 1.35rem)/1.1 Inter, sans-serif; font-style: italic; letter-spacing: -.03em; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.league-band > span { font: 900 .56rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.league-photo { margin: -8px 14px 0; padding: 14px; border-radius: 10px; background: radial-gradient(circle at 50% 35%, rgb(255 255 255 / 16%), transparent 65%), linear-gradient(180deg, #262c36, #171b22); border: 1px solid rgb(255 255 255 / 14%); }
.league-photo img { width: 100%; aspect-ratio: 1.15; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 8px rgb(0 0 0 / 45%)); }
.league-info { display: flex; align-items: stretch; justify-content: space-between; gap: 10px; margin: 12px 16px; }
.league-tactic { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 8px; background: rgb(255 255 255 / 6%); }
.league-tactic small { color: #9aa4b2; font-size: .5rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.league-tactic strong { font: 900 .95rem Inter, sans-serif; font-style: italic; text-transform: uppercase; }
.league-grades { display: flex; gap: 7px; }
.league-grades span { display: grid; place-content: center; gap: 1px; width: 52px; text-align: center; border-radius: 8px; border: 1px solid rgb(255 255 255 / 14%); background: rgb(255 255 255 / 5%); }
.league-grades b { font: 1000 1.1rem Inter, sans-serif; }
.league-grades small { overflow: hidden; max-width: 46px; color: #9aa4b2; font-size: .44rem; font-weight: 900; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.grade-A b { color: var(--acid); }
.grade-B b { color: var(--gold); }
.grade-C b { color: #9aa4b2; }
.grade-D b { color: var(--ember); }
.league-form { display: grid; gap: 6px; margin: 0 16px 12px; }
.league-form > div { display: grid; grid-template-columns: 72px 1fr 32px; align-items: center; gap: 8px; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.league-form i { height: 7px; overflow: hidden; border-radius: 100px; background: rgb(255 255 255 / 12%); }
.league-form b { display: block; height: 100%; background: linear-gradient(90deg, var(--type-b), var(--type-a)); }
.league-form strong { text-align: right; }
.league-foot { display: flex; justify-content: space-between; gap: 10px; margin: 0 16px; padding-top: 9px; border-top: 1px solid rgb(255 255 255 / 12%); color: #9aa4b2; font-size: .54rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* --- War Table: territory deployment chit --- */
.card-design-war-table { padding: 18px; border: 3px solid #2c3a4d; border-radius: 8px; background: linear-gradient(170deg, #131a24, #0b1017 65%, #12202b); color: #d7e2ee; font-family: Inter, ui-sans-serif, system-ui, sans-serif; box-shadow: 0 28px 70px rgb(0 0 0 / 50%), inset 0 0 0 1px rgb(125 190 255 / 18%); }
.card-design-war-table::before { content: ""; inset: 0; border: 0; border-radius: 0; opacity: .5; background: repeating-linear-gradient(0deg, transparent, transparent 27px, rgb(125 190 255 / 7%) 28px), repeating-linear-gradient(90deg, transparent, transparent 27px, rgb(125 190 255 / 7%) 28px); }
.card-design-war-table .tcg-card-shine { display: none; }
.war-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #2c3a4d; }
.war-head h3 { margin: 0; font: 700 1.4rem Georgia, serif; color: #eaf2fb; }
.war-head span { padding: 5px 9px; border: 1px solid #3d5a7a; border-radius: 3px; color: #9fc3e8; font: 800 .56rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.war-token { position: relative; width: 62%; margin: 0 auto 14px; }
.war-token figure { margin: 0; padding: 16px; aspect-ratio: 1; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: radial-gradient(circle at 50% 38%, #2a4258 0 24%, #17293a 70%, #0e1a26 100%); border: 0; box-shadow: inset 0 0 24px rgb(0 0 0 / 45%); }
.war-token img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 6px rgb(0 0 0 / 50%)); }
.war-role { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border: 1px solid #3d5a7a; border-radius: 100px; background: #101c29; color: #7dbfff; font: 900 .56rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.war-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.war-scores > div { display: grid; gap: 2px; padding: 10px; border: 1px solid #2c3a4d; border-radius: 5px; background: rgb(125 190 255 / 6%); text-align: center; }
.war-scores small { color: #7f95ab; font-size: .5rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.war-scores strong { font: 700 1.3rem Georgia, serif; color: #bfe0ff; }
.war-orders { margin: 0 0 12px; padding: 10px 12px; border: 1px dashed #3d5a7a; border-radius: 5px; color: #b9cee2; font-size: .62rem; line-height: 1.55; }
.war-foot { display: flex; justify-content: space-between; gap: 10px; color: #7f95ab; font-size: .54rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.move-authored { border-color: #4f6b3a; background: linear-gradient(160deg, #1a2612, #182019); }
.move-authored header span { color: var(--acid); }

/* --- Game sandbox: command shell --- */
.sandbox { min-width: 0; display: grid; gap: 12px; }
.sandbox-head { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 18px 20px; border: 1px solid var(--line); background: linear-gradient(120deg, #202a22, #19211b); }
.sandbox-head > div { min-width: 0; }
.sandbox-head h2 { margin: 0; font: 500 1.9rem Georgia, serif; }
.sandbox-head > div > p:last-child { max-width: 560px; margin: 7px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.sandbox-head b { color: var(--acid); font-weight: 700; }
.sandbox-status { flex: none; min-width: 340px; max-width: 46%; padding: 12px 14px; border: 1px solid #47543f; background: #141b15; font: .66rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: #cbd3c2; }
.sandbox-status p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sandbox-modules, .sandbox-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 10px 12px; border: 1px solid var(--line); background: #141b15; }
.sandbox-tools { justify-content: space-between; gap: 14px; border-color: #465337; background: linear-gradient(120deg, #151d16, #111811); }
.sandbox-tools > div:first-child { min-width: min(100%, 320px); }
.sandbox-tools > div:first-child small { display: block; margin-top: 4px; color: var(--muted); font-size: .62rem; line-height: 1.4; }
.sandbox-tools [role="tablist"] { display: flex; flex-wrap: wrap; gap: 7px; }
.sandbox-tools .fullscreen-toggle { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 3px; white-space: nowrap; }
.sandbox-modules > span, .sandbox-tools > div:first-child > span { margin-right: 3px; color: var(--muted); font: 800 .58rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.sandbox-modules button, .sandbox-tools button { padding: 7px 10px; border: 1px solid #3a4437; border-radius: 100px; background: #111711; color: #808a7c; font: 700 .64rem Inter, sans-serif; }
.sandbox-tools button { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 7px; border-radius: 7px; padding: 9px 11px; text-align: left; }
.sandbox-tools button strong { font: inherit; color: inherit; }
.sandbox-tools button small { padding: 2px 6px; border-radius: 100px; background: #263026; color: #879184; font-size: .52rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sandbox-modules button.on, .sandbox-tools button.selected { border-color: #617943; background: #26331d; color: var(--acid); box-shadow: inset 0 0 0 1px rgb(183 243 74 / 8%); }
.sandbox-tools button.selected small { background: var(--acid); color: #17200f; }
.sandbox-modules button:hover, .sandbox-tools button:hover { border-color: var(--acid); }
.selected-tool-panel { min-width: 0; }
.sandbox-tool-panel { min-width: 0; border: 1px solid var(--line); background: #141b15; }
.tool-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 17px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #1b241d, #141b15); }
.tool-head h3 { margin: 0; font: 500 1.45rem Georgia, serif; }
.tool-head p:last-child { max-width: 700px; margin: 7px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.tool-head label { flex: none; width: min(280px, 42%); }
.quest-tree-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
.quest-tree-summary span { padding: 12px 14px; background: #182019; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }
.quest-tree-summary b { display: block; color: var(--acid); font: 500 1.45rem Georgia, serif; letter-spacing: 0; text-transform: none; }
.quest-graph-legend { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #3d472f; background: #242719; color: #d8d0b6; font-size: .68rem; line-height: 1.45; }
.quest-graph-legend strong { flex: none; color: var(--gold); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.quest-tree-scroll { padding: 14px; display: grid; gap: 12px; }
.quest-tree-card { border: 1px solid #3a4437; background: #101611; }
.quest-tree-card > header { display: flex; justify-content: space-between; gap: 16px; padding: 13px 15px; border-bottom: 1px solid #303a32; background: #182019; }
.quest-tree-card h4 { margin: 2px 0 0; font: 500 1.15rem Georgia, serif; }
.quest-tree-card > header > span { flex: none; align-self: center; padding: 5px 8px; border: 1px solid #52623f; border-radius: 100px; color: var(--acid); font-size: .6rem; font-weight: 800; }
.quest-tree-card > p { margin: 0; padding: 12px 15px; color: #c8c3b7; font-size: .72rem; line-height: 1.5; }
.quest-tree-card > p.quest-route-map { padding-top: 0; color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }
.quest-route-map b { color: var(--acid); }
.quest-tree-stages { display: grid; gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--line); }
.quest-stage { display: grid; grid-template-columns: minmax(210px, .75fr) minmax(0, 1.25fr); gap: 1px; background: var(--line); }
.stage-node, .stage-choices { min-width: 0; margin: 0; padding: 13px; background: #182019; }
.stage-node > span { display: inline-grid; width: 23px; height: 23px; place-items: center; margin-bottom: 8px; border-radius: 50%; background: var(--acid); color: #17200f; font-size: .65rem; font-weight: 900; }
.stage-node strong { display: block; color: var(--ink); font: 500 .95rem Georgia, serif; text-transform: capitalize; }
.stage-node p { margin: 6px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.stage-choices { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.stage-choices li { min-width: min(100%, 190px); padding: 7px 9px; border: 1px solid #374238; border-radius: 4px; background: #101611; color: #d5d0c4; font-size: .65rem; }
.stage-choices li b { color: var(--gold); margin-right: 6px; }
.twist-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.twist-list details { min-width: 0; border: 1px solid #374238; border-radius: 4px; background: #101611; }
.twist-list summary { padding: 8px 10px; color: var(--gold); cursor: pointer; font-size: .64rem; font-weight: 800; }
.twist-list p { margin: 0; padding: 0 10px 8px; color: var(--muted); font-size: .64rem; line-height: 1.4; }
.twist-list ul { display: grid; gap: 5px; margin: 0; padding: 0 10px 10px; list-style: none; }
.quest-flow-graph { display: grid; grid-template-columns: minmax(190px, 1.05fr) minmax(130px, .62fr) minmax(230px, 1.2fr) minmax(130px, .62fr) minmax(190px, 1.05fr) minmax(130px, .62fr) minmax(180px, .85fr); align-items: stretch; gap: 9px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 14px; }
.flow-column { min-width: 0; display: grid; grid-template-rows: auto 1fr; border: 1px solid #3b4538; background: #121912; }
.flow-column > header { min-height: 82px; padding: 11px 12px; border-bottom: 1px solid #303a32; background: #1b241d; }
.flow-column > header strong { display: block; color: var(--acid); font: 500 1.05rem Georgia, serif; }
.flow-column > header span { display: block; margin-top: 5px; color: var(--muted); font-size: .58rem; line-height: 1.35; }
.flow-column > div { display: grid; align-content: start; gap: 8px; padding: 8px; }
.flow-column.middle { border-color: #6c6238; box-shadow: inset 0 0 0 1px rgb(232 187 85 / 8%); }
.flow-column.middle > header { background: linear-gradient(120deg, #252719, #1a2018); }
.flow-column.middle > header strong { color: var(--gold); }
.flow-column.complete { border-color: #526b3e; }
.flow-column.complete > header { background: #1d2a18; }
.flow-stage { min-width: 0; display: grid; grid-template-rows: auto 1fr; border: 1px solid #374238; border-radius: 5px; background: #182019; }
.flow-stage.twist, .flow-stage.twist-pool { border-color: #5d5738; background: #1d2119; }
.flow-stage.complete { border-color: #526b3e; background: #1d2a18; }
.flow-node { padding: 12px; border-bottom: 1px solid #303a32; }
.flow-node > span { display: inline-grid; width: 24px; height: 24px; place-items: center; margin-bottom: 8px; border-radius: 50%; background: var(--acid); color: #17200f; font-size: .65rem; font-weight: 900; }
.flow-stage.twist .flow-node > span, .flow-stage.twist-pool .flow-node > span { background: var(--gold); color: #211806; }
.flow-node strong { display: block; font: 500 1rem Georgia, serif; }
.flow-node small { display: block; margin-top: 3px; overflow: hidden; color: #87917f; font-size: .52rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.flow-node p { margin: 6px 0 0; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.flow-edge { position: relative; min-width: 0; display: grid; align-content: start; gap: 7px; min-height: 100%; padding: 112px 5px 12px; color: #9fa896; text-align: center; font-size: .56rem; line-height: 1.35; text-transform: uppercase; }
.flow-edge::before { content: ""; position: absolute; top: 132px; right: 8px; left: 8px; height: 2px; background: linear-gradient(90deg, #596456, var(--acid)); transform: translateY(-50%); }
.flow-edge::after { content: ""; position: absolute; top: 132px; right: 2px; border: 6px solid transparent; border-left-color: var(--acid); transform: translateY(-50%); }
.flow-edge b, .flow-edge > span, .flow-edge ul, .flow-edge .edge-expand { position: relative; z-index: 1; }
.flow-edge b { display: inline-block; justify-self: center; padding: 2px 6px; border: 1px solid #3d493d; border-radius: 100px; background: #101611; }
.flow-edge b { color: var(--acid); font-size: .58rem; }
.edge-expand { display: inline-flex; justify-self: center; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid #3d493d; border-radius: 100px; background: #101611; color: var(--acid); font: 700 .58rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.edge-expand:hover { border-color: var(--acid); }
.edge-expand i { color: #87917f; font-style: normal; font-size: .54rem; text-transform: none; letter-spacing: 0; }
.flow-edge ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.edge-pill { min-width: 0; padding: 6px 7px; border: 1px solid #3d493d; border-radius: 4px; background: rgb(16 22 17 / 92%); text-align: left; text-transform: none; }
.edge-pill span { display: inline-block; margin-bottom: 3px; color: var(--acid); font-size: .48rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.edge-pill.failure span { color: var(--ember); }
.edge-pill em { display: block; overflow: hidden; color: #c2c9bb; font-style: normal; font-size: .55rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.flow-edge.expanded { z-index: 2; padding-bottom: 16px; }
.flow-edge.expanded .edge-pill em { overflow: visible; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.flow-edge.empty > span { display: inline-block; justify-self: center; padding: 2px 6px; background: #101611; }
.choice-branches { align-content: start; }
.choice-branch { position: relative; overflow: hidden; }
.choice-branch > span { display: block; margin-top: 3px; }
.choice-branch small { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 5px; margin-top: 8px; color: #889183; font-size: .5rem; font-style: normal; text-transform: uppercase; }
.choice-branch small i { height: 1px; background: #3d493d; }
.choice-branch em { font-style: normal; }
.choice-branch em.success { color: #b9d995; }
.choice-branch em.failure { color: #e2a08c; }
.flow-stage.opening .choice-branch { border-color: #435337; }
.flow-stage.finale .choice-branch { border-color: #52623f; background: #111a10; }
.flow-stage.finale .choice-branch small i { background: #52623f; }
.sandbox-log { height: min(66vh, 680px); overflow-y: auto; padding: 18px 20px; border: 1px solid var(--line); border-bottom: 0; background: #0d120e; font: .76rem/1.85 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sandbox-log p { margin: 0 0 2px; white-space: pre-wrap; color: #b9c2b4; }
.sandbox-log .log-echo { color: var(--ink); font-weight: 700; margin-top: 10px; }
.sandbox-log .log-system { color: var(--acid); }
.sandbox-log .log-turn { color: var(--gold); font-weight: 700; margin-top: 6px; }
.sandbox-log .log-action { color: #e6e0d2; }
.sandbox-log .log-roll { color: #8fb8c9; }
.sandbox-log .log-damage { color: var(--ember); }
.sandbox-log .log-ability { color: #c9a2e8; }
.sandbox-log .log-ko { color: var(--ember); font-weight: 800; }
.sandbox-log .log-error { color: #ff9a8a; }
.sandbox-input-wrap { position: relative; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); border: 1px solid var(--line); border-top: 1px solid #2c352b; background: #101611; }
.sandbox-suggest { position: absolute; bottom: calc(100% + 4px); left: 10px; right: 10px; z-index: 5; max-height: 280px; overflow-y: auto; margin: 0; padding: 5px; list-style: none; border: 1px solid #47543f; border-radius: 6px; background: #161d17; box-shadow: 0 -12px 34px rgb(0 0 0 / 40%); }
.sandbox-suggest li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 11px; border-radius: 4px; cursor: pointer; font: .72rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.sandbox-suggest li b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.sandbox-suggest li span { overflow: hidden; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.sandbox-suggest li.selected { background: #26331d; }
.sandbox-suggest li.selected b { color: var(--acid); }
.sandbox-form { display: flex; align-items: center; gap: 10px; padding: 4px 14px; border: 1px solid #47543f; border-radius: 8px; background: #141b15; }
.sandbox-form:focus-within { border-color: var(--acid); box-shadow: 0 0 0 2px rgb(183 243 74 / 13%); }
.sandbox-prompt { color: var(--acid); font: 800 1rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.sandbox-form input { height: 50px; border: 0; background: transparent; padding: 0; font: .85rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.sandbox-form input:focus { box-shadow: none; }
.log-entry { margin: 0; }
.sandbox-log .log-prompt { color: #d4d9d1; font-weight: 700; margin-top: 6px; }
.log-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 9px; }
.log-actions button { padding: 7px 12px; border: 1px solid #47543f; border-radius: 4px; background: #1d271e; color: var(--ink); font: 700 .66rem Inter, ui-sans-serif, system-ui, sans-serif; transition: border-color .12s ease, background .12s ease; }
.log-actions button:hover { border-color: var(--acid); background: #26331d; color: var(--acid); }
.discord-command-builder { border-bottom: 1px solid var(--line); background: #101611; }
.discord-command-builder > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; color: var(--ink); cursor: pointer; list-style: none; }
.discord-command-builder > summary::-webkit-details-marker { display: none; }
.discord-command-builder > summary span:first-child { display: grid; gap: 3px; }
.discord-command-builder > summary b { color: var(--acid); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.discord-command-builder > summary small { color: var(--muted); font-size: .62rem; }
.discord-command-builder[open] > summary > span:last-child { transform: rotate(180deg); }
.sandbox-smoker-switch { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: #101611; color: var(--muted); font-size: .65rem; }
.sandbox-smoker-switch select { width: auto; min-width: 170px; padding: 5px 28px 5px 8px; font-size: .7rem; }
.discord-builder-status { padding: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
.discord-sdk-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 12px; border-top: 1px solid var(--line); background: #101611; }
.discord-sdk-form label { display: grid; gap: 5px; color: var(--muted); font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.discord-sdk-form input, .discord-sdk-form select, .log-actions select { min-height: 40px; border: 1px solid #47543f; border-radius: 4px; background: #141b15; color: var(--ink); padding: 7px 9px; }
.discord-sdk-form .button { align-self: end; min-height: 40px; }
.discord-sdk-autocomplete { display: grid; grid-template-columns: 1fr auto; gap: 5px; align-items: end; }
.discord-sdk-autocomplete label, .discord-sdk-autocomplete select { grid-column: 1 / -1; }
.discord-sdk-autocomplete button { min-height: 34px; border: 1px solid #47543f; border-radius: 4px; background: #1d271e; color: var(--ink); font-weight: 700; }
.discord-command-result { margin-top: 12px; padding-top: 8px; border-top: 1px solid #252d26; }
.discord-sdk-entry { width: min(100%, 560px); margin: 4px 0 10px; padding: 10px 12px; border-radius: 4px; background: #313338; color: #dbdee1; font: .875rem/1.35 Inter, ui-sans-serif, system-ui, sans-serif; }
.discord-sdk-entry.is-ephemeral { border: 1px solid rgb(88 101 242 / 45%); background: rgb(49 51 56 / 92%); }
.discord-response-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 7px !important; color: #b5bac1 !important; font-size: .62rem; }
.discord-response-meta span { padding: 2px 6px; border-radius: 3px; background: #5865f2; color: white; font-weight: 700; }
.discord-response-meta small { color: #949ba4; }
.discord-message-content { margin: 0 0 7px !important; color: #dbdee1 !important; line-height: 1.4; }
.discord-video-preview { display: block; width: min(100%, 560px); aspect-ratio: 16 / 9; margin: 8px 0; border: 0; border-radius: 4px; background: #000; }
.discord-message-content code, .discord-sdk-embed code { padding: 1px 4px; border-radius: 3px; background: #1e1f22; color: #f2f3f5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.discord-code-block { overflow-x: auto; margin: 8px 0 0; padding: 8px; border-radius: 4px; background: #1e1f22; }
.discord-code-block code { padding: 0; white-space: pre; background: transparent; }
.discord-sdk-embed { overflow: hidden; margin: 6px 0; padding: 12px 14px; border-left: 4px solid #5865f2; border-radius: 4px; background: #2b2d31; color: #dbdee1; }
.discord-sdk-embed p { margin: 7px 0 0; color: #dbdee1; white-space: pre-wrap; }
.discord-embed-author { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .76rem; }
.discord-embed-author img, .discord-sdk-embed footer img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.discord-embed-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
.discord-embed-title { display: block; color: #f2f3f5; font-size: .95rem; font-weight: 700; }
a.discord-embed-title { color: #00a8fc; text-decoration: none; }
.discord-embed-thumbnail { width: 80px; max-height: 80px; border-radius: 3px; object-fit: cover; }
.discord-embed-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 12px; margin-top: 10px; }
.discord-embed-fields > div { grid-column: 1 / -1; min-width: 0; }
.discord-embed-fields > div.inline { grid-column: span 1; }
.discord-embed-fields b { color: #f2f3f5; font-size: .78rem; }
.discord-embed-fields p { margin-top: 3px; font-size: .76rem; }
.discord-card-preview { display: block; width: fit-content; max-width: 100%; margin-top: 12px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: zoom-in; }
.discord-card-preview:focus-visible { outline: 2px solid #5865f2; outline-offset: 3px; }
.discord-embed-image { display: block; width: auto; max-width: min(100%, 320px); max-height: 430px; margin: 0; border-radius: 4px; object-fit: contain; }
.discord-sdk-embed footer { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: #b5bac1; }
.discord-sdk-embed footer img { width: 20px; height: 20px; }
.discord-attachment-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 4px; width: min(100%, 520px); margin: 7px 0; }
.discord-attachment-gallery.has-one { width: min(100%, 320px); }
.discord-file-attachments { display: grid; gap: 4px; margin: 7px 0; }
.discord-file-attachments a { color: #00a8fc; font-size: .75rem; overflow-wrap: anywhere; }
.discord-sdk-entry figure { display: grid; gap: 4px; min-width: 0; max-width: none; margin: 0; }
.discord-sdk-entry figure .discord-card-preview { margin-top: 0; }
.discord-sdk-entry figure img { display: block; width: 100%; max-width: 100%; max-height: 430px; border-radius: 6px; object-fit: contain; }
.discord-sdk-entry figcaption { color: var(--muted); font-size: .62rem; }
.log-actions .discord-button.style-1 { border-color: #5865f2; background: #5865f2; color: white; }
.log-actions .discord-button.style-3 { border-color: #248046; background: #248046; color: white; }
.log-actions .discord-button.style-4 { border-color: #da373c; background: #da373c; color: white; }
.log-actions .discord-button.style-5 { border-color: #4e5058; background: transparent; color: #00a8fc; }

/* Card zoom: click the inline card to blow it up to the viewport. */
/* The trigger is a button, so it must not add any box of its own. */
.card-stage-zoom { display: block; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: zoom-in; }
.card-stage-zoom:focus-visible { outline: 2px solid var(--acid); outline-offset: 6px; }
/* .card-stage.edition-standard is display:contents, so the button is what the
   grid sees; keep it participating in the sticky/max-width layout. */
@media (min-width: 701px) {
  .card-preview-layout > .card-stage-zoom { position: sticky; top: 56px; width: 100%; max-width: 440px; }
  .card-preview-layout > .card-stage-zoom > .card-stage:not(.edition-standard),
  .card-preview-layout > .card-stage-zoom .card-stage.edition-standard > .cigimon-tcg-card { position: static; max-width: none; }
}
/* In the dialog the card is laid out at a real width rather than scaled up from
   a narrow one: the layouts use clamp() sizes keyed to vw, so a transform alone
   would enlarge the box while leaving the type at its small-card size, wrapping
   the title and colliding the footer chips.
   Height cannot be solved in CSS here - the card's aspect ratio is not fixed
   (measured 0.475-0.654 across designs) because text reflows as width changes -
   so a layout effect measures the laid-out card and applies the final scale. */
.card-zoom-stage { width: 100%; height: 100%; display: grid; place-items: center; padding: 28px 20px; overflow: hidden; }
.card-zoom-stage > .card-stage:not(.edition-standard),
.card-zoom-stage .card-stage.edition-standard > .cigimon-tcg-card { position: static; width: min(calc(100vw - 40px), 560px); max-width: none; transform-origin: center center; transition: none; }

dialog.tool-fullscreen-dialog { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: var(--paper); }
.discord-image-dialog { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 28px; border: 0; background: rgb(5 8 6 / 94%); cursor: zoom-out; }
.discord-image-dialog[open] { display: grid; place-items: center; }
.discord-image-dialog::backdrop { background: rgb(0 0 0 / 76%); }
.discord-image-dialog > img { display: block; width: auto; max-width: calc(100vw - 56px); height: auto; max-height: calc(100dvh - 56px); margin: auto; border-radius: 8px; object-fit: contain; box-shadow: 0 20px 80px rgb(0 0 0 / 70%); cursor: default; }
.discord-image-dialog .dialog-close { position: fixed; z-index: 2; top: 12px; right: 12px; }
.discord-modal-dialog { width: min(680px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px)); margin: auto; border-color: #30363d; background: #111214; color: #dbdee1; }
.discord-modal-dialog[open] { display: block; }
.discord-modal-dialog::backdrop { background: rgb(0 0 0 / 74%); backdrop-filter: blur(5px); }
.discord-modal-dialog-shell { min-height: 0; padding: 18px; background: #111214; }
.discord-modal-dialog-shell > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 0 14px; border-bottom: 1px solid #2b2d31; }
.discord-modal-dialog-shell > header strong { color: #f2f3f5; font-size: 1rem; }
.discord-modal-dialog-shell .dialog-close { position: static; float: none; flex: 0 0 auto; margin: 0; border-color: #3f4147; background: #1e1f22; color: #dbdee1; }
.discord-modal-content { display: grid; gap: 14px; padding-top: 14px; }
.discord-modal-text { padding-bottom: 14px; border-bottom: 1px solid #2b2d31; color: #dbdee1; line-height: 1.55; }
.discord-modal-text:last-child { padding-bottom: 0; border-bottom: 0; color: #949ba4; font-size: .8rem; }
.discord-modal-field { display: grid; gap: 7px; color: #f2f3f5; }
.discord-modal-field small { color: #b5bac1; font-size: .8rem; line-height: 1.35; }
.discord-modal-field input, .discord-modal-field textarea { width: 100%; border: 1px solid #1e1f22; border-radius: 3px; padding: 10px 12px; background: #1e1f22; color: #dbdee1; font: inherit; }
.discord-modal-field input:focus, .discord-modal-field textarea:focus { border-color: #00a8fc; outline: none; }
.discord-modal-field textarea { min-height: 110px; resize: vertical; }
.discord-modal-actions { display: flex; justify-content: flex-end; padding-top: 18px; }
.discord-markdown-heading { color: #f2f3f5; font-weight: 700; }
.discord-markdown-heading.level-2 { font-size: 1.35em; }
.discord-markdown-heading.level-3 { font-size: 1.08em; }
.discord-markdown-subtext { color: #949ba4; font-size: .8em; }
.tool-fullscreen-dialog .dialog-close { position: fixed; float: none; top: 12px; right: 12px; margin: 0; z-index: 6; }
.tool-fullscreen-dialog .sandbox-tool-panel, .tool-fullscreen-dialog .quest-tree-tool { display: flex; flex-direction: column; height: 100%; min-height: 0; border: 0; }
.tool-fullscreen-dialog .tool-head { flex: none; padding-right: 64px; }
.tool-fullscreen-dialog .sandbox-modules, .tool-fullscreen-dialog .sandbox-input-wrap, .tool-fullscreen-dialog .quest-tree-summary, .tool-fullscreen-dialog .quest-graph-legend { flex: none; }
.tool-fullscreen-dialog .sandbox-log { flex: 1 1 auto; min-height: 0; height: auto; overflow-y: auto; border-left: 0; border-right: 0; }
.tool-fullscreen-dialog .quest-tree-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.tool-fullscreen-dialog .command-sandbox-tool > .tool-head,
.tool-fullscreen-dialog .command-sandbox-tool > .sandbox-modules,
.tool-fullscreen-dialog .command-sandbox-tool > .discord-command-builder { display: none; }
.tool-fullscreen-dialog .command-sandbox-tool .sandbox-log { border-top: 0; background: #0b100c; }
.tool-fullscreen-dialog .command-sandbox-tool .sandbox-input-wrap { border-right: 0; border-bottom: 0; border-left: 0; padding-right: 64px; }

@media (max-width: 700px) {
  .read-only-banner { justify-content: flex-start; gap: 8px; padding: 7px 12px; font-size: .64rem; line-height: 1.25; }
  .read-only-banner strong { white-space: nowrap; }
  .read-only-banner span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .read-only-banner code { display: none; }
  .sandbox-head { display: grid; gap: 12px; padding: 15px; }
  .sandbox-head h2 { font-size: 1.55rem; }
  .sandbox-head > div > p:last-child { max-width: none; font-size: .68rem; }
  .sandbox-status { width: 100%; max-width: none; min-width: 0; padding: 10px 11px; font-size: .62rem; line-height: 1.55; }
  .sandbox-status p { white-space: normal; overflow-wrap: anywhere; }
  .sandbox-modules, .sandbox-tools { align-items: stretch; padding: 8px; }
  .sandbox-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: 7px; }
  .sandbox-tools { display: grid; }
  .sandbox-tools > div:first-child { min-width: 0; }
  .sandbox-tools [role="tablist"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 135px), 1fr)); }
  .sandbox-modules > span, .sandbox-tools > div:first-child > span { width: 100%; margin: 0 0 1px; }
  .sandbox-modules > span { grid-column: 1 / -1; }
  .sandbox-modules button, .sandbox-tools button { flex: 1 1 135px; min-height: 40px; padding: 8px 9px; }
  .sandbox-modules button { min-width: 0; width: 100%; }
  .sandbox-tools button { grid-template-columns: auto 1fr auto; }
  .tool-head { display: grid; gap: 12px; padding: 14px; }
  .tool-head label { width: 100%; }
  .quest-graph-legend { display: grid; gap: 5px; }
  .quest-tree-summary { grid-template-columns: repeat(2, 1fr); }
  .quest-stage { grid-template-columns: 1fr; }
  .quest-flow-graph { grid-template-columns: 1fr; gap: 0; overflow-x: hidden; padding: 10px; }
  .flow-column { border-bottom: 0; }
  .flow-column:last-child { border-bottom: 1px solid #374238; }
  .flow-column > header { min-height: 0; }
  .flow-column > div { padding: 7px; }
  .flow-edge { min-height: 76px; padding: 8px; }
  .flow-edge::before { top: 8px; bottom: 8px; left: 50%; width: 2px; height: auto; background: linear-gradient(180deg, #596456, var(--acid)); transform: translateX(-50%); }
  .flow-edge::after { top: auto; right: auto; bottom: 2px; left: 50%; border-color: transparent; border-top-color: var(--acid); transform: translateX(-50%); }
  .flow-edge b, .flow-edge > span, .flow-edge ul, .flow-edge .edge-expand { justify-self: center; width: min(100%, 420px); }
  .edge-pill em { white-space: normal; overflow-wrap: anywhere; }
  .twist-list { grid-template-columns: 1fr; }
  .sandbox-log { min-width: 0; height: clamp(340px, 54dvh, 560px); padding: 12px; overflow-x: hidden; font-size: .66rem; line-height: 1.6; }
  .sandbox-log p { overflow-wrap: anywhere; }
  .sandbox-suggest { max-height: 220px; }
  .sandbox-suggest li { display: grid; gap: 3px; padding: 9px; font-size: .66rem; }
  .sandbox-suggest li b, .sandbox-suggest li span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .sandbox-form { gap: 8px; padding: 3px 10px; }
  .sandbox-form input { min-width: 0; height: 48px; font-size: 16px; }
  .log-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 135px), 1fr)); }
  .log-actions button { min-height: 40px; padding: 8px 9px; }
}

@media (max-width: 420px) {
  .read-only-banner { padding: 6px 10px; font-size: .6rem; }
  .read-only-banner span { -webkit-line-clamp: 1; }
  .sandbox-head { padding: 13px 12px; }
  .sandbox-tools button { flex-basis: 100%; }
  .quest-tree-summary { grid-template-columns: 1fr; }
  .quest-tree-scroll { padding: 9px; }
  .sandbox-log { height: clamp(300px, 52dvh, 420px); }
}