:root{
  --bg:#171310;
  --bg-alt:#1f1912;
  --surface:#241e17;
  --surface-hover:#2c241a;
  --gold:#c9913c;
  --gold-dim:rgba(201,145,60,0.35);
  --oxblood:#7a2e2e;
  --text:#ede6d6;
  --text-muted:#8c8577;
  --radius:10px;
  --font-display:'Cinzel',serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;}
*:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
[hidden]{display:none!important;}
html,body{overflow-x:hidden;}
body{
  margin:0;
  background:radial-gradient(ellipse at top,var(--bg-alt),var(--bg) 70%);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
}
.ad-topbar{
  display:flex;justify-content:center;
  padding:14px 28px;
  border-bottom:1px dashed var(--gold-dim);
}
header{
  position:relative;
  /* Contains the negative z-index of the mosaic so it cannot slip under the page. */
  isolation:isolate;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px;
  padding:28px 28px 18px;
  border-bottom:1px solid var(--gold-dim);
}
header::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:url('/static/mosaic.jpg') center/cover no-repeat;
  filter:brightness(.26) blur(2px);
  /* The blur bleeds transparency in from the edges, so overscale to cover it. */
  transform:scale(1.06);
  mask-image:linear-gradient(to bottom,#000 45%,transparent 96%);
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 96%);
}
header h1{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--gold);
  margin:0;
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.05;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-shadow:0 2px 20px rgba(201,145,60,.28);
}
.brand-proxy{color:var(--text);}
.brand-blueprints{color:var(--gold);}
header p{
  margin:10px 0 0;
  color:var(--text-muted);
  font-size:.85rem;
  max-width:520px;
}

.btn-gold{
  background:var(--gold);color:#171310;border:none;
  padding:12px 30px;border-radius:8px;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  cursor:pointer;letter-spacing:.02em;
  transition:transform .15s,filter .15s;
}
.btn-gold:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-2px);}
.btn-gold:disabled{opacity:.55;cursor:progress;}
.btn-ghost{
  border:1px solid var(--gold-dim);
  color:var(--gold);
  background:transparent;
  padding:8px 14px;
  border-radius:8px;
  font-size:.8rem;
  cursor:pointer;
  white-space:nowrap;
  font-family:var(--font-body);
  transition:border-color .15s,background .15s;
}
.btn-ghost:hover{border-color:var(--gold);background:var(--surface-hover);}

.ad-slot{
  border:1px dashed var(--gold-dim);
  background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 10px,var(--surface-hover) 10px,var(--surface-hover) 20px);
  border-radius:6px;
  flex-shrink:0;
}
.ad-header{width:728px;max-width:100%;height:90px;}
.ad-footer{width:728px;max-width:100%;height:90px;}
.ad-footer-inline{margin:16px auto 0;}
.ad-skyscraper{width:160px;height:600px;max-height:100%;align-self:flex-start;}

.deck-input{
  max-width:640px;margin:0 auto;
  padding:44px 28px 60px;
  display:flex;flex-direction:column;gap:14px;
}
.deck-input-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;
}
.deck-input h2{
  font-family:var(--font-display);color:var(--gold);
  margin:0;font-size:1.15rem;letter-spacing:.02em;
}
.deck-input-note{color:var(--text-muted);font-size:.76rem;letter-spacing:.02em;}
#decklistInput{
  background:var(--surface);
  border:1px solid var(--gold-dim);border-radius:var(--radius);
  color:var(--text);font-family:var(--font-mono);font-size:.85rem;line-height:1.7;
  padding:14px 16px;min-height:260px;resize:vertical;outline:none;
  transition:border-color .15s;
}
#decklistInput:focus{border-color:var(--gold);}
#decklistInput::placeholder{color:var(--text-muted);}
.restore-notice{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--gold-dim);border-left:3px solid var(--gold);
  border-radius:8px;padding:12px 14px;
  font-size:.82rem;line-height:1.5;
}
.restore-actions{display:flex;gap:8px;flex-shrink:0;}
.deck-input-hint{margin:0;color:var(--text-muted);font-size:.78rem;line-height:1.6;}
.deck-input-hint code{font-family:var(--font-mono);color:var(--gold);font-size:.76rem;}
.deck-input .btn-gold{align-self:flex-start;}

