@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&display=swap');

:root{
  --bg:#0b0f14;
  --panel:#0f1620;
  --card:#121c28;
  --text:#e8eef6;
  --muted:#9fb0c4;
  --border:rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --radius2:24px;
  --max:1100px;
  --accent:#60a5fa;
  --danger:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%; color-scheme: dark;}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(96,165,250,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(34,197,94,.10), transparent 55%),
              var(--bg);
  background-repeat: no-repeat;
  /* Mobile browsers (esp. iOS) can jitter with fixed backgrounds */
  background-attachment: fixed;
  background-size: cover;
  color:var(--text);
}

@media (max-width: 900px){
  body{ background-attachment: scroll; }
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.9}

.container{
  max-width: var(--max);
  margin: 24px auto 60px;
  padding: 0 16px;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  border-bottom:1px solid var(--border);
  background: rgba(11,15,20,.75);
  backdrop-filter: blur(10px);
}

/* Shop page: force the HEADER to stay pinned to the viewport.
   We keep .topbar sticky for the landing page (index.html),
   but make header.topbar fixed for shop.html. */
/* Desktop/tablet: keep header pinned for shop + terms.
   Mobile: sticky behaves better (no overlap when the header wraps). */
@media (min-width: 701px){
  body.shop-page .topbar,
  body.terms-page .topbar{
    position: fixed;
    left: 0;
    right: 0;
    top: env(safe-area-inset-top);
    width: 100%;
    z-index: 999;
  }
  body.shop-page,
  body.terms-page{
    /* Space for fixed header so content doesn't slide under it */
    padding-top: 84px;
  }
}

@media (max-width: 700px){
  body.shop-page,
  body.terms-page{
    padding-top: 14px;
  }
}

body.checkout-page{
  /* Checkout has no fixed header */
  padding-top: 22px;
}

body.contact-page{
  padding-top: 22px;
}

.brand{display:flex;gap:12px;align-items:center}
.brand-link{cursor:pointer}
.brand-link:hover{opacity:1}
.brand-link:focus-visible{
  outline:2px solid rgba(96,165,250,.7);
  outline-offset:4px;
  border-radius:14px;
}
.logo{
  width:30px;
  height:30px;
  border-radius:10px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  background: rgba(255,255,255,.03);
}
.logo img{
  width:100%;
  height:100%;
  object-fit: cover;
  /* Crop to the center of the banner logo */
  object-position: 50% 35%;
  transform: scale(1.25);
}

.brand-title{
  font-family: Cinzel, ui-serif, Georgia, serif;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.brand-subtitle{font-size:12px;color:var(--muted);margin-top:2px}

.nav{display:flex;align-items:center;gap:10px}
.lang-switcher{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
}
.lang-btn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:#d7e4f5;
  border-radius:999px;
  padding:8px 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:.18s ease;
}
.lang-btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
}
.lang-btn.is-active{
  background:rgba(56,189,248,.16);
  border-color:rgba(56,189,248,.45);
  color:#f3fbff;
}

/* Header responsiveness (smartphone-first) */
@media (max-width: 700px){
  .topbar{ flex-wrap: wrap; }
  /* Let the nav drop to a second row if needed (prevents overflow) */
  .nav{ width: 100%; flex-wrap: wrap; justify-content:flex-end; gap: 8px; }
  .lang-switcher{order:98;margin-left:0}
  .cart-btn{order:99}
}

@media (max-width: 520px){
  .brand-subtitle{ display:none; }
  .nav-link{ padding: 8px 10px; }
  .cart-btn{ padding: 8px 10px; }
  .cart-total{ display:none; }
}

@media (max-width: 380px){
  .brand-title{ font-size: 14px; }
  .nav-link{ padding: 7px 9px; }
}
.nav-link{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
}
.nav-link:hover{
  border-color: var(--border);
  background: rgba(255,255,255,.03);
}

.cart-btn{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
}
.cart-btn:hover{background: rgba(255,255,255,.06)}
.cart-icon{font-size:18px}
.cart-meta{display:flex;gap:10px;align-items:baseline}
.cart-count{
  display:inline-grid;place-items:center;
  min-width:22px;height:22px;padding:0 7px;
  border-radius:999px;
  background: rgba(96,165,250,.18);
  border:1px solid rgba(96,165,250,.35);
  font-size:12px;font-weight:700;
}
.cart-total{font-size:13px;color:var(--muted)}

.panel{
  background: rgba(15,22,32,.55);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-top: 18px;
}

.panel-head h1, .panel-head h2{margin:0 0 6px}
.muted{color:var(--muted)}
.tiny{font-size:12px}

.controls{
  display:grid;
  /* Keep the first column stable when sort labels change */
  grid-template-columns: minmax(260px, 1fr) 260px 180px;
  gap: 12px;
  margin-top: 16px;
}
.controls > *{ min-width: 0; }

