/* 千问办公 VI：主色亮绿 #36D272，薄荷绿底；千仔 IP 绿 #00C684 */
:root{
  --content-max:720px;
  --desktop-max:1120px;
  --tap-size:44px;
  --bg:#EAF0EC; --card:#FFFFFF; --card-2:#F3F8F4;
  --ink:#101B15; --ink-2:#4B5C53; --ink-3:#5C6E64; --line:#D6E2DA;
  --brand:#36D272; --on-brand:#06301B; --brand-ink:#0A6B3C; --brand-soft:#E3F9EC;
  --title-fill:#0A6B3C; --title-outline:#D7F8E4; --title-shadow:#36D272;
  --qianzai:#00C684;
  --hair:#2A211C;
  --danger:#E0442A; --danger-soft:#FCE3DD; --on-danger:#FFFFFF;
  --gold:#B0801F; --gold-soft:#F7EED6;
  --dt:#1469C9; --dt-soft:#E4EFFB; --on-dt:#FFFFFF;
  --shadow:0 18px 44px -20px rgba(16,27,21,.40);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A120D; --card:#141F18; --card-2:#1B2921;
    --ink:#E6EEE9; --ink-2:#9FB4A8; --ink-3:#91A69A; --line:#26362D;
    --brand:#3FDD86; --on-brand:#042616; --brand-ink:#7FEBB2; --brand-soft:#11301F;
    --title-fill:#7FEBB2; --title-outline:#042616; --title-shadow:#0A6B3C;
    --qianzai:#12D693;
    --hair:#100C09;
    --danger:#FF7B5F; --danger-soft:#3B1B14; --on-danger:#2B0D06;
    --gold:#E0B45A; --gold-soft:#332714;
    --dt:#5AA9F5; --dt-soft:#12283D; --on-dt:#041A2D;
    --shadow:0 18px 44px -20px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --bg:#0A120D; --card:#141F18; --card-2:#1B2921;
  --ink:#E6EEE9; --ink-2:#9FB4A8; --ink-3:#91A69A; --line:#26362D;
  --brand:#3FDD86; --on-brand:#042616; --brand-ink:#7FEBB2; --brand-soft:#11301F;
  --title-fill:#7FEBB2; --title-outline:#042616; --title-shadow:#0A6B3C;
  --qianzai:#12D693;
  --hair:#100C09;
  --danger:#FF7B5F; --danger-soft:#3B1B14; --on-danger:#2B0D06;
  --gold:#E0B45A; --gold-soft:#332714;
  --dt:#5AA9F5; --dt-soft:#12283D; --on-dt:#041A2D;
  --shadow:0 18px 44px -20px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
html,body{width:100%; height:100%; overflow:hidden}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100%; overscroll-behavior:none;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

/* ---- 首次加载反馈：纯 CSS，不增加网络请求 ---- */
.boot-screen{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  padding:24px; background:#0A120D; color:#E6EEE9;
  opacity:1; visibility:visible;
  transition:opacity .24s ease, visibility 0s linear 0s;
}
.boot-screen.is-ready{opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s ease, visibility 0s linear .24s}
.boot-content{width:min(250px,72vw); display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px}
.boot-head{position:relative; width:74px; height:66px; margin-bottom:5px}
.boot-face{
  position:absolute; left:11px; bottom:0; width:52px; height:48px; display:grid; place-items:center;
  border-radius:45% 45% 48% 48%; background:#F2C6A4; color:#2B211A; font-size:18px; font-weight:900;
  box-shadow:inset 0 -4px 0 rgba(130,76,47,.10);
}
.boot-hairs{position:absolute; inset:0; animation:bootBob 1.15s ease-in-out infinite}
.boot-hairs i{position:absolute; bottom:42px; width:7px; height:27px; border-radius:100% 100% 45% 45%; background:#2A211C; transform-origin:50% 100%}
.boot-hairs i:nth-child(1){left:14px; transform:rotate(-27deg)}
.boot-hairs i:nth-child(2){left:28px; height:32px; transform:rotate(-10deg)}
.boot-hairs i:nth-child(3){left:42px; height:34px; transform:rotate(6deg)}
.boot-hairs i:nth-child(4){left:56px; transform:rotate(23deg)}
.boot-content strong{font-size:16px; letter-spacing:.04em}
.boot-content>span{font-size:12px; color:#9FB4A8}
.boot-track{width:100%; height:5px; margin-top:7px; overflow:hidden; border-radius:100px; background:#26362D}
.boot-track i{display:block; width:42%; height:100%; border-radius:inherit; background:#3FDD86; animation:bootProgress 1s cubic-bezier(.45,0,.2,1) infinite}
@keyframes bootBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bootProgress{0%{transform:translateX(-110%)}100%{transform:translateX(340%)}}

.app-shell{
  width:100%; height:100vh; height:100dvh; min-height:100%;
  background:var(--bg); overflow:hidden; position:relative;
  display:flex; flex-direction:column;
}
.navbar{
  flex:0 0 auto; min-height:48px;
  padding-top:calc(10px + env(safe-area-inset-top));
  padding-right:max(16px, env(safe-area-inset-right));
  padding-bottom:10px;
  padding-left:max(16px, env(safe-area-inset-left));
  display:flex; align-items:center; justify-content:space-between;
  background:var(--card); background:color-mix(in srgb, var(--card) 94%, transparent);
  border-bottom:0; z-index:5;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.navback{appearance:none; border:0; background:transparent; font-family:inherit; font-size:13px;
  color:var(--ink-2); cursor:pointer; padding:0 4px; min-height:var(--tap-size); font-weight:600}
.navpad{width:52px}
.navpad-right{flex:0 0 52px}
.navbar .wxtitle{font-size:14px; font-weight:700}

.viewport{
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; background:var(--bg);
  overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:auto;
}
.screen{
  width:min(100%, var(--content-max)); margin:0 auto;
  padding:clamp(14px, 2.5vw, 24px) clamp(18px, 4vw, 34px) calc(30px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:clamp(13px, 2vw, 17px); min-height:100%; background:var(--card);
}
#s-start{padding-top:calc(clamp(14px, 2.5vw, 24px) + env(safe-area-inset-top))}
.screen[hidden]{display:none!important}

@media (min-width:720px){
  .navbar{
    padding-right:max(calc((100vw - var(--content-max)) / 2 + 34px), env(safe-area-inset-right));
    padding-left:max(calc((100vw - var(--content-max)) / 2 + 34px), env(safe-area-inset-left));
  }
}

.eyebrow{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.btn{
  appearance:none; border:0; width:100%; padding:15px 18px; border-radius:14px;
  font-family:inherit; font-size:16px; font-weight:700; letter-spacing:.02em;
  background:var(--brand); color:var(--on-brand); cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.btn:active{transform:scale(.985)}
.btn.login-ready{
  animation:loginReadyHop 1.05s cubic-bezier(.34,1.56,.64,1) 3;
  box-shadow:0 10px 28px rgba(24,199,105,.30);
}
@keyframes loginReadyHop{
  0%,100%{transform:translateY(0) scale(1)}
  38%{transform:translateY(-7px) scale(1.025)}
  62%{transform:translateY(0) scale(.99)}
}
@media (prefers-reduced-motion:reduce){
  .btn.login-ready{animation:none; box-shadow:0 0 0 4px var(--brand-soft)}
}
.btn.ghost{background:transparent; color:var(--ink-2); border:1px solid var(--line); font-weight:600; font-size:14px; padding:12px 16px}
.btn.small{font-size:13.5px; padding:11px 14px; white-space:nowrap; flex:0 0 auto; width:auto}
.btn:focus-visible,.opt:focus-visible,.pickscroll button:focus-visible,.gpill:focus-visible,.parrow:focus-visible,.tab:focus-visible,.doclink:focus-visible,.textlink:focus-visible,.account-btn:focus-visible{
  outline:2.5px solid var(--brand-ink); outline-offset:2px
}
.textlink{
  background:none; border:0; padding:6px; font-family:inherit; font-size:13px; color:var(--ink-3);
  cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}

/* ---- 联合品牌标识 ---- */
.cobrand{
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:#FFFFFF; border:1px solid var(--line); border-radius:12px; padding:9px 14px;
}
.cobrand img.qw{height:19px; width:auto; display:block}
.cobrand img.ait{height:19px; width:auto; display:block}
.cobrand .xmark{font-size:14px; font-weight:700; color:#586A60; line-height:1; padding:0 1px}
.cobrand.mini img.qw{height:15px}
.cobrand.mini img.ait{height:15px}
.cobrand.mini{padding:7px 11px; gap:9px}
.cobrand.mini .xmark{font-size:12px}
.cobrand.top-brand{
  align-self:center; width:max-content; max-width:100%; min-height:42px;
  padding:9px 14px; gap:12px; background:#F7FBF8; border:0; border-radius:14px;
  box-shadow:0 6px 20px rgba(16,27,21,.09);
}
.top-brand .brand-logo{display:block; height:22px; overflow:hidden; line-height:0}
.top-brand .brand-logo img{display:block; max-width:none; width:auto}
.top-brand .qw-logo{width:75px}
.top-brand .qw-logo img.qw{height:25px; transform:translate(-10px,.2px)}
.top-brand .ait-logo{width:103px}
.top-brand .ait-logo img.ait{height:20.5px; transform:translateY(.75px)}
.top-brand .xmark{font-size:14px; padding:0; color:#52665B}

/* ---- 千仔 IP ---- */
.qz{display:flex; align-items:flex-end; gap:9px}
.qz svg{flex:0 0 auto; display:block}
.bubble{
  position:relative; background:var(--brand-soft); border-radius:13px; padding:10px 13px;
  font-size:13px; line-height:1.6; color:var(--brand-ink); flex:1 1 auto;
}
.bubble::after{
  content:""; position:absolute; left:-5px; bottom:11px; width:10px; height:10px;
  background:var(--brand-soft); transform:rotate(45deg);
}
.bubble b{font-weight:700}
.qz-name{font-size:9px; color:var(--ink-3); text-align:center; margin-top:3px; letter-spacing:.04em; white-space:nowrap}
.qz-col{display:flex; flex-direction:column; align-items:center}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
.qz-col.bob svg{animation:bob 2.4s ease-in-out infinite}

/* ---- 钉钉账号 ---- */
.accountrow{display:flex; flex-direction:column}
.auth-account{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; min-height:var(--tap-size); padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--card-2)}
.auth-account[hidden]{display:none}
.auth-state{min-width:0; display:flex; align-items:center; gap:9px}
.auth-avatar{flex:0 0 40px; width:40px; height:40px; overflow:hidden; display:grid; place-items:center; border-radius:50%; border:2px solid color-mix(in srgb,var(--brand) 72%,var(--card)); background:var(--brand-soft); color:var(--brand-ink); font-size:15px; font-weight:850; box-shadow:0 2px 8px rgba(16,27,21,.10)}
.auth-avatar img{width:100%; height:100%; display:block; object-fit:cover}
.auth-copy{min-width:0; display:block}
.auth-copy b{display:block; max-width:10em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:14px; line-height:1.35}
.auth-actions{flex:0 0 auto; display:flex; align-items:center; gap:2px}
.account-btn{appearance:none; min-height:var(--tap-size); border:0; background:transparent; border-radius:9px; padding:0 9px; font-family:inherit; font-size:11.5px; font-weight:750; color:var(--brand-ink); cursor:pointer; white-space:nowrap}
.account-btn.danger{color:var(--danger)}
.account-btn:disabled{opacity:.55; cursor:default}
@media (max-width:359px){
  .auth-account{grid-template-columns:1fr}
  .auth-actions{justify-content:flex-end; border-top:1px solid var(--line); padding-top:2px}
}
/* ---- 头像：固定浅色形象卡，保证深浅色下发际线都看得见 ---- */
.avatar-wrap{display:flex; justify-content:center; position:relative}
.avatar-stage{
  background:linear-gradient(#FBF8F2,#F2ECE1); border:1px solid #E4DCCD; border-radius:18px;
  padding:6px 10px 0; display:flex; justify-content:center; position:relative;
}
.quiz-avatar-profile{display:flex; flex-direction:column; align-items:center}
.quiz-avatar-title{
  position:relative; z-index:1; max-width:calc(100% - 16px); margin-top:-11px; padding:5px 11px;
  border:1px solid color-mix(in srgb,var(--brand) 42%,var(--line)); border-radius:999px;
  background:var(--brand-soft); color:var(--brand-ink); box-shadow:0 3px 10px rgba(10,107,60,.11);
  font-size:12px; line-height:1; font-weight:750; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.avatar-svg{display:block; overflow:hidden}
.shake{animation:shake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translateX(-3px)} 20%,80%{transform:translateX(5px)}
  30%,50%,70%{transform:translateX(-9px)} 40%,60%{transform:translateX(9px)}
}
@media (prefers-reduced-motion: reduce){
  .shake,.qz-col.bob svg,.boot-hairs,.boot-track i{animation:none}
  .boot-screen,.boot-screen.is-ready{transition:none}
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
}

/* ---- 发量计 ---- */
.meter{background:var(--card-2); border:1px solid var(--line); border-radius:14px; padding:11px 13px; display:flex; flex-direction:column; gap:8px}
.meter-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.meter-top .lab{font-size:11px; letter-spacing:.16em; color:var(--ink-3); font-weight:600}
.meter-top .val{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1}
.meter-top .val small{font-size:11px; color:var(--ink-3); font-weight:500; margin-left:3px}
.track{height:10px; border-radius:100px; background:var(--line); overflow:hidden}
.track i{display:block; height:100%; border-radius:100px; background:var(--hair); transition:width .55s cubic-bezier(.34,.9,.4,1), background .3s ease}
.track i.low{background:var(--danger)}
.delta{font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--danger); opacity:0; transition:opacity .3s ease}
.delta.up{color:var(--brand-ink)}
.delta.show{opacity:1}

/* ---- 答题 ---- */
.qhead{display:flex; align-items:center; justify-content:space-between; gap:12px}
.pips{display:flex; gap:5px}
.pips i{width:7px; height:7px; border-radius:50%; background:var(--line); display:block}
.pips i.done{background:var(--brand)}
.pips i.miss{background:var(--danger)}
.pips i.now{background:var(--ink); transform:scale(1.3)}
.lvchip{
  display:inline-block; margin-left:6px; padding:2px 7px; border-radius:6px; letter-spacing:.02em;
  font-size:10px; font-weight:700; text-transform:none; color:var(--brand-ink); background:var(--brand-soft);
}
.lvchip.adv{color:var(--gold); background:var(--gold-soft)}
.scene{background:var(--card-2); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:5px}
.scene .when{font-size:11px; letter-spacing:.13em; color:var(--brand-ink); font-weight:700}
.scene p{margin:0; font-size:14px; line-height:1.65; color:var(--ink-2)}
.qtext{margin:2px 0 -2px; font-size:21px; line-height:1.35; font-weight:700; white-space:nowrap; overflow:hidden}
.qbar{height:3px; border-radius:100px; background:var(--line); overflow:hidden; margin:-4px 0 2px}
.qbar i{display:block; height:100%; background:var(--brand); transition:width .4s ease}
.opts{display:flex; flex-direction:column; gap:9px}
.opt{
  width:100%; text-align:left; display:flex; gap:11px; align-items:flex-start;
  background:var(--card); border:1.5px solid var(--line); border-radius:13px; padding:12px 14px;
  font-family:inherit; font-size:14.5px; line-height:1.6; color:var(--ink); cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.opt:active:not(:disabled){transform:scale(.99)}
.opt .key{
  flex:0 0 auto; width:22px; height:22px; border-radius:7px; background:var(--card-2); border:1px solid var(--line);
  display:grid; place-items:center; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px; font-weight:600; color:var(--ink-3); margin-top:1px;
}
.opt.right{border-color:var(--brand); background:var(--brand-soft)}
.opt.right .key{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.opt.wrong{border-color:var(--danger); background:var(--danger-soft)}
.opt.wrong .key{background:var(--danger); border-color:var(--danger); color:var(--on-danger)}
.opt:disabled{cursor:default; opacity:.72}
.opt.right:disabled,.opt.wrong:disabled{opacity:1}

/* ---- 判定 ---- */
.verdict{display:flex; flex-direction:column; gap:12px}
.verdict-flag{display:flex; align-items:center; gap:9px; font-size:18px; font-weight:700}
.verdict-flag .dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.verdict.good .verdict-flag{color:var(--brand-ink)} .verdict.good .dot{background:var(--brand)}
.verdict.bad .verdict-flag{color:var(--danger)} .verdict.bad .dot{background:var(--danger)}
.know{background:var(--card-2); border:1px solid var(--line); border-radius:13px; padding:13px 14px; display:flex; flex-direction:column; gap:8px}
.know h4{margin:0; font-size:15px; font-weight:700; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.know .badge{font-size:10.5px; letter-spacing:.08em; padding:3px 8px; border-radius:6px; background:var(--brand-soft); color:var(--brand-ink); font-weight:700}
.know .badge.beta,.know .badge.key{background:var(--gold-soft); color:var(--gold)}
.know p{margin:0; font-size:13.5px; line-height:1.7; color:var(--ink-2)}
.know .where{margin:0; font-size:11.5px; color:var(--ink-3); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.doclink{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px;
  padding:11px 13px; border-radius:11px; text-decoration:none;
  background:var(--card); border:1px solid var(--brand); color:var(--brand-ink);
  font-size:13.5px; font-weight:700; transition:background .15s ease;
}
.doclink-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.doclink-action{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.doclink .arr{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-weight:600}
#btnNext{margin-top:auto}

/* ---- 结算 ---- */
.cert{
  border:1.5px solid var(--gold); border-radius:16px; background:var(--card);
  padding:18px 16px 16px; display:flex; flex-direction:column; align-items:center; gap:2px;
  position:relative; overflow:hidden; text-align:center;
}
.cert::before{content:""; position:absolute; inset:6px; border:1px solid var(--gold); border-radius:11px; opacity:.42; pointer-events:none}
.cert .seal{font-size:10px; letter-spacing:.26em; color:var(--gold); font-weight:700; text-transform:uppercase}
.cert .grant{font-size:12.5px; color:var(--ink-2); margin:9px 0 0}
.cert .grant b{font-size:15px; color:var(--ink)}
.cert .title{font-family:"Arial Rounded MT Bold","PingFang SC","Microsoft YaHei",sans-serif; font-weight:700; font-size:32px; margin:2px 0 0; line-height:1.15; letter-spacing:.03em}
.cert .quip{font-size:13px; color:var(--ink-2); margin:7px 0 0; line-height:1.65; max-width:26ch}
.cert-stats{display:flex; width:100%; margin-top:14px; border-top:1px solid var(--line); padding-top:13px}
.cert-stats div{flex:1 1 0; display:flex; flex-direction:column; gap:2px}
.cert-stats div + div{border-left:1px solid var(--line)}
.cert-stats b{font-size:21px; font-variant-numeric:tabular-nums; font-weight:700; line-height:1.1}
.cert-stats span{font-size:10.5px; color:var(--ink-3); letter-spacing:.06em}
.cert-foot{display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); width:100%; justify-content:center}
.cert-foot{flex-wrap:wrap}
.cert-foot .by{font-size:10px; color:var(--ink-3); letter-spacing:.1em; white-space:nowrap}
/* 与 Canvas 奖状一致：裁去源图透明留白，可见高度 15px，乘号两侧各 5px。 */
.cert-foot .cert-brand{--logo-height:15px; flex:none; gap:5px; padding:7px 8px}
.cert-brand .cert-logo{position:relative; display:block; flex:none; height:var(--logo-height); overflow:hidden; line-height:0}
.cert-brand .cert-logo-qw{width:calc(var(--logo-height) * 3.55737705)} /* 217 / 61 */
.cert-brand .cert-logo-ai{width:calc(var(--logo-height) * 4.975)} /* 398 / 80 */
.cert-foot .cert-brand .cert-logo img{position:absolute; display:block; max-width:none; width:auto; transform:none}
.cert-foot .cert-brand img.qw{height:calc(var(--logo-height) * 1.19672131); left:calc(var(--logo-height) * -.52459016); top:calc(var(--logo-height) * -.01639344)} /* 源图 330×73，内容 (32,1,217,61) */
.cert-foot .cert-brand img.ait{height:var(--logo-height); left:calc(var(--logo-height) * -.025); top:0} /* 源图 400×80，内容 (2,0,398,80) */
.cert-foot .cert-brand .xmark{flex:0 0 8px; padding:0; text-align:center}

.rankstrip{display:flex; align-items:center; gap:11px; padding:12px 13px; border-radius:13px; background:var(--brand-soft); border:1px solid transparent}
.rankstrip .no{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:20px; font-weight:600; color:var(--brand-ink); font-variant-numeric:tabular-nums}
.rankstrip .t{flex:1 1 auto; font-size:13px; line-height:1.55; color:var(--brand-ink)}
.rankstrip .t b{display:block; font-size:14px}
.rankstrip.off{background:var(--card-2); border-color:var(--line)}
.rankstrip.off .t{color:var(--ink-2)}

.invite{background:var(--card-2); border:1px solid var(--line); border-radius:13px; padding:13px 14px; display:flex; flex-direction:column; gap:9px}
.invite .row1{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.invite .row1 b{font-size:14px}
.invite .row1 span{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.ladder{display:flex; gap:4px}
.ladder div{flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:10px; color:var(--ink-3); text-align:center; line-height:1.3}
.ladder i{display:block; width:100%; height:6px; border-radius:100px; background:var(--line)}
.ladder div.hit i{background:var(--gold)}
.ladder div.hit{color:var(--gold); font-weight:700}

.learned{display:flex; flex-direction:column; gap:8px}
.learned h3{margin:0; font-size:13px; color:var(--ink-2); font-weight:700}
.learned ol{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.learned li{background:var(--card-2); border:1px solid var(--line); border-radius:11px; overflow:hidden}
.learned a{display:flex; gap:10px; align-items:center; padding:11px 12px; text-decoration:none; color:var(--ink-2); font-size:13px; line-height:1.55; transition:background .15s ease}
.learned .n{flex:0 0 auto; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:11px; font-weight:600; color:var(--brand-ink); background:var(--brand-soft); border-radius:6px; padding:2px 6px}
.learned li.miss .n{color:var(--danger); background:var(--danger-soft)}
.learned .nm{flex:1 1 auto; color:var(--ink); font-weight:700}
.learned .arr{flex:0 0 auto; color:var(--ink-3); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px}
.actions{display:flex; flex-direction:column; gap:9px}
.actions .row{display:flex; gap:9px}
.actions .row .btn{flex:1 1 0}
.foot{font-size:11px; color:var(--ink-3); text-align:center; line-height:1.7; margin:0}

/* ---- 分享面板 ---- */
.sheet-mask{
  position:fixed; inset:0; background:rgba(10,18,13,.5); z-index:20;
  display:flex; align-items:flex-end; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility 0s linear .22s;
}
.sheet-mask.on{opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s}
.sheet-mask[aria-hidden="true"]{opacity:0; visibility:hidden; pointer-events:none}
.sheet{
  width:min(100%, var(--content-max)); margin:0 auto; background:var(--card); border-radius:20px 20px 0 0;
  padding:15px clamp(18px, 4vw, 34px) calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:10px; max-height:92%; overflow-y:auto;
  position:relative; transform:translateY(14px); transition:transform .22s ease;
}
.sheet-mask.on .sheet{transform:translateY(0)}
.sheet h3{margin:0; font-size:16.5px; font-weight:700}
.sheet .lead{margin:-4px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-2)}
.account-sheet{gap:13px}
.account-sheet .account-dialog-note{margin:0; padding:11px 12px; border-radius:12px; background:var(--card-2); color:var(--ink-2); font-size:12.5px; line-height:1.7}
.account-dialog-actions{display:flex; gap:8px}
.account-dialog-actions .btn{flex:1 1 0}
.btn.danger{background:var(--danger); color:var(--on-danger)}
.sheet-close{position:absolute; right:8px; top:7px; width:var(--tap-size); height:var(--tap-size); appearance:none; border:0; background:transparent; font-size:20px; color:var(--ink-3); cursor:pointer; line-height:1; padding:0; display:grid; place-items:center}
.poster{
  display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;
  background:linear-gradient(160deg,#F4FCF7,#E6F7EE); border:1.5px solid var(--brand);
  border-radius:16px; padding:11px 16px 10px;
}
.poster-seal{font-size:9.5px; letter-spacing:.3em; color:var(--brand-ink); font-weight:700}
.poster-stage{background:linear-gradient(#FBF8F2,#F2ECE1); border:1px solid #E4DCCD; border-radius:13px; padding:3px 7px 0; margin-top:4px}
.poster-title{font-family:"Arial Rounded MT Bold","PingFang SC","Microsoft YaHei",sans-serif; font-weight:700; font-size:24px; line-height:1.2; color:#0B3B26; margin-top:4px}
.poster-sub{font-size:12px; color:#3E6B55; font-variant-numeric:tabular-nums}
.poster-hook{margin:5px 0 0; font-size:12.5px; line-height:1.6; color:#14503A; font-weight:600; max-width:24ch}
.poster-foot{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:8px; padding-top:8px; border-top:1px dashed rgba(11,59,38,.22); width:100%}
.qrbox{flex:0 0 auto; display:block; line-height:0; background:#fff; border-radius:6px; padding:3px}
.qrbox svg{display:block}
.saveimg{display:flex; justify-content:center; background:var(--card-2); border:1px solid var(--line); border-radius:14px; padding:10px}
.saveimg img{width:100%; max-width:260px; height:auto; border-radius:10px; display:block}
#btnSaveDownload{display:block; text-align:center; text-decoration:none; line-height:1.4}
.copyrow{display:flex; flex-direction:column; gap:8px}
.socialproof{margin:0; text-align:center; font-size:11.5px; color:var(--ink-3); line-height:1.6}
.sendrow{display:flex; gap:8px}
.sendrow .btn{flex:1 1 0; font-size:15px; padding:14px 10px}
.copybox{
  background:var(--card-2); border:1px dashed var(--line); border-radius:12px; padding:10px 12px;
  font-size:12.5px; line-height:1.7; color:var(--ink-2); white-space:pre-wrap; user-select:all;
}
.reward{
  display:flex; align-items:center; gap:9px; background:var(--brand-soft); border-radius:11px; padding:9px 12px;
  font-size:12px; line-height:1.5; color:var(--brand-ink);
}
.reward b{font-size:15px}
.toast{
  position:fixed; left:50%; top:calc(56px + env(safe-area-inset-top)); z-index:40;
  width:min(calc(100% - 28px), calc(var(--content-max) - 36px));
  background:var(--ink); color:var(--card); border-radius:13px; padding:12px 15px;
  font-size:13.5px; line-height:1.55; font-weight:600; text-align:center;
  opacity:0; transform:translate(-50%,-8px); transition:opacity .2s ease, transform .2s ease; pointer-events:none;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.5);
}
.toast.on{opacity:1; transform:translate(-50%,0)}
.qzrow{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px}
.qzrow .qz{min-width:0; align-items:center}
.qzrow .qz-col{flex:0 0 54px}
.qzrow .bubble{display:flex; align-items:center; min-height:54px}
.qzrow .bubble::after{bottom:50%; margin-bottom:-5px}
.blame{
  align-self:center; min-height:44px; appearance:none; border:1px dashed var(--danger); background:transparent;
  color:var(--danger); border-radius:100px; padding:10px 14px; font-family:inherit;
  font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; line-height:1.2;
}
.blame:disabled{opacity:.62; cursor:default; background:var(--danger-soft)}

/* 微信没有“脚本强制打开好友列表”的接口：给出原生右上角操作提示 */
.wechat-guide{background:transparent; pointer-events:none}
.wechat-guide.on{pointer-events:none}
.wechat-guide .sheet{
  align-self:flex-start; margin-top:calc(14px + env(safe-area-inset-top)); border:1px solid var(--line);
  border-radius:18px; max-width:420px; pointer-events:auto; box-shadow:0 18px 48px -22px rgba(0,0,0,.62);
}
.guide-arrow{align-self:flex-end; margin:-4px 12px -1px 0; color:var(--brand-ink); font-size:27px; line-height:1; transform:rotate(-15deg)}
.guide-steps{margin:0; padding-left:1.35em; color:var(--ink-2); font-size:13.5px; line-height:1.75}
.guide-actions{display:flex; gap:8px}
.guide-actions .btn{flex:1 1 0}

/* ---- 玩法说明 ---- */
.entries{display:flex; align-items:center; justify-content:center; gap:4px; margin-top:-4px}
.entries .sep{color:var(--ink-3); font-size:13px}
.howto{display:flex; flex-direction:column; gap:9px}
/* 头像与气泡共用第一行中心；使者署名独立放在第二行，不参与头像对齐。 */
#qzHowto{display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:center; gap:3px 9px}
#qzHowto .qz-col{display:contents}
#qzHowto .qz-col svg{grid-column:1; grid-row:1; justify-self:center; animation:none}
#qzHowto .qz-name{grid-column:1; grid-row:2; margin-top:0}
#qzHowto .bubble{grid-column:2; grid-row:1; min-width:0}
#qzHowto .bubble::after{bottom:50%; margin-bottom:-5px}
.howstep{display:grid; grid-template-columns:34px 1fr; gap:11px; align-items:start; padding:13px 14px; background:var(--card-2); border:1px solid var(--line); border-radius:13px}
.howstep .num{display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--brand-soft); color:var(--brand-ink); font-size:12px; font-weight:900; font-variant-numeric:tabular-nums}
.howstep h3{margin:0 0 3px; font-size:14px; color:var(--ink); font-weight:800}
.howstep p{margin:0; font-size:12.8px; line-height:1.65; color:var(--ink-2)}
.howstep p b{color:var(--ink)}
.prize-rules{padding:13px 14px; border:1px solid color-mix(in srgb,var(--brand) 42%,var(--line)); border-radius:15px; background:var(--brand-soft)}
.prize-rules-head{display:flex; align-items:center; gap:11px}
.prize-total{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:84px; min-height:50px; padding:4px 9px; border-radius:12px; background:var(--brand); color:var(--on-brand);
  font-family:ui-rounded,"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-weight:900; letter-spacing:.025em; line-height:1; box-shadow:0 5px 14px color-mix(in srgb,var(--brand) 24%,transparent)
}
.prize-total b{font-size:16px; font-variant-numeric:tabular-nums; -webkit-text-stroke:.4px color-mix(in srgb,var(--on-brand) 70%,transparent); paint-order:stroke fill}
.prize-total small{margin-top:4px; font-size:10px; font-weight:900}
.prize-rules h3{margin:0 0 2px; color:var(--ink); font-family:ui-rounded,"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","PingFang SC","Microsoft YaHei",system-ui,sans-serif; font-size:15px; font-weight:900}
.prize-rules-head p,.prize-note{margin:0; color:var(--ink-2); font-size:11.5px; line-height:1.5}
.prize-tiers{list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:10px 0 8px; padding:0}
.prize-tiers li{display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; padding:7px 9px; border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line)); border-radius:10px; background:color-mix(in srgb,var(--card) 84%,transparent)}
.prize-tiers b{min-width:0; color:var(--ink-2); font-size:11.5px; white-space:nowrap}
.prize-tiers strong{color:var(--brand-ink); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap}
.prize-note{text-align:center}
.verline{margin:2px 0 0; text-align:center; font-size:11px; color:var(--ink-3); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

/* ---- 排行榜 ---- */
.tabs{display:flex; gap:6px; background:var(--card-2); padding:4px; border-radius:14px; border:1px solid var(--line)}
.tab{flex:1 1 0; appearance:none; border:0; background:transparent; border-radius:10px; padding:10px 8px; font-family:inherit; font-size:13.5px; font-weight:800; color:var(--ink-3); cursor:pointer; transition:background .16s ease,color .16s ease,box-shadow .16s ease}
.tab[aria-selected="true"]{background:var(--card); color:var(--brand-ink); box-shadow:0 2px 8px rgba(16,27,21,.12)}
.board-scope{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--card-2)}
.scope-tabs{flex:0 0 auto; display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:11px; background:var(--card)}
.scope-tab{appearance:none; border:0; border-radius:8px; padding:7px 10px; background:transparent; color:var(--ink-3); font:800 12px/1 inherit; cursor:pointer; white-space:nowrap}
.scope-tab[aria-selected="true"]{background:var(--brand); color:var(--on-brand); box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 28%,transparent)}
.scope-copy{min-width:0; margin:0; color:var(--ink-3); font-size:11px; line-height:1.55}
.scope-copy b{color:var(--ink-2); font-weight:800}
.myrecord{display:flex; flex-direction:column; gap:12px; padding:14px; border:1px solid var(--brand); border-radius:16px; background:var(--brand-soft); box-shadow:0 8px 22px -18px rgba(10,107,60,.65)}
.myrecord.off{border-color:var(--line); background:var(--card-2)}
.record-head{display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:11px}
.record-avatar{width:52px; height:52px; overflow:hidden; border-radius:50%; display:grid; place-items:center; background:var(--card); border:2px solid color-mix(in srgb,var(--brand) 72%,var(--card)); box-shadow:0 3px 12px rgba(16,27,21,.12)}
.record-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.record-avatar .avatar-svg{width:48px; height:60px; margin-top:9px}
.record-identity{min-width:0; display:flex; flex-direction:column; gap:2px}
.record-identity span{font-size:10.5px; color:var(--ink-3); font-weight:700; letter-spacing:.08em}
.record-identity b{font-size:16px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.record-rank{font-size:11px; color:var(--brand-ink); font-weight:800; white-space:nowrap; padding:6px 8px; border-radius:999px; background:color-mix(in srgb,var(--card) 70%,transparent)}
.record-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); text-align:center}
.record-grid div{display:flex; flex-direction:column; gap:3px; min-width:0}
.record-grid div + div{border-left:1px solid var(--line)}
.record-grid b{font-size:22px; line-height:1.05; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis}
.record-grid span{font-size:10.5px; color:var(--ink-3)}
.record-tagline{margin:0; font-size:12.5px; color:var(--brand-ink); font-weight:800; text-align:center}
.board-panel{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:9px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--card)}
.board-heading{display:flex; align-items:center; gap:11px}
.board-icon{flex:0 0 46px; width:46px; height:46px; display:grid; place-items:center; color:var(--brand-ink); background:var(--brand-soft); border-radius:14px}
.board-icon svg{width:25px; height:25px; display:block}
.board-titlecopy{min-width:0; display:flex; flex-direction:column; gap:2px}
.board-titlecopy h2{margin:0; font-size:clamp(22px,6vw,28px); line-height:1.15; color:var(--ink); letter-spacing:-.02em; text-wrap:pretty}
.board-titlecopy p{margin:0; font-size:12px; color:var(--ink-3); font-weight:650}
.boardnote{font-size:11.5px; color:var(--ink-3); line-height:1.55; margin:0}
.board-list-scroll{flex:1 1 auto; min-height:120px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--line) transparent; padding-right:3px}
.rows{display:flex; flex-direction:column; gap:7px}
.rw{display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px; background:var(--card-2); border:1px solid var(--line)}
.rw.me{background:var(--brand-soft); border-color:var(--brand)}
.rw .pos{flex:0 0 auto; width:26px; text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:14px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums}
.rw.top1 .pos{color:var(--gold)}
.rw .who{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.rw .who b{font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rw .who span{font-size:11px; color:var(--ink-3)}
.rw .num{flex:0 0 auto; text-align:right; display:flex; flex-direction:column; gap:1px}
.rw .num b{font-size:17px; font-variant-numeric:tabular-nums; font-weight:700; line-height:1.1}
.rw .num span{font-size:10px; color:var(--ink-3)}
#s-board{height:100%; min-height:100%; overflow:hidden}
#s-board>.actions{flex:0 0 auto; margin-top:0!important}

/* ---- 开场 ---- */
.hero{width:100%; display:flex; flex-direction:column; align-items:center; text-align:center}
.hero h2{
  width:100%; margin:0; color:var(--title-fill); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:ui-rounded,"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-weight:900; font-size:clamp(26px,7.2vw,34px); letter-spacing:.025em; line-height:1.12;
  -webkit-text-stroke:1px var(--title-outline); paint-order:stroke fill;
  text-shadow:0 3px 0 var(--title-shadow),0 9px 20px rgba(10,107,60,.18);
  transform:none; text-wrap:balance;
}
.hero-title-main{display:block; width:100%}
.hero-prize{
  display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px .22em; max-width:100%;
  padding:7px 14px; border:1px solid color-mix(in srgb,var(--brand) 46%,var(--line)); border-radius:999px;
  background:var(--brand-soft); color:var(--brand-ink); font-size:clamp(15px,4.6vw,20px); line-height:1.2;
  font-family:ui-rounded,"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-weight:900; letter-spacing:.035em; -webkit-text-stroke:.55px var(--title-outline); paint-order:stroke fill;
  text-shadow:0 2px 0 color-mix(in srgb,var(--title-shadow) 72%,transparent),0 6px 12px color-mix(in srgb,var(--brand) 14%,transparent);
}
.hero-prize span,.hero-prize b{white-space:nowrap}
.hero-prize b{font-size:1.06em; font-variant-numeric:tabular-nums}
.participation{
  display:inline-flex; align-items:baseline; justify-content:center; gap:4px; max-width:100%;
  padding:6px 12px; border:1px solid color-mix(in srgb,var(--brand) 38%,var(--line));
  border-radius:999px; background:var(--brand-soft); color:var(--ink-2); font-size:12.5px;
  font-weight:650; line-height:1.35; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.participation b{color:var(--brand-ink); font-size:16px; font-weight:900; line-height:1}
#s-start>.participation{align-self:center; margin-top:auto}
.pickbar{display:flex; align-items:center; gap:6px}
.gspace{flex:1 1 auto}
.gpill{
  appearance:none; border:1px solid var(--line); background:var(--card-2); color:var(--ink-3);
  min-width:44px; border-radius:100px; padding:6px 12px; font-family:inherit;
  font-size:18px; line-height:1; font-weight:700; cursor:pointer;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.gpill[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--on-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 24%,transparent); transform:translateY(-1px) scale(1.04)}
.parrow{
  appearance:none; width:var(--tap-size); height:var(--tap-size); border:1px solid var(--line); background:var(--card-2);
  border-radius:9px; color:var(--ink-2); font-size:16px; line-height:1; cursor:pointer; padding:0;
}
.pickscroll{
  display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
  padding:2px 0 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.pickscroll::-webkit-scrollbar{display:none}
.pickscroll button{
  flex:0 0 74px; scroll-snap-align:start; appearance:none; background:var(--card-2);
  border:1.5px solid var(--line); border-radius:13px; padding:4px 3px 5px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.pickscroll .pv{display:block; width:100%; overflow:hidden; line-height:0}
.pickscroll .vibe{font-size:9.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; color:var(--ink-3); letter-spacing:.02em; white-space:nowrap}
.pickscroll button[aria-pressed="true"] .vibe{color:var(--brand-ink); font-weight:700}
.pickscroll button[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-soft); transform:translateY(-2px)}
.pickscroll svg{width:100%; height:auto; display:block; pointer-events:none}
#startAvatar svg{width:190px; height:auto}
#s-start>.pickscroll button{flex-basis:82px; padding:5px 4px 6px; border-radius:14px}
#s-start>.pickscroll .vibe{font-size:10px}
.notice{font-size:11.5px; color:var(--ink-3); line-height:1.6; margin:0}

/* ---- 输入设备一致性：触屏保持 44px 目标，精细指针才显示 hover ---- */
button,.btn,.doclink,.textlink,.pickscroll button{-webkit-tap-highlight-color:transparent; touch-action:manipulation}
.textlink{min-height:var(--tap-size)}
.gpill,.tab,.doclink{min-height:var(--tap-size)}
.pickscroll{touch-action:pan-x}
.parrow:active,.gpill:active:not(:disabled),.pickscroll button:active:not(:disabled){transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .navback:hover,.textlink:hover{color:var(--brand-ink)}
  .btn:hover{filter:brightness(1.05)}
  .opt:hover:not(:disabled){border-color:var(--brand); background:var(--brand-soft)}
  .doclink:hover,.learned a:hover{background:var(--brand-soft)}
  .blame:hover{background:var(--danger-soft)}
  .parrow:hover{border-color:var(--brand); color:var(--brand-ink)}
  .pickscroll button:hover{border-color:var(--brand)}
}

/* ---- PC 自适应：同一流程，改为宽屏双栏与居中对话框 ---- */
@media (min-width:960px){
  :root{--content-max:var(--desktop-max)}
  .navbar{
    padding-right:max(calc((100vw - var(--desktop-max)) / 2 + 30px), env(safe-area-inset-right));
    padding-left:max(calc((100vw - var(--desktop-max)) / 2 + 30px), env(safe-area-inset-left));
  }
  .viewport{padding:24px clamp(24px,4vw,56px); scrollbar-gutter:stable}
  .screen{
    width:min(100%,var(--desktop-max)); min-height:calc(100dvh - 48px - 48px); height:auto;
    border:1px solid var(--line); border-radius:24px; padding:clamp(24px,3vw,38px);
    box-shadow:var(--shadow); align-content:center;
  }
  #s-start{
    display:grid; grid-template-columns:minmax(300px,.78fr) minmax(480px,1.22fr);
    grid-template-areas:
      "brand pickbar"
      "hero pickscroll"
      "avatar account"
      "avatar primary"
      "avatar entries"
      "participation participation";
    column-gap:clamp(38px,5vw,72px); row-gap:14px;
  }
  #s-start>.top-brand{grid-area:brand; justify-self:center}
  #s-start>.hero{grid-area:hero}
  #s-start>.avatar-wrap{grid-area:avatar; align-self:center}
  #s-start>.pickbar{grid-area:pickbar}
  #s-start>.pickscroll{grid-area:pickscroll; min-width:0}
  #s-start>.accountrow{grid-area:account}
  #s-start>#btnStart{grid-area:primary}
  #s-start>.entries{grid-area:entries}
  #s-start>.participation{grid-area:participation; justify-self:center; align-self:end; margin-top:2px}
  #startAvatar svg{width:224px}
  #s-start>.pickscroll button{flex-basis:88px; padding:6px 5px 7px; border-radius:15px}
  #s-start>.pickscroll .vibe{font-size:10.5px}
  .hero h2{font-size:clamp(42px,4.2vw,58px)}

  #s-quiz{
    display:grid; grid-template-columns:minmax(300px,340px) minmax(0,1fr);
    grid-template-areas:
      "qhead qtext"
      "qbar qtext"
      "avatar scene"
      "avatar opts"
      "meter opts";
    column-gap:clamp(38px,5vw,72px); row-gap:15px;
  }
  #s-quiz>.qhead{grid-area:qhead}
  #s-quiz>.qbar{grid-area:qbar}
  #s-quiz>.avatar-wrap{grid-area:avatar; align-self:center}
  #s-quiz>.meter{grid-area:meter}
  #s-quiz>.qtext{grid-area:qtext; align-self:end; margin:0}
  #s-quiz>.scene{grid-area:scene}
  #s-quiz>.opts{grid-area:opts; align-self:start}

  #s-verdict{
    display:grid; grid-template-columns:minmax(300px,340px) minmax(0,1fr);
    grid-template-areas:"avatar verdict" "avatar next";
    column-gap:clamp(38px,5vw,72px); row-gap:18px;
  }
  #s-verdict>.avatar-wrap{grid-area:avatar; align-self:center}
  #s-verdict>.verdict{grid-area:verdict}
  #s-verdict>#btnNext{grid-area:next; width:min(100%,320px); justify-self:end; margin-top:0}

  #s-result{
    display:grid; grid-template-columns:minmax(340px,.92fr) minmax(420px,1.08fr);
    grid-template-areas:
      "cert proof"
      "cert share"
      "cert save"
      "cert invite"
      "cert rank"
      "learned learned"
      "actions actions"
      "foot foot";
    column-gap:clamp(32px,4vw,58px); row-gap:13px;
  }
  #s-result>.cert{grid-area:cert; align-self:start}
  #s-result>#resultProof{grid-area:proof; align-self:end; text-align:left}
  #s-result>#btnShare{grid-area:share}
  #s-result>#btnSaveResult{grid-area:save}
  #s-result>.invite{grid-area:invite}
  #s-result>.rankstrip{grid-area:rank}
  #s-result>.learned{grid-area:learned; margin-top:8px}
  #s-result>.learned ol{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
  #s-result>.actions{grid-area:actions; width:min(100%,520px); justify-self:end}
  #s-result>.foot{grid-area:foot}

  #s-howto{justify-content:center}
  #s-howto>.qz{width:min(100%,720px); align-self:center}
  #s-howto>.howto{display:grid; width:min(100%,920px); grid-template-columns:repeat(3,minmax(0,1fr))}
  #s-howto>.prize-rules{width:min(100%,920px); align-self:center}
  #s-howto>#btnHowtoBack{width:min(100%,360px); align-self:center; margin-top:8px!important}
  #s-board{width:min(100%,900px); height:100%}

  .sheet-mask{align-items:center; justify-content:center; padding:24px}
  .sheet{
    width:min(680px,calc(100vw - 48px)); max-height:calc(100dvh - 48px);
    border-radius:22px; padding:22px 28px 24px;
    transform:translateY(8px) scale(.985); box-shadow:0 28px 80px -30px rgba(0,0,0,.68);
  }
  .sheet-mask.on .sheet{transform:translateY(0) scale(1)}
  .wechat-guide{align-items:flex-start; justify-content:flex-end}
  .wechat-guide .sheet{margin:0; margin-top:calc(14px + env(safe-area-inset-top)); border-radius:18px}
  .toast{top:24px; width:min(560px,calc(100% - 48px))}
}