/* ── Reset & Base ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;height:100%}
body{min-height:100%;-webkit-font-smoothing:antialiased;font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;overflow-x:hidden}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;cursor:pointer}
a{-webkit-tap-highlight-color:transparent}

/* ── Desktop wrapper ──────────────────────────────── */
.app-shell{
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:flex-start;justify-content:center;
  background:var(--shell-bg);
}
.app-container{
  width:100%;max-width:480px;
  min-height:100vh;min-height:100dvh;
  position:relative;overflow:hidden;
  background:var(--bg);
  box-shadow:0 0 80px var(--shell-shadow);
}
@media(min-width:520px){
  .app-shell{align-items:center;padding:24px 0}
  .app-container{min-height:calc(100vh - 48px);min-height:calc(100dvh - 48px);border-radius:20px}
}
@supports(padding:max(0px)){
  .app-container{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
}

/* ── Screens ──────────────────────────────────────── */
.screen{min-height:100%;min-height:100dvh;display:none;flex-direction:column}
.screen.active{display:flex}
.scrollable{
  overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;
  padding-bottom:max(48px, env(safe-area-inset-bottom) + 28px);
}

/* ── Nav bar ─────────────────────────────────────── */
.nav-bar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  padding-top:env(safe-area-inset-top);
  height:calc(54px + env(safe-area-inset-top));
  background:var(--nav-bg);
  border-bottom:0.5px solid var(--border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.nav-logo{font-size:15px;letter-spacing:5px;font-weight:200;color:var(--text)}
.nav-actions{display:flex;gap:4px;align-items:center}
.nav-btn{
  background:none;border:none;
  padding:10px;border-radius:8px;
  font-size:20px;line-height:1;
  color:var(--text3);transition:color 0.2s;
  min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
}
.nav-btn:hover{color:var(--gold)}

/* ── Header ──────────────────────────────────────── */
.header-section{padding:32px 20px 18px;text-align:center}
.deco-row{font-size:12px;letter-spacing:4px;color:var(--deco-color);margin-bottom:10px}
.logo-mark{display:flex;gap:4px;justify-content:center;margin-bottom:8px}
.logo-col{display:flex;flex-direction:column;gap:4px}
.logo-bar{height:3px;border-radius:2px;background:var(--gold)}
.lb-full{width:22px}.lb-half{width:11px}
.app-name{font-size:var(--name-size);font-weight:var(--name-weight);color:var(--name-color);letter-spacing:var(--name-spacing)}
.app-tagline{font-size:11px;color:var(--gold);letter-spacing:2px;margin:4px 0 2px;text-transform:uppercase}
.app-subtitle{font-size:12px;color:var(--text3);letter-spacing:0.5px}

/* ── Form ────────────────────────────────────────── */
.form-section{padding:0 18px}
.card{background:var(--card-bg);border:0.5px solid var(--border);border-radius:14px;padding:18px}
.card+.card{margin-top:10px}
.card-title{font-size:9px;color:var(--gold);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:10px}
.field-label{font-size:10px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.field-row{display:flex;gap:8px;margin-bottom:10px}
.field-row .field{flex:1}
.field{background:var(--field-bg);border:0.5px solid var(--border);border-radius:10px;padding:11px 12px}
.field select,.field input{background:transparent;border:none;color:var(--text);font-size:15px;width:100%;outline:none;font-family:inherit;min-height:28px}
.field select option{background:var(--card-bg);color:var(--text)}
.colon{color:var(--text3);font-size:16px;align-self:center;flex-shrink:0;padding:0 2px}

.gender-row{display:flex;gap:6px;margin-bottom:14px}
.g-btn{
  flex:1;padding:12px 6px;
  border-radius:10px;text-align:center;
  font-size:12px;letter-spacing:0.3px;
  border:0.5px solid var(--border);
  background:transparent;color:var(--text3);
  transition:all 0.2s;font-family:inherit;
  min-height:46px;
}
.g-btn.active,.g-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-bg)}

.unknown-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;cursor:pointer;min-height:36px}
.unknown-row input{width:18px;height:18px;accent-color:var(--gold);cursor:pointer;flex-shrink:0}
.unknown-label{font-size:12px;color:var(--text3);line-height:1.4}

/* ── Buttons ─────────────────────────────────────── */
.btn-primary{
  background:var(--btn-primary-bg);
  color:var(--btn-primary-text);
  border:none;border-radius:var(--btn-radius);
  padding:17px 24px;
  font-size:13px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
  width:100%;transition:opacity 0.2s;
  font-family:inherit;min-height:52px;
}
.btn-primary:hover{opacity:0.88}
.btn-primary:active{opacity:0.75;transform:scale(0.99)}