@media (max-width: 900px){
  .controls{grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .controls{grid-template-columns: 1fr; }
}

.control label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.control input, .control select, .control textarea{
  width:100%;
  padding:11px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline:none;
}
.control input:focus, .control select:focus, .control textarea:focus{
  border-color: rgba(96,165,250,.45);
}
.control-inline{display:flex;align-items:end}
.checkbox{display:flex;align-items:center;gap:10px;color:var(--muted)}
.checkbox input{width:auto}
.checkbox-inline{gap:8px;color:var(--muted);font-size:12px}
.label-row{display:flex;align-items:center;justify-content:flex-start;gap:10px}
/* In label rows we want label + small control to sit together (not pushed to the far right) */
.label-row label{display:inline-block;margin:0}
.control-legality .label-row label{margin:0}

/* Avoid select controls (e.g. Color mode) visually colliding with chip rows */
.label-row + .chip-row{ margin-top: 8px; }

.select-mini{
  width: auto;
  /* Wider, but still compact (used for Color mode: Includes/Exact/Excludes) */
  min-width: 118px;
  max-width: 150px;
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline:none;
}
.select-mini:focus{ border-color: rgba(96,165,250,.45); }

.chip-row-tight{ gap: 6px; }
.chip-suggest{
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
}
.chip-suggest:hover{ background: rgba(255,255,255,.06); }

/* Segmented toggle (Abilities Any/All) */
.seg-toggle{
  display:inline-flex;
  gap:0;
  border:1px solid var(--border);
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
}
.seg-btn{
  appearance:none;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  padding: 6px 10px;
  cursor:pointer;
}
.seg-btn:hover{ background: rgba(255,255,255,.05); }
.seg-btn.is-active{
  background: rgba(96,165,250,.14);
  color: rgba(255,255,255,.95);
}

/* Input with clear button */
.input-wrap{ position:relative; }
.input-wrap input{ padding-right: 38px; }
.input-clear{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.75);
  cursor:pointer;
  line-height: 20px;
}
.input-clear:hover{ background: rgba(255,255,255,.08); }

/* ===== Filters (collapsible) ===== */
.filters{
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.filters-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.span-2{ grid-column: span 2; }
.span-3{ grid-column: span 3; }
@media (max-width: 900px){ .filters-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .filters-grid{ grid-template-columns: 1fr;} }

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.90);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.chip{ position:relative; }
.chip input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.chip:hover{ background: rgba(255,255,255,.05); }
.chip:has(input:checked){
  background: rgba(96,165,250,.14);
  border-color: rgba(96,165,250,.35);
}

/* Color identity chips: give symbol + name a bit more breathing room */
.chip-color{ gap: 10px; }
.chip-color .chip-text{ padding-right: 2px; }

/* ===== Tag input (Subtype) ===== */
.tag-input{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  position: relative;
}

/* Subtype suggestions (custom, dark — native <datalist> can’t be styled reliably) */
.control{ position: relative; }
.suggest-panel{
  position: absolute;
  z-index: 210;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(15,22,32,.96);
  box-shadow: var(--shadow);
  padding: 8px;
  max-height: 320px;
  overflow: auto;
}
.suggest-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}
.suggest-count{
  opacity: .75;
  font-variant-numeric: tabular-nums;
}
.suggest-item:hover{ background: rgba(255,255,255,.06); }
.tag-chips{ display:flex; flex-wrap:wrap; gap: 8px; }
.tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-size: 12px;
}
.tag button{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.75);
  cursor:pointer;
  line-height: 16px;
  padding:0;
}
.tag button:hover{ background: rgba(255,255,255,.08); }
.tag-input input{
  flex: 1 1 120px;
  min-width: 120px;
  border: none;
  background: transparent;
  padding: 6px 0;
  color: var(--text);
  outline: none;
}
.tag-input .input-clear{ position: static; transform:none; margin-left:auto; }

/* ===== Abilities dropdown ===== */
.select-like{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.select-like:hover{ background: rgba(255,255,255,.05); }
.select-like-meta{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.82);
}
.dropdown{ position:relative; }
.dropdown-panel{
  position:absolute;
  z-index: 220;
  inset: calc(100% + 8px) 0 auto 0;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(15,22,32,.96);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.dropdown-head{ padding: 10px; border-bottom:1px solid rgba(255,255,255,.06); }
.dropdown-body{ max-height: 320px; overflow:auto; padding: 10px; }
.drop-group{ margin-bottom: 12px; }
.drop-group-title{
  font-size: 12px;
  color: rgba(255,255,255,.65);
  margin: 8px 0;
  letter-spacing: .02em;
}
.drop-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  cursor:pointer;
  user-select:none;
}
.drop-item:hover{ background: rgba(255,255,255,.05); }
.drop-item input{ width: 16px; height: 16px; }
.drop-item span{ color: rgba(255,255,255,.90); font-size: 12px; }

/* Selected abilities chips */
.chip-sel{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,.35);
  background: rgba(96,165,250,.14);
  color: rgba(255,255,255,.92);
  font-size: 12px;
}
.chip-sel button{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.75);
  cursor:pointer;
  line-height: 16px;
  padding:0;
}
.chip-sel button:hover{ background: rgba(255,255,255,.08); }

.seg-toggle-mini .seg-btn{ padding: 4px 8px; font-size: 11px; }


.pt-rows{ display:flex; flex-direction:column; gap:10px; }
.pt-row{
  display:grid;
  grid-template-columns: 72px 1fr 1fr;
  gap: 10px;
  align-items:center;
}
.pt-label{
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 560px){
  .pt-row{ grid-template-columns: 64px 1fr 1fr; }
}
.range-row{ display:flex; gap: 10px; }
.range-row input{ flex: 1 1 0; }


.chip-symbol{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  flex: 0 0 auto;
  margin-right: 2px;
}
.chip-text{ font-size: 12px; letter-spacing:.1px; }


