/* fun.css —— 同学乐园 / 聚会工具 / 寄语墙 等新功能样式（2026-11-10） */

/* hidden 属性必须真的隐藏：.btn 等类的 display 会盖掉浏览器默认样式
   （2026-11-09 猜猜看「下一题」提前显示，2026-11-10 冷知识再次踩到） */
[hidden]{display:none!important}

/* ---------- 照片比心 ---------- */
.gallery .ph{position:relative}
.ph .lk{
  position:absolute;right:8px;bottom:8px;z-index:2;
  display:inline-flex;align-items:center;gap:3px;
  padding:4px 9px;border-radius:18px;
  background:rgba(18,36,54,.42);color:#fff;
  font-size:11px;line-height:1;cursor:pointer;
  transition:.18s;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.ph .lk i{font-style:normal;font-size:13px;line-height:1;color:#ffd9e2}
.ph .lk b{font-weight:500;font-size:11px}
.ph .lk.has{background:rgba(214,72,96,.94)}
.ph .lk.has i{color:#fff}
.ph .lk:hover{transform:scale(1.08)}

/* ---------- 通用小标题 ---------- */
.fun-lead{font-size:14px;color:#718096;line-height:1.8;margin:-4px 0 20px}

/* ---------- 抽同学 ---------- */
.rv-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}
.rv-card{
  position:relative;background:#fff;border:1px solid #e6ebf1;border-radius:18px;
  padding:36px 32px 30px;text-align:center;overflow:hidden;
  box-shadow:0 10px 30px rgba(44,82,130,.07);
}
.rv-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(42,143,143,.10),transparent 62%);
}
.rv-card.flip .rv-av,.rv-card.flip .rv-name,.rv-card.flip .rv-sub,
.rv-card.flip .rv-quote,.rv-card.flip .rv-tags{animation:rvIn .42s cubic-bezier(.2,.8,.3,1) both}
.rv-card.flip .rv-name{animation-delay:.04s}
.rv-card.flip .rv-sub{animation-delay:.07s}
.rv-card.flip .rv-quote{animation-delay:.1s}
.rv-card.flip .rv-tags{animation-delay:.13s}
@keyframes rvIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

.rv-av{position:relative;width:132px;height:132px;margin:0 auto 18px;border-radius:50%;
  background:linear-gradient(135deg,#2c5282,#2a8f8f);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:52px;font-weight:600;letter-spacing:2px;
  box-shadow:0 8px 24px rgba(44,82,130,.22);overflow:hidden}
.rv-av img{width:100%;height:100%;object-fit:cover;display:block}
.rv-name{font-size:29px;font-weight:600;color:#22384f;letter-spacing:1px;line-height:1.3}
.rv-name small{font-size:14px;font-weight:400;color:#8fa0b3;margin-left:8px;letter-spacing:0}
.rv-sub{margin-top:8px;font-size:13px;color:#8fa0b3}
.rv-quote{
  position:relative;margin:22px auto 0;max-width:520px;
  font-size:16px;line-height:1.9;color:#3d5a75;font-style:normal;
  padding:16px 20px;background:#f7fafc;border-radius:12px;border:1px solid #eef3f7;
}
.rv-quote b{color:#b3c0cc;font-weight:400;font-size:20px;margin-right:2px}
.rv-quote em{color:#b3c0cc;font-style:normal;font-size:20px;margin-left:2px}
.rv-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.rv-tags span{
  font-size:12px;color:#3d7f8f;background:#eef7f8;border:1px solid #d8ecee;
  padding:4px 11px;border-radius:20px;line-height:1.5;
}
.rv-act{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.rv-act .btn{min-width:132px}

/* 右侧收集进度 */
.rv-side{background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:20px 22px}
.rv-side h3{font-size:14px;font-weight:600;color:#2c5282;margin:0 0 12px}
.rv-prog{height:9px;border-radius:6px;background:#eef2f6;overflow:hidden;margin-bottom:10px}
.rv-prog i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#2c5282,#2a8f8f);
  transition:width .5s cubic-bezier(.2,.8,.3,1)}
.rv-pnum{font-size:13px;color:#8fa0b3;margin-bottom:16px}
.rv-pnum b{font-size:22px;color:#2c5282;font-weight:600;margin-right:2px}
.rv-seen{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.rv-seen i{width:26px;height:26px;border-radius:50%;background:#eef2f6;color:#c3ced9;
  font-size:11px;font-style:normal;display:flex;align-items:center;justify-content:center}
.rv-seen i.on{background:linear-gradient(135deg,#2c5282,#2a8f8f);color:#fff}
.rv-tip{font-size:12px;color:#a0aec0;line-height:1.8;border-top:1px solid #eef2f6;padding-top:12px}

@media(max-width:860px){
  .rv-stage{grid-template-columns:1fr}
  .rv-card{padding:28px 20px 24px}
  .rv-av{width:104px;height:104px;font-size:40px}
  .rv-name{font-size:24px}
}

/* ---------- 冷知识问答 ---------- */
.qz-wrap{max-width:720px;margin:0 auto}
.qz-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.qz-step{font-size:13px;color:#8fa0b3}
.qz-step b{color:#2c5282;font-size:18px;font-weight:600}
.qz-bar{height:7px;border-radius:5px;background:#eef2f6;overflow:hidden;margin-bottom:22px}
.qz-bar i{display:block;height:100%;background:linear-gradient(90deg,#2c5282,#2a8f8f);
  width:0;transition:width .35s ease}
.qz-card{background:#fff;border:1px solid #e6ebf1;border-radius:16px;padding:28px 30px;
  box-shadow:0 8px 24px rgba(44,82,130,.05)}
.qz-q{font-size:19px;line-height:1.8;color:#22384f;font-weight:500;margin-bottom:22px}
.qz-opts{display:grid;gap:11px}
.qz-opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 18px;border:1px solid #e2e9f0;border-radius:11px;background:#fff;
  font-size:15px;color:#3d5a75;font-family:inherit;cursor:pointer;transition:.18s;
}
.qz-opt:hover{border-color:#9cc6d4;background:#f8fcfd}
.qz-opt i{flex:none;width:24px;height:24px;border-radius:50%;background:#f1f5f9;color:#94a6b8;
  font-size:12px;font-style:normal;display:flex;align-items:center;justify-content:center}
.qz-opt.ok{border-color:#8ed0b0;background:#f0faf6;color:#1f6b52}
.qz-opt.ok i{background:#8ed0b0;color:#fff}
.qz-opt.no{border-color:#f0bcbc;background:#fdf3f3;color:#a63f3f}
.qz-opt.no i{background:#f0bcbc;color:#fff}
.qz-opt.dim{opacity:.5}
.qz-opt[disabled]{cursor:default}
.qz-note{margin-top:18px;padding:13px 16px;border-radius:10px;font-size:13.5px;line-height:1.8;
  background:#f6f9fc;border:1px solid #e2ecf4;color:#4a6fa5}
.qz-note[hidden]{display:none!important}
.qz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px;flex-wrap:wrap}
.qz-foot .btn{min-width:130px}
.qz-foot .qz-score{font-size:13px;color:#8fa0b3}
.qz-foot .qz-score b{color:#2a8f8f;font-size:19px;font-weight:600}

.qz-end{text-align:center;padding:12px 0 4px}
.qz-end .big{font-size:58px;font-weight:600;line-height:1;
  background:linear-gradient(135deg,#2c5282,#2a8f8f);-webkit-background-clip:text;background-clip:text;color:transparent}
.qz-end .tot{font-size:15px;color:#a0aec0;margin-top:6px}
.qz-end .say{font-size:16px;color:#3d5a75;margin:18px 0 22px;line-height:1.8}
.qz-end .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* 排行榜 */
.qz-rank{margin-top:26px;background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:20px 24px}
.qz-rank h3{font-size:14px;font-weight:600;color:#2c5282;margin:0 0 14px}
.qz-rank table{width:100%;border-collapse:collapse;font-size:13.5px}
.qz-rank td{padding:9px 4px;border-bottom:1px solid #f1f5f9;color:#4a5568}
.qz-rank tr:last-child td{border-bottom:none}
.qz-rank .rk{width:40px;color:#b3c0cc;font-weight:600}
.qz-rank .rk.top1{color:#c9973a}
.qz-rank .sc{text-align:right;width:80px;color:#2a8f8f;font-weight:600}
.qz-rank .tm{text-align:right;width:90px;color:#b3c0cc;font-size:12px}
@media(max-width:560px){
  .qz-card{padding:22px 18px}
  .qz-q{font-size:17px}
  .qz-opt{font-size:14px;padding:12px 14px}
  .qz-rank .tm{display:none}
}

/* ---------- 寄语墙 ---------- */
.wl-form{background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:18px 20px;margin-bottom:24px}
.wl-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.wl-row input[type=text]{height:40px;border:1px solid #dfe6ee;border-radius:9px;padding:8px 12px;
  font-size:14px;font-family:inherit;color:#2d3748;background:#fff}
.wl-name{flex:0 0 130px}
.wl-tx{flex:1 1 320px;min-width:0}
.wl-row .btn{height:40px;flex:none}
.wl-cnt{font-size:12px;color:#b3c0cc;margin-left:auto;align-self:center}
.wl-msg{margin-top:10px;font-size:12.5px;padding:8px 12px;border-radius:8px;line-height:1.7}
.wl-msg.err{background:#fdf3f3;color:#b04141}
.wl-msg.ok{background:#f0faf6;color:#237a5b}
.wl-msg[hidden]{display:none!important}

.wl-grid{columns:4;column-gap:16px}
.wnote{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:block;margin:0 0 16px;padding:20px 20px 16px;border-radius:4px 14px 14px 14px;
  background:#fff7e6;border:1px solid rgba(0,0,0,.04);
  box-shadow:0 4px 14px rgba(44,82,130,.06);
  transform:rotate(-.4deg);transition:transform .25s,box-shadow .25s;
}
.wnote:nth-child(3n){transform:rotate(.5deg)}
.wnote:nth-child(4n){transform:rotate(-.7deg)}
.wnote:hover{transform:rotate(0) translateY(-3px);box-shadow:0 10px 24px rgba(44,82,130,.12)}
.wnote p{margin:0 0 14px;font-size:15px;line-height:1.9;color:#5a4a30;word-break:break-word;white-space:pre-wrap}
.wnote .from{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:12px;color:rgba(0,0,0,.34);border-top:1px dashed rgba(0,0,0,.08);padding-top:9px}
.wnote .from b{font-weight:600;color:rgba(0,0,0,.5)}
.wl-empty{text-align:center;padding:50px 0;color:#b3c0cc;font-size:14px}

/* 关键词云 */
.cloud{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;justify-content:center;
  padding:26px 22px;background:#fff;border:1px solid #e6ebf1;border-radius:14px}
.cloud span{line-height:1.2;transition:.2s;cursor:default;white-space:nowrap}
.cloud span:hover{opacity:.65}
.cloud .c1{color:#2c5282;font-weight:600}
.cloud .c2{color:#2a8f8f;font-weight:600}
.cloud .c3{color:#5d9dba}
.cloud .c4{color:#8fa0b3}
@media(max-width:960px){.wl-grid{columns:3}}
@media(max-width:760px){
  .wl-grid{columns:2;column-gap:12px}
  .wnote{padding:16px 15px 13px;margin-bottom:12px}
  .wnote p{font-size:14px}
  .wl-name{flex:1 0 100%}
  .wl-tx{flex:1 1 100%}
  .wl-row .btn{flex:1 1 100%}
  .cloud{gap:8px 13px;padding:20px 15px}
}
@media(max-width:420px){.wl-grid{columns:1}}

/* ---------- 聚会工具 ---------- */
.mt-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.mt-tabs a{padding:9px 20px;border-radius:24px;font-size:14px;color:#6b7f94;
  background:#fff;border:1px solid #e2e9f0;text-decoration:none;transition:.18s}
.mt-tabs a:hover{border-color:#9cc6d4;color:#2c5282}
.mt-tabs a.on{background:linear-gradient(135deg,#2c5282,#2a8f8f);border-color:transparent;color:#fff}

.ck-box{background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:20px 22px;margin-bottom:22px}
.ck-row{display:flex;gap:10px;flex-wrap:wrap}
.ck-row input{height:42px;border:1px solid #dfe6ee;border-radius:9px;padding:8px 13px;
  font-size:14px;font-family:inherit;color:#2d3748;background:#fff}
.ck-nm{flex:0 0 150px}
.ck-ms{flex:1 1 280px;min-width:0}
.ck-row .btn{height:42px;flex:none}
.ck-msg{margin-top:10px;font-size:12.5px;padding:8px 12px;border-radius:8px;line-height:1.7}
.ck-msg.err{background:#fdf3f3;color:#b04141}
.ck-msg.ok{background:#f0faf6;color:#237a5b}
.ck-msg[hidden]{display:none!important}

.ck-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ck-card{
  background:linear-gradient(160deg,#ffffff,#f7fafc);border:1px solid #e6ebf1;
  border-radius:13px;padding:16px 14px;text-align:center;
  animation:ckIn .4s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes ckIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.ck-av{width:54px;height:54px;margin:0 auto 10px;border-radius:50%;
  background:linear-gradient(135deg,#2c5282,#2a8f8f);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;overflow:hidden}
.ck-av img{width:100%;height:100%;object-fit:cover}
.ck-card .nm{font-size:15px;font-weight:600;color:#22384f;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-card .ms{font-size:12px;color:#8fa0b3;margin-top:4px;line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-card .tm{font-size:11px;color:#c3ced9;margin-top:6px}

/* 投屏模式（2026-11-10 重做）
   原实现是「固定 6 列 + 卡片按文档流往下堆」，人一多就超出视口，
   底部整排直接被切掉——这就是大屏上「显示不全」的原因。
   现在改成：整页锁死 100vh 不滚动，列数、头像直径、字号全部由 JS
   按人数和屏幕实际尺寸算出来，保证一屏内所有人都看得见。
   自定义属性挂在 :root 上，由 meet.php 的投屏脚本写入。 */
body.big{background:#eef3f8;height:100vh;overflow:hidden}
body.big header,
body.big .sec-head,
body.big .ck-box,
body.big .mt-tabs,
body.big .fun-lead,
body.big footer{display:none!important}
body.big section{padding:0;margin:0}
body.big section .wrap{max-width:none;width:100%;padding:0;margin:0}

body.big .ck-grid{
  display:grid;
  grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  gap:var(--g,12px);
  height:100vh;
  padding:var(--pad,16px);
  box-sizing:border-box;
  align-content:stretch;
}
body.big .ck-card{
  background:#fff;border:1px solid #e2e9f0;
  border-radius:calc(var(--av,88px) * .18);
  padding:calc(var(--av,88px) * .16) calc(var(--av,88px) * .10);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:0;min-height:0;overflow:hidden;
}
body.big .ck-av{
  width:var(--av,88px);height:var(--av,88px);flex:none;
  font-size:calc(var(--av,88px) * .38);
  margin:0 0 calc(var(--av,88px) * .10);
}
body.big .ck-card .nm{
  font-size:calc(var(--av,88px) * .30);line-height:1.25;width:100%;
  white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body.big .ck-card .ms{
  font-size:calc(var(--av,88px) * .185);line-height:1.45;width:100%;
  white-space:normal;margin-top:calc(var(--av,88px) * .06);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body.big .ck-card .tm{
  font-size:calc(var(--av,88px) * .155);
  margin-top:calc(var(--av,88px) * .05);
}
/* 还没人签到时铺满整屏的一句话，不要缩在角落里 */
body.big .empty{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:#eef3f8;border:0;border-radius:0;padding:0;
  font-size:calc(1.6vh + 10px);color:#8fa0b3;
}
/* 右上角实时人数（自动刷新时由脚本更新） */
.big-count{position:fixed;right:18px;top:14px;z-index:6;
  font-size:calc(var(--av,88px) * .19);color:#6b8098;
  background:rgba(255,255,255,.9);border:1px solid #e2e9f0;
  padding:5px 15px;border-radius:20px;line-height:1.4}

/* 抽签分组 */
.draw-box{background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:22px;margin-bottom:22px}
.draw-box textarea{width:100%;min-height:130px;border:1px solid #dfe6ee;border-radius:10px;
  padding:12px 14px;font-size:14px;font-family:inherit;line-height:1.8;color:#2d3748;
  resize:vertical;box-sizing:border-box}
.draw-ctl{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.draw-ctl label{font-size:13px;color:#718096;display:flex;align-items:center;gap:8px}
.draw-ctl select,.draw-ctl input[type=number]{height:38px;border:1px solid #dfe6ee;border-radius:8px;
  padding:4px 10px;font-size:14px;font-family:inherit;color:#2d3748;background:#fff}
.draw-out{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:8px}
.draw-grp{background:#fff;border:1px solid #e6ebf1;border-radius:13px;padding:16px 18px;
  border-top:3px solid #2a8f8f}
.draw-grp h4{margin:0 0 10px;font-size:14px;color:#2c5282;font-weight:600}
.draw-grp ol{margin:0;padding-left:20px;font-size:14px;color:#4a5568;line-height:2}

/* 班费 */
.fund-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.fund-sum div{background:#fff;border:1px solid #e6ebf1;border-radius:13px;padding:18px 20px}
.fund-sum b{display:block;font-size:25px;font-weight:600;color:#2c5282;line-height:1.2}
.fund-sum .out b{color:#b04141}
.fund-sum .bal b{color:#2a8f8f}
.fund-sum span{font-size:12px;color:#9aa9b8}
.fund-list{background:#fff;border:1px solid #e6ebf1;border-radius:14px;overflow:hidden}
.fund-i{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid #f1f5f9}
.fund-i:last-child{border-bottom:none}
.fund-i .k{flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:600}
.fund-i .k.in{background:#e8f6f0;color:#237a5b}
.fund-i .k.out{background:#fdeeee;color:#b04141}
.fund-i .tx{flex:1;min-width:0}
.fund-i .tx b{display:block;font-size:14px;color:#3d5a75;font-weight:500;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fund-i .tx span{font-size:12px;color:#b3c0cc}
.fund-i .am{flex:none;font-size:15px;font-weight:600;text-align:right}
.fund-i .am.in{color:#237a5b}
.fund-i .am.out{color:#b04141}
.fund-f{display:flex;gap:10px;flex-wrap:wrap;padding:16px 20px;background:#fafcfe;border-top:1px solid #eef2f6}
.fund-f select,.fund-f input{height:38px;border:1px solid #dfe6ee;border-radius:8px;padding:4px 10px;
  font-size:13.5px;font-family:inherit;color:#2d3748;background:#fff}
@media(max-width:760px){
  .ck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fund-sum{grid-template-columns:1fr}
  .ck-nm{flex:1 0 100%}
  .ck-ms{flex:1 1 100%}
  .ck-row .btn{flex:1 1 100%}
}