* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-display); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.builder-shell { max-width: 1680px; margin: 0 auto; padding: 28px clamp(14px, 2.4vw, 38px) 56px; }
.builder-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; }
.builder-kicker, .panel-kicker { margin: 0 0 6px; color: var(--red); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.builder-title { margin: 0; font-size: clamp(2.25rem, 5vw, 4.6rem); line-height: .92; letter-spacing: .02em; text-transform: uppercase; }
.builder-sub { max-width: 760px; margin: 12px 0 0; color: var(--text-2); line-height: 1.65; font-size: 14px; }
.hero-status { min-width: 190px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); text-align: right; }
.hero-status strong { display: block; font-family: var(--font-mono); font-size: 1.4rem; }
.hero-status span { color: var(--text-3); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }

.builder-top-tabs, .mobile-view-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.top-tab, .mobile-tab { min-height: 40px; padding: 0 16px; border: 1px solid var(--border-2); background: var(--bg-2); color: var(--text-2); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.top-tab[aria-selected="true"], .mobile-tab[aria-selected="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.mobile-view-tabs { display: none; position: sticky; top: 64px; z-index: 20; background: var(--bg); padding: 8px 0; }
.mobile-tab { flex: 1; padding: 0 8px; }

.builder-toolbar { display: grid; grid-template-columns: 280px minmax(0, 1fr) 360px; gap: 10px; align-items: center; padding: 12px; margin-bottom: 14px; border: 1px solid var(--border); background: var(--panel); }
.field-label { display: block; margin-bottom: 5px; color: var(--text-3); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.builder-input, .builder-select, .builder-textarea { width: 100%; border: 1px solid var(--border-2); background: var(--bg-3); color: var(--text); padding: 10px 11px; outline: none; }
.builder-input:focus, .builder-select:focus, .builder-textarea:focus { border-color: var(--red); box-shadow: 0 0 0 2px rgba(229,57,53,.13); }
.toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.action-btn { min-height: 38px; padding: 0 12px; border: 1px solid var(--border-2); background: var(--bg-3); color: var(--text); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.action-btn:hover { border-color: var(--red); }
.action-btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.action-btn:disabled { opacity: .38; cursor: not-allowed; }

.builder-workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr) 360px; gap: 14px; align-items: stretch; }
.builder-panel { min-width: 0; background: var(--panel); border: 1px solid var(--border); }
.builder-panel[data-panel="catalog"] { display:flex; flex-direction:column; min-height:0; }
.builder-panel[data-panel="catalog"] .card-grid { flex:1; min-height:0; }
.builder-panel[data-panel="deck"]{display:flex;flex-direction:column;min-height:100%;overflow:hidden}.builder-panel[data-panel="deck"] .deck-list{flex:1;min-height:260px;max-height:none}
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.panel-title { margin: 0; font-size: 13px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.panel-meta { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; }
.panel-body { padding: 12px; }

.paragon-panel { overflow: visible; }
.paragon-drawer { min-width:0; }
.paragon-selected { min-height: 174px; padding: 14px; background: linear-gradient(145deg, rgba(229,57,53,.12), rgba(255,255,255,.01)); border-bottom: 1px solid var(--border); }
.paragon-selected.empty { display: grid; place-items: center; text-align: center; color: var(--text-3); }
.paragon-card-summary { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; }
.paragon-card-summary img { width: 84px; aspect-ratio: 5 / 7; object-fit: cover; border: 1px solid var(--paragon-accent,var(--border-2)); background:radial-gradient(circle at 50% 35%,var(--paragon-glow,rgba(255,255,255,.08)),transparent 62%),var(--bg-3); filter:brightness(1.12) contrast(1.12) saturate(1.08); box-shadow:0 0 22px var(--paragon-glow,rgba(255,255,255,.08)); }
.paragon-name { margin: 0; font-size: 18px; line-height: 1.08; text-transform: uppercase; }
.paragon-parallel { margin: 6px 0 0; color: var(--text-2); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.paragon-rule { margin: 8px 0 0; color: var(--gold); font-size: 11px; line-height: 1.45; }
.paragon-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 430px; overflow: auto; padding: 10px; }
.paragon-option { min-width: 0; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); padding: 5px; text-align: left; touch-action:manipulation; }
.paragon-option:hover, .paragon-option.active { border-color: var(--red); background: var(--red-dim); }
.paragon-option img { width: 100%; aspect-ratio: 5 / 7; display: block; object-fit: cover; background:radial-gradient(circle at 50% 35%,var(--paragon-glow,rgba(255,255,255,.08)),transparent 64%),var(--bg-3); filter:brightness(1.1) contrast(1.12) saturate(1.08); transition:filter .16s ease,transform .16s ease; }
.paragon-option:hover img,.paragon-option.active img{filter:brightness(1.2) contrast(1.16) saturate(1.14);transform:scale(1.015)}
.paragon-option span { display: block; margin-top: 5px; font-size: 8px; line-height: 1.2; font-weight: 900; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }

.catalog-controls { display: grid; grid-template-columns: minmax(180px, 1.7fr) repeat(3, minmax(110px, .7fr)); gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-content:start; gap: 9px; padding: 10px 10px 28px; max-height:none; overflow:auto; overscroll-behavior:contain; }
.card-tile { position: relative; min-width: 0; border: 1px solid var(--border); background: var(--bg-2); overflow: hidden; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.card-tile:hover, .card-tile:focus-within { z-index:4; transform:translateY(-3px) scale(1.012); border-color:#ff4b4b; box-shadow:0 0 0 1px rgba(255,75,75,.9),0 0 18px rgba(229,57,53,.72),0 0 42px rgba(229,57,53,.34),0 14px 28px rgba(0,0,0,.52); }
.card-tile:hover .card-art-img,.card-tile:focus-within .card-art-img { filter:saturate(1.08) brightness(1.05); }
.card-image-btn { position:relative; display:block; width:100%; aspect-ratio:4 / 5; padding:0; border: 0; background: var(--bg-3); color: inherit; overflow:hidden; }
.card-image-btn img { display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; background: linear-gradient(120deg,#0b0b0e 20%,#17171d 45%,#0b0b0e 70%); }
.tilt-card-image { opacity: .18; transition: opacity .16s ease; }
.tilt-card-image.is-loaded { opacity: 1; }
.tilt-card-image.is-error { opacity: .35; }
.card-tile { contain: none; }
.card-image-fallback { display: grid; place-items: center; aspect-ratio: 5 / 7; color: var(--text-3); font-family: var(--font-mono); font-size: 11px; }
.card-info { padding: 8px; }
.card-name { min-height: 32px; font-size: 11px; font-weight: 900; line-height: 1.3; }
.card-meta { display: flex; justify-content: space-between; gap: 6px; margin-top: 4px; color: var(--text-3); font-size: 9px; text-transform: uppercase; }
.qty-controls { display: grid; grid-template-columns: 34px 1fr 34px; gap: 5px; padding: 0 8px 8px; }
.qty-btn { height: 32px; border: 1px solid var(--border-2); background: var(--bg-3); color: var(--text); font-weight: 900; }
.qty-btn:hover:not(:disabled) { border-color: var(--red); color: var(--red2); }
.qty-btn:disabled { opacity: .3; cursor: not-allowed; }
.qty-value { display: grid; place-items: center; border: 1px solid var(--border); background: #08080a; font-family: var(--font-mono); font-size: 12px; }
.card-tile.in-deck { box-shadow: inset 0 -3px 0 var(--red); }
.card-tile.legendary { border-top-color: rgba(255,209,102,.7); }

.deck-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
.summary-cell { padding: 11px 8px; border-right: 1px solid var(--border); text-align: center; }
.summary-cell:last-child { border-right: 0; }
.summary-value { display: block; font-family: var(--font-mono); font-size: 18px; font-weight: 900; }
.summary-label { display: block; color: var(--text-3); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.legality-box { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.legality-state { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.legality-state.ok { color: var(--green); }
.legality-state.bad { color: var(--gold); }
.issue-list { margin: 8px 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: 11px; line-height: 1.5; }
.issue-list li { padding-left: 13px; position: relative; }
.issue-list li::before { content: '•'; position: absolute; left: 0; color: var(--red); }
.deck-list { max-height: calc(100vh - 470px); overflow: auto; }
.deck-group-title { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; padding: 8px 10px; background: #0b0b0e; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text-3); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.deck-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid rgba(52,52,61,.55); }
.deck-row button.deck-card-name { padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; font-size: 11px; font-weight: 800; }
.deck-row button.deck-card-name:hover { color: var(--red2); }
.deck-row-qty { display: grid; place-items: center; width: 34px; height: 30px; background: var(--bg-3); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; }
.deck-row-actions { display: flex; gap: 4px; }
.deck-row-actions button { width: 28px; height: 28px; border: 1px solid var(--border); background: var(--bg-3); color: var(--text); }
.deck-row-actions button:hover { border-color: var(--red); }
.empty-state { padding: 34px 18px; color: var(--text-3); text-align: center; font-size: 12px; line-height: 1.6; }

.analysis-panel { margin-top: 14px; }
.analysis-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.rail-analysis { margin: 0; border-top: 1px solid var(--border); background: rgba(0,0,0,.08); }
.rail-analysis .panel-header { min-height: 48px; padding: 10px 12px; }
.rail-analysis .panel-body { padding: 10px; }
.rail-analysis .analysis-grid { grid-template-columns: 1fr; gap: 10px; }
.rail-analysis .analysis-card { padding: 10px; }
.rail-analysis .curve-chart { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; min-height: 132px; }
.rail-analysis .curve-bar-btn { min-height: 112px; }
.rail-analysis .breakdown-row { gap: 7px; }
.analysis-card { border: 1px solid var(--border); background: var(--bg-2); padding: 12px; }
.analysis-title { margin: 0 0 10px; color: var(--text-3); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.curve-chart { display: grid; grid-template-columns: repeat(10, minmax(18px, 1fr)); gap: 5px; align-items: end; min-height: 150px; }
.curve-bar-btn { position: relative; display: flex; align-items: end; justify-content: center; min-height: 130px; padding: 0; border: 0; background: transparent; color: var(--text-3); }
.curve-bar { width: 100%; min-height: 3px; background: linear-gradient(180deg, var(--red2), #8e1d1a); border: 1px solid rgba(255,255,255,.08); }
.curve-count { position: absolute; top: 0; color: var(--text); font-family: var(--font-mono); font-size: 10px; }
.curve-label { position: absolute; bottom: -18px; font-family: var(--font-mono); font-size: 9px; }
.curve-bar-btn.active .curve-bar { background: var(--cyan); }
.breakdown-list { display: grid; gap: 7px; }
.breakdown-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.breakdown-label { font-size: 10px; text-transform: uppercase; }
.breakdown-value { font-family: var(--font-mono); font-size: 11px; }
.breakdown-track { grid-column: 1 / -1; height: 4px; background: var(--border); }
.breakdown-fill { height: 100%; background: var(--red); }

.lab-shell { display: none; }
.lab-shell.active { display: block; }
.builder-shell-main.hidden { display: none; }
.lab-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--border); background: var(--panel); margin-bottom: 14px; }
.lab-status { margin-left: auto; color: var(--text-2); font-family: var(--font-mono); font-size: 11px; }
.hand-zone { min-height: 330px; padding: 16px; border: 1px solid var(--border); background: radial-gradient(circle at 50% 0, rgba(229,57,53,.1), transparent 56%), var(--panel); }
.hand-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 12px; }
.hand-card { min-width: 0; border: 1px solid var(--border-2); background: var(--bg-2); }
.hand-card img { display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover; background: var(--bg-3); }
.hand-card-name { padding: 8px; font-size: 10px; font-weight: 900; line-height: 1.3; }
.hand-empty { display: grid; place-items: center; min-height: 280px; color: var(--text-3); text-align: center; }
.lab-history { margin-top: 14px; border: 1px solid var(--border); background: var(--panel); }
.history-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 11px; }
.history-row:last-child { border-bottom: 0; }
.history-row code { color: var(--text-2); font-family: var(--font-mono); }

.modal-backdrop { position: fixed; inset: 0; z-index: 1400; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.8); }
.modal-backdrop.open { display: flex; }
.modal { width: min(720px, 100%); max-height: 90vh; overflow: auto; border: 1px solid var(--border-2); background: var(--bg-2); box-shadow: var(--shadow); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal-title { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.modal-close { width: 34px; height: 34px; border: 1px solid var(--border); background: var(--bg-3); color: var(--text); }
.modal-body { padding: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--border); }
.import-errors { margin: 10px 0 0; padding: 10px; border: 1px solid rgba(229,57,53,.35); background: rgba(229,57,53,.08); color: #ff8d89; font-size: 11px; line-height: 1.5; }
.preview-modal-panel { display: flex; width: min(900px, 100%); max-height: min(88vh, 720px); flex-direction: column; overflow: hidden; }
.preview-modal-panel .modal-header, .paragon-select-modal-panel .modal-header { position:sticky; top:0; z-index:5; background:var(--bg-2); }
.preview-modal-panel .modal-body { min-height: 0; flex: 1; padding: 0; overflow: auto; }
.card-preview { display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); min-height: 470px; }
.card-preview-media { display:grid; place-items:start center; min-width:0; padding:18px; border-right:1px solid var(--border); background:radial-gradient(circle at 50% 28%,rgba(229,57,53,.09),transparent 60%),#08080a; }
.card-preview-art-frame { position:relative; display:block; width:min(100%,320px); aspect-ratio:4/5; overflow:hidden; background:var(--bg-3); border:1px solid var(--border-2); container-type:inline-size; }
.card-preview-image { display:block; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover!important; object-position:center; border:0; background:var(--bg-3); }
.card-preview-details { display: flex; min-width: 0; flex-direction: column; padding: 24px; }
.preview-title { margin: 0; font-size: clamp(22px, 3vw, 34px); line-height: 1.02; text-transform: uppercase; }
.preview-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 18px; }
.preview-badge { padding: 4px 7px; border: 1px solid var(--border-2); color: var(--text-2); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.preview-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.preview-stat { padding: 10px; border: 1px solid var(--border); background: var(--bg-3); }
.preview-stat-value { display: block; font-family: var(--font-mono); font-size: 17px; font-weight: 900; }
.preview-stat-label { display: block; margin-top: 3px; color: var(--text-3); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.preview-section { padding-top: 15px; border-top: 1px solid var(--border); }
.preview-section + .preview-section { margin-top: 15px; }
.preview-section-title { margin: 0 0 7px; color: var(--text-3); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.preview-text { margin: 0; color: var(--text-2); white-space: pre-line; line-height: 1.65; font-size: 13px; }
.preview-flavour { color: var(--text-3); font-style: italic; }
.preview-deck-controls { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; }
.preview-qty { display: grid; place-items: center; min-width: 48px; height: 38px; border: 1px solid var(--border); background: #08080a; font-family: var(--font-mono); font-size: 13px; }
.preview-deck-controls .action-btn { min-width: 44px; }
.preview-control-label { margin-right: auto; color: var(--text-3); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.preview-design-id { margin: 12px 0 0; color: var(--text-3); font-family: var(--font-mono); font-size: 10px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 700; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 14px; background: #16161b; border: 1px solid var(--border-2); color: var(--text); font-size: 11px; font-weight: 800; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1180px) {
  .builder-workspace { grid-template-columns: 240px minmax(0, 1fr) 310px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
}
@media (max-width: 900px) {
  .builder-hero { align-items: flex-start; flex-direction: column; }
  .hero-status { text-align: left; }
  .builder-toolbar { grid-template-columns: 1fr; }
  .toolbar-actions { justify-content: flex-start; }
  .mobile-view-tabs { display: flex; }
  .builder-workspace { display: block; }
  .builder-panel { display: none; }
  .builder-panel.mobile-active { display: block; }
  .paragon-panel .rail-analysis { display: none; }
  .paragon-panel.mobile-analysis-active { display: block; }
  .paragon-panel.mobile-analysis-active .paragon-drawer,
  .paragon-panel.mobile-analysis-active .paragon-collapsed { display: none !important; }
  .paragon-panel.mobile-analysis-active .rail-analysis { display: block; }
  .card-grid, .deck-list { max-height: none; }
  .catalog-controls { grid-template-columns: 1fr 1fr; }
  .paragon-picker { grid-template-columns: repeat(5, 1fr); max-height: none; }
  .hand-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}
@media (max-width: 620px) {
  .builder-shell { padding-inline: 10px; }
  .builder-title { font-size: 2.35rem; }
  .builder-toolbar { padding: 9px; }
  .toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .action-btn { width: 100%; }
  .catalog-controls { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 7px; gap: 7px; }
  .paragon-picker { grid-template-columns: repeat(3, 1fr); }
  .analysis-grid { grid-template-columns: 1fr; }
  .modal-backdrop { align-items: flex-start; padding: 10px; overflow: auto; }
  .preview-modal-panel { max-height: none; }
  .card-preview { grid-template-columns: 1fr; min-height: 0; }
  .card-preview-media { padding: 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .card-preview-art-frame { width:min(100%,360px); }
  .card-preview-details { padding: 18px; }
  .preview-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .preview-deck-controls { position: sticky; bottom: 0; margin-inline: -18px; padding: 12px 18px; background: rgba(15,15,18,.96); border-top: 1px solid var(--border); }
  .hand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-status { width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.hand-card { padding: 0; color: var(--text); text-align: left; cursor: pointer; }
.hand-card.selected { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(110,231,255,.22), inset 0 -4px 0 var(--cyan); }

.card-grid-sentinel { grid-column: 1 / -1; min-height: 44px; display:grid; place-items:center; color:var(--text-3); font-family:var(--font-mono); font-size:10px; }
.card-grid-progress { grid-column: 1 / -1; padding:6px 8px; color:var(--text-3); font-family:var(--font-mono); font-size:9px; text-align:center; }


/* v19.21 Builder rail analysis and triangular card overlays */
.paragon-collapsed { min-height:0; padding:10px; background:linear-gradient(180deg,rgba(229,57,53,.09),transparent 46%),var(--panel); }
.paragon-collapsed-current { display:grid; gap:8px; margin-bottom:10px; text-align:center; }
.paragon-collapsed-current img { width:72px; aspect-ratio:5/7; margin:0 auto; object-fit:cover; border:1px solid var(--border-2); background:var(--bg-3); }
.paragon-collapsed-name { color:var(--text); font-size:10px; font-weight:950; line-height:1.25; text-transform:uppercase; }
.paragon-collapsed-parallel { color:var(--text-3); font-size:9px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.change-paragon-btn { width:100%; min-height:48px; padding:8px; border:1px solid var(--red); background:rgba(229,57,53,.12); color:#fff; font-size:10px; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }
.change-paragon-btn:hover,.change-paragon-btn:focus-visible { background:var(--red); }
.paragon-panel.is-collapsed .paragon-drawer { display:none; }
.paragon-panel:not(.is-collapsed) .paragon-collapsed { display:none; }

.paragon-hover-preview { position:fixed; z-index:1450; width:min(680px,calc(100vw - 36px)); max-height:calc(100vh - 36px); overflow:hidden; pointer-events:none; border:1px solid var(--border-2); background:#0a0a0d; box-shadow:0 28px 90px rgba(0,0,0,.72); }
.paragon-hover-preview[hidden] { display:none; }
.paragon-detail { display:grid; grid-template-columns:minmax(190px,240px) minmax(0,1fr); min-height:340px; }
.paragon-detail-art { position:relative; width:100%; aspect-ratio:4/5; align-self:start; display:block; overflow:hidden; padding:0; border-right:1px solid var(--border); background:#070709; }
.paragon-detail-art img { display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; object-position:center; border:0; background:#070709; filter:brightness(1.08) contrast(1.08) saturate(1.05); box-shadow:none; }
.paragon-detail-info { display:flex; min-width:0; flex-direction:column; padding:20px; }
.paragon-detail-kicker { color:var(--red2); font-size:10px; font-weight:950; letter-spacing:.13em; text-transform:uppercase; }
.paragon-detail-title { margin:7px 0 5px; font-size:clamp(22px,3vw,34px); line-height:1; text-transform:uppercase; }
.paragon-detail-id { margin:0 0 14px; color:var(--text-3); font-family:var(--font-mono); font-size:10px; }
.paragon-detail-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-bottom:15px; }
.paragon-detail-stat { padding:9px; border:1px solid var(--border); background:var(--bg-3); }
.paragon-detail-stat strong { display:block; font-family:var(--font-mono); font-size:16px; }
.paragon-detail-stat span { display:block; margin-top:3px; color:var(--text-3); font-size:8px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.paragon-detail-section { padding-top:12px; border-top:1px solid var(--border); }
.paragon-detail-section + .paragon-detail-section { margin-top:12px; }
.paragon-detail-section h3 { margin:0 0 5px; color:var(--text-3); font-size:9px; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }
.paragon-detail-section p { margin:0; color:var(--text-2); white-space:pre-line; font-size:12px; line-height:1.55; }
.paragon-select-modal-panel { display:flex; width:min(820px,100%); max-height:min(88dvh,760px); flex-direction:column; overflow:hidden; }
.paragon-select-modal-panel .modal-body { min-height:0; overflow:auto; padding:0; }
.paragon-select-modal-panel .modal-actions { flex:none; background:var(--bg-2); }


@media (max-width:900px) {
  .paragon-collapsed { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:70px; }
  .paragon-collapsed-current { grid-template-columns:44px minmax(0,1fr); align-items:center; flex:1; margin:0; text-align:left; }
  .paragon-collapsed-current img { width:44px; }
  .paragon-collapsed-text { min-width:0; }
  .paragon-collapsed-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .change-paragon-btn { width:auto; min-width:150px; }
  .paragon-hover-preview { display:none!important; }
}
@media (max-width:620px) {
  .modal-backdrop { z-index:1400; padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); }
  .preview-modal-panel,.paragon-select-modal-panel { width:100%; max-height:calc(100dvh - max(16px,env(safe-area-inset-top))); }
  .modal-header { flex:none; min-height:58px; padding:8px 10px 8px 14px; }
  .modal-close { position:relative; z-index:8; flex:none; }
  .paragon-detail { grid-template-columns:1fr; }
  .paragon-detail-art { width:min(320px,82vw); margin:0 auto; padding:0; border-right:0; border-bottom:1px solid var(--border); }
  .paragon-detail-art img { width:100%; height:100%; max-width:none; }
  .paragon-detail-info { padding:16px; }
  .paragon-select-modal-panel .modal-actions { position:sticky; bottom:0; z-index:5; padding:max(12px,env(safe-area-inset-bottom)) 12px; }
  .paragon-collapsed { padding:8px; }
  .change-paragon-btn { min-width:132px; min-height:46px; }
  .card-info { padding:6px; }
  .card-name { min-height:34px; font-size:9px; }
  .card-meta { font-size:7px; }
  .qty-controls { grid-template-columns:30px 1fr 30px; gap:3px; padding:0 5px 6px; }
  .qty-btn { height:34px; }
  .card-tile { contain: none; }
}
@media (hover:none) {
  .paragon-option:hover { border-color:var(--border); background:var(--bg-2); }
  .paragon-option.active { border-color:var(--red); background:var(--red-dim); }
}


/* v19.35.3 all-Paragon contrast treatment */
.parallel-augencore{--paragon-accent:#f59a23;--paragon-glow:rgba(245,154,35,.22)}
.parallel-earthen{--paragon-accent:#70d889;--paragon-glow:rgba(112,216,137,.2)}
.parallel-kathari{--paragon-accent:#79d7ff;--paragon-glow:rgba(121,215,255,.23)}
.parallel-marcolian{--paragon-accent:#ff6e66;--paragon-glow:rgba(255,110,102,.2)}
.parallel-shroud{--paragon-accent:#b79cff;--paragon-glow:rgba(183,156,255,.2)}
.deck-rail-guide{display:grid;gap:7px;margin-top:auto;padding:14px;border-top:1px solid var(--border);background:linear-gradient(145deg,rgba(110,231,255,.055),transparent 70%),var(--bg-2)}
.deck-rail-guide strong{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.deck-rail-guide span{font-size:11px;line-height:1.5;color:var(--text-3)}
.deck-rail-guide a{color:var(--text);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.deck-rail-guide a:hover{text-decoration:underline;text-underline-offset:4px}

/* v19.35.3 mobile Paragon selection reliability */
.paragon-load-error{grid-column:1/-1;padding:20px;border:1px solid var(--red);display:grid;gap:12px;color:var(--text)}
.paragon-load-error button{min-height:44px;border:1px solid var(--red);background:var(--red);color:#fff;font-weight:900;text-transform:uppercase}
@media(max-width:900px){
 .paragon-drawer{display:block!important}.paragon-picker{display:grid!important;min-height:240px;overflow:visible}
 .paragon-option{min-height:150px;display:flex;flex-direction:column}.paragon-option img{min-height:118px;object-fit:cover}.paragon-option span{font-size:9px;white-space:normal}
 .paragon-panel.is-collapsed .paragon-drawer{display:none!important}
}


/* v19.35.7 faction-column Paragon selection */
body:not(.builder-has-paragon) .builder-workspace{grid-template-columns:1fr;max-width:1320px;margin-inline:auto}
body:not(.builder-has-paragon) .catalog-panel,body:not(.builder-has-paragon) .deck-panel,body:not(.builder-has-paragon) .analysis-rail{display:none}
body:not(.builder-has-paragon) .paragon-panel{min-height:0}
body:not(.builder-has-paragon) .paragon-selected{min-height:72px;padding:14px;text-align:center}
body:not(.builder-has-paragon) .paragon-picker{grid-template-columns:repeat(5,minmax(0,1fr));max-height:none;overflow:visible;padding:12px;gap:10px;align-items:start}
.paragon-faction-column{display:grid;gap:8px;align-content:start;min-width:0;padding:8px;border:1px solid color-mix(in srgb,var(--paragon-accent) 35%,var(--border));background:linear-gradient(180deg,color-mix(in srgb,var(--paragon-accent) 9%,transparent),transparent 40%),var(--bg-2)}
.paragon-faction-heading{margin:0;padding:4px 3px 8px;border-bottom:2px solid var(--paragon-accent);color:var(--paragon-accent);font:700 10px/1 var(--font-mono);letter-spacing:.12em;text-align:center;text-transform:uppercase}
body:not(.builder-has-paragon) .paragon-option{display:grid;grid-template-columns:1fr;align-items:start;min-height:0;padding:5px;text-align:left}
body:not(.builder-has-paragon) .paragon-option img{width:100%;height:auto;min-height:0;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--border)}
.paragon-option-name{display:block;margin:6px 2px 2px!important;font-size:9px!important;line-height:1.28!important;font-weight:400!important;letter-spacing:.02em;text-transform:none!important;white-space:normal}
.paragon-collapsed-current[tabindex],.paragon-card-summary[tabindex]{cursor:pointer;outline:none}
.paragon-collapsed-current:focus-visible,.paragon-card-summary:focus-visible{box-shadow:0 0 0 2px var(--cyan)}
@media(max-width:1050px){body:not(.builder-has-paragon) .paragon-picker{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){body:not(.builder-has-paragon) .paragon-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.paragon-faction-column{padding:6px}}

/* Card Database hover-detail parity in Builder */
.builder-card-hover-preview{position:fixed;z-index:5000;pointer-events:none;background:rgba(6,6,9,.98);border:1px solid rgba(229,57,53,.38);border-radius:12px;box-shadow:0 22px 70px rgba(0,0,0,.7),0 0 34px rgba(229,57,53,.16);padding:1rem}
.builder-card-hover-preview[hidden]{display:none}
.builder-card-hover-preview .preview-card-shell{display:grid;grid-template-columns:190px 1fr;gap:1rem;position:relative;align-items:start}
.builder-card-hover-preview .preview-art-wrap{position:relative;width:100%;aspect-ratio:4/5;align-self:start;display:block;overflow:hidden;background:#070708;border-radius:8px}
.builder-card-hover-preview .preview-art-wrap img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center;background:#070708;display:block;border-radius:8px;border:1px solid var(--border-2)}
.builder-card-hover-preview .preview-info{min-width:0}
.builder-card-hover-preview .preview-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.55rem}
.builder-card-hover-preview .preview-info h3{font-size:clamp(1.15rem,3vw,1.85rem);line-height:1.02;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.45rem}
.builder-card-hover-preview .preview-line{color:var(--text-2);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.8rem}
.builder-card-hover-preview .preview-stats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.75rem}
.builder-card-hover-preview .preview-stats span,.builder-card-hover-preview .token-badge{border:1px solid var(--border);background:rgba(255,255,255,.035);border-radius:999px;color:var(--text-2);font-family:var(--font-mono);font-size:11px;font-weight:700;padding:4px 8px}
.builder-card-hover-preview .token-badge{color:var(--gold);border-color:rgba(255,209,102,.35)}
.builder-card-hover-preview .preview-text{border-left:2px solid var(--red);background:rgba(255,255,255,.03);border-radius:0 6px 6px 0;padding:.7rem .85rem;margin-bottom:.6rem}
.builder-card-hover-preview .preview-text.muted{border-left-color:var(--text-3)}
.builder-card-hover-preview .preview-text strong{display:block;color:var(--red2);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.25rem}
.builder-card-hover-preview .preview-text p{color:var(--text-2);font-size:13px;line-height:1.55;white-space:pre-line}
.builder-card-hover-preview .preview-info blockquote{color:var(--text-3);font-size:12px;line-height:1.5;border-left:1px solid var(--border);padding-left:.75rem;margin-top:.8rem}
@media(max-width:900px){.builder-card-hover-preview{display:none!important}}
.builder-card-hover-preview .faction-badge{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:2px}
.builder-card-hover-preview .fb-augencore{background:rgba(224,104,32,.15);color:#e06820;border:1px solid rgba(224,104,32,.3)}
.builder-card-hover-preview .fb-earthen{background:rgba(46,158,90,.15);color:#2e9e5a;border:1px solid rgba(46,158,90,.3)}
.builder-card-hover-preview .fb-kathari{background:rgba(74,159,212,.15);color:#4a9fd4;border:1px solid rgba(74,159,212,.3)}
.builder-card-hover-preview .fb-marcolian{background:rgba(224,48,64,.15);color:#e03040;border:1px solid rgba(224,48,64,.3)}
.builder-card-hover-preview .fb-shroud{background:rgba(138,68,192,.15);color:#8a44c0;border:1px solid rgba(138,68,192,.3)}
.builder-card-hover-preview .fb-universal{background:rgba(96,112,144,.15);color:#8090b0;border:1px solid rgba(96,112,144,.3)}
.builder-card-hover-preview .rarity-badge{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:2px}
.builder-card-hover-preview .rb-common{background:rgba(180,180,180,.1);color:#aaa;border:1px solid rgba(180,180,180,.2)}
.builder-card-hover-preview .rb-uncommon{background:rgba(61,178,118,.1);color:#3db276;border:1px solid rgba(61,178,118,.2)}
.builder-card-hover-preview .rb-rare{background:rgba(82,144,255,.1);color:#5290ff;border:1px solid rgba(82,144,255,.2)}
.builder-card-hover-preview .rb-legendary{background:rgba(255,170,40,.1);color:#ffaa28;border:1px solid rgba(255,170,40,.2)}
.builder-card-hover-preview .rb-prime{background:rgba(188,100,255,.1);color:#bc64ff;border:1px solid rgba(188,100,255,.2)}


/* v19.35.7 Builder viewport and artwork-frame corrective */
@media(min-width:901px){
  .builder-workspace{align-items:stretch}
  .builder-panel[data-panel="catalog"]{height:auto;min-height:620px;max-height:min(780px,calc(100dvh - 210px))}
  .builder-panel[data-panel="catalog"] .card-grid{height:100%;max-height:none}
}
.paragon-detail-media{display:flex;flex-direction:column;min-width:0;background:#08080a;border-right:1px solid var(--border)}
.paragon-detail-media .paragon-detail-art{border-right:0;border-bottom:1px solid var(--border)}
.paragon-detail-media .paragon-detail-section{margin:0;padding:14px 16px 16px;border-top:0;background:rgba(255,255,255,.015)}
.paragon-detail-media .paragon-detail-section h3{color:var(--gold)}
@media(max-width:620px){
  .paragon-detail-media{border-right:0;border-bottom:1px solid var(--border)}
  .paragon-detail-media .paragon-detail-art{border-bottom:1px solid var(--border)}
}


/* v19.35.9 Builder catalogue and compact-Paragon crop corrective */
/* v19.35.9 removes faction-specific image enlargement so every compact Paragon artwork element uses the same dimensions. */
.card-grid .card-tile{display:flex;flex-direction:column;height:max-content;min-height:290px;content-visibility:visible;contain:none;contain-intrinsic-size:none}
body.builder-has-paragon .paragon-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:430px;overflow:auto;padding:10px}
body.builder-has-paragon .paragon-faction-column{display:contents}
body.builder-has-paragon .paragon-faction-heading{display:none}
body.builder-has-paragon .paragon-option{overflow:hidden;padding:5px}
body.builder-has-paragon .paragon-option img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:50% 0%;margin:0;border:1px solid var(--border);transform-origin:center top}
body.builder-has-paragon .paragon-option.paragon-crop-bottom img{object-position:50% 100%;transform-origin:center bottom}
@media(max-width:900px){.card-grid .card-tile{min-height:220px}body.builder-has-paragon .paragon-option img{min-height:0;aspect-ratio:8/5}}

/* v19.35.15 builder toolbar alignment */
.builder-mode-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.builder-mode-actions{display:flex;gap:8px;align-items:center}@media(max-width:700px){.builder-mode-row{align-items:stretch;flex-direction:column}.builder-mode-actions{justify-content:flex-end}}

/* v19.35.18 card-hover parity with Paragon detail */
.builder-card-hover-preview{padding:0!important;overflow:hidden;border-radius:4px!important;max-height:min(620px,calc(100vh - 36px));overflow-y:auto}.builder-card-hover-preview .card-hover-paragon-layout{min-height:340px}.builder-card-hover-preview .paragon-detail-art{border-radius:0!important}.builder-card-hover-preview .paragon-detail-art img{border:0!important;border-radius:0!important}.builder-card-hover-preview .paragon-detail-lore{min-height:90px}.builder-card-hover-preview .preview-close{z-index:10}.browse-preview .card-hover-paragon-layout{min-height:340px}


/* v19.35.18 toolbar density and faction identity */
.builder-toolbar{align-items:end}.builder-field{min-width:0}.builder-code-control{display:flex;align-items:stretch;min-width:0}.builder-code-control .builder-input{min-width:0;border-right:0}.builder-code-actions{display:flex}.builder-code-actions .action-btn{min-width:64px;border-left:1px solid var(--border);padding:0 10px}.toolbar-actions{align-self:end;min-height:38px}.toolbar-actions .action-btn{height:38px}.paragon-detail,.paragon-card-summary{position:relative;isolation:isolate;overflow:hidden}.paragon-detail>* ,.paragon-card-summary>*{position:relative;z-index:1}.paragon-detail::after,.paragon-card-summary::after{content:"";position:absolute;z-index:0;right:-20px;top:-24px;width:170px;height:170px;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.16;filter:saturate(.8) brightness(1.2);pointer-events:none;-webkit-mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.85) 45%,transparent 100%);mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.85) 45%,transparent 100%)}.paragon-card-summary::after{width:112px;height:112px;right:-8px;top:-10px;opacity:.2}.parallel-augencore::after{background-image:url('https://res.cloudinary.com/dgpavfutb/image/upload/q_auto/f_auto/v1782347354/Augencore_gd0jvk.svg')}.parallel-earthen::after{background-image:url('https://res.cloudinary.com/dgpavfutb/image/upload/q_auto/f_auto/v1782347357/Earthen_iodvmk.svg')}.parallel-kathari::after{background-image:url('https://res.cloudinary.com/dgpavfutb/image/upload/q_auto/f_auto/v1782347360/Kathari_zxiwjt.svg')}.parallel-marcolian::after{background-image:url('https://res.cloudinary.com/dgpavfutb/image/upload/q_auto/f_auto/v1782347362/Marcolian_pc3vwe.svg')}.parallel-shroud::after{background-image:url('https://res.cloudinary.com/dgpavfutb/image/upload/q_auto/f_auto/v1782347365/Shroud_hjy2ws.svg')}
@media(max-width:900px){.builder-code-control{width:100%}.builder-code-actions .action-btn{min-width:62px}.toolbar-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}}

/* v19.35.25 selected-Paragon single-state contract */
.paragon-panel.is-collapsed .paragon-drawer{display:none!important}
.paragon-panel.is-collapsed .paragon-collapsed{display:grid!important;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:7px 11px;padding:12px}
.paragon-panel.is-collapsed .paragon-collapsed-current{display:contents;margin:0;text-align:left}
.paragon-panel.is-collapsed .paragon-collapsed-current img{grid-column:1;grid-row:1 / span 2;width:72px;margin:0}
.paragon-panel.is-collapsed .paragon-collapsed-text{grid-column:2;grid-row:1;min-width:0}
.paragon-panel.is-collapsed .change-paragon-btn{grid-column:2;grid-row:2;width:100%;min-width:0;min-height:38px}
.paragon-panel:not(.is-collapsed) .paragon-collapsed{display:none!important}
.paragon-panel:not(.is-collapsed) .paragon-selected:not(.empty){display:none}

/* v19.35.25 deck-list hover/focus parity */
.deck-row{position:relative;transition:background .15s ease,border-color .15s ease}
.deck-row:hover,.deck-row:focus-within{background:rgba(229,57,53,.08);box-shadow:inset 2px 0 0 var(--red)}
.deck-card-name:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* v19.35.25 Opening Hand Lab */
.lab-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.lab-panel-label{padding:10px 14px 0;color:var(--text-3);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.hand-zone{min-height:250px;padding:10px}
.hand-grid{grid-template-columns:repeat(5,minmax(92px,150px));justify-content:center;gap:9px}
.hand-card-name{padding:6px;font-size:9px}
.lab-history{margin-top:0}
.lab-shell.is-post-mulligan .lab-stage{grid-template-columns:minmax(0,1.55fr) minmax(320px,.8fr);align-items:start}
.lab-shell.is-post-mulligan .lab-history{max-height:520px;overflow:auto}
.lab-shell.is-post-mulligan .history-row{display:grid;gap:5px}
.lab-shell.is-post-mulligan .history-row code{white-space:normal;line-height:1.45}
@media(max-width:1000px){.builder-toolbar{grid-template-columns:1fr}.lab-shell.is-post-mulligan .lab-stage{grid-template-columns:1fr}.hand-grid{grid-template-columns:repeat(3,minmax(100px,150px))}}
@media(max-width:620px){.hand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}