.filters-foot{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 900px){ .grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .grid{grid-template-columns: 1fr;} }

.card{
  background: linear-gradient(180deg, rgba(24,38,54,.78), rgba(16,24,36,.70));
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.item{
  position: relative;
  background: linear-gradient(180deg, rgba(24,38,54,.78), rgba(16,24,36,.70));
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-height: 184px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}


/* Default border when no accent set */
.item:not(.has-accent){
  border-color: var(--border);
}

/* Accent border (uses --ci-border set inline) */
.item.has-accent::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 2px;               /* thicker border */
  background: var(--ci-border, var(--border));
  pointer-events:none;
  opacity: .95;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* soft glow */
.item.has-accent::after{
  content:"";
  position:absolute;
  inset:-2px;                 /* glow extends a bit outside */
  border-radius: inherit;
  background: var(--ci-border, var(--border));
  filter: blur(10px);
  opacity: .28;
  pointer-events:none;
  z-index: 0;
}
.item > *{ position: relative; z-index: 1; }


.item-top{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.item-top-text{
  padding-top:2px;
  flex: 1 1 auto;
  min-width: 0;
}
.thumb-btn{
  padding:0;
  border:0;
  background: transparent;
  cursor: zoom-in;
  position: relative;
  flex: 0 0 auto;
  border-radius:12px;
}
.thumb-btn:focus-visible{outline:2px solid rgba(96,165,250,.9); outline-offset:3px;}
/* Magnifying glass overlay (image only, not title) */
.thumb-btn::after{
  content:"\1F50D"; /* 🔍 */
  position:absolute;
  right:6px;
  bottom:6px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  font-size:13px;
  line-height:1;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  opacity: .92;
  pointer-events:none;
}
.thumb{
  width:68px;
  height:94px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  object-fit: cover;
}
.title-btn{
  padding:0;
  border:0;
  background: transparent;
  color: var(--text);
  text-align:left;
  cursor: pointer;
}
.title-btn:hover{ text-decoration: underline; }
.title-btn:focus-visible{outline:2px solid rgba(96,165,250,.9); outline-offset:3px; border-radius:10px;}
.item h3{
  margin:0;
  font-size:16px;
  overflow-wrap: anywhere;
  line-height: 1.25;
  min-height: calc(1.25em * 2);
}
.item h3 .title-btn{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-width: 100%;
}

.badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
  align-content:flex-start;
  min-height: 48px;
}
.badge{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  color: var(--muted);
  background: rgba(255,255,255,.02);
}

/* Commander picker: secondary "ability" badges */
.badge.badge-soft{
  opacity: 0.85;
}

.badge.badge-meta{
  background: rgba(148,163,184,.12);
  border-color: rgba(148,163,184,.28);
  color: rgba(255,255,255,.92);
}

.badge.badge-cond{
  font-weight: 700;
}

.badge.badge-cond-nm{
  background: rgba(74,222,128,.12);
  border-color: rgba(74,222,128,.30);
  color: rgba(220,252,231,.96);
}

.badge.badge-cond-pl{
  background: rgba(250,204,21,.12);
  border-color: rgba(250,204,21,.30);
  color: rgba(254,240,138,.96);
}

.badge.badge-cond-hp{
  background: rgba(248,113,113,.12);
  border-color: rgba(248,113,113,.30);
  color: rgba(254,226,226,.96);
}


.price-row{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-top:auto;
}
.price{font-weight:800}
.meta-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.variant-line{
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: rgba(230,236,245,.9);
}
.stock{font-size:12px;color:var(--muted)}

.actions{
  display:flex;gap:10px;margin-top:8px;
}
button{font: inherit;}
.btn{
  width:100%;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
}

/* Better tap targets on phones */
@media (max-width: 520px){
  .nav-link,
  .cart-btn,
  .btn,
  .primary,
  .ghost,
  .icon-btn{ min-height: 44px; }
}
.btn:hover{background: rgba(255,255,255,.06)}
.primary{
  width:100%;
  padding:11px 12px;
  border-radius: 14px;
  border:1px solid rgba(96,165,250,.5);
  background: rgba(96,165,250,.18);
  color: var(--text);
  cursor:pointer;
  font-weight:700;
}
.primary:hover{background: rgba(96,165,250,.24)}
.danger{
  width:100%;
  padding:11px 12px;
  border-radius: 14px;
  border:1px solid rgba(239,68,68,.55);
  background: rgba(239,68,68,.12);
  color: var(--text);
  cursor:pointer;
  font-weight:700;
}
.danger:hover{background: rgba(239,68,68,.18)}

.empty{
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  color: var(--muted);
  text-align:center;
}

.footer{
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 16px 30px;
  border-top:1px solid var(--border);
}

/* Home */
.homeHero{
  min-height: calc(100vh - 90px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap: 18px;
  padding: 28px 16px 10px;
}

.homeLogo{
  width: min(720px, 92vw);
  height: auto;
  display:block;
  margin: 0 auto;
}

.homeSplash{
  width: min(720px, 92vw);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
}

.homeEyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 14px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.12);
  color:#dfffe8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.homeSplash h1{
  margin:0;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height:1.05;
}

.homeLead{
  margin:0;
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
}

/* Allow .primary class to be used on links too */
a.primary{display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}

.homeCta{
  width: min(420px, 92vw);
}

