:root{
  --ink:#10245B;
  --cream:#FFF9F3;
  --card:#FFFFFF;
  --simple:#FFB91F;
  --simple-dark:#B96F00;
  --deep:#6C3BEE;
  --deep-dark:#24276F;
  --muted:#7380A0;
  --shadow:0 24px 60px rgba(16,36,91,.14);
  --radius:34px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Nunito",system-ui,sans-serif;background:var(--cream);color:var(--ink)}
body{overflow-x:hidden}
button{font:inherit}
.app-shell{min-height:100vh;max-width:540px;margin:0 auto;padding:20px 18px 34px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.brand{font-size:2rem;font-weight:900;letter-spacing:-.04em}
.counter{font-size:.88rem;font-weight:800;color:var(--muted);background:#fff;padding:9px 12px;border-radius:999px;box-shadow:0 8px 20px rgba(16,36,91,.08)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#F3EEE8;padding:6px;border-radius:18px;margin-bottom:18px}
.tab{border:0;background:transparent;border-radius:13px;padding:12px;font-weight:900;color:#7380A0;cursor:pointer}
.tab.active{background:#fff;color:var(--ink);box-shadow:0 7px 18px rgba(16,36,91,.08)}
.tab span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#ECE8FF;color:var(--deep);font-size:.75rem;margin-left:4px}
.stage{position:relative}
.card-stack{position:relative;perspective:1200px}
.question-card{
width:100%;
height:min(70vh,680px);
min-height:520px;
border-radius:var(--radius);
filter:drop-shadow(0 24px 50px rgba(16,36,91,.13));
touch-action:pan-y;
user-select:none;
cursor:grab;
transition:transform .22s ease,opacity .22s ease
}
.question-card.dragging{transition:none;cursor:grabbing}
.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .58s cubic-bezier(.2,.75,.2,1)}
.question-card.flipped .card-inner{transform:rotateY(180deg)}
.card-face{
position:absolute;
inset:0;
border-radius:var(--radius);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
padding:30px 26px 26px;
overflow:hidden
}
.card-front{
background:
radial-gradient(circle at 88% 12%,rgba(255,185,31,.16),transparent 21%),
radial-gradient(circle at 8% 88%,rgba(108,59,238,.10),transparent 24%),
linear-gradient(160deg,#FFFFFF 0%,#FFFDF9 100%);
display:flex;
flex-direction:column;
justify-content:space-between
}
.card-back{transform:rotateY(180deg);display:flex;flex-direction:column;transition:background .35s ease,color .35s ease}
.card-back.simple-mode{background:linear-gradient(160deg,#FFC844 0%,#FFB91F 100%);color:#5A3900}
.card-back.deep-mode{background:linear-gradient(160deg,#7950F2 0%,#3F2C9A 100%);color:white}
.question{
font-size:clamp(2.35rem,8.6vw,4.15rem);
line-height:1.04;
font-weight:900;
letter-spacing:-.05em;
flex:1;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:24px 2px 18px;
text-wrap:balance
}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.choice{
border:0;
padding:17px 14px;
border-radius:18px;
font-weight:900;
font-size:1.08rem;
cursor:pointer;
transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease
}
.choice:active{transform:scale(.97)}
.choice.simple{background:var(--simple);color:#5D3A00;box-shadow:0 10px 24px rgba(255,185,31,.28)}
.choice.deep{background:var(--deep);color:#fff;box-shadow:0 10px 24px rgba(108,59,238,.23)}
.card-back.simple-mode .choice.simple,
.card-back.deep-mode .choice.deep{box-shadow:inset 0 0 0 3px rgba(255,255,255,.92),0 8px 20px rgba(0,0,0,.1)}
.answer-top{
display:flex;
align-items:center;
justify-content:flex-start;
min-height:46px
}
.back-question{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.55);color:inherit;font-size:1.25rem;font-weight:900;cursor:pointer}
.deep-mode .back-question{background:rgba(255,255,255,.14);color:white}
.answer-label{
font-size:.92rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.12em;
margin-top:16px;
opacity:.76
}
.answer{
font-size:clamp(1.55rem,5.7vw,2.15rem);
line-height:1.38;
font-weight:800;
letter-spacing:-.02em;
flex:1;
display:flex;
align-items:center;
text-align:left;
padding:18px 0 10px;
text-wrap:pretty
}
.persistent{margin-top:18px}
.card-back.simple-mode .choice.simple{background:#fff;color:#8E5700}
.card-back.simple-mode .choice.deep{background:#4E36B9;color:white}
.card-back.deep-mode .choice.deep{background:#fff;color:#4A2AC5}
.card-back.deep-mode .choice.simple{background:#FFC548;color:#583700}
.swipe-hint{text-align:center;color:var(--muted);font-weight:800;font-size:.9rem;padding:14px 0 0}
.empty-state{text-align:center;padding:76px 18px}
.empty-state.hidden,.hidden{display:none!important}
.empty-icon{font-size:4rem}
.empty-state h2{font-size:1.7rem;margin:14px 0 6px}
.empty-state p{color:var(--muted);font-weight:700}
.paywall{position:fixed;inset:0;background:rgba(15,22,52,.48);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;padding:16px;z-index:20}
.paywall-card{width:min(520px,100%);background:white;border-radius:30px;padding:26px;box-shadow:var(--shadow);position:relative}
.close-paywall{position:absolute;right:18px;top:16px;border:0;background:#F3F2F7;border-radius:50%;width:38px;height:38px;font-size:1.5rem;cursor:pointer;color:var(--ink)}
.paywall-icon{font-size:3rem}
.paywall-card h2{font-size:2rem;line-height:1.05;margin:10px 0 8px}
.paywall-card>p{color:var(--muted);font-weight:700;line-height:1.45}
.plans{display:grid;gap:10px;margin-top:18px}
.plan{border:2px solid #ECEAF5;border-radius:18px;background:#fff;padding:15px 16px;text-align:left;display:flex;align-items:center;justify-content:space-between;color:var(--ink);cursor:pointer}
.plan strong{font-size:1rem}
.plan span{color:var(--muted);font-size:.82rem;font-weight:800}
.plan.featured{border-color:var(--deep);background:#F7F4FF}
.prototype-note{font-size:.78rem;margin-bottom:0}
@media (min-width:700px){
  body{background:linear-gradient(135deg,#FFF9F3 0%,#F8F5FF 100%)}
  .app-shell{padding-top:30px}
}

@media (max-width:430px){
  .app-shell{padding:14px 14px 26px}
  .brand{font-size:1.8rem}
  .counter{font-size:.78rem;padding:8px 10px}
  .tabs{margin-bottom:14px}
  .question-card{height:72vh;min-height:500px}
  .card-face{padding:24px 20px 22px}
  .question{font-size:clamp(2.15rem,10.8vw,3.45rem);padding:18px 0 14px}
  .answer{font-size:clamp(1.4rem,6.3vw,1.82rem);line-height:1.42}
  .choice{padding:16px 10px;font-size:1rem}
  .swipe-hint{font-size:.82rem;padding-top:10px}
}


/* --- Firebase / Google account pilot --- */
.top-actions{display:flex;align-items:center;gap:8px}
.account-button{
  width:40px;height:40px;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--deep);font-weight:900;font-size:1rem;
  box-shadow:0 8px 20px rgba(16,36,91,.08);cursor:pointer
}
.account-button.signed-in{
  background:var(--deep);color:#fff;
  box-shadow:0 8px 20px rgba(108,59,238,.22)
}
.auth-modal{
  position:fixed;inset:0;z-index:30;padding:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(15,22,52,.48);backdrop-filter:blur(8px)
}
.auth-card{
  position:relative;width:min(440px,100%);background:#fff;
  border-radius:30px;padding:30px 26px 26px;box-shadow:var(--shadow);
  text-align:center
}
.close-auth{
  position:absolute;right:18px;top:16px;border:0;background:#F3F2F7;
  border-radius:50%;width:38px;height:38px;font-size:1.5rem;
  cursor:pointer;color:var(--ink)
}
.auth-mark{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 18px;border-radius:16px;
  background:#F7F4FF;color:var(--deep);font-size:1.35rem;font-weight:900;
  margin:6px 0 12px
}
.auth-card h2{font-size:1.8rem;line-height:1.08;margin:8px 0}
.auth-card p{color:var(--muted);font-weight:700;line-height:1.45}
.google-button{
  width:100%;border:1.5px solid #E3E5EB;background:#fff;color:#26324D;
  border-radius:17px;padding:15px 18px;margin-top:12px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-weight:900;font-size:1rem;cursor:pointer;
  box-shadow:0 8px 20px rgba(16,36,91,.07)
}
.google-button:disabled{opacity:.55;cursor:wait}
.google-g{
  width:26px;height:26px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:#fff;
  border:1px solid #E3E5EB;font-weight:900;color:#4285F4
}
.auth-status{min-height:22px;margin:12px 0 0!important;font-size:.86rem}
.auth-status.error{color:#B42318}
.signed-in-view{padding-top:10px}
.user-avatar{
  width:76px;height:76px;border-radius:50%;margin:6px auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#7950F2 0%,#3F2C9A 100%);
  color:#fff;font-size:2rem;font-weight:900
}
.auth-success{
  margin:18px 0;padding:13px 15px;border-radius:15px;
  background:#F1FBF5;color:#217A45;font-weight:800;font-size:.9rem
}
.signout-button{
  width:100%;border:0;border-radius:16px;padding:14px 16px;
  background:#F3F2F7;color:var(--ink);font-weight:900;cursor:pointer
}
@media (max-width:430px){
  .top-actions{gap:6px}
  .account-button{width:38px;height:38px}
}