/* Commander decks — Magic game page only (loaded via $headExtra). */

.mtg-sub{margin:0 0 26px}

.mtg-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px}

.mtg-card{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--edge);
  border-radius:14px;overflow:hidden;cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.mtg-card:hover,.mtg-card:focus-visible{
  transform:translateY(-4px);border-color:var(--gold-dk);box-shadow:0 18px 38px rgba(0,0,0,.45);outline:none}
.mtg-card:focus-visible{border-color:var(--gold)}

.mtg-cover{position:relative;aspect-ratio:16/9;background:var(--panel);overflow:hidden}
.mtg-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.mtg-card:hover .mtg-cover img{transform:scale(1.04)}

.mtg-power{
  position:absolute;right:10px;top:10px;font-family:var(--ui);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;color:#1a1408;background:var(--gold);border-radius:999px;padding:3px 10px;
  box-shadow:0 2px 10px rgba(0,0,0,.5)}

.mtg-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.mtg-body h3{font-family:var(--display);font-size:18px;font-weight:600;color:var(--tx);margin:0;line-height:1.25}
.mtg-cmd{font-family:var(--body);font-size:14.5px;font-style:italic;color:var(--tx-dim);margin:0}
.mtg-style{
  align-self:flex-start;margin-top:auto;font-family:var(--ui);font-size:12px;font-weight:600;
  letter-spacing:.04em;color:var(--tx-dim);background:var(--panel);border:1px solid var(--edge);
  border-radius:20px;padding:4px 11px}

/* mana pips */
.mtg-pips{display:flex;gap:5px}
.mtg-pip{
  width:21px;height:21px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:11.5px;font-weight:700;color:#15120c;
  background:var(--pip);border:1px solid rgba(0,0,0,.35);box-shadow:inset 0 -2px 4px rgba(0,0,0,.18)}

/* ---- detail dialog ---- */
body.mtg-open{overflow:hidden}
.mtg-modal{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(6,6,6,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.mtg-modal[hidden]{display:none}
.mtg-modal-in{
  position:relative;width:min(760px,100%);max-height:88vh;overflow-y:auto;background:var(--card);
  border:1px solid var(--gold-dk);border-radius:16px;box-shadow:0 40px 90px rgba(0,0,0,.65)}
.mtg-close{
  position:absolute;right:12px;top:10px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--edge);background:rgba(12,12,12,.75);color:var(--tx-dim);
  font-size:26px;line-height:1;cursor:pointer}
.mtg-close:hover{color:var(--gold-lt);border-color:var(--gold-dk)}

.mtg-modal-cover{aspect-ratio:16/9;background:var(--panel);overflow:hidden;border-radius:16px 16px 0 0}
.mtg-modal-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mtg-modal-body{padding:22px 26px 28px;display:flex;flex-direction:column;gap:12px}
.mtg-modal-body h2{font-family:var(--display);font-size:27px;font-weight:600;color:var(--tx);margin:0}
.mtg-modal-cmd{margin:0;font-size:16px;color:var(--tx-dim)}
.mtg-modal-cmd span{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-mut)}
.mtg-modal-cmd em{font-style:italic;color:var(--gold-lt)}
.mtg-modal-meta{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0}
.mtg-chip{font-family:var(--ui);font-size:13px;color:var(--tx-dim);background:var(--panel);
  border:1px solid var(--edge);border-radius:20px;padding:5px 13px}
.mtg-chip b{color:var(--gold-lt);font-weight:600}
.mtg-desc{margin:6px 0 0;font-size:16.5px;line-height:1.65;color:var(--tx-dim);white-space:pre-line}

.mtg-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:12px}
.mtg-lists h4{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.mtg-lists ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mtg-lists li{position:relative;padding-left:16px;font-size:15.5px;line-height:1.5;color:var(--tx-dim)}
.mtg-lists li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--gold-dk)}

@media (max-width:640px){
  .mtg-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
  .mtg-modal{padding:0}
  .mtg-modal-in{max-height:100vh;border-radius:0;border:0}
  .mtg-modal-cover{border-radius:0}
  .mtg-modal-body{padding:20px 18px 26px}
  .mtg-modal-body h2{font-size:23px}
}

/* the two helpers above the deck grid */
.mtg-helpers{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0 26px}
.mtg-helper{
  flex:1 1 260px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border:1px solid var(--edge);border-radius:12px;background:var(--card);
}
.mtg-helper p{margin:0;color:var(--tx-dim);font-size:15.5px;line-height:1.4}
.mtg-card.is-picked{
  outline:2px solid var(--gold-lt);outline-offset:3px;
}
@media(prefers-reduced-motion:no-preference){
  .mtg-card.is-picked{transition:outline-color .3s ease}
}
@media(max-width:520px){ .mtg-helper{flex-direction:column;align-items:stretch;text-align:center} }