/* 冷月阁 · 冰蓝卡通主题 */
:root{
  --bg:#e9f7ff;
  --card:#ffffff;
  --card-2:#f1faff;
  --line:#b9ddf3;
  --text:#123047;
  --dim:#6f93ab;
  --brand:#2fb2f2;
  --brand-deep:#1a80d8;
  --ice:#8fe6ff;
  --ok:#0fae92;
  --warn:#ffa63d;
  --bad:#ff6f8f;
  --radius:20px;
  --board:#e2f3ff;
  --board-line:rgba(38,92,132,.55);
  --cell:min(40px, calc(6.24vw - 2px));
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
html{scrollbar-gutter:stable}
body{
  margin:0;
  color:var(--text);
  font:15px/1.65 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  display:flex;
  justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px 28px;
  background:
    radial-gradient(620px 380px at 8% -6%,#ffffff 0,rgba(255,255,255,0) 62%),
    radial-gradient(700px 460px at 96% 2%,#d6f1ff 0,rgba(214,241,255,0) 58%),
    radial-gradient(900px 620px at 50% 118%,#a9d7fb 0,rgba(169,215,251,0) 60%),
    linear-gradient(180deg,#f2fbff 0,#dff2ff 46%,#c2e2fb 100%);
  background-attachment:fixed;
}

#app{width:100%;max-width:1040px}
.screen{animation:fade .28s cubic-bezier(.2,.9,.3,1.1) both}
.hidden{display:none!important}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

h1{font-size:27px;line-height:1.3;margin:6px 0 10px;font-weight:800;letter-spacing:.01em;color:#0d3552}
h1 .snow{color:var(--brand)}
h2{font-size:16px;margin:0;font-weight:700}
.dim{color:var(--dim);font-size:13px}

/* ---------- 卡片 / 按钮 ---------- */
.card,.start-meta,.home-card,.panel{
  background:var(--card);
  border:2px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 6px 0 rgba(185,221,243,.55),0 16px 30px rgba(38,110,170,.12);
}
.start-meta{padding:14px 16px;color:var(--dim);font-size:14px;margin-bottom:20px}

.btn{
  border:2px solid #fff;border-radius:999px;padding:12px 26px;font:inherit;font-weight:800;
  background:linear-gradient(180deg,#ffffff,#ddf1ff);color:#1c4a6b;cursor:pointer;
  box-shadow:0 4px 0 #b9ddf3,0 8px 16px rgba(40,110,170,.16);
  transition:transform .1s ease,box-shadow .1s ease,filter .1s ease;
}
.btn:hover:not(:disabled){filter:brightness(1.03)}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #b9ddf3,0 3px 8px rgba(40,110,170,.16)}
.btn.primary{
  background:linear-gradient(180deg,#6fdcff,#2aa8ea);color:#fff;
  box-shadow:0 4px 0 #1a80d8,0 10px 22px rgba(42,168,234,.34);
}
.btn.primary:active:not(:disabled){box-shadow:0 1px 0 #1a80d8,0 4px 12px rgba(42,168,234,.3)}
.btn:disabled{opacity:.5;cursor:default;box-shadow:0 4px 0 #cfe3f1}
.btn.block{width:100%}
a.btn{display:inline-block;text-align:center;text-decoration:none}

/* ---------- 开始页 ---------- */
#screen-start{padding-top:7vh;max-width:560px}
.lead{color:#4b7491;margin:0 0 22px;font-size:15px}
/* 首页醒目位置：交流群号 */
.home-group{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 22px;padding:12px 16px;
  border-radius:16px;border:1px solid rgba(47,178,242,.5);
  background:linear-gradient(120deg,rgba(47,178,242,.16),rgba(143,230,255,.28));
  box-shadow:0 8px 22px rgba(26,128,216,.14)}
.hg-label{font-weight:700;color:var(--brand-deep);letter-spacing:.5px}
.hg-code{font-size:22px;letter-spacing:2px;color:#0d3f63;font-family:ui-monospace,Menlo,Consolas,monospace}
.hg-tip{font-size:13px;color:#4b7491}

/* ---------- 对局页 ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;margin-bottom:16px;
  padding:10px 14px;border-radius:16px;
  background:rgba(255,255,255,.72);border:2px solid rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(38,110,170,.1);
}
.progress{font-size:15px;font-weight:800;color:#17405c}
.scorebox{margin-left:auto;display:flex;align-items:baseline;gap:6px}
.scorebox strong{font-size:20px;color:#1a80d8}

/* 对战双方比分条 */
.versus{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
.v-side{
  display:flex;align-items:baseline;gap:6px;min-width:0;
  padding:3px 10px;border-radius:12px;background:rgba(255,255,255,.8);border:1px solid #d9edfa;
}
.v-side.me{border-color:#8acff0;box-shadow:inset 0 0 0 1px rgba(47,178,242,.14)}
.v-side.foe{border-color:#ffcf9e;box-shadow:inset 0 0 0 1px rgba(255,155,61,.14)}
.v-name{font-size:15px;color:#4b7491;font-weight:800;flex:none;
  max-width:150px;white-space:normal;line-height:1.2;text-align:center;
  overflow-wrap:anywhere}
.v-score{font-size:22px;color:#1a80d8;line-height:1}
.v-side.foe .v-score{color:#d97a1c}
/* VS 艺术字 */
.v-vs{
  font-size:clamp(15px,3.4vw,24px);font-weight:900;font-style:italic;line-height:1;
  letter-spacing:.02em;padding:0 3px;
  background:linear-gradient(135deg,#1a80d8 0,#8a5cf6 52%,#f07f1a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.5px rgba(255,255,255,.65);
  transform:skew(-9deg);filter:drop-shadow(0 2px 2px rgba(15,51,80,.28));
}
@keyframes bump{0%{transform:scale(1)}38%{transform:scale(1.3)}100%{transform:scale(1)}}
.v-score.bump{animation:bump .3s cubic-bezier(.2,.9,.3,1.3) both}
@media (max-width:480px){
  .v-name{max-width:40vw;font-size:13px}
  .v-score{font-size:19px}
  .v-side{padding:3px 8px}
  .v-vs{font-size:16px}
}
/* 窄屏：名字和 VS 单独占一行，压缩两侧宽度避免分数被挤出屏幕 */
@media (max-width:560px){
  .topbar{flex-wrap:wrap;row-gap:8px}
  .progress{order:1}
  .timer{order:2;margin-left:auto}
  .versus{order:3;flex:1 1 100%;width:100%;margin-left:0;justify-content:center;gap:6px;min-width:0}
  .v-side{flex:1 1 0;min-width:0;padding:3px 8px;gap:4px}
  .v-name{max-width:100%;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .v-name .ai-face{width:28px;height:28px;vertical-align:-8px;margin-right:4px}
  .v-status{flex:0 0 auto;margin-left:0;font-size:10px;padding:1px 5px}
  .v-score{flex:0 0 auto;font-size:18px;margin-left:auto}
  .v-vs{flex:0 0 auto;font-size:15px;padding:0 2px}
}

/* 揭晓时双方选点标签：只表示「谁选的」，用身份色，避免与 KataGo 答案档位色混淆 */
.pick-tag{
  position:absolute;z-index:6;left:50%;top:50%;
  transform:translate(-50%,-50%) translateY(calc(var(--cell) * -.82));
  font-size:calc(var(--cell)*.28);font-weight:800;line-height:1.3;white-space:nowrap;
  color:#fff;background:#1a80d8;border:1px solid #fff;border-radius:999px;padding:0 6px;
  box-shadow:0 2px 6px rgba(15,51,80,.3);
  animation:tagpop .18s ease both;
}
@keyframes tagpop{from{opacity:0}to{opacity:1}}
.pick-tag.me{background:#0f8f8f}
.pick-tag.foe{background:#c22a68}
.pick-tag.both{background:#455a64}
/* 表情 / 快捷语入口：两个小圆按钮，点击在按钮上方浮出面板 */
.emote-bar{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.emote-entry{width:42px;height:42px;border-radius:50%;border:1px solid #d9edfa;background:#fff;font-size:21px;line-height:1;padding:0;cursor:pointer;
  box-shadow:0 2px 6px rgba(15,51,80,.12);transition:transform .12s ease,box-shadow .12s ease;-webkit-tap-highlight-color:transparent}
.emote-entry:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(15,51,80,.18)}
.emote-entry:active{transform:scale(.88)}
.emote{width:42px;height:42px;border-radius:50%;border:1px solid #d9edfa;background:#fff;font-size:21px;line-height:1;padding:0;cursor:pointer;
  box-shadow:0 2px 6px rgba(15,51,80,.12);transition:transform .12s ease,box-shadow .12s ease;-webkit-tap-highlight-color:transparent}
.emote:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(15,51,80,.18)}
.emote:active{transform:scale(.88)}
.emote.sent{animation:emoteSend .35s ease}
@keyframes emoteSend{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
/* 浮层面板：绝对定位在按钮上方，z-index 高于棋盘、低于对局设置弹层；关闭时不占位 */
.emote-panel{
  position:absolute;z-index:20;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);
  box-sizing:border-box;width:min(288px,calc(100vw - 28px));padding:10px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
  background:rgba(255,255,255,.97);border:1px solid #d9edfa;border-radius:16px;
  box-shadow:0 14px 30px rgba(15,51,80,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.emote-panel[hidden]{display:none}
.emote-panel .emote{width:100%;height:auto;aspect-ratio:1/1;font-size:20px}
.chat-panel{grid-template-columns:repeat(2,minmax(0,1fr));width:min(320px,calc(100vw - 28px))}
.chat-item{
  min-width:0;border:1px solid #d9edfa;background:#f6fbff;color:#22536f;border-radius:10px;
  padding:8px 7px;font-size:13px;font-weight:700;line-height:1.25;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease;-webkit-tap-highlight-color:transparent;
}
.chat-item:hover{background:#eaf6ff}
.chat-item:active{transform:scale(.94)}
.chat-item:focus,.emote:focus,.emote-entry:focus{outline:none}
/* 对弈聊天：历史记录 + 自由输入 */
.chat-panel{display:flex;flex-direction:column;width:min(320px,calc(100vw - 28px))}
.chat-log{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.chat-log:empty{display:none}
.chat-line{display:flex;gap:6px;font-size:12px;line-height:1.4;align-items:baseline}
.chat-line .who{flex:none;font-weight:800;color:#4a7591}
.chat-line .txt{flex:1;color:#22536f;word-break:break-all}
.chat-line.me .who{color:#0f8f8f}
.chat-send{display:flex;gap:6px;margin-bottom:8px}
.chat-send[hidden]{display:none}
.chat-send input{flex:1;min-width:0;border:1px solid #d9edfa;border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;color:#22536f;background:#f6fbff;outline:none}
.chat-send input:focus{border-color:#7fc8e8;background:#fff}
.chat-send button{flex:none;border:1px solid #0f8f8f;background:#0f8f8f;color:#fff;border-radius:10px;padding:8px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.chat-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
/* 通用浮层提示：对手正在复盘等 */
.toast{position:fixed;left:50%;bottom:14%;transform:translate(-50%,10px);max-width:78vw;padding:10px 16px;border-radius:12px;background:rgba(13,59,92,.92);color:#fff;font-size:13px;font-weight:700;line-height:1.5;text-align:center;box-shadow:0 10px 24px rgba(8,38,62,.28);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:95;word-break:break-all}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* 收到表情：右下角弹出、上浮后消失 */
.emote-layer{position:fixed;inset:0;pointer-events:none;z-index:55}
.emote-pop{position:fixed;display:flex;flex-direction:column;align-items:center;gap:3px;animation:emoteUp 2.4s ease-out forwards}
.emote-pop .e{font-size:56px;line-height:1;filter:drop-shadow(0 6px 10px rgba(15,51,80,.25))}
.emote-pop .n{font-size:12px;font-weight:700;color:#4b7491;background:rgba(255,255,255,.9);border:1px solid #e3f0fa;border-radius:999px;padding:1px 8px;white-space:nowrap}
@keyframes emoteUp{0%{opacity:0;transform:translateY(16px) scale(.7)}16%{opacity:1;transform:translateY(0) scale(1.08)}28%{transform:translateY(-5px) scale(1)}100%{opacity:0;transform:translateY(-64px) scale(1)}}
/* 收到快捷语：左下角气泡，避开棋盘中心 */
.chat-pop{position:fixed;max-width:min(58vw,260px);display:flex;align-items:flex-start;gap:2px;
  padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.96);
  border:1px solid #d9edfa;box-shadow:0 8px 20px rgba(15,51,80,.18);
  font-size:14px;line-height:1.35;color:#17405c;
  animation:chatUp 2.8s ease-out forwards}
.chat-pop .who{color:#1a80d8;font-weight:800;white-space:nowrap}
.chat-pop .txt{font-weight:600;word-break:break-word}
@keyframes chatUp{0%{opacity:0;transform:translateY(14px) scale(.9)}12%{opacity:1;transform:translateY(0) scale(1)}82%{opacity:1;transform:translateY(-6px)}100%{opacity:0;transform:translateY(-22px)}}
@media (max-width:480px){
  .emote-entry{width:38px;height:38px;font-size:19px}
  .emote-bar{gap:6px}
  .emote-panel{padding:8px;gap:5px}
  .chat-item{font-size:12px;padding:7px 6px}
}

/* 棋盘上的装饰层不接收点击，避免挡住落子/点到相邻格 */
.mark,.pick-tag,.lastmark,.stone,.ghost{pointer-events:none}

/* 待确认落子：半透明棋子，再点一次才落下（不做缩放动画，避免棋子看起来在跳动） */
.stone.pending{opacity:.62}
.stone.pstone{opacity:.75}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40;display:block}
/* 得分飞行数字：屏幕中心生成，飞向对应分数后跳数 */
.fly-score{
  position:fixed;z-index:45;pointer-events:none;
  transform:translate(-50%,-50%) scale(1);
  font-size:clamp(30px,9vw,48px);font-weight:900;line-height:1;color:#f07f1a;
  text-shadow:0 4px 14px rgba(240,127,26,.5),0 0 2px rgba(255,255,255,.9);
  transition:transform .66s cubic-bezier(.45,.02,.85,.4),opacity .66s ease-in;
  will-change:transform,opacity;
}
.series{min-height:16px;text-align:center;font-size:12px;font-weight:700;color:var(--dim);margin:4px 0 8px}
button:disabled{opacity:.55;cursor:not-allowed}
.left-note{color:#f07f1a;font-weight:700}
.series b{color:var(--brand-deep);font-size:14px}
.series.big{font-size:15px;margin:6px 0 12px}
.series.big b{font-size:18px}
@media (prefers-reduced-motion: reduce){
  .v-score.bump,.pick-tag,.mark{animation:none}
}
.timer{position:relative;width:56px;height:56px;flex:0 0 auto}
.timer svg{width:100%;height:100%;display:block}
.ring-bg{fill:none;stroke:#d6ebfa;stroke-width:5}
.ring-fg{fill:none;stroke:var(--brand);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:175.93;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear,stroke .2s}
#timer-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;color:#17405c}
.timer.danger .ring-fg{stroke:var(--bad)}
.timer.danger #timer-num{color:var(--bad)}
.timer.next .ring-fg{stroke:#2fa96b}
.timer.next #timer-num{color:#1f7a4d}
/* 对弈：隐藏圆形总时间，只保留双方各自的剩余时间 */
.timer.duel{display:none}
@keyframes tpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion: no-preference){
  .timer.danger{animation:tpulse .8s ease-in-out infinite}
}

.stage{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
@media (max-width:900px){
  .stage{grid-template-columns:1fr}
  .panel{order:1}
}

.board-wrap{min-width:0}
.board{
  width:100%;max-width:640px;margin:0 auto;
  aspect-ratio:1/1;
  display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);
  background:
    radial-gradient(300px 200px at 18% 8%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),
    linear-gradient(165deg,#e4f4ff,#c6e1f7);
  border:3px solid #fff;border-radius:18px;
  padding:4%;
  box-shadow:0 8px 0 #b9ddf3,0 22px 40px rgba(38,110,170,.2),inset 0 0 0 2px #cfeaff;
  touch-action:manipulation;
}
.cell{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.cell::before{content:"";position:absolute;left:50%;top:0;width:1px;height:100%;background:var(--board-line)}
.cell::after{content:"";position:absolute;top:50%;left:0;height:1px;width:100%;background:var(--board-line)}
/* 棋盘边缘：去掉最外圈多出的半格线头，让15条线正好收在外框上，像正常棋盘 */
.cell:nth-child(15n+1)::after{left:50%;width:50%}
.cell:nth-child(15n)::after{left:0;width:50%}
.cell:nth-child(-n+15)::before{top:50%;height:50%}
.cell:nth-child(n+211)::before{top:0;height:50%}

/* 棋子与标记按格子百分比尺寸，不依赖 JS 计算的 --cell，避免首次重建时尺寸滞后导致变形 */
/* 绝对定位居中：格子里同时存在提示点/落点标记时，棋子也不会被 flex 挤小或偏移 */
.stone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:92%;aspect-ratio:1/1;height:auto;border-radius:50%;display:block}
.stone.b{background:radial-gradient(circle at 36% 30%,#4b8cbb 0,#0b2b45 58%,#04182a 100%);
  box-shadow:0 0 0 1px rgba(4,24,42,.45),0 3px 7px rgba(10,40,65,.5),
    inset 0 -3px 6px rgba(0,0,0,.5),inset 0 2px 5px rgba(170,215,245,.4)}
.stone.w{background:radial-gradient(circle at 36% 30%,#ffffff 0,#eef7ff 52%,#c2dcee 100%);
  border:1.5px solid #4f8db3;
  box-shadow:0 3px 8px rgba(10,40,65,.4),inset 0 -3px 6px rgba(88,132,164,.45),
    inset 0 2px 4px #ffffff}
.stone.drop{animation:drop .18s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes drop{from{transform:translate(-50%,-50%) translateY(-8px) scale(.7);opacity:.35}
  to{transform:translate(-50%,-50%);opacity:1}}
.cell.picked .stone{box-shadow:0 0 0 3px rgba(15,143,143,.95),0 3px 8px rgba(15,51,80,.3)}
/* 待确认棋子插入后必须隐藏虚线提示点：否则格子里同时有两个 flex 子元素，棋子会被挤小、偏出交叉点 */
.cell.picked .ghost{display:none}
.ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:82%;aspect-ratio:1/1;height:auto;
  border-radius:50%;background:rgba(26,128,216,.28);border:2px dashed rgba(26,128,216,.62);
  opacity:0;transition:opacity .12s}
.cell.empty:hover .ghost{opacity:1}
/* 对弈两步确认：第一次点击显示半透明预落子 */
.cell.confirm .ghost{opacity:1;background:rgba(31,42,51,.78);border-color:rgba(31,42,51,.9)}
.cell.confirm.confirm-w .ghost{background:rgba(255,255,255,.95);border-color:#b9d3e4}
.lastmark{position:absolute;z-index:3;width:calc(var(--cell)*.3);height:calc(var(--cell)*.3);
  border:2px solid #ff5f7a;border-radius:50%;background:rgba(255,255,255,.4)}

/* ---------- 棋盘坐标（A~O / 1~15）与星位、手数 ---------- */
.bc{position:absolute;z-index:6;pointer-events:none;line-height:1;
  font-size:calc(var(--cell)*.3);font-weight:800;color:#4d7a97;
  font-variant-numeric:tabular-nums}
.bc-t{top:0;left:50%;transform:translate(-50%,-50%)}
.bc-b{bottom:0;left:50%;transform:translate(-50%,50%)}
.bc-l{left:0;top:50%;transform:translate(-50%,-50%)}
.bc-r{right:0;top:50%;transform:translate(50%,-50%)}
.starpt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  width:16%;aspect-ratio:1/1;height:auto;border-radius:50%;background:#4d7a97;opacity:.75}
/* 天元（正中）略大一点 */
.cell:nth-child(113) .starpt{width:21%;opacity:.85}
.mvno{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  font-size:calc(var(--cell)*.34);font-weight:800;line-height:1;pointer-events:none;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mv-b .mvno{color:#eef7ff;text-shadow:0 1px 2px rgba(0,0,0,.75)}
.mv-w .mvno{color:#0f3a55;text-shadow:0 1px 1px rgba(255,255,255,.9)}
.mark{position:absolute;z-index:4;width:calc(var(--cell)*.74);height:calc(var(--cell)*.74);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--cell)*.26);font-weight:800;line-height:1;white-space:nowrap;
  border:2px solid currentColor;background:#fff;
  box-shadow:0 2px 5px rgba(15,51,80,.2);
  animation:pop .18s cubic-bezier(.2,.9,.3,1.2) both}
/* 同档位等价点：只显示同色小圆点，不再重复“1选/2选”文字 */
.mark.eq{width:calc(var(--cell)*.34);height:calc(var(--cell)*.34);font-size:0;
  background:currentColor;border:2px solid #fff;box-shadow:0 1px 4px rgba(15,51,80,.28)}
.mark.r1{color:#f07f1a}
.mark.r2{color:#8a5cf6}
.mark.r3{color:#2f9be0}
.mark.r4{color:#2fa96b}
.mark.r5{color:#3f6478;border-color:#b7d4e4}
/* 没选对时的浅银色圆框：不用白色，保证浅底上也看得清 */
.mark.ring{color:#b9c6d3;border:2px solid #d5dfe8;background:rgba(255,255,255,.28);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),0 1px 3px rgba(15,51,80,.18)}
.dbl-banner{position:fixed;left:50%;top:34%;transform:translate(-50%,-50%);z-index:9;
  display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;
  animation:dblIn 2.2s ease-out forwards}
.dbl-banner b{font-size:22px;letter-spacing:2px;color:#fff;
  text-shadow:0 2px 10px rgba(15,51,80,.45);background:linear-gradient(90deg,#f07f1a,#ffb347);
  padding:4px 14px;border-radius:10px}
.dbl-banner span{font-size:34px;font-weight:900;letter-spacing:3px;
  background:linear-gradient(90deg,#ff7a18,#ffd94a,#ff7a18);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 3px 8px rgba(240,127,26,.45))}
@keyframes dblIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
  32%{transform:translate(-50%,-50%) scale(1)}
  78%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(1.02)}
}
@media (prefers-reduced-motion: reduce){.dbl-banner{animation:none}}
@keyframes pop{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}

.board-hint{text-align:center;color:#4b7491;font-size:13px;margin-top:12px;font-weight:600}

/* 轮到谁走的示意棋子（白/黑 + 反光 + 笑脸） */
.turn-stone{display:flex;justify-content:center;margin:8px 0 0}
.ts-body{position:relative;display:block;width:66px;height:66px;border-radius:50%}
.ts-body.b{
  color:#e9f6ff;
  background:radial-gradient(circle at 34% 28%,#5b9cc6 0,#0d3049 55%,#04182a 100%);
  box-shadow:0 4px 10px rgba(10,40,65,.45),inset 0 -4px 8px rgba(0,0,0,.5),inset 0 3px 6px rgba(170,215,245,.45);
}
.ts-body.w{
  color:#1d4c68;
  background:radial-gradient(circle at 34% 28%,#ffffff 0,#eef7ff 50%,#c6ddee 100%);
  border:1.5px solid #4f8db3;
  box-shadow:0 4px 10px rgba(10,40,65,.35),inset 0 -4px 7px rgba(88,132,164,.4),inset 0 2px 5px #fff;
}
/* 高光反光 */
.ts-body::after{
  content:"";position:absolute;left:15%;top:9%;width:42%;height:27%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,0));
  transform:rotate(-20deg);pointer-events:none;
}
.ts-eye{position:absolute;top:31%;width:15%;height:15%;border-radius:50%;background:currentColor}
.ts-eye.l{left:27%}
.ts-eye.r{right:27%}
.ts-mouth{
  position:absolute;left:50%;top:52%;width:34%;height:18%;transform:translateX(-50%);
  border-bottom:3px solid currentColor;border-radius:0 0 60% 60%;
}
@media (max-width:480px){
  .ts-body{width:56px;height:56px}
}

.panel{padding:16px;display:flex;flex-direction:column;gap:12px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.stars{color:var(--warn);letter-spacing:2px;font-size:14px;white-space:nowrap}
.panel-body{font-size:14px;color:var(--text);min-height:120px;max-height:42vh;overflow:auto}
.panel-body p{margin:0 0 10px}
.answer-row{
  display:grid;grid-template-columns:104px 1fr;gap:2px 10px;align-items:center;
  padding:9px 12px;border-radius:14px;background:var(--card-2);
  border:1px solid #d9edfa;margin-bottom:8px;
}
.answer-row .rk{font-weight:800;color:var(--brand-deep);font-size:13px;white-space:nowrap}
.answer-row .dot{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:6px;vertical-align:1px;background:currentColor}
.dot.r1{background:#f07f1a}.dot.r2{background:#8a5cf6}
.dot.r3{background:#2f9be0}.dot.r4{background:#2fa96b}
.dot.r5{background:#ffffff;box-shadow:inset 0 0 0 1px #b7d4e4}
.answer-row .mv{font-family:ui-monospace,Consolas,monospace;font-size:13px;word-break:break-word}
.answer-row .ev{grid-column:2;color:var(--dim);font-size:12px}
.answer-row.mine{outline:2px solid var(--warn);outline-offset:1px}
.verdict{font-weight:800;margin-bottom:10px!important}
.verdict.ok{color:var(--ok)}
.verdict.miss{color:var(--bad)}

/* ---------- 结算页 ---------- */
.final{display:flex;align-items:baseline;gap:12px;margin:4px 0 20px}
.final-score{font-size:44px;font-weight:800;color:var(--brand-deep);line-height:1;
  text-shadow:0 2px 0 #d9edfa}
.review{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}
.review li{
  display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:center;
  background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 14px;
  box-shadow:0 4px 0 rgba(185,221,243,.5);
}
.review .no{font-weight:800;color:var(--dim)}
.review .pick{font-family:ui-monospace,Consolas,monospace}
.review .pts{font-weight:800;color:var(--brand-deep)}
.review .sub{grid-column:2/4;color:var(--dim);font-size:12px}

/* ---------- 多人对战 ---------- */
#screen-home{padding-top:6vh;max-width:780px;margin:0 auto;width:100%}
#screen-room{max-width:560px}
#screen-end{max-width:560px}

.home-card{padding:18px;margin-top:16px;display:flex;flex-direction:column;gap:12px}
.field{display:flex;gap:10px;align-items:center}
.field input{
  flex:1;min-width:0;background:#fff;border:2px solid var(--line);border-radius:14px;
  padding:12px 14px;color:var(--text);font:inherit;font-weight:600;outline:none;
  transition:border-color .12s ease,box-shadow .12s ease;
}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,178,242,.22)}
.field input::placeholder{color:#9dbdcd;font-weight:500}
.rounds-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.round-opt{
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  background:#fff;border:2px solid var(--line);border-radius:16px;padding:14px 6px;
  color:var(--text);font:inherit;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.round-opt strong{font-size:22px;line-height:1.1;color:var(--brand-deep)}
.round-opt span{font-size:12px;color:var(--dim);font-weight:600}
.round-opt.active{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,178,242,.2);background:linear-gradient(180deg,#ffffff,#e9f7ff)}
.round-opt:active{transform:scale(.97)}
.time-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:700;color:#27577d}
.time-pick input{border:2px solid #cfe3fa;border-radius:10px;padding:8px 10px;font:inherit;text-align:center}
.entry-row{display:flex;gap:10px;flex-wrap:wrap}
.entry-row .btn{flex:1;min-width:120px}

.code{
  font:800 29px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.2em;color:var(--brand-deep);
  background:linear-gradient(180deg,#ffffff,#e7f6ff);
  border:2px dashed #9ed6f2;border-radius:16px;
  padding:14px 10px;text-align:center;
  box-shadow:inset 0 2px 8px rgba(38,110,170,.08);
}
.players{display:flex;flex-direction:column;gap:8px}
.bot-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.bot-row .btn{padding:7px 13px;font-size:13px;box-shadow:0 2px 0 #b9ddf3}
.bot-row .dim{font-size:12px}
.player-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--card-2);border:1px solid #d9edfa;border-radius:14px;
  padding:10px 12px;font-size:14px;font-weight:600;
}
.badge{
  font-size:12px;color:var(--brand-deep);background:#fff;border:2px solid #cfe8f7;
  border-radius:999px;padding:2px 10px;white-space:nowrap;font-weight:700;
}
.panel-body .players{margin-top:10px}
.panel-body .player-row{padding:8px 10px;font-size:13px}

/* ---- 双专区主页 ---- */
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;margin-top:16px}
.home-grid .home-card{margin-top:0;gap:8px}
.mode-card{border-radius:20px;background:#fff;border:2px solid #cfe8f7}
.mode-card.vct{background:linear-gradient(180deg,#fff8f3,#fff);border-color:#ffd8c2}
.mode-head{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap}
.mode-head .help-btn{margin-left:auto}
.mode-head h3{margin:0;font-size:20px;color:#1a80d8}
.mode-card.vct .mode-head h3{color:#d97a1c}
.mode-tag{font-size:12px;font-weight:800;color:#fff;background:#2fb2f2;border-radius:999px;padding:3px 10px;white-space:nowrap}
.mode-card.vct .mode-tag{background:#ff8a3d}
.home-name{width:100%;margin-top:6px}
.join-card{width:100%;margin-top:14px;gap:6px}
.home-grid .entry-row .btn{min-width:0}
@media(max-width:720px){.home-grid{grid-template-columns:1fr}}

/* ---- 算杀挑战状态标记 ---- */
.v-status{display:none;margin-left:6px;font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.v-status.ok{display:inline-block;color:#0a7a3d;background:#e6f9ee;border:1px solid #aee7c3}
.v-status.bad{display:inline-block;color:#b3261e;background:#ffeceb;border:1px solid #ffb9b4}
.v-status.ing{display:inline-block;color:#8a6d00;background:#fff8e1;border:1px solid #ffe08a}
.foe-progress{font-size:12px;color:#7a93a8;font-weight:700;margin-top:4px;min-height:14px}
.badge.ok{color:#0a7a3d;background:#e6f9ee;border-color:#aee7c3}
.badge.bad{color:#b3261e;background:#ffeceb;border-color:#ffb9b4}
.badge.away{color:#a15c00;background:#fff4e0;border-color:#ffd28a}
.badge.off{color:#c0392b;background:#fdecea;border-color:#f2b8b5}
.badge.bot{color:#3f6b8f;background:#eef6ff;border-color:#b9d9f2}
.cell.playable{cursor:pointer}
.cell.playable .ghost{opacity:.55}
.cell.playable:hover .ghost{opacity:.95}
.panel-body .vct-line{margin-top:10px;padding:8px 10px;background:#f7fbff;border:1px solid #d9edfa;border-radius:10px;font-size:12px;font-weight:700;color:#27577d;line-height:1.6;word-break:break-all}

/* ---------- 大逃杀 ---------- */
.home-grid .mode-card.br{background:linear-gradient(180deg,#fff6f7,#fff);border-color:#ffc9d2}
.mode-card.br .mode-head h3{color:#d9435a}
.mode-card.br .mode-tag{background:#e65b6f}
.mode-card.br .btn.primary{background:linear-gradient(180deg,#ff93a6,#e84a66);box-shadow:0 4px 0 #c23653,0 10px 22px rgba(232,74,102,.3)}
.mode-card.br .btn.primary:active:not(:disabled){box-shadow:0 1px 0 #c23653,0 4px 12px rgba(232,74,102,.28)}
/* 大逃杀类卡片：与其他模式卡同尺寸，仅优化排版层次与字号 */
.home-grid .mode-card.compact{padding:18px;gap:9px}
.mode-card.compact .mode-head h3{font-size:19px;letter-spacing:.01em}
.mode-card.compact .mode-tag{font-size:11px;padding:2px 9px}
.mode-card.compact .hot-line{display:inline-block;align-self:flex-start;margin:0;font-size:11px;
  font-weight:900;letter-spacing:.02em;color:#c0392b;background:#fff2f3;
  border:1px solid #ffd6db;border-radius:999px;padding:2px 10px}
.mode-card.vct.compact .hot-line{color:#b4660c;background:#fff7ec;border-color:#ffe2bd}
.mode-card.compact p.dim{margin:0;font-size:12.5px;line-height:1.6;color:#7d93a6}
.mode-card.compact .entry-row{gap:8px}
.mode-card.compact .entry-row .btn{padding:11px 14px;font-size:14px}

.topbar.br-mode{flex-wrap:wrap;row-gap:8px}
/* 手机端大逃杀：压缩 HUD 并限制棋盘尺寸，让「血量面板 + 棋盘」在同一屏，不必上下滑动 */
@media (max-width:900px){
  body.br-live{padding-bottom:10px}
  body.br-live .topbar{margin-bottom:8px;padding:8px 10px;gap:8px;row-gap:6px}
  body.br-live .progress{font-size:14px}
  body.br-live .timer{width:44px;height:44px}
  body.br-live #timer-num{font-size:13px}
  body.br-live .br-head{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:5px;margin-top:0}
  body.br-live .br-p{padding:5px 7px 6px;gap:3px}
  body.br-live .br-p .nm{font-size:11.5px}
  body.br-live .br-p .hpv{font-size:13.5px}
  body.br-live .br-p .st{font-size:9.5px}
  body.br-live .board{max-width:min(100%,calc(100dvh - 268px))}
  body.br-live .board-hint{margin-top:6px;font-size:11px;line-height:1.4}
}
.br-head{
  order:5;flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:6px;margin-top:2px;
}
.br-p{
  position:relative;min-width:0;padding:6px 8px 7px;border-radius:10px;text-align:left;
  background:rgba(255,255,255,.9);border:1px solid #d9edfa;box-shadow:0 2px 0 rgba(185,221,243,.5);
  display:flex;flex-direction:column;gap:4px;transition:transform .18s ease,box-shadow .18s ease;
}
.br-p.me{border-color:#8acff0;box-shadow:inset 0 0 0 1px rgba(47,178,242,.16),0 2px 0 rgba(185,221,243,.5)}
.br-p .br-row{display:flex;align-items:center;gap:3px;min-width:0}
.br-p .br-hp{display:flex;align-items:center;gap:5px;min-width:0}
.br-p .nm{
  flex:1 1 auto;min-width:0;font-size:12px;font-weight:800;line-height:1.15;color:#1c4a6b;
  white-space:normal;overflow-wrap:anywhere;
}
.br-p .me-dot{
  display:inline-block;margin-left:3px;padding:0 4px;border-radius:999px;font-style:normal;
  font-size:9px;line-height:13px;color:#fff;background:#2fb2f2;vertical-align:1px;
}
.br-p .hpbar{
  flex:1 1 auto;min-width:0;height:7px;border-radius:99px;background:#dcecf7;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(31,86,124,.14);
}
.br-p .hpfill{
  height:100%;border-radius:99px;background:linear-gradient(90deg,#2fbf63,#8be36a);
  box-shadow:0 0 6px rgba(57,200,107,.45);
  transition:width .38s cubic-bezier(.2,.9,.3,1.1);
}
.br-p .hpfill.low{
  background:linear-gradient(90deg,#ef5350,#ffb347);
  box-shadow:0 0 7px rgba(239,83,80,.5);
}
.br-p .trophy{font-size:9.5px;font-weight:800;color:#a06a12;flex:0 0 auto;white-space:nowrap}
.br-p.me{border-color:#8acff0;background:rgba(240,250,255,.96)}
.br-p.me .nm{color:#0d6f8f}
.br-p .st{font-size:10px;font-weight:700;color:#6f93ab;white-space:nowrap;flex:0 0 auto}
.br-p .hpv{
  font-size:15px;font-weight:900;line-height:1;letter-spacing:.01em;flex:0 0 auto;
  color:#2a7a52;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.br-p .hpv i{font-style:normal;font-size:9px;font-weight:800;margin-left:1px;opacity:.62;vertical-align:1px}
.br-p:has(.hpfill.low) .hpv{color:#d43c3c}
.br-p.dead{background:rgba(250,244,245,.92);border-color:#e6c3c8;opacity:.8}
.br-p.dead .nm{color:#9c7c80}
.br-p.dead .hpfill{background:#b9bfc6}
.br-p .st.ok{color:#149a4e}
.br-p .st.bad{color:#d92d20}
.br-p.dead .st,.br-p.dead .hpv{color:#a44}
/* 受击：卡片抖动，幅度由 --amp 决定（掉血越多抖得越狠） */
.br-p.hit{animation:cardShake .9s cubic-bezier(.36,.07,.19,.97) both}
@keyframes cardShake{
  0%,100%{transform:translate3d(0,0,0)}
  10%{transform:translate3d(calc(var(--amp,3px) * -1),calc(var(--amp,3px) * .35),0) rotate(-.7deg)}
  22%{transform:translate3d(var(--amp,3px),calc(var(--amp,3px) * -.3),0) rotate(.7deg)}
  36%{transform:translate3d(calc(var(--amp,3px) * -.8),calc(var(--amp,3px) * .2),0) rotate(-.5deg)}
  50%{transform:translate3d(calc(var(--amp,3px) * .6),0,0) rotate(.4deg)}
  66%{transform:translate3d(calc(var(--amp,3px) * -.35),0,0) rotate(-.25deg)}
  82%{transform:translate3d(calc(var(--amp,3px) * .18),0,0)}
}
.dmg-float{
  position:absolute;right:8px;top:-4px;pointer-events:none;font-size:19px;font-weight:900;
  color:#ff4d4d;text-shadow:0 2px 6px rgba(15,51,80,.18);animation:dmgUp 1.5s ease-out forwards;
}
@keyframes dmgUp{
  0%{opacity:0;transform:translateY(4px) scale(.7)}
  20%{opacity:1;transform:translateY(-2px) scale(1.15)}
  60%{opacity:1;transform:translateY(-12px) scale(1)}
  100%{opacity:0;transform:translateY(-24px) scale(.95)}
}
#screen-game.br-shake{animation:brShake .68s cubic-bezier(.36,.07,.19,.97) both}
@keyframes brShake{
  10%,90%{transform:translate3d(-1px,0,0)}
  20%,80%{transform:translate3d(2px,0,0)}
  30%,50%,70%{transform:translate3d(-4px,0,0)}
  40%,60%{transform:translate3d(4px,0,0)}
  100%{transform:none}
}
/* 重击（一次掉 10 血以上）：更强抖动 + 全屏闪电 + 红色冲击波 */
#screen-game.br-shake-heavy{animation:brShakeHeavy 1.05s cubic-bezier(.36,.07,.19,.97) both}
@keyframes brShakeHeavy{
  10%,90%{transform:translate3d(-3px,2px,0) rotate(-.25deg)}
  20%,80%{transform:translate3d(5px,-3px,0) rotate(.3deg)}
  30%,50%,70%{transform:translate3d(-9px,4px,0) rotate(-.5deg)}
  40%,60%{transform:translate3d(9px,-4px,0) rotate(.5deg)}
  100%{transform:none}
}
.dmg-float.big{font-size:27px;color:#ff2323;text-shadow:0 0 10px rgba(255,60,60,.75),0 2px 6px rgba(15,51,80,.2)}
.br-lightning{position:fixed;inset:0;z-index:76;pointer-events:none;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,rgba(255,244,190,.32),rgba(255,120,120,.12) 45%,transparent 68%)}
.br-lightning .bolt{position:absolute;top:-12%;width:3px;height:130%;opacity:0;
  background:linear-gradient(180deg,#fff,#a8e6ff 38%,#fff 60%,#bfeaff);
  box-shadow:0 0 16px 4px rgba(150,224,255,.75);animation:boltFlash .95s ease-out both}
.br-lightning .bolt.b1{left:30%;transform:rotate(12deg)}
.br-lightning .bolt.b2{left:68%;transform:rotate(-14deg);animation-delay:.12s}
@keyframes boltFlash{
  0%{opacity:0;transform:scaleY(.25)}
  12%{opacity:1}
  22%{opacity:.15}
  36%{opacity:1}
  55%{opacity:.35}
  100%{opacity:0}
}
.br-lightning .shock{position:absolute;left:50%;top:46%;width:44vmin;height:44vmin;margin:-22vmin 0 0 -22vmin;
  border-radius:50%;border:5px solid rgba(255,96,96,.8);box-shadow:0 0 26px rgba(255,80,80,.6);
  animation:shockOut 1.15s ease-out both}
@keyframes shockOut{0%{transform:scale(.18);opacity:.95}100%{transform:scale(1.7);opacity:0}}

/* 选点昵称标签：半透明底，文字不透明，箭头指向选点 */
.board-wrap{position:relative}
.board-callouts{position:absolute;inset:0;pointer-events:none;z-index:9}
.pickcallout{position:absolute;transform:translate(-50%,-100%);filter:drop-shadow(0 3px 6px rgba(15,51,80,.2))}
.pickcallout.below{transform:translate(-50%,0)}
.pickcallout .names{
  display:flex;flex-direction:column;gap:2px;padding:3px 7px;
  background:rgba(255,255,255,.72);border:1px solid rgba(26,128,216,.55);border-radius:9px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.pickcallout .nmrow{
  display:flex;align-items:center;gap:4px;font-size:11px;font-weight:800;line-height:1.25;
  color:#1b4763;white-space:nowrap;
}
.pickcallout .nmrow.me{color:#0f8f8f}
.rankdot{
  width:13px;height:13px;border-radius:50%;flex:none;background:#0f8f8f;color:#fff;
  font:900 8px/13px "PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  text-align:center;font-style:normal;letter-spacing:0;
}
.rankdot.r0{background:#94a3b8}
.pickcallout .arrow{position:absolute;left:50%;bottom:-16px;width:3px;height:16px;margin-left:-1.5px;background:#12587f;box-shadow:0 0 0 1.5px rgba(255,255,255,.92),0 2px 4px rgba(15,51,80,.35)}
.pickcallout .arrow::after{
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #12587f;
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95));
}
.pickcallout.below .arrow{bottom:auto;top:-16px}
.pickcallout.below .arrow::after{bottom:auto;top:-6px;border-top:none;border-bottom:7px solid #12587f}

/* 大逃杀结算：奖杯与名次 */
.final-score .trophy{font-size:40px;vertical-align:-4px;margin-right:4px}
.review li.br-rank{background:linear-gradient(180deg,#fffdf8,#fff)}
.review li.br-rank.me{border-color:#8acff0;box-shadow:0 4px 0 rgba(185,221,243,.5),inset 0 0 0 1px rgba(47,178,242,.14)}
.review li.br-rank .no{font-size:21px;line-height:1.1}
.review li.br-rank .no.rank1{filter:drop-shadow(0 2px 3px rgba(240,127,26,.35))}
.review li.br-rank .no.rank2{filter:drop-shadow(0 2px 3px rgba(120,130,140,.25))}
.review li.br-rank .no.rank3{filter:drop-shadow(0 2px 3px rgba(190,120,80,.25))}
.review li.br-rank .pts{color:#27577d}

/* 对局设置：悬浮按钮与弹层（桌面/手机通用） */
.audio-fab{position:fixed;right:16px;bottom:20px;top:auto;z-index:60;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(47,178,242,.45);background:rgba(255,255,255,.9);color:#12587f;
  display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1;
  box-shadow:0 6px 16px rgba(20,80,120,.18);cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.audio-fab:active{transform:scale(.94)}
.audio-modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(8,32,52,.42)}
.audio-modal.open{display:flex}
.audio-card{width:min(360px,100%);border-radius:20px;background:#fff;padding:20px 20px 16px;
  border:1px solid rgba(47,178,242,.35);box-shadow:0 22px 50px rgba(8,32,52,.28)}
.audio-card h3{margin:0 0 14px;font-size:18px;color:#0d3f63}
.audio-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;
  border-top:1px dashed rgba(47,178,242,.28)}
.audio-row:first-of-type{border-top:none}
.audio-row .at{font-weight:700;color:#234f6b}
.audio-row .as{font-size:12px;color:#6b8fa6;margin-top:2px}
.audio-sw{position:relative;width:52px;height:30px;border-radius:999px;border:none;cursor:pointer;
  background:#cfe2ee;transition:background .18s;flex:none}
.audio-sw::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(10,40,65,.25);transition:transform .18s}
.audio-sw.on{background:#2fb2f2}
.audio-sw.on::after{transform:translateX(22px)}
.audio-close{width:100%;margin-top:14px;border:none;border-radius:12px;padding:11px;cursor:pointer;
  background:linear-gradient(120deg,#2fb2f2,#8fe6ff);color:#083a5c;font-weight:800;font-size:15px}
.audio-tip{margin-top:10px;font-size:12px;color:#7b97a8;text-align:center}

/* 算杀大逃杀：状态列表 */
.vctbr-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.vctbr-chip{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.85);border:1px solid rgba(47,178,242,.35);font-size:12px;font-weight:700;color:#25536f}
.vctbr-chip .dot{width:8px;height:8px;border-radius:50%;background:#9ec5da}
@keyframes dotPulse{50%{opacity:.3}}
.vctbr-chip.playing .dot{background:#2fb2f2;animation:dotPulse 1.1s ease-in-out infinite}
.vctbr-chip.success .dot{background:#2fa96b}
.vctbr-chip.fail .dot{background:#e05a74}
.vctbr-chip.dead{opacity:.55;text-decoration:line-through}
.vctbr-chip.me{box-shadow:0 0 0 2px rgba(255,166,61,.65)}


/* ---------- 房间准备 / 房主权限 / 大逃杀动效 ---------- */
.player-row .p-main{display:flex;align-items:center;gap:8px;min-width:0}
.player-row .p-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-row .p-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.player-row .ready-tag{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;border:1px solid #cfe8f7;background:#fff;color:#7a93a8;white-space:nowrap}
.player-row .ready-tag.on{color:#0a7a3d;background:#e6f9ee;border-color:#aee7c3}
.player-row .ready-tag.host{color:#8a5a00;background:#fff6dd;border-color:#ffdf9a}
.mini-btn{border:1px solid #cfe8f7;background:#fff;color:#27577d;border-radius:999px;font:inherit;font-size:11px;font-weight:800;padding:3px 9px;cursor:pointer;line-height:1.4;white-space:nowrap}
.mini-btn:hover{background:#eefaff}
.mini-btn.danger{color:#b3261e;border-color:#ffc6c1;background:#fff5f4}
.trophy{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:900;color:#9a6a00;background:linear-gradient(180deg,#fff6cf,#ffe79a);border:1px solid #f0cd6a;border-radius:999px;padding:1px 7px;white-space:nowrap;box-shadow:0 1px 0 #f0cd6a}
.trophy.big{font-size:13px;padding:2px 9px}

/* 全屏鼓励语 */
.hype-layer,.duel-layer{position:fixed;inset:0;z-index:70;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* 鼓励弹幕：透明背景、固定在屏幕顶部，不遮挡棋盘 */
.hype-layer{align-items:flex-start;justify-content:flex-start;height:0}
.hype-danmaku{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 6px);right:0;z-index:80;pointer-events:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:5px 12px;border-radius:999px;background:transparent;
  font-size:clamp(13px,3.1vw,17px);font-weight:800;letter-spacing:.02em;color:#3f6278;
  text-shadow:0 1px 3px rgba(255,255,255,.92),0 0 8px rgba(255,255,255,.8);
  animation:hypeScroll 10.5s linear both;
}
.hype-danmaku.kind-solo{color:#2f7d8f}.hype-danmaku.kind-streak2,.hype-danmaku.kind-streak3{color:#3f6f96}
.hype-danmaku.kind-leader{color:#8a6a1f}
.hype-danmaku.kind-danger{color:#a4455e}
.hype-danmaku.kind-out{color:#6b7a88}
.hype-danmaku .hype-emoji{font-size:1.1em;line-height:1;filter:drop-shadow(0 1px 2px rgba(10,40,65,.18))}
/* 电脑屏幕更宽，同样时长会显得更快，电脑端单独放慢 */
@media(min-width:1024px){.hype-danmaku{animation-duration:16s}}
@keyframes hypeScroll{
  0%{transform:translateX(110vw)}
  100%{transform:translateX(calc(-100vw - 110%))}
}
@keyframes hypePop{from{opacity:0;transform:scale(.62) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes hypeOut{to{opacity:0;transform:translateY(-26px) scale(.94)}}

/* 决赛圈 / 单挑 */
.final-banner{padding:20px 34px;border-radius:12px;text-align:center;color:#fff;font-size:clamp(22px,5vw,38px);font-weight:900;letter-spacing:.08em;background:linear-gradient(135deg,rgba(232,74,102,.96),rgba(122,44,255,.96));box-shadow:0 0 0 3px rgba(255,255,255,.45),0 0 60px rgba(255,80,140,.55);text-shadow:0 2px 0 rgba(0,0,0,.25);animation:zoneIn .55s cubic-bezier(.2,1.4,.4,1) both,zonePulse 1s ease-in-out .55s infinite alternate}
@keyframes zoneIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes zonePulse{from{box-shadow:0 0 0 3px rgba(255,255,255,.45),0 0 40px rgba(255,80,140,.45)}to{box-shadow:0 0 0 5px rgba(255,255,255,.6),0 0 90px rgba(255,80,140,.8)}}
.duel-fx{position:relative;width:min(92vw,560px);height:min(62vh,420px);display:flex;align-items:center;justify-content:center;animation:duelFade 2.6s ease both}
.duel-fx .slash{position:absolute;width:6px;height:0;border-radius:99px;background:linear-gradient(180deg,#fff,#8fe6ff 40%,#2fb2f2);box-shadow:0 0 24px #8fe6ff,0 0 60px rgba(47,178,242,.7)}
.duel-fx .slash.s1{transform:rotate(38deg);animation:slashGrow .45s cubic-bezier(.2,1.3,.4,1) .15s both,slashFlash .5s ease .6s both}
.duel-fx .slash.s2{transform:rotate(-38deg);background:linear-gradient(180deg,#fff,#ffb3c2 40%,#e84a66);box-shadow:0 0 24px #ffb3c2,0 0 60px rgba(232,74,102,.7);animation:slashGrow .45s cubic-bezier(.2,1.3,.4,1) .35s both,slashFlash .5s ease .8s both}
@keyframes slashGrow{from{height:0;opacity:0}to{height:110%;opacity:1}}
@keyframes slashFlash{50%{opacity:.25}to{opacity:1}}
.duel-fx .vs{position:relative;z-index:2;font-size:clamp(62px,15vw,120px);font-weight:900;font-style:italic;color:#fff;letter-spacing:-.04em;text-shadow:0 0 22px #8fe6ff,0 0 60px rgba(47,178,242,.85),0 8px 0 rgba(10,60,100,.35);animation:vsIn .5s cubic-bezier(.2,1.6,.4,1) .55s both}
@keyframes vsIn{from{opacity:0;transform:scale(2.2) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes duelFade{0%,85%{opacity:1}100%{opacity:0}}

/* 强制改名弹窗 */
.modal-mask{position:fixed;inset:0;z-index:90;background:rgba(9,40,64,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.force-rename-card{width:min(440px,94vw);background:#fff;border:2px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 24px 60px rgba(10,60,100,.35);display:flex;flex-direction:column;gap:12px;animation:hypePop .35s cubic-bezier(.2,1.4,.4,1) both}
.force-rename-card h3{margin:0;font-size:18px;color:#0d3552;line-height:1.4}
.force-rename-card input{border:2px solid #cfe8f7;border-radius:12px;padding:11px 13px;font:inherit;font-weight:700;outline:none;background:#f7fcff;color:var(--text)}
.force-rename-card input:focus{border-color:#8acff0;box-shadow:0 0 0 3px rgba(47,178,242,.16)}
@media(max-width:520px){.player-row{flex-wrap:wrap}.player-row .p-actions{width:100%;justify-content:flex-start}}

/* ---------- 意见反馈 / 添加到桌面 ---------- */
.feedback-card{width:min(460px,94vw);background:#fff;border:2px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 24px 60px rgba(10,60,100,.35);display:flex;flex-direction:column;gap:12px;animation:hypePop .3s cubic-bezier(.2,1.4,.4,1) both}
.feedback-card h3{margin:0;font-size:18px;color:#0d3552}
.feedback-card textarea{width:100%;box-sizing:border-box;border:2px solid #cfe8f7;border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;line-height:1.55;resize:vertical;min-height:110px;outline:none;background:#f7fcff;color:var(--text)}
.feedback-card textarea:focus{border-color:#8acff0;box-shadow:0 0 0 3px rgba(47,178,242,.16)}
.feedback-card .fb-count{align-self:flex-end;font-size:12px;color:var(--dim);margin-top:-6px}
.feedback-card .fb-note{margin:0;font-size:12px;line-height:1.65;color:#6b8ba3;white-space:pre-wrap}
/* “添加到桌面”只在手机端出现 */
@media(min-width:721px){#btn-install{display:none!important}}

/* ---------- 大逃杀冠军动效（全服可见，停留 5 秒）---------- */
#champion-layer{position:fixed;inset:0;z-index:85;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.champion-card{
  position:relative;z-index:2;min-width:min(86vw,320px);padding:26px 34px 24px;border-radius:26px;text-align:center;
  background:linear-gradient(160deg,rgba(255,251,232,.98),rgba(255,235,170,.97) 55%,rgba(255,206,92,.97));
  border:3px solid #ffd44d;
  box-shadow:0 0 0 6px rgba(255,255,255,.55),0 0 60px rgba(255,190,40,.75),0 24px 60px rgba(120,80,0,.35),inset 0 0 40px rgba(255,255,255,.6);
  animation:champIn .6s cubic-bezier(.2,1.5,.35,1) both,champGlow 1.15s ease-in-out .6s infinite alternate;
}
.champion-card .champ-trophy{
  font-size:clamp(58px,15vw,86px);line-height:1;
  filter:drop-shadow(0 8px 12px rgba(150,100,0,.35)) drop-shadow(0 0 18px rgba(255,206,70,.9));
  animation:trophyFloat 1.2s ease-in-out infinite alternate;
}
.champ-name{margin-top:10px;font-size:clamp(20px,5vw,28px);font-weight:900;color:#7a4a00;text-shadow:0 2px 0 rgba(255,255,255,.85);word-break:break-all}
.champ-tag{margin-left:6px;font-size:13px;padding:2px 9px;border-radius:999px;background:linear-gradient(180deg,#ffdf7a,#ffb02e);color:#6a3c00;box-shadow:0 1px 0 #e09a00;vertical-align:middle}
.champ-sub{margin-top:6px;font-size:13px;font-weight:800;color:#9a6a10}
.champ-note{margin-top:8px;font-size:12px;font-weight:700;color:#a8791c}
.champ-confetti{position:absolute;top:-16px;width:9px;height:16px;border-radius:2px;opacity:.95;animation:confettiFall linear both}
@keyframes champIn{from{opacity:0;transform:scale(.55) rotate(-5deg)}to{opacity:1;transform:none}}
@keyframes champGlow{
  from{box-shadow:0 0 0 6px rgba(255,255,255,.5),0 0 45px rgba(255,190,40,.6),0 24px 60px rgba(120,80,0,.32),inset 0 0 34px rgba(255,255,255,.55)}
  to{box-shadow:0 0 0 10px rgba(255,255,255,.7),0 0 100px rgba(255,200,50,.95),0 24px 60px rgba(120,80,0,.4),inset 0 0 50px rgba(255,255,255,.75)}
}
@keyframes trophyFloat{from{transform:translateY(0) scale(1)}to{transform:translateY(-8px) scale(1.05)}}
@keyframes confettiFall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(105vh) rotate(560deg)}}
/* 冠军卡片旁的金色光晕 */
.br-p.champion-glow{border-color:#ffc93c;background:linear-gradient(180deg,#fffbeb,#fff0bf);animation:champCardGlow 1.05s ease-in-out infinite alternate}
.champ-badge{position:absolute;top:-14px;right:7px;z-index:3;font-size:11px;font-weight:900;color:#6a3c00;background:linear-gradient(180deg,#ffe58f,#ffc12e);border:1px solid #eaa900;border-radius:999px;padding:1px 8px;box-shadow:0 0 0 2px #fff,0 2px 8px rgba(220,160,0,.4),0 0 14px rgba(255,206,70,.85);white-space:nowrap}
@keyframes champCardGlow{
  from{box-shadow:0 0 0 1px rgba(255,201,60,.6),0 0 12px rgba(255,200,60,.45)}
  to{box-shadow:0 0 0 3px rgba(255,211,92,.9),0 0 26px rgba(255,200,60,.85)}
}

/* ---------- 主页品牌与热门标签 ---------- */
.home-hero{position:relative;margin:0 0 16px;border-radius:20px;overflow:hidden;background:#dcecf8;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 18px 42px rgba(46,120,180,.22),0 2px 0 rgba(255,255,255,.7) inset}
.home-hero picture{display:block}
.home-hero img{display:block;width:100%;height:clamp(148px,26vw,228px);object-fit:cover;object-position:62% 42%;
  filter:saturate(1.06);transform:scale(1.015)}
/* 电脑端：头图整体拉长一些（仍用 cover 裁切，不会拉伸变形） */
@media (min-width:721px){
  .home-hero img{height:clamp(236px,21vw,300px);object-position:62% 46%}
}
.home-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 64%,rgba(186,222,255,.2) 100%),
             linear-gradient(180deg,rgba(10,40,70,0) 62%,rgba(10,40,70,.16) 100%)}
.home-brand{display:flex;align-items:center;justify-content:center;gap:16px;margin:2px 0 12px;text-align:left}
.home-logo{width:64px;height:64px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(47,178,242,.35))}
.home-brand-text{min-width:0}
.home-brand-text h1{margin:0;line-height:1.15;font-size:clamp(23px,4.4vw,34px)}
.home-brand-text .lead{margin:6px 0 0}
.hot-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:900;color:#fff;padding:2px 9px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(135deg,#ff7a18,#ff3d68);box-shadow:0 2px 10px rgba(255,80,60,.4);animation:hotPulse 1.6s ease-in-out infinite}
@keyframes hotPulse{from{transform:scale(1);box-shadow:0 2px 10px rgba(255,80,60,.32)}to{transform:scale(1.07);box-shadow:0 3px 18px rgba(255,80,60,.62)}}
.hot-line{margin:2px 0 0;font-size:12px;font-weight:900;color:#e2452f;letter-spacing:.02em}
@media(max-width:520px){
  .home-brand{gap:11px;justify-content:flex-start}
  .home-logo{width:52px;height:52px}
  .home-brand-text h1{font-size:21px}
  .mode-head{flex-wrap:wrap}
}

/* ---------- 模式帮助按钮与说明弹窗 ---------- */
.help-btn{width:22px;height:22px;flex:0 0 auto;padding:0;border-radius:50%;border:1.5px solid #8acff0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:13px;font-weight:900;line-height:1;
  color:#1b76a8;background:linear-gradient(180deg,#fff,#e6f6ff);box-shadow:0 2px 8px rgba(47,178,242,.22)}
.help-btn:hover{background:#e6f6ff;transform:translateY(-1px)}
.help-btn:active{transform:scale(.92)}
.topbar-title{display:flex;align-items:center;gap:8px;min-width:0}
.topbar-title h2{margin:0}
.help-card{width:min(720px,96vw);max-height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:2px solid var(--line);border-radius:22px;box-shadow:0 24px 70px rgba(10,60,100,.4);
  animation:hypePop .35s cubic-bezier(.2,1.4,.4,1) both}
.help-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;
  background:linear-gradient(135deg,#e9f7ff,#dff0ff);border-bottom:1px solid #d5ecfa;flex:0 0 auto}
.help-head h3{margin:0;font-size:18px;color:#0d3552}
.help-close{width:30px;height:30px;border-radius:50%;border:1px solid #b9e1f6;background:#fff;color:#3d7898;
  font-size:20px;line-height:1;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0}
.help-close:hover{background:#f0faff}
.help-body{padding:18px 22px 24px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  color:#274b64;font-size:13.5px;line-height:1.75}
.help-sec + .help-sec{margin-top:18px;padding-top:16px;border-top:1px dashed #d7ecf8}
.help-sec h4{margin:0 0 8px;font-size:15px;color:#0d3552}
.help-sec ul{margin:0;padding-left:20px}
.help-sec li + li{margin-top:6px}
.help-sec b{color:#0d6fa8}
.help-sec p{margin:6px 0 0}
.help-legend{display:grid;gap:8px;margin:10px 0 12px}
.lg-row{display:flex;align-items:center;gap:9px;background:#f6fbff;border:1px solid #dcefff;border-radius:12px;padding:7px 11px}
.lg-row b{flex:0 0 82px;color:#123e5c;font-size:13px}
.lg-row span{color:#5b7d92;font-size:12.5px;line-height:1.45}
.lg-dot{width:15px;height:15px;border-radius:50%;flex:0 0 auto;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(20,80,120,.16)}
.lg-dot.r1{background:#f07f1a}.lg-dot.r2{background:#8a5cf6}.lg-dot.r3{background:#2f9be0}.lg-dot.r4{background:#2fa96b}.lg-dot.r5{background:#eef3f7;border-color:#cfe0ec;box-shadow:0 0 0 1px rgba(20,80,120,.22)}
.help-example{display:flex;align-items:center;gap:14px;background:#f2faff;border:1px solid #d8eefb;border-radius:14px;padding:12px}
.mini-board{position:relative;width:132px;height:132px;flex:0 0 auto;border-radius:10px;background-color:#e8c98e;
  background-image:linear-gradient(rgba(90,60,20,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(90,60,20,.2) 1px,transparent 1px);
  background-size:14.6px 14.6px;box-shadow:inset 0 0 0 5px #f3ddb3,0 4px 12px rgba(90,60,20,.18)}
.mb-dot{position:absolute;width:15px;height:15px;border-radius:50%;transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.8);box-shadow:0 2px 5px rgba(0,0,0,.28)}
.mb-dot.r1{background:#f07f1a}.mb-dot.r2{background:#8a5cf6}.mb-dot.r3{background:#2f9be0}.mb-dot.r4{background:#2fa96b}.mb-dot.r5{background:#eef3f7}
.help-tip{margin:0;font-size:12.5px;line-height:1.65;color:#4b7491}
.help-table{display:grid;gap:1px;margin-top:8px;border:1px solid #d8ecf8;border-radius:10px;overflow:hidden;background:#d8ecf8}
.ht-row{display:grid;grid-template-columns:1.25fr repeat(4,1fr);background:#fff;padding:7px 9px;font-size:12px;text-align:center;align-items:center;gap:4px}
.ht-row span:first-child{text-align:left;font-weight:800;color:#123e5c}
.ht-head{background:#eaf7ff;font-weight:900;color:#0d5f8f}
.ht-head span{font-weight:900;color:#0d5f8f}
.ht-miss{grid-column:span 4;color:#c0392b;font-weight:900}
@media(max-width:520px){
  .help-body{padding:14px 15px 20px;font-size:13px}
  .help-example{flex-direction:column;align-items:stretch}
  .mini-board{width:100%;height:120px}
  .lg-row b{flex-basis:74px}
  .ht-row{font-size:11px;padding:6px 6px;grid-template-columns:1.1fr repeat(4,1fr)}
}

/* ---------- 对局返回按钮 / 逃跑提示 / 退出确认 ---------- */
#screen-game{position:relative}
#screen-game .topbar{padding-left:58px}
.game-back{position:absolute;left:12px;top:30px;z-index:12;width:40px;height:40px;padding:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#155b83;
  border:1.5px solid rgba(140,205,235,.85);background:rgba(255,255,255,.78);backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(20,80,120,.18)}
.game-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.game-back:hover{background:#fff}
.game-back:active{transform:scale(.92)}
@media(max-width:520px){#screen-game .topbar{padding-left:52px}.game-back{left:9px;top:26px;width:36px;height:36px}}
.fled-banner{margin:-6px 0 12px;padding:9px 14px;border-radius:12px;text-align:center;font-size:13px;font-weight:900;
  color:#8a1f18;background:linear-gradient(180deg,#fff2ef,#ffe0da);border:1.5px solid #ffb3a8;
  box-shadow:0 4px 14px rgba(200,60,40,.12);animation:pop .3s ease both}
.quit-card{width:min(420px,94vw);background:#fff;border:2px solid var(--line);border-radius:22px;padding:22px;
  box-shadow:0 24px 60px rgba(10,60,100,.35);display:flex;flex-direction:column;gap:12px;text-align:center;
  animation:hypePop .32s cubic-bezier(.2,1.4,.4,1) both}
.quit-card h3{margin:0;font-size:18px;color:#0d3552}
.quit-card .entry-row{justify-content:center;margin-top:4px}
#create-msg{white-space:pre-line}

/* ---------- 选点 / VCT 专属冠军奖杯（冰蓝 + 银金，区别于大逃杀）---------- */
.champion-card.duel{
  background:linear-gradient(160deg,rgba(244,252,255,.98),rgba(205,239,255,.97) 55%,rgba(150,211,244,.97));
  border-color:#8fd8ff;
  box-shadow:0 0 0 6px rgba(255,255,255,.6),0 0 60px rgba(80,180,255,.7),0 24px 60px rgba(10,70,110,.35),inset 0 0 40px rgba(255,255,255,.62);
  animation:champIn .6s cubic-bezier(.2,1.5,.35,1) both,duelGlow 1.15s ease-in-out .6s infinite alternate;
}
.champion-card.duel .champ-trophy{font-size:0;filter:drop-shadow(0 8px 12px rgba(20,90,130,.35)) drop-shadow(0 0 20px rgba(143,216,255,.9))}
.duel-cup{display:block;width:clamp(92px,22vw,124px);height:auto;margin:0 auto;animation:trophyFloat 1.25s ease-in-out infinite alternate}
.champ-plate{display:inline-flex;align-items:baseline;gap:8px;margin-top:10px;padding:7px 18px;border-radius:999px;
  background:linear-gradient(180deg,#0e3450,#092436);border:1.5px solid #f0cf85;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(8,40,60,.35)}
.plate-kicker{font-size:11px;font-weight:800;color:#9fd8ff;letter-spacing:.18em}
.plate-name{font-size:clamp(19px,4.6vw,25px);font-weight:900;color:#ffe9a8;text-shadow:0 1px 0 #7a5a10;word-break:break-all}
.plate-score{font-size:12px;font-weight:800;color:#bfe6ff}
.champion-card.duel .champ-sub{color:#2d6d92}
.champion-card.duel .champ-note{color:#4d84a3}
@keyframes duelGlow{
  from{box-shadow:0 0 0 6px rgba(255,255,255,.55),0 0 45px rgba(80,180,255,.55),0 24px 60px rgba(10,70,110,.3),inset 0 0 34px rgba(255,255,255,.55)}
  to{box-shadow:0 0 0 10px rgba(255,255,255,.72),0 0 100px rgba(110,205,255,.95),0 24px 60px rgba(10,70,110,.38),inset 0 0 50px rgba(255,255,255,.75)}
}

/* ---------- 开局等待：绘制棋盘网格 + 流光 + 跳动棋子，避免空白单调 ---------- */
.board-wait{
  position:absolute;left:0;right:0;top:0;aspect-ratio:1/1;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  border-radius:18px;border:3px solid #fff;overflow:hidden;pointer-events:none;
  background-color:#dcefff;
  background-image:
    linear-gradient(to right,rgba(126,178,212,.55) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(126,178,212,.55) 1px,transparent 1px),
    radial-gradient(280px 190px at 18% 8%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    linear-gradient(165deg,#e9f7ff,#cfe8fb);
  background-size:calc(100%/15) calc(100%/15),calc(100%/15) calc(100%/15),100% 100%,100% 100%;
  box-shadow:0 8px 0 #b9ddf3,0 22px 40px rgba(38,110,170,.18);
}
.board-wait.hidden{display:none}
.bw-shine{
  position:absolute;top:-25%;left:-65%;width:42%;height:150%;transform:rotate(14deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
  animation:bwSweep 2.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes bwSweep{0%{left:-65%}60%,100%{left:125%}}
.bw-stones{display:flex;gap:16px;z-index:1}
.bw-stones i{
  display:block;width:20px;height:20px;border-radius:50%;
  box-shadow:0 6px 10px rgba(30,80,120,.18);
  animation:bwBounce 1.05s ease-in-out infinite;
}
.bw-stones i:nth-child(1){background:radial-gradient(circle at 34% 28%,#8b98a3,#26313a)}
.bw-stones i:nth-child(2){background:radial-gradient(circle at 34% 28%,#fff,#d7e5ef);animation-delay:.14s}
.bw-stones i:nth-child(3){background:radial-gradient(circle at 34% 28%,#8b98a3,#26313a);animation-delay:.28s}
@keyframes bwBounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-14px)}}
.bw-text{z-index:1;font-size:13px;font-weight:800;letter-spacing:.08em;color:#5a8dab}

/* ---------- 禁手点：贴纸风卡通 ×，提示黑棋这里不能落子 ---------- */
.ban-x{
  position:absolute;left:50%;top:50%;z-index:5;pointer-events:none;
  width:70%;aspect-ratio:1/1;transform:translate(-50%,-50%) rotate(-6deg);
  filter:drop-shadow(0 2px 2px rgba(190,60,95,.3));
  animation:banPop .2s cubic-bezier(.2,1.3,.4,1) both;
}
.ban-x svg{display:block;width:100%;height:100%}
@keyframes banPop{from{opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}}

/* ---------- 电脑端（大屏）：放大玩家框、昵称与血量，远看更清楚 ---------- */
@media (min-width:1024px){
  .v-side{padding:6px 16px;gap:9px;border-radius:14px}
  .v-name{font-size:18px;max-width:240px}
  .v-score{font-size:28px}
  .v-vs{font-size:26px}
  .br-head{grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:9px}
  .br-p{padding:10px 13px 11px;gap:5px}
  .br-p .nm{font-size:15px}
  .br-p .hpv{font-size:20px}
  .br-p .hpv i{font-size:11px}
  .br-p .hpbar{height:10px}
  .br-p .st{font-size:11.5px}
  .br-p .trophy{font-size:11px}
  .br-p .me-dot{font-size:10px;line-height:15px}
}



/* ---------- 对弈（duel） ---------- */
.duel-set{margin:14px 0 12px}
.duel-set-label{font-size:14px;font-weight:800;color:#27577d;margin-bottom:8px}
#duel-rule{grid-template-columns:repeat(2,1fr)}
#duel-rule .round-opt{padding:10px 14px}
#duel-rule .round-opt strong{font-size:15px}
#duel-rule .round-opt span{font-size:11px}
#duel-rule .round-opt:last-child{grid-column:1/-1}
/* 开局允许落点区域 + 五手候选 */
.cell.zone{background:rgba(47,178,242,.13);box-shadow:inset 0 0 0 1px rgba(47,178,242,.4)}
.stone.cand{opacity:.5;filter:grayscale(.15)}
.cand-no{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  font-size:calc(var(--cell)*.3);font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
.duel-bar{flex-wrap:wrap}
.duel-bar .btn{white-space:nowrap}
.duel-color{display:inline-block;font-size:11px;font-weight:800;line-height:1;
  padding:2px 6px;border-radius:999px;border:1px solid #bcd8ec;vertical-align:middle;margin-left:2px}
.duel-color.b{background:#173a53;color:#fff;border-color:#173a53}
.duel-color.w{background:#fff;color:#173a53}
.duel-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.duel-turn{font-size:13px;font-weight:800;color:#4b7491;margin-right:auto}
.duel-turn.mine{color:#0b7f4f}
.duel-bar .btn{padding:8px 18px;font-size:14px}
.duel-bar .btn.danger{border-color:#ffc3c0;color:#b3261e;background:#fff5f4}
#duel-draw-modal .feedback-card{max-width:340px}

/* ---------- 对弈 AI 复盘 ---------- */
#screen-review{max-width:1180px;margin:0 auto;padding:10px 16px 40px}
.rv-head{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:6px 0 14px}
.rv-head .game-back{position:static;transform:none}
.rv-title{flex:0 1 auto;min-width:160px}
.rv-title h1{margin:0;font-size:22px;color:#0d3b5c}
.rv-title p{margin:2px 0 0;font-size:12px}
.rv-scores{display:flex;gap:10px;flex-wrap:wrap}
.rv-score{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d5e8f6;border-radius:14px;padding:6px 12px;box-shadow:0 4px 12px rgba(38,110,170,.08)}
.rv-score .dot{width:18px;height:18px;border-radius:50%;flex:none}
.rv-score .dot.b{background:radial-gradient(circle at 36% 30%,#4b8cbb 0,#0b2b45 58%,#04182a 100%)}
.rv-score .dot.w{background:radial-gradient(circle at 36% 30%,#fff 0,#eef7ff 52%,#c2dcee 100%);border:1px solid #4f8db3}
.rv-score b{font-size:19px;color:#0d3b5c;font-variant-numeric:tabular-nums}
.rv-score i{font-style:normal;font-size:11px;color:#6b93ad;display:block;line-height:1.1}
.rv-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
@media (max-width:900px){.rv-body{grid-template-columns:1fr}}
.rv-board-wrap{position:relative;min-width:0}
.rv-board-wrap .board{max-width:560px}
.rv-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.rv-controls .btn{padding:8px 14px;font-size:13px}
.rv-controls .btn.on{background:#0f8f8f;border-color:#0f8f8f;color:#fff}
.rv-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(240,249,255,.82);border-radius:18px;z-index:20}
.rv-loading.hidden{display:none}
.rv-loading-card{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border:1px solid #d5e8f6;border-radius:16px;padding:20px 26px;box-shadow:0 12px 30px rgba(38,110,170,.18)}
.rv-spin{width:26px;height:26px;border-radius:50%;border:3px solid #cfe8f8;border-top-color:#0f8f8f;animation:rvspin .8s linear infinite}
@keyframes rvspin{to{transform:rotate(360deg)}}
.rv-loading-card b{font-size:14px;color:#0d3b5c}
.rv-bar{width:190px;height:8px;border-radius:999px;background:#e4f1fa;overflow:hidden}
.rv-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#3fc1a0,#0f8f8f);transition:width .25s}
.rv-panel{background:#fff;border:1px solid #d5e8f6;border-radius:16px;box-shadow:0 6px 18px rgba(38,110,170,.08);overflow:hidden}
.rv-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 10px 8px;border-bottom:1px solid #e6f1f9}
.rv-tabs button{border:1px solid #cfe3f2;background:#f6fbff;color:#3c6a88;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer}
.rv-tabs button.on{background:#0f8f8f;border-color:#0f8f8f;color:#fff}
.rv-list{list-style:none;margin:0;padding:4px 0;max-height:min(62vh,560px);overflow-y:auto;overscroll-behavior:contain}
.rv-row{display:grid;grid-template-columns:34px 18px 1fr auto auto;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;border-left:3px solid transparent}
.rv-row:hover{background:#f4fbff}
.rv-row.cur{background:#eaf7ff;border-left-color:#0f8f8f}
.rv-no{font-size:12px;color:#7b9bb2;font-variant-numeric:tabular-nums;text-align:right}
.rv-row .dot{width:14px;height:14px;border-radius:50%}
.rv-row .dot.b{background:#173a53}
.rv-row .dot.w{background:#fff;border:1px solid #4f8db3}
.rv-row .who{font-size:12px;color:#3c6a88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-row .coord{font-size:12px;font-weight:800;color:#0d3b5c;font-variant-numeric:tabular-nums}
.rv-badge{min-width:26px;height:22px;padding:0 6px;border-radius:999px;color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.rv-badge.best{background:#16a34a}
.rv-badge.mid{background:#9aa7b4}
.rv-badge.bad{background:#f59e0b}
.rv-badge.blunder{background:#ef4444}
.rv-loss{font-size:11px;color:#93aec2;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}

/* 棋盘点位标记：不画圈，只在棋子右上角打一个彩色标签 */
.gmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:86%;aspect-ratio:1/1;height:auto;border-radius:50%;pointer-events:none;box-sizing:border-box}
.gmark::after{position:absolute;top:-9%;right:-9%;min-width:42%;height:42%;padding:0 2px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cell,.2px)*.18);font-weight:900;line-height:1;color:#fff;box-shadow:0 0 0 1.5px #fff,0 2px 4px rgba(0,0,0,.3)}
.g-best::after{content:"★";background:#16a34a;border-radius:50%}
.g-book::after{content:"谱";background:#d4a017}
.g-mid::after{content:"中";background:#9aa7b4}
.g-bad::after{content:"差";background:#f59e0b}
.g-blunder::after{content:"错";background:#ef4444}
/* 显示正确答案时才画虚线圈 */
.gmark.answer{border:1.5px dashed #16a34a;animation:rvpulse 1.1s ease-in-out infinite}
@keyframes rvpulse{0%,100%{opacity:1}50%{opacity:.55}}
.cell.rv-cur{background:rgba(15,143,143,.14);box-shadow:inset 0 0 0 2px rgba(15,143,143,.55)}
@media (max-width:520px){
  .rv-row{grid-template-columns:28px 14px 1fr auto;gap:6px;padding:6px 9px}
  .rv-row .loss{display:none}
  .rv-list{max-height:44vh}
  .rv-controls .btn{padding:7px 11px;font-size:12px}
}

/* ---------- AI 挑战馆 ---------- */
.hall-entry{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;
  margin:12px 0 4px;padding:10px 14px;border:1px solid #ffcf7a;border-radius:16px;
  background:linear-gradient(100deg,#fff9e8,#ffe9c4);cursor:pointer;overflow:hidden;
  font-family:inherit;color:#7a4a05;text-align:left;
  animation:hall-pulse 2.6s ease-in-out infinite;
}
.hall-entry-glow{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.9) 50%,transparent 75%);
  transform:translateX(-110%);animation:hall-sheen 3.4s ease-in-out infinite;
}
.hall-entry-icon{font-size:24px;line-height:1;flex:0 0 auto}
.hall-entry-main{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.hall-entry-main b{font-size:16px;color:#8a4b00}
.hall-entry-main i{font-style:normal;font-size:12px;color:#a9763b}
.hall-entry-tag{
  flex:0 0 auto;font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#ff9f43,#ff6b6b);border-radius:999px;padding:3px 9px;
  box-shadow:0 2px 8px rgba(255,107,107,.35);white-space:nowrap;
}
.hall-entry-arrow{font-size:22px;color:#c98a2e;line-height:1}
@keyframes hall-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,166,61,.35)}
  50%{box-shadow:0 0 0 6px rgba(255,166,61,0)}
}
@keyframes hall-sheen{
  0%,55%{transform:translateX(-115%)}
  85%,100%{transform:translateX(115%)}
}

.hall-topbar{display:flex;align-items:center;gap:10px;padding-left:58px}
.hall-title{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.hall-title h2{margin:0;font-size:19px}
.hall-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.hall-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;
  box-shadow:0 8px 22px rgba(24,100,150,.08);
}
.hall-card-top{display:flex;gap:12px;align-items:flex-start}
/* AI 挑战馆头像：方形 + 绿色描边 + 在线指示灯 */
.hall-avatar{
  position:relative;width:70px;height:70px;border-radius:14px;flex:0 0 auto;padding:2px;
  background:conic-gradient(from -40deg,#c9f6dd,#3ddc84 26%,#16a34a 58%,#8ef0b9 82%,#c9f6dd);
}
.hall-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:11px;border:2px solid #fff;background:#eaf7ff}
.hall-info{flex:1;min-width:0}
.hall-name{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700}
.hall-lv{font-size:11px;font-weight:600;color:#b45309;background:#fff3d6;border-radius:999px;padding:1px 8px}
.hall-intro{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--dim)}
.hall-stat{display:flex;align-items:baseline;gap:6px;margin:10px 0;font-size:13px;color:var(--dim)}
.hall-stat b{font-size:21px;color:#0f9d76;line-height:1}
.hall-stat i{font-style:normal;font-size:12px}
.hall-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hall-actions .btn{width:100%}
.hall-actions button:last-child{grid-column:1 / -1}
.hall-loading{padding:24px 0;text-align:center}

.hall-board{
  position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(10,38,58,.48);backdrop-filter:blur(2px);
}
.hall-board-card{
  width:min(480px,100%);max-height:80vh;overflow:auto;background:#fff;border-radius:18px;
  padding:16px;box-shadow:0 18px 48px rgba(9,44,68,.28);
}
.hall-board-card header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hall-board-card h3{margin:0;font-size:17px}
.hall-board-card ol{list-style:none;margin:10px 0 0;padding:0}
.hall-board-card li{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px dashed var(--line);font-size:14px}
.hall-board-card li:last-child{border-bottom:0}
.hall-board-card li .no{width:22px;text-align:center;font-weight:700;color:#c98a2e}
.hall-board-card li b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hall-board-card li span:last-child{color:var(--dim);font-size:12px}

/* AI 头像 + 思考指示灯（方形头像，绿色光带沿方框转圈） */
.ai-face{
  position:relative;display:inline-block;width:27px;height:27px;border-radius:8px;
  vertical-align:-8px;margin-right:6px;flex:0 0 auto;
}
.ai-face img{
  width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;
  border:1px solid #a7e8c5;background:#fff;box-sizing:border-box;
}
.ai-ring{
  position:absolute;inset:-2px;border-radius:10px;pointer-events:none;opacity:0;
  padding:2.5px;transition:opacity .15s linear;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.ai-face.thinking .ai-ring{opacity:1}
.ai-ring::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(from 0deg,
    rgba(34,197,94,0) 0deg,rgba(34,197,94,.18) 150deg,
    #4ade80 300deg,#16a34a 345deg,#eafff3 360deg);
  animation:ai-ring-spin 2.8s linear infinite;
}
@keyframes ai-ring-spin{to{transform:rotate(360deg)}}

/* 对局中的 AI 对话气泡：放在顶栏下方，随内容撑开，不覆盖棋盘 */
.ai-bubble{
  position:relative;margin:6px 16px 2px;padding:11px 15px;border-radius:14px;
  background:#fff;border:1px solid var(--line);border-left:5px solid #22c55e;
  font-size:16.5px;line-height:1.55;color:var(--text);box-shadow:0 6px 18px rgba(21,90,130,.12);
  animation:bubble-in .22s ease-out both;
}
.ai-bubble b{color:#15803d;margin-right:3px;font-size:1.02em}
.ai-bubble::before{
  content:"";position:absolute;top:-6px;right:30px;width:10px;height:10px;background:#fff;
  border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);
}
@keyframes bubble-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* 彩蛋台词：金色流光 + 呼吸光晕 */
.ai-bubble.spell-say{
  font-weight:800;letter-spacing:.4px;color:#6a3d00;
  border-color:#ffd27a;border-left-color:#f0a91c;
  background:linear-gradient(110deg,#fff9e8,#ffeef7 32%,#eafaff 62%,#fff9e8 92%);
  background-size:220% 100%;
  text-shadow:0 0 10px rgba(255,190,60,.55),0 1px 0 rgba(255,255,255,.8);
  animation:bubble-in .22s ease-out both,spellSayGlow 2.6s linear infinite;
}
.ai-bubble.spell-say b{color:#c26a00}
.ai-bubble.spell-say::before{background:#fff9e8;border-color:#ffd27a}
.ai-bubble.spell-say::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.9) 50%,transparent 64%);
  background-size:240% 100%;animation:spellSaySweep 2.2s linear infinite;
}
@keyframes spellSayGlow{
  0%{background-position:0% 50%;box-shadow:0 6px 18px rgba(21,90,130,.12),0 0 0 rgba(255,190,60,0)}
  50%{background-position:100% 50%;box-shadow:0 8px 26px rgba(240,169,28,.28),0 0 20px rgba(255,190,60,.4)}
  100%{background-position:0% 50%;box-shadow:0 6px 18px rgba(21,90,130,.12),0 0 0 rgba(255,190,60,0)}
}
@keyframes spellSaySweep{0%{background-position:190% 0}100%{background-position:-90% 0}}

/* 固定高度的气泡槽：AI 说话/收起时棋盘不再上下跳动，宽度也不会因滚动条变化而缩放 */
.ai-bubble-slot{display:none}
#screen-game.ai-challenge .ai-bubble-slot{display:block;position:relative;height:86px}
#screen-game.ai-challenge .ai-bubble{position:absolute;left:0;right:0;top:0}

.ai-end-say{
  margin:10px auto 18px;max-width:92%;padding:10px 14px;border-radius:14px;
  background:#f4fff9;border:1px solid #b7ecd4;color:#116644;font-size:14px;line-height:1.6;
}
.ai-end-say b{color:#0f9d76;margin-right:2px}

@media (max-width:420px){
  .hall-avatar{width:54px;height:54px}
  .hall-name{font-size:16px}
  .hall-actions{grid-template-columns:1fr}
  .hall-actions button:last-child{grid-column:auto}
  .ai-bubble{margin:4px 10px 2px;padding:9px 12px;font-size:14.5px}
  #screen-game.ai-challenge .ai-bubble-slot{height:78px}
}

/* AI 挑战馆 2.0：头像放大、分类成功率、挑战纪录 */
.ai-face{width:52px;height:52px;border-radius:11px;vertical-align:-18px;margin-right:8px}
.ai-face img{border-radius:11px}
.ai-face .ai-ring{inset:-3px;border-radius:13px;padding:3px}
.hall-avatar{width:74px;height:74px}
@media (max-width:420px){.hall-avatar{width:60px;height:60px}}
.hall-stat{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;margin:12px 0}
.hall-stat .hs-item{display:flex;align-items:baseline;gap:5px;font-size:13px;color:var(--dim)}
.hall-stat .hs-item b{font-size:19px;color:#0f9d76;line-height:1}
.hall-stat .hs-item i{font-style:normal;font-size:11px;color:#8aa7b8}
.hall-board-card .rec-item{align-items:flex-start;gap:8px;flex-wrap:wrap}
.rec-time{flex:0 0 auto;font-size:11px;color:#8aa7b8;font-variant-numeric:tabular-nums}
.rec-main{flex:1;min-width:150px;font-size:13px;line-height:1.5}
.rec-main b{color:#12658c;font-weight:600}
.rec-res{flex:0 0 auto;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px}
.rec-res.ok{color:#0f7a4d;background:#e6f8ee}
.rec-res.fail{color:#b3412f;background:#ffece9}
@media (max-width:560px){
  .hall-topbar{padding-left:52px}
  .hall-topbar .dim{display:none}
  .ai-face{width:44px;height:44px;vertical-align:-15px}
  /* 对局顶栏：返回键只占第一行，第二行让出宽度，避免分数被挤出屏幕 */
  #screen-game .topbar{padding-left:14px}
  #screen-game .progress{margin-left:38px}
  .v-side{padding:3px 7px;gap:4px}
  .v-name{font-size:12.5px}
  .v-name .ai-face{width:36px;height:36px;vertical-align:-11px;margin-right:4px}
  .v-score{font-size:17px}
  .v-vs{font-size:14px}
}
@media (max-width:420px){
  /* 极窄屏先隐藏「作答中」小标签，保证名字和比分不被挤出屏幕 */
  .v-side .v-status{display:none}
}

/* ---------- 对弈专属：棋盘棋子放大、标记更轻、双方向剩余时间常显 ---------- */
#screen-game.duel .board{max-width:700px}
#screen-game.duel .stone{width:95%}
#screen-game.duel .mvno{font-size:calc(var(--cell)*.31)}
#screen-game.duel .lastmark{width:calc(var(--cell)*.2);border-width:1px;background:rgba(255,255,255,.2)}
#screen-game.duel .cell.picked .stone{box-shadow:0 0 0 2px rgba(15,143,143,.85),0 3px 8px rgba(15,51,80,.3)}
#screen-game.duel .timer{width:50px;height:50px}
#screen-game.duel .ring-bg,#screen-game.duel .ring-fg{stroke-width:3}
#screen-game.duel .v-side .v-status{display:inline-block;margin-left:2px;padding:1px 6px;font-size:11px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#17405c;background:#eef7ff;border:1px solid #cfe6f6;border-radius:999px}

/* 彩蛋：崔展铭的棋子消失术——全盘棋子消失 8 秒 */
#board.spell-gone .stone,#board.spell-gone .lastmark,#board.spell-gone .mvno,#board.spell-gone .ban-x,#board.spell-gone .mark,#board.spell-gone .ghost{opacity:0!important;transition:opacity .3s}

/* 彩蛋：棋子吊连术——中心动效 + 棋子环绕 */
.spell-burst{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:70}
.spell-burst i{position:absolute;width:120px;height:120px;border:2px solid rgba(120,220,255,.9);border-radius:50%;animation:spellRing 2s ease-out forwards}
.spell-burst i:nth-child(2){animation-delay:.18s}
.spell-burst i:nth-child(3){animation-delay:.36s}
.spell-burst b{font-size:34px;font-weight:900;color:#fff;letter-spacing:2px;text-shadow:0 0 12px #4fd3ff,0 0 30px #2b9fe0;animation:spellText 2s ease-out forwards}
@keyframes spellRing{0%{transform:scale(.2);opacity:0}30%{opacity:1}100%{transform:scale(5);opacity:0}}
@keyframes spellText{0%{transform:scale(.4);opacity:0}25%{transform:scale(1.15);opacity:1}70%{opacity:1}100%{transform:scale(1.45);opacity:0}}
.stone-orbit-layer{position:fixed;pointer-events:none;z-index:65;overflow:visible}
.orbit-stone{position:absolute!important;left:0!important;top:0!important;margin:0!important;transform:none;will-change:transform;box-shadow:0 2px 6px rgba(10,40,65,.28)}

/* 彩蛋：棋子吊连术登场前的蓄力演出（3.4 秒） */
.spell-intro{position:fixed;inset:0;z-index:96;display:grid;place-items:center;overflow:hidden;pointer-events:none;
  background:radial-gradient(circle at 50% 48%,rgba(10,42,78,.62),rgba(4,12,26,.9) 68%);
  animation:spellIntroFade 3.4s ease forwards}
.spell-intro .si-halo{position:absolute;width:170px;height:170px;border-radius:50%;
  border:3px solid rgba(120,225,255,.9);
  box-shadow:0 0 42px rgba(80,200,255,.75),inset 0 0 38px rgba(120,225,255,.55);
  animation:siHalo 3.4s cubic-bezier(.2,.7,.3,1) forwards}
.spell-intro .si-halo:nth-child(3){border-color:rgba(255,214,110,.9);box-shadow:0 0 42px rgba(255,205,90,.7),inset 0 0 38px rgba(255,214,110,.5);animation-delay:.22s}
.spell-intro .si-halo:nth-child(4){border-color:rgba(180,150,255,.85);box-shadow:0 0 42px rgba(160,130,255,.65),inset 0 0 38px rgba(180,150,255,.45);animation-delay:.44s}
.spell-intro .si-rays{position:absolute;width:200vmax;height:200vmax;
  background:repeating-conic-gradient(from 0deg,rgba(120,220,255,.16) 0deg 3deg,transparent 3deg 13deg);
  -webkit-mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,.55) 34%,transparent 62%);
  mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,.55) 34%,transparent 62%);
  animation:siRays 3.4s linear forwards}
.spell-intro .si-title{position:relative;z-index:2;text-align:center;color:#fff;font-weight:900;letter-spacing:.08em;
  font-size:clamp(30px,6vw,58px);
  text-shadow:0 0 12px #6fe0ff,0 0 32px #2b9fe0,0 0 64px #1b6bb0;
  animation:siTitle 3.4s cubic-bezier(.2,.8,.25,1) forwards}
.spell-intro .si-title small{display:block;margin-top:10px;font-size:.32em;letter-spacing:.52em;color:#cdefff;
  text-shadow:0 0 10px #6fe0ff,0 0 22px #2b9fe0}
.spell-intro .si-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:siFlash 3.4s ease-out forwards}
@keyframes spellIntroFade{0%{opacity:0}9%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes siHalo{0%{transform:scale(.15);opacity:0}16%{opacity:1}72%{opacity:.85}100%{transform:scale(6.2);opacity:0}}
@keyframes siRays{0%{transform:rotate(0deg) scale(.55);opacity:0}18%{opacity:1}100%{transform:rotate(130deg) scale(1.2);opacity:0}}
@keyframes siTitle{0%{transform:scale(.28);opacity:0;filter:blur(10px)}22%{transform:scale(1.14);opacity:1;filter:blur(0)}32%{transform:scale(1)}78%{transform:scale(1.03);opacity:1}100%{transform:scale(1.32);opacity:0}}
@keyframes siFlash{0%,64%{opacity:0}71%{opacity:.85}80%{opacity:0}100%{opacity:0}}

/* 吊连术：棋子从空中飞坠 */
.stone-rain{position:fixed;inset:0;pointer-events:none;z-index:69;overflow:hidden}
.stone-rain i{position:absolute;top:-40px;border-radius:50%;will-change:transform;animation:srFall 2s cubic-bezier(.3,.1,.6,.95) forwards}
.stone-rain i.b{background:radial-gradient(circle at 34% 28%,#5aa6d4,#0a2740 62%,#04121f);
  box-shadow:0 0 10px rgba(120,220,255,.55),inset 0 -3px 5px rgba(0,0,0,.55)}
.stone-rain i.w{background:radial-gradient(circle at 34% 28%,#fff,#dcefff 62%,#a7c6da);
  box-shadow:0 0 10px rgba(180,240,255,.6),inset 0 -3px 5px rgba(90,130,160,.45)}
.stone-rain i::after{content:"";position:absolute;left:50%;bottom:100%;width:3px;height:70px;transform:translateX(-50%);
  background:linear-gradient(to top,rgba(150,225,255,.85),rgba(150,225,255,0));border-radius:2px}
@keyframes srFall{
  0%{transform:translateY(0) rotate(0deg) scale(.85);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(118vh) rotate(340deg) scale(1);opacity:.95}
}

/* QQ 经典「可爱」表情：面板与弹出层使用图片 */
.emote img{width:22px;height:22px;display:block;margin:0 auto;pointer-events:none}
.emote-pop .e img{width:26px;height:26px;display:block}
/* 挑战纪录 / 排行榜弹窗：固定覆盖整屏，自身内部滚动，不跟随页面滚动 */
.hall-board{overscroll-behavior:contain}
.hall-board-card{overscroll-behavior:contain}

/* 排行榜/纪录弹窗：标题固定在顶部，列表内部滚动 */
.hall-board-card header{position:sticky;top:-16px;margin:-16px -16px 0;padding:16px;background:#fff;border-radius:18px 18px 0 0;z-index:2}
.emote-pop .e img{width:46px;height:46px;display:block}

/* ===== 主页桌宠：冷月姬 ===== */
.mascot{position:fixed;right:18px;bottom:92px;width:132px;height:172px;z-index:45;touch-action:none;user-select:none;-webkit-user-select:none}
.mascot.dragging{cursor:grabbing}
.mascot-body{width:100%;height:100%;cursor:grab;position:relative;z-index:1;filter:drop-shadow(0 8px 14px rgba(58,138,186,.25))}
.mascot-art{position:relative;width:100%;height:100%;animation:mascotFloat 3.4s ease-in-out infinite}
.mascot-art img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-drag:none}
.mascot.dragging .mascot-art{animation:none}
@keyframes mascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mascot-body.act-jump .mascot-art{animation:mascotJump .9s ease}
@keyframes mascotJump{0%,100%{transform:translateY(0)}35%{transform:translateY(-18px) scale(1.03,.97)}65%{transform:translateY(0) scale(.98,1.02)}}
.mascot-body.act-tilt .mascot-art{animation:mascotTilt .9s ease}
@keyframes mascotTilt{0%,100%{transform:rotate(0)}35%{transform:rotate(-7deg)}70%{transform:rotate(5deg)}}
.mascot-body.act-wave .mp-arm-right{animation:mascotWave .55s ease 2}
@keyframes mascotWave{0%,100%{transform:rotate(0)}50%{transform:rotate(-26deg)}}
.mp-arm{transform-box:fill-box;transform-origin:top center}
.mp-eye{transform-box:fill-box;transform-origin:center;animation:mascotBlink 5.4s infinite}
@keyframes mascotBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.mp-pupil{transition:transform .28s ease}
.mp-snow{animation:mascotSnow 2.6s ease-in-out infinite}
.mp-snow:nth-of-type(2){animation-delay:1.2s}
@keyframes mascotSnow{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.mascot-bubble{position:absolute;right:2px;bottom:100%;margin-bottom:6px;max-width:150px;padding:8px 11px;border-radius:12px;background:#fff;color:#245a7d;font-size:13px;font-weight:700;line-height:1.35;box-shadow:0 6px 18px rgba(30,110,160,.18);white-space:nowrap;animation:mascotPop .25s ease}
.mascot-bubble::after{content:"";position:absolute;right:22px;bottom:-5px;width:10px;height:10px;background:#fff;transform:rotate(45deg);border-radius:2px}
@keyframes mascotPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.mascot-fan{position:absolute;inset:0;pointer-events:none}
.mascot-fan.show button{pointer-events:auto}
.mascot-fan button{position:absolute;white-space:nowrap;padding:7px 12px;border-radius:999px;border:1px solid #bfe6ff;background:rgba(255,255,255,.96);color:#1d6f9e;font-size:12.5px;font-weight:800;box-shadow:0 6px 14px rgba(30,110,160,.18);opacity:0;transform:scale(.5);transform-origin:bottom right;transition:opacity .18s ease,transform .18s ease;cursor:pointer}
.mascot-fan.show button{opacity:1;transform:scale(1)}
.mascot-fan button:nth-child(1){right:0;bottom:156px}
.mascot-fan button:nth-child(2){right:42px;bottom:190px}
.mascot-fan button:nth-child(3){right:94px;bottom:220px}
.mascot-fan.show button:hover{background:#eaf8ff}
.mascot-pick{position:absolute;right:-6px;bottom:142px;width:196px;padding:12px;border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 12px 30px rgba(30,110,160,.22);border:1px solid #d6efff;text-align:center;animation:mascotPop .22s ease}
.mp-head{width:80px;height:80px;margin:-46px auto 4px;border-radius:50%;background:linear-gradient(180deg,#f2fbff,#d8f1ff);border:2px solid #fff;box-shadow:0 6px 16px rgba(30,110,160,.2);overflow:hidden}
.mp-head svg,.mp-head img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 16%}
.mp-title{font-size:13px;font-weight:900;color:#1d6f9e;margin-bottom:8px}
.mascot-pick button[data-mode]{display:block;width:100%;margin:6px 0;padding:9px 10px;border-radius:10px;border:1px solid #bfe6ff;background:#f2fbff;color:#17618c;font-size:13px;font-weight:800;cursor:pointer}
.mascot-pick button[data-mode]:hover{background:#e2f5ff}
.mascot-pick .mp-close{position:absolute;right:6px;top:6px;width:24px;height:24px;border:none;background:transparent;color:#7aa9c4;font-size:18px;line-height:1;cursor:pointer}
@media (max-width:560px){.mascot{width:104px;height:136px;right:10px;bottom:86px}.mascot-pick{width:180px;right:-2px;bottom:118px}.mascot-fan button:nth-child(1){bottom:122px}.mascot-fan button:nth-child(2){bottom:152px;right:30px}.mascot-fan button:nth-child(3){bottom:180px;right:70px}}

/* 冷月姬：拖拽/落地/小动作细节 */
.mascot-body{position:relative;z-index:1}
.mascot-face{position:absolute;left:50%;top:0;width:86.4%;height:100%;transform:translateX(-50%);z-index:2;pointer-events:none;opacity:0;transition:opacity .12s}
.mascot-face svg{width:100%;height:100%;display:block}
.mascot.lifted .mascot-face{opacity:1}
.mascot-dust{position:absolute;left:50%;bottom:0;width:76px;height:16px;transform:translateX(-50%) scale(.4);border-radius:50%;background:radial-gradient(closest-side,rgba(130,205,240,.6),rgba(130,205,240,0) 72%);opacity:0;pointer-events:none;z-index:0}
.mascot.falling .mascot-dust{animation:mascotDust .68s ease-out}
@keyframes mascotDust{0%{opacity:0;transform:translateX(-50%) scale(.4)}35%{opacity:1;transform:translateX(-50%) scale(1.1)}100%{opacity:0;transform:translateX(-50%) scale(1.55)}}
.mascot-spark{position:absolute;inset:0;pointer-events:none;z-index:3}
.mascot-spark i{position:absolute;font-style:normal;font-size:11px;color:#cdefff;text-shadow:0 0 6px #fff,0 0 10px #8fd8ff;animation:sparkUp 1s ease-out forwards}
@keyframes sparkUp{0%{opacity:0;transform:translateY(0) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translateY(-26px) scale(1.25)}}
.mascot.lifted .mascot-art{animation:mascotDangle 1.05s ease-in-out infinite;transform-origin:50% 0}
@keyframes mascotDangle{0%,100%{transform:rotate(-5deg) scale(1.01,1.05)}50%{transform:rotate(5deg) scale(1.01,1.05)}}
.mascot.falling .mascot-art{animation:mascotFall .64s cubic-bezier(.45,0,.75,.55);transform-origin:50% 100%}
@keyframes mascotFall{0%{transform:translateY(-30px) scale(.99,1.04)}52%{transform:translateY(0) scale(1.1,.86)}72%{transform:translateY(-9px) scale(.96,1.05)}100%{transform:translateY(0) scale(1,1)}}
.mascot-body.act-sway .mascot-art{animation:mascotSway 1.3s ease}
@keyframes mascotSway{0%,100%{transform:rotate(0)}25%{transform:rotate(4deg)}70%{transform:rotate(-4deg)}}
.mascot-body.act-shiver .mascot-art{animation:mascotShiver .42s linear 2}
@keyframes mascotShiver{0%,100%{transform:translateX(0)}25%{transform:translateX(-2.5px)}75%{transform:translateX(2.5px)}}
.mascot-body.act-hop .mascot-art{animation:mascotHop .85s ease}
@keyframes mascotHop{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}55%{transform:translateY(0) scale(1.05,.94)}75%{transform:translateY(-5px)}}
/* 菜单：加大间距，保证文字完整可读 */
.mascot-fan{z-index:10}
.mascot-pick{z-index:11}
.mascot-bubble{z-index:12}
.mascot-fan button{padding:8px 14px;font-size:13px;background:#fff}
.mascot-fan button:nth-child(1){right:0;bottom:146px}
.mascot-fan button:nth-child(2){right:16px;bottom:188px}
.mascot-fan button:nth-child(3){right:40px;bottom:230px}
@media (max-width:560px){.mascot-fan button{padding:7px 12px;font-size:12.5px}.mascot-fan button:nth-child(1){bottom:118px;right:0}.mascot-fan button:nth-child(2){bottom:154px;right:12px}.mascot-fan button:nth-child(3){bottom:190px;right:30px}}

.mascot-fan button:nth-child(2){bottom:190px}
.mascot-fan button:nth-child(3){bottom:234px}
.mascot-fan button:nth-child(4){right:70px;bottom:268px}
@media (max-width:560px){.mascot-fan button:nth-child(2){bottom:158px}.mascot-fan button:nth-child(3){bottom:198px}.mascot-fan button:nth-child(4){right:52px;bottom:232px}}

/* ---------- 冬日飘雪 ---------- */
#snow-layer{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:4;
  transition:opacity .6s ease;
}
#snow-layer.faint{opacity:.2}

/* 按钮覆冰：连续冰壳 + 顶部积雪 + 闪光 */
#screen-home .btn,#screen-home .hall-entry{position:relative;isolation:isolate;overflow:hidden}
#screen-home .btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:
    radial-gradient(circle 1.3px at 16% 30%,#fff 99%,rgba(255,255,255,0) 100%),
    radial-gradient(circle 1px at 34% 18%,#fff 99%,rgba(255,255,255,0) 100%),
    radial-gradient(circle 1.4px at 52% 34%,#fff 99%,rgba(255,255,255,0) 100%),
    radial-gradient(circle 1px at 70% 20%,#fff 99%,rgba(255,255,255,0) 100%),
    radial-gradient(circle 1.2px at 86% 32%,#fff 99%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,rgba(255,255,255,.9) 0,rgba(255,255,255,.5) 16%,rgba(205,238,255,.3) 30%,rgba(205,238,255,.1) 44%,rgba(255,255,255,0) 56%),
    linear-gradient(112deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.45) 49%,rgba(255,255,255,0) 58%);
  background-repeat:no-repeat;
  animation:iceGlow 3.2s ease-in-out infinite;
}
@keyframes iceGlow{0%,100%{opacity:.85}50%{opacity:1}}
#screen-home .btn::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:12px;pointer-events:none;z-index:2;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='12' viewBox='0 0 64 12'><path fill='%23ffffff' d='M0 0h64v4.6c-2.67 2.8-5.33 2.8-8 0c-2.67-2.8-5.33-2.8-8 0c-2.67 2.8-5.33 2.8-8 0c-2.67-2.8-5.33-2.8-8 0c-2.67 2.8-5.33 2.8-8 0c-2.67-2.8-5.33-2.8-8 0c-2.67 2.8-5.33 2.8-8 0c-2.67-2.8-5.33-2.8-8 0z'/></svg>") repeat-x;
  background-size:64px 12px;
  filter:drop-shadow(0 1px 1px rgba(96,165,215,.45));
  animation:snowGlint 3s ease-in-out infinite;
}
@keyframes snowGlint{
  0%,100%{filter:drop-shadow(0 1px 1px rgba(96,165,215,.45)) brightness(1)}
  50%{filter:drop-shadow(0 0 4px rgba(255,255,255,.95)) brightness(1.3)}
}
#screen-home .btn:hover:not(:disabled)::before{opacity:1}
@media (max-width:560px){
  #screen-home .btn::after{height:10px;background-size:56px 10px}
}