/* =============================================================================
   deck.css — CHINA: THE OPEN-JAW CAMPAIGN — collectible loot-card deck
   Dark lunarpunk / JRPG theme. Mobile-first. Self-contained (no CDN, no @import).
   Pairs with app/js/deck.js (ChinaDeck.init). All classes namespaced .cdk*.
   Forked palette/border patterns from slowcoast/app/index.html, re-skinned nocturnal.
   NOT a honeymoon — travel-adventure framing only (Player 1 & Player 2).
   ============================================================================= */

.cdk-root{
  /* ---- nocturnal bioluminescent palette ---- */
  --abyss:#080611;        /* deepest night indigo */
  --bg:#0b0819;
  --panel:#160f2b;
  --panel-2:#1d1538;
  --panel-3:#241a45;
  --line:#2c2154;
  --line-2:#443074;
  --ink:#ece7ff;          /* moonlit parchment */
  --dim:#a99fd6;
  --dim-2:#6f6598;
  --mycel:#38e8d8;        /* mycelial cyan glow */
  --moon:#cdb4ff;         /* moon violet */
  --spore:#8fe6c4;        /* bioluminescent mint */
  /* rarity ladder */
  --leg:#f2c14e; --epic:#c07af0; --rare:#49b6e8; --unc:#6fce9a;
  --boss:#ff6b8a;
  --star:#ffd66b;         /* rating gold */
  --ok:#6fce9a; --amber:#f2c14e; --grey:#8a83ad;

  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  line-height:1.5;
}
.cdk-root *{box-sizing:border-box;}
.cdk-root ::selection{background:var(--mycel);color:#04121a;}

/* ---------------------------------------------------------------- HEADER */
.cdk-hud{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg,rgba(11,8,25,.97),rgba(11,8,25,.86));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:12px 14px 10px;
}
.cdk-hud h2{
  margin:0 0 2px; font-size:.98rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.cdk-hud h2 .cdk-spark{color:var(--mycel);}
.cdk-sub{margin:0; font-size:.68rem; color:var(--dim-2); letter-spacing:.04em;}

.cdk-progress{display:flex; align-items:center; gap:10px; margin-top:9px;}
.cdk-progbar{
  flex:1; height:9px; border-radius:20px; overflow:hidden;
  background:var(--abyss); border:1px solid var(--line);
}
.cdk-progbar > i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--spore),var(--mycel));
  box-shadow:0 0 12px var(--mycel);
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.cdk-progtxt{
  font-size:.7rem; font-variant-numeric:tabular-nums; color:var(--spore);
  white-space:nowrap; letter-spacing:.03em;
}