.homeCard{
  width: min(720px, 92vw);
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 16px 16px;
}

.homeCard h2{margin:0 0 10px 0; font-size: 18px}

.roadmapList{margin:0; padding-left: 18px; color: var(--text);}
.roadmapList li{margin: 8px 0; color: var(--muted);}

.notice{
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius);
  border:1px solid rgba(96,165,250,.25);
  background: rgba(96,165,250,.08);
}


/* Contact page: tighter above-the-fold */
body.contact-page .panel { padding: 22px; }
body.contact-page .contact-grid { gap: 18px; }
body.contact-page .cardbox { padding: 14px; }
body.contact-page .form-row { margin-top: 8px; }
body.contact-page .qr-grid { margin-top: 8px; gap: 10px; }
body.contact-page .qr-hint { padding: 10px; }
body.contact-page .contact-summary { margin-top: 10px; }
body.contact-page .summary-line { padding: 8px 0; }


/* Ensure nested modals stack correctly */
#swapModal{ z-index: 80; }
#cardModal{ z-index: 90; }
/* Modal */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background: rgba(0,0,0,.55)}
.modal-dialog{
  position:relative;
  width:min(720px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow:auto;
  background: rgba(15,22,32,.92);
  border:1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding: 14px 14px;
  border-bottom:1px solid var(--border);
}
.icon-btn{
  width:40px;height:40px;border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
}
.icon-btn:hover{background: rgba(255,255,255,.06)}
.modal-body{padding:14px}
.cart-line{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(24,38,54,.78), rgba(16,24,36,.70));
  margin-bottom: 10px;
}
.cart-line h4{margin:0 0 6px}
.qty{
  display:flex;align-items:center;gap:8px;justify-content:flex-end;
}
.qty button{
  width:34px;height:34px;border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
}
.qty button:hover{background: rgba(255,255,255,.06)}
.qty span{min-width:22px;text-align:center;font-weight:700}

.cart-summary{
  margin-top: 12px;
  padding: 12px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(18,28,40,.35);
}
.row{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
.checkout{
  margin-top: 12px;
  padding: 12px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(18,28,40,.35);
}

/* ==============================
   Checkout page
   ============================== */

.checkout-page{padding-top: 22px; padding-bottom: 34px;}

.panel{
  border:1px solid var(--border);
  border-radius: var(--radius2);
  background: rgba(15,22,32,.6);
  box-shadow: var(--shadow);
  padding: 18px;
}

.panel-head{margin-bottom: 14px;}

.checkout-list{display:flex;flex-direction:column;gap:10px;margin-top: 10px;}

.checkout-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(18,28,40,.35);
}

.checkout-item-name{font-weight:800;}