.btn-secondary{
  background:transparent;color:var(--text2);
  border:0.5px solid var(--border2);
  border-radius:10px;padding:14px 18px;
  font-size:13px;width:100%;
  transition:all 0.2s;font-family:inherit;
  min-height:48px;
}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold)}
.btn-secondary:active{opacity:0.75}

.btn-ghost{
  background:transparent;color:var(--text4);
  border:none;font-size:12px;
  padding:10px;font-family:inherit;
  min-height:44px;min-width:44px;
}

.awaken-wrap{padding:18px 18px 8px}
.privacy-note{
  text-align:center;font-size:10px;color:var(--text4);
  padding:6px 18px;
  padding-bottom:max(16px, env(safe-area-inset-bottom) + 8px);
  display:flex;align-items:center;justify-content:center;gap:4px;
}

/* ── Elements row ────────────────────────────────── */
.elements-row{display:flex;justify-content:center;gap:10px;padding:16px 4px 8px}
.el-item{text-align:center}
.el-circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 5px}
.el-char{font-size:20px;font-weight:300}
.el-name{font-size:10px;color:var(--text3)}
.el-wood {background:var(--el-wood-bg); border:1px solid var(--el-wood-border)}
.el-fire {background:var(--el-fire-bg); border:1px solid var(--el-fire-border)}
.el-earth{background:var(--el-earth-bg);border:1px solid var(--el-earth-border)}
.el-metal{background:var(--el-metal-bg);border:1px solid var(--el-metal-border)}
.el-water{background:var(--el-water-bg);border:1px solid var(--el-water-border)}

/* ── Login nudge ─────────────────────────────────── */
.login-nudge{margin:8px 18px 28px;padding:14px 16px;border-radius:12px;border:0.5px solid var(--border);background:var(--card-bg)}
.nudge-text{font-size:13px;color:var(--text3);line-height:1.6;margin-bottom:12px}
.nudge-btn{
  background:transparent;color:var(--gold);
  border:0.5px solid var(--gold-border);
  border-radius:8px;padding:10px 18px;
  font-size:12px;font-family:inherit;
  min-height:44px;
}

/* ── Previous reading banner ─────────────────────── */
.prev-reading-banner{margin:0 18px 16px;padding:14px 16px;border-radius:12px;border:0.5px solid var(--border2);background:var(--card-bg)}
.prev-banner-title{font-size:9px;color:var(--text4);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.prev-banner-result{font-size:15px;font-weight:300;letter-spacing:2px;margin-bottom:4px}
.prev-banner-result.yes{color:var(--result-yes)}
.prev-banner-result.no{color:var(--result-no)}
.prev-banner-meta{font-size:11px;color:var(--text4)}
.prev-banner-note{font-size:11px;color:var(--text4);margin-top:8px;padding-top:8px;border-top:0.5px solid var(--border);line-height:1.6;font-style:italic}

/* ── Generating / Calc screen ────────────────────── */
.gen-screen{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:max(40px, env(safe-area-inset-top) + 24px) 24px max(40px, env(safe-area-inset-bottom) + 24px);
  background:var(--bg);
}
.calc-stages{width:100%;max-width:340px;margin-bottom:24px}
.calc-stage{display:flex;align-items:center;gap:10px;margin-bottom:12px;opacity:0.25;transition:opacity 0.6s,transform 0.4s;transform:translateX(-8px)}
.calc-stage.active{opacity:1;transform:translateX(0)}
.calc-stage.done{opacity:0.4}
.stage-icon{font-size:16px;width:28px;text-align:center;flex-shrink:0}
.stage-bar-wrap{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.stage-bar{height:100%;width:0%;background:var(--gold);border-radius:2px;transition:width 0.8s ease}
.stage-label{font-size:11px;color:var(--text3);width:160px;text-align:left;letter-spacing:0.5px}
.calc-oracle-ring{
  width:90px;height:90px;border-radius:50%;
  border:1.5px solid var(--gold-border);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;position:relative;
  animation:ringPulse 2s ease-in-out infinite;
}
.calc-ring-inner{font-size:28px}
.calc-ring-orbit{position:absolute;width:100%;height:100%;animation:orbitSpin 3s linear infinite}
.calc-ring-dot{position:absolute;top:-3px;left:50%;width:6px;height:6px;background:var(--gold);border-radius:50%;transform:translateX(-50%)}
@keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 var(--gold-bg)}50%{box-shadow:0 0 0 8px transparent}}
@keyframes orbitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.gen-title{font-size:18px;font-weight:200;color:var(--text);margin-bottom:6px;letter-spacing:0.5px}
.gen-sub{font-size:12px;color:var(--text4);line-height:1.6}

