/* ============================================================
   钱格测试 视觉系统 v3 —— 复古游戏机 × 摆烂自嘲
   方向：暖纸 + 墨黑 + 珊瑚红 + 芥末金 + 静谧绿。玩具感、毒、可截图。
   ============================================================ */
@font-face{
  font-family:'Smiley Sans';
  src:url('https://cdn.jsdelivr.net/gh/atelier-anchor/smiley-sans@v2.0.1/build/webfont/SmileySans-Oblique.woff2') format('woff2');
  font-display:swap;
}
:root{
  --paper:#F2E9D8; --paper-2:#EADFC9; --paper-card:#FBF6EA;
  --ink:#211C16; --ink-soft:#5A5247;
  --coral:#FF4D2E; --gold:#E8A33D; --teal:#2E7D6B; --line:#211C16;
  --radius:18px; --radius-sm:14px;
  --shadow-hard:5px 5px 0 0 var(--ink);
  --shadow-soft:3px 3px 0 0 var(--ink);
  --display:'Smiley Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --body:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --fs-hero:clamp(40px,13vw,60px); --fs-title:clamp(28px,10vw,42px);
  --fs-scene:25px; --fs-lead:17px; --fs-body:15px; --fs-cap:13px; --fs-tiny:12px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-back:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--body); color:var(--ink); background-color:var(--paper);
  background-image:radial-gradient(var(--paper-2) 1px,transparent 1px),radial-gradient(var(--paper-2) 1px,transparent 1px);
  background-size:22px 22px,22px 22px; background-position:0 0,11px 11px;
  line-height:1.7; -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center; min-height:100vh; overflow-x:hidden;
}
#app{ width:100%; max-width:480px; min-height:100vh; padding:24px 22px 44px; display:flex; flex-direction:column; position:relative; }