.checkout-item-meta{display:flex;align-items:center;gap:12px;}
.checkout-remove{
  width:34px;
  height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.checkout-remove:hover{background: rgba(255,70,70,.12); border-color: rgba(255,70,70,.35)}
.checkout-item-qty{font-weight:800;opacity:.9;}
.checkout-item-line{font-weight:900;}

.checkout-totals{
  margin-top: 14px;
  padding-top: 10px;
  border-top:1px solid var(--border);
}
.checkout-totals .row{padding:8px 0;}
.checkout-totals .row.total{
  margin-top: 6px;
  padding-top: 10px;
  border-top:1px solid var(--border);
  font-size: 1.05rem;
  font-weight: 900;
}

.checkout-actions{display:flex;gap:10px;align-items:center;margin-top: 14px;flex-wrap:wrap;}
.primary.inline{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}


/* Card viewer (image zoom) */
.viewer{position:fixed;inset:0;z-index:10050;display:grid;place-items:center}
.viewer[hidden]{display:none}
.viewer-backdrop{position:absolute;inset:0;background: rgba(0,0,0,.75)}
.viewer-dialog{
  position:relative;
  width:min(620px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  overflow:auto;
  background: rgba(15,22,32,.96);
  border:1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.viewer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding: 14px 14px;
  border-bottom:1px solid var(--border);
}
.viewer-title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.viewer-title-wrap h3{
  margin:0;
}
.viewer-langs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.viewer-lang-btn{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.viewer-lang-btn.is-active{
  color: var(--text);
  border-color: rgba(96,165,250,.55);
  background: rgba(96,165,250,.18);
}
.viewer-body{padding:14px; display:grid; place-items:center}
.viewer-body img{
  width: auto;
  max-width: min(450px, 100%);
  max-height: calc(100vh - 220px);
  height: auto;
  border-radius: 18px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
}

/* ===== Title row layout (prevents mana overlap) ===== */
.item-top-text{ width: 100%; }
.title-row{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.title-row h3{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.manaCost{
  flex: 0 0 auto;
  display:flex;
  gap: 4px;
  align-items:center;
  margin-top: 2px;
}

  flex: 0 0 auto;
  display:flex;
  gap: 4px;
  align-items:center;
  margin-top: 2px;
}

/* Mana "pips" (simple circles, no SVG) */
.pip{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  user-select:none;
}

.pip-num{
  background:#ffffff;
  color:#0b0f14;
  border-color: rgba(0,0,0,.22);
}

.pip-w{ background:#ffffff; border-color: rgba(0,0,0,.22); }
.pip-u{ background:#3b82f6; }
.pip-b{ background:#0b0f14; }
.pip-r{ background:#ef4444; }
.pip-g{ background:#22c55e; }
.pip-c{ background:#cbd5e1; border-color: rgba(0,0,0,.18); }

.pip-unk{
  background:#cbd5e1;
  color:#0b0f14;
  font-size: 9px;
}

.pip-hybrid{
  background: linear-gradient(135deg, var(--pip-a) 0 50%, var(--pip-b) 50% 100%);
  color: transparent; /* unless we set a number */
  border-color: rgba(255,255,255,.22);
}


/* ===== Local mana icons ===== */
.manaIcon{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  padding: 2px;
}
.manaIcon svg{ width: 100%; height: 100%; }
.manaIcon svg circle{
  fill: rgba(255,255,255,.10);
  stroke: rgba(255,255,255,.18);
  stroke-width: 1.2;
}
.manaIcon svg path, .manaIcon svg text{ fill: rgba(255,255,255,.92); }
.manaIcon svg path[stroke]{ stroke: rgba(255,255,255,.92); }

/* ===== Rarity chip colors ===== */
.rarity-chip{ font-weight: 900; letter-spacing: .02em; }
.rarity-chip.rarity-c{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.rarity-chip.rarity-u{ background: rgba(80,160,255,.18); border-color: rgba(80,160,255,.35); }
.rarity-chip.rarity-r{ background: rgba(255,210,90,.16); border-color: rgba(255,210,90,.35); }
.rarity-chip.rarity-m{ background: rgba(255,110,90,.18); border-color: rgba(255,110,90,.35); }

/* ===== Color / rarity badges ===== */
.badge-ci{border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.88);}
.badge-ci-w{ background: rgba(243,226,179,.16); border-color: rgba(243,226,179,.35); color: rgba(255,255,255,.92); }
.badge-ci-u{ background: rgba(96,165,250,.16); border-color: rgba(96,165,250,.35); color: rgba(255,255,255,.92); }
.badge-ci-b{ background: rgba(100,116,139,.16); border-color: rgba(100,116,139,.35); color: rgba(255,255,255,.92); }
.badge-ci-r{ background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.35); color: rgba(255,255,255,.92); }
.badge-ci-g{ background: rgba(74,222,128,.16); border-color: rgba(74,222,128,.35); color: rgba(255,255,255,.92); }
.badge-ci-c{ background: rgba(203,213,225,.12); border-color: rgba(203,213,225,.28); color: rgba(255,255,255,.86); }
.badge-ci-m{ background: linear-gradient(135deg, rgba(96,165,250,.14), rgba(248,113,113,.14), rgba(74,222,128,.14)); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.90); }

.badge-rarity{ text-transform:none; }
.badge-rarity.common{ background: rgba(203,213,225,.10); border-color: rgba(203,213,225,.22); }
.badge-rarity.uncommon{ background: rgba(96,165,250,.10); border-color: rgba(96,165,250,.22); }
.badge-rarity.rare{ background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.22); }
.badge-rarity.mythic{ background: rgba(250,204,21,.10); border-color: rgba(250,204,21,.24); }

/* Product card badges: keep type/color/rarity equally readable */
.item .badge{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.item .badge-rarity.common,
.item .badge-rarity.uncommon,
.item .badge-rarity.rare,
.item .badge-rarity.mythic{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}


/* ===== Mana icons via assets/mana/Mana.svg (SVG <use>) ===== */
.manaCost{
  display:flex;
  gap:4px;
  align-items:center;
  justify-content:flex-end;
}

.manaSvg{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.manaFallback{
  width:18px;
  height:18px;
  border-radius:999px;
  background:#f2f2f2;
  color:#111;
  border:1px solid rgba(0,0,0,.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  line-height:1;
}

/* ===== Ensure rarity chip is circular ===== */
.rarity-chip{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* ===== Mana SVG icons ===== */
.manaSvg{
  width: 18px;
  height: 18px;
  display:inline-block;
}
.manaFallback{
  width:18px;
  height:18px;
  border-radius:999px;
  background:#f2f2f2;
  color:#111;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  border:1px solid rgba(0,0,0,.12);
}



/* Pagination */
.pagination{
  margin: 18px 0 10px;
  display: flex;
  justify-content: center;
}
.paginationInner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}
.pageNav,.pageBtn{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  border-radius: 10px;
  padding: 6px 10px;
  cursor:pointer;
  font-size: 13px;
}
.pageNav[disabled], .pageBtn[disabled]{
  opacity:0.4;
  cursor:not-allowed;
}
.pageNums{
  display:flex;
  align-items:center;
  gap:6px;
}
.pageBtn.isActive{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.22);
}
.pageEllipsis{
  opacity:0.6;
  padding: 0 2px;
}
.pageInfo{
  opacity:0.7;
  font-size: 12px;
  padding-left: 6px;
}
@media (max-width: 520px){
  .pageInfo{ display:none; }
  .paginationInner{ gap:8px; }
}
/* =========================================================
   Plains / Swamp / Colorless shop item backgrounds + pills
   Uses :has() to detect the color badge inside each .item.
   (Chrome supports :has(); your screenshots show you're on Chrome.)
   ========================================================= */

/* PLAINS (White) — warm translucent parchment */
.item:has(.badge-ci-w){
  background: linear-gradient(
    180deg,
    rgba(255, 232, 150, 0.26),
    rgba(255, 232, 150, 0.16)
  );
}
.item:has(.badge-ci-w) .badge{
  background: rgba(255, 232, 150, 0.18);
  border-color: rgba(255, 232, 150, 0.30);
  color: rgba(255,255,255,0.95);
}

/* SWAMP (Black) — darker neutral grey, still translucent */
.item:has(.badge-ci-b){
  background: linear-gradient(
    180deg,
    rgba(60, 64, 72, 0.34),
    rgba(45, 48, 56, 0.24)
  );
}
.item:has(.badge-ci-b) .badge{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(235,238,242,0.95);
}

/* COLORLESS — subtle neutral grey, translucent */
.item:has(.badge-ci-c){
  background: linear-gradient(
    180deg,
    rgba(180, 190, 205, 0.22),
    rgba(180, 190, 205, 0.14)
  );
}
.item:has(.badge-ci-c) .badge{
  background: rgba(180, 190, 205, 0.16);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.95);
}

/* Keep rarity pills aligned with card tone */
.item:has(.badge-ci-w) .badge-rarity,
.item:has(.badge-ci-b) .badge-rarity,
.item:has(.badge-ci-c) .badge-rarity{
  background: inherit;
  border-color: inherit;
  color: inherit;
}


/* Power/Toughness grid (min wider than exact) */
@media (max-width: 560px){
  }

/* Keep dropdown menus dark */
.control select{ background: rgba(255,255,255,.03); color: var(--text); }
.control select option{ background: #0f1620; color: var(--text); }

/* Remove number input spinners (clean look) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input[type=number]{ -moz-appearance: textfield; appearance: textfield; }


/* Checkout: terms checkbox */
.terms-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}
.terms-line input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}
.terms-line a{
  text-decoration: underline;
}
button.primary:disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.2);
}


/* Terms page helpers */
.h3{
  margin: 18px 0 8px;
  font-size: 16px;
  letter-spacing: .2px;
}
.list{
  margin: 8px 0 14px 18px;
  padding: 0;
}
.list li{
  margin: 6px 0;
  color: var(--muted);
}
.link{
  text-decoration: underline;
}
.terms-content p{
  margin: 8px 0 12px;
  color: var(--muted);
  line-height: 1.6;
}


/* --- Contact / checkout details form + QR --- */
.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:18px;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.cardbox{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 16px;
}

.form{ margin-top: 10px; }
.form-row{ margin-top: 10px; }
.form-row-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.label{
  display:block;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  margin-bottom: 6px;
}

.input, .textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);
  outline: none;
}
.input:focus, .textarea:focus{
  border-color: rgba(120,170,255,0.55);
}

.qr-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top: 12px;
}
.qr-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
  padding: 12px;
}
.qr-title{
  font-weight: 600;
  margin-bottom: 8px;
}
.qr-wrap{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
  height: 180px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.qr-img{
  max-width: 100%;
  max-height: 100%;
  display:block;
}
.qr-fallback{
  display:none;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: rgba(255,255,255,0.70);
  font-size: 13px;
  line-height: 1.2;
  padding: 10px;
}

.contact-summary{ margin-top: 14px; }
.summary-lines{ margin-top: 10px; }
.summary-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.summary-left{ min-width: 0; }
.summary-name{ font-weight: 600; }
.summary-right{
  display:flex;
  gap: 12px;
  align-items:center;
  white-space: nowrap;
}
.pill{
  display:inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.03);
}
.pill--warn{
  border-color: rgba(255,180,80,0.35);
  color: rgba(255,200,120,0.95);
  background: rgba(255,180,80,0.08);
}

.confirm-area{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.notice{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.86);
}
.notice--ok{
  border-color: rgba(120,220,160,0.35);
  background: rgba(120,220,160,0.08);
}
.notice--err{
  border-color: rgba(255,120,120,0.35);
  background: rgba(255,120,120,0.08);
}

.bottom-links{
  margin-top: 14px;
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ===== Admin page helpers ===== */
.body-admin{ padding-top: 22px; overflow-x: clip; }
.page{ max-width: var(--max); margin: 24px auto 60px; padding: 0 16px; overflow-x: clip; }
.hero{ padding: 8px 0 14px; }
.hero-title{ margin: 0; font-size: 34px; letter-spacing: .2px; }
.hero-sub{ margin: 8px 0 0 0; color: var(--muted); }

.badge{ display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.03); font-size: 12px; color: var(--text); }

.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ text-align:left; padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th{ font-size: 12px; color: rgba(255,255,255,0.72); font-weight: 600; }

.btn-ghost{ width:auto; padding: 10px 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--text); font-weight: 700; }
.btn-ghost:hover{ border-color: var(--border); background: rgba(255,255,255,.03); }

