/* Deck builder (decks.js): your cards on the left, the deck on the right; stacked on phones. */
.dwrap { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 16px 60px; }
.dhead { position: relative; margin-top: 22px; padding: 24px 28px 20px; background: linear-gradient(90deg, rgba(3,7,11,.9), rgba(3,7,11,.72)); border: 1px solid var(--edge2); backdrop-filter: blur(6px);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.dhead h1 { font-size: clamp(30px, 5.5vw, 54px); margin: 8px 0 10px; }
.dhead h1 em { font-style: normal; color: var(--cyan); }
.dhead .lede { color: #c9d8e1; max-width: 70ch; margin: 0; }
.dgate { margin-top: 18px; padding: 22px 26px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; background: rgba(3,7,11,.88); border: 1px solid rgba(114,220,255,.35); }
.dgate p { margin: 0; color: #c9d8e1; flex: 1 1 320px; }
.dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; margin-top: 18px; align-items: start; }
.dpool { position: relative; padding: 16px; background: rgba(3,7,11,.82); border: 1px solid var(--edge2); backdrop-filter: blur(6px); }
.dpool .filters { margin-bottom: 14px; background: none; padding: 0; }
.dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.dcell { position: relative; transition: transform .2s; }
.dcell:hover { transform: translateY(-4px); }
.dcell .holo { cursor: pointer; }
.dcell.in .holo { filter: brightness(.45) saturate(.6); }
.dcell .dbadge { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; font: 700 12px var(--hud, system-ui); letter-spacing: .2em; text-transform: uppercase; color: #72DCFF; }
.dcell.in .dbadge { padding: 4px 8px; background: rgba(3,7,11,.85); border: 1px solid rgba(114,220,255,.6); }
.dcell .dview { position: absolute; right: 4px; bottom: 4px; z-index: 6; opacity: 0; transition: opacity .2s; background: rgba(3,7,11,.85); color: #cfeefc; border: 1px solid rgba(114,220,255,.4); font: 700 12px var(--hud, system-ui); letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; cursor: pointer; }
.dcell:hover .dview, .dcell .dview:focus-visible { opacity: 1; }
@media (hover: none) { .dcell .dview { opacity: 1; } }
.dempty { color: #8fa3b0; grid-column: 1 / -1; }

.ddeck { position: sticky; top: 64px; display: grid; gap: 10px; padding: 16px; background: linear-gradient(180deg, rgba(10,20,30,.95), rgba(3,7,11,.95)); border: 1px solid rgba(114,220,255,.4);
  box-shadow: inset 0 0 40px -18px rgba(24,191,255,.5); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); max-height: calc(100dvh - 80px); overflow-y: auto; }
.dtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.dtab { background: rgba(14,24,34,.9); color: #cfeefc; border: 1px solid rgba(114,220,255,.25); padding: 5px 10px; font: 700 12px var(--hud, system-ui); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtab[aria-pressed="true"] { border-color: #18BFFF; background: rgba(24,191,255,.16); }
.dtab.new { color: #72DCFF; }
.dtab:disabled { opacity: .4; cursor: default; }
.dname { display: grid; gap: 4px; }
.dname span { font: 600 12px var(--hud, system-ui); letter-spacing: .2em; text-transform: uppercase; color: #8fa3b0; }
.dname input { background: rgba(5,10,15,.9); border: 1px solid rgba(114,220,255,.3); color: #fff; padding: 9px 10px; font: 600 16px var(--hud, system-ui); letter-spacing: .04em; }
.dname input:focus { outline: none; border-color: #18BFFF; }
.dcount { font: 600 13px var(--hud, system-ui); letter-spacing: .14em; text-transform: uppercase; color: #8fa3b0; }
.dcount b { color: #fff; font-size: 18px; }
.dlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.dlist li { display: grid; grid-template-columns: 26px 1fr auto 22px; gap: 8px; align-items: center; padding: 5px 6px; background: rgba(14,24,34,.75); border-left: 3px solid var(--fc, #26323c); cursor: pointer; font-size: 13.5px; }
.dlist li:hover { background: rgba(24,191,255,.1); }
.dlist li.empty { border-left-color: rgba(114,220,255,.12); background: rgba(5,10,15,.5); color: #4d6170; cursor: default; }
.dlist .dc { width: 22px; height: 24px; display: grid; place-items: center; font: 700 13px var(--mono, monospace); color: #04121a; background: #72DCFF; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.dlist li.empty .dc { background: #1d3242; }
.dlist .dn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlist .dt { font: 600 12px var(--hud, system-ui); letter-spacing: .12em; text-transform: uppercase; color: #8fa3b0; }
.dlist li.t-sigil .dt { color: #E0BE72; } .dlist li.t-prime .dt { color: #f3c7a0; } .dlist li.t-sable .dt { color: #9fe6ff; } .dlist li.t-vault .dt { color: #18BFFF; }
.dlist .dx { background: none; border: 0; color: #8fa3b0; font-size: 18px; cursor: pointer; line-height: 1; }
.dlist .dx:hover { color: #FF7A59; }
.dcurve { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; height: 74px; align-items: end; padding-top: 4px; }
.dcurve div { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; }
.dcurve i { position: relative; align-self: end; height: var(--h); min-height: 2px; background: linear-gradient(180deg, #72DCFF, #0f6d93); box-shadow: 0 0 10px -2px #18BFFF; transition: height .3s; }
.dcurve i b { position: absolute; top: -16px; left: 0; right: 0; font: 700 11px var(--mono, monospace); color: #cfeefc; }
.dcurve span { font: 600 12px var(--mono, monospace); color: #8fa3b0; margin-top: 3px; }
.dfac { display: flex; flex-wrap: wrap; gap: 6px; }
.dfac span { font: 700 11px var(--hud, system-ui); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--fc); color: var(--fc); }
.dfac span.zero { opacity: .35; }
.dwhy { margin: 0; min-height: 1.3em; font-size: 13.5px; color: #c9d8e1; }
.dwhy.ok { color: #8FD0B8; }
.dwhy.bad { color: #FF7A59; }
.dact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dact .btn { padding: 9px 14px !important; font-size: 13px !important; text-decoration: none; }
.dact .btn.off { pointer-events: none; opacity: .4; }
.dact #ddel { margin-left: auto; }
@media (max-width: 900px) {
  .dgrid { grid-template-columns: 1fr; }
  .ddeck { position: relative; top: 0; max-height: none; order: -1; }
  .dcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dhead { padding: 18px 16px; }
}

/* rarity limits and the clickable-but-not-ready buttons */
.dlim { display: flex; flex-wrap: wrap; gap: 6px; }
.dlim span { font: 700 11px var(--hud, system-ui); letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; color: #8fa3b0; border: 1px solid rgba(114,220,255,.18); }
.dlim span.full { color: #E0BE72; border-color: rgba(224,190,114,.5); }
.dlim span.over { color: #FF7A59; border-color: #FF7A59; box-shadow: 0 0 10px -2px #FF7A59; }
.dact .btn.dim { filter: grayscale(.7) brightness(.7); }
.dwhy.bad { font-weight: 600; padding: 8px 10px; border-left: 3px solid #FF7A59; background: rgba(255,122,89,.08); }
.dcell.lim .holo { filter: grayscale(.8) brightness(.45); }
.dcell.lim .dbadge { padding: 4px 8px; background: rgba(3,7,11,.85); border: 1px solid rgba(255,122,89,.6); color: #FF7A59; }
/* touch screens: finger-sized targets for remove, inspect and the deck tabs */
@media (pointer: coarse) {
  .dlist li { grid-template-columns: 26px 1fr auto 36px; padding: 6px; min-height: 40px; }
  .dlist .dx { width: 36px; height: 36px; }
  .dcell .dview { min-width: 44px; min-height: 32px; }
  .dtab { min-height: 38px; }
}