/* deck.css — the deck builder (deck.html). Loads after ui-v2.css and vault.css (it reuses the search, chips, pills,
   filter sheet and gate styles). Desktop: your cards left, the deck right. Phone: the deck lives in a bar that opens a sheet. */

body.deckb { overflow-x: hidden; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) var(--pad) 12px;
  background: linear-gradient(180deg, rgba(5,5,5,.92), rgba(5,5,5,.6)); backdrop-filter: blur(16px); }
.back { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 8px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--glass); border: 1px solid var(--hair); white-space: nowrap; }
.back svg, .iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.iconbtn svg circle { fill: currentColor; stroke: none; }
.dname { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 12px; font: 900 18px var(--display); letter-spacing: .04em; color: var(--ink); background: transparent; border: 1px solid transparent; outline: 0; text-overflow: ellipsis; }
.dname:hover, .dname:focus { border-color: var(--hair); background: rgba(255,255,255,.04); }
.top .v2-btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
.iconbtn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); background: var(--glass); border: 1px solid var(--hair) !important; }

.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 20px; padding: 8px var(--pad) 40px; max-width: 1440px; margin: 0 auto; align-items: start; }
.builder > .gatebox { grid-column: 1 / -1; }
.pool { min-width: 0; display: grid; gap: 12px; }
.tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.spot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 20px; box-shadow: none; }
.spot > div { flex: 1 1 240px; display: grid; gap: 2px; }
.pool-hint { margin: -4px 2px 0; }
.pgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; }
.pgrid .tile .art { border-radius: 7px; }
.tile.used .art { filter: grayscale(.75) brightness(.5); }
.tile.ban .art { filter: grayscale(1) brightness(.4); }
.tile.buy .art { outline: 1.5px dashed rgba(255,255,255,.35); outline-offset: -1.5px; filter: saturate(.55) brightness(.8); }
.tile .have { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lim { position: absolute; left: 5px; top: 5px; z-index: 2; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; font-size: 11px; font-weight: 800; }
.lim.l0 { color: #fff; background: #d9443a; } .lim.l1 { color: #160f03; background: #ffb35c; } .lim.l2 { color: #160f03; background: #ffe08a; }
.indeck { position: absolute; right: 5px; top: 5px; z-index: 2; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; font-size: 11px; font-weight: 800; color: #160f03; background: var(--hi); }
.price { position: absolute; right: 5px; top: 5px; z-index: 2; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(0,0,0,.78); }
.info { position: absolute; right: 4px; bottom: 4px; z-index: 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.72); }
.info svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.tile .fin { right: auto; }
.tile.dragging { opacity: .4; }
/* undo / redo in the top bar (a phone has no keyboard shortcuts and little room, so they stay on bigger screens) */
.iconbtn:disabled { opacity: .35; cursor: default; }
@media (max-width: 600px) { #undoBtn, #redoBtn { display: none; } }
/* importing a deck list */
.imp-text { display: block; width: 100%; min-height: 160px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; resize: vertical; outline: 0;
  font-family: var(--mono, ui-monospace, monospace); font-size: 13px; line-height: 1.5; color: var(--ink); background: rgba(0,0,0,.35); border: 1px solid var(--hair); }
.imp-text:focus { border-color: rgba(255,230,163,.5); }
.imp-file { justify-content: center; cursor: pointer; }
.imp-list { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; }
/* desktop: a big preview of the card under the pointer, beside it (deck.js showPeek); never takes the pointer */
.dpeek { position: fixed; z-index: 40; width: 300px; display: grid; gap: 10px; padding: 12px; border-radius: 20px; pointer-events: none;
  background: rgba(16,14,12,.95); border: 1px solid var(--hair); box-shadow: 0 24px 60px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.dpeek[hidden] { display: none; }
.dpeek img { width: 100%; aspect-ratio: 813 / 1185; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.55); background: #140c06; }
.dpeek .pk-body { display: grid; gap: 3px; min-width: 0; align-content: start; }
.dpeek b { font-size: 16px; line-height: 1.25; }
.dpeek p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.dpeek small { margin-top: 6px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* a shorter screen: art and text side by side, so the whole preview fits */
@media (max-height: 820px) { .dpeek { width: 520px; grid-template-columns: 200px minmax(0, 1fr); } }

/* the deck panel (desktop aside, phone sheet) */
.panel { position: sticky; top: 76px; display: grid; gap: 14px; padding: 18px; border-radius: 26px; background: rgba(18,16,14,.72); border: 1px solid var(--hair); backdrop-filter: blur(20px); max-height: calc(100vh - 92px); overflow: auto; }
.panel.over { box-shadow: 0 0 0 2px var(--hi); }
.panel-body { display: grid; gap: 14px; }
.meters { display: grid; gap: 10px; }
.meter .row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.meter .row b { font-variant-numeric: tabular-nums; }
.meter .v2-bar { height: 8px; margin-top: 5px; }
.meter.bad .v2-bar i { background: linear-gradient(90deg, #d9443a, #ff8a7a); box-shadow: none; }
.meter.ok .v2-bar i { background: linear-gradient(90deg, #2f9e62, var(--ok)); box-shadow: 0 0 10px rgba(126,226,168,.5); }
.issues { display: grid; gap: 6px; }
.issue { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.35; }
.issue::before { content: ""; width: 8px; height: 8px; margin-top: 5px; flex: none; border-radius: 50%; background: var(--c1); box-shadow: 0 0 8px var(--c1); }
.issue.err { --c1: #ff6a5a; } .issue.warn { --c1: var(--warn); } .issue.ok { --c1: var(--ok); } .issue.tip { --c1: var(--r-rare); color: var(--ink-2); }
.fits { display: flex; flex-wrap: wrap; gap: 6px; }
.fits span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.06); }
.fits i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.fits .no i { background: #ff6a5a; } .fits .wait i { background: var(--faint); }
.fitnote { margin: -6px 0 0; font-size: 12.5px; color: var(--muted); }
.zone-seg { width: 100%; }
.group { display: grid; gap: 2px; }
.group h4 { display: flex; justify-content: space-between; margin: 8px 4px 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.drow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 12px; transition: background .2s; }
.drow:hover { background: var(--glass); }
.drow.sel { background: rgba(255,255,255,.1); }
.drow.planned { outline: 1px dashed rgba(255,255,255,.28); outline-offset: -1px; }
.drow img { width: 30px; height: 30px; object-fit: cover; border-radius: 6px; }
.drow .t { min-width: 0; cursor: pointer; text-align: left; }
.drow .t b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow .t small { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow .t small em { font-style: normal; font-weight: 700; color: #ffb35c; }
.drow .t small .f { color: var(--hi); font-weight: 700; }
.step { display: flex; align-items: center; gap: 4px; }
.step button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 17px; font-weight: 700; background: rgba(255,255,255,.08); }
.step b { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.dempty { padding: 14px 6px; font-size: 13.5px; color: var(--muted); }
.stats2 { display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.04); }
.mst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; }
.mst b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mst small { font-size: 11.5px; color: var(--muted); }
.curve { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; height: 96px; }
.curve div { display: grid; gap: 4px; align-content: end; height: 100%; text-align: center; }
.curve i { display: block; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--hi), color-mix(in srgb, var(--c) 60%, #000)); min-height: 3px; }
.curve small { font-size: 11px; color: var(--muted); line-height: 1.25; }
.curve b { font-size: 12px; }
.odds { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.odds b { color: var(--ink); }
.shop { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.04); }
.shop h4 { margin: 0; font-size: 14px; }
.shop .srow { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.shop .srow span:last-child { color: var(--muted); text-align: right; }
.shop .srow.pend span:first-child { color: var(--warn); }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.actions .wide { grid-column: 1 / -1; }

/* phone: the deck lives in a bar that opens a sheet */
.deckbar { display: none; }
.hand5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.hand5 img { width: 100%; border-radius: 6px; box-shadow: 0 10px 20px rgba(0,0,0,.5); animation: dealin .45s var(--ease) both; }
@keyframes dealin { from { opacity: 0; transform: translateY(-20px) rotate(-6deg); } }
.sugg { display: grid; gap: 10px; }
.sg { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.05); }
.sg img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
.sg b { display: block; font-size: 15px; }
.sg small { display: block; font-size: 12.5px; color: var(--muted); }
.sg .v2-bar { margin: 6px 0; }
.cardinfo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 14px; }
.cardinfo img { width: 100%; border-radius: 8px; box-shadow: 0 16px 30px rgba(0,0,0,.6); }
.cardinfo p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; max-height: 11em; overflow: auto; }
.ai-ta { width: 100%; min-height: 110px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--hair); background: rgba(0,0,0,.3); color: var(--ink); font: 12.5px/1.45 var(--mono); resize: vertical; }
.sheet-stack { display: grid; gap: 10px; }

@media (max-width: 900px) {
  .builder { grid-template-columns: minmax(0, 1fr); padding-bottom: 110px; }
  .builder > .panel { display: none; }
  .deckbar:not([hidden]) { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 22px;
    background: rgba(18,16,14,.94); border: 1px solid var(--hair); backdrop-filter: blur(22px); box-shadow: 0 20px 50px rgba(0,0,0,.6); }
  .deckbar .open { flex: 1; min-width: 0; display: grid; gap: 4px; text-align: left; }
  .deckbar .open b { font-size: 14px; display: flex; align-items: center; gap: 8px; }
  .deckbar .open b i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .deckbar .open small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .deckbar .v2-bar { height: 5px; }
  .deckbar .v2-btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
  .top .save-top { display: none; }
  .v2.deckb #chatOv { bottom: calc(98px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .back span { display: none; } }
@media (orientation: landscape) and (max-height: 500px) {
  .builder { grid-template-columns: minmax(0, 1fr) minmax(280px, 42%); padding-bottom: 12px; }
  .builder > .panel { display: grid; top: 60px; max-height: calc(100dvh - 68px); padding: 12px; gap: 10px; }
  .deckbar:not([hidden]) { display: none; }
  .top { padding-top: 8px; padding-bottom: 8px; }
  .top .save-top { display: inline-flex; }
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .curve { height: 64px; }
}