.warning{
  background:rgba(122,46,46,.18);border-left:3px solid var(--oxblood);
  padding:10px 14px;border-radius:6px;margin-bottom:12px;font-size:.82rem;color:var(--text);
}
/* Clearance under the grid for the fixed "Finish deck" bar. */
#deckView{padding-bottom:130px;}
#warningBox{padding:20px 28px 0;}
#warningBox:empty{display:none;}
#warningBox .warning:last-child{margin-bottom:0;}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:18px;
  padding:24px 28px 40px;
}
.card-slot{
  position:relative;
  background:var(--surface);
  border:1.5px solid var(--gold-dim);
  border-radius:var(--radius);
  aspect-ratio:63/88;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.card-slot:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 10px 22px rgba(0,0,0,.45);}
.card-slot img{width:100%;height:100%;object-fit:cover;display:block;}
.card-slot .placeholder{font-size:.72rem;color:var(--text-muted);margin-top:6px;}
.card-slot .name{font-family:var(--font-display);font-size:.76rem;text-align:center;padding:0 8px;color:var(--text);line-height:1.3;}
.qty-badge{
  position:absolute;top:6px;right:6px;
  background:var(--gold);color:#171310;
  font-weight:700;font-size:.68rem;
  padding:2px 7px;border-radius:999px;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
  z-index:2;
}
.lang-badge{
  position:absolute;bottom:6px;left:6px;
  background:rgba(0,0,0,.55);
  border-radius:4px;padding:2px;z-index:2;
  display:flex;align-items:center;
}
.flag-img{width:26px;height:19px;object-fit:cover;border-radius:2px;display:block;}
.lang-badge img{width:18px;height:13px;object-fit:cover;border-radius:2px;display:block;}
.hires-badge{
  position:absolute;top:6px;left:6px;
  background:#2e7d32;color:#fff;
  font-size:.58rem;font-weight:700;letter-spacing:.03em;
  padding:2px 6px;border-radius:4px;
  z-index:2;text-transform:uppercase;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.date-badge{
  position:absolute;bottom:6px;right:6px;
  background:rgba(0,0,0,.6);color:var(--text);
  font-size:.6rem;padding:2px 6px;border-radius:4px;
  z-index:2;font-family:var(--font-mono);
}
.card-slot.filled::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);
  transform:translateX(-120%);
  transition:transform .6s ease;
  pointer-events:none;
}
.card-slot.filled:hover::after{transform:translateX(120%);}

#deckFooter{
  position:fixed;bottom:0;left:0;right:0;
  /* Above the z-index:2 badges of the cards, below the picker overlay at 100. */
  z-index:5;
  background:linear-gradient(0deg,var(--bg) 60%,transparent);
  padding:18px 28px 22px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.footer-msg{max-width:760px;width:100%;}
.footer-msg:empty{display:none;}
.footer-msg .warning{margin-bottom:0;}

.overlay{
  display:none;position:fixed;inset:0;
  background:rgba(10,8,6,.75);backdrop-filter:blur(3px);
  align-items:center;justify-content:center;z-index:100;padding:20px;
}
.overlay.open{display:flex;}
.modal{
  position:relative;background:var(--bg-alt);
  border:1px solid var(--gold-dim);border-radius:14px;
  padding:24px 28px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.modal h2{font-family:var(--font-display);color:var(--gold);margin:0 0 18px;font-size:1.25rem;padding-right:26px;}
.modal-picker{width:96vw;height:92vh;display:flex;flex-direction:column;}
.modal-close{
  position:absolute;top:14px;right:16px;background:none;border:none;
  color:var(--text-muted);font-size:1.2rem;cursor:pointer;line-height:1;z-index:3;
}
.modal-close:hover{color:var(--gold);}

.modal-header{
  display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:16px;padding-right:44px;
  border-bottom:1px solid var(--gold-dim);
  flex-shrink:0;
}
.modal-header h2{margin:0;}
.modal-header-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0;}
.modal-content-row{display:flex;flex:1;gap:20px;overflow:hidden;}
.modal-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px;margin:-6px;}

