/* assets/css/dtn-deck-viewer.css
   DTN Universal Deck Viewer — Phase 1 foundation
   Additive only: no existing page selectors are overridden unless a page opts into .dtnDeckViewer.
*/

:root{
  --dtn-dv-line: rgba(124,77,255,.28);
  --dtn-dv-blue: #00B3FF;
  --dtn-dv-violet: #7C4DFF;
  --dtn-dv-gold: #ffce42;
  --dtn-dv-green: #23d17d;
  --dtn-dv-red: #ff4d6d;
  --dtn-dv-ink: #eaf6ff;
  --dtn-dv-muted: rgba(214,232,255,.76);
  --dtn-dv-panel: rgba(7,14,26,.72);
}

.dtnDeckViewer,
.dtnDeckViewer *{box-sizing:border-box;}

.dtnDeckViewer{
  color:var(--dtn-dv-ink);
  display:grid;
  gap:14px;
  width:100%;
  min-width:0;
}

.dtnDeckViewerShell{
  background:
    linear-gradient(135deg, rgba(0,179,255,.10), rgba(124,77,255,.11)),
    rgba(6,12,24,.72);
  border:1px solid rgba(0,179,255,.20);
  border-radius:18px;
  box-shadow:0 18px 42px rgba(0,0,0,.34), inset 0 0 38px rgba(124,77,255,.07);
  overflow:hidden;
}

.dtnDeckViewerHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid rgba(160,200,255,.14);
  background:linear-gradient(90deg, rgba(0,179,255,.12), rgba(124,77,255,.08));
}

