/* KB Card Game — Kurtis Bryant */
#kb-card-game {
  --kbg-bg: #0B0709;
  --kbg-panel: #151011;
  --kbg-line: #2A2422;
  --kbg-bone: #F3EBDD;
  --kbg-ink: #1B1512;
  --kbg-red: #AC0000;
  --kbg-mut: #8A8580;
  --kbg-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --kbg-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  min-height: 100vh;
  background: radial-gradient(120% 90% at 50% 0%, #17100F 0%, #0B0709 55%);
  color: var(--kbg-bone);
  font-family: var(--kbg-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
#kb-card-game *, #kb-card-game *::before, #kb-card-game *::after { box-sizing: border-box; }
#kb-card-game button, #kb-card-game a.kbg-modalbtn { font-family: inherit; cursor: pointer; }

/* ── Home ── */
.kbg-home { width: 100%; max-width: 440px; padding: 40px 20px 28px; display: flex; flex-direction: column; }
.kbg-brand { text-align: center; margin-bottom: 30px; }
.kbg-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .34em; color: var(--kbg-red); margin-bottom: 12px; }
.kbg-wordmark { font-family: var(--kbg-display); font-size: 62px; line-height: .94; margin: 0; color: var(--kbg-bone); text-shadow: 0 0 44px rgba(172,0,0,.35); font-weight: 400; }
.kbg-subword { font-family: var(--kbg-display); font-size: 17px; letter-spacing: .42em; color: var(--kbg-red); margin-top: 12px; }
.kbg-tagline { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--kbg-mut); }
.kbg-decklist { display: flex; flex-direction: column; gap: 10px; }
.kbg-deck {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; background: var(--kbg-panel);
  border: 1px solid var(--kbg-line); border-radius: 14px; padding: 16px;
  transition: transform .08s ease; color: var(--kbg-bone);
}
.kbg-deck:active { transform: scale(.985); }
.kbg-deck.kbg-soon { cursor: default; opacity: .55; }
.kbg-deckleft { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kbg-deckname { font-family: var(--kbg-display); font-size: 21px; letter-spacing: .05em; line-height: 1; }
.kbg-soon .kbg-deckname { color: #5A5652; }
.kbg-deckdesc { font-size: 12.5px; line-height: 1.45; color: var(--kbg-mut); }
.kbg-tag { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; border-radius: 999px; padding: 6px 11px; white-space: nowrap; }
.kbg-tag-free { color: #0B0709; }
.kbg-tag-lock, .kbg-tag-soon { color: var(--kbg-mut); border: 1px solid #3A3634; }
.kbg-tag-owned { color: #0B0709; background: #6FA36F; }
.kbg-howlink { margin-top: 22px; background: none; border: none; color: var(--kbg-bone); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; padding: 8px; }
.kbg-legal { margin-top: 10px; text-align: center; font-size: 11px; color: #5A5652; letter-spacing: .04em; }

/* ── How to play ── */
.kbg-howto { width: 100%; max-width: 440px; padding: 24px 20px 40px; }
.kbg-back { background: none; border: none; color: var(--kbg-mut); font-size: 15px; font-weight: 600; padding: 6px 0; margin-bottom: 6px; }
.kbg-howtitle { font-family: var(--kbg-display); font-size: 38px; margin: 4px 0 12px; letter-spacing: .02em; color: var(--kbg-bone); font-weight: 400; }
.kbg-howintro { font-size: 14.5px; line-height: 1.6; color: #C9C1B4; margin: 0 0 22px; }
.kbg-howrow { margin-bottom: 18px; }
.kbg-howbadge { display: inline-block; font-family: var(--kbg-display); font-size: 14px; letter-spacing: .09em; color: #F7F1E6; border-radius: 6px; padding: 5px 10px 4px; margin-bottom: 7px; }
.kbg-howrule { font-size: 13.5px; line-height: 1.55; color: var(--kbg-mut); }

/* ── Game ── */
.kbg-game { width: 100%; max-width: 440px; min-height: 100vh; padding: 18px 18px 26px; display: flex; flex-direction: column; }
.kbg-gametop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kbg-exit { background: var(--kbg-panel); border: 1px solid var(--kbg-line); color: var(--kbg-mut); width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
.kbg-decklabel { font-family: var(--kbg-display); font-size: 17px; letter-spacing: .12em; color: var(--kbg-red); }
.kbg-counter { font-size: 12.5px; font-weight: 600; color: var(--kbg-mut); min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.kbg-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 14px 0; }
.kbg-stack, .kbg-card { width: min(84vw, 330px); height: min(118vw, 470px); max-height: 62vh; border-radius: 20px; }
.kbg-stack { position: absolute; background: #1B1413; border: 1px solid #2A2220; }
.kbg-card {
  position: relative; background: var(--kbg-bone);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  display: flex; flex-direction: column; overflow: hidden;
  user-select: none; cursor: pointer;
}
@keyframes kbg-draw {
  0% { transform: translateY(46px) rotate(3deg); opacity: 0; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}
.kbg-drawn { animation: kbg-draw .28s cubic-bezier(.2,.8,.3,1); }
@media (prefers-reduced-motion: reduce) { .kbg-drawn { animation: none; } }
.kbg-cardbanner { font-family: var(--kbg-display); font-size: 21px; letter-spacing: .08em; color: #F7F1E6; text-align: center; padding: 13px 12px 11px; }
.kbg-cardrule { font-size: 11.5px; line-height: 1.5; color: #6B6258; text-align: center; padding: 10px 20px 0; }
.kbg-cardbody { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 22px; }
.kbg-cardtext { font-size: 19.5px; line-height: 1.45; font-weight: 700; color: var(--kbg-ink); text-align: center; }
.kbg-cardfoot { font-family: var(--kbg-display); font-size: 11px; letter-spacing: .3em; color: #B9AD9C; text-align: center; padding: 0 0 14px; }
.kbg-next {
  margin-top: 14px; width: 100%; background: var(--kbg-red); color: #F7F1E6;
  border: none; border-radius: 16px; padding: 17px 0;
  font-family: var(--kbg-display); font-size: 20px; letter-spacing: .1em;
  box-shadow: 0 6px 24px rgba(172,0,0,.35);
}
.kbg-loading { min-height: 60vh; display: flex; align-items: center; justify-content: center; font-family: var(--kbg-display); font-size: 20px; letter-spacing: .18em; color: var(--kbg-mut); }

/* ── Standalone (homepage takeover) — no scrolling, app-like ── */
body.kbg-standalone { margin: 0; background: #0B0709; }
body.kbg-standalone #kb-card-game { min-height: 100vh; min-height: 100dvh; }
body.kbg-standalone .kbg-game {
  height: 100vh; height: 100dvh;
  min-height: 0;
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow: hidden;
}
body.kbg-standalone .kbg-stage { min-height: 0; }
body.kbg-standalone .kbg-card,
body.kbg-standalone .kbg-stack {
  height: 100%;
  max-height: calc(100vh - 165px);
  max-height: calc(100dvh - 165px);
  max-width: min(84vw, 340px);
  aspect-ratio: 33 / 47;
}
body.kbg-standalone .kbg-home,
body.kbg-standalone .kbg-howto {
  min-height: 100vh; min-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Onboarding ── */
.kbg-onb { width: 100%; max-width: 440px; min-height: 100vh; min-height: 100dvh; padding: 18px 20px 26px; display: flex; flex-direction: column; }
.kbg-onb-top { display: flex; align-items: center; justify-content: space-between; }
.kbg-onb-dots { display: flex; gap: 7px; }
.kbg-onb-dot { width: 8px; height: 8px; border-radius: 50%; background: #3A3634; display: inline-block; }
.kbg-onb-dot-on { background: var(--kbg-red); }
.kbg-onb-skip { background: none; border: 1px solid var(--kbg-line); color: var(--kbg-mut); border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600; }
.kbg-onb-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 12px 0; min-height: 0; }
.kbg-onb-title { font-family: var(--kbg-display); font-size: 34px; letter-spacing: .03em; color: var(--kbg-bone); margin: 0 0 14px; font-weight: 400; line-height: 1.05; }
.kbg-onb-body { font-size: 15px; line-height: 1.6; color: #C9C1B4; margin: 14px auto 0; max-width: 320px; }
.kbg-onb-small { font-size: 12px; color: #5A5652; letter-spacing: .04em; }
.kbg-onb-demo { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 2px; }
.kbg-onb-card { width: 172px; height: 245px; max-height: none; border-radius: 12px; cursor: default; flex-shrink: 0; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.kbg-onb-card .kbg-cardbanner { font-size: 12px; padding: 8px 6px 7px; }
.kbg-onb-card .kbg-cardrule { font-size: 7.5px; padding: 6px 10px 0; line-height: 1.45; }
.kbg-onb-card .kbg-cardbody { padding: 8px 12px; }
.kbg-onb-card .kbg-cardtext { font-size: 11.5px; line-height: 1.4; }
.kbg-onb-card .kbg-cardfoot { font-size: 7px; padding-bottom: 8px; }
.kbg-onb-tags { display: flex; flex-direction: column; gap: 12px; text-align: left; max-width: 150px; }
.kbg-onb-tag { font-size: 12.5px; line-height: 1.45; color: var(--kbg-mut); border-left: 2px solid var(--kbg-red); padding-left: 9px; }
.kbg-onb-tag b { color: var(--kbg-bone); font-weight: 700; }
body.kbg-standalone .kbg-onb { height: 100vh; height: 100dvh; overflow: hidden; padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* ── Modal ── */
.kbg-modalwrap { position: fixed; inset: 0; background: rgba(5,3,4,.72); display: flex; align-items: flex-end; justify-content: center; z-index: 99999; }
.kbg-modal { width: 100%; max-width: 440px; background: #171112; border-radius: 22px 22px 0 0; border: 1px solid var(--kbg-line); border-bottom: none; padding: 24px 22px 30px; font-family: var(--kbg-body); }
.kbg-modalbadge { display: inline-block; font-family: var(--kbg-display); font-size: 15px; letter-spacing: .09em; color: #F7F1E6; border-radius: 6px; padding: 5px 11px 4px; margin-bottom: 12px; }
.kbg-modaltitle { font-family: var(--kbg-display); font-size: 26px; margin-bottom: 8px; color: var(--kbg-bone); }
.kbg-modaltext { font-size: 14px; line-height: 1.6; color: var(--kbg-mut); margin: 0 0 18px; }
a.kbg-modalbtn { display: block; width: 100%; text-align: center; background: var(--kbg-red); color: #F7F1E6; border: none; border-radius: 14px; padding: 15px 0; font-size: 15px; font-weight: 700; margin-bottom: 10px; text-decoration: none; }
.kbg-modalclose { width: 100%; background: none; border: 1px solid var(--kbg-line); color: #C9C1B4; border-radius: 14px; padding: 13px 0; font-size: 15px; font-weight: 600; }