/* —— 顶部栏：logo + 音量开关 —— */
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.brand{ font-family:var(--display); font-size:19px; letter-spacing:0; display:flex; align-items:baseline; gap:3px; flex:1; min-width:0; }
.brand .logo-mark{ color:var(--coral); font-weight:900; font-size:26px; display:inline-flex; align-items:baseline; -webkit-text-stroke:.7px var(--coral); letter-spacing:1px; animation:logoBeat 1.04s ease-in-out infinite; }
.brand .logo-mark .dollar{ transform:skewX(-8deg); display:inline-block; }
.brand .logo-name{ color:var(--ink); -webkit-text-stroke:.3px var(--ink); font-size:18px; }
.brand .byline{ font-size:9px; color:var(--paper); background:var(--ink); padding:0 4px; border-radius:5px; letter-spacing:0; margin-left:1px; opacity:.7; flex-shrink:0; }
.sound-toggle{ flex:0 0 auto; width:42px; height:42px; border:2.5px solid var(--ink); border-radius:12px; background:var(--paper-card); font-size:19px; cursor:pointer; box-shadow:var(--shadow-soft); transition:transform .1s var(--ease-back),box-shadow .1s,background .2s; display:flex; align-items:center; justify-content:center; }
@keyframes logoBeat{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.sound-toggle{
  flex:0 0 auto; width:42px; height:42px; border:2.5px solid var(--ink); border-radius:12px;
  background:var(--paper-card); font-size:19px; cursor:pointer; box-shadow:var(--shadow-soft);
  transition:transform .1s var(--ease-back),box-shadow .1s,background .2s;
  display:flex; align-items:center; justify-content:center;
}
.sound-toggle:active{ transform:translate(3px,3px); box-shadow:0 0 0 0 var(--ink); }
.sound-toggle.on{ background:var(--gold); }

/* —— 进度条 → 经验条质感 —— */
.progress{ height:9px; background:var(--paper-2); border:2.5px solid var(--ink); border-radius:999px; overflow:hidden; margin-bottom:22px; }
.progress>i{
  display:block; height:100%; width:0; transition:width .5s var(--ease);
  background:repeating-linear-gradient(45deg,var(--coral) 0 7px,#ff6a4d 7px 14px);
  box-shadow:0 0 8px rgba(255,77,46,.5);
}

/* —— 页面转场 —— */
.screen{ flex:1; display:flex; flex-direction:column; }
.screen.enter{ animation:screenIn .42s var(--ease) both; }
.screen.leaving{ animation:screenOut .26s var(--ease) both; }
@keyframes screenIn{ from{opacity:0; transform:translateY(18px) scale(.99);} to{opacity:1; transform:none;} }
@keyframes screenOut{ from{opacity:1; transform:none;} to{opacity:0; transform:translateY(-14px) scale(.99);} }

/* 错峰揭示 */
.rise{ opacity:0; animation:rise .5s var(--ease) forwards; }
@keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.d1{animation-delay:.04s}.d2{animation-delay:.12s}.d3{animation-delay:.20s}.d4{animation-delay:.28s}.d5{animation-delay:.36s}.d6{animation-delay:.44s}

/* —— 文字层级 —— */
h1.hero{ font-family:var(--display); font-size:var(--fs-hero); line-height:1.02; letter-spacing:1px; margin:14px 0 12px; -webkit-text-stroke:1.2px var(--ink); }
h1.hero em{ color:var(--coral); font-style:normal; -webkit-text-stroke:1.2px var(--coral); }
.subtitle{ color:var(--ink-soft); font-size:var(--fs-body); margin-bottom:26px; }
.q-index{ color:var(--coral); font-family:var(--display); font-size:var(--fs-cap); letter-spacing:2px; }
.q-scene{ font-family:var(--display); font-size:var(--fs-scene); line-height:1.25; margin:6px 0 22px; -webkit-text-stroke:.6px var(--ink); }

/* —— 按钮 —— */
.btn{ font-family:var(--display); font-size:19px; letter-spacing:1px; color:var(--paper); background:var(--ink); border:2.5px solid var(--ink); border-radius:999px; padding:15px 26px; cursor:pointer; box-shadow:var(--shadow-hard); transition:transform .1s var(--ease-back),box-shadow .1s var(--ease); width:100%; }
.btn.coral{ background:var(--coral); border-color:var(--coral); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn:active{ transform:translate(5px,5px); box-shadow:0 0 0 0 var(--ink); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

/* —— 卡片 —— */
.card{ background:var(--paper-card); border:2.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-hard); padding:24px 22px; }

/* —— 滑块（计算题 + 程度题共用）—— */

.slider-value{ font-family:var(--display); font-size:42px; color:var(--coral); text-align:center; margin:4px 0; -webkit-text-stroke:1px var(--coral); }
.slider-value .u{ font-size:18px; color:var(--ink-soft); margin-left:4px; }
.slider-value .lbl{ font-size:30px; }

/* 吐槽小人——在滑条上方 */
.talker{ display:flex; align-items:center; gap:10px; margin:4px 0 14px; min-height:64px; }
.face{ flex:0 0 56px; }
.face-svg{ width:56px; height:56px; filter:drop-shadow(2px 2px 0 var(--ink)); transform-origin:50% 70%; }
/* 不同情绪的待机动画 */
.fm-bob   { animation:bob 2.2s ease-in-out infinite; }
.fm-sway  { animation:sway 1.8s ease-in-out infinite; }      /* 得意：左右晃 */
.fm-droop { animation:droop 2.6s ease-in-out infinite; }     /* 丧：垂头叹气 */
.fm-shake { animation:shake .5s ease-in-out infinite; }      /* 震惊：抖 */
.fm-laugh { animation:laugh .45s ease-in-out infinite; }     /* 笑：上下颤 */
.fm-tilt  { animation:tilt 2.4s ease-in-out infinite; }      /* 无语：歪头 */
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes sway{ 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }
@keyframes droop{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(4px) rotate(-4deg)} }
@keyframes shake{ 0%,100%{transform:translate(0,0)} 25%{transform:translate(-2px,1px)} 75%{transform:translate(2px,-1px)} }
@keyframes laugh{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-3px) scale(1.04)} }
@keyframes tilt{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(8deg)} }
/* 切换瞬间弹一下：做在 .face 父层，与 svg 的情绪动画分层，互不覆盖 */
.face.pop{ animation:pop .34s var(--ease-back); }
@keyframes pop{ 0%{transform:scale(.7) rotate(-8deg)} 55%{transform:scale(1.16) rotate(6deg)} 100%{transform:scale(1)} }
.bubble{ position:relative; flex:1; background:var(--paper-card); color:var(--ink); font-size:14.5px; font-weight:600; line-height:1.4; padding:12px 14px; border-radius:14px; min-height:24px; transition:opacity .15s; border:2px solid var(--ink); }
.bubble::before{ content:''; position:absolute; left:-10px; top:50%; margin-top:-9px; border:9px solid transparent; border-right-color:var(--ink); border-left:0; }
.bubble::after{ content:''; position:absolute; left:-6px; top:50%; margin-top:-9px; border:9px solid transparent; border-right-color:var(--paper-card); border-left:0; }

