/* ════ SURVIVOR · Fantasy-Craft collectible card frame ════
   Shared by the gallery, the in-game level-up screen, the
   instructions and the intro. Thick black outline, pastel,
   hand-drawn sticker aesthetic. */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Baloo+2:wght@500;700;800&display=swap');

.fc-card { width:300px; background:#fff; border:5px solid #1b1c22; border-radius:26px;
  padding:13px 13px 15px; box-shadow:0 12px 0 rgba(27,28,34,0.14), 0 22px 40px rgba(40,20,50,0.3);
  display:flex; flex-direction:column; gap:8px; position:relative; font-family:'Baloo 2',sans-serif; }
.fc-top { display:flex; align-items:center; gap:8px; }
.fc-brand { font-weight:700; font-size:15px; color:#1b1c22; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.fc-logo { display:inline-grid; place-items:center; width:21px; height:21px; border:3px solid #1b1c22; border-radius:7px; color:#7a5cff; font-size:10px; }
.fc-rule { flex:1; height:3px; background:#1b1c22; border-radius:2px; }
.fc-num { font-weight:800; font-size:15px; color:#1b1c22; white-space:nowrap; }
.fc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-height:34px; }
.fc-name { font-family:'Luckiest Guy',cursive; font-size:27px; line-height:0.92; color:#1b1c22;
  -webkit-text-stroke:1px #1b1c22; letter-spacing:0.5px; max-width:205px; padding-top:2px; }
.fc-moods { display:flex; gap:4px; flex:none; padding-top:3px; }
.mood-chip { width:25px; height:25px; }

.fc-panel { position:relative; border:5px solid #1b1c22; border-radius:18px; overflow:hidden;
  aspect-ratio:1/1.04; background:var(--fc-panel,#f7c9d6); background-size:cover; background-position:center; }
.fc-bubble { position:absolute; top:-15px; left:-13px; z-index:4; width:52px; height:52px; background:#fff;
  border:5px solid #1b1c22; border-radius:50% 50% 50% 9px; display:grid; place-items:center;
  box-shadow:0 4px 0 rgba(27,28,34,0.2); }
.fc-bubble svg { width:30px; height:30px; }
.fc-bg { position:absolute; inset:0; width:100%; height:100%; display:none; }
.fc-art { position:absolute; inset:0; width:100%; height:100%; display:none; }
.fc-zone { position:absolute; left:8px; bottom:7px; font-weight:800; font-size:8.5px; letter-spacing:0.1em; white-space:nowrap;
  color:#fff; background:#1b1c22; padding:3px 8px; border-radius:20px; z-index:2; }

.fc-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fc-badges { display:flex; gap:7px; }
.sc-badge { display:flex; align-items:center; gap:3px; background:#c8cdd6; border:4px solid #1b1c22;
  border-radius:11px; padding:5px 8px 5px 7px; box-shadow:inset 0 -3px 0 rgba(27,28,34,0.18); }
.sc-badge svg { width:16px; height:16px; }
.sc-num { font-family:'Luckiest Guy',cursive; font-size:17px; color:#1b1c22; }
.fc-heart { position:relative; width:60px; height:58px; display:grid; place-items:center; }
.fc-heart svg { position:absolute; inset:0; width:100%; height:100%; }
.fc-heart::before { content:''; position:absolute; inset:-6px -4px -10px; z-index:-1;
  background:conic-gradient(from 0deg,#ffd23e,#ffec9a,#ffd23e,#ffec9a,#ffd23e);
  clip-path:polygon(50% 0,62% 18%,80% 8%,78% 30%,100% 38%,82% 50%,100% 70%,72% 66%,68% 92%,50% 74%,32% 92%,28% 66%,0 70%,18% 50%,0 38%,22% 30%,20% 8%,38% 18%); }
.fc-heart span { position:relative; z-index:1; font-family:'Luckiest Guy',cursive; font-size:23px; color:#fff;
  -webkit-text-stroke:1.5px #1b1c22; padding-top:2px; }

/* ════ Upgrade card — reference layout (skill icon · effect · LVL/stat/zone footer) ════ */
.fc-card.upg { background:#f6f2e8; gap:9px; }
.fc-card.upg .fc-panel { aspect-ratio:1.55/1; }
.fc-card.upg .fc-brand { font-weight:800; font-size:12.5px; letter-spacing:0.04em; }
.fc-lock { flex:none; display:inline-grid; place-items:center; width:22px; height:22px;
  border:3px solid #1b1c22; border-radius:6px; background:var(--acc,#ee4b3c); }
.fc-lock svg { width:11px; height:11px; }

.u-head { display:flex; align-items:center; gap:10px; min-height:48px; }
.u-icon { flex:none; width:48px; height:48px; border-radius:50%; border:4px solid #1b1c22; display:grid; place-items:center;
  background:var(--acc); box-shadow:0 3px 0 rgba(27,28,34,0.22); }
.u-icon svg { width:27px; height:27px; }
.u-titles { flex:1; min-width:0; }
.u-name { font-family:'Baloo 2',sans-serif; font-weight:800; font-size:25px; line-height:0.95; color:#1b1c22;
  text-transform:uppercase; letter-spacing:-0.012em; }
.u-eff { font-family:'Baloo 2',sans-serif; font-weight:800; font-size:12.5px; letter-spacing:0.01em; margin-top:1px; }
.u-moods { display:flex; gap:4px; flex:none; }
.u-moods .mood-chip { width:22px; height:22px; }

.u-foot { display:flex; align-items:stretch; gap:6px; }
.u-lvl { flex:none; width:46px; border:4px solid #1b1c22; border-radius:13px; background:var(--acc);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3px 0;
  box-shadow:inset 0 -3px 0 rgba(27,28,34,0.2); }
.u-lvl b { font-family:'Baloo 2',sans-serif; font-weight:800; font-size:23px; color:#1b1c22; line-height:1; }
.u-lvl span { font-family:'Baloo 2',sans-serif; font-weight:800; font-size:8.5px; letter-spacing:0.08em; color:#1b1c22; }
.u-stat { flex:1; min-width:0; display:flex; align-items:center; gap:7px; background:#fff; border:4px solid #1b1c22;
  border-radius:13px; padding:5px 9px; box-shadow:inset 0 -3px 0 rgba(27,28,34,0.1); }
.u-stat-ic { flex:none; width:22px; height:22px; display:grid; place-items:center; }
.u-stat-ic svg { width:22px; height:22px; }
.u-stat-txt { display:flex; flex-direction:column; line-height:1.02; min-width:0; }
.u-stat-txt b { font-family:'Baloo 2',sans-serif; font-weight:800; font-size:15px; color:#1b1c22; }
.u-stat-txt span { font-family:'Baloo 2',sans-serif; font-weight:700; font-size:8px; letter-spacing:0.03em; color:#6a655c; white-space:nowrap; }
.u-heal { flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-left:3px solid rgba(27,28,34,0.18); padding-left:6px; margin-left:5px; }
.u-heal svg { width:14px; height:14px; }
.u-heal span { font-family:'Baloo 2',sans-serif; font-weight:800; font-size:7.5px; letter-spacing:0.03em; color:#1b1c22; }
.u-zone { flex:none; max-width:104px; display:flex; align-items:center; gap:6px; background:var(--acc); border:4px solid #1b1c22;
  border-radius:13px; padding:5px 9px; box-shadow:inset 0 -3px 0 rgba(27,28,34,0.2); }
.u-zone svg { width:20px; height:20px; flex:none; }
.u-zone b { font-family:'Baloo 2',sans-serif; font-weight:800; font-size:11px; line-height:1.02; color:#1b1c22; text-transform:uppercase; }

/* lore strip (optional, shown in gallery + level-up) */
.fc-lore { font-family:'Baloo 2',sans-serif; font-weight:500; font-size:11.5px; line-height:1.32; color:#3a2b3a;
  background:#fff7fb; border:3px dashed rgba(27,28,34,0.35); border-radius:13px; padding:8px 10px; }
.fc-lore b { font-weight:800; color:#1b1c22; }
.ht-step2 { flex:none; width:34px; height:34px; border-radius:50%; background:#1b1c22; color:#fff;
  display:grid; place-items:center; font-family:'Luckiest Guy',cursive; font-size:16px; padding-top:2px; }
.ht-card2 .fc-lore { min-height:48px; }