/* ============================================================================
   KrakenTheMeta — /precons  ·  Abyssal Arsenal brand (Cinzel + Sora, abyss/ink/cyan).
   Commander preconstructed-deck browser. List view: art-forward deck tiles glowing
   in each precon's color identity. Detail view: the full decklist ON OUR SITE
   (grouped by type, live prices, TCGplayer buy links).
   Namespace: .pc-
   ============================================================================ */
:root {
  --pc-abyss:#04101e; --pc-ink:#081f33; --pc-ink2:#0b2640;
  --pc-line:rgba(162,231,238,.12); --pc-line2:rgba(162,231,238,.22);
  --pc-cyan:#a2e7ee; --pc-blue:#4196e0; --pc-text:#eaf4fb; --pc-dim:#9fb6c9; --pc-mut:#6f879b;
  --pc-grad:linear-gradient(135deg,#a2e7ee,#4196e0);
  /* mana identity colors (for accents / pips) */
  --mana-w:#f7e7b6; --mana-u:#4aa3e8; --mana-b:#9a6bd0; --mana-r:#e5654b; --mana-g:#57b66f; --mana-c:#a2e7ee;
}
.pc-page, .pc-page * { box-sizing:border-box; }
.pc-page {
  font-family:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--pc-text); width:100%; max-width:1180px; margin:0 auto; padding:120px 22px 90px; min-height:60vh;
  min-width:0; /* body is display:flex — prevents grid from overflowing narrow screens */
}

/* ---- hero ---- */
.pc-hero { text-align:center; margin-bottom:20px; }
.pc-eyebrow { display:inline-block; font-size:12px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--pc-cyan); opacity:.8; margin-bottom:12px; }
.pc-title { font-family:'Cinzel',Georgia,serif; font-weight:700; letter-spacing:.5px; line-height:1.12;
  font-size:clamp(1.9rem,5vw,2.9rem); margin:0 0 12px;
  background:var(--pc-grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.pc-sub { color:var(--pc-dim); font-size:clamp(14px,2.2vw,16px); max-width:640px; margin:0 auto; line-height:1.55; }

/* ---- toolbar ---- */
.pc-toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; margin:24px 0 12px; }
.pc-search { position:relative; flex:1; min-width:220px; max-width:440px; }
.pc-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:15px; height:15px; fill:var(--pc-mut); }
.pc-input, .pc-select {
  width:100%; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.06);
  border:1px solid var(--pc-line); color:var(--pc-text); font-family:inherit; font-size:14.5px;
  transition:border-color .2s, box-shadow .2s;
}
.pc-input { padding-left:40px; }
.pc-input::placeholder { color:var(--pc-mut); }
.pc-input:focus, .pc-select:focus { outline:none; border-color:var(--pc-cyan); box-shadow:0 0 0 3px rgba(162,231,238,.15); }
.pc-select { width:auto; appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239fb6c9' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.pc-select option { background:var(--pc-ink); color:var(--pc-text); }

/* ---- real WOTC mana symbols (shared with deck-view: /images/{W,U,B,R,G,C,...}.svg) ---- */
.pc-ms { height:17px; width:17px; border-radius:50%; vertical-align:-3px;
  box-shadow:-0.05em 0.06em 0 #0a0a0a, 0 0.05em 0 #0a0a0a; }
.pc-ms-generic { display:inline-flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif;
  font-weight:700; font-size:11px; color:#111; background:#cac5c0; }
.pc-ms-id { height:18px; width:18px; } /* color-identity display on tiles + detail header */

/* ---- color filter (real mana symbols, dim until active) ---- */
.pc-colorfilter { display:flex; gap:6px; align-items:center; }
.pc-pip { width:32px; height:32px; border-radius:50%; cursor:pointer; padding:0; display:inline-flex;
  align-items:center; justify-content:center; background:rgba(255,255,255,.05);
  border:1px solid var(--pc-line); transition:transform .15s, box-shadow .2s, border-color .2s, background .2s; }
.pc-pip img { width:20px; height:20px; opacity:.5; transition:opacity .2s; }
.pc-pip:hover { transform:scale(1.1); border-color:var(--pc-line2); }
.pc-pip:hover img { opacity:.85; }
.pc-pip[aria-pressed="true"] { border-color:var(--pc-cyan); background:rgba(162,231,238,.12);
  box-shadow:0 0 0 3px rgba(162,231,238,.18); }
.pc-pip[aria-pressed="true"] img { opacity:1; }

/* ---- result count ---- */
.pc-count { text-align:center; color:var(--pc-mut); font-size:13px; margin:0 0 22px; min-height:16px; }

/* ---- precon grid ---- */
.pc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }

.pc-tile {
  --acc:var(--pc-cyan);
  position:relative; display:flex; flex-direction:column; border-radius:16px; cursor:pointer; overflow:hidden;
  width:100%; min-width:0; text-align:left; font-family:inherit; color:inherit; padding:0;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 60%),var(--pc-ink);
  border:1px solid var(--pc-line); transition:transform .22s, border-color .22s, box-shadow .22s;
}
.pc-tile:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  box-shadow:0 20px 48px -22px color-mix(in srgb,var(--acc) 75%,transparent); }

/* commander art banner */
.pc-tile-art { position:relative; width:100%; aspect-ratio:16/7; overflow:hidden; background:var(--pc-abyss); display:block; }
.pc-tile-art img { width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block;
  transition:transform .5s ease; }
.pc-tile:hover .pc-tile-art img { transform:scale(1.06); }
.pc-tile-art::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(8,31,51,.55) 78%,var(--pc-ink) 100%),
             linear-gradient(90deg,color-mix(in srgb,var(--acc) 26%,transparent),transparent 55%); }
.pc-tile-set { position:absolute; top:10px; left:10px; z-index:2; font-family:'Sora',sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; color:#eaf6fb; padding:4px 9px; border-radius:7px;
  background:rgba(4,16,30,.62); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(4px); }
.pc-tile-year { position:absolute; top:10px; right:10px; z-index:2; font-size:11px; font-weight:600; color:#cfe6ef;
  padding:4px 9px; border-radius:7px; background:rgba(4,16,30,.5); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(4px); }

/* body */
.pc-tile-body { position:relative; padding:14px 16px 16px; margin-top:-24px; z-index:2; display:flex; flex-direction:column; gap:9px; flex:1; }
.pc-tile-name { font-family:'Cinzel',Georgia,serif; font-size:18px; font-weight:700; color:#fff; line-height:1.2; overflow-wrap:anywhere; }
.pc-tile-cmd { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--pc-dim); line-height:1.3; }
.pc-tile-cmd .pc-crown { width:13px; height:13px; flex-shrink:0; fill:var(--acc); opacity:.85; }
.pc-tile-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:4px; }
.pc-tile-pips { display:flex; gap:3px; align-items:center; }
.pc-tile-cards { font-size:11.5px; color:var(--pc-mut); font-weight:500; }

/* ---- pagination / buttons ---- */
.pc-more { display:flex; justify-content:center; gap:10px; margin-top:30px; }
.pc-btn { display:inline-flex; align-items:center; gap:9px; padding:12px 24px; border-radius:11px; font-family:inherit;
  font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent; text-decoration:none;
  transition:transform .15s, box-shadow .2s, background .2s, border-color .2s; }
.pc-btn--primary { background:var(--pc-grad); color:#05101c; }
.pc-btn--primary:hover { transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(162,231,238,.6); }
.pc-btn--ghost { background:var(--pc-ink); color:var(--pc-text); border-color:var(--pc-line); }
.pc-btn--ghost:hover { background:var(--pc-ink2); border-color:var(--pc-line2); }
.pc-btn[disabled] { opacity:.4; cursor:default; transform:none; box-shadow:none; }

/* ---- detail view ---- */
.pc-detail[hidden] { display:none; }
.pc-back { display:inline-flex; align-items:center; gap:8px; background:none; border:none; color:var(--pc-dim); font-family:inherit;
  font-size:14px; cursor:pointer; padding:0; margin-bottom:20px; transition:color .2s; }
.pc-back:hover { color:var(--pc-cyan); }

/* breadcrumb (server-rendered detail page) */
.pc-crumbs { font-size:13px; color:var(--pc-mut); margin-bottom:18px; display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.pc-crumbs a { color:var(--pc-dim); text-decoration:none; }
.pc-crumbs a:hover { color:var(--pc-cyan); }
.pc-crumbs span { color:var(--pc-mut); }
.pc-crumbs-cur { color:var(--pc-text); }

/* detail hero */
.pc-dhead { --acc:var(--pc-cyan); position:relative; border-radius:18px; overflow:hidden; margin-bottom:26px;
  border:1px solid var(--pc-line); background:var(--pc-ink); }
.pc-dhead-art { position:absolute; inset:0; }
.pc-dhead-art img { width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.pc-dhead-art::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(4,16,30,.92) 0%,rgba(4,16,30,.78) 42%,rgba(4,16,30,.35) 100%),
             linear-gradient(180deg,transparent,rgba(4,16,30,.55)); }
.pc-dhead-inner { position:relative; z-index:2; padding:30px 26px; display:flex; flex-direction:column; gap:12px; min-height:190px; justify-content:flex-end; }
.pc-dset { font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--acc); }
.pc-dtitle { font-family:'Cinzel',Georgia,serif; font-size:clamp(1.6rem,4.4vw,2.5rem); font-weight:700; color:#fff; margin:0; line-height:1.12;
  text-shadow:0 2px 20px rgba(0,0,0,.6); }
.pc-dcmd { font-size:14.5px; color:#dbeaf2; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pc-dcmd .pc-crown { width:15px; height:15px; fill:var(--acc); }
.pc-dmeta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:2px; }
.pc-dmeta-item { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--pc-dim); }
.pc-dmeta-item strong { color:#fff; font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:15px; }
.pc-dpips { display:flex; gap:5px; }
.pc-dactions { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

/* decklist */
.pc-decklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; align-items:start; }
.pc-group { break-inside:avoid; }
.pc-group-h { display:flex; align-items:center; gap:9px; font-family:'Cinzel',Georgia,serif; font-size:14px; font-weight:700;
  color:#fff; text-transform:uppercase; letter-spacing:.6px; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--pc-line); }
.pc-group-h .pc-group-n { color:var(--pc-mut); font-family:'Sora',sans-serif; font-weight:600; font-size:12px; }
.pc-row { display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:9px; transition:background .15s; }
.pc-row:hover { background:rgba(162,231,238,.06); }
.pc-row-qty { flex-shrink:0; min-width:26px; font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:13px; color:var(--pc-cyan); text-align:right; }
.pc-row-name { flex:1; min-width:0; font-size:13.5px; color:var(--pc-text); line-height:1.25; overflow-wrap:anywhere; text-decoration:none; }
.pc-row-name:hover { color:var(--pc-cyan); text-decoration:underline; text-underline-offset:2px; }
.pc-row-name.cmd { font-weight:700; color:#fff; }
.pc-row-mana { flex-shrink:0; display:flex; align-items:center; gap:2px; }
.pc-row-mana .pc-ms { height:15px; width:15px; }
.pc-row-mana .pc-ms-generic { font-size:10px; }
.pc-row-price { flex-shrink:0; font-size:12.5px; color:var(--pc-dim); font-variant-numeric:tabular-nums; }
.pc-row-buy { flex-shrink:0; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:7px; background:rgba(162,231,238,.1); border:1px solid var(--pc-line); transition:background .2s, border-color .2s; }
.pc-row-buy:hover { background:color-mix(in srgb,var(--pc-cyan) 22%,transparent); border-color:var(--pc-line2); }
.pc-row-buy svg { width:12px; height:12px; fill:var(--pc-cyan); }

/* card image hover preview */
.pc-preview { position:fixed; z-index:9999; width:220px; border-radius:12px; overflow:hidden; pointer-events:none;
  box-shadow:0 20px 60px -10px rgba(0,0,0,.8); border:1px solid var(--pc-line2); opacity:0; transition:opacity .12s; }
.pc-preview img { width:100%; display:block; }

/* ---- related precons (server-rendered internal links) ---- */
.pc-related { margin-top:44px; padding-top:30px; border-top:1px solid var(--pc-line); }
.pc-related-h { font-family:'Cinzel',Georgia,serif; font-size:18px; font-weight:700; color:#fff; margin:0 0 18px; }
.pc-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; }
.pc-related-card { --acc:var(--pc-cyan); display:flex; flex-direction:column; border-radius:13px; overflow:hidden; text-decoration:none;
  background:var(--pc-ink); border:1px solid var(--pc-line); transition:transform .2s, border-color .2s, box-shadow .2s; }
.pc-related-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  box-shadow:0 16px 40px -22px color-mix(in srgb,var(--acc) 75%,transparent); }
.pc-related-art { width:100%; aspect-ratio:16/8; overflow:hidden; background:var(--pc-abyss); position:relative; }
.pc-related-art img { width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.pc-related-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 24%,transparent),transparent 60%); }
.pc-related-body { padding:11px 13px 13px; display:flex; flex-direction:column; gap:3px; }
.pc-related-name { font-family:'Cinzel',Georgia,serif; font-size:14px; font-weight:600; color:#fff; line-height:1.2; }
.pc-related-set { font-size:11px; color:var(--pc-mut); font-weight:600; letter-spacing:.6px; }
.pc-backwrap { margin-top:32px; }

/* ---- states ---- */
.pc-empty { text-align:center; padding:50px 20px; color:var(--pc-mut); grid-column:1/-1; }
.pc-spinner { width:44px; height:44px; margin:60px auto; border:3px solid rgba(162,231,238,.18); border-top-color:var(--pc-cyan); border-radius:50%; animation:pc-spin .8s linear infinite; }
@keyframes pc-spin { to { transform:rotate(360deg); } }

@media (max-width:640px) {
  .pc-page { padding:100px 14px 80px; }
  .pc-grid { grid-template-columns:1fr; }
  .pc-toolbar { gap:10px; }
  .pc-search { max-width:none; }
  .pc-dhead-inner { padding:22px 18px; }
  .pc-decklist { grid-template-columns:1fr; gap:18px; }
  .pc-preview { display:none; }
}