.btn-danger{ width:auto; padding: 11px 12px; border-radius: 14px; border:1px solid rgba(239,68,68,.55); background: rgba(239,68,68,.12); font-weight: 700; color: var(--text); }
.btn-danger:hover{ background: rgba(239,68,68,.18); }
.notice.error{ border-color: rgba(255,120,120,0.35); background: rgba(255,120,120,0.08); }
.notice.success{ border-color: rgba(120,220,160,0.35); background: rgba(120,220,160,0.08); }

.admin-tabbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.admin-tabbar .btn{
  flex:1 1 180px;
}

.admin-traffic-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

.admin-traffic-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:18px;
  margin-top:18px;
}

.admin-traffic-grid--even{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.admin-traffic-grid > *,
.admin-traffic-summary > *{
  min-width:0;
}

.admin-traffic-table{
  table-layout: fixed;
}

.admin-traffic-table th,
.admin-traffic-table td{
  word-break: break-word;
}

.admin-traffic-list{
  display:grid;
  gap:10px;
}

.admin-traffic-list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}

.admin-traffic-list-item strong{
  text-align:right;
  overflow-wrap:anywhere;
}

.admin-scroll{
  overflow:auto;
  max-width:100%;
}

@media (max-width: 980px){
  .admin-traffic-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .admin-traffic-grid,
  .admin-traffic-grid--even{
    grid-template-columns:1fr;
  }
}