/* 城市搜索 */
.city-search{ position:relative; margin-bottom:14px; }
.city-search input{ width:100%; font-family:var(--body); font-size:17px; padding:15px 16px; border:2.5px solid var(--ink); border-radius:14px; background:var(--paper-card); color:var(--ink); box-shadow:var(--shadow-soft); outline:none; }
.city-search input:focus{ box-shadow:var(--shadow-hard); }
.city-search input::placeholder{ color:#a89e8a; }
.suggest{ position:absolute; left:0; right:0; top:100%; margin-top:6px; background:var(--paper-card); border:2.5px solid var(--ink); border-radius:14px; box-shadow:var(--shadow-hard); overflow:hidden; z-index:5; max-height:240px; overflow-y:auto; }
.suggest-item{ padding:12px 16px; font-size:15.5px; cursor:pointer; border-bottom:1.5px solid var(--paper-2); }
.suggest-item:last-child{ border-bottom:none; }
.suggest-item:hover,.suggest-item.active{ background:var(--gold); }
.suggest-item .hot{ font-size:11px; color:var(--coral); margin-left:6px; }
.hotcities{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.hotcity{ font-size:13px; padding:7px 14px; border:2px solid var(--ink); border-radius:999px; background:var(--paper-card); cursor:pointer; transition:transform .1s var(--ease-back); }
.hotcity:active{ transform:translate(2px,2px); }
.hotcity.picked{ background:var(--gold); box-shadow:var(--shadow-soft); }
.hotcity.more{ background:var(--ink); color:var(--paper); }
.bubble.swap{ animation:bubbleSwap .25s var(--ease); }
@keyframes bubbleSwap{ from{opacity:.3; transform:translateX(-4px);} to{opacity:1; transform:none;} }

input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px; background:var(--paper-2); border:2px solid var(--ink); margin:6px 0 8px; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:32px; height:32px; border-radius:50%; background:var(--coral); border:2.5px solid var(--ink); cursor:pointer; box-shadow:2px 2px 0 0 var(--ink); transition:transform .08s var(--ease-back); }
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.18); }
input[type=range]::-moz-range-thumb{ width:32px; height:32px; border-radius:50%; background:var(--coral); border:2.5px solid var(--ink); cursor:pointer; }
.scale-ends{ display:flex; justify-content:space-between; font-size:var(--fs-cap); color:var(--ink-soft); margin-bottom:24px; }

/* —— 选项题（ABCD + 可回退）—— */
.option{ width:100%; text-align:left; background:var(--paper-card); border:2.5px solid var(--line); border-radius:var(--radius-sm); padding:15px 16px; margin-bottom:11px; font-size:15.5px; line-height:1.5; cursor:pointer; display:flex; gap:12px; align-items:flex-start; transition:transform .1s var(--ease-back),background .12s,box-shadow .1s; }
.option .tag{ flex:0 0 26px; height:26px; border-radius:8px; background:var(--ink); color:var(--paper); font-family:var(--display); font-size:14px; display:flex; align-items:center; justify-content:center; margin-top:1px; transition:background .15s; }
.option:hover{ background:var(--paper-2); }
.option:active{ transform:translate(3px,3px); }
.option.chosen{ background:var(--gold); box-shadow:var(--shadow-soft); }
.option.chosen .tag{ background:var(--coral); }

/* —— 底部导航 —— */
.navbar{ display:flex; gap:12px; margin-top:auto; padding-top:18px; }
.navbar .btn{ font-size:17px; padding:13px 20px; }
.navbar .btn.back{ flex:0 0 38%; }

/* —— 加载页 —— */
.loading{ text-align:center; padding-top:20vh; }
.loading .spinner{ width:64px; height:64px; margin:0 auto 26px; border:6px solid var(--paper-2); border-top-color:var(--coral); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin{ to{transform:rotate(360deg);} }
.loading .dna{ font-family:var(--display); font-size:22px; min-height:30px; }
.loading .hint{ color:var(--ink-soft); font-size:var(--fs-cap); margin-top:10px; }

/* ============================================================
   结果页 v3 —— 有高低起伏的过关结算
   ============================================================ */
/* 1. 高光区：白底卡片 + 金章 + 大字 + 珊瑚红药丸 */
.hero-rank{ position:relative; background:var(--paper-card); border:3px solid var(--ink); border-radius:20px; padding:20px 20px 24px; text-align:center; box-shadow:var(--shadow-hard); margin-bottom:18px; overflow:hidden; }
.hero-rank::before{ content:'★ ★ ★'; position:absolute; top:9px; left:0; right:0; text-align:center; color:rgba(232,163,61,.5); font-size:13px; letter-spacing:6px; }
.code-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:96px; height:60px; padding:0 16px; border-radius:16px; background:var(--gold); border:3px solid var(--ink); box-shadow:3px 3px 0 0 var(--ink); margin:18px auto 12px; font-family:var(--display); font-size:30px; letter-spacing:5px; color:var(--ink); -webkit-text-stroke:.8px var(--ink); }
.hero-code{ font-family:var(--display); font-size:14px; letter-spacing:2px; color:var(--coral); margin-bottom:6px; -webkit-text-stroke:.4px var(--coral); white-space:nowrap; }
.hero-title{ font-family:var(--display); font-size:46px; color:var(--ink); line-height:1.05; -webkit-text-stroke:1.4px var(--ink); margin-bottom:4px; text-wrap:balance; }
.hero-sub{ display:inline-block; color:var(--paper); background:var(--coral); font-size:13px; padding:2px 12px; border-radius:999px; margin-top:4px; }

