/* MTG components inherit site typography. All selectors are scoped to this module. */
.wpp-mtg-card,.wpp-mtg-group { --wpp-mtg-border: #cbd2d9; --wpp-mtg-muted: #617080; color: inherit; font-family: inherit; box-sizing: border-box; margin-block: 1.5em; min-width: 0; overflow-wrap: anywhere; }
.wpp-mtg-card *, .wpp-mtg-group * { box-sizing: border-box; }
.wpp-mtg-card { padding: clamp(14px,3vw,24px); border: 1px solid var(--wpp-mtg-border); border-radius: 12px; background: transparent; }
.wpp-mtg-panel { display: grid; grid-template-columns: minmax(130px,280px) minmax(0,1fr); align-items: start; gap: clamp(16px,3vw,28px); }
.wpp-mtg-panel--no-image { grid-template-columns: minmax(0,1fr); }
.wpp-mtg-card--image .wpp-mtg-panel { display: block; }
.wpp-mtg-card--image { max-width: 360px; margin-inline: auto; padding: 12px; }
.wpp-mtg-card .wpp-mtg-media { margin: 0; line-height: 0; }
.wpp-mtg-card .wpp-mtg-image { display: block; width: 100%; height: auto; max-width: 100%; max-height: 480px; object-fit: contain; border-radius: 11px; margin: 0; }
.wpp-mtg-card .wpp-mtg-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--wpp-mtg-border); }
.wpp-mtg-card .wpp-mtg-name, .wpp-mtg-group .wpp-mtg-name { margin: 0; font: inherit; font-size: 1.3em; line-height: 1.25; }
.wpp-mtg-card .wpp-mtg-info p { margin-block: 0 12px; font-size: inherit; line-height: 1.5; }
.wpp-mtg-card .wpp-mtg-rules { margin-block: 16px; line-height: 1.65; white-space: normal; }
.wpp-mtg-card .wpp-mtg-type { font-weight: 600; }
.wpp-mtg-card .wpp-mtg-stats { font-weight: 700; }
.wpp-mtg-card .wpp-mtg-flavor { font-style: italic; opacity: .85; }
.wpp-mtg-card .wpp-mtg-printing, .wpp-mtg-card .wpp-mtg-caption { font-size: .88em; margin-block: 12px 0; line-height: 1.5; }
.wpp-mtg-card .wpp-mtg-printing { opacity: .8; }
.wpp-mtg-combined-face + .wpp-mtg-combined-face, .wpp-mtg-face + .wpp-mtg-face { margin-block-start: 20px; padding-block-start: 20px; border-block-start: 1px solid var(--wpp-mtg-border); }
[data-mtg-flip][data-mtg-initialized] .wpp-mtg-face + .wpp-mtg-face { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.wpp-mtg-card .wpp-mtg-face-name { margin: 0; }
.wpp-mtg-card .wpp-mtg-face[hidden],.wpp-mtg-card .wpp-mtg-face-controls[hidden],.wpp-mtg-group [hidden] { display: none !important; }
.wpp-mtg-face-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.wpp-mtg-card .wpp-mtg-face-controls button,.wpp-mtg-group .wpp-mtg-face-controls button { border: 1px solid var(--wpp-mtg-border); padding: 8px 12px; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: .85em; cursor: pointer; line-height: 1.4; min-height: 36px; }
.wpp-mtg-face-controls button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px currentColor; font-weight: 700; }
.wpp-mtg-card a:focus-visible,.wpp-mtg-group a:focus-visible,.wpp-mtg-card button:focus-visible,.wpp-mtg-group button:focus-visible,.wpp-mtg-group summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.wpp-mtg-card .wpp-mtg-cost,.wpp-mtg-group .wpp-mtg-cost { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
img.wpp-mtg-symbol,span.wpp-mtg-symbol { display: inline-block !important; width: 1.15em !important; height: 1.15em !important; max-width: none !important; margin: 0 .06em !important; padding: 0 !important; vertical-align: -.2em; border: 0; }
span.wpp-mtg-symbol--hybrid { width: 1.55em !important; height: 1.55em !important; border-radius: 50%; font: bold .7em/1.55em system-ui,sans-serif; text-align: center; background: linear-gradient(135deg,var(--mtg-hybrid-left,#eee) 50%,var(--mtg-hybrid-right,#bbb) 50%); color: #15202c; text-shadow: 0 0 2px #fff,0 0 2px #fff; box-shadow: 0 0 0 1px #888; }
.wpp-mtg-card .wpp-mtg-fallback p { margin: 6px 0 0; font-size: .9em; opacity: .8; }
.wpp-mtg-group { border: 1px solid var(--wpp-mtg-border); border-radius: 12px; padding: clamp(12px,2.5vw,24px); }
.wpp-mtg-group .wpp-mtg-group-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-block-end: 18px; }
.wpp-mtg-group .wpp-mtg-group-title { margin: 0; font-size: 1.2em; }
.wpp-mtg-group .wpp-mtg-group-count { margin: 0; font-size: .9em; opacity: .8; }
.wpp-mtg-grid { display: grid; gap: 18px; }
.wpp-mtg-grid--1 { grid-template-columns: minmax(0,1fr); }
.wpp-mtg-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.wpp-mtg-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.wpp-mtg-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.wpp-mtg-grid .wpp-mtg-card { margin: 0; width: 100%; padding: 12px; max-width: none; height: 100%; }
.wpp-mtg-grid .wpp-mtg-panel { display: block; }
.wpp-mtg-grid .wpp-mtg-info { margin-block-start: 16px; }
.wpp-mtg-group .wpp-mtg-quantity { margin: 8px 0 0; font-size: .85em; text-align: center; }
.wpp-mtg-group .wpp-mtg-text-list { margin: 0; padding: 0; list-style: none; }
.wpp-mtg-group .wpp-mtg-text-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; padding-block: 10px; border-block-end: 1px solid var(--wpp-mtg-border); }
.wpp-mtg-text-list .wpp-mtg-cost { margin-inline-start: auto; }
.wpp-mtg-cube { display: grid; grid-template-columns: minmax(160px,.85fr) minmax(0,1.15fr); align-items: start; gap: clamp(16px,3vw,30px); }
.wpp-mtg-cube .wpp-mtg-preview { position: sticky; top: 24px; min-width: 0; text-align: center; }
.wpp-mtg-preview img[data-mtg-preview-image] { display: block; width: 100%; height: auto; max-height: 420px; max-width: 290px; object-fit: contain; margin: 0 auto 14px; border-radius: 11px; }
.wpp-mtg-preview p { margin: 6px 0; line-height: 1.4; }
.wpp-mtg-preview .wpp-mtg-face-controls { margin-block: 12px; justify-content: center; }
.wpp-mtg-group .wpp-mtg-bucket { border: 1px solid var(--wpp-mtg-border); border-radius: 7px; margin-block: 0 10px; }
.wpp-mtg-group .wpp-mtg-bucket summary,.wpp-mtg-group .wpp-mtg-bucket-title { cursor: pointer; padding: 10px 12px; margin: 0; font-weight: 700; }
.wpp-mtg-bucket-count { float: inline-end; margin-inline-start: 8px; font-weight: 400; font-size: .9em; }
.wpp-mtg-group .wpp-mtg-type-title { margin: 10px 12px 4px; font-size: .84em; font-weight: 700; opacity: .8; }
.wpp-mtg-group .wpp-mtg-cube-list { margin: 0; padding: 0 6px 8px; list-style: none; }
.wpp-mtg-cube-list li { margin: 0; padding: 0; }
.wpp-mtg-group .wpp-mtg-cube-list button { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: start; font: inherit; font-size: .94em; line-height: 1.4; min-height: 36px; padding: 8px; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.wpp-mtg-cube-list button[aria-pressed="true"] { font-weight: 700; box-shadow: inset 3px 0 0 currentColor; }
.wpp-mtg-cube-list button:hover { background: #8881; }
.wpp-mtg-editor-placeholder { border: 1px dashed #a5adb7; padding: 20px; border-radius: 8px; }
.wpp-mtg-editor-note { font-size: 13px; margin: 10px 0; }
.wpp-mtg-author { max-width: 900px; }
.wpp-mtg-author [data-mtg-result] img { max-width: 190px; height: auto; display: block; margin-block: 12px; }
.wpp-mtg-author textarea { display: block; width: 100%; max-width: 800px; min-height: 75px; }
@media (max-width:760px) { .wpp-mtg-panel { grid-template-columns: minmax(110px,220px) minmax(0,1fr); } .wpp-mtg-grid--4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .wpp-mtg-panel { display: block; } .wpp-mtg-card .wpp-mtg-media { max-width: 300px; margin-inline: auto; } .wpp-mtg-card .wpp-mtg-info { margin-block-start: 18px; } .wpp-mtg-grid--2,.wpp-mtg-grid--3,.wpp-mtg-grid--4 { grid-template-columns: minmax(0,1fr); } .wpp-mtg-cube { display: block; } .wpp-mtg-cube .wpp-mtg-preview { position: static; margin-block-end: 20px; } .wpp-mtg-preview img[data-mtg-preview-image] { max-height: 300px; } }