.dtnDeckViewerEyebrow{
  margin:0 0 4px;
  color:var(--dtn-dv-gold);
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.dtnDeckViewerTitle{
  margin:0;
  font-size:clamp(19px, 2.3vw, 28px);
  line-height:1.12;
  overflow-wrap:anywhere;
}

.dtnDeckViewerSub{
  margin:6px 0 0;
  color:var(--dtn-dv-muted);
  font-size:13px;
  line-height:1.35;
}

.dtnDeckViewerActions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.dtnDeckViewerBtn{
  appearance:none;
  border:1px solid rgba(0,179,255,.34);
  border-radius:11px;
  color:var(--dtn-dv-ink);
  background:linear-gradient(180deg, rgba(0,179,255,.22), rgba(124,77,255,.18));
  padding:8px 11px;
  min-height:36px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.dtnDeckViewerBtn:hover{filter:brightness(1.12);transform:translateY(-1px);}
.dtnDeckViewerBtnSecondary{background:rgba(170,210,255,.09);border-color:rgba(170,210,255,.26);}
.dtnDeckViewerBtnGold{background:linear-gradient(180deg, rgba(255,206,66,.30), rgba(0,179,255,.18));border-color:rgba(255,206,66,.48);color:#fff6d5;}

.dtnDeckViewerPills{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:9px;
}

.dtnDeckViewerPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  min-height:24px;
  border-radius:999px;
  background:rgba(200,220,255,.08);
  border:1px solid rgba(160,200,255,.23);
  color:#dbeaff;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.dtnDeckViewerPill.is-legal{border-color:rgba(35,209,125,.38);background:rgba(35,209,125,.13);color:#caffdf;}
.dtnDeckViewerPill.is-illegal{border-color:rgba(255,77,109,.42);background:rgba(255,77,109,.13);color:#ffd1da;}
.dtnDeckViewerPill.is-warning{border-color:rgba(255,206,66,.42);background:rgba(255,206,66,.12);color:#fff1bd;}

.dtnDeckViewerBody{
  display:grid;
  grid-template-columns:minmax(245px, 320px) minmax(0, 1fr);
  gap:14px;
  padding:14px;
  align-items:start;
}

.dtnDeckViewerCoverPanel,
.dtnDeckViewerListPanel{
  min-width:0;
  background:var(--dtn-dv-panel);
  border:1px solid rgba(0,179,255,.16);
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.26), inset 0 0 32px rgba(124,77,255,.055);
}

.dtnDeckViewerCoverPanel{padding:12px;position:sticky;top:76px;}
.dtnDeckViewerCover{
  width:100%;
  aspect-ratio:421/614;
  border-radius:13px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at top, rgba(0,179,255,.13), rgba(9,13,24,.92));
  border:1px solid rgba(160,200,255,.24);
}
.dtnDeckViewerCover img{width:100%;height:100%;object-fit:contain;display:block;}
.dtnDeckViewerNoCover{color:var(--dtn-dv-muted);font-size:13px;font-weight:800;text-align:center;padding:14px;}

.dtnDeckViewerCoverMeta{margin-top:10px;display:grid;gap:6px;}
.dtnDeckViewerCoverName{font-weight:900;line-height:1.2;overflow-wrap:anywhere;}
.dtnDeckViewerCoverText{color:var(--dtn-dv-muted);font-size:12px;line-height:1.35;}

.dtnDeckViewerListPanel{padding:12px;display:grid;gap:12px;}

.dtnDeckViewerToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:8px;
  border:1px solid rgba(160,200,255,.14);
  background:rgba(200,220,255,.055);
  border-radius:13px;
}
.dtnDeckViewerToolbar label{display:flex;align-items:center;gap:8px;color:var(--dtn-dv-muted);font-size:12px;font-weight:900;}
.dtnDeckViewerSelect{
  color:var(--dtn-dv-ink);
  background:rgba(6,12,24,.82);
  border:1px solid rgba(160,200,255,.26);
  border-radius:10px;
  min-height:34px;
  padding:6px 9px;
}

.dtnDeckViewerSection{
  display:grid;
  gap:8px;
}
.dtnDeckViewerSectionHead{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.dtnDeckViewerSectionHead h3{
  margin:0;
  font-size:17px;
  line-height:1.15;
}
.dtnDeckViewerSectionHead .dtnDeckViewerPill{margin-left:auto;}

.dtnDeckViewerCardList{
  display:grid;
  gap:7px;
}
.dtnDeckViewerCardRow{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:7px;
  min-width:0;
  border:1px solid rgba(160,200,255,.16);
  border-radius:13px;
  background:linear-gradient(90deg, rgba(0,179,255,.065), rgba(124,77,255,.04)), rgba(8,16,28,.58);
}
.dtnDeckViewerCardRow:hover{border-color:rgba(0,179,255,.35);filter:brightness(1.06);}
.dtnDeckViewerThumb{
  width:44px;
  aspect-ratio:421/614;
  object-fit:contain;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(0,0,0,.22);
  display:block;
}
.dtnDeckViewerCardText{min-width:0;display:grid;gap:3px;}
.dtnDeckViewerCardNameLine{display:flex;align-items:center;gap:7px;min-width:0;}
.dtnDeckViewerCardName{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dtnDeckViewerCardMeta{color:var(--dtn-dv-muted);font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dtnDeckViewerQty{
  min-width:34px;
  text-align:center;
  border-radius:999px;
  padding:4px 7px;
  color:#fff3ca;
  background:rgba(255,206,66,.13);
  border:1px solid rgba(255,206,66,.28);
  font-weight:900;
}

.dtnDeckViewerTierStack{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;}
.dtnDeckViewerTierBadge{
  width:20px;
  height:20px;
  border-radius:6px;
  display:inline-grid;
  place-items:center;
  font-weight:1000;
  font-size:11px;
  line-height:1;
  color:#06111b;
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset, 0 2px 6px rgba(0,0,0,.28);
}
.dtnDeckViewerTierBadge.banned{background:var(--dtn-dv-red);color:#fff;}
.dtnDeckViewerTierBadge.a{background:var(--dtn-dv-blue);color:#06111b;}
.dtnDeckViewerTierBadge.b{background:var(--dtn-dv-gold);color:#06111b;}
.dtnDeckViewerTierBadge.exempt{background:var(--dtn-dv-green);color:#06111b;}

.dtnDeckViewerEmpty{
  color:var(--dtn-dv-muted);
  border:1px dashed rgba(160,200,255,.25);
  background:rgba(200,220,255,.045);
  border-radius:13px;
  padding:12px;
  text-align:center;
}

.dtnDeckViewerSideWarning{
  border:1px solid rgba(255,206,66,.35);
  background:rgba(255,206,66,.10);
  color:#fff0b8;
  border-radius:13px;
  padding:10px;
  font-weight:800;
  line-height:1.35;
}

.dtnDeckViewerModalBackdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  z-index:9999;
  background:rgba(2,6,14,.78);
  backdrop-filter:blur(8px);
}
.dtnDeckViewerModalBackdrop.is-open{display:flex;}
.dtnDeckViewerModal{
  width:min(1280px, 96vw);
  max-height:92vh;
  overflow:auto;
  border-radius:20px;
  border:1px solid rgba(0,179,255,.25);
  background:rgba(4,10,20,.94);
  box-shadow:0 28px 80px rgba(0,0,0,.55);
}
.dtnDeckViewerModalTop{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  padding:10px;
  background:linear-gradient(180deg, rgba(4,10,20,.98), rgba(4,10,20,.82));
  border-bottom:1px solid rgba(160,200,255,.12);
}
.dtnDeckViewerModalBody{padding:0;}

@media (max-width: 900px){
  .dtnDeckViewerBody{grid-template-columns:1fr;}
  .dtnDeckViewerCoverPanel{position:static;}
  .dtnDeckViewerHead{display:grid;}
  .dtnDeckViewerActions{justify-content:flex-start;}
}

@media (max-width: 560px){
  .dtnDeckViewerCardRow{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;}
  .dtnDeckViewerThumb{width:38px;}
  .dtnDeckViewerCardName{white-space:normal;}
  .dtnDeckViewerCardMeta{white-space:normal;}
  .dtnDeckViewerModalBackdrop{padding:10px;}
}


/* =========================================================
   DTN Universal Deck Viewer Grid Mode Phase 2B
   Deck Builder-style visual deck display. Only applies when
   the viewer opts into .dtnDeckViewerGridMode.
   ========================================================= */
.dtnDeckViewerGridMode{--dv-slot-gap:6px;--dv-grid-pad:10px;}
.dtnDeckViewerGridMode .dtnDeckViewerGridShell{
  overflow:hidden;
  border:1px solid rgba(0,179,255,.22);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(0,179,255,.08),rgba(124,77,255,.10)),rgba(6,12,24,.74);
  box-shadow:0 18px 42px rgba(0,0,0,.34),inset 0 0 42px rgba(124,77,255,.06);
}
.dtnDeckViewerGridTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid rgba(160,200,255,.14);
  background:linear-gradient(90deg,rgba(0,179,255,.12),rgba(124,77,255,.08));
}
.dtnDeckViewerGridBody{
  display:grid;
  grid-template-columns:minmax(270px,330px) minmax(0,1fr);
  gap:14px;
  padding:14px;
  align-items:start;
}
.dtnDeckViewerGridPreview{
  position:sticky;
  top:76px;
  min-width:0;
  border:1px solid rgba(0,179,255,.18);
  border-radius:16px;
  background:rgba(8,16,28,.60);
  padding:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 0 34px rgba(124,77,255,.05);
}
.dtnDeckViewerGridPreviewImg{
  width:100%;
  aspect-ratio:421/614;
  border-radius:13px;
  overflow:hidden;
  border:1px solid rgba(160,200,255,.24);
  background:radial-gradient(circle at top,rgba(0,179,255,.12),rgba(9,13,24,.94));
  box-shadow:0 12px 30px rgba(0,0,0,.32);
}
.dtnDeckViewerGridPreviewImg img{width:100%;height:100%;display:block;object-fit:contain;}
.dtnDeckViewerGridPreviewText{display:grid;gap:7px;margin-top:10px;}
.dtnDeckViewerGridPreviewText h3{display:flex;gap:8px;align-items:center;margin:0;font-size:18px;line-height:1.18;overflow-wrap:anywhere;}
.dtnDeckViewerGridPreviewText p{margin:0;color:var(--dtn-dv-muted);font-size:12px;line-height:1.3;}
.dtnDeckViewerGridPreviewText [data-dtn-dv-cover-desc]{max-height:210px;overflow:auto;white-space:pre-wrap;color:#dceeff;background:rgba(200,220,255,.065);border:1px solid rgba(160,200,255,.20);border-radius:12px;padding:9px;font-size:12px;line-height:1.35;}
.dtnDeckViewerGridZones{min-width:0;display:grid;gap:12px;}
.dtnDeckViewerGridSection{display:grid;gap:8px;}
.dtnDeckViewerGridHead{display:flex;align-items:center;gap:10px;min-width:0;}
.dtnDeckViewerGridHead h3{margin:0;font-size:clamp(18px,1.7vw,22px);line-height:1.15;}
.dtnDeckViewerGridHead h3 span{color:var(--dtn-dv-blue);}
.dtnDeckViewerGridCapsule{margin-left:auto;white-space:nowrap;color:#d2e4ff;border:1px solid rgba(120,180,255,.24);background:rgba(30,70,130,.22);border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800;}
.dtnDeckViewerVisualGrid{
  --cols:10;
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  gap:var(--dv-slot-gap);
  width:100%;
  min-width:0;
  align-items:start;
  align-content:start;
  border:1px solid rgba(255,255,255,.25);
  border-radius:18px;
  padding:var(--dv-grid-pad);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.075),inset 0 0 42px rgba(0,0,0,.20),0 12px 30px rgba(0,0,0,.20);
}
.dtnDeckViewerVisualGrid-main{
  --cols:10;
  background:linear-gradient(135deg,rgba(255,221,74,.50),rgba(156,94,32,.44) 32%,rgba(47,196,101,.42) 66%,rgba(255,88,188,.46)),radial-gradient(circle at 14% 9%,rgba(255,255,255,.20),transparent 28%),rgba(34,28,18,.78);
}
.dtnDeckViewerVisualGrid-extra{
  --cols:15;
  background:linear-gradient(135deg,rgba(134,72,255,.62),rgba(255,255,255,.26) 50%,rgba(196,166,255,.56)),radial-gradient(circle at 85% 0%,rgba(255,255,255,.26),transparent 38%),rgba(27,14,58,.82);
}
.dtnDeckViewerVisualGrid-side{
  --cols:10;
  background:linear-gradient(135deg,rgba(255,206,66,.30),rgba(255,77,109,.18)),rgba(8,16,28,.72);
}
.dtnDeckViewerGridCard,.dtnDeckViewerGridSlot{
  position:relative;
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:421/614!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:8px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  background:rgba(0,0,0,.16)!important;
  box-shadow:0 2px 7px rgba(0,0,0,.36)!important;
  box-sizing:border-box!important;
}
.dtnDeckViewerGridCard{cursor:pointer;appearance:none;transition:transform .12s ease,filter .12s ease,border-color .12s ease;}
.dtnDeckViewerGridCard:hover,.dtnDeckViewerGridCard.is-active{transform:translateY(-2px);filter:brightness(1.08);border-color:rgba(0,179,255,.58)!important;z-index:2;}
.dtnDeckViewerGridCard img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important;padding:0!important;margin:0!important;max-width:none!important;max-height:none!important;}
.dtnDeckViewerGridSlot{pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(0,0,0,.10))!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),inset 0 0 16px rgba(255,255,255,.045)!important;opacity:.88;}
.dtnDeckViewerGridTierStack{position:absolute;top:3px;left:3px;z-index:20;display:flex;gap:2px;flex-wrap:wrap;align-items:flex-start;max-width:calc(100% - 6px);pointer-events:none;}
.dtnDeckViewerGridTier{width:clamp(16px,1.15vw,22px);height:clamp(16px,1.15vw,22px);border-radius:7px;display:grid;place-items:center;font-weight:1000;font-size:clamp(10px,.72vw,12px);line-height:1;border:1px solid rgba(0,0,0,.35);box-shadow:0 0 18px rgba(0,0,0,.18);text-shadow:0 1px 2px rgba(0,0,0,.65);}
.dtnDeckViewerGridTier.banned{background:rgba(255,59,59,.95);color:#fff;}
.dtnDeckViewerGridTier.a{background:rgba(0,179,255,.95);color:#fff;}
.dtnDeckViewerGridTier.b{background:rgba(255,206,66,.95);color:#101018;text-shadow:none;}
.dtnDeckViewerGridTier.exempt{background:rgba(35,209,125,.95);color:#fff;}
@media(max-width:1050px){.dtnDeckViewerGridBody{grid-template-columns:1fr}.dtnDeckViewerGridPreview{position:static;display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px}.dtnDeckViewerGridPreviewText{margin-top:0}.dtnDeckViewerVisualGrid-extra{--cols:5}}
@media(max-width:620px){.dtnDeckViewerGridTop{display:grid}.dtnDeckViewerGridPreview{display:block}.dtnDeckViewerGridPreviewImg{max-width:260px;margin:0 auto}.dtnDeckViewerVisualGrid{--cols:5!important}.dtnDeckViewerGridMode{--dv-slot-gap:5px;--dv-grid-pad:7px}.dtnDeckViewerGridCapsule{display:none}}

/* =========================================================
   Phase 2C — force visual grid cards to fill deck.html-style slots.
   This fixes global button/card/image styles shrinking the images inside
   the Universal Deck Viewer grid mode.
   ========================================================= */
.dtnDeckViewerGridMode .dtnDeckViewerVisualGrid{
  grid-auto-rows:auto !important;
}
.dtnDeckViewerGridMode .dtnDeckViewerVisualGrid .dtnDeckViewerGridCard,
.dtnDeckViewerGridMode .dtnDeckViewerVisualGrid .dtnDeckViewerGridSlot{
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:421 / 614 !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:8px !important;
  overflow:hidden !important;
  line-height:0 !important;
  font-size:0 !important;
  text-align:left !important;
  align-self:start !important;
  justify-self:stretch !important;
  box-sizing:border-box !important;
}
.dtnDeckViewerGridMode .dtnDeckViewerVisualGrid .dtnDeckViewerGridCard img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:421 / 614 !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  transform:none !important;
}
.dtnDeckViewerGridMode .dtnDeckViewerGridTierStack{
  position:absolute !important;
  top:3px !important;
  left:3px !important;
  right:auto !important;
  bottom:auto !important;
  z-index:30 !important;
  display:flex !important;
  gap:2px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  pointer-events:none !important;
  line-height:1 !important;
  font-size:12px !important;
}
.dtnDeckViewerGridMode .dtnDeckViewerGridTier{
  flex:0 0 auto !important;
}