/* ---------------------------------------------------------------- FILTERS */
.cdk-filters{
  position:sticky; z-index:29; top:0;
  background:linear-gradient(180deg,rgba(13,9,28,.96),rgba(13,9,28,.82));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  padding:9px 10px;
}
.cdk-zones{
  display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:2px; scrollbar-width:thin;
}
.cdk-zones::-webkit-scrollbar{height:5px;}
.cdk-zones::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:5px;}
.cdk-ztab{
  flex:0 0 auto; cursor:pointer; border:1px solid var(--line);
  background:var(--panel); color:var(--dim);
  font:inherit; font-size:.68rem; letter-spacing:.04em;
  padding:7px 12px; border-radius:20px; transition:.14s; white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.cdk-ztab:hover{color:var(--ink); border-color:var(--line-2);}
.cdk-ztab[aria-pressed="true"]{
  color:var(--abyss); background:var(--mycel); border-color:var(--mycel);
  font-weight:700; box-shadow:0 0 14px -3px var(--mycel);
}
.cdk-ztab .cdk-zct{
  font-size:.6rem; font-variant-numeric:tabular-nums; opacity:.8;
  background:rgba(0,0,0,.22); padding:1px 6px; border-radius:10px;
}
.cdk-ztab[aria-pressed="true"] .cdk-zct{background:rgba(4,18,26,.28);}

.cdk-rrow{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; align-items:center;}
.cdk-rchip{
  cursor:pointer; border:1px solid var(--rcc,var(--line-2));
  background:var(--panel); color:var(--dim);
  font:inherit; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:20px; transition:.14s;
}
.cdk-rchip[aria-pressed="true"]{color:#0a0714; background:var(--rcc,var(--mycel)); border-color:var(--rcc,var(--mycel)); font-weight:700;}
.cdk-rchip.leg{--rcc:var(--leg);} .cdk-rchip.epic{--rcc:var(--epic);}
.cdk-rchip.rare{--rcc:var(--rare);} .cdk-rchip.unc{--rcc:var(--unc);}
.cdk-rchip.all[aria-pressed="true"]{color:#0a0714; background:var(--ink); border-color:var(--ink);}
.cdk-collfilter{
  margin-left:auto; cursor:pointer; border:1px solid var(--line-2);
  background:var(--panel); color:var(--dim);
  font:inherit; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:20px; transition:.14s;
}
.cdk-collfilter[data-on="1"]{color:#0a0714; background:var(--spore); border-color:var(--spore); font-weight:700;}

/* ---------------------------------------------------------------- GRID */
.cdk-grid{
  display:grid; grid-template-columns:1fr; gap:16px;
  padding:16px 12px 60px; max-width:1280px; margin:0 auto;
}
@media(min-width:520px){ .cdk-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px;} }
.cdk-empty{
  grid-column:1/-1; text-align:center; color:var(--dim-2);
  font-size:.82rem; padding:48px 12px; border:1px dashed var(--line-2); border-radius:14px;
}

/* ---------------------------------------------------------------- CARD */
.cdk-card{ perspective:1400px; }
.cdk-flip{
  position:relative; transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.2,.75,.2,1);
  border-radius:15px;
}
.cdk-card.flipped .cdk-flip{ transform:rotateY(180deg); }

.cdk-face{
  border-radius:15px; overflow:hidden;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
/* front sits in normal flow -> defines the flipper height; back overlays it */
.cdk-front{
  position:relative;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--rc,var(--line-2));
  box-shadow:0 14px 40px -26px #000, inset 0 0 0 1px rgba(255,255,255,.02);
}
.cdk-back{
  position:absolute; inset:0; transform:rotateY(180deg);
  background:linear-gradient(180deg,var(--panel-3),var(--panel));
  border:1px solid var(--rc,var(--line-2));
  overflow:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
}
/* rarity tint on the border/glow */
.cdk-card.rar-leg{--rc:var(--leg);}
.cdk-card.rar-epic{--rc:var(--epic);}
.cdk-card.rar-rare{--rc:var(--rare);}
.cdk-card.rar-unc{--rc:var(--unc);}
.cdk-card.rar-leg .cdk-front{box-shadow:0 14px 40px -22px #000, 0 0 20px -6px var(--leg);}
.cdk-card.boss{--rc:var(--boss);}
.cdk-card.boss .cdk-front{box-shadow:0 14px 44px -20px #000, 0 0 22px -5px var(--boss);}

.cdk-card.collected .cdk-front{ outline:2px solid var(--spore); outline-offset:-1px; }

/* ---- ART banner ---- */
.cdk-art{
  position:relative; display:block; width:100%; aspect-ratio:16/11;
  background:
    radial-gradient(120% 80% at 30% 15%, rgba(56,232,216,.14), transparent 60%),
    radial-gradient(120% 90% at 80% 90%, rgba(192,122,240,.16), transparent 62%),
    linear-gradient(160deg,var(--panel-3),var(--abyss));
  cursor:pointer; overflow:hidden;
}
.cdk-art img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .45s ease;
}
.cdk-art img.loaded{opacity:1;}
.cdk-art .cdk-ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; color:var(--rc,var(--line-2)); opacity:.5; letter-spacing:.1em;
}
.cdk-art .cdk-fade{
  position:absolute; left:0; right:0; bottom:0; height:62%;
  background:linear-gradient(180deg,transparent,rgba(8,6,17,.92));
}
.cdk-art .cdk-title{
  position:absolute; left:11px; right:66px; bottom:9px; margin:0;
  font-size:.92rem; line-height:1.2; font-weight:700; color:#fff;
  text-shadow:0 2px 10px #000, 0 1px 2px #000; letter-spacing:.01em;
}
/* tap-to-flip affordance chip — top-center so it never collides with title/radar */
.cdk-art .cdk-tapcue{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  font-size:.54rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:rgba(8,6,17,.5); border:1px solid rgba(255,255,255,.14);
  padding:2px 8px; border-radius:20px; pointer-events:none; opacity:.75;
}

/* corner badges */
.cdk-badge-rar{
  position:absolute; bottom:8px; left:8px; z-index:2;
  font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  color:#0a0714; background:var(--rc,var(--line-2));
  padding:3px 8px; border-radius:6px; box-shadow:0 2px 10px -2px #000;
}
.cdk-badge-boss{
  position:absolute; bottom:8px; left:8px; z-index:3;
  font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; font-weight:800;
  color:#fff; background:var(--boss); padding:3px 8px; border-radius:6px;
  box-shadow:0 0 14px -2px var(--boss);
}
.cdk-badge-tot{
  position:absolute; top:8px; right:8px; z-index:2;
  font-size:.6rem; font-variant-numeric:tabular-nums; font-weight:700;
  color:var(--rc,var(--ink)); background:rgba(8,6,17,.66);
  border:1px solid var(--rc,var(--line-2));
  padding:2px 7px; border-radius:6px;
}
.cdk-stamp{
  position:absolute; top:8px; right:8px; z-index:2;
  font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; font-weight:800;
  color:#0a0714; background:var(--spore); padding:2px 7px; border-radius:6px;
  transform:rotate(6deg); box-shadow:0 0 12px -2px var(--spore); display:none;
}
.cdk-card.collected .cdk-stamp{display:block;}

/* radar glyph pinned bottom-right of art (title occupies bottom-left) */
.cdk-radar-glyph{
  position:absolute; right:8px; bottom:8px; z-index:2;
  width:52px; height:52px;
  filter:drop-shadow(0 2px 6px #000);
}
.cdk-radar-glyph svg{width:52px; height:52px; display:block;}

/* ---- BODY ---- */
.cdk-body{padding:10px 12px 12px;}
.cdk-tagrow{
  display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:7px;
}
.cdk-chip{
  font-size:.56rem; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 7px; border-radius:5px; border:1px solid var(--line-2); color:var(--dim);
}
.cdk-chip.type{color:var(--moon); border-color:var(--line-2);}
.cdk-chip.dur{color:var(--dim);}
.cdk-chip.veg{color:var(--spore); border-color:#2a6b57;}
.cdk-chip.en{color:var(--amber); border-color:#6a5322;}
.cdk-blurb{margin:0 0 8px; font-size:.78rem; color:var(--ink); line-height:1.45;}
/* ---- dossier story + callout boxes (back face) ---- */
.cdk-story{margin:0 0 10px; font-size:.8rem; line-height:1.5; color:var(--ink);}
.cdk-tip{
  --tc:var(--spore);
  margin:0 0 9px; padding:8px 10px 9px;
  border:1px solid var(--line-2); border-left:3px solid var(--tc);
  border-radius:8px; background:rgba(255,255,255,.02);
}
.cdk-tip .lb{
  display:inline-block; margin:0 0 5px; padding:2px 8px; border-radius:5px;
  font-size:.54rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#0a0714; background:var(--tc);
}
.cdk-tip p{margin:0; font-size:.74rem; line-height:1.46; color:var(--ink);}
.cdk-tips-multi{margin:0; padding:0; list-style:none;}
.cdk-tips-multi li{
  position:relative; padding-left:15px; margin:0 0 5px;
  font-size:.74rem; line-height:1.44; color:var(--ink);
}
.cdk-tips-multi li:last-child{margin-bottom:0;}
.cdk-tips-multi li::before{content:"▶"; position:absolute; left:0; top:1px; font-size:.56rem; color:var(--tc);}
.cdk-tip.pro{--tc:var(--spore);}
.cdk-tip.cost{--tc:var(--leg);}
.cdk-tip.time{--tc:var(--rare);}
.cdk-tip.shot{--tc:var(--epic);}
.cdk-tip.why{--tc:var(--moon);}
.cdk-tip.rain{--tc:var(--rare);}
.cdk-tip.access{--tc:var(--dim);}
.cdk-tip.loot{--tc:var(--leg);}
.cdk-tip.hig{--tc:var(--mycel);}

/* ---- booking save-point ---- */
.cdk-savept{
  margin:2px 0 9px; padding:8px 10px 9px;
  border:1px dashed var(--mycel); border-radius:8px; background:rgba(56,232,216,.05);
}
.cdk-savept .lb{
  display:flex; align-items:center; gap:5px; margin-bottom:5px;
  font-size:.56rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mycel);
}
.cdk-savept dl{margin:0;}
.cdk-savept dt{font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mycel); margin-top:5px;}
.cdk-savept dt:first-child{margin-top:0;}
.cdk-savept dd{margin:1px 0 0; font-size:.72rem; color:var(--ink); word-break:break-word;}

.cdk-actions{display:flex; gap:8px;}
.cdk-btn{
  cursor:pointer; font:inherit; font-size:.68rem; letter-spacing:.05em;
  padding:8px 10px; border-radius:9px; transition:.15s; white-space:nowrap;
  border:1px solid var(--line-2); background:var(--panel); color:var(--ink);
}
.cdk-btn:hover{border-color:var(--mycel);}
.cdk-btn.loot{flex:1; text-transform:uppercase; font-weight:700;}
.cdk-card.collected .cdk-btn.loot{
  background:var(--spore); color:#04121a; border-color:var(--spore);
}
.cdk-btn.flip{color:var(--dim);}

/* ---- BACK FACE ---- */
.cdk-back-couple{
  position:relative; width:100%; aspect-ratio:16/11; display:none;
  background:linear-gradient(160deg,var(--panel-3),var(--abyss));
  cursor:pointer; overflow:hidden; flex:0 0 auto;
  border-bottom:1px solid var(--rc,var(--line-2));   /* rarity seam under the hero */
  box-shadow:inset 0 -18px 30px -22px #000;
}
.cdk-back.has-couple .cdk-back-couple{display:block;}
.cdk-back-couple img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cdk-back-couple .cdk-couple-cap{
  position:absolute; left:9px; bottom:8px; right:9px;
  font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:#fff;
  text-shadow:0 1px 6px #000; background:linear-gradient(180deg,transparent,rgba(8,6,17,.7));
  padding-top:14px;
}
/* place-art fallback (no couple photo for this card): read as the SCENE, not the couple */
.cdk-back.is-placeart .cdk-couple-cap{color:var(--moon); letter-spacing:.04em;}
.cdk-back.is-placeart .cdk-couple-cap::before{content:"◈ "; color:var(--rc,var(--moon));}

.cdk-back-body{padding:12px 13px 14px; flex:1;}
.cdk-back-head{display:block; margin-bottom:9px;}
.cdk-back-title{margin:0; font-size:.9rem; font-weight:700; color:var(--ink); line-height:1.2;}
.cdk-back-zone{font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim-2); margin-top:2px;}
.cdk-back-radar{width:118px; height:118px; margin:2px auto 10px; display:block;}

.cdk-detail{margin:0 0 9px;}
.cdk-detail dt{
  font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mycel); margin-top:8px;
}
.cdk-detail dd{margin:2px 0 0; font-size:.74rem; color:var(--ink); line-height:1.42;}
.cdk-conf{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.62rem; color:var(--dim); margin-top:4px;
}
.cdk-conf .dot{width:8px; height:8px; border-radius:50%; flex:none; background:var(--grey);}
.cdk-conf.green .dot{background:var(--ok); box-shadow:0 0 8px var(--ok);}
.cdk-conf.amber .dot{background:var(--amber); box-shadow:0 0 8px var(--amber);}
.cdk-conf.grey .dot{background:var(--grey);}

.cdk-backbtns{display:flex; gap:8px; margin-top:auto; padding-top:10px;}

/* ============================================================ CARD-FACE CHROME */
/* rarity topbar — flush at the top edge of each face */
.cdk-topbar{
  height:7px; flex:0 0 auto; position:relative;
  background:var(--rc,var(--line-2));
  box-shadow:inset 0 -2px 0 rgba(8,6,17,.6), 0 0 16px -5px var(--rc,transparent);
}
.cdk-topbar::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; background:rgba(255,255,255,.42);
}

