/* 21 card backs (6 factions x Basic / Ornate / High, plus Hollow). A display choice saved on this device.
   Add back-<faction>-<tier> to a deck chip (.back), a dealt card (.fx-cardback), the opponent's
   hidden hand (.back), or the face-down veiled card (.card.facedown.veiled). No class keeps today's stripes.
   Images are WebP, paths relative to this file. */

.mb-back{position:relative;display:block;aspect-ratio:776/688;width:100%;border-radius:var(--r-md,8px);overflow:hidden;
 background:#1b140e center/cover no-repeat;box-shadow:0 0 0 1px #0006}
.mb-back.back-default{background:radial-gradient(circle at 50% 50%,#e1b86455 0 18%,transparent 19%),repeating-linear-gradient(135deg,#3a2c1f 0 6px,#4a3826 6px 12px);
 box-shadow:inset 0 0 0 2px #e1b86488}

.back[class*=" back-"],
.fx-cardback[class*=" back-"],
.cb-art.veilback[class*=" back-"],
.card.facedown.veiled[class*=" back-"]{background-color:#1b140e;background-size:cover;background-position:center;background-repeat:no-repeat}
.fx-cardback[class*=" back-"]{border:0;box-shadow:0 0 0 1px #000a}
.back[class*=" back-"]{border-color:#2a2118}
.card.facedown.veiled[class*=" back-"]{border-color:#1b140e}
.card.facedown.veiled[class*=" back-"] .art.veilback{background:none;border:0;box-shadow:none;margin:0}
.card.facedown.veiled[class*=" back-"] .art.veilback::after{box-shadow:none}

.mb-back.back-greek-basic,
.back.back-greek-basic,
.fx-cardback.back-greek-basic,
.cb-art.veilback.back-greek-basic,
.card.facedown.veiled.back-greek-basic{background-image:url(greek_basic.webp)}
.mb-back.back-greek-mid,
.back.back-greek-mid,
.fx-cardback.back-greek-mid,
.cb-art.veilback.back-greek-mid,
.card.facedown.veiled.back-greek-mid{background-image:url(greek_mid.webp)}
.mb-back.back-greek-high,
.back.back-greek-high,
.fx-cardback.back-greek-high,
.cb-art.veilback.back-greek-high,
.card.facedown.veiled.back-greek-high{background-image:url(greek_high.webp)}
.mb-back.back-norse-basic,
.back.back-norse-basic,
.fx-cardback.back-norse-basic,
.cb-art.veilback.back-norse-basic,
.card.facedown.veiled.back-norse-basic{background-image:url(norse_basic.webp)}
.mb-back.back-norse-mid,
.back.back-norse-mid,
.fx-cardback.back-norse-mid,
.cb-art.veilback.back-norse-mid,
.card.facedown.veiled.back-norse-mid{background-image:url(norse_mid.webp)}
.mb-back.back-norse-high,
.back.back-norse-high,
.fx-cardback.back-norse-high,
.cb-art.veilback.back-norse-high,
.card.facedown.veiled.back-norse-high{background-image:url(norse_high.webp)}
.mb-back.back-celtic-basic,
.back.back-celtic-basic,
.fx-cardback.back-celtic-basic,
.cb-art.veilback.back-celtic-basic,
.card.facedown.veiled.back-celtic-basic{background-image:url(celtic_basic.webp)}
.mb-back.back-celtic-mid,
.back.back-celtic-mid,
.fx-cardback.back-celtic-mid,
.cb-art.veilback.back-celtic-mid,
.card.facedown.veiled.back-celtic-mid{background-image:url(celtic_mid.webp)}
.mb-back.back-celtic-high,
.back.back-celtic-high,
.fx-cardback.back-celtic-high,
.cb-art.veilback.back-celtic-high,
.card.facedown.veiled.back-celtic-high{background-image:url(celtic_high.webp)}
.mb-back.back-mesoamerican-basic,
.back.back-mesoamerican-basic,
.fx-cardback.back-mesoamerican-basic,
.cb-art.veilback.back-mesoamerican-basic,
.card.facedown.veiled.back-mesoamerican-basic{background-image:url(mesoamerican_basic.webp)}
.mb-back.back-mesoamerican-mid,
.back.back-mesoamerican-mid,
.fx-cardback.back-mesoamerican-mid,
.cb-art.veilback.back-mesoamerican-mid,
.card.facedown.veiled.back-mesoamerican-mid{background-image:url(mesoamerican_mid.webp)}
.mb-back.back-mesoamerican-high,
.back.back-mesoamerican-high,
.fx-cardback.back-mesoamerican-high,
.cb-art.veilback.back-mesoamerican-high,
.card.facedown.veiled.back-mesoamerican-high{background-image:url(mesoamerican_high.webp)}
.mb-back.back-egyptian-basic,
.back.back-egyptian-basic,
.fx-cardback.back-egyptian-basic,
.cb-art.veilback.back-egyptian-basic,
.card.facedown.veiled.back-egyptian-basic{background-image:url(egyptian_basic.webp)}
.mb-back.back-egyptian-mid,
.back.back-egyptian-mid,
.fx-cardback.back-egyptian-mid,
.cb-art.veilback.back-egyptian-mid,
.card.facedown.veiled.back-egyptian-mid{background-image:url(egyptian_mid.webp)}
.mb-back.back-egyptian-high,
.back.back-egyptian-high,
.fx-cardback.back-egyptian-high,
.cb-art.veilback.back-egyptian-high,
.card.facedown.veiled.back-egyptian-high{background-image:url(egyptian_high.webp)}
.mb-back.back-japanese-basic,
.back.back-japanese-basic,
.fx-cardback.back-japanese-basic,
.cb-art.veilback.back-japanese-basic,
.card.facedown.veiled.back-japanese-basic{background-image:url(japanese_basic.webp)}
.mb-back.back-japanese-mid,
.back.back-japanese-mid,
.fx-cardback.back-japanese-mid,
.cb-art.veilback.back-japanese-mid,
.card.facedown.veiled.back-japanese-mid{background-image:url(japanese_mid.webp)}
.mb-back.back-japanese-high,
.back.back-japanese-high,
.fx-cardback.back-japanese-high,
.cb-art.veilback.back-japanese-high,
.card.facedown.veiled.back-japanese-high{background-image:url(japanese_high.webp)}
.mb-back.back-hollow-basic,
.back.back-hollow-basic,
.fx-cardback.back-hollow-basic,
.cb-art.veilback.back-hollow-basic,
.card.facedown.veiled.back-hollow-basic{background-image:url(back_hollow_basic.jpg)}
.mb-back.back-hollow-mid,
.back.back-hollow-mid,
.fx-cardback.back-hollow-mid,
.cb-art.veilback.back-hollow-mid,
.card.facedown.veiled.back-hollow-mid{background-image:url(back_hollow_mid.jpg)}
.mb-back.back-hollow-high,
.back.back-hollow-high,
.fx-cardback.back-hollow-high,
.cb-art.veilback.back-hollow-high,
.card.facedown.veiled.back-hollow-high{background-image:url(back_hollow_high.jpg)}

/* The deck count shows a small copy of the chosen back. Default (no class) adds nothing. */
.st.deck .deckback{display:inline-block;width:20px;height:26px;margin:0 6px 0 0;vertical-align:middle;flex:none}
@media (max-height:500px) and (min-width:560px) and (orientation:landscape){
 .st.deck .deckback{width:14px;height:18px}
}

/* Settings picker. Text is 13.5px so it stays at the body size. Buttons are at least 44px. */
.scr-settings .pg>.pg-card.st-cosmetics{display:block}
.st-cosmetics h2{margin:0 0 4px;font-size:16px;font-weight:700;color:#f6e7c1;font-family:var(--font-display)}
.cos-note{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:#d8cab0}
.cos-block{margin:0 0 12px}
.cos-block>b{display:block;font-size:13.5px;color:#f6e7c1}
.cos-backs,.cos-frames{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:8px}
.cos-group{flex:1 1 100%;margin:4px 0 0;font-size:13.5px;font-weight:700;color:#f6e7c1}
.cos-back{flex:0 1 104px;width:104px;min-width:44px;min-height:44px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:2px;
 padding:4px;background:#241c16;color:#eadfca;border:1px solid #6d5a44;border-radius:8px;font-size:13.5px;line-height:1.2}
.cos-back .mb-back{width:72px;height:64px;flex:none}
.cos-lab,.cos-tier,.cos-lock{font-size:13.5px;line-height:1.2;text-align:center}
.cos-tier{color:#d8cab0;font-weight:400}
.cos-lock{display:block;font-weight:800;letter-spacing:.03em;color:#f6e7c1}
.cl-back .cos-lock{font-size:13.5px;letter-spacing:0}
.st-row .cos-lock{display:inline-block;margin-left:8px;vertical-align:middle}
.cos-back[aria-pressed="true"]{border-color:#e1b864;box-shadow:0 0 0 2px #e1b864}
.cos-back:disabled,.cos-back.is-locked{opacity:.5;filter:grayscale(.45);cursor:not-allowed}
.cos-frame{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;border:1px solid #6d5a44;border-radius:8px;
 font-size:13.5px;line-height:1.2;color:#eadfca;background:#241c16}
.cos-frame i{width:16px;height:16px;border-radius:4px;display:block;flex:none;box-shadow:inset 0 0 0 1px #0006}
.cos-frame.is-locked{opacity:.5;filter:grayscale(.35)}
.cos-frame .cos-lock{display:inline;font-size:13.5px}
.st-row.cos-locked .switch{opacity:.45}
.cos-sample{margin-top:8px}
.cos-sample .card{margin:0}