.set-search{
  position:relative;display:flex;align-items:center;
  background:var(--surface);border:1px solid var(--gold-dim);border-radius:8px;
  padding:0 10px;height:36px;
}
.set-search-label{
  font-family:var(--font-body);font-size:.62rem;font-weight:700;
  letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase;
  padding-right:9px;margin-right:9px;border-right:1px solid var(--gold-dim);
}
#setSearchInput{
  background:transparent;border:none;outline:none;
  color:var(--text);font-family:var(--font-body);font-size:.82rem;
  width:210px;padding-right:18px;
}
#setSearchInput::placeholder{color:var(--text-muted);}
.set-search-clear{
  display:none;position:absolute;right:8px;background:none;border:none;
  color:var(--text-muted);font-size:.75rem;cursor:pointer;padding:2px;line-height:1;
}
.set-search-clear.visible{display:block;}
.set-search-clear:hover{color:var(--gold);}

.lang-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.lang-btn{
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--gold-dim);border-radius:8px;
  padding:8px 10px;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.lang-btn:hover:not(.disabled){border-color:var(--gold);background:var(--surface-hover);}
.lang-btn.active{border-color:var(--gold);background:rgba(201,145,60,.18);box-shadow:0 0 0 1px var(--gold) inset;}
.lang-btn.disabled{opacity:.35;filter:grayscale(1);cursor:not-allowed;}

.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px;padding:6px;}
.img-option{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .15s;}
.img-option:hover{border-color:var(--gold);transform:scale(1.03);}
.img-option img{width:100%;display:block;aspect-ratio:63/88;object-fit:cover;}
.empty-note{color:var(--text-muted);font-size:.85rem;}

#peek{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  background:rgba(10,8,6,0);
  opacity:0;
  transition:opacity .2s ease,background .2s ease;
  z-index:200;
}
#peek.open{opacity:1;background:rgba(10,8,6,.6);}
#peek img{
  max-height:90vh;max-width:90vw;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  border:2px solid var(--gold-dim);
}

/* The picker was laid out for a wide screen: title, set search and flags side by side.
   Below this width there is no room, so the header stacks and everything shrinks. */
@media (max-width:768px){
  /* 96vw plus the overlay padding is wider than the viewport once the scrollbar is
     counted, which pushed the header out of the modal. Full screen instead. */
  .overlay{padding:0;}
  .modal-picker{
    width:100%;height:100%;
    border-radius:0;border-left:none;border-right:none;
  }
  .modal{padding:20px 16px;}
  .modal-header{
    flex-direction:column;align-items:stretch;
    gap:12px;padding-right:0;
  }
  .modal-header-left{flex-direction:column;align-items:stretch;gap:12px;}
  .set-search{width:100%;max-width:100%;}
  #setSearchInput{width:auto;flex:1;min-width:0;}
  /* Desktop sizes are a minimum tuned for a large screen; shrunk here so the eleven
     flags and two cards fit the width instead of running off the right edge. */
  /* The board keeps a 150px minimum plus 28px side padding, which leaves room for a
     single column on a phone. Tightened so two slots fit. */
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;padding:18px 14px 32px;}
  .lang-row{justify-content:flex-start;gap:6px;}
  .lang-btn{padding:6px 7px;}
  .flag-img{width:20px;height:14px;}
  .img-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:12px;}
  /* A 160px vertical unit cannot fit next to a card on a phone. */
  .ad-skyscraper{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}