/* ── Results ─────────────────────────────────────── */
.results-wrap{
  padding:0 18px;
  padding-bottom:max(48px, env(safe-area-inset-bottom) + 32px);
}
.result-hero{text-align:center;padding:28px 0 20px}
.result-word{font-size:54px;font-weight:200;letter-spacing:5px;line-height:1.1}
.result-word.yes{color:var(--result-yes)}
.result-word.no{color:var(--result-no)}
.result-sub{font-size:13px;color:var(--text3);margin-top:8px;line-height:1.65;padding:0 16px}

/* Chart */
.chart-section{margin-bottom:18px}
.chart-wrap{position:relative;width:176px;height:176px;margin:0 auto 16px}
.chart-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-size:22px;pointer-events:none}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center}
.legend-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text2)}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Day master */
.dm-card{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:12px;border:0.5px solid var(--border);background:var(--card-bg);margin-bottom:14px}
.dm-char-circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px;border:0.5px solid var(--gold-border);background:var(--gold-bg);flex-shrink:0}
.dm-name{font-size:14px;font-weight:500;color:var(--text);margin-bottom:4px}
.dm-desc{font-size:12px;color:var(--text2);line-height:1.65}

/* Essence */
.essence-card{border-radius:14px;padding:18px;margin-bottom:14px;border:0.5px solid var(--border);background:var(--card-bg)}
.ec-section{margin-bottom:14px}
.ec-section:last-child{margin-bottom:0}
.ec-title{font-size:9px;color:var(--gold);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:6px}
.ec-text{font-size:13px;color:var(--text2);line-height:1.75}

