:root{
    --red:#e05555; --red-d:#c0392b; --red-bg:#fdecea; --red-soft:#fff6f5;
    --blue:#4a7fe0; --blue-d:#2c5cb8; --blue-bg:#ecf2fe; --blue-soft:#f6f9ff;
    --ink:#1f242e; --ink2:#3a4150; --muted:#79808f; --muted2:#9aa1ad;
    --line:#e3e8f1; --card:#fff; --radius:20px;
    --shadow:0 8px 26px rgba(28,39,72,.09);
    --shadow-sm:0 3px 14px rgba(28,39,72,.06);
    --ok:#27a457; --ok-bg:#e9f9ef;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html{-webkit-text-size-adjust:100%;}
  body{
    font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
    background-color:#eef1f8;
    background-image:radial-gradient(1100px 620px at 50% -8%,#ffffff 0%,#eef1f8 58%,#e6ebf5 100%);
    background-attachment:fixed;
    color:var(--ink); min-height:100vh; font-size:26px; line-height:1.42;
  }
  .hidden{display:none !important;}
  .screen{min-height:100vh;display:flex;flex-direction:column;}
  button{font-family:inherit;color:inherit;}

  /* ============ 主页 ============ */
  #setup{padding:40px 5vw 34px;max-width:1120px;margin:0 auto;width:100%;}
  .hero{text-align:center;margin-bottom:14px;}
  .logo{font-size:54px;font-weight:800;letter-spacing:8px;margin-bottom:10px;}
  .logo .r{color:var(--red);} .logo .b{color:var(--blue);}
  .sub{font-size:24px;color:var(--muted);}
  .sub b{color:var(--blue-d);font-weight:700;}

  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
        padding:26px 30px;margin-bottom:20px;box-shadow:var(--shadow-sm);}
  .card h3{font-size:27px;color:var(--ink2);font-weight:700;margin-bottom:18px;
           display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .card h3 .hint{font-size:21px;font-weight:400;color:var(--muted2);margin-left:auto;}
  .stepNo{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
          font-size:23px;font-weight:800;color:#fff;
          background:linear-gradient(135deg,var(--red),var(--blue));
          box-shadow:0 4px 12px rgba(74,127,224,.28);}
  kbd{font-family:inherit;font-size:20px;font-weight:700;color:var(--blue-d);
      background:var(--blue-bg);border:1px solid #c9d9f6;border-radius:8px;padding:2px 10px;}

  .chips{display:flex;gap:14px;flex-wrap:wrap;}
  .chip{padding:12px 30px;border-radius:16px;border:2px solid var(--line);background:#fafbfe;
        font-size:28px;font-weight:700;color:var(--ink2);cursor:pointer;user-select:none;
        display:flex;align-items:baseline;gap:12px;transition:all .15s;}
  .chip .cnt{font-size:20px;font-weight:600;color:var(--muted2);}
  .chip:hover{border-color:#c3d2ee;}
  .chip.on{border-color:var(--blue);background:var(--blue-bg);color:#2456bd;
           box-shadow:0 4px 14px rgba(74,127,224,.18);}
  .chip.on .cnt{color:#5b83d8;}
  .chip .clsDel{margin-left:6px;font-size:22px;font-weight:700;color:var(--muted2);
                cursor:pointer;line-height:1;padding:0 4px;border-radius:6px;transition:.15s;}
  .chip .clsDel:hover{color:#fff;background:var(--red);}

  .nameRow{display:flex;gap:20px;}
  .nameRow input{flex:1;font-size:30px;padding:16px 20px;border-radius:14px;
                 border:2px solid var(--line);outline:none;min-width:0;transition:.15s;}
  .nameRow input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(74,127,224,.14);}
  select{font-size:28px;padding:14px 22px;border-radius:14px;border:2px solid var(--line);
         background:#fff;color:var(--ink2);cursor:pointer;}
  select:focus{border-color:var(--blue);outline:none;}

  /* 抽人区 */
  .drawRow{display:flex;align-items:stretch;gap:16px;margin-bottom:16px;}
  .drawBox{flex:1;border-radius:18px;padding:16px 22px 20px;text-align:center;transition:all .2s;}
  .drawBox.red{background:var(--red-bg);border:2px solid #f2b9b9;}
  .drawBox.blue{background:var(--blue-bg);border:2px solid #b9cdf5;}
  .drawBox.drawing{border-style:dashed;animation:pulse .45s infinite alternate;}
  @keyframes pulse{from{opacity:.6;}to{opacity:1;}}
  .vsBadge{flex:none;align-self:center;width:64px;height:64px;border-radius:50%;
           display:grid;place-items:center;font-size:26px;font-weight:800;color:var(--muted2);
           background:#fff;border:2px solid var(--line);box-shadow:var(--shadow-sm);}
  .dlabel{font-size:22px;color:var(--muted);letter-spacing:1px;margin-bottom:6px;}
  .dname{font-size:46px;font-weight:800;min-height:58px;line-height:58px;letter-spacing:2px;}
  .drawBox.red .dname{color:var(--red-d);}
  .drawBox.blue .dname{color:var(--blue-d);}
  .drawBtn{font-size:27px;padding:14px 28px;border-radius:14px;border:2px solid var(--line);
           background:#fff;font-weight:700;color:var(--ink2);cursor:pointer;transition:all .15s;}
  .drawBtn:hover{border-color:var(--blue);color:var(--blue-d);background:var(--blue-soft);}
  .drawBtn:active{transform:scale(.96);}
  .drawBtn.ghost{border-style:dashed;color:var(--muted);font-weight:600;}
  .drawBtn.ghost:hover{border-color:var(--muted);color:var(--ink2);background:#f7f8fb;}
  .drawBox.clickable{cursor:pointer;transition:all .15s;}
  .drawBox.clickable:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(28,39,72,.1);}
  .drawBox.clickable:active{transform:scale(.98);}
  .drawFoot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px;flex-wrap:wrap;}
  .footLinks{display:flex;gap:18px;}
  .footLink{font-size:21px;color:var(--blue-d);text-decoration:none;font-weight:600;cursor:pointer;}
  .footLink:hover{text-decoration:underline;}

  /* ============ 班级行 ============ */
  .classRow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .classRow .chips{flex:1;min-width:0;}
  .classRow:not(.has-roster) .chips{display:none;}  /* 无名单时隐藏 chips，按钮居左 */

  /* ============ 限时下拉框（与词库按钮同尺寸） ============ */
  .durSelect{font-size:26px;padding:14px 26px;border-radius:14px;border:2px solid var(--line);
              background:#fff;font-weight:700;color:var(--ink2);cursor:pointer;outline:none;
              font-family:"Microsoft YaHei","PingFang SC",sans-serif;}
  .durSelect:focus{border-color:var(--blue);}

  /* 选名弹窗 */
  .pickTabs{display:flex;gap:10px;margin-bottom:18px;}
  .pickTab{flex:1;padding:12px;border:none;border-radius:12px;font-size:22px;font-weight:700;
           cursor:pointer;background:#eef1f8;color:var(--muted);transition:.15s;}
  .pickTab.on.red-on{background:var(--red-bg);color:var(--red-d);}
  .pickTab.on.blue-on{background:var(--blue-bg);color:var(--blue-d);}
  .pickGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;max-height:50vh;overflow-y:auto;}
  .pickName{padding:12px 8px;border-radius:10px;background:#f5f7fc;text-align:center;
            font-size:21px;font-weight:600;color:var(--ink2);cursor:pointer;transition:.12s;
            border:2px solid transparent;}
  .pickName:hover{background:var(--blue-bg);color:var(--blue-d);}
  .pickName.cur{border-color:var(--blue);background:var(--blue-bg);color:var(--blue-d);}
  .pickEmpty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:20px;padding:30px 0;}

  .startBtn{width:100%;padding:22px;border:none;border-radius:20px;font-size:38px;font-weight:800;
            color:#fff;background:linear-gradient(90deg,var(--red),var(--blue));cursor:pointer;
            box-shadow:0 10px 26px rgba(74,127,224,.32);letter-spacing:10px;transition:all .15s;}
  .startBtn:hover{box-shadow:0 12px 32px rgba(74,127,224,.42);filter:brightness(1.03);}
  .startBtn:active{transform:scale(.985);}

  /* 历史面板 */
  #hisPanel .row{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px;}
  #hisPanel .stat{background:#f5f7fb;border:1px solid var(--line);border-radius:14px;
                  padding:12px 22px;font-size:25px;}
  #hisPanel .stat b{color:var(--blue-d);}
  #recentList{margin-top:8px;display:flex;flex-direction:column;gap:8px;}
  .recentItem{display:flex;justify-content:space-between;align-items:center;gap:14px;
              background:#f8f9fc;border-radius:12px;padding:11px 18px;font-size:25px;}
  .clearBtn{margin-top:16px;padding:10px 26px;border-radius:12px;border:2px solid #f0b9b9;
            background:#fff5f5;color:var(--red-d);font-size:24px;cursor:pointer;transition:.15s;}
  .clearBtn:hover{background:#ffecec;border-color:var(--red);}
  .mini{font-size:23px;color:var(--muted);}

  /* ============ 全屏按钮 ============ */
  #fsBtn{position:fixed;top:18px;right:18px;z-index:999;display:flex;align-items:center;gap:8px;
         padding:9px 18px;border-radius:13px;border:2px solid var(--line);
         background:rgba(255,255,255,.94);color:var(--ink2);font-size:21px;font-weight:700;
         cursor:pointer;transition:all .15s;box-shadow:var(--shadow-sm);}
  #fsBtn:hover{border-color:var(--blue);color:var(--blue-d);background:var(--blue-bg);}
  #fsBtn:active{transform:scale(.96);}
  #fsBtn svg{width:21px;height:21px;display:block;}
  #fsBtn .icoExit{display:none;}
  #fsBtn.on .icoEnter{display:none;}
  #fsBtn.on .icoExit{display:block;}
  #fsBtn.on{opacity:.5;}

  /* ============ 对战页 ============ */
  #battle{padding:0;}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 4vw 6px;gap:2vw;}
  .pcard{flex:1;border-radius:18px;padding:12px 22px;display:flex;align-items:center;
         justify-content:space-between;gap:16px;}
  .pcard.red{background:var(--red-bg);border:2px solid #f0b4b4;}
  .pcard.blue{background:var(--blue-bg);border:2px solid #b6cbf4;}
  .pinfo{display:flex;flex-direction:column;min-width:0;}
  .pinfo.right{align-items:flex-end;text-align:right;}
  .prole{font-size:19px;color:var(--muted);letter-spacing:1px;margin-bottom:2px;}
  .pname{font-size:32px;font-weight:800;max-width:8em;overflow:hidden;
         text-overflow:ellipsis;white-space:nowrap;line-height:1.2;}
  .pcard.red .pname{color:var(--red-d);} .pcard.blue .pname{color:var(--blue-d);}
  .pscore{font-size:52px;font-weight:800;line-height:1;}
  .pcard.red .pscore{color:var(--red);} .pcard.blue .pscore{color:var(--blue);}
  .timerWrap{flex:none;text-align:center;padding:0 8px;}
  .tlabel{font-size:19px;color:var(--muted);letter-spacing:1px;}
  .timer{font-size:52px;font-weight:800;color:var(--ink2);min-width:2.4em;line-height:1.05;}
  .timer.warn{color:var(--red);animation:blink 1s infinite;}
  @keyframes blink{50%{opacity:.45;}}

  .qzone{text-align:center;padding:10px 4vw 16px;}
  #qWord{font-size:70px;font-weight:800;color:#1b2029;letter-spacing:2px;line-height:1.14;}
  #qWord.cn{font-size:54px;}
  #qWord.sent{font-size:44px;}
  #qWord.chunk{font-size:52px;}
  #qTip{font-size:24px;color:var(--muted2);margin-top:8px;}

  .arena{flex:1;display:flex;gap:2.2vw;padding:0 3vw 22px;}
  .side{flex:1;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:20px;
        border:2px solid transparent;transition:border-color .2s;}
  .side.red{background:var(--red-soft);border-color:#f6dada;}
  .side.blue{background:var(--blue-soft);border-color:#dbe6fa;}
  .opt{font-size:32px;padding:20px 18px;border-radius:16px;border:2px solid var(--line);
       background:#fff;cursor:pointer;text-align:center;line-height:1.3;color:var(--ink);
       box-shadow:0 2px 8px rgba(28,39,72,.05);transition:all .12s;}
  .opt:hover{border-color:#c3d2ee;transform:translateY(-2px);}
  .side.red .opt:hover{border-color:var(--red);}
  .side.blue .opt:hover{border-color:var(--blue);}
  .opt:active{transform:translateY(0) scale(.99);}
  .opt.good{background:var(--ok-bg);border-color:var(--ok);color:#177a3c;font-weight:800;}
  .opt.bad{background:var(--red-bg);border-color:var(--red);color:var(--red-d);opacity:.72;}
  .side.locked .opt{pointer-events:none;}
  .streakTag{text-align:center;font-size:24px;font-weight:800;height:32px;color:var(--muted2);}
  .streakTag.red{color:var(--red);} .streakTag.blue{color:var(--blue);}
  .fx{position:fixed;pointer-events:none;font-size:44px;font-weight:800;z-index:99;
      animation:rise 1s forwards;}
  @keyframes rise{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-90px);}}
  #pg1,#pg2{font-size:24px;min-height:34px;text-align:center;color:var(--ink2);font-weight:700;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .opt.picked{background:#eef3fb;border-color:#9db6e8;color:#9aa3b2;}

  /* ============ 结果页 ============ */
  #result{align-items:center;justify-content:center;padding:30px 6vw;text-align:center;}
  .crown{font-size:88px;animation:pop .6s;}
  @keyframes pop{0%{transform:scale(.2);}70%{transform:scale(1.25);}100%{transform:scale(1);}}
  #winName{font-size:58px;font-weight:800;margin:6px 0 4px;}
  #finalScore{font-size:40px;color:var(--ink2);margin-bottom:24px;}
  #finalScore .r{color:var(--red);font-weight:800;} #finalScore .b{color:var(--blue);font-weight:800;}
  .wrongBox{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 26px;
            max-width:900px;width:100%;box-shadow:var(--shadow-sm);margin-bottom:26px;}
  .wrongBox h4{font-size:28px;color:var(--red-d);margin-bottom:14px;}
  #wrongChips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
  #wrongChips span{background:var(--red-bg);color:var(--red-d);border-radius:12px;
                   padding:8px 18px;font-size:26px;}
  .btnRow{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
  .btnRow button{font-size:29px;padding:18px 34px;border-radius:16px;border:none;cursor:pointer;
                 font-weight:700;transition:all .15s;}
  .btnRow button:active{transform:scale(.97);}
  #againBtn{background:linear-gradient(90deg,var(--red),var(--blue));color:#fff;
            box-shadow:0 8px 20px rgba(74,127,224,.3);}
  #reviveBtn{background:#fff5dc;color:#9a6a00;border:2px solid #f0d089 !important;}
  #homeBtn{background:#eef1f6;color:var(--ink2);}

  /* ============ 小屏适配 ============ */
  @media (max-width:820px){
    body{font-size:22px;}
    #home,#setup1,#setup2,#setup3{padding:24px 5vw 26px;}
    .logo{font-size:40px;letter-spacing:5px;}
    .sub{font-size:19px;}
    .card{padding:20px;}
    .card h3{font-size:23px;}
    .card h3 .hint{margin-left:0;flex-basis:100%;}
    .stepNo{width:38px;height:38px;font-size:20px;}
    .chip{font-size:24px;padding:10px 22px;}
    .dname{font-size:34px;min-height:44px;line-height:44px;}
    .vsBadge{width:50px;height:50px;font-size:21px;}
    .startBtn{font-size:30px;letter-spacing:6px;}
    #qWord{font-size:48px;} #qWord.cn{font-size:38px;}
    #qWord.chunk{font-size:38px;} #qWord.sent{font-size:32px;}
    .opt{font-size:26px;padding:16px 12px;}
    .pname{font-size:24px;} .pscore{font-size:38px;} .timer{font-size:38px;}
    .prole,.tlabel{font-size:16px;}
    #winName{font-size:40px;} #finalScore{font-size:30px;}
    .btnRow button{font-size:24px;padding:14px 24px;}
    .stepItem{font-size:18px;}
    .stepNum{width:32px;height:32px;font-size:16px;}
    .stepLine{width:28px;margin:0 8px;}
    .libChips{grid-template-columns:1fr 1fr;gap:10px;}
    .libChip{font-size:20px;padding:14px 16px;}
    .timerPicker input{width:96px;font-size:48px;}
    .stepBtn{width:96px;font-size:17px;}
    .timerPicker .colon{font-size:48px;}
  }

  /* ============ 主页 ============ */
  #home, #setup1, #setup2, #setup3{padding:20px 5vw 34px;max-width:1120px;margin:0 auto;width:100%;}
  .homeCenter{flex:1;display:flex;align-items:center;justify-content:center;padding:30px 0;}
  .startBtn.small{font-size:26px;padding:16px 30px;letter-spacing:4px;width:auto;}

  /* ============ 词库弹窗 ============ */
  .modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;}
  .modalMask{position:absolute;inset:0;background:rgba(20,26,40,.45);backdrop-filter:blur(2px);}
  .modalBox{position:relative;background:#fff;border-radius:22px;padding:28px 30px;
            max-width:720px;width:92%;max-height:82vh;overflow-y:auto;
            box-shadow:0 20px 60px rgba(28,39,72,.25);}
  .modalBox h3{font-size:27px;color:var(--ink2);font-weight:700;margin-bottom:18px;
               display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .modalBox h3 .hint{font-size:21px;font-weight:400;color:var(--muted2);margin-left:auto;}

  /* ============ 内联紧凑滚轮 ============ */
  .timerPicker.inline{margin:0;}
  .timerPicker.inline .timerPicker input,
  .timerPicker.inline input{width:90px;font-size:42px;padding:6px 0;}
  .timerPicker.inline .stepBtn{width:90px;font-size:16px;padding:6px;}
  .timerPicker.inline .colon{font-size:42px;margin-top:-14px;}
  .timerPicker.inline .colLabel{font-size:17px;}

  /* ============ 词库多选按钮 ============ */
  .libChips{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
  .libChip{padding:18px 22px;border-radius:16px;border:2px solid var(--line);background:#fafbfe;
           font-size:24px;font-weight:700;color:var(--ink2);cursor:pointer;user-select:none;
           transition:all .15s;display:flex;align-items:center;gap:10px;}
  .libChip::before{content:"";width:22px;height:22px;border-radius:6px;border:2px solid #c9d1de;
                   flex:none;display:grid;place-items:center;font-size:15px;color:#fff;}
  .libChip:hover{border-color:#c3d2ee;background:#fff;}
  .libChip.on{border-color:var(--blue);background:var(--blue-bg);color:#2456bd;
              box-shadow:0 4px 14px rgba(74,127,224,.18);}
  .libChip.on::before{content:"✓";background:var(--blue);border-color:var(--blue);}

  /* ============ 限时滚轮 ============ */
  .card.center{display:flex;flex-direction:column;align-items:center;}
  .timerPicker{display:flex;align-items:center;gap:20px;margin:16px 0 8px;}
  .timerPicker .col{display:flex;flex-direction:column;align-items:center;gap:4px;}
  .timerPicker .colon{font-size:64px;font-weight:800;color:var(--ink2);line-height:1;margin-top:-20px;}
  .timerPicker input{width:130px;text-align:center;font-size:64px;font-weight:800;color:var(--ink);
                      border:2px solid var(--line);border-radius:18px;padding:10px 0;outline:none;
                      background:linear-gradient(180deg,#f8faff,#fff);
                      font-family:"Microsoft YaHei","PingFang SC",sans-serif;}
  .timerPicker input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(74,127,224,.12);}
  .timerPicker input::-webkit-outer-spin-button,
  .timerPicker input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .stepBtn{width:130px;padding:10px;border:none;border-radius:12px;background:#eef1f8;
           color:var(--ink2);font-size:20px;cursor:pointer;transition:.15s;font-weight:700;}
  .stepBtn:hover{background:var(--blue-bg);color:var(--blue-d);}
  .stepBtn:active{transform:scale(.96);}
  .colLabel{font-size:20px;color:var(--muted);font-weight:600;margin-top:2px;}
  .miniLink{font-size:21px;color:var(--blue-d);text-decoration:underline;cursor:pointer;font-weight:600;}

  /* ============ 底部导航按钮 ============ */
  .btnRow .drawBtn{background:#fff;color:var(--ink2);}
  .btnRow .startBtn.small{flex:1;max-width:360px;}