*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/*
  Type scale:  0.6rem · 0.72rem · 0.85rem · 1.1rem · 1.2rem · 1.4rem
  Tracking:    0.04em (body/utility) · 0.08em (caps labels)
*/

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f2f0eb;
  height: 100vh;
  height: 100dvh; /* overrides on browsers that support dynamic viewport height */
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* ── Header ── */
header {
  width: 100%;
  max-width: 380px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 1.5rem 0;
  flex-shrink: 0;
}
.title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0em;
  color: #2a2520;
}
.ha-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #1a1a1a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: opacity 0.15s;
}
.ha-pill:active { opacity: 0.7; }
.ha-num { font-size: 0.85rem; font-weight: 700; }

/* ── Card stack ── */
.card-stack {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 0 1.5rem;
  flex: 1;
  display: flex;
  align-items: stretch;
  margin-top: 1.5rem;
}
/* shadows replaced by card box-shadow deck layers */
.card-shadow { display: none; }

.card {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 24px;
  /* ambient + two deck-peek layers simulate stacked cards below */
  box-shadow:
    0 6px 36px rgba(0,0,0,0.08),
    0 12px 0 -4px #e8e8e4,
    0 22px 0 -8px #ddddd9;
  padding: 2rem 2rem 4rem;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: grab;
  will-change: transform;
  touch-action: none;
}
.card:active { cursor: grabbing; }
.card.snap { transition: transform 0.42s cubic-bezier(0.175,0.885,0.32,1.2), opacity 0.32s; }
.card.fly  { transition: transform 0.22s ease-in, opacity 0.22s ease-in; }

/* Drag color wash */
.card-tint {
  position: absolute; inset: 0;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.08s, background-color 0.08s;
}

