/* 天问杯 · 大屏触控投票 —— 深空星海主题 */
:root{
  --gold:#ffd479;
  --gold2:#ffb020;
  --txt:#eef3ff;
  --muted:#9db0dd;
  --bub-txt:#ffffff;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;padding:0;}
html{font-size:16px;}
body{
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans CN",sans-serif;
  color:var(--txt);
  background:#04061a;
  overflow:hidden;
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
}

/* ---------- 背景 ---------- */
#stars{position:fixed;inset:0;z-index:0;display:block;}
.nebula{position:fixed;border-radius:50%;filter:blur(90px);opacity:.55;z-index:0;pointer-events:none;}
.nebula.n1{width:52vw;height:52vw;left:-12vw;top:-14vw;background:radial-gradient(circle,#2b4bff 0%,rgba(43,75,255,0) 68%);animation:float1 26s ease-in-out infinite;}
.nebula.n2{width:46vw;height:46vw;right:-10vw;top:8vh;background:radial-gradient(circle,#8b2bff 0%,rgba(139,43,255,0) 68%);animation:float2 32s ease-in-out infinite;}
.nebula.n3{width:60vw;height:60vw;left:18vw;bottom:-26vw;background:radial-gradient(circle,#00b3d6 0%,rgba(0,179,214,0) 70%);animation:float1 38s ease-in-out infinite reverse;opacity:.4;}
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 78%);
}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,3vh) scale(1.12)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4vw,4vh) scale(1.08)}}

/* ---------- 布局 ---------- */
#app{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;}

/* 顶栏 */
.top{display:flex;align-items:center;justify-content:space-between;padding:1.6rem 2.4rem 1rem;flex:0 0 auto;}
.brand{display:flex;align-items:center;gap:1.1rem;min-width:0;}
.seal{
  width:3.6rem;height:3.6rem;border-radius:1.1rem;flex:0 0 auto;
  background:linear-gradient(145deg,#ffe9b0,#ffb020);
  color:#5a2d00;font-weight:800;font-size:1.35rem;line-height:1.05;
  display:flex;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 .5rem 1.4rem rgba(255,176,32,.4),inset 0 1px 0 rgba(255,255,255,.7);
  letter-spacing:.05rem;
}
.brand h1{margin:0;font-size:1.85rem;font-weight:800;letter-spacing:.06rem;
  background:linear-gradient(92deg,#ffffff,#bcd4ff 60%,#8fb6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 2.4rem rgba(120,170,255,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand p{margin:.25rem 0 0;font-size:.95rem;color:var(--muted);letter-spacing:.05rem;}

.top-right{display:flex;align-items:center;gap:1.4rem;flex:0 0 auto;}
.ring-wrap{position:relative;width:5.4rem;height:5.4rem;}
.ring-wrap svg{transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:7;}
.ring-fg{fill:none;stroke:url(#ringGrad);stroke-width:7;stroke-linecap:round;transition:stroke .3s;}
.ring-wrap.urgent .ring-fg{stroke:#ff5a5a;}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-txt b{font-size:1.9rem;font-weight:800;line-height:1;}
.ring-txt span{font-size:.65rem;color:var(--muted);margin-top:.15rem;letter-spacing:.1rem;}
.ring-wrap.urgent .ring-txt b{color:#ff8a8a;animation:blink .6s infinite;}
@keyframes blink{50%{opacity:.45}}

/* 主舞台 */
.mid{flex:1 1 auto;display:flex;min-height:0;position:relative;}
#field{position:relative;flex:1 1 auto;overflow:hidden;}

/* ---------- 气泡 ---------- */
.bub{
  position:absolute;left:0;top:0;will-change:transform;cursor:pointer;
  display:inline-block;
  /* 气泡高度由内容决定，但有最小/最大尺寸限制——保证 5 个气泡不重叠也能让长问题完整显示 */
  height:auto;min-height:9rem;max-height:22rem;
}
.bub-in{
  position:relative;border-radius:1.6rem;padding:1.1rem 1.3rem 1rem;
  background:linear-gradient(150deg,var(--g1),var(--g2));
  border:2px solid rgba(255,255,255,.55);
  box-shadow:0 1.2rem 3rem rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.45),0 0 1.5rem rgba(255,255,255,.12);
  color:#fff;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s;
  overflow:hidden;
  width:100%;height:100%;
  box-sizing:border-box;
  display:flex;flex-direction:column;
}
.bub-in::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.30),rgba(255,255,255,0) 60%);
  pointer-events:none;}
.bub .q{
  position:relative;font-weight:700;line-height:1.5;letter-spacing:.02rem;
  text-shadow:0 .15rem .6rem rgba(0,0,0,.28);
  word-break:break-word;overflow-wrap:break-word;
  /* line-clamp 8 行：能放下 160~200 字；超出用 … 显示，并通过 title 属性 / 展开按钮查看完整 */
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;
  overflow:hidden;max-height:none;flex:1 1 auto;
}
.bub .meta{
  position:relative;margin-top:.5rem;display:flex;align-items:center;gap:.4rem;
  font-size:.78rem;opacity:.92;flex-wrap:wrap;flex:0 0 auto;max-height:none;overflow:visible;
}
.bub .meta .tag{background:rgba(255,255,255,.2);border-radius:1rem;padding:.12rem .55rem;backdrop-filter:blur(4px);max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;white-space:normal;}
.bub .meta .nm{font-weight:600;white-space:nowrap;}
.bub .meta .more{
  background:linear-gradient(135deg,rgba(255,212,121,.55),rgba(255,157,46,.55));
  border:1px solid rgba(255,232,180,.8);color:#2a1a00;
  border-radius:1rem;padding:.14rem .7rem;font-size:.74rem;cursor:pointer;font-family:inherit;font-weight:700;
  box-shadow:0 .2rem .6rem rgba(0,0,0,.25);
}
.bub .meta .more:hover{background:linear-gradient(135deg,rgba(255,212,121,.85),rgba(255,157,46,.85));transform:translateY(-1px);}
.bub .idx{position:absolute;right:.9rem;top:.55rem;font-size:.8rem;opacity:.45;font-weight:800;z-index:2;}
.bub .tick{position:absolute;right:.9rem;bottom:.6rem;width:1.9rem;height:1.9rem;border-radius:50%;
  background:#fff;color:#111;display:flex;align-items:center;justify-content:center;font-weight:900;
  font-size:1.1rem;opacity:0;transform:scale(.4);transition:.28s cubic-bezier(.34,1.56,.64,1);z-index:2;}

/* 尺寸档位：按字号递增；高度由内容自适应（min/max 控制上下限） */
.bub.s1{width:14rem;}
.bub.s2{width:15rem;}
.bub.s3{width:16.5rem;}
.bub.s4{width:18rem;}
.bub.s5{width:20rem;}
/* 不同档位的字号 & 行高（字号随字数增加而缩小，让长问题能挤下更多文字） */
.bub.s1 .q{font-size:1.4rem;line-height:1.45;}
.bub.s2 .q{font-size:1.2rem;line-height:1.45;}
.bub.s3 .q{font-size:1.05rem;line-height:1.45;}
.bub.s4 .q{font-size:.95rem;line-height:1.45;}
.bub.s5 .q{font-size:.82rem;line-height:1.42;}

/* 配色 */
.bub.c0{--g1:#4f8cff;--g2:#1d4ed8;}
.bub.c1{--g1:#a78bfa;--g2:#6d28d9;}
.bub.c2{--g1:#22d3ee;--g2:#0e7490;}
.bub.c3{--g1:#fb7fb6;--g2:#be185d;}
.bub.c4{--g1:#fbbf4c;--g2:#c2620a;}
.bub.c5{--g1:#34d399;--g2:#047857;}

.bub.sel .bub-in{
  transform:scale(1.07);
  border-color:var(--gold);
  box-shadow:0 0 0 .3rem rgba(255,212,121,.28),0 0 5rem rgba(255,186,60,.65),0 1.4rem 3rem rgba(0,0,0,.45);
}
.bub.sel .tick{opacity:1;transform:scale(1);background:var(--gold);color:#4a2b00;}
.bub.dim .bub-in{opacity:.42;filter:saturate(.6);transform:scale(.96);}
.bub.voted .bub-in{
  border-color:var(--gold);animation:pop .6s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 0 .35rem rgba(255,212,121,.35),0 0 7rem rgba(255,186,60,.85),0 1.4rem 3rem rgba(0,0,0,.45);
}
@keyframes pop{0%{transform:scale(1.07)}45%{transform:scale(1.16)}100%{transform:scale(1.07)}}
.bub.voted .pulse,.bub.voted .pulse2{position:absolute;inset:0;border-radius:1.9rem;border:.25rem solid var(--gold);opacity:0;pointer-events:none;}
.bub.voted .pulse{animation:pulse 1.2s ease-out 1;}
.bub.voted .pulse2{animation:pulse 1.2s ease-out .3s 1;}
@keyframes pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

.fx-in{animation:enter .5s cubic-bezier(.22,1,.36,1) backwards;}
@keyframes enter{from{opacity:0;transform:scale(.72) translateY(1.5rem)}to{opacity:1;transform:scale(1) translateY(0)}}
.fx-out{animation:leave .45s ease-in forwards;}
@keyframes leave{to{opacity:0;transform:scale(.78)}}

/* 实时排行 */
.rank{
  flex:0 0 18rem;margin:.5rem 1.4rem 1rem 0;padding:1rem 1.1rem;border-radius:1.4rem;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);
  display:flex;flex-direction:column;overflow:hidden;
}
.rank h3{margin:0 0 .9rem;font-size:1.05rem;letter-spacing:.1rem;color:#fff;display:flex;align-items:center;gap:.5rem;flex:0 0 auto;}
.rank h3::before{content:"";width:.35rem;height:1.1rem;border-radius:1rem;background:linear-gradient(#ffd479,#ff9d2e);}
#rankBody{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:.4rem;margin-right:-.4rem;}
#rankBody::-webkit-scrollbar{width:.5rem;}
#rankBody::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:1rem;}
#rankBody::-webkit-scrollbar-track{background:transparent;}
.rank .row{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.4rem;}
.rank .no{width:1.5rem;height:1.5rem;border-radius:.5rem;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex:0 0 auto;margin-top:.15rem;}
.rank .row:nth-child(2) .no{background:linear-gradient(145deg,#ffd479,#ff9d2e);color:#4a2b00;}
.rank .row:nth-child(3) .no{background:linear-gradient(145deg,#dbe6ff,#9fb6e8);color:#223;}
.rank .row:nth-child(4) .no{background:linear-gradient(145deg,#ffc59b,#e08a4a);color:#3a1d00;}
.rank .tt{flex:1 1 auto;min-width:0;font-size:.82rem;line-height:1.4;}
.rank .tt b{display:block;font-weight:600;color:#fff;white-space:normal;word-break:break-word;}
.rank .tt span{font-size:.7rem;color:var(--muted);white-space:normal;word-break:break-word;display:block;margin-top:.15rem;}
.rank .vv{font-weight:800;font-size:1rem;color:var(--gold);flex:0 0 auto;margin-top:.1rem;line-height:1.4;}
.rank .bar{height:.26rem;border-radius:1rem;background:rgba(255,255,255,.12);margin:0 0 .55rem;overflow:hidden;}
.rank .bar i{display:block;height:100%;border-radius:1rem;background:linear-gradient(90deg,#ffd479,#ff8a3d);transition:width .6s;}
.rank .empty{color:var(--muted);font-size:.85rem;text-align:center;padding:2rem 0;}
.rank.hide{display:none;}

/* 底栏 */
.bottom{flex:0 0 auto;display:flex;align-items:center;gap:1rem;padding:.6rem 2.4rem 1.4rem;flex-wrap:wrap;}
.chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:2rem;
  padding:.45rem 1.1rem;font-size:.9rem;color:var(--muted);}
.chip b{color:#fff;font-size:1.15rem;margin-left:.2rem;}
.hint{flex:1 1 auto;text-align:center;font-size:1rem;color:#c9d8ff;letter-spacing:.06rem;}
.hint .k{display:inline-block;background:rgba(255,255,255,.12);border-radius:.4rem;padding:0 .45rem;margin:0 .15rem;font-size:.85rem;}
.ctrl{display:flex;gap:.5rem;}
.ctrl button{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#dce7ff;
  border-radius:2rem;padding:.4rem 1rem;font-size:.85rem;cursor:pointer;transition:.2s;font-family:inherit;}
.ctrl button:hover{background:rgba(255,255,255,.2);color:#fff;}

/* Toast */
.toast{position:fixed;left:50%;bottom:12%;transform:translate(-50%,2rem);z-index:50;
  background:rgba(10,16,42,.9);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);
  padding:.9rem 2rem;border-radius:3rem;font-size:1.25rem;opacity:0;pointer-events:none;transition:.35s;
  box-shadow:0 1rem 3rem rgba(0,0,0,.5);max-width:80vw;text-align:center;}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast.ok{border-color:var(--gold);color:var(--gold);box-shadow:0 0 3rem rgba(255,186,60,.35);}
.toast.info{border-color:rgba(160,190,255,.5);color:#cfe0ff;}

/* 开始 / 结束遮罩 */
.overlay{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.4rem;text-align:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(20,32,80,.75),rgba(4,6,26,.95));
  backdrop-filter:blur(6px);}
.overlay.hide{display:none;}
.overlay .big{font-size:3.2rem;font-weight:800;letter-spacing:.1rem;
  background:linear-gradient(92deg,#fff,#a9c8ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.overlay .sub{font-size:1.2rem;color:#b9c9ee;letter-spacing:.08rem;}
.overlay .nums{display:flex;gap:1.6rem;margin-top:.5rem;}
.overlay .nums div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:1rem;padding:.8rem 1.6rem;}
.overlay .nums b{display:block;font-size:2rem;color:var(--gold);}
.overlay .nums span{font-size:.85rem;color:var(--muted);}
.btn-start{margin-top:1.2rem;border:0;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,#ffd479,#ff9d2e);color:#4a2b00;font-weight:800;
  font-size:1.5rem;padding:1rem 3.4rem;border-radius:4rem;letter-spacing:.15rem;
  box-shadow:0 1rem 2.5rem rgba(255,157,46,.4);transition:.25s;}
.btn-start:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 1.2rem 3rem rgba(255,157,46,.6);}
.btn-ghost{background:none;border:1px solid rgba(255,255,255,.3);color:#cfe0ff;border-radius:3rem;
  padding:.7rem 2rem;font-size:1rem;cursor:pointer;font-family:inherit;}
.btn-ghost:hover{background:rgba(255,255,255,.12);}

/* 暂停标识 */
body.paused .top::after{content:"已暂停";position:absolute;left:50%;top:1rem;transform:translateX(-50%);
  background:rgba(255,90,90,.9);color:#fff;padding:.2rem 1rem;border-radius:2rem;font-size:.85rem;}

/* 完整问题浮层（学生点击气泡里的"查看完整"按钮） */
.ov-full{
  z-index:120;align-items:center;justify-content:center;
  background:rgba(4,6,26,.75);backdrop-filter:blur(8px);
}
.ov-full.hide{display:none;}
.full-card{
  width:min(1100px,92vw);max-height:86vh;display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(30,42,90,.85),rgba(15,22,55,.95));
  border:1px solid rgba(255,255,255,.18);border-radius:1.6rem;
  box-shadow:0 2rem 5rem rgba(0,0,0,.6);padding:1.8rem 2.4rem 1.6rem;
}
.full-head{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;margin-bottom:1rem;}
.full-no{font-size:1rem;color:var(--muted);letter-spacing:.18rem;font-weight:700;}
.full-close{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;
  border-radius:2rem;padding:.5rem 1.4rem;font-size:1rem;cursor:pointer;font-family:inherit;transition:.2s;
}
.full-close:hover{background:rgba(255,255,255,.22);}
.full-body{
  flex:1 1 auto;overflow-y:auto;color:#fff;font-size:1.45rem;line-height:1.7;
  font-weight:600;letter-spacing:.02rem;padding:.4rem .2rem 1rem;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;
}
.full-body::-webkit-scrollbar{width:.55rem;}
.full-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:1rem;}
.full-body::-webkit-scrollbar-track{background:transparent;}
.full-meta{display:flex;flex-wrap:wrap;gap:.6rem;flex:0 0 auto;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15);}
.full-meta .tag{background:rgba(255,212,121,.22);border:1px solid rgba(255,212,121,.5);color:#ffe9b8;
  border-radius:1rem;padding:.35rem 1rem;font-size:1rem;font-weight:600;}

@media (max-width:1100px){
  .rank{display:none;}
  .brand h1{font-size:1.3rem;}
}