/* Domain cards */
.domain-card{border-radius:14px;padding:16px;margin-bottom:12px;border:0.5px solid var(--border);background:var(--card-bg)}
.domain-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.domain-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.domain-icon.good{border:1px solid var(--result-yes);background:var(--result-yes-bg);color:var(--result-yes)}
.domain-icon.bad{border:1px solid var(--result-no);background:var(--result-no-bg);color:var(--result-no)}
.domain-ttl{font-size:14px;font-weight:500;color:var(--text)}
.domain-badge{font-size:10px;letter-spacing:1px;margin-top:2px}
.domain-badge.good{color:var(--result-yes)}
.domain-badge.bad{color:var(--result-no)}
.domain-text{font-size:13px;color:var(--text2);line-height:1.75;margin-bottom:10px}
.domain-explain{font-size:12px;color:var(--text3);line-height:1.65;margin-bottom:12px;padding-left:10px;border-left:2px solid var(--border2);font-style:italic}
.el-bars{margin-bottom:10px}
.el-bar-title{font-size:8px;color:var(--text4);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.el-bar-row{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.el-bar-lbl{font-size:10px;color:var(--text3);width:30px}
.el-bar-track{flex:1;height:5px;border-radius:3px;background:var(--track-bg)}
.el-bar-fill{height:5px;border-radius:3px;width:0;transition:width 1.2s ease}
.el-bar-pct{font-size:10px;color:var(--text3);width:30px;text-align:right}
.el-insight{font-size:12px;color:var(--text3);line-height:1.6;padding-top:8px;border-top:0.5px solid var(--border)}

/* Lucky */
.lucky-card{border-radius:14px;padding:16px;margin-bottom:12px;border:0.5px solid var(--border);background:var(--card-bg)}
.color-dots{display:flex;gap:8px;margin-top:6px;margin-bottom:14px}
.color-dot{width:24px;height:24px;border-radius:50%}
.tip-list{list-style:none;padding:0}
.tip-list li{font-size:13px;color:var(--text2);padding:7px 0;border-bottom:0.5px solid var(--border);display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.tip-list li:last-child{border-bottom:none}
.tip-dot{color:var(--gold);flex-shrink:0;margin-top:1px}

/* Learn */
.learn-section{margin-bottom:14px}
.learn-card{border-radius:12px;padding:4px 16px;margin-bottom:8px;border:0.5px solid var(--border);background:var(--card-bg)}
.learn-hdr{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;min-height:52px;padding:4px 0}
.learn-glyph{font-size:18px;color:var(--text3);width:26px;text-align:center;flex-shrink:0}
.learn-ttl{font-size:13px;font-weight:500;color:var(--text);flex:1}
.learn-chev{font-size:12px;color:var(--text4);transition:transform 0.25s;padding:4px}
.learn-chev.open{transform:rotate(180deg)}
.learn-body{display:none;margin-top:4px;margin-bottom:14px;font-size:13px;color:var(--text2);line-height:1.8}
.learn-body.open{display:block}
.learn-body strong{color:var(--text)}
.learn-body em{color:var(--gold)}
.scale-tbl{width:100%;border-collapse:collapse;margin-top:10px;font-size:12px}
.scale-tbl th{text-align:left;padding:6px 4px;border-bottom:0.5px solid var(--border);color:var(--text3);font-size:9px;letter-spacing:1px;font-weight:500}
.scale-tbl td{padding:6px 4px;border-bottom:0.5px solid var(--border);color:var(--text2);vertical-align:top;line-height:1.5}
.scale-tbl td:first-child{color:var(--gold);white-space:nowrap;font-weight:500}
.scale-tbl td:nth-child(2){color:var(--text);font-weight:500;white-space:nowrap}

/* Share */
.share-section{text-align:center;padding:20px 0 8px}
.share-btns{display:flex;gap:10px;margin-top:14px}

/* ── Paywall ─────────────────────────────────────── */
.paywall-wrap{
  padding:24px 18px;
  padding-bottom:max(40px, env(safe-area-inset-bottom) + 24px);
}
.pw-icon{font-size:40px;text-align:center;margin-bottom:12px}
.pw-title{font-size:22px;font-weight:300;color:var(--text);text-align:center;margin-bottom:8px}
.pw-body{font-size:13px;color:var(--text2);line-height:1.7;text-align:center;margin-bottom:22px}
.timer-lbl{font-size:9px;color:var(--text4);letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:6px}
.timer-box{background:var(--gold-bg);border:0.5px solid var(--gold-border);border-radius:12px;padding:20px;text-align:center;margin-bottom:22px}
.timer-val{font-size:36px;font-weight:200;color:var(--gold);letter-spacing:5px}
.plans-wrap{margin-bottom:16px}
.plan-card{border-radius:12px;padding:18px;margin-bottom:8px;border:0.5px solid var(--border);background:var(--card-bg);transition:border-color 0.2s;min-height:72px}
.plan-card:active{opacity:0.85}
.plan-card:hover,.plan-card.featured{border-color:var(--gold)}
.plan-card.featured{background:var(--gold-bg)}
.plan-hdr{display:flex;justify-content:space-between;align-items:flex-start}
.plan-name{font-size:15px;font-weight:500;color:var(--text)}
.plan-best{font-size:9px;color:var(--gold);border:0.5px solid var(--gold-border);border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:middle}
.plan-desc{font-size:12px;color:var(--text4);margin-top:3px}
.plan-price{font-size:18px;font-weight:300;color:var(--gold);text-align:right}
.plan-period{font-size:11px;color:var(--text4)}
.ad-divider{display:flex;align-items:center;gap:10px;color:var(--text3);font-size:12px;margin:18px 0}
.ad-divider::before,.ad-divider::after{content:'';flex:1;height:0.5px;background:var(--border)}
.ad-note{font-size:11px;color:var(--text3);text-align:center;margin-top:8px;line-height:1.6}
.ad-banner{width:100%;min-height:70px;background:var(--field-bg);border:0.5px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text4);font-size:10px;letter-spacing:1px;margin:14px 0}

/* ── Modals ──────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:flex-end;justify-content:center;
  background:var(--overlay-bg);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.modal-overlay.center{align-items:center}
.modal-box{
  width:100%;max-width:480px;
  max-height:92vh;overflow-y:auto;
  background:var(--modal-bg);border:0.5px solid var(--border);
  border-radius:20px 20px 0 0;
  padding:20px 20px;
  padding-bottom:max(40px, env(safe-area-inset-bottom) + 24px);
  position:relative;
}
.modal-overlay.center .modal-box{
  border-radius:20px;max-width:420px;
  margin:16px;padding-bottom:28px;
  max-height:88vh;
}
.modal-handle{width:36px;height:4px;border-radius:2px;background:var(--border2);margin:0 auto 18px;cursor:pointer;padding:8px 0;box-sizing:content-box}
.modal-title{font-size:18px;font-weight:400;color:var(--text);text-align:center;margin-bottom:16px}
.modal-close-btn{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text3);font-size:20px;padding:6px;line-height:1;min-width:36px;min-height:36px}

/* Auth */
.auth-tabs{display:flex;border-bottom:0.5px solid var(--border);margin-bottom:20px}
.auth-tab{flex:1;padding:12px;text-align:center;font-size:14px;cursor:pointer;border:none;background:none;color:var(--text3);border-bottom:2px solid transparent;transition:all 0.2s;font-family:inherit;min-height:48px}
.auth-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.auth-form label{display:block;font-size:10px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:5px;margin-top:14px}
.auth-form input{background:var(--field-bg);border:0.5px solid var(--border2);color:var(--text);border-radius:10px;padding:13px 14px;width:100%;font-size:15px;outline:none;font-family:inherit;min-height:48px}
.auth-form input:focus{border-color:var(--gold)}
.form-err{font-size:12px;color:var(--result-no);margin-top:6px;line-height:1.4}

/* Menu */
.menu-section-title{font-size:9px;color:var(--text4);letter-spacing:2.5px;text-transform:uppercase;margin:20px 0 8px}
.menu-section-title:first-child{margin-top:0}
.theme-toggle{display:flex;background:var(--field-bg);border:0.5px solid var(--border);border-radius:10px;padding:3px;gap:3px}
.theme-opt{flex:1;padding:10px;border-radius:8px;text-align:center;font-size:13px;border:none;background:transparent;color:var(--text3);transition:all 0.2s;font-family:inherit;min-height:44px}
.theme-opt.active{background:var(--gold);color:#111}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lang-btn{padding:10px 12px;border-radius:8px;border:0.5px solid var(--border);background:transparent;color:var(--text2);font-size:13px;cursor:pointer;text-align:left;transition:all 0.2s;font-family:inherit;min-height:44px}
.lang-btn.active{border-color:var(--gold);color:var(--gold);background:var(--gold-bg)}
.menu-user-box{padding:14px 16px;border-radius:10px;border:0.5px solid var(--border);background:var(--field-bg);margin-bottom:12px}
.menu-user-name{font-size:14px;color:var(--text);margin-bottom:2px}
.menu-user-email{font-size:12px;color:var(--text3);margin-bottom:4px}
.menu-user-plan{font-size:12px;color:var(--gold)}

/* iOS guide */
.install-steps{list-style:none;padding:0}
.install-step{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start}
.step-num{width:28px;height:28px;border-radius:50%;background:var(--gold-bg);border:0.5px solid var(--gold-border);color:var(--gold);font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.step-text{font-size:13px;color:var(--text2);line-height:1.55;padding-top:4px}

/* Install icon badge */
.install-icon-badge{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--gold-bg);border:0.5px solid var(--gold-border);flex-shrink:0}

/* Toast */
.popup-toast{position:fixed;bottom:max(28px, env(safe-area-inset-bottom) + 12px);left:50%;transform:translateX(-50%);z-index:500;pointer-events:none;transition:opacity 0.3s;opacity:0}
.popup-toast.visible{opacity:1;pointer-events:auto}
.popup-toast.hidden{display:none}
.popup-toast-inner{background:var(--card-bg);border:0.5px solid var(--border2);border-radius:12px;padding:12px 22px;font-size:13px;color:var(--text);box-shadow:0 8px 32px var(--shell-shadow);white-space:nowrap;letter-spacing:0.3px}

/* Terms screen */
#screen-terms .scrollable{padding:20px 20px 0}
#terms-body{
  font-size:12px;color:var(--text2);line-height:1.85;
  white-space:pre-wrap;
  border:0.5px solid var(--border);border-radius:12px;
  padding:16px;background:var(--card-bg);
  margin-bottom:20px;
  max-height:48vh;overflow-y:auto;
}
.terms-btns{padding-bottom:max(28px, env(safe-area-inset-bottom) + 16px)}

/* ── Utilities ───────────────────────────────────── */
.hidden{display:none!important}
.w-full{width:100%}
.fade-in{animation:fadeIn 0.35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
::-webkit-scrollbar{width:0;height:0}

/* ── Small phone adjustments ─────────────────────── */
@media(max-width:380px){
  .btn-primary{font-size:12px;letter-spacing:1px;padding:15px 18px}
  .app-name{font-size:calc(var(--name-size) * 0.88)}
  .result-word{font-size:44px;letter-spacing:3px}
  .elements-row{gap:6px}
  .el-circle{width:42px;height:42px}
  .timer-val{font-size:30px}
  .form-section{padding:0 14px}
  .awaken-wrap{padding:16px 14px 6px}
}

/* ── Large phone / small tablet ──────────────────── */
@media(min-width:390px) and (max-width:519px){
  .result-word{font-size:58px}
  .elements-row{gap:12px}
}