/* ============================================================
   YESNO — Editorial Daily (Dir-A)
   Cream paper, ink hero, big depth-shadow buttons, italic copy.
   ============================================================ */

.yesno-page { padding-bottom: 40px; }
[hidden] { display: none !important; }

/* ============ Sharer banner (visitor came via /r/:share_id) ============ */
.sharer-banner {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sharer-label {
  font-size: 9.5px;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sharer-text {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}

/* ============ Accept-notice (sharer's "someone accepted" banner) ============ */
.accept-notice {
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.accept-notice-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--c-yes);
  text-transform: uppercase;
}
.accept-notice-text {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(245, 239, 227, 0.85);
}

/* ============ Stage 1: Ask ============ */
.ask-stage {
  text-align: center;
  padding: 30px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.5s;
}
.ask-label {
  font-size: 9.5px;
  color: var(--ink-mid);
  margin-bottom: 24px;
}
.ask-rule {
  width: 30px;
  height: 1px;
  background: var(--ink);
  opacity: 0.4;
  margin-bottom: 26px;
}
.ask-prompt {
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 auto 38px;
  max-width: 320px;
  font-weight: 400;
}
.ask-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  margin: 0 auto;
}
.ask-buttons.loading { opacity: 0.6; pointer-events: none; }

.answer-btn {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 56px;
  letter-spacing: -0.03em;
  line-height: 1;
  height: 90px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  /* Depth-shadow ridge effect — solid bottom shadow gives the button volume */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), 0 8px 0 rgba(0, 0, 0, 0.06);
}
.answer-btn:disabled { cursor: wait; opacity: 0.7; }
.answer-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.18);
}
.answer-btn--yes {
  background: var(--c-yes);
  color: var(--ink);
}
.answer-btn--no {
  background: var(--c-no);
  color: var(--ink);
}
@media (hover: hover) {
  .answer-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 10px 0 rgba(0, 0, 0, 0.06);
  }
}

.ask-hint {
  margin-top: 20px;
  font-size: 9px;
  color: var(--ink-mid);
}
.ask-error {
  margin-top: 14px;
  font-size: 11px;
  color: var(--accent);
  min-height: 14px;
  letter-spacing: 0.05em;
}

/* ============ Stage 2: Reveal ============ */
.reveal { animation: fadeIn 0.6s; }

/* Result hero — dark ink card with terracotta corner glow */
.result {
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  padding: 26px 22px 22px;
  margin: 18px 0 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.result-glow {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(232, 183, 58, 0.2), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.result > * { position: relative; z-index: 1; }

.result-lead {
  font-size: 9px;
  color: rgba(245, 239, 227, 0.55);
  margin-bottom: 14px;
}
.your-tag {
  display: inline-block;
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.05em;
  padding: 4px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.your-tag--yes { background: var(--c-yes); color: var(--ink); }
.your-tag--no  { background: var(--c-no);  color: var(--ink); }

.big-stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: 8px;
}
.big-stat .num {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: clamp(72px, 16vw, 96px);
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.big-stat .num--yes { color: var(--c-yes); }
.big-stat .num--no  { color: var(--c-no); }
.big-stat .pct-sign {
  font-family: 'Newsreader', serif;
  font-size: 28px;
  color: rgba(245, 239, 227, 0.6);
}

.big-cap {
  font-size: 14px;
  color: rgba(245, 239, 227, 0.78);
  margin: 4px auto 16px;
  max-width: 360px;
  line-height: 1.5;
}
.big-cap-strong { font-weight: 600; font-style: normal; }
.big-cap-strong--yes { color: var(--c-yes); }
.big-cap-strong--no  { color: var(--c-no); }

.result-meta {
  font-size: 9px;
  color: rgba(245, 239, 227, 0.55);
  margin-top: 12px;
}

/* Comparison (when reached via share link) */
.comparison {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.comparison-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ink-mid);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.comparison-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 14px;
}
.comp-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.comp-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-mid);
}
.comp-tag {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-radius: 8px;
}
.comp-tag--yes { background: var(--c-yes); color: var(--ink); }
.comp-tag--no  { background: var(--c-no);  color: var(--ink); }
.comp-vs {
  font-style: italic;
  font-size: 22px;
  color: var(--ink-faint);
}

/* Section heading (above map / etc.) */
.section-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 0 0;
  margin: 22px 0 12px;
}
.section-h h3 {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  color: var(--ink);
}
.section-h .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-mid);
  text-transform: uppercase;
}

.map-section { margin: 12px 0 22px; }

.country-detail {
  margin-top: 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.country-detail .cd-name {
  font-family: 'Newsreader', serif;
  font-size: 17px;
}
.country-detail .cd-bar {
  flex: 1;
  min-width: 200px;
  height: 14px;
  background: var(--c-no);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.country-detail .cd-yes {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--c-yes);
  transition: width 0.5s ease-out;
}
.country-detail .cd-text {
  display: flex;
  gap: 12px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}
.country-detail .cd-y { color: var(--gold); font-weight: 600; }
.country-detail .cd-n { color: #2D6BB8; font-weight: 600; }

/* ============ Push prompt (kept) ============ */
.push-prompt {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 18px 0;
}
.push-prompt-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.push-prompt-title {
  font-family: 'Newsreader', serif;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 6px;
}
.push-prompt-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.push-prompt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.push-prompt-actions .btn { font-size: 11px; padding: 12px 20px; letter-spacing: 0.15em; }

/* ============ Accept prompt (shared streak invite) ============ */
.accept-prompt {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 18px 0;
}
.accept-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.accept-body {
  font-family: 'Newsreader', serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 12px;
}
.accept-body strong { font-style: italic; font-weight: 400; color: var(--accent); }
.accept-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.accept-actions .btn { font-size: 11px; padding: 12px 20px; letter-spacing: 0.15em; }
.accept-error {
  margin-top: 8px;
  font-size: 10px;
  color: var(--accent);
  min-height: 12px;
}

/* ============ Share section (Dir-A) ============ */
.share-section { margin: 18px 0; }
.share-primary {
  width: 100%;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  transition: transform 0.1s, background 0.15s;
  margin-bottom: 10px;
}
@media (hover: hover) {
  .share-primary:hover { transform: translateY(-1px); background: var(--accent-soft); }
}
.share-primary .ico { font-size: 14px; margin-right: 4px; }
.share-meta-text {
  opacity: 0.85;
  font-size: 9px;
  letter-spacing: 0.18em;
}

.share-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.copy-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: inherit;
  transition: border-color 0.15s, transform 0.1s;
}
@media (hover: hover) {
  .copy-box:hover { border-color: var(--ink); transform: translateY(-1px); }
}
.copy-label {
  font-size: 8.5px;
  color: var(--ink-mid);
}
.copy-sub {
  font-size: 13px;
  color: var(--ink);
}

/* ============ Next round ============ */
.next-up {
  text-align: center;
  padding: 20px 0 6px;
  margin-top: 14px;
}
.next-up .when {
  font-size: 9px;
  color: var(--ink-mid);
  margin-bottom: 4px;
}
.next-up .countdown {
  font-family: 'Newsreader', serif;
  font-size: 22px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ============ iOS install prompt ============ */
.ios-install-prompt {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 18px 0;
  position: relative;
}
.ios-install-head {
  font-size: 9.5px;
  color: var(--accent);
  margin-bottom: 6px;
}
.ios-install-body {
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 10px;
}
.ios-install-body strong {
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}
.ios-install-dismiss {
  background: none;
  border: none;
  font-size: 9px;
  color: var(--ink-mid);
  cursor: pointer;
  padding: 4px 0;
}
.ios-install-dismiss:hover { color: var(--ink); }

/* ============ Country pill + picker modal ============ */
.country-pill { margin: 16px 0 4px; }
.country-pill-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.15s, transform 0.1s;
}
@media (hover: hover) {
  .country-pill-button:hover { border-color: var(--ink); transform: translateY(-1px); }
}
.country-pill-label {
  font-size: 9.5px;
  color: var(--ink-mid);
}
.country-pill-flag { font-size: 16px; line-height: 1; }
.country-pill-name {
  font-family: 'Newsreader', serif;
  font-size: 16px;
  font-style: italic;
  color: var(--ink);
}
.country-pill-edit {
  font-size: 9px;
  color: var(--ink-mid);
  margin-left: 6px;
}

.country-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(26, 20, 16, 0.5);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 1000;
  padding: 0;
}
@media (min-width: 600px) { .country-modal-backdrop { align-items: center; padding: 24px; } }

.country-modal {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  background: var(--paper);
  border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background-image: radial-gradient(rgba(26,20,16,0.06) 1px, transparent 1px);
  background-size: 14px 14px;
}
@media (min-width: 600px) { .country-modal { border-radius: 16px; } }

.country-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.country-modal-head .mono {
  font-size: 10px;
  color: var(--ink-mid);
}
.country-modal-close {
  background: none; border: none;
  font-size: 22px; line-height: 1;
  color: var(--ink-mid);
  cursor: pointer; padding: 0 4px;
}
.country-modal-close:hover { color: var(--ink); }

.country-modal-search {
  margin: 12px 18px;
  padding: 12px 16px;
  font: inherit; font-size: 15px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
}
.country-modal-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--ink);
}

.country-modal-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
}

.country-row {
  display: grid;
  grid-template-columns: 28px 1fr 32px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
}
.country-row--active { background: var(--paper-2); }
.country-row:hover { background: var(--paper-2); }
.country-row--current { font-weight: 500; }
.country-row-flag { font-size: 20px; line-height: 1; }
.country-row-name {
  font-family: 'Newsreader', serif;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.country-row--current .country-row-name { color: var(--accent); }
.country-row-code {
  font-size: 9px;
  color: var(--ink-mid);
  text-align: right;
}

.country-modal-error {
  margin: 0 18px 10px;
  font-size: 10px;
  color: var(--accent);
  min-height: 12px;
}

/* ============ Mobile ============ */
@media (max-width: 480px) {
  .answer-btn { font-size: 48px; height: 80px; }
  .share-secondary { grid-template-columns: 1fr; }
}