/* Stamps */
.stamp {
  position: absolute;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  border: 3px solid;
  pointer-events: none;
  transition: opacity 0.05s;
}
.stamp.ha    { top: 1.5rem; right: 1.5rem; color: #16a34a; border-color: #16a34a; transform: rotate(12deg); }
.stamp.nah   { top: 1.5rem; left: 1.5rem;  color: #dc2626; border-color: #dc2626; transform: rotate(-12deg); }
.stamp.maybe { top: 1.5rem; left: 50%; transform: translateX(-50%) rotate(-2deg); color: #d97706; border-color: #d97706; font-size: 1.1rem; }

/* Joke text */
.joke-setup {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.6;
  text-align: center;
}
.joke-punchline {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f0f0ee;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.55;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s, transform 0.28s;
}
.joke-punchline.show { opacity: 1; transform: translateY(0); }

.tap-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: #ccc;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.tap-hint.gone { opacity: 0; }

/* Share button */
.share-btn {
  position: absolute;
  bottom: 0.6rem;
  left: 0.85rem;
  background: none;
  border: none;
  padding: 0.3rem;
  color: #ccc;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.share-btn:hover  { color: #888; }
.share-btn.copied { color: #16a34a; }

/* Source badge */
.src-badge {
  position: absolute;
  bottom: 1rem;
  right: 1.25rem;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  font-weight: 600;
}
.src-badge.original { color: #b8a9e0; }
.src-badge.jokeapi  { color: #bbb; }
.src-badge.dadjoke  { color: #e0a060; }

/* ── Actions ── */
.actions {
  width: 100%;
  max-width: 380px;
  padding: 1.25rem 1.5rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  flex-shrink: 0;
}
.btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,0.09);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn:active { transform: scale(0.9); box-shadow: 0 1px 6px rgba(0,0,0,0.07); }
.btn.nah { color: #dc2626; }
.btn.ha  { color: #16a34a; }

/* Labels sit directly under their button — same gap, fixed width matches button */
.hint-row {
  display: flex;
  gap: 2.25rem;
  justify-content: center;
}
.hint-label {
  width: 60px;
  font-size: 0.6rem;
  color: #999;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* Streak flash */
.streak-flash {
  position: fixed;
  top: 26%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #16a34a;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 1.25rem;
  border-radius: 999px;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: opacity 0.25s, transform 0.25s;
}
.streak-flash.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Undo */
.undo-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.72rem;
  color: #999;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  transition: color 0.15s, opacity 0.22s;
  opacity: 0;
  pointer-events: none;
}
.undo-btn.visible { opacity: 1; pointer-events: auto; }
.undo-btn:hover   { color: #666; }

/* Stats */
.stats {
  font-size: 0.72rem;
  color: #999;
  letter-spacing: 0.04em;
  text-align: center;
  flex-shrink: 0;
}

/* ── Drawer handle ── */
.drawer-handle {
  width: 100%;
  max-width: 380px;
  background: #f2f0eb;
  padding: 0.75rem 1.5rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 0.5rem;
}
.pull-bar { width: 36px; height: 3px; background: #ddd; border-radius: 2px; }

/* ── Overlay + Drawer ── */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.18); z-index: 40; }
.overlay.on { display: block; }
.drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 28px rgba(0,0,0,0.09);
  transform: translateY(100%);
  transition: transform 0.36s cubic-bezier(0.32,0.72,0,1);
  z-index: 50;
  max-height: 78vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.5rem calc(3rem + env(safe-area-inset-bottom, 0px));
}
.drawer.open { transform: translateY(0); }
.drawer-grip { display: flex; justify-content: center; padding-bottom: 1rem; cursor: pointer; }
.drawer-grip-bar { width: 36px; height: 3px; background: #ddd; border-radius: 2px; }
.drawer h2 {
  font-size: 0.6rem;
  font-weight: 700;
  color: #bbb;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

/* Liked list */
.liked-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 1rem 0;
  border-bottom: 1px solid #f4f4f2;
}
.liked-entry:last-child { border-bottom: none; }
.liked-body { flex: 1; min-width: 0; }
.liked-joke      { font-size: 0.85rem; color: #1a1a1a; font-weight: 500; line-height: 1.5; }
.liked-punchline { margin-top: 0.3rem; font-size: 0.8rem; color: #555; line-height: 1.45; }
.liked-meta { margin-top: 0.4rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.liked-date { font-size: 0.6rem; color: #ccc; letter-spacing: 0.04em; }
.liked-src-tag {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}
.liked-src-tag.original { color: #b8a9e0; background: #f3f0fc; }
.liked-src-tag.jokeapi  { color: #888;    background: #f2f2f2; }
.liked-src-tag.dadjoke  { color: #e09060; background: #fdf3ec; }
.liked-delete {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 0.9rem;
  color: #ddd;
  cursor: pointer;
  padding: 0.1rem 0.2rem;
  line-height: 1;
  transition: color 0.15s;
  align-self: center;
}
.liked-delete:hover { color: #dc2626; }
.no-liked { font-size: 0.85rem; color: #ccc; text-align: center; padding: 2.5rem 0; }

/* ── All done ── */
@keyframes orb-breathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 4px 28px rgba(252,165,165,0.38); }
  50%       { transform: scale(1.07); box-shadow: 0 8px 40px rgba(252,165,165,0.55); }
}
@keyframes done-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.all-done {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 2.5rem;
  gap: 0.7rem;
}
.all-done.show {
  display: flex;
  animation: done-enter 0.45s cubic-bezier(0.22,1,0.36,1) both;
}

.done-orb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fed7aa 0%, #fca5a5 55%, #c4b5fd 100%);
  margin-bottom: 0.75rem;
  flex-shrink: 0;
  animation: orb-breathe 3.6s ease-in-out infinite;
}
.all-done h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: #2a2520;
  line-height: 1.35;
}
.done-ha-count {
  font-size: 0.85rem;
  color: #b8a9e0;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.done-lifetime-count {
  font-size: 0.72rem;
  color: #bbb;
  letter-spacing: 0.04em;
}
.all-done p { font-size: 0.85rem; color: #999; line-height: 1.6; }
.countdown  { font-size: 0.72rem; color: #bbb; font-variant-numeric: tabular-nums; }

.load-more-btn {
  margin-top: 0.5rem;
  padding: 0.65rem 1.75rem;
  background: transparent;
  color: #2a2520;
  border: 1.5px solid rgba(42,37,32,0.3);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, opacity 0.15s;
}
.load-more-btn:hover   { border-color: rgba(42,37,32,0.6); }
.load-more-btn:active  { opacity: 0.7; }
.load-more-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  body                { background: #18181a; }
  .title              { color: #f0f0ee; }
  .card-shadow:nth-child(1) { background: #242426; }
  .card-shadow:nth-child(2) { background: #292929; }
  .card               { background: #2c2c2e; box-shadow: 0 6px 36px rgba(0,0,0,0.28), 0 12px 0 -4px #363638, 0 22px 0 -8px #2e2e30; }
  .ha-pill            { background: #f0f0ee; color: #1a1a1c; }
  .joke-setup         { color: #f0f0ee; }
  .joke-punchline     { color: #f0f0ee; border-top-color: #3a3a3c; }
  .tap-hint           { color: #555; }
  .src-badge.jokeapi  { color: #666; }
  .src-badge.dadjoke  { color: #b07840; }
  .share-btn          { color: #777; }
  .share-btn:hover    { color: #bbb; }
  .btn                { background: #2c2c2e; box-shadow: 0 3px 14px rgba(0,0,0,0.3); }
  .hint-label         { color: #888; }
  .undo-btn           { color: #888; }
  .undo-btn:hover     { color: #bbb; }
  .stats              { color: #888; }
  .drawer-handle      { background: #18181a; }
  .pull-bar           { background: #3a3a3c; }
  .overlay            { background: rgba(0,0,0,0.5); }
  .drawer             { background: #242426; }
  .drawer-grip-bar    { background: #3a3a3c; }
  .drawer h2          { color: #555; }
  .liked-entry        { border-bottom-color: #2e2e30; }
  .liked-joke         { color: #f0f0ee; }
  .liked-punchline    { color: #888; }
  .liked-date         { color: #505050; }
  .liked-src-tag.original { color: #b8a9e0; background: #2a2240; }
  .liked-src-tag.jokeapi  { color: #606060; background: #262626; }
  .liked-src-tag.dadjoke  { color: #c08040; background: #2a1e0e; }
  .liked-delete       { color: #3a3a3c; }
  .liked-delete:hover { color: #dc2626; }
  .no-liked           { color: #484848; }
  .all-done h2        { color: #f0f0ee; }
  .done-ha-count      { color: #a090d0; }
  .done-lifetime-count { color: #666; }
  .all-done p         { color: #777; }
  .countdown          { color: #666; }
  .load-more-btn      { color: #f0f0ee; border-color: rgba(240,240,238,0.3); }
  .load-more-btn:hover { border-color: rgba(240,240,238,0.65); }
}