/* Share card template — Option A dense stack.
   Design size: 1080×1080. Reused for in-app preview + JPEG export.
   Trace grid scales via --cols / --cell / --gap so Plus max trails
   (40 questions + hints + 15 guesses ≈ 60 glyphs; abuse ceiling ~110) still fit. */

.share-card {
  --sc-bg0: #102327;
  --sc-bg1: #0b1619;
  --sc-cream: #f3ece1;
  --sc-muted: #8aa1a3;
  --sc-gold: #e8b04c;
  --sc-ember: #e8643c;
  --sc-ok: #8fe0a3;
  --sc-bad: #f08a64;
  --sc-line: rgba(232, 176, 76, 0.25);
  --cols: 8;
  --cell: 64px;
  --gap: 8px;

  box-sizing: border-box;
  width: 1080px;
  height: 1080px;
  margin: 0;
  padding: 48px 56px 44px;
  color: var(--sc-cream);
  font-family: "Fraunces", "Noto Serif TC", Georgia, serif;
  background:
    radial-gradient(720px 420px at 50% -40px, rgba(232, 100, 60, 0.3), transparent 62%),
    linear-gradient(180deg, var(--sc-bg0), var(--sc-bg1));
  border: 3px solid var(--sc-line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.share-card *,
.share-card *::before,
.share-card *::after { box-sizing: border-box; }

.share-card-brand {
  flex: none;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--sc-cream);
}
.share-card-brand b {
  color: var(--sc-ember);
  font-weight: 700;
}
.share-card-sub {
  flex: none;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 500;
  color: var(--sc-muted);
  letter-spacing: 0.02em;
}

.share-card-puzzle {
  flex: none;
  margin-top: 22px;
  font-size: 26px;
  font-weight: 600;
  color: var(--sc-gold);
}
.share-card-title {
  flex: none;
  margin: 10px 0 0;
  max-width: 920px;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sc-cream);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}
.share-card.lang-zh .share-card-title {
  font-family: "Noto Serif TC", "Fraunces", Georgia, serif;
}

.share-card-outcome {
  flex: none;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.share-card-result {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}
.share-card-result.ok { color: var(--sc-ok); }
.share-card-result.bad { color: var(--sc-bad); }
.share-card-nick {
  font-size: 28px;
  font-style: italic;
  color: #cbbfae;
}
.share-card-stats {
  font-size: 26px;
  font-weight: 500;
  color: var(--sc-muted);
}

/* Trace grows to fill leftover space — this kills the old blank band */
.share-card-trace-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 960px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-card-trace {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  gap: var(--gap);
  justify-content: center;
  padding: 18px 20px;
  border: 2px solid rgba(232, 176, 76, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}
.share-card-trace .cell {
  width: var(--cell);
  height: var(--cell);
  display: grid;
  place-items: center;
  font-size: calc(var(--cell) * 0.72);
  line-height: 1;
}

.share-card-foot {
  flex: none;
  margin-top: 18px;
  font-size: 30px;
  font-weight: 600;
  color: var(--sc-gold);
  letter-spacing: 0.01em;
}

/* Off-screen mount used for raster export */
.share-card-mount {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1080px;
  height: 1080px;
  pointer-events: none;
  opacity: 1;
  z-index: -1;
}

/* In-modal / preview scale wrapper */
.share-card-preview {
  width: min(360px, 92vw);
  margin: 18px auto 4px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(232, 176, 76, 0.16);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  background: #0b1619;
}
.share-card-preview .share-card {
  transform: scale(calc(min(360px, 92vw) / 1080));
  transform-origin: top left;
}