/* front header — type icon + title + rarity gem */
.cdk-fhead{
  display:flex; align-items:center; gap:9px;
  padding:9px 11px 8px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
}
.cdk-type-ico{font-size:1.02rem; line-height:1; flex:none; filter:drop-shadow(0 1px 2px #000);}
.cdk-fhead .cdk-title{
  flex:1; min-width:0; margin:0; font-size:.86rem; line-height:1.16; font-weight:800;
  color:var(--ink); letter-spacing:.005em;
}
.cdk-gem{flex:none; width:38px; height:38px; line-height:0; filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));}
.cdk-gem svg{display:block; width:38px; height:38px;}

/* front footer stat block — hex glyph + star rating + tags */
.cdk-fstat{display:flex; align-items:center; gap:11px; padding:9px 12px 5px;}
.cdk-fstat .cdk-radar-glyph{
  position:static; right:auto; bottom:auto; flex:none;
  width:54px; height:54px; filter:drop-shadow(0 2px 5px #000);
}
.cdk-fstat .cdk-radar-glyph svg{width:54px; height:54px;}
.cdk-fstat-col{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}

.cdk-starline{display:flex; align-items:center; gap:8px;}
.cdk-stars{font-size:.92rem; letter-spacing:1.5px; line-height:1; white-space:nowrap;}
.cdk-stars .st.f{color:var(--star); text-shadow:0 0 7px rgba(255,214,107,.45);}
.cdk-stars .st.h{color:var(--star); opacity:.5;}
.cdk-stars .st.e{color:#302a58;}
.cdk-score{
  margin-left:auto; font-size:.62rem; font-weight:700; letter-spacing:.05em;
  font-variant-numeric:tabular-nums; color:var(--rc,var(--dim)); white-space:nowrap;
}
.cdk-front .cdk-actions{padding:7px 12px 12px;}

/* back-head stacked star line */
.cdk-starline.back{margin-top:6px;}
.cdk-starline.back .cdk-stars{font-size:.82rem;}

/* reduced motion: no 3d spin, instant flip */
@media(prefers-reduced-motion:reduce){
  .cdk-flip{transition:none;}
  .cdk-art img{transition:none;}
  .cdk-progbar > i{transition:none;}
}

/* focus ring for keyboard users */
.cdk-root :focus-visible{outline:2px solid var(--mycel); outline-offset:2px; border-radius:6px;}