@media (max-width: 560px){
  .admin-traffic-summary{
    grid-template-columns:1fr;
  }
}


/* Clickable QR chooser (contact page) */
.qr-click { cursor: pointer; }
.qr-click:focus { outline: 2px solid rgba(255,255,255,0.25); outline-offset: 2px; }
.qr-hint {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  font-weight: 600;
}

/* Modal */
.modal { position: fixed; inset: 0; z-index: 9999; }
.modal[hidden] { display: none !important; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.modal-dialog {
  position: relative;
  margin: 6vh auto;
  max-width: 560px;
  width: calc(100% - 24px);
  background: rgba(12, 18, 28, 0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: inherit;
  font-size: 22px;
  cursor: pointer;
}
.modal-body { padding: 18px; }
.qr-modal-wrap {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  display: grid;
  place-items: center;
}
#qrModalImg { width: 100%; max-width: 420px; height: auto; display: block; object-fit: contain; }


/* Deck Lab — Swap modal spacing + larger previews */
.swap-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
}
@media (max-width: 520px){
  .swap-grid{ grid-template-columns: 1fr; }
}

.swap-option{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  text-align:left;
  padding:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  cursor:pointer;
}
.swap-option:hover{ border-color: rgba(96,165,250,.55); background: rgba(96,165,250,.08); }
.swap-thumb{
  width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
@media (min-width: 920px){
  .swap-thumb{ width:74px; }
}
.swap-title{
  font-weight:700;
  line-height:1.15;
}
.swap-meta{
  margin-top:4px;
  color: var(--muted);
  font-size: 12px;
}
/* Make swap modal itself feel less cramped if it uses generic .modal-card sizing */
#swapModal .modal-card{
  max-width: 1120px;
}


/* DeckLab: utility action row under Generate */
.decklab-actions-row{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.decklab-actions-row .btn{
  flex:1;
}


/* --- DeckLab UI polish (Decklist toolbar) --- */
.btn-primary{
  background: linear-gradient(135deg,#22c55e,#16a34a);
  border: 1px solid rgba(255,255,255,0.10);
  color: #04130a;
  font-weight: 700;
}
.btn-primary:disabled{opacity:.55;filter:saturate(.7)}
.decklist-toolbar2{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.deck-total-badge{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  font-weight:700;
  white-space:nowrap;
}
.deck-actions2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  align-items:center;
  width: min(720px, 100%);
}
.deck-actions2 .deck-total-inline{
  grid-column: 1;
  justify-self: start;
}
.deck-actions2 #showOptionsBtn{
  grid-column: 2;
  justify-self: end;
}
.deck-actions2 #addAllBtn{grid-column:1 / 3}
.deck-actions2 #testDeckBtn{grid-column:1}
.deck-actions2 #copyBtn{grid-column:2}
.deck-actions2 .deck-more{grid-column:1 / 3; justify-self:end}

@media (min-width: 900px){
  .deck-actions2{
    grid-template-columns: auto auto 1fr auto auto;
    width: auto;
    min-width: 620px;
  }
  .deck-actions2 .deck-total-inline{grid-column:1; grid-row:1}
  .deck-actions2 #showOptionsBtn{grid-column:2; grid-row:1}
  .deck-actions2 #addAllBtn{grid-column:3 / 6; grid-row:1; min-width: 320px}
  .deck-actions2 #testDeckBtn{grid-column:3; grid-row:2; justify-self:end}
  .deck-actions2 #copyBtn{grid-column:4; grid-row:2}
  .deck-actions2 .deck-more{grid-column:5; grid-row:2}
}

/* dropdown */
.deck-more{position:relative}
.deck-more > summary{list-style:none}
.deck-more > summary::-webkit-details-marker{display:none}
.deck-more[open] > summary{border-color: rgba(255,255,255,0.20)}
.deck-more .more-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:50;
  min-width: 280px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(16,24,30,0.98);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.deck-more .more-row{display:flex;gap:8px;align-items:center}

/* --- DeckLab UI polish v2 (appeal + compactness) --- */

/* Keep global .btn = full width for shop pages, but make DeckLab toolbars compact */
.decklist-head .btn,
.decklist-head .btn-soft,
.decklist-head .btn-primary,
.decklist-head select.btn,
.deck-desc .btn,
.deck-desc select.btn,
.deck-more summary.btn{
  width: auto;
}

/* Deck description / upgrade / suggestions cards */
.deck-desc{
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  border-radius: 18px;
}
.deck-desc h3{
  margin: 0 0 8px 0;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .9;
}
#deckDescBullets{
  margin: 10px 0 0 0;
  padding-left: 18px;
}
#deckDescBullets li{
  margin: 4px 0;
  line-height: 1.35;
}