/* 2. 金句：珊瑚红底白字 */
.quote{ background:var(--coral); color:#fff; border:2.5px solid var(--ink); border-radius:14px; padding:16px 20px; font-size:15px; text-align:center; margin-bottom:18px; box-shadow:var(--shadow-hard); position:relative; text-wrap:balance; }
.quote::before{ content:'"'; font-family:var(--display); font-size:44px; position:absolute; left:10px; top:-6px; opacity:.35; }

/* 3. 排名条 */
.rank{ background:var(--gold); border:2.5px solid var(--ink); border-radius:14px; padding:13px; text-align:center; box-shadow:var(--shadow-hard); margin-bottom:18px; font-size:14px; }
.rank b{ font-family:var(--display); font-size:28px; color:var(--coral); -webkit-text-stroke:.7px var(--coral); }

/* 4. 收益率对比 + 落差点破 */
.compare{ border:2.5px solid var(--ink); border-radius:18px; overflow:hidden; margin-bottom:8px; box-shadow:var(--shadow-hard); }
.compare-tabs{ display:flex; }
.compare-tab{ flex:1; font-family:var(--display); font-size:14px; padding:11px; text-align:center; background:var(--paper-2); color:var(--ink-soft); border:none; border-bottom:2.5px solid var(--ink); cursor:pointer; }
.compare-tab.active{ background:var(--ink); color:var(--paper); }
.compare-body{ background:var(--paper-card); padding:18px; text-align:center; }
.compare-body .big{ font-family:var(--display); font-size:50px; color:var(--coral); line-height:1.1; -webkit-text-stroke:1px var(--coral); }
.compare-body .big .u{ font-size:18px; color:var(--ink-soft); }
.compare-body .cap{ font-size:12px; color:var(--ink-soft); margin-top:6px; }
.compare-body.flip .big{ animation:numFlip .35s var(--ease); }
@keyframes numFlip{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.gap-hint{ text-align:center; font-size:13px; color:var(--coral); font-family:var(--display); margin:10px 0 4px; }
.compare-note{ font-size:11px; color:var(--ink-soft); text-align:center; margin-bottom:18px; }

/* 5. 四条属性能量条（替代雷达图） */
.bars{ background:var(--paper-card); border:2.5px solid var(--ink); border-radius:14px; padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow-hard); display:flex; flex-direction:column; gap:13px; }
.bar-row{ display:flex; align-items:center; gap:10px; }
.bar-row .bk{ flex:0 0 36px; font-family:var(--display); font-size:15px; color:var(--ink); }
.bar-row .track{ flex:1; height:14px; background:var(--paper-2); border:2px solid var(--ink); border-radius:999px; overflow:hidden; }
.bar-row .track i{ display:block; height:100%; background:repeating-linear-gradient(45deg,var(--coral) 0 6px,#ff6a4d 6px 12px); box-shadow:0 0 6px rgba(255,77,46,.5); }
.bar-row .bv{ flex:0 0 52px; text-align:right; font-size:12px; color:var(--ink-soft); }

/* 6. 剖析三连 */
.insight{ background:var(--paper-card); border:2.5px solid var(--ink); border-radius:14px; padding:15px 18px; margin-bottom:13px; }
.insight .h{ font-family:var(--display); font-size:17px; margin-bottom:5px; display:flex; align-items:center; gap:7px; }
.insight.reading{ border-left:6px solid var(--ink); }
.insight.blind{ border-left:6px solid var(--coral); }
.insight.twist{ border-left:6px solid var(--teal); }
.insight p{ font-size:14px; text-wrap:pretty; }

/* 7. 最佳搭档 */
.match{ background:var(--paper-2); border:2.5px solid var(--ink); border-radius:14px; padding:14px 18px; text-align:center; margin-bottom:18px; }
.match-h{ font-family:var(--display); font-size:14px; color:var(--ink-soft); margin-bottom:6px; }
.match-name{ font-family:var(--display); font-size:24px; color:var(--coral); -webkit-text-stroke:.5px var(--coral); margin-bottom:6px; }
.match-name .match-code{ font-size:13px; color:var(--ink-soft); letter-spacing:3px; -webkit-text-stroke:0; margin-left:4px; vertical-align:middle; }
.match p{ font-size:13.5px; }

/* 8. 行动区 */
.hook{ border-left:4px solid var(--teal); padding:8px 0 8px 14px; color:var(--ink-soft); font-size:13.5px; margin-bottom:18px; }
.act{ display:flex; flex-direction:column; gap:11px; }
.foot-actions{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.tiny{ font-size:11px; color:var(--ink-soft); text-align:center; margin-top:14px; }