/* ============================================================
   研学智慧接力赛 · 在线对战 共享样式(Cozy Kids 风格)
   ============================================================ */
:root{
  --c-bg:#F6F4E8;
  --c-surface:#FCF9ED;
  --c-surface-2:color-mix(in srgb, var(--c-surface) 52%, var(--c-bg));
  --c-fg:#6B4423;
  --c-body:color-mix(in srgb, var(--c-fg) 86%, var(--c-bg));
  --c-muted:color-mix(in srgb, var(--c-fg) 58%, var(--c-bg));
  --c-line:color-mix(in srgb, var(--c-fg) 15%, var(--c-bg));
  --c-primary:#19C8B9;
  --c-primary-hover:color-mix(in srgb, var(--c-primary) 80%, #ffffff);
  --c-primary-wash:color-mix(in srgb, var(--c-primary) 13%, var(--c-surface));
  --c-primary-line:#0D5A50;
  --c-on-primary:color-mix(in srgb, var(--c-primary) 24%, #5B3A17);
  --c-accent:#FFC93C;
  --c-accent-deep:color-mix(in srgb, var(--c-accent) 62%, #8A5A00);
  --c-accent-wash:color-mix(in srgb, var(--c-accent) 24%, var(--c-surface));
  --c-on-accent:color-mix(in srgb, var(--c-accent) 10%, #4A3005);
  --c-success:#6FBA2C;
  --c-success-deep:#4E8A1B;
  --c-success-wash:color-mix(in srgb, var(--c-success) 16%, var(--c-surface));
  --c-danger:#E05A5A;
  --c-danger-wash:color-mix(in srgb, var(--c-danger) 13%, var(--c-surface));
  --c-paper:#FFF6DC;
  --c-btn-shadow:color-mix(in srgb, var(--c-bg) 30%, #4A3A28);
  --c-medal-1:#F7CD67;
  --c-medal-2:#D9C8A9;
  --c-medal-3:#E59266;
  --r-card:22px;
  --r-panel:30px;
  --r-chip:16px;
  --r-pill:999px;
  --font-display:"ZCOOL KuaiLe","Nunito","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Nunito","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  font-family:var(--font-body);
  background:var(--c-bg);
  color:var(--c-body);
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--c-fg)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
button:focus-visible,input:focus-visible{outline:3px solid var(--c-accent-deep);outline-offset:2px}
.num{font-family:"Nunito",var(--font-body);font-variant-numeric:tabular-nums}

.page{max-width:1080px;margin:0 auto;padding:20px 18px 40px}
.page.narrow{max-width:560px}

/* 顶栏 */
.topbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--c-surface);border:2px solid var(--c-line);
  border-radius:var(--r-panel);padding:12px 18px;
  box-shadow:0 5px 0 0 var(--c-btn-shadow);margin-bottom:18px;
}
.topbar h1{font-size:22px}
.topbar .sub{font-size:12.5px;font-weight:700;color:var(--c-muted)}
.topbar .spacer{flex:1}
.conn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--c-muted);
  background:var(--c-surface-2);border:2px solid var(--c-line);border-radius:var(--r-pill);padding:4px 12px}
.conn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-muted)}
.conn.on{color:color-mix(in srgb, var(--c-success) 70%, var(--c-fg))}
.conn.on::before{background:var(--c-success);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* 卡片 */
.card{
  background:var(--c-surface);border:2px solid var(--c-line);
  border-radius:var(--r-panel);padding:18px 20px;
  box-shadow:0 5px 0 0 var(--c-btn-shadow);margin-bottom:16px;
}
.card h2{font-size:19px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.card h3{font-size:16px;margin-bottom:8px}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:900;font-size:16px;
  border-radius:var(--r-pill);padding:12px 26px;
  background:var(--c-primary);color:var(--c-on-primary);
  border:2.5px solid var(--c-primary-line);
  box-shadow:0 5px 0 0 color-mix(in srgb, var(--c-primary) 45%, #1C3F38);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.btn:hover{transform:translateY(-2px);background:var(--c-primary-hover)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 0 color-mix(in srgb, var(--c-primary) 45%, #1C3F38)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn.big{font-size:19px;padding:15px 34px}
.btn.warn{background:var(--c-accent);color:var(--c-on-accent);border-color:var(--c-accent-deep);
  box-shadow:0 5px 0 0 var(--c-accent-deep)}
.btn.warn:hover{background:color-mix(in srgb, var(--c-accent) 80%, #ffffff)}
.btn.ghost{background:var(--c-surface-2);color:var(--c-fg);border-color:var(--c-line);box-shadow:0 5px 0 0 var(--c-btn-shadow)}
.btn.small{font-size:13px;padding:8px 16px}
.btn.danger{background:var(--c-danger);color:#fff;border-color:color-mix(in srgb, var(--c-danger) 60%, #7c2d2d);
  box-shadow:0 5px 0 0 color-mix(in srgb, var(--c-danger) 60%, #7c2d2d)}

/* 输入 */
.input{
  width:100%;height:52px;border-radius:var(--r-pill);
  border:2.5px solid var(--c-line);background:var(--c-surface);
  padding:0 20px;font-size:16px;font-weight:700;color:var(--c-body);
  box-shadow:0 3px 0 0 var(--c-btn-shadow);
}
.input::placeholder{color:color-mix(in srgb, var(--c-fg) 35%, var(--c-bg));font-weight:600}
.input:focus{outline:none;border-color:var(--c-accent-deep);box-shadow:0 3px 0 0 var(--c-accent-deep), 0 0 0 4px var(--c-accent-wash)}
.input.code{font-size:26px;letter-spacing:.35em;text-align:center;text-transform:uppercase;font-weight:900}
label{display:block;font-size:13px;font-weight:800;color:var(--c-muted);margin:10px 0 5px}

/* 提示条 */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--c-fg);color:var(--c-paper);
  font-weight:800;font-size:14px;border-radius:var(--r-pill);
  padding:11px 22px;box-shadow:0 8px 20px rgba(74,58,40,.35);
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;z-index:99;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* 排行榜 */
.board{list-style:none;display:flex;flex-direction:column;gap:8px}
.team-row{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;
  background:var(--c-surface-2);border:2px solid var(--c-line);
  border-radius:var(--r-chip);padding:9px 14px 9px 10px;
  transition:background .3s;
}
.team-row .rank{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:14px;color:var(--c-fg);
  background:var(--c-surface);border:2px solid var(--c-line);
}
.team-row .rank.r1{background:var(--c-medal-1);border-color:var(--c-accent-deep);color:var(--c-on-accent)}
.team-row .rank.r2{background:var(--c-medal-2);border-color:#6B5C40;color:#4D4232}
.team-row .rank.r3{background:var(--c-medal-3);border-color:#8A4A22;color:#fff}
.team-row .tname{font-weight:900;color:var(--c-fg);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-row .tmeta{font-size:11px;font-weight:700;color:var(--c-muted)}
.team-row .tscore{font-family:"Nunito",var(--font-body);font-weight:900;font-size:20px;color:var(--c-fg)}
.team-row .gain{font-size:11.5px;font-weight:900;color:var(--c-success);min-width:44px;text-align:right}
.team-row.is-mine{background:var(--c-primary-wash);border-color:color-mix(in srgb, var(--c-primary) 55%, var(--c-line))}
.team-row.is-mine .tname::after{content:"我方";font-size:10px;background:var(--c-accent);color:var(--c-on-accent);
  border:1.5px solid var(--c-accent-deep);border-radius:var(--r-pill);padding:1px 7px;margin-left:7px;vertical-align:2px}
.team-row.bump{animation:bump .6s ease}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.03);background:var(--c-accent-wash)}100%{transform:scale(1)}}

/* 题目 */
.qcard{
  background:var(--c-surface);border:2px solid var(--c-line);
  border-radius:38px 32px 40px 34px / 34px 40px 32px 38px;
  padding:22px 24px;box-shadow:0 6px 0 0 var(--c-btn-shadow);margin-bottom:16px;
}
.qhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.qtype{font-size:12.5px;font-weight:900;color:color-mix(in srgb, var(--c-primary) 72%, var(--c-fg));
  background:var(--c-primary-wash);border-radius:var(--r-pill);padding:4px 12px}
.qpts{background:var(--c-accent);color:var(--c-on-accent);font-weight:900;font-size:13px;
  border:2px solid var(--c-accent-deep);border-radius:var(--r-pill);padding:4px 12px;box-shadow:0 2px 0 0 var(--c-accent-deep)}
.qrule{font-size:12px;font-weight:700;color:var(--c-muted);border:2px dashed var(--c-line);border-radius:var(--r-pill);padding:4px 12px}
.qtext{font-size:24px;line-height:1.4;margin-bottom:6px}
.qemoji{font-size:44px;line-height:1;margin:4px 0 10px}
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.opt{
  display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--c-surface-2);border:2.5px solid var(--c-line);
  border-radius:var(--r-card);padding:14px 16px;min-height:60px;
  font-size:16.5px;font-weight:700;color:var(--c-body);
  box-shadow:0 4px 0 0 var(--c-btn-shadow);
  transition:transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.opt:hover{transform:translateY(-2px);background:var(--c-primary-wash)}
.opt:active{transform:translateY(2px);box-shadow:0 1px 0 0 var(--c-btn-shadow)}
.opt .key{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--c-surface);border:2px solid var(--c-line);font-weight:900;font-size:14px;color:var(--c-fg)}
.opt.selected{background:var(--c-accent-wash);border-color:var(--c-accent-deep);box-shadow:0 4px 0 0 var(--c-accent-deep)}
.opt.correct{background:var(--c-success-wash);border-color:var(--c-success-deep);box-shadow:0 4px 0 0 var(--c-success-deep)}
.opt.correct .key{background:var(--c-success);border-color:var(--c-success-deep);color:#fff}
.opt.wrong{background:var(--c-danger-wash);border-color:var(--c-danger)}
.opt.wrong .key{background:var(--c-danger);border-color:var(--c-danger);color:#fff}
.options.locked .opt{pointer-events:none}
.options.locked .opt:not(.correct):not(.wrong):not(.selected){opacity:.55}

/* 计时条 */
.timerbar{display:flex;align-items:center;gap:10px;margin:6px 0 14px}
.timerbar .track{flex:1;height:14px;border-radius:var(--r-pill);background:var(--c-surface-2);border:2px solid var(--c-line);overflow:hidden}
.timerbar .fill{height:100%;width:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 55%, var(--c-accent)));transition:width .25s linear}
.timerbar .fill.low{background:linear-gradient(90deg, var(--c-danger), color-mix(in srgb, var(--c-danger) 55%, var(--c-accent)))}
.timerbar .secs{font-family:"Nunito",var(--font-body);font-weight:900;font-size:16px;color:var(--c-fg);min-width:44px;text-align:right}

/* 结果反馈 */
.result-banner{
  border-radius:var(--r-card);padding:14px 18px;font-weight:900;font-size:17px;
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.result-banner.good{background:var(--c-success-wash);border:2.5px solid var(--c-success-deep);color:color-mix(in srgb, var(--c-success-deep) 80%, var(--c-fg))}
.result-banner.miss{background:var(--c-accent-wash);border:2.5px solid var(--c-accent-deep);color:var(--c-on-accent)}
.result-banner .big{font-family:"Nunito",var(--font-body);font-size:26px}

/* 大厅 */
.lobby-list{display:flex;flex-direction:column;gap:8px}
.lobby-team{
  display:flex;align-items:center;gap:10px;
  background:var(--c-surface-2);border:2px solid var(--c-line);
  border-radius:var(--r-chip);padding:10px 14px;
}
.lobby-team .avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px;
  background:var(--c-primary-wash);border:2px solid color-mix(in srgb, var(--c-primary) 40%, var(--c-line))}
.lobby-team .nm{font-weight:900;color:var(--c-fg)}
.lobby-team .mm{font-size:11.5px;color:var(--c-muted);font-weight:700}
.lobby-team .st{margin-left:auto;font-size:11px;font-weight:900;border-radius:var(--r-pill);padding:3px 10px;
  background:var(--c-surface);border:1.5px solid var(--c-line);color:var(--c-muted)}
.lobby-team .st.on{background:var(--c-success-wash);border-color:var(--c-success-deep);color:var(--c-success-deep)}

/* 网格布局 */
.split{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.split.wide-left{grid-template-columns:minmax(0,1fr) 400px}
@media (max-width:900px){.split,.split.wide-left{grid-template-columns:1fr}}

/* 房间码大字 */
.roomcode{
  font-family:"Nunito",var(--font-body);font-weight:900;
  font-size:56px;letter-spacing:.22em;color:var(--c-fg);
  background:var(--c-accent-wash);border:3px dashed var(--c-accent-deep);
  border-radius:var(--r-card);padding:10px 26px;display:inline-block;
}
.qrbox{display:flex;flex-direction:column;align-items:center;gap:8px}
.qrbox svg{border-radius:18px;border:2px solid var(--c-line);box-shadow:0 4px 0 0 var(--c-btn-shadow)}
.qrbox .hint{font-size:12.5px;font-weight:800;color:var(--c-muted);text-align:center}

/* 领奖台 */
.podium{display:flex;gap:12px;justify-content:center;align-items:flex-end;margin:18px 0}
.podium .col{display:flex;flex-direction:column;align-items:center;gap:6px;width:150px}
.podium .bar{width:100%;border-radius:16px 16px 8px 8px;display:grid;place-items:center;
  font-family:"Nunito",var(--font-body);font-weight:900;font-size:26px;color:var(--c-fg);
  border:2.5px solid var(--c-line);box-shadow:0 4px 0 0 var(--c-btn-shadow)}
.podium .col.p1 .bar{height:130px;background:var(--c-medal-1)}
.podium .col.p2 .bar{height:96px;background:var(--c-medal-2)}
.podium .col.p3 .bar{height:72px;background:var(--c-medal-3)}
.podium .nm{font-weight:900;color:var(--c-fg);font-size:14px;text-align:center}
.podium .sc{font-family:"Nunito",var(--font-body);font-weight:900;color:var(--c-muted);font-size:13px}

.hero{text-align:center;padding:34px 10px 10px}
.hero h1{font-size:38px;line-height:1.2}
.hero p{color:var(--c-muted);font-weight:700;margin-top:8px}
.hero .emoji-row{font-size:34px;letter-spacing:.2em;margin-bottom:8px}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media (max-width:640px){.mode-grid{grid-template-columns:1fr}}
.mode-card{
  background:var(--c-surface);border:2px solid var(--c-line);border-radius:var(--r-panel);
  padding:24px 22px;text-align:center;box-shadow:0 5px 0 0 var(--c-btn-shadow);
  display:flex;flex-direction:column;gap:10px;align-items:center;
}
.mode-card .ico{font-size:40px}
.mode-card h2{font-size:21px}
.mode-card p{font-size:13px;font-weight:700;color:var(--c-muted)}

/* 主题选择 */
.theme-grid{display:flex;flex-direction:column;gap:8px;width:100%}
.theme-pick{display:flex;align-items:center;cursor:pointer;position:relative}
.theme-pick input{position:absolute;opacity:0;pointer-events:none}
.theme-pick span{
  display:flex;flex-direction:column;gap:1px;width:100%;
  background:var(--c-surface-2);border:2px solid var(--c-line);
  border-radius:var(--r-chip);padding:8px 12px;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.theme-pick span b{font-size:13.5px;color:var(--c-fg)}
.theme-pick span small{font-size:11px;font-weight:700;color:var(--c-muted)}
.theme-pick input:checked + span{
  background:var(--c-accent-wash);border-color:var(--c-accent-deep);
  box-shadow:0 3px 0 0 var(--c-accent-deep);
}
.theme-pick input:focus-visible + span{outline:3px solid var(--c-accent-deep);outline-offset:2px}
.theme-chip{
  font-size:12px;font-weight:900;border-radius:var(--r-pill);padding:4px 12px;
  background:var(--c-primary-wash);color:color-mix(in srgb, var(--c-primary) 70%, var(--c-fg));
  border:2px solid color-mix(in srgb, var(--c-primary) 40%, var(--c-line));
}

.step-pills{display:flex;gap:8px;flex-wrap:wrap}
.step-pill{font-size:12.5px;font-weight:900;border-radius:var(--r-pill);padding:6px 14px;
  background:var(--c-surface-2);border:2px solid var(--c-line);color:var(--c-muted)}
.step-pill.active{background:var(--c-accent-wash);border-color:var(--c-accent-deep);color:var(--c-on-accent)}
.step-pill.done{background:var(--c-primary-wash);border-color:color-mix(in srgb, var(--c-primary) 45%, var(--c-line));color:color-mix(in srgb, var(--c-primary) 70%, var(--c-fg))}

.waiting{text-align:center;padding:26px 10px;color:var(--c-muted);font-weight:800}
.waiting .dots::after{content:"…";animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}

.member-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.member-grid{grid-template-columns:1fr}}
.member-cell{background:var(--c-surface-2);border:2px solid var(--c-line);border-radius:var(--r-chip);padding:10px}
.member-cell .role{font-size:12px;font-weight:900;color:color-mix(in srgb, var(--c-primary) 72%, var(--c-fg));margin-bottom:6px}
.member-cell .input{height:44px;font-size:14px;padding:0 14px}