/* Upgrade buttons: side-by-side, not giant */
.upgrades-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.upgrades-actions .btn{
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  font-weight: 700;
}

/* Suggestions header card */
.suggest-card{
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
}
.suggest-row{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.suggest-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
  align-items: stretch;
  justify-items: stretch;
}
.suggest-actions .btn{
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  font-weight: 700;
}

/* Preview card (optional) */
.suggest-preview{
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(0,0,0,0.18);
}
.suggest-preview-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  margin-top: 10px;
}
.suggest-preview-actions .btn{
  width:auto;
}

/* More options list: tighter buttons */
#deckSuggestionsList .btn{
  width:auto;
  padding: 10px 12px;
  border-radius: 14px;
}

/* Keep "More options" toggles together (no weird spacing) */
#deckSuggestionsList{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
}

/* Prevent pill-buttons from stretching in flex/grid parents */
#deckSuggestionsList .btn{
  flex: 0 0 auto;
}

/* Mobile: stack suggestion actions */
@media (max-width: 720px){
  .suggest-actions{ grid-template-columns: 1fr; }
  .upgrades-actions{ grid-template-columns: 1fr; }
}

/* Decklist output spacing */
#deckOut{
  margin-top: 14px;
}


/* === DeckLab Premium Controls v3 (complete toggle/button/menu redesign) === */
.dl-bar{
  position: sticky;
  top: 84px;
  z-index: 20;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,20,.65);
  backdrop-filter: blur(10px);
}
body.embed-output .dl-bar{
  top: 44px;
}
@media (max-width: 520px){
  .dl-bar{ top: 70px; }
  body.embed-output .dl-bar{ top: 40px; }
}

.dl-bar .decklist-title{ font-size: 26px; }
.dl-bar .decklist-right{ align-items:center; gap: 10px; }

.dl-bar .deck-actions2{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
  padding: 0;
}

.dl-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight: 700;
  white-space: nowrap;
}

.dl-btn{
  width:auto !important;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight: 700;
  line-height: 1;
  min-height: 36px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.dl-btn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.20);
  transform: translateY(-1px);
}
.dl-btn:active{ transform: translateY(0); }

.dl-btn--ghost{
  background: rgba(255,255,255,.02);
}
.dl-btn--primary{
  border-color: rgba(34,197,94,.45);
  background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(22,163,74,.90));
  color: rgba(0,0,0,.85);
  box-shadow: 0 10px 28px rgba(34,197,94,.20);
}
.dl-btn--primary:hover{
  box-shadow: 0 14px 34px rgba(34,197,94,.26);
  border-color: rgba(34,197,94,.60);
}

.dl-more{ position:relative; }
.dl-menu{
  min-width: 260px;
  padding: 10px;
  border-radius: 16px;
}
.dl-menu .dl-menu-item{
  width: 100% !important;
  justify-content:flex-start;
  text-align:left;
  border-radius: 12px;
  padding: 10px 12px;
}
.dl-menu .dl-menu-item:hover{
  background: rgba(255,255,255,.07);
}
.dl-menu .more-row{ gap: 10px; }
.dl-select{
  width: 100% !important;
  min-width: 120px;
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

/* Inline filter toggle under Suggestions */
.deck-filters-inline{
  display:flex;
  justify-content:flex-start;
}

.deck-filters-inline #showOptionsBtn{
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
}

/* Upgrade / Budget: compact, side-by-side, consistent height */
.upgrades-actions .dl-btn{
  width: 100% !important;
  min-height: 40px;
  border-radius: 14px;
}

/* Suggestions: stop giant stacked buttons — make it feel like a modern action row */
.suggest-actions{
  display:flex !important;
  flex-wrap:wrap;
  gap: 8px;
  justify-content:flex-end;
}
.suggest-actions .dl-btn{
  min-width: 140px;
}
@media (max-width: 720px){
  .suggest-actions .dl-btn{ width: 100% !important; min-width: 0; }
}

/* More options chips: tight and consistent */
#deckSuggestionsList .btn{
  width:auto;
  padding: 8px 10px;
  border-radius: 999px;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  font-weight: 700;
}
#deckSuggestionsList .btn:hover{ background: rgba(255,255,255,.06); }

/* Make the decklist header controls feel grouped on small screens */
@media (max-width: 900px){
  .dl-bar .decklist-head{ gap: 12px; }
  .dl-bar .decklist-right{ width: 100%; justify-content:flex-start; }
  .dl-bar .deck-actions2{ justify-content:flex-start; }
}


.deck-loading {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 25, 0.78);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120000;
}
.deck-loading.hidden { display: none; }
.deck-loading-box {
  min-width: min(420px, calc(100vw - 32px));
  max-width: 92vw;
  background: linear-gradient(180deg, rgba(20, 27, 40, 0.98), rgba(13, 18, 28, 0.98));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  padding: 28px 28px 24px;
  text-align: center;
}
.deck-loading-title {
  margin-top: 14px;
  font-size: 1.1rem;
  font-weight: 800;
}
.deck-loading-sub {
  margin-top: 6px;
  color: rgba(255,255,255,.72);
  font-size: .93rem;
}
.deck-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.14);
  border-top-color: rgba(127,168,255,1);
  animation: deckLoadingSpin .9s linear infinite;
}
@keyframes deckLoadingSpin { to { transform: rotate(360deg); } }