:root{
  --bg1:#1e1b4b;--bg2:#312e81;--bg3:#4c1d95;
  --txt:#fff;--dim:rgba(255,255,255,.68);--card:rgba(255,255,255,.09);--line:rgba(255,255,255,.16);
  --pink:#ec4899;--vio:#8b5cf6;--gold:#fcd34d;--good:#22c55e;--bad:#f43f5e;--meh:#94a3b8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg1);color:var(--txt);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
body{background:linear-gradient(180deg,var(--bg1),var(--bg2) 55%,var(--bg3)) fixed}
button{font:inherit;color:inherit;border:0;cursor:pointer}
#app{max-width:480px;margin:0 auto;height:100%;position:relative}
.screen{display:none;height:100%;flex-direction:column;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 14px)}
.screen.on{display:flex}
.hidden{display:none!important}

/* 内置浏览器盖层（微信/企微/飞书）：游戏界面整个不渲染，只留引导 */
html[data-iab] body>*:not(#iabMask){display:none!important}
html:not([data-iab]) #iabMask{display:none}
#iabMask{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 24px) 16px calc(env(safe-area-inset-bottom) + 24px)}
#iabMask .arrow{position:absolute;top:calc(env(safe-area-inset-top) + 10px);right:20px;font-size:40px;line-height:1;
  color:var(--pink);animation:iab-bounce 1.1s ease-in-out infinite}
@keyframes iab-bounce{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-8px)}}
#iabMask .card{width:min(100%,360px);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 20px 20px;text-align:center}
#iabMask h1{margin:0 0 8px;font-size:21px;font-weight:800}
#iabMask h1 em{font-style:normal;background:linear-gradient(135deg,var(--pink),var(--vio));-webkit-background-clip:text;background-clip:text;color:transparent}
#iabMask .why{margin:0 0 16px;font-size:13.5px;line-height:1.75;color:var(--dim)}
#iabMask .why b{color:#fff}
#iabMask .step{display:flex;align-items:center;gap:9px;text-align:left;font-size:14px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin:8px 0}
#iabMask .step i{flex:0 0 22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--pink),var(--vio));
  font-style:normal;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
#iabMask .step b{color:var(--gold)}
#iabMask .url{margin:14px 0 10px;padding:9px 11px;font:12px/1.5 ui-monospace,Menlo,monospace;color:var(--dim);
  background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:9px;word-break:break-all;-webkit-user-select:all;user-select:all}
#iabMask button{width:100%;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--pink),var(--vio));font-size:15px;font-weight:700}
#iabMask button:active{transform:translateY(1px)}
#iabMask .tip{margin:14px 0 0;font-size:12.5px;line-height:1.7;color:var(--dim)}
#iabMask .tip b{color:#fff}
.ghost{background:transparent;color:var(--dim)}

/* 首页 */
#home{overflow-y:auto;gap:14px}
.hero{text-align:center;padding:18px 0 4px}
.logo{font-size:44px;font-weight:900;letter-spacing:.08em;background:linear-gradient(90deg,#fde68a,#f9a8d4,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.slogan{color:var(--dim);font-size:14px}
.nick{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:10px 14px;font-size:14px;color:var(--dim)}
.nick input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-size:16px}
.howto{font-size:13.5px;color:var(--dim);background:var(--card);border-radius:14px;padding:12px 14px}
.howto b{color:#fff}
.go{width:100%;margin-top:6px;padding:18px 0;border:0;border-radius:18px;font-size:20px;font-weight:800;letter-spacing:2px;background:linear-gradient(135deg,var(--pink),var(--vio));box-shadow:0 8px 24px rgba(236,72,153,.3)}
.go:active{transform:scale(.97)}
.go:disabled{opacity:.6}
.gosub{text-align:center;color:var(--dim);font-size:12.5px;margin-top:-4px}
.foot{text-align:center;color:var(--dim);font-size:12px;margin-top:auto;padding-top:10px}

.av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ef4444);display:grid;place-items:center;font-weight:900;font-size:19px;flex:none}

/* 对局 */
#play{gap:8px}
.top{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--dim)}
.top button{font-size:18px;padding:2px 6px}
.boss{display:flex;align-items:center;gap:10px}
.boss.enter{animation:enter .6s ease-out}
.boss.leave{animation:leave 1s ease-in forwards}
@keyframes enter{from{opacity:0;transform:translateX(-30px)}}
@keyframes leave{to{opacity:0;transform:translateX(60px)}}
.bn{font-weight:700;font-size:15px}.bn small{display:block;font-weight:400;font-size:12px;color:var(--dim)}
.mood{height:16px;border-radius:99px;background:rgba(255,255,255,.15);position:relative;overflow:visible}
.mood i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;width:40%;
  background:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e);background-size:250px 100%;transition:width .7s cubic-bezier(.3,1.4,.5,1)}
