:root{
    --red:#c62828;
    --red2:#e53935;
    --blue:#1565c0;
    --green:#2e7d32;
    --ink:#1b1b1f;
    --ink2:#5b5b66;
    --ink3:#8b8b96;
    --line:#e3e4ea;
    --line2:#cfd1da;
    --bg:#f4f5f8;
    --panel:#ffffff;
    --felt:#f7f8fb;
    --gold:#b8860b;
    --warn:#e65100;
    --ok:#2e7d32;
    --shadow:0 1px 2px rgba(20,20,40,.06), 0 6px 18px rgba(20,20,40,.07);
    --shadow2:0 2px 6px rgba(20,20,40,.10), 0 14px 34px rgba(20,20,40,.12);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;margin:0;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",Roboto,sans-serif;
    background:var(--bg);color:var(--ink);
    font-size:15px;line-height:1.5;overflow:hidden;
  }
  #app{height:100%;display:flex;flex-direction:column;}

  /* ---------- top bar ---------- */
  .topbar{
    flex:0 0 auto;display:flex;align-items:center;gap:10px;
    padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);
    box-shadow:0 1px 3px rgba(0,0,0,.04);z-index:30;
  }
  .brand{display:flex;align-items:center;gap:9px;min-width:0;}
  .brand .logo{
    width:30px;height:30px;border-radius:8px;flex:0 0 auto;
    background:linear-gradient(135deg,var(--red) 0%, #7f1d1d 100%);
    color:#fff;font-weight:800;font-size:12px;line-height:1.0;
    display:flex;align-items:center;justify-content:center;letter-spacing:-.5px;
    box-shadow:0 2px 6px rgba(198,40,40,.28);
  }
  .brand h1{font-size:16px;margin:0;font-weight:800;letter-spacing:.5px;white-space:nowrap;}
  .brand small{color:var(--ink3);font-size:11px;font-weight:500;margin-left:2px;white-space:nowrap;}
  .topbar .spacer{flex:1;}
  .badge{
    font-size:11.5px;padding:3px 9px;border-radius:20px;background:#eef0f5;color:var(--ink2);
    white-space:nowrap;border:1px solid var(--line);
  }
  .badge b{color:var(--ink);font-weight:700;}
  .btn{
    border:1px solid var(--line2);background:#fff;color:var(--ink);
    padding:6px 13px;border-radius:8px;font-size:13px;cursor:pointer;
    font-family:inherit;font-weight:600;white-space:nowrap;transition:.13s;
  }
  .btn:hover{background:#f2f3f7;border-color:#b9bcc9;}
  .btn:active{transform:translateY(1px);}
  .btn.primary{background:var(--red);border-color:var(--red);color:#fff;}
  .btn.primary:hover{background:#b71c1c;}
  .btn.ghost{background:transparent;border-color:transparent;color:var(--ink2);}
  .btn.ghost:hover{background:#eef0f5;color:var(--ink);}
  .btn:disabled{opacity:.42;cursor:not-allowed;transform:none;}
  .btn.sm{padding:5px 11px;font-size:12px;border-radius:7px;font-weight:600;}
  .btn.off{background:#f3f4f8;color:var(--ink3);border-color:var(--line);}
  .btn.off:hover{background:#eceef3;color:var(--ink2);border-color:var(--line2);}

  /* ---------- main ---------- */
  main{flex:1;min-height:0;display:flex;}
  .board{
    flex:1;min-width:0;display:flex;flex-direction:column;
    background:
      radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, var(--felt) 60%, #eef0f6 100%);
    position:relative;
  }

  /* ---------- opponents ---------- */
  .opps{
    flex:0 0 auto;display:flex;gap:28px;padding:10px 14px 6px;justify-content:center;flex-wrap:wrap;
  }
  .opp{
    position:relative;background:var(--panel);border:1px solid var(--line);border-radius:11px;
    padding:8px 14px 9px;min-width:138px;box-shadow:var(--shadow);transition:.2s;
  }
  .opp.turn{border-color:var(--red);box-shadow:0 0 0 2px rgba(198,40,40,.16),var(--shadow);}
  .opp.finished{background:#f3f6f3;border-color:#cfe0cf;}
  .opp .nm{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;}
  .opp .dot{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
    justify-content:center;color:#fff;font-size:12px;font-weight:700;}
  .opp .st{font-size:11.5px;color:var(--ink3);margin-top:2px;display:flex;align-items:center;gap:5px;}
  .opp .st b{color:var(--ink2);font-weight:700;}
  .rank-chip{
    position:absolute;top:-7px;right:-7px;background:var(--gold);color:#fff;font-size:10.5px;
    font-weight:800;padding:1px 7px;border-radius:20px;box-shadow:0 1px 4px rgba(0,0,0,.22);
  }
  .rank-chip.r1{background:#c9a227;}
  .pips{display:flex;gap:2px;margin-top:5px;height:9px;align-items:flex-end;}
  .pips i{width:3px;background:var(--line2);border-radius:1px;display:block;}
  .opp.turn .pips i{background:#f0b7b7;}

  /* ---------- table ---------- */
  .table{flex:1;min-height:0;display:flex;flex-direction:column;padding:2px 12px 0;overflow:hidden;position:relative;}
  /* 大号倒计时：挪到牌桌右上角，不再遮挡中央出的牌 */
  .bigtimer{
    position:absolute;right:12px;top:6px;
    display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;user-select:none;
  }
  .bigtimer .btring{
    width:56px;height:56px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 50% 40%, #fff, #fdeaea);
    border:3px solid #2e7d32;box-shadow:0 4px 12px rgba(0,0,0,.16);
    transition:border-color .3s, background .3s;
  }
  .bigtimer .btnum{font-size:25px;font-weight:900;line-height:1;color:#2e7d32;font-variant-numeric:tabular-nums;}
  .bigtimer .btlabel{font-size:10.5px;font-weight:800;color:#2e7d32;background:rgba(255,255,255,.7);padding:1px 7px;border-radius:10px;}
  .bigtimer.warn .btring{border-color:#ff9800;background:radial-gradient(circle at 50% 40%, #fff, #fff0db);}
  .bigtimer.warn .btnum,.bigtimer.warn .btlabel{color:#ef6c00;}
  .bigtimer.urgent .btring{border-color:#e53935;background:radial-gradient(circle at 50% 40%, #fff, #ffe2e2);animation:btPulse .7s ease-in-out infinite;}
  .bigtimer.urgent .btnum,.bigtimer.urgent .btlabel{color:#e53935;}
  @keyframes btPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
  @media (prefers-reduced-motion:reduce){.bigtimer.urgent .btring{animation:none}}
  .seatline{
    display:flex;align-items:center;gap:9px;padding:5px 78px 3px 0;flex:0 0 auto;
  }
  /* 各自座位上独立显示「自己刚出的牌」 */
  .olast{
    display:flex;align-items:center;gap:5px;margin-top:6px;padding-top:6px;
    border-top:1px dashed var(--line);
  }
  .olast .olab{font-size:10.5px;font-weight:800;color:var(--ink3);flex:0 0 auto;}
  .mylast{display:inline-flex;align-items:center;gap:5px;}
  .mylast .olab{font-size:10.5px;font-weight:800;color:var(--ink3);}
  /* 「刚出」的牌放大到看得清 */
  .olast .mini,.mylast .mini{
    width:38px;height:53px;font-size:16px;border-radius:5px;
    box-shadow:0 2px 5px rgba(0,0,0,.15);
  }
  .olast .mini .s,.mylast .mini .s{font-size:12px;}
  .olast .mini-cards,.mylast .mini-cards{gap:4px;}
  /* 桌面中央的牌放大 */
  .lastplay .card.sm{width:62px;height:94px;}
  .lastplay .card.sm .tl{font-size:14px;top:4px;left:5px;}
  .lastplay .card.sm .tls{font-size:13px;top:20px;left:5px;}
  .lastplay .card.sm .br{font-size:14px;bottom:4px;right:5px;}
  .lastplay .card.sm .brs{font-size:13px;bottom:20px;right:5px;}
  .lastplay .card.sm .big{font-size:32px;}
  /* 出牌动态特效：从座位弹出（用独立 translate/scale，避开 preview 的 transform:!important） */
  @keyframes cardPop{
    0%{translate:0 30px;scale:.3;opacity:0}
    60%{translate:0 -7px;scale:1.1;opacity:1}
    100%{translate:0 0;scale:1;opacity:1}
  }
  .lastplay.fx .card{animation:cardPop .42s cubic-bezier(.2,.8,.3,1.15) both;}
  .olast.fx .mini,.mylast.fx .mini{animation:cardPop .38s cubic-bezier(.2,.8,.3,1.15) both;}
  @media (prefers-reduced-motion:reduce){
    .lastplay.fx .card,.olast.fx .mini,.mylast.fx .mini{animation:none}
  }
  .seatline .who{font-size:12.5px;color:var(--ink2);font-weight:700;white-space:nowrap;}
  .seatline .who .tag{
    font-size:10.5px;background:#eef0f5;border:1px solid var(--line);color:var(--ink3);
    padding:1px 6px;border-radius:6px;margin-left:5px;font-weight:600;
  }
  .seatline .latest{
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:12.5px;color:var(--ink3);
  }
  .mini-cards{display:flex;gap:3px;flex:0 0 auto;align-items:center;}
  .mini{
    width:22px;height:31px;border-radius:4px;background:#fff;border:1px solid var(--line2);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-size:11px;font-weight:800;line-height:1;color:var(--ink);
    box-shadow:0 1px 2px rgba(0,0,0,.08);
  }
  .mini.red{color:var(--red);}
  .mini.joker{background:linear-gradient(160deg,#fff,#fbeaea);}
  .mini .s{font-size:9px;}

  .dropzone{
    flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;position:relative;overflow:hidden;
  }
  .lastplay{
    display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:center;
    padding:14px 20px;border-radius:16px;max-width:96%;
    border:1.5px dashed transparent;transition:.2s;
  }
  .lastplay.has{border-color:var(--line2);background:rgba(255,255,255,.72);box-shadow:var(--shadow);}
  .lastplay.hot{border-color:#f0b7b7;background:rgba(255,245,245,.9);}
  .lastplay .empty{color:var(--ink3);font-size:13px;}
  .playcap{font-size:12px;color:var(--ink3);text-align:center;}
  .playcap b{color:var(--red);font-weight:800;}
  .combolabel{
    font-size:12.5px;font-weight:800;color:var(--red);
    background:#fdeeee;border:1px solid #f6cfcf;border-radius:8px;padding:3px 10px;
  }
  .combolabel.boom{background:#fff4e5;border-color:#ffd9a8;color:var(--warn);}
  .passflag{font-size:13px;font-weight:700;color:var(--ink3);letter-spacing:2px;}

  /* ---------- hand ---------- */
  .handbar{
    flex:0 0 auto;background:var(--panel);border-top:1px solid var(--line);
    padding:7px 12px 10px;box-shadow:0 -2px 10px rgba(20,20,40,.05);z-index:20;
  }
  .handinfo{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
  .handinfo .me{font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:6px;}
  .handinfo .cnt{font-size:12px;color:var(--ink3);}
  .handinfo .selinfo{font-size:12.5px;font-weight:700;}
  .handinfo .spacer{flex:1;}
  /* 每回合倒计时 */
  .turntimer{
    font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;
    padding:2px 9px;border-radius:20px;white-space:nowrap;
    background:#fdeeee;border:1px solid #f3cfcf;color:#c62828;
  }
  .turntimer.urgent{background:#c62828;border-color:#c62828;color:#fff;animation:ttBlink .7s ease-in-out infinite;}
  @keyframes ttBlink{0%,100%{opacity:1}50%{opacity:.55}}
  @media (prefers-reduced-motion:reduce){.turntimer.urgent{animation:none}}
  /* 「干扰」隐藏自己牌数时的提示徽标 */
  .hidebadge{
    display:inline-block;margin-left:4px;font-size:11px;font-weight:800;
    padding:2px 8px;border-radius:20px;white-space:nowrap;vertical-align:middle;
    background:#eef2ff;border:1px solid #cfd8f0;color:#3f51b5;
  }
  .hint{font-size:12px;color:var(--ink3);}
  .hint.warn{color:var(--warn);font-weight:700;}
  .hint.ok{color:var(--ok);font-weight:700;}
  .hint.bad{color:var(--red);font-weight:700;}

  .handscroll{overflow-x:auto;overflow-y:visible;padding:16px 2px 6px;margin-top:-10px;}
  .hand{display:flex;padding-left:6px;min-height:104px;}
  .card{
    width:58px;height:88px;flex:0 0 auto;margin-left:-24px;position:relative;
    background:#fff;border:1px solid var(--line2);border-radius:7px;
    box-shadow:0 1px 3px rgba(0,0,0,.14);cursor:pointer;transition:transform .12s, box-shadow .12s, border-color .12s;
    user-select:none;
  }
  .card:first-child{margin-left:0;}
  .card .tl{position:absolute;top:4px;left:5px;font-weight:800;font-size:14px;line-height:1;
    letter-spacing:-0.5px;white-space:nowrap;}
  .card .tls{position:absolute;top:19px;left:5px;font-size:13px;line-height:1;}
  .card .big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:30px;opacity:.16;font-weight:800;}
  .card .br{position:absolute;bottom:4px;right:5px;font-weight:800;font-size:14px;line-height:1;transform:rotate(180deg);}
  .card .brs{position:absolute;bottom:19px;right:5px;font-size:13px;line-height:1;transform:rotate(180deg);}
  .card.red{color:var(--red);}
  .card.black{color:#23252c;}
  .card.sel{transform:translateY(-18px);border-color:var(--red);box-shadow:0 6px 16px rgba(198,40,40,.34);}
  .card.sel::after{
    content:"";position:absolute;inset:-1px;border-radius:7px;
    box-shadow:0 0 0 2px var(--red) inset;pointer-events:none;
  }
  .card.hintcard{border-color:#2e7d32;box-shadow:0 0 0 2px rgba(46,125,50,.3);}
  .card.joker .big{opacity:.2;}
  .card.preview{position:relative;margin-left:0 !important;cursor:default;transform:none !important;}
  .card.sm{width:46px;height:70px;}
  .card.sm .tl{font-size:12px;top:3px;left:4px;}
  .card.sm .tls{font-size:11px;top:15px;left:4px;}
  .card.sm .br{font-size:12px;bottom:3px;right:4px;}
  .card.sm .brs{font-size:11px;bottom:15px;right:4px;}
  .card.sm .big{font-size:24px;}

  .actions{display:flex;gap:9px;margin-top:9px;align-items:center;flex-wrap:wrap;}
  .actions .spacer{flex:1;}
  .actions .btn{padding:8px 18px;font-size:13.5px;}

  /* ---------- side panel ---------- */
  aside{
    flex:0 0 320px;background:var(--panel);border-left:1px solid var(--line);
    display:flex;flex-direction:column;min-height:0;
  }
  .tabs{display:flex;border-bottom:1px solid var(--line);flex:0 0 auto;}
  .tab{
    flex:1;text-align:center;padding:10px 4px;font-size:13px;font-weight:700;color:var(--ink3);
    cursor:pointer;border-bottom:2px solid transparent;transition:.13s;
  }
  .tab:hover{color:var(--ink2);background:#fafbfd;}
  .tab.active{color:var(--red);border-bottom-color:var(--red);}
  .panes{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 30px;}
  .pane{display:none;}
  .pane.active{display:block;}

  .log{display:flex;flex-direction:column;gap:1px;}
  .logrow{
    display:flex;gap:8px;font-size:12.5px;padding:4px 6px;border-radius:6px;line-height:1.45;
  }
  .logrow .t{color:var(--ink3);font-size:11px;flex:0 0 30px;font-variant-numeric:tabular-nums;padding-top:1px;}
  .logrow .m{flex:1;min-width:0;word-break:break-word;}
  .logrow.k-play .m{color:var(--ink);}
  .logrow.k-sys{background:#f2f5fb;}
  .logrow.k-sys .m{color:var(--blue);font-weight:600;}
  .logrow.k-boom{background:#fff6ec;}
  .logrow.k-boom .m{color:var(--warn);font-weight:700;}
  .logrow.k-gong{background:#f3f7f3;}
  .logrow.k-gong .m{color:var(--green);font-weight:600;}
  .logrow.k-end{background:#fbeaea;}
  .logrow.k-end .m{color:var(--red);font-weight:700;}
  .logrow.k-blank{justify-content:center;color:var(--ink3);font-size:11.5px;padding:6px 0;}

  .rules h3{font-size:13px;margin:16px 0 7px;color:var(--red);font-weight:800;
    padding-bottom:4px;border-bottom:1px solid #f0dcdc;}
  .rules h3:first-child{margin-top:0;}
  .rules p,.rules li{font-size:12.5px;color:var(--ink2);margin:4px 0;line-height:1.62;}
  .rules ul{margin:4px 0;padding-left:17px;}
  .rules b{color:var(--ink);font-weight:700;}
  .rules .key{color:var(--red);font-weight:800;}
  .rules code{
    background:#f4f5f8;border:1px solid var(--line);border-radius:4px;padding:0 5px;
    font-size:11.5px;font-family:"SFMono-Regular",Consolas,monospace;color:#7f1d1d;
  }
  .rules table{width:100%;border-collapse:collapse;margin:7px 0;font-size:12px;}
  .rules th,.rules td{border:1px solid var(--line);padding:5px 7px;text-align:left;color:var(--ink2);}
  .rules th{background:#f7f8fb;font-weight:700;color:var(--ink);}
  .rules .order{font-size:12.5px;letter-spacing:1px;font-weight:700;color:var(--ink2);
    background:#f7f8fb;border:1px solid var(--line);border-radius:6px;padding:6px 9px;text-align:center;}

  .ranklist{display:flex;flex-direction:column;gap:6px;}
  .rankrow{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;
    border:1px solid var(--line);background:#fbfcfe;font-size:13px;}
  .rankrow .no{width:23px;height:23px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:12px;color:#fff;flex:0 0 auto;}
  .rankrow .rn{flex:1;font-weight:700;}
  .rankrow .rc{font-size:12px;color:var(--ink3);}
  .rankrow.me{background:#fff8f8;border-color:#f3d5d5;}
  .rankrow.now{box-shadow:0 0 0 2px rgba(198,40,40,.13);border-color:#eeb9b9;}

  /* ---------- overlay ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(24,26,38,.55);backdrop-filter:blur(4px);
    display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
  }
  .overlay.show{display:flex;animation:fade .18s ease;}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .modal{
    background:var(--panel);border-radius:16px;box-shadow:var(--shadow2);
    width:100%;max-width:620px;max-height:90vh;overflow-y:auto;
    padding:24px 26px;animation:pop .2s ease;
  }
  @keyframes pop{from{transform:translateY(12px) scale(.98);opacity:.5}to{transform:none;opacity:1}}
  .modal.small{max-width:440px;}
  .modal h2{margin:0 0 6px;font-size:21px;font-weight:800;}
  .modal h2 .accent{color:var(--red);}
  .modal .sub{color:var(--ink3);font-size:13px;margin-bottom:18px;}
  .modal h4{font-size:13.5px;margin:18px 0 8px;font-weight:800;color:var(--ink);
    display:flex;align-items:center;gap:7px;}
  .modal h4::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--red);}
  .optgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .opt{
    border:1.5px solid var(--line2);border-radius:12px;padding:14px 12px;cursor:pointer;
    text-align:center;transition:.15s;background:#fbfcfe;
  }
  .opt:hover{border-color:#e0a3a3;background:#fff8f8;}
  .opt.active{border-color:var(--red);background:#fdeeee;box-shadow:0 0 0 3px rgba(198,40,40,.09);}
  .opt .big{font-size:26px;font-weight:800;color:var(--red);line-height:1;}
  .opt .lb{font-size:13px;font-weight:700;margin-top:6px;}
  .opt .ds{font-size:11.5px;color:var(--ink3);margin-top:4px;line-height:1.45;}
  .names{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
  .namefield{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:9px;padding:7px 10px;background:#fbfcfe;}
  .namefield .dot{width:24px;height:24px;border-radius:50%;color:#fff;font-size:11.5px;font-weight:800;
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .namefield input{border:0;background:transparent;font-family:inherit;font-size:13.5px;font-weight:600;
    width:100%;outline:none;color:var(--ink);}
  .namefield .fixed{font-size:11px;color:var(--ink3);white-space:nowrap;}

  .hintbox{
    background:#f7f9fc;border:1px solid var(--line);border-left:3px solid var(--blue);
    border-radius:8px;padding:9px 12px;font-size:12.5px;color:var(--ink2);line-height:1.6;margin-top:6px;
  }
  .hintbox.warn{border-left-color:var(--warn);background:#fffaf5;}
  .hintbox b{color:var(--ink);}

  .modal .foot{display:flex;gap:10px;margin-top:20px;align-items:center;}
  .modal .foot .spacer{flex:1;}

  /* ---------- rank table ---------- */
  .rtable{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px;}
  .rtable th,.rtable td{padding:8px 9px;border-bottom:1px solid var(--line);text-align:left;}
  .rtable th{font-size:11.5px;color:var(--ink3);font-weight:700;background:#fbfcfe;}
  .rtable tr.you td{background:#fff8f8;font-weight:700;}
  .rtable .medal{font-weight:800;}
  .podium{display:flex;gap:10px;justify-content:center;margin:6px 0 16px;align-items:flex-end;}
  .pod{flex:1;text-align:center;}
  .pod .av{width:44px;height:44px;border-radius:50%;margin:0 auto 7px;display:flex;align-items:center;
    justify-content:center;color:#fff;font-weight:800;font-size:16px;}
  .pod .nmx{font-size:12.5px;font-weight:700;margin-bottom:3px;}
  .pod .bar{border-radius:8px 8px 0 0;display:flex;align-items:flex-end;justify-content:center;
    color:#fff;font-weight:800;font-size:15px;padding-bottom:5px;}
  .pod.p1 .bar{height:74px;background:linear-gradient(180deg,#e0b93c,#c9a227);}
  .pod.p2 .bar{height:56px;background:linear-gradient(180deg,#b9bec9,#9aa1af);}
  .pod.p3 .bar{height:42px;background:linear-gradient(180deg,#cb9a6b,#b07d4b);}
  .pod .tail{font-size:11.5px;color:var(--ink3);margin-top:5px;}

  .tribute-row{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
    border-radius:10px;background:#fbfcfe;margin-bottom:8px;
  }
  .tribute-row .from,.tribute-row .to{font-weight:700;font-size:13px;}
  .tribute-row .arrow{color:var(--red);font-weight:800;}
  .cardpicker{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;}
  .cardpicker .card{margin-left:0;width:46px;height:70px;}
  .cardpicker .card.pickable{cursor:pointer;}
  .cardpicker .card.pickable:hover{transform:translateY(-5px);border-color:var(--red);}
  .cardpicker .card.disabled{opacity:.32;cursor:not-allowed;}

  .tooltip-note{font-size:11.5px;color:var(--ink3);margin-top:8px;line-height:1.55;}

  /* ---------- toast ---------- */
  #toast{
    position:fixed;left:50%;bottom:120px;transform:translateX(-50%) translateY(14px);
    background:rgba(28,30,42,.94);color:#fff;padding:9px 20px;border-radius:24px;
    font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:.22s;z-index:200;
    box-shadow:0 6px 20px rgba(0,0,0,.28);max-width:80vw;text-align:center;
  }
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  ::-webkit-scrollbar{width:9px;height:9px;}
  ::-webkit-scrollbar-thumb{background:#cdd0da;border-radius:6px;border:2px solid transparent;background-clip:content-box;}
  ::-webkit-scrollbar-thumb:hover{background:#b3b7c4;background-clip:content-box;}
  ::-webkit-scrollbar-track{background:transparent;}

  @media (max-width:1080px){
    aside{flex:0 0 280px;}
  }
  @media (max-width:860px){
    main{flex-direction:column;}
    aside{flex:0 0 auto;height:210px;border-left:0;border-top:1px solid var(--line);}
    .panes{padding:10px 12px 16px;}
    .card{width:52px;height:80px;margin-left:-26px;}
    .brand small{display:none;}
  }

  /* ---- 联机版新增 ---- */
  .lobby{padding:26px 28px;max-width:520px;}
  .lobby h2{margin:0 0 6px;font-size:19px;}
  .lobby p.sub{color:var(--ink3);font-size:13px;margin:0 0 20px;line-height:1.6;}
  .lobby label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin:14px 0 6px;}
  .lobby input{width:100%;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;font-size:14px;font-family:inherit;}
  .lobby input:focus{outline:none;border-color:var(--red);}
  .lobby .row{display:flex;gap:10px;margin-top:18px;}
  .lobby .row .btn{flex:1;justify-content:center;}
  .divider{display:flex;align-items:center;gap:10px;color:var(--ink3);font-size:12px;margin:22px 0 6px;}
  .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line2);}
  .roomcode{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:30px;font-weight:800;letter-spacing:5px;color:var(--red);text-align:center;padding:14px;background:#fdf3f3;border-radius:12px;margin:14px 0;}
  .waitseats{display:flex;flex-direction:column;gap:9px;margin:16px 0;}
  .waitseat{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line2);border-radius:9px;font-size:13.5px;background:#fff;}
  .waitseat .av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;}
  .waitseat .empty{color:var(--ink3);font-style:normal;}
  .waitseat .tag{margin-left:auto;font-size:11.5px;color:var(--ink3);}
  .conn{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2e7d32;margin-right:5px;vertical-align:middle;}
  .conn.off{background:#c62828;}
  .conn.warn{background:#ef6c00;}
  .logrow.k-chat{color:#534AB7;}
  .logrow.k-chat b{color:#3C3489;}
  .logrow.k-skill{background:#f4f0fd;}
  .logrow.k-skill .m{color:#534AB7;font-weight:700;}

  /* 对手卡片：角色信息 */
  .opp .ochar{display:flex;align-items:center;gap:5px;margin-top:5px;
    background:#f7f9fc;border:1px solid var(--line);border-radius:7px;padding:2px 6px 2px 2px;}
  .opp .ochar .cav{width:22px;height:24px;flex:0 0 auto;overflow:hidden;border-radius:5px;
    display:flex;align-items:center;justify-content:flex-end;}
  .opp .ochar .cav .charart{height:34px;width:auto;margin-bottom:-10px;}
  .opp .ochar .cnm{font-size:11.5px;font-weight:800;color:var(--ink);}
  .opp .ochar .csk{font-size:10.5px;font-weight:700;color:var(--red);}
  .opp .ochar .used{font-size:9.5px;font-weight:800;color:#fff;background:#9b9da8;
    padding:0 4px;border-radius:4px;margin-left:auto;}
  .opp .ocount.hidden{color:var(--warn);font-weight:800;}

  /* ==================== 角色立绘（动态 SVG） ==================== */
  .charart{display:block;overflow:visible;}
  .charart *{transform-box:fill-box;transform-origin:center;}
  .charart .ca-body{animation:caBreathe 3.6s ease-in-out infinite;animation-delay:var(--cd,0s);}
  .charart .ca-halo{animation:caPulse 4.2s ease-in-out infinite;animation-delay:var(--cd,0s);}
  .charart .ca-ring{animation:caSpin 18s linear infinite;}
  .charart .ca-eyes{animation:caBlink 5.4s ease-in-out infinite;animation-delay:var(--cd,0s);}
  .charart .ca-hold{animation:caFloat 2.8s ease-in-out infinite;animation-delay:var(--cd,0s);}
  .charart .ca-p1{animation:caDrift 5.2s ease-in-out infinite;}
  .charart .ca-p2{animation:caDrift 6.4s ease-in-out infinite .8s;}
  .charart .ca-p3{animation:caDrift 7.1s ease-in-out infinite 1.6s;}
  @keyframes caBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.012)}}
  @keyframes caPulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
  @keyframes caSpin{to{transform:rotate(360deg)}}
  @keyframes caBlink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
  @keyframes caFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(-3deg)}}
  @keyframes caDrift{0%,100%{transform:translate(0,0);opacity:.5}50%{transform:translate(5px,-9px);opacity:.95}}
  @media (prefers-reduced-motion: reduce){
    .charart .ca-body,.charart .ca-halo,.charart .ca-ring,.charart .ca-eyes,
    .charart .ca-hold,.charart .ca-p1,.charart .ca-p2,.charart .ca-p3{animation:none;}
  }

  /* ==================== 选角界面 ==================== */
  .charscreen{max-width:1000px;width:100%;}
  .charscreen h2{margin:0 0 4px;font-size:20px;font-weight:800;}
  .charscreen .sub{color:var(--ink3);font-size:12.5px;margin-bottom:14px;line-height:1.6;}
  .chargrid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:6px 0 4px;}
  .charcard{
    position:relative;border:1.5px solid var(--line2);border-radius:13px;background:#fbfcfe;
    padding:9px 9px 10px;cursor:pointer;transition:.16s;overflow:hidden;text-align:center;
  }
  .charcard:hover{border-color:#e0a3a3;background:#fff;transform:translateY(-3px);
    box-shadow:0 8px 22px rgba(20,20,40,.12);}
  .charcard.sel{border-color:var(--red);background:#fff8f8;
    box-shadow:0 0 0 3px rgba(198,40,40,.13),0 10px 24px rgba(198,40,40,.16);}
  .charcard.taken{opacity:.44;cursor:not-allowed;filter:grayscale(.7);}
  .charcard.taken:hover{transform:none;border-color:var(--line2);box-shadow:none;}
  .charcard .artwrap{
    height:126px;display:flex;align-items:flex-end;justify-content:center;
    border-radius:10px;margin-bottom:7px;overflow:hidden;position:relative;
  }
  .charcard .artwrap .charart{width:auto;height:132px;margin-bottom:-8px;}
  .charcard .cname{font-size:14.5px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:5px;}
  .charcard .cname .g{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:6px;
    background:#eef0f5;color:var(--ink3);border:1px solid var(--line);}
  .charcard .cname .g.f{background:#fdeef4;color:#b5396e;border-color:#f6d3e2;}
  .charcard .cname .g.m{background:#eaf1fb;color:#2c5d9e;border-color:#d3e1f5;}
  .charcard .cskill{font-size:11.5px;font-weight:800;color:var(--red);margin-top:4px;}
  .charcard .cskill .ty{font-size:10px;font-weight:700;color:#fff;background:var(--red);
    padding:1px 5px;border-radius:5px;margin-left:4px;vertical-align:1px;}
  .charcard .cskill .ty.p{background:#3b6d11;}
  .charcard .cdesc{font-size:11px;color:var(--ink2);line-height:1.5;margin-top:5px;min-height:32px;}
  .charcard .pickflag{
    position:absolute;top:7px;right:7px;font-size:10.5px;font-weight:800;color:#fff;
    background:var(--red);border-radius:6px;padding:1px 6px;
  }
  .charcard .takenflag{
    position:absolute;top:7px;right:7px;font-size:10.5px;font-weight:800;color:#fff;
    background:#8b8b96;border-radius:6px;padding:1px 6px;
  }
  .charpicker-foot{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap;}
  .charpicker-foot .spacer{flex:1;}
  .charguide{background:#f7f9fc;border:1px solid var(--line);border-left:3px solid var(--blue);
    border-radius:8px;padding:8px 11px;font-size:11.5px;color:var(--ink2);line-height:1.6;margin-top:12px;}
  .charguide b{color:var(--ink);}
  .charpicked-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
  .pickchip{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:16px;
    background:#eef0f5;border:1px solid var(--line);color:var(--ink2);}
  .pickchip.me{background:#fdeeee;border-color:#f3d5d5;color:var(--red);}

  /* ==================== 技能栏 ==================== */
  .skillbar{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap;}
  .skillchip{
    display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
    border:1px solid var(--line2);border-radius:9px;padding:4px 9px;background:#fbfcfe;
  }
  .skillchip b{font-size:12.5px;}
  .skillchip .mini-art{width:26px;height:26px;border-radius:7px;overflow:hidden;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;}
  .skillchip .mini-art .charart{height:40px;width:auto;margin-bottom:-12px;}
  .skillchip .ty{font-size:10px;font-weight:800;color:#fff;padding:1px 5px;border-radius:5px;}
  .skillchip .ty.p{background:#3b6d11;}
  .skillchip .ty.a{background:var(--red);}
  .btnskill{
    border:1px solid var(--red);background:var(--red);color:#fff;font-weight:800;
    padding:6px 14px;border-radius:9px;font-size:12.5px;cursor:pointer;font-family:inherit;
    transition:.14s;white-space:nowrap;
  }
  .btnskill:hover:not(:disabled){background:#b71c1c;}
  .btnskill:disabled{background:#e9eaef;border-color:#d9dbe3;color:#9b9da8;cursor:not-allowed;}
  .btnskill.armed{animation:skillPulse 1.5s ease-in-out infinite;}
  @keyframes skillPulse{0%,100%{box-shadow:0 0 0 0 rgba(198,40,40,.5)}50%{box-shadow:0 0 0 7px rgba(198,40,40,0)}}
  .skillreason{font-size:11.5px;color:var(--ink3);}
  .dossier{display:flex;gap:7px;flex-wrap:wrap;font-size:11.5px;}
  .dossier .row{background:#f4f0fd;border:1px solid #e2dbf7;color:#4a3f8f;
    border-radius:7px;padding:2px 8px;font-weight:700;}
  .peekbox{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:5px;}
  .peekbox .plabel{font-size:11px;color:var(--ink3);}
  .peekbox .mini{margin-right:2px;}

  /* ==================== 技能释放全屏动画 ==================== */
  #skillfx{
    position:fixed;inset:0;z-index:180;display:none;align-items:center;justify-content:center;
    background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.97) 0%, rgba(244,240,253,.94) 45%, rgba(24,26,38,.72) 100%);
    backdrop-filter:blur(3px);cursor:pointer;overflow:hidden;
  }
  #skillfx.show{display:flex;animation:fxIn .26s ease;}
  #skillfx.out{animation:fxOut .3s ease forwards;}
  @keyframes fxIn{from{opacity:0}to{opacity:1}}
  @keyframes fxOut{to{opacity:0}}
  .fx-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;}
  .fx-art{position:relative;height:340px;display:flex;align-items:flex-end;justify-content:center;}
  .fx-art .charart{height:340px;width:auto;animation:fxArtIn .55s cubic-bezier(.2,.9,.3,1.4) both;}
  @keyframes fxArtIn{from{transform:scale(.72) translateY(26px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
  .fx-burst{
    position:absolute;left:50%;top:46%;width:500px;height:500px;margin:-250px 0 0 -250px;
    border-radius:50%;border:2px solid var(--fxcolor,#c62828);opacity:.5;
    animation:fxBurst 1.15s ease-out infinite;
  }
  .fx-burst.b2{animation-delay:.35s;border-style:dashed;}
  .fx-burst.b3{animation-delay:.7s;}
  @keyframes fxBurst{from{transform:scale(.32);opacity:.62}to{transform:scale(1.15);opacity:0}}
  .fx-rays{
    position:absolute;left:50%;top:46%;width:640px;height:640px;margin:-320px 0 0 -320px;
    background:conic-gradient(from 0deg,
      transparent 0deg, var(--fxcolor,#c62828) 6deg, transparent 14deg,
      transparent 30deg, var(--fxcolor,#c62828) 36deg, transparent 44deg,
      transparent 60deg, var(--fxcolor,#c62828) 66deg, transparent 74deg,
      transparent 90deg, var(--fxcolor,#c62828) 96deg, transparent 104deg,
      transparent 120deg, var(--fxcolor,#c62828) 126deg, transparent 134deg,
      transparent 150deg, var(--fxcolor,#c62828) 156deg, transparent 164deg);
    opacity:.2;animation:fxSpin 6s linear infinite;mask:radial-gradient(circle,#000 12%,transparent 68%);
    -webkit-mask:radial-gradient(circle,#000 12%,transparent 68%);
  }
  @keyframes fxSpin{to{transform:rotate(360deg)}}
  .fx-name{
    font-size:44px;font-weight:800;letter-spacing:5px;color:var(--fxcolor,#c62828);
    text-shadow:0 2px 0 #fff,0 0 24px rgba(255,255,255,.9);
    animation:fxNameIn .4s cubic-bezier(.2,.9,.3,1.5) .22s both;
  }
  @keyframes fxNameIn{from{transform:scale(.5) translateY(14px);opacity:0}to{transform:none;opacity:1}}
  .fx-char{font-size:16.5px;font-weight:800;color:var(--ink);animation:fxNameIn .4s .34s both;}
  .fx-desc{font-size:13.5px;color:var(--ink2);max-width:560px;text-align:center;line-height:1.6;
    animation:fxNameIn .4s .44s both;}
  .fx-skip{font-size:11.5px;color:var(--ink3);margin-top:2px;}
  .fx-target{font-size:12.5px;font-weight:700;color:var(--red);animation:fxNameIn .4s .5s both;}
  @media (prefers-reduced-motion: reduce){
    .fx-art .charart,.fx-burst,.fx-rays,.fx-name,.fx-char,.fx-desc,.fx-target{animation:none;}
  }

  @media (max-width:900px){
    .chargrid{grid-template-columns:repeat(3,1fr);}
    .charcard .artwrap{height:104px;}
    .charcard .artwrap .charart{height:110px;}
    .fx-art{height:230px;} .fx-art .charart{height:230px;}
    .fx-name{font-size:32px;letter-spacing:3px;}
  }
  @media (max-width:600px){
    .chargrid{grid-template-columns:repeat(2,1fr);}
    .fx-burst,.fx-rays{display:none;}
  }


  /* ==================== V3 视觉精致化（追加层，可整体移除） ==================== */
  :root{
    --grad-red:linear-gradient(180deg,#e0483f 0%,#c62828 56%,#a71e1e 100%);
    --grad-red-hover:linear-gradient(180deg,#ea544b 0%,#b71c1c 100%);
  }

  /* ---- 底色：更有层次的柔和光感 ---- */
  body{
    background:
      radial-gradient(900px 480px at 16% -10%, #ffffff 0%, rgba(255,255,255,0) 58%),
      radial-gradient(1200px 640px at 50% 122%, #e8ebf4 0%, rgba(232,235,244,0) 60%),
      linear-gradient(180deg,#f5f6fa 0%,#eef0f7 100%);
  }
  .board{
    background:
      radial-gradient(1000px 460px at 50% -12%, #ffffff 0%, rgba(255,255,255,0) 62%),
      radial-gradient(720px 420px at 50% 58%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 68%),
      linear-gradient(180deg,#f6f7fb 0%,#eef1f8 100%);
  }

  /* ---- 顶栏 ---- */
  .topbar{
    background:linear-gradient(180deg,#ffffff 0%,#fbfbfe 100%);
    border-bottom:1px solid rgba(30,32,60,.09);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 18px rgba(24,26,48,.05);
  }
  .brand h1{
    background:linear-gradient(118deg,#c62828 20%,#e06a3c 90%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .badge{
    background:linear-gradient(180deg,#f6f7fb,#eef0f6);
    border:1px solid rgba(30,32,60,.10);
  }

  /* ---- 按钮 ---- */
  .btn{
    border:1px solid rgba(30,32,60,.14);
    background:linear-gradient(180deg,#ffffff 0%,#f6f7fb 100%);
    box-shadow:0 1px 2px rgba(20,22,44,.07),0 2px 6px rgba(20,22,44,.05);
  }
  .btn:hover{
    background:linear-gradient(180deg,#ffffff 0%,#eef0f7 100%);
    border-color:#b4b8c8;transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(20,22,44,.12);
  }
  .btn.primary{
    background:var(--grad-red);border-color:#a01c1c;color:#fff;
    box-shadow:0 2px 7px rgba(198,40,40,.32),0 1px 0 rgba(255,255,255,.25) inset;
    text-shadow:0 1px 1px rgba(0,0,0,.16);
  }
  .btn.primary:hover{
    background:var(--grad-red-hover);transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(198,40,40,.36),0 1px 0 rgba(255,255,255,.22) inset;
  }
  .btn.ghost:hover{background:rgba(30,32,60,.05);}

  /* ---- 手牌：真实扑克牌质感 ---- */
  .card{
    border:1px solid rgba(38,42,70,.17);
    background:linear-gradient(168deg,#ffffff 0%,#f9fafd 86%,#eff1f7 100%);
    border-radius:8px;
    box-shadow:0 1px 2px rgba(24,26,48,.16),0 3px 9px rgba(24,26,48,.10);
  }
  .card::before{
    content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(255,255,255,.35) inset;
  }
  .card:hover{transform:translateY(-7px);box-shadow:0 6px 16px rgba(24,26,48,.18);}
  .card.sel{
    transform:translateY(-20px);
    border-color:#d3453c;
    box-shadow:0 9px 22px rgba(198,40,40,.32),0 0 0 1px #d3453c inset;
  }
  .card.sel::after{
    border-radius:8px;box-shadow:0 0 0 2px rgba(211,69,60,.85) inset;
  }
  .card.hintcard{
    border-color:#3d9142;
    box-shadow:0 0 0 2px rgba(61,145,66,.35),0 4px 12px rgba(61,145,66,.22);
  }
  .mini{
    background:linear-gradient(180deg,#ffffff,#f6f8fc);
    border:1px solid rgba(38,42,70,.15);
    box-shadow:0 1px 3px rgba(24,26,48,.13);
  }

  /* ---- 桌面出牌区 ---- */
  .lastplay.has{
    background:rgba(255,255,255,.82);
    box-shadow:0 2px 10px rgba(24,26,48,.06),0 12px 34px rgba(24,26,48,.06);
    border-color:rgba(38,42,70,.12);
  }
  .lastplay.hot{
    background:linear-gradient(180deg,rgba(255,247,246,.94),rgba(255,240,238,.9));
    border-color:#efb9b2;
  }
  .combolabel{
    background:linear-gradient(180deg,#ffffff,#fdeeec);
    border:1px solid #f2c9c5;color:#c0392b;
    box-shadow:0 1px 5px rgba(198,40,40,.13),0 1px 0 #fff inset;
  }
  .combolabel.boom{
    background:linear-gradient(180deg,#fffdf6,#fff2dd);
    border-color:#ffd9a0;color:#d96c00;
    box-shadow:0 1px 6px rgba(230,120,20,.16);
  }

  /* ---- 对手席 ---- */
  .opp{
    background:linear-gradient(180deg,#ffffff 0%,#fafbfe 100%);
    border:1px solid rgba(30,32,60,.10);
    border-radius:12px;
    box-shadow:0 1px 2px rgba(24,26,48,.06),0 6px 16px rgba(24,26,48,.07);
  }
  .opp.turn{
    border-color:#e0837a;
    box-shadow:0 0 0 3px rgba(198,40,40,.10),0 8px 22px rgba(198,40,40,.15);
  }
  .opp .dot{box-shadow:0 1px 3px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.3) inset;}

  /* ---- 底部手牌栏 / 侧栏 ---- */
  .handbar{
    background:linear-gradient(180deg,#ffffff 0%,#fafafd 100%);
    border-top:1px solid rgba(30,32,60,.08);
    box-shadow:0 -6px 22px rgba(24,26,48,.06);
  }
  aside{background:linear-gradient(180deg,#ffffff 0%,#fcfcff 100%);border-left:1px solid rgba(30,32,60,.08);}
  .tab.active{
    background:linear-gradient(180deg,rgba(198,40,40,.06),rgba(198,40,40,0));
  }
  .btnskill{
    background:var(--grad-red);border:1px solid #a01c1c;
    box-shadow:0 2px 7px rgba(198,40,40,.30),0 1px 0 rgba(255,255,255,.22) inset;
    text-shadow:0 1px 1px rgba(0,0,0,.15);
  }
  .btnskill:hover:not(:disabled){
    background:var(--grad-red-hover);transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(198,40,40,.34);
  }
  .skillchip{
    background:linear-gradient(180deg,#ffffff,#f7f8fc);
    border:1px solid rgba(30,32,60,.11);
    box-shadow:0 1px 3px rgba(24,26,48,.07);
  }

  /* ---- 弹窗 / 遮罩 ---- */
  .modal{
    background:linear-gradient(180deg,#ffffff 0%,#fcfcff 100%);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 26px 64px rgba(20,22,44,.24),0 2px 8px rgba(20,22,44,.10),0 1px 0 rgba(255,255,255,.9) inset;
  }
  .opt{
    border:1.5px solid rgba(30,32,60,.12);
    background:linear-gradient(180deg,#fcfdff,#f7f8fc);
    box-shadow:0 1px 3px rgba(24,26,48,.05);
  }
  .opt:hover{
    border-color:#e0a3a3;background:linear-gradient(180deg,#fffdfd,#fff5f4);
    transform:translateY(-1px);box-shadow:0 5px 14px rgba(198,40,40,.10);
  }
  .opt.active{
    background:linear-gradient(180deg,#fff6f5,#fdeeed);
    box-shadow:0 0 0 3px rgba(198,40,40,.10),0 6px 16px rgba(198,40,40,.12);
  }
  .namefield{background:linear-gradient(180deg,#fcfdff,#f7f8fc);border:1px solid rgba(30,32,60,.13);}
  .namefield input:focus{outline:none;}
  .namefield:focus-within{border-color:#d3453c;box-shadow:0 0 0 3px rgba(198,40,40,.08);}
  .overlay{background:rgba(22,24,40,.52);backdrop-filter:blur(6px);}
  #toast{
    background:rgba(24,26,40,.92);backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 10px 30px rgba(0,0,0,.30);
  }

  /* ---- 选角界面：每人专属色晕 + 卡片质感 ---- */
  .charscreen h2{
    background:linear-gradient(118deg,#c62828 30%,#e06a3c 90%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .charcard{
    border:1.5px solid rgba(30,32,60,.10);
    background:linear-gradient(180deg,#ffffff 0%,#fafbfe 100%);
    border-radius:15px;
    box-shadow:0 1px 2px rgba(24,26,48,.05),0 8px 22px rgba(24,26,48,.07);
  }
  .charcard:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(24,26,48,.13);
    border-color:rgba(198,40,40,.30);
  }
  .charcard.sel{
    border-color:var(--red);
    background:linear-gradient(180deg,#fffdfd,#fff6f5);
    box-shadow:0 0 0 3px rgba(198,40,40,.12),0 14px 30px rgba(198,40,40,.17);
  }
  .charcard .artwrap{
    border-radius:11px;
    border:1px solid rgba(30,32,60,.05);
    background:radial-gradient(110px 84px at 50% 40%,#f4f7ff,#fbfcfe 70%,#f7f8fc);
  }
  .charcard[data-cid="lingyue"]  .artwrap{background:radial-gradient(110px 84px at 50% 42%,rgba(143,211,255,.30),rgba(143,211,255,.05) 72%,transparent);}
  .charcard[data-cid="taonai"]   .artwrap{background:radial-gradient(110px 84px at 50% 42%,rgba(255,168,207,.30),rgba(255,168,207,.05) 72%,transparent);}
  .charcard[data-cid="suyan"]    .artwrap{background:radial-gradient(110px 84px at 50% 42%,rgba(255,217,160,.30),rgba(255,217,160,.05) 72%,transparent);}
  .charcard[data-cid="lihuo"]    .artwrap{background:radial-gradient(110px 84px at 50% 42%,rgba(255,92,92,.24),rgba(255,92,92,.05) 72%,transparent);}
  .charcard[data-cid="jingchen"] .artwrap{background:radial-gradient(110px 84px at 50% 42%,rgba(159,198,255,.30),rgba(159,198,255,.05) 72%,transparent);}
  .charcard[data-cid="alie"]     .artwrap{background:radial-gradient(110px 84px at 50% 42%,rgba(255,138,61,.28),rgba(255,138,61,.05) 72%,transparent);}
  .charcard[data-cid="gushen"]   .artwrap{background:radial-gradient(110px 84px at 50% 42%,rgba(217,180,92,.28),rgba(217,180,92,.05) 72%,transparent);}
  .charcard[data-cid="xingshuo"] .artwrap{background:radial-gradient(110px 84px at 50% 42%,rgba(168,220,255,.32),rgba(168,220,255,.05) 72%,transparent);}

  /* ---- 技能动画定格 ---- */
  #skillfx{
    background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.98) 0%, rgba(246,243,253,.95) 42%, rgba(22,24,40,.74) 100%);
  }
  .fx-name{text-shadow:0 2px 0 #fff,0 0 28px rgba(255,255,255,.95),0 6px 22px rgba(0,0,0,.10);}

  /* ---- 滚动条 ---- */
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-thumb{
    background:rgba(60,64,92,.24);border-radius:8px;border:2.5px solid transparent;background-clip:content-box;
  }
  ::-webkit-scrollbar-thumb:hover{background:rgba(60,64,92,.4);background-clip:content-box;}

  /* ==================== 技能台词气泡（右下角） ==================== */
  .line-bubbles{
    position:fixed;right:14px;bottom:14px;z-index:165;
    display:flex;flex-direction:column;align-items:flex-end;gap:8px;
    pointer-events:none;max-width:min(340px,52vw);
  }
  .line-bubble{
    position:relative;max-width:100%;
    padding:9px 13px 10px 13px;border-radius:14px 14px 4px 14px;
    background:linear-gradient(135deg,#ffffff,#f5f3ff);
    border:1px solid #ded7f6;
    box-shadow:0 8px 22px rgba(30,32,60,.16),0 2px 0 rgba(30,32,60,.04);
    animation:bubbleIn .28s cubic-bezier(.2,.9,.3,1.35) both;
    overflow:hidden;
  }
  .line-bubble.out{animation:bubbleOut .34s ease forwards;}
  @keyframes bubbleIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
  @keyframes bubbleOut{to{opacity:0;transform:translateY(-6px) scale(.97)}}
  .lb-head{display:flex;align-items:center;gap:6px;margin-bottom:3px;}
  .lb-char{font-size:12.5px;font-weight:900;color:#4a3f8f;letter-spacing:.2px;}
  .lb-type{
    font-size:10px;font-weight:800;padding:1px 6px;border-radius:8px;
    color:#fff;background:#8e7cc3;
  }
  .lb-type.active{background:linear-gradient(135deg,#ef6c00,#f9a825);}
  .lb-type.passive{background:linear-gradient(135deg,#5c6bc0,#7e57c2);}
  .lb-skill{font-size:10.5px;color:#8a83a8;font-weight:700;}
  .lb-text{font-size:14px;line-height:1.45;color:#2b2d45;font-weight:700;}
  .lb-who{font-size:10.5px;color:#9791ad;margin-top:3px;text-align:right;}
  .lb-bar{position:absolute;left:0;bottom:0;height:2.5px;width:100%;background:#ded7f6;transform-origin:left center;}
  .lb-bar::after{
    content:'';display:block;height:100%;width:100%;
    background:linear-gradient(90deg,#8e7cc3,#ef6c00);
    animation:lbBar 2.5s linear forwards;
  }
  @keyframes lbBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
  @media (prefers-reduced-motion:reduce){
    .line-bubble{animation:none}
    .lb-bar::after{animation:none}
  }

  /* ==================== 音效开关（右上角喇叭） ==================== */
  .btn.mutebtn{
    min-width:38px;padding:6px 9px;font-size:15px;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;gap:2px;
  }
  .btn.mutebtn.off{opacity:.62;}
  .btn.mutebtn.off .mico{filter:grayscale(1);}