/* Two windows that come once (js/app-ask.js, js/x-thirty.js): "Put ZAZA World on your phone" after the early quests,
   and "Level 30: bring your X". Both sit on the quest book's look (world.css .quest-book, .qb-steps). */
.ask-app h3 { margin: 12px 0 6px; font: 400 15px "Titan One", sans-serif; color: var(--gold); letter-spacing: 0.02em; }
.ask-app h2 img { border-radius: 8px; image-rendering: auto; }
.ask-app .sub { margin-bottom: 4px; }

/* Add it: this phone's steps, numbered, each with its icon (install.js installSteps). */
.ask-steps { list-style: none; counter-reset: as; margin: 0; padding: 0; display: grid; gap: 6px; }
.ask-steps li { counter-increment: as; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 17px; line-height: 1.25; }
.ask-steps li::before { content: counter(as); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--edge-dark); font-size: 15px; line-height: 1; }
.ask-steps .ico { flex: none; width: 22px; display: grid; place-items: center; color: #7fd4ff; font-size: 18px; }
.ask-steps b { color: #fff; font-weight: 400; }

/* Use it: the app's tab bar, each tab with what it's for. */
.ask-tabs { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ask-tabs li { display: grid; grid-template-columns: 6.2em 1fr; align-items: center; gap: 10px; font-size: 16px; line-height: 1.25; color: #cfd8f0; }
.ask-tabs .tab { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: #0b1546; border: 1px solid #2c3b78; color: var(--text); }
.ask-tabs .tab b { font-weight: 400; }
.ask-tabs svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ask-tabs .play .tab { background: linear-gradient(180deg, #ffe066, #e8b52a); border-color: #8a6410; color: #06124f; }
.ask-tabs .play svg { fill: currentColor; stroke: none; }

/* Level 30: three tiles on why X matters, then the quest book's steps. */
.x30-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 12px; }
.x30-why section { padding: 8px 10px; border-radius: 8px; background: rgba(255, 210, 63, 0.07); border: 1px solid rgba(255, 210, 63, 0.35); }
.x30-why b { display: block; margin-bottom: 3px; font: 400 15px "Titan One", sans-serif; color: var(--gold); }
.x30-why p { margin: 0; font-size: 15px; line-height: 1.3; color: #cfd8f0; }
.x30-book .actions a.btn { text-decoration: none; }
@media (max-width: 560px) {
  .x30-why { grid-template-columns: 1fr; gap: 5px; margin-bottom: 10px; }
  .x30-why section { padding: 6px 9px; }
  .x30-why p { font-size: 14px; }
  .x30-book .qb-steps > li > p { font-size: 15px; }
  .ask-tabs li { grid-template-columns: 5.6em 1fr; font-size: 15px; }
}

/* How did you find ZAZA? (js/found-us.js): Pip's question as his quest begins, ten choices in two columns (one on the
   narrowest phones), Other's box under them, Skip. The picked one goes gold, the rest fade while "Thanks!" shows. */
.found-book .sub { margin-bottom: 8px; }
.found-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
.found-pick { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font: 17px/1.15 var(--ui-font); letter-spacing: inherit; text-align: left; cursor: pointer; }
.found-pick:hover, .found-pick:focus-visible { border-color: var(--gold); outline: 0; }
.found-pick .ico { flex: none; width: 22px; display: grid; place-items: center; font-size: 17px; line-height: 1; }
.found-pick.on { background: linear-gradient(180deg, #ffe066, #e8b52a); border-color: #8a6410; color: #06124f; }
.found-book.sent .found-pick:not(.on) { opacity: 0.4; cursor: default; }
.found-other { display: flex; gap: 6px; margin: 0 0 8px; }
.found-other[hidden] { display: none; }
.found-other input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 2px solid #3b4c80; background: #0a1440; color: #fff; font: 17px var(--ui-font); outline: 0; user-select: text; -webkit-user-select: text; }
.found-other input:focus { border-color: var(--gold); }
@media (max-width: 340px) {
  .found-picks { grid-template-columns: 1fr; gap: 4px; }
  .found-pick { min-height: 34px; font-size: 16px; }
}

/* ⚡ Charge the Community Vault (js/vault-ask.js): the reminder for holders who don't charge yet, Volt's explainer and the
   thank-you. Four tabs (why it matters, is it safe, how it works, your gift), gold on the one showing; then the quest
   book's buttons. */
.vault-ask .sub { margin-bottom: 8px; }
.va-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.va-tab { flex: 1 1 auto; min-height: 34px; padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); color: #cfd8f0; font: 16px/1.1 var(--ui-font); letter-spacing: inherit; cursor: pointer; }
.va-tab:hover, .va-tab:focus-visible { border-color: var(--gold); outline: 0; }
.va-tab.on { background: linear-gradient(180deg, #ffe066, #e8b52a); border-color: #8a6410; color: #06124f; }
.va-pane[hidden] { display: none; }
.va-lead { margin: 0 0 6px; font-size: 16px; color: var(--gold); }
.va-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.va-list li { position: relative; padding: 7px 10px 7px 30px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 16px; line-height: 1.3; color: #e6ecff; }
.va-list li::before { content: "⚡"; position: absolute; left: 9px; top: 7px; font-size: 14px; }
.va-pane[data-pane="safe"] .va-list li::before { content: "🔒"; }
.va-gift li { padding-left: 10px; background: rgba(255, 210, 63, 0.07); border-color: rgba(255, 210, 63, 0.35); }
.va-gift li::before { content: none; }
.va-ico { margin-right: 8px; }
.vault-ask .ask-steps li { font-size: 16px; }
@media (max-width: 560px) {
  .va-tabs { gap: 4px; margin-bottom: 8px; }
  .va-tab { min-height: 30px; padding: 4px 6px; font-size: 14px; }
  .va-list { gap: 5px; }
  .va-list li { padding: 6px 9px 6px 26px; font-size: 15px; }
  .va-list li::before { left: 7px; top: 6px; font-size: 13px; }
  .va-gift li { padding-left: 9px; }
  .vault-ask .ask-steps li { font-size: 15px; }
}