.mood .float{position:absolute;right:0;top:-6px;font-weight:900;font-size:18px;opacity:0;pointer-events:none}
.mood .float.go{animation:float 1.4s ease-out}
@keyframes float{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-26px)}}
.ml{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim)}

.chat{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:6px 2px 10px;scroll-behavior:smooth}
.bub{border-radius:4px 16px 16px 16px;padding:10px 13px;font-size:15px;max-width:88%;background:#fff;color:#0f172a;animation:pop .25s ease-out;word-break:break-word}
.bub.me{align-self:flex-end;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border-radius:16px 4px 16px 16px}
.bub.me.draft{opacity:.7}
.bub.typing{color:#64748b}
.tag{font-size:11px;color:var(--dim);margin-top:-5px}
.tag.me{align-self:flex-end}
.sys{align-self:center;font-size:12px;color:var(--dim);background:rgba(0,0,0,.18);padding:3px 10px;border-radius:99px}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
.verdict{border-radius:14px;padding:11px 13px;font-size:13.5px;animation:pop .3s ease-out;border:1px solid}
.verdict.good{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.55)}
.verdict.meh{background:rgba(148,163,184,.15);border-color:rgba(148,163,184,.5)}
.verdict.bad{background:rgba(244,63,94,.15);border-color:rgba(244,63,94,.55)}
.verdict .h{display:flex;justify-content:space-between;align-items:baseline}
.verdict .h b{font-size:16px}
.verdict .d{font-weight:900;font-size:19px}
.verdict.good .d{color:#86efac}.verdict.meh .d{color:#cbd5e1}.verdict.bad .d{color:#fda4af}
.verdict .c{margin-top:3px}
.verdict .near{margin-top:6px;font-size:12.5px;color:var(--dim)}
.verdict .better{margin-top:7px;background:rgba(255,255,255,.08);border-radius:10px;padding:8px 10px;font-size:12.5px}
.verdict .better em{font-style:normal;color:var(--gold)}

.dock{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4px}
.timer{font-size:12px;background:rgba(255,255,255,.12);padding:3px 11px;border-radius:99px}
.timer.warn{background:rgba(244,63,94,.35)}
.voice{display:flex;flex-direction:column;align-items:center;gap:6px}
.mic{position:relative;width:78px;height:78px;border-radius:50%;font-size:30px;background:linear-gradient(135deg,var(--pink),var(--vio));
  box-shadow:0 0 0 9px rgba(236,72,153,.16);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mic .ring{position:absolute;inset:-9px;border-radius:50%;border:3px solid rgba(255,255,255,.0);transition:transform .08s}
.mic.rec{background:linear-gradient(135deg,#f43f5e,#ec4899);transform:scale(1.08)}
.mic.rec .ring{border-color:rgba(255,255,255,.55)}
.mic.busy{opacity:.55;animation:breath 1.2s ease-in-out infinite}
.mic:disabled{opacity:.35}
@keyframes breath{50%{opacity:.85}}
.hint{font-size:12px;color:var(--dim);min-height:18px;text-align:center}
.type{display:flex;gap:8px;width:100%}
.type input{flex:1;min-width:0;background:rgba(255,255,255,.12);border:1px solid var(--line);border-radius:12px;padding:11px 12px;color:#fff;font-size:16px;outline:0}
.type .send{background:linear-gradient(135deg,var(--pink),var(--vio));border-radius:12px;padding:0 16px;font-weight:700}
.next{background:#fff;color:#312e81;font-weight:800;border-radius:99px;padding:11px 34px;font-size:16px}
.mode{font-size:12.5px;padding:2px 8px}

/* 结算 */
#result{overflow-y:auto}
.res{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding-top:24px}
.bigemoji{font-size:64px;animation:pop .5s ease-out}
.res h1{margin:0;font-size:24px}
.rsub{color:var(--dim);font-size:14px}
.stars{font-size:32px;letter-spacing:6px}
.stars .off{opacity:.2}
.card{width:100%;text-align:left;background:var(--card);border-radius:14px;padding:12px 14px;font-size:14px}
.card:empty{display:none}
.card .k{font-size:12px;color:var(--dim);margin-bottom:3px}
.card em{font-style:normal;color:var(--gold)}
.btns{display:flex;gap:10px;width:100%}
.btn{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 0;font-weight:700;font-size:15px}
.btn.pri{background:linear-gradient(135deg,var(--pink),var(--vio));border:0}
.wide{width:100%;padding:10px}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 120px);transform:translateX(-50%);background:rgba(15,23,42,.92);color:#fff;
  padding:9px 16px;border-radius:12px;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;max-width:86%;text-align:center;z-index:9}
.toast.on{opacity:1}