/* ═══════════════════════════════════════════════════
   DBZ: Prime Time — Shared Card Stylesheet
   Canonical landscape format: 690×460px CSS = 6"×4" physical at 300 DPI
   Source: goku_landscape.html (canonical template)
   ═══════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0a0a12;
  font-family: 'Segoe UI', Arial, sans-serif;
  padding: 40px;
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 0;
  color: #eee;
  max-width: 100vw; overflow-x: hidden;
}

/* ── Print page grouping (2 cards per letter page) ── */
.print-page {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 24px;
  padding: 0 0 40px;
  margin-bottom: 8px;
  border-bottom: 2px dashed rgba(255,255,255,0.08);
}
.print-page:last-child { border-bottom: none; padding-bottom: 0; }

.card-label {
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  color: #555; margin-bottom: 8px;
}

/* ══════════════════════════════════════
   CARD SHELL — 690×460px (responsive)
   flex-column: main row on top, passive strip + footer below
   Scales down on smaller screens, maintains aspect ratio
══════════════════════════════════════ */
.lcard {
  width: 690px; height: 460px;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 690 / 460;
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 0 3px var(--ac-dim), 0 16px 48px rgba(0,0,0,0.9);
  background: #0d0d1a;
  flex-shrink: 0;
}

/* ── Main row: portrait + content side by side ── */
.lc-main {
  display: flex; flex-direction: row;
  flex: 1; min-height: 0;
}

/* ══════════════════════════════════════
   LEFT — PORTRAIT PANEL (245px)
   Image area (190px) + stat sidebar (55px)
══════════════════════════════════════ */
.lc-portrait {
  width: 245px; flex-shrink: 0;
  display: flex; flex-direction: row;
  border-right: 2px solid var(--ac);
}

/* Image area */
.lc-port-img {
  width: 190px; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.lc-port-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 60%, #06060f 100%);
}
.lc-port-bg::before {
  content: '';
  position: absolute; bottom: -20px; left: -20px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
}
.lc-port-bg::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
}
.lc-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: drop-shadow(0 0 18px var(--glow));
  z-index: 1;
}

/* Tier badge */
.lc-tier {
  position: absolute; top: 10px; left: 8px; right: 8px; z-index: 5;
  background: rgba(0,0,0,0.82);
  border: 1.5px solid var(--ac);
  border-radius: 7px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
}
.lc-tier-label {
  width: 100%; text-align: center;
  background: var(--ac-dim);
  border-bottom: 1px solid var(--ac);
  padding: 3px 6px;
  font-size: 7px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ac-text);
}
.lc-threat-wrap { display: flex; align-items: baseline; gap: 3px; padding: 4px 6px 5px; }
.lc-threat-lbl { font-size: 6px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ac-text); opacity: 0.8; }
.lc-threat-num { font-size: 22px; font-weight: 900; color: #fff; line-height: 1; }

/* Ascension unlock cost badge line */
.lc-unlock-cost {
  width: 100%; text-align: center;
  padding: 3px 6px 4px;
  font-size: 7px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ac-text);
  border-top: 1px solid var(--ac);
  background: rgba(0,0,0,0.3);
}

/* Name block */
.lc-name-block {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  padding: 14px 8px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
}
.lc-char-name {
  font-size: 24px; font-weight: 900; color: #fff; line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,1), 0 0 20px rgba(0,0,0,0.8);
  letter-spacing: 0.3px;
}
.lc-form-name {
  font-size: 8px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff; margin-top: 3px; opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0,0,0,1);
}

/* Stat sidebar */
.lc-port-sb {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.02);
  border-left: 1px solid rgba(0,0,0,0.5);
}
.lc-sb-stat {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 3px 3px; gap: 1px; overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,0.4);
}
.lc-sb-stat:last-child { border-bottom: none; }
.lc-sb-lbl { font-size: 6px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; text-align: center; line-height: 1.2; color: #999; }
.lc-sb-val { font-size: 19px; font-weight: 900; color: #fff; line-height: 1; }

.sb-hp       { flex: 1.8; background: rgba(248,113,113,0.05); }
.sb-hp .lc-sb-lbl { color: #888; }
.sb-hp .lc-sb-val { font-size: 22px; color: #fca5a5; }
.hp-bar  { width: 36px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.07); margin-top: 4px; overflow: hidden; }
.hp-fill { height: 100%; border-radius: 2px; background: linear-gradient(to right, #991b1b, #f87171); }
.sb-spi { background: rgba(167,139,250,0.05); } .sb-spi .lc-sb-lbl { color: #a78bfa; } .sb-spi .lc-sb-val { color: #ddd6fe; }
.sb-sk  { background: rgba(124,106,173,0.04); } .sb-sk  .lc-sb-lbl { color: #9b8fcc; } .sb-sk  .lc-sb-val { color: #c4b5fd; font-size: 17px; }
.sb-tax { background: rgba(100,80,170,0.04); }  .sb-tax .lc-sb-lbl { color: #9080b8; } .sb-tax .lc-sb-val { color: #c4b5fd; font-size: 17px; }

/* ══════════════════════════════════════
   RIGHT — CONTENT PANEL
══════════════════════════════════════ */
.lc-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: #0d0d1a;
}

/* Active combat stats bar */
.lc-stats {
  display: flex; flex-shrink: 0;
  height: 38px;
  border-bottom: 2px solid var(--ac);
  background: var(--bg2);
}
.lc-sc {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2px 2px; gap: 1px;
  border-right: 1px solid rgba(0,0,0,0.35);
}
.lc-sc:last-child { border-right: none; }
.lc-sc-lbl { font-size: 6.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; opacity: 0.75; text-align: center; }
.lc-sc-val { font-size: 18px; font-weight: 900; line-height: 1; }
.sc-mov { background: rgba(103,232,249,0.06); } .sc-mov .lc-sc-lbl { color: #67e8f9; } .sc-mov .lc-sc-val { color: #ecfeff; font-size: 15px; }
.sc-imp,.sc-foc { background: rgba(251,146,60,0.06); }
.sc-imp .lc-sc-lbl,.sc-foc .lc-sc-lbl { color: #fb923c; }
.sc-imp .lc-sc-val,.sc-foc .lc-sc-val { color: #fff7ed; }
.sc-rfx { background: rgba(96,165,250,0.06); } .sc-rfx .lc-sc-lbl { color: #93c5fd; } .sc-rfx .lc-sc-val { color: #eff6ff; }
.sc-res { background: rgba(96,165,250,0.04); } .sc-res .lc-sc-lbl { color: #93c5fd; } .sc-res .lc-sc-val { color: #eff6ff; font-size: 15px; }

/* Technique section */
.lc-techs { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.lc-sec-hdr {
  font-size: 6.5px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ac-text); opacity: 0.9;
  padding: 5px 12px 4px;
  background: rgba(0,0,0,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

/* Technique table */
.lc-tbl-wrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.lc-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lc-tbl thead th {
  font-size: 6.5px; letter-spacing: 1px; text-transform: uppercase;
  color: #999; padding: 4px 8px 3px; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.28); word-break: break-word; overflow-wrap: break-word;
}
.lc-tbl tbody td {
  padding: 4px 8px; color: #b8b8b8; vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 8px; line-height: 1.35; word-break: break-word; overflow-wrap: break-word;
}
.tc-name { color: #eee; font-weight: 700; font-size: 8.5px; display: block; }
.tc-tags { display: flex; gap: 2px; margin-top: 2px; flex-wrap: wrap; }
.tc-pill { display: inline-block; font-size: 6px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; border-radius: 2px; padding: 0 4px; }
.p-sig  { color: var(--ac-text); background: var(--ac-dim); border: 1px solid var(--ac); }
.p-std  { color: #aaa; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); }
.p-mel  { color: #fb923c; background: rgba(251,146,60,0.07); border: 1px solid rgba(251,146,60,0.28); }
.p-nrg  { color: #67e8f9; background: rgba(103,232,249,0.05); border: 1px solid rgba(103,232,249,0.22); }
.p-once { color: #fbbf24; background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.28); }
.tc-rng  { white-space: nowrap; color: #999; font-weight: 600; }
.tc-bk   { color: #93c5fd; font-weight: 700; white-space: nowrap; }
.tc-bk.free { color: #888; }
.tc-tier { white-space: nowrap; font-weight: 700; font-size: 7.5px; }
.tc-tier.base  { color: #888; }
.tc-tier.t1    { color: #fbbf24; }
.tc-tier.t2    { color: #a5f3fc; }
.tc-tier.t3    { color: #e2e8f0; }
.tc-fx { color: #c8c8c8; }
.tr-std td { background: rgba(0,0,0,0.12); }
.tr-std .tc-name { color: #bbb; font-weight: 600; }
.tr-std .tc-fx   { color: #999; }
.tr-type td { padding: 3px 8px; font-size: 6.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #999; background: rgba(0,0,0,0.28); border-bottom: none; }
.tr-div td  { padding: 0; height: 1px; background: rgba(255,255,255,0.06); border: none; }

/* ══════════════════════════════════════
   PASSIVE STRIP — full card width
══════════════════════════════════════ */
.lc-passive-strip {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  border-top: 2px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.25);
}
.lc-ps-hdr {
  font-size: 6.5px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ac-text); opacity: 0.9;
  padding: 4px 12px 3px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.lc-ps-list {
  display: flex; flex-direction: row;
  flex: 1;
}
.lc-ps-ab {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 4px 8px 5px;
  border-right: 1px solid rgba(255,255,255,0.05);
}
.lc-ps-ab:last-child { border-right: none; }
.lc-ps-name { font-size: 8px; font-weight: 700; color: #e8e8e8; line-height: 1.2; display: block; margin-bottom: 1px; }
.lc-ps-type-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.lc-ps-type { font-size: 6.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ac-text); }
.lc-ps-cost { font-size: 6.5px; font-weight: 700; color: #c4b5fd; }
.lc-ps-tier { font-size: 6px; font-weight: 700; letter-spacing: 0.3px; }
.lc-ps-desc { font-size: 7px; color: #b0b0b0; line-height: 1.35; }
.kw { color: var(--ac-text); font-weight: 700; }

/* ══════════════════════════════════════
   FOOTER — full card width
══════════════════════════════════════ */
.lc-footer {
  flex-shrink: 0; height: 26px;
  display: flex; align-items: center;
  padding: 0 12px; gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.3);
}
.lc-trait  { display: inline-block; font-size: 7px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #fff; background: var(--ac-dim); border: 1px solid var(--ac); border-radius: 12px; padding: 1px 8px; }
.lc-affil  { display: inline-block; font-size: 7px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #c9a84c; background: #160f00; border: 1px solid #5a3f00; border-radius: 12px; padding: 1px 8px; }
.lc-unlock { font-size: 7px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ac-text); opacity: 0.85; }
.lc-meta   { font-size: 7px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: #888; margin-left: auto; }

/* ══════════════════════════════════════
   COMPACT MODE — auto-applied when technique + passive count is high
   Reduces padding and font sizes to prevent content bleed on dense cards
   Applied by generator: add class "lcard-compact" to .lcard
══════════════════════════════════════ */
.lcard-compact .lc-tbl tbody td {
  padding: 2px 6px; font-size: 7.5px; line-height: 1.25;
}
.lcard-compact .tc-name { font-size: 8px; }
.lcard-compact .tc-tags { margin-top: 1px; }
.lcard-compact .lc-tbl thead th { padding: 3px 6px 2px; font-size: 6px; }
.lcard-compact .lc-sec-hdr { padding: 3px 10px 2px; font-size: 6px; }
.lcard-compact .lc-ps-hdr { padding: 3px 10px 2px; }
.lcard-compact .lc-ps-ab { padding: 2px 6px 3px; }
.lcard-compact .lc-ps-name { font-size: 7px; }
.lcard-compact .lc-ps-type,
.lcard-compact .lc-ps-cost { font-size: 6px; }
.lcard-compact .lc-ps-desc { font-size: 6.5px; line-height: 1.25; }

/* ══════════════════════════════════════
   PRINT / PDF — US Letter portrait, 2 cards per page
   Open in Chrome/Edge → Ctrl+P → Save as PDF
   Chrome headless: chrome --headless --print-to-pdf=out.pdf --no-pdf-header-footer file.html
══════════════════════════════════════ */
/* ══════════════════════════════════════
   RESPONSIVE MOBILE — Smaller screens scale down gracefully
══════════════════════════════════════ */
@media (max-width: 750px) {
  body { padding: 20px; }
  .print-page { gap: 16px; }
  .lcard {
    width: 100%;
    max-width: 100%;
  }
}

@media print {
  @page { size: letter portrait; margin: 0.375in 0.75in; }

  body {
    background: white;
    padding: 0; margin: 0;
    display: block;
    color: #000;
  }

  .card-label { display: none; }

  /* Each .print-page = one physical letter sheet */
  .print-page {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 7in;        /* 8.5in - 2×0.75in margins */
    height: 10.25in;   /* 11in - 2×0.375in margins */
    gap: 0.3in;
    break-after: page;
    page-break-after: always;
    border-bottom: none; padding: 0; margin: 0;
  }
  .print-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  /* Scale card from 690×460px screen size → 6in×4in physical */
  .lcard {
    zoom: 0.835;
    width: 690px !important;
    max-width: none;
    break-inside: avoid;
    page-break-inside: avoid;
    /* Force dark backgrounds to print */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}