/* === Passport card — per-faction styles + wear and tear === */

.sw-passport {
  --p-bg-1:    #1d2735;
  --p-bg-2:    #0e131c;
  --p-edge:    #45556e;
  --p-ink:     #f4f6fa;
  --p-ink-dim: #aab3c5;
  --p-accent:  #d6cfa8;       /* foiled gilt */
  --p-stripe:  rgba(255, 255, 255, 0.08);
  --p-grain:   .35;
  /* v5: rotation removed — was ±1.2deg per card and the variation made
   * the Reject/Approve buttons jump between rounds. Keep the variable
   * for any future flourish but pin it to 0. */
  --p-warp:    0deg;

  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 18px 22px;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 16px clamp(18px, 3vw, 24px);
  border-radius: 14px;
  color: var(--p-ink);
  background:
    linear-gradient(135deg, var(--p-bg-1), var(--p-bg-2));
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 8px 16px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 60px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--p-warp));
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
  font-family: "Inter", system-ui, sans-serif;
  isolation: isolate;
}

/* Outer trim — the embossed border on real passports. */
.sw-passport::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1.5px solid var(--p-edge);
  border-radius: 10px;
  pointer-events: none;
  opacity: .8;
}

/* Subtle paper grain — additive noise via repeating linear gradients. */
.sw-passport::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 6px, rgba(255,255,255, .015) 6px 7px),
    repeating-linear-gradient(40deg, transparent 0 5px, rgba(0,0,0, .035) 5px 6px);
  border-radius: 14px;
  mix-blend-mode: overlay;
  opacity: var(--p-grain);
  pointer-events: none;
  z-index: 1;
}

/* ---- Cover header ---- */
.sw-passport__cover {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255,255,255,0.18);
  position: relative;
  z-index: 2;
}
.sw-passport__crest {
  font-family: "Cinzel", "Inter", serif;
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--p-accent);
  display: flex; align-items: center; gap: 10px;
}
.sw-passport__crest svg {
  width: 28px; height: 28px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.3));
}
.sw-passport__doc-type {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--p-ink-dim);
}

/* ---- Photo frame ---- */
.sw-passport__photo {
  grid-column: 1;
  position: relative;
  z-index: 2;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  background:
    linear-gradient(160deg, #2a3144, #0c1018);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 0 0 4px rgba(0,0,0,.55),
    0 10px 18px rgba(0,0,0,.45);
}
.sw-passport__photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center top;
  display: block;
  filter: contrast(1.05) saturate(.95);
}
.sw-passport__photo-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--p-ink-dim);
  font-weight: 700; letter-spacing: 2px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.12), transparent 65%),
    linear-gradient(180deg, #1f2738 0%, #0a0e17 100%);
}
.sw-passport__photo-fallback svg { width: 60%; height: 60%; opacity: .6; }
.sw-passport__photo-corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid rgba(255,255,255,.35);
}
.sw-passport__photo-corner--tl { top: 6px;    left: 6px;    border-right: 0; border-bottom: 0; }
.sw-passport__photo-corner--tr { top: 6px;    right: 6px;   border-left: 0;  border-bottom: 0; }
.sw-passport__photo-corner--bl { bottom: 6px; left: 6px;    border-right: 0; border-top: 0; }
.sw-passport__photo-corner--br { bottom: 6px; right: 6px;   border-left: 0;  border-top: 0; }

/* ---- Bio block ---- */
.sw-passport__bio {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 18px;
  align-content: start;
  position: relative;
  z-index: 2;
}
.sw-passport__field { display: flex; flex-direction: column; gap: 2px; }
.sw-passport__field-label {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--p-ink-dim);
}
.sw-passport__field-value {
  font-family: "Courier New", "Courier", monospace;
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 600;
  color: var(--p-ink);
  line-height: 1.2;
}
.sw-passport__field--wide { grid-column: 1 / -1; }

/* ---- Footer / MRZ ---- */
.sw-passport__mrz {
  grid-column: 1 / -1;
  position: relative; z-index: 2;
  margin-top: 8px;
  padding: 10px 14px;
  border-top: 1px dashed rgba(255,255,255,0.18);
  border-radius: 0 0 8px 8px;
  font-family: "Courier New", monospace;
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: 1.5px;
  color: var(--p-ink);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.25));
  word-break: break-all;
}
.sw-passport__mrz span { display: block; opacity: .9; }

/* Foil seal removed in v2 — was visually distracting per feedback. */

/* ===== FACTION VARIANTS ===== */

.sw-passport--rebellion {
  --p-bg-1: #2b1d10; --p-bg-2: #110a04;
  --p-edge: #6e4f2b; --p-accent: #ffb000;
}
.sw-passport--empire {
  --p-bg-1: #1a1a1f; --p-bg-2: #07070b;
  --p-edge: #8b0d10; --p-accent: #c0392b; --p-ink: #efe9e9;
}
.sw-passport--republic {
  --p-bg-1: #11253b; --p-bg-2: #050a13;
  --p-edge: #4a78a4; --p-accent: #e9c46a;
}
.sw-passport--first-order {
  --p-bg-1: #14131a; --p-bg-2: #050405;
  --p-edge: #d6322a; --p-accent: #ffffff;
}
.sw-passport--resistance {
  --p-bg-1: #1c2e22; --p-bg-2: #06120a;
  --p-edge: #ff8a3d; --p-accent: #ffb86b;
}
.sw-passport--jedi-order {
  --p-bg-1: #0e2235; --p-bg-2: #03101c;
  --p-edge: #6ec8ff; --p-accent: #c8efff;
}
.sw-passport--sith {
  --p-bg-1: #1b0709; --p-bg-2: #060102;
  --p-edge: #b71c1c; --p-accent: #ff6b6b;
}
.sw-passport--mandalorian {
  --p-bg-1: #14181f; --p-bg-2: #05080b;
  --p-edge: #b9c7d6; --p-accent: #d2dde9;
}
.sw-passport--bounty-hunter {
  --p-bg-1: #2b2419; --p-bg-2: #0e0a05;
  --p-edge: #8b6f2c; --p-accent: #d2a86a;
}
.sw-passport--hutt-cartel,
.sw-passport--jabbas-court {
  --p-bg-1: #2c2305; --p-bg-2: #100a02;
  --p-edge: #b08a17; --p-accent: #ffd24a;
}
.sw-passport--trade-federation,
.sw-passport--confederacy {
  --p-bg-1: #1f2418; --p-bg-2: #090b06;
  --p-edge: #6ea33b; --p-accent: #b9d685;
}
.sw-passport--naboo {
  --p-bg-1: #2a2235; --p-bg-2: #0d0913;
  --p-edge: #b58af0; --p-accent: #f0d8ff;
}
.sw-passport--galactic-senate {
  --p-bg-1: #1d1a30; --p-bg-2: #08081a;
  --p-edge: #8a83d9; --p-accent: #c4bfff;
}
.sw-passport--civilian {
  --p-bg-1: #1f2734; --p-bg-2: #0a0d12;
  --p-edge: #5a6a7e; --p-accent: #c9d3e0;
}
.sw-passport--ewok-tribe {
  --p-bg-1: #2b1709; --p-bg-2: #0e0703;
  --p-edge: #a05a2c; --p-accent: #e4b27a;
}
.sw-passport--new-republic {
  --p-bg-1: #131a2b; --p-bg-2: #04060d;
  --p-edge: #5d8ed6; --p-accent: #d2e1ff;
}

/* ===== WEAR & TEAR ===== */

/* Default wear is mild; per-card we layer additional treatments. */
.sw-passport--wear-light  { --p-grain: .25; }
.sw-passport--wear-medium { --p-grain: .45; }
.sw-passport--wear-heavy  { --p-grain: .60; }

.sw-passport--wear-medium .sw-passport__photo,
.sw-passport--wear-heavy  .sw-passport__photo {
  filter: contrast(1.1) saturate(.85);
}

.sw-passport--wear-medium::after,
.sw-passport--wear-heavy::after {
  background:
    repeating-linear-gradient(115deg, transparent 0 6px, rgba(255,255,255, .03) 6px 7px),
    repeating-linear-gradient(40deg, transparent 0 5px, rgba(0,0,0, .07) 5px 6px),
    radial-gradient(180px 220px at 12% 8%, rgba(0,0,0,.35), transparent 70%),
    radial-gradient(140px 160px at 92% 86%, rgba(0,0,0,.3), transparent 70%);
}

.sw-passport--wear-heavy {
  background-image:
    linear-gradient(135deg, var(--p-bg-1), var(--p-bg-2)),
    radial-gradient(100px 200px at 30% 60%, rgba(120, 60, 20, 0.25), transparent 70%);
}

/* v5: diagonal crease line removed — was reading as a print artifact
 * across the document rather than a credible wear flourish. */
.sw-passport__crease { display: none; }

/* Coffee/space-fluid stain — small radial blob, off-center. */
.sw-passport--wear-heavy > .sw-passport__stain {
  position: absolute;
  width: 110px; height: 90px;
  bottom: 18%; right: 8%;
  background:
    radial-gradient(closest-side, rgba(80, 40, 10, 0.55), rgba(80, 40, 10, 0));
  filter: blur(1.4px);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .85;
}

/* Pristine forgery — clean texture, no grain, but the base background
 * stays dark. Per design direction: passport backgrounds are always
 * dark; pristine no longer lightens the card. */
.sw-passport--wear-pristine {
  --p-grain: 0;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.sw-passport--wear-pristine::after { display: none; }

/* ===== Stamp impression overlay (drawn on top of passport) ===== */

.sw-passport.is-decided { transform: scale(0.985); }

.sw-stamp {
  position: absolute;
  pointer-events: none;
  width: clamp(180px, 32%, 260px);
  height: clamp(180px, 32%, 260px);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg) scale(2.2);
  opacity: 0;
  z-index: 4;
  transition: none;
}
.sw-stamp.is-firing {
  animation: sw-stamp-impact 380ms cubic-bezier(.4, 1.6, .4, 1) forwards;
}
@keyframes sw-stamp-impact {
  0%   { transform: translate(-50%, -50%) rotate(-18deg) scale(2.4); opacity: 0; }
  60%  { transform: translate(-50%, -50%) rotate(-10deg) scale(0.92); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-9deg)  scale(1.0);  opacity: 1; }
}

.sw-stamp svg { width: 100%; height: 100%; }
.sw-stamp__ring { fill: none; stroke-width: 5; }
.sw-stamp__ring--inner { stroke-width: 2; }
.sw-stamp__core { font-family: "Cinzel", "Inter", serif; font-weight: 800; }
.sw-stamp__sub  { font-family: "Inter", system-ui, sans-serif; font-weight: 600; letter-spacing: 2px; }

.sw-stamp--approve { color: #1aa463; }
.sw-stamp--reject  { color: #c12b3a; }
/* Color reflects whether the call was right (green) or wrong (red),
 * regardless of which button the inspector pressed. */
.sw-stamp--correct { color: #1aa463; }
.sw-stamp--wrong   { color: #c12b3a; }
.sw-stamp__verdict {
  font-family: "Cinzel", "Inter", serif;
  font-weight: 800;
  text-transform: uppercase;
}

/* Small "ID.me" wordmark inside the stamp */
.sw-stamp__brand {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.5px;
}

/* ===== Mobile tuning =====
 * Photo-on-left, bio-on-right at every width; MRZ breaks out to span
 * the full passport width (per design feedback). Padding + gaps cut
 * to keep the card short so the Reject/Approve buttons + feedback
 * panel all sit above the fold on a typical phone viewport. */
@media (max-width: 640px) {
  .sw-passport {
    grid-template-columns: 116px 1fr;
    gap: 8px 12px;
    padding: 12px 10px 0;
    min-height: 300px;
  }
  .sw-passport__bio { grid-template-columns: 1fr; gap: 8px; }
  .sw-passport__field--wide { grid-column: auto; }
  .sw-passport__cover { padding-bottom: 10px; }
}
@media (max-width: 420px) {
  .sw-passport {
    grid-template-columns: 104px 1fr;
    gap: 6px 10px;
    padding: 10px 8px 0;
    min-height: 280px;
  }
  /* Stay side-by-side on phones — stacked was wasting height. */
  .sw-passport__photo { width: 100%; margin: 0; }
  .sw-passport__field-label { font-size: 9px; letter-spacing: 1px; }
  .sw-passport__field-value { font-size: 12.5px; }
  .sw-passport__crest { font-size: 11px; letter-spacing: 1.1px; }
  .sw-passport__crest svg { width: 22px; height: 22px; }
  .sw-passport__doc-type { font-size: 9px; letter-spacing: 1.2px; }
  .sw-passport__mrz {
    /* Bleed across the card edges so the MRZ truly spans full width. */
    margin: 8px -8px 0;
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 1px;
  }
}