/* ============================================================
   ARENA HUD · 大厅的光学层
   在此之前大厅是一张线框图：发丝线、灰字、大片纯黑。
   这一层不改结构，只给它上仪表盘该有的东西——
   漂移网格、扫描光、霓虹概率轴、雷达脉冲、发光的接入轨。
   所有动效都受 .effects-paused 和 prefers-reduced-motion 两道闸门控制。
   ============================================================ */

/* ---------- 1. 外壳：有纵深的机舱，不是一个黑盒子 ---------- */
.arena-shell{
  position:relative;isolation:isolate;
  border-color:#2b3139;
  background:
    radial-gradient(130% 92% at 50% -12%,#161c26 0%,#0d1116 46%,#0b0e11 72%),
    #0b0e11;
  box-shadow:
    0 48px 110px -60px #000,
    0 0 0 1px #f0b90b14,
    inset 0 1px 0 #ffffff0d;
}
/* 缓慢漂移的网格，顶部浓、底部化开 */
.arena-shell::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(#f0b90b0d 1px,transparent 1px) 0 0/100% 46px,
    linear-gradient(90deg,#f0b90b0d 1px,transparent 1px) 0 0/46px 100%;
  -webkit-mask-image:radial-gradient(140% 104% at 50% -4%,#000 6%,transparent 74%);
          mask-image:radial-gradient(140% 104% at 50% -4%,#000 6%,transparent 74%);
  animation:arenaDrift 32s linear infinite;
}
@keyframes arenaDrift{to{background-position:0 46px,46px 0}}

/* 一道从上往下扫的光，整块面板因此有了心跳 */
.arena-shell::after{
  content:"";position:absolute;left:0;right:0;top:0;height:190px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#f0b90b00,#f0b90b12 52%,#fcd53500);
  animation:arenaScan 11s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes arenaScan{
  0%{transform:translateY(-190px);opacity:0}
  10%{opacity:1}
  86%{opacity:1}
  100%{transform:translateY(1400px);opacity:0}
}

/* 内容压在光学层之上 */
.arena-shell>*{position:relative;z-index:1}

/* ---------- 2. 顶条：HUD 的卡扣与状态灯 ---------- */
.arena-topline{
  position:relative;
  background:linear-gradient(180deg,#151a22,#0e1218);
  border-bottom:1px solid #2b3139;
}
.arena-topline::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,#f0b90b00,#f0b90b80 14%,#f0b90b2e 52%,#f0b90b80 86%,#f0b90b00);
}
.arena-status::before{box-shadow:0 0 10px 1px currentColor}
.arena-status[data-connection="live"],
.arena-status[data-connection="polling"]{color:#f0b90b}

/* ---------- 3. 接入轨：四步要像通电的流程，不是四个灰方块 ---------- */
.arena-steps{
  position:relative;
  background:linear-gradient(180deg,#0e1218,#0b0e11);
}
.arena-step-number{
  border-color:#f0b90b4d!important;
  color:#f0b90b!important;
  background:linear-gradient(158deg,#f0b90b26,#f0b90b05 72%)!important;
  box-shadow:0 0 16px -2px #f0b90b4d,inset 0 1px 0 #ffffff1a;
}
.arena-steps li:not(:last-child)::after{
  color:#f0b90b;opacity:.5;
}
.arena-steps li{color:#b7bdc6}

/* ---------- 4. 命题舞台：问题是全场的主角，要有主角的字号 ---------- */
.arena-stage{
  position:relative;
  background:
    radial-gradient(74% 150% at 12% 0%,#f0b90b0a,transparent 62%),
    linear-gradient(180deg,#0f141b,#0b0e11 78%);
  border-bottom:1px solid #2b3139;
}
.arena-stage__label{
  color:#f0b90b!important;letter-spacing:.2em;
}
.arena-stage__question{
  font-size:clamp(20px,2.1vw,30px)!important;
  line-height:1.3!important;letter-spacing:-.02em;
  background:linear-gradient(172deg,#ffffff 22%,#d2d7de 72%,#9aa3af 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.arena-stage__value{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  text-shadow:0 0 28px #f0b90b4d;
}
.arena-stage__value:not(.is-resting){
  background:linear-gradient(170deg,#ffe9a3,#f0b90b 66%,#c99400);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- 5. 概率轴：整屏最该发光的地方，原来只有一根发丝线 ---------- */
.arena-axis{padding:26px 2px 22px}
.arena-axis__track{
  height:52px;
  border:1px solid #232933;border-bottom:1px solid #2f3742;border-radius:4px;
  overflow:hidden;
  background:
    linear-gradient(90deg,#f6465d12,#f0b90b0a 48%,#0ecb8112),
    repeating-linear-gradient(90deg,#ffffff07 0 1px,transparent 1px 4%),
    #080a0e;
  box-shadow:inset 0 14px 34px -18px #000,inset 0 1px 0 #ffffff0a;
}
/* 底边的能量条：否 → 是 的颜色语义 */
.arena-axis__track::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:1;
  background:linear-gradient(90deg,#f6465d,#f0b90b 50%,#0ecb81);
  box-shadow:0 0 14px #f0b90b55;
}
/* 来回游走的高光 */
.arena-axis__track::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;
  background:linear-gradient(90deg,transparent,#f0b90b1c 46%,transparent);
  animation:axisShimmer 7s ease-in-out infinite;
}
@keyframes axisShimmer{
  0%,100%{transform:translateX(-40%)}
  50%{transform:translateX(370%)}
}
.arena-axis__tick{
  bottom:0;height:13px;width:1px;background:#39414e;
}
.arena-axis__tick:first-child,.arena-axis__tick:last-child{
  height:100%;width:1px;
  background:linear-gradient(#f0b90b00,#f0b90b4d);
}
/* 每一条提交：一根发光的灯丝 */
.arena-axis__mark{
  bottom:3px;width:2px;height:34px;opacity:1;border-radius:0;
  background:linear-gradient(#fcd53500,#f0b90b 42%,#ffe9a3);
  box-shadow:0 0 9px #f0b90b7a;
}
/* 共识点：一颗亮钻 */
.arena-axis__mean{
  bottom:-7px;width:14px;height:14px;z-index:2;
  background:linear-gradient(135deg,#fff6d8,#f0b90b 62%,#c99400);
  box-shadow:0 0 0 1px #0b0e11,0 0 20px #f0b90b,0 0 52px #f0b90b5c;
  animation:meanBeat 2.8s ease-in-out infinite;
}
@keyframes meanBeat{
  0%,100%{box-shadow:0 0 0 1px #0b0e11,0 0 20px #f0b90b,0 0 52px #f0b90b5c}
  50%{box-shadow:0 0 0 1px #0b0e11,0 0 28px #fcd535,0 0 76px #f0b90b7a}
}
.arena-axis__scale span{color:#6b7482}
.arena-axis__scale span:first-child{color:#f6465d}
.arena-axis__scale span:last-child{color:#0ecb81}

/* ---------- 6. 面板头：一条渐隐的金边，取代平直的发丝线 ---------- */
.arena-panel__head{
  position:relative;
  background:linear-gradient(180deg,#121720,#0c1015);
}
.arena-panel__head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,#f0b90b73,#f0b90b14 56%,transparent);
}
.arena-panel__eyebrow{color:#f0b90b!important;opacity:.72}
.arena-count{
  border-color:#f0b90b40!important;color:#f0b90b!important;
  background:#f0b90b14!important;
  box-shadow:0 0 14px -4px #f0b90b73;
}

/* ---------- 7. 空态：已并入文末「空态 v3」（原来的雷达扩散环撤下） ---------- */


/* ---------- 8. 未连接横幅：一条带灯的状态条 ---------- */
.arena-service-note::before{animation:noteBlink 2.2s ease-in-out infinite}
@keyframes noteBlink{0%,100%{opacity:1}50%{opacity:.32}}

/* ---------- 9. 输入与按钮：金色要真的是光源 ---------- */
.arena-shell .arena-console__button{
  background:linear-gradient(170deg,#fcd535,#f0b90b 58%,#dca700)!important;
  border-color:#f0b90b!important;color:#13161a!important;font-weight:700!important;
  box-shadow:0 10px 26px -14px #f0b90bcc,inset 0 1px 0 #ffffff66;
}
.arena-shell .arena-console__button:hover{
  box-shadow:0 15px 34px -14px #f0b90be6,inset 0 1px 0 #ffffff80;
}
.arena-join{
  background:linear-gradient(170deg,#fcd535,#f0b90b 58%,#dca700)!important;
  box-shadow:0 12px 32px -16px #f0b90bcc,inset 0 1px 0 #ffffff66;
}

/* ---------- 10. 两道闸门 ---------- */
body.effects-paused .arena-shell::before,
body.effects-paused .arena-shell::after,
body.effects-paused .arena-axis__track::after,
body.effects-paused .arena-axis__mean,
body.effects-paused .arena-service-note::before,
body.effects-paused .arena-empty__rest::before,
body.effects-paused .arena-empty__rest::after{animation:none}
body.effects-paused .arena-shell::after{opacity:0}

@media (prefers-reduced-motion:reduce){
  .arena-shell::before,.arena-shell::after,.arena-axis__track::after,
  .arena-axis__mean,.arena-service-note::before,
  .arena-empty__rest::before,.arena-empty__rest::after{animation:none}
  .arena-shell::after{opacity:0}
}

/* ---------- 11. 窄屏收敛 ---------- */
@media (max-width:640px){
  .arena-axis__track{height:42px}
  .arena-axis__mark{height:27px}
  .arena-shell::after{height:120px}
}

/* ============================================================
   HUD 第二轮：让它真的在跑，并且别再是空房间
   ============================================================ */

/* ---- 12. 外壳边缘呼吸 + 顶边跑一道电流 ---- */
.arena-shell{animation:hudBreath 7s ease-in-out infinite}
@keyframes hudBreath{
  0%,100%{box-shadow:0 48px 110px -60px #000,0 0 0 1px #f0b90b14,inset 0 1px 0 #ffffff0d}
  50%    {box-shadow:0 48px 110px -60px #000,0 0 0 1px #f0b90b33,0 0 72px -26px #f0b90b3d,inset 0 1px 0 #ffffff17}
}
.arena-topline::after{
  background:
    linear-gradient(90deg,#f0b90b00,#f0b90b00 22%,#fff3c4 31%,#fcd535 34%,#f0b90b00 46%,#f0b90b00 100%) 0 0/260% 100%,
    linear-gradient(90deg,#f0b90b00,#f0b90b73 14%,#f0b90b2e 52%,#f0b90b73 86%,#f0b90b00);
  animation:hudTrace 7.5s linear infinite;
}
@keyframes hudTrace{
  from{background-position:150% 0,0 0}
  to  {background-position:-150% 0,0 0}
}

/* ---- 13. 概率轴内部：空的时候也要像一台通着电的仪表 ---- */
.arena-axis{position:relative}
/* 50% 基准线：挂机线的位置，站上所有数字都绕着它讲 */
.arena-axis::before{
  content:"";position:absolute;left:50%;top:26px;height:52px;width:1px;z-index:2;pointer-events:none;
  background:linear-gradient(#f0b90b00,#f0b90b59);
}
/* 来回扫的探针：没有提交时它证明这台仪表是活的 */
.arena-axis::after{
  content:"";position:absolute;top:26px;height:52px;width:2px;left:0;z-index:2;pointer-events:none;
  background:linear-gradient(#fcd53500,#fcd535b3);
  box-shadow:0 0 18px #f0b90bcc;
  animation:hudNeedle 8s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes hudNeedle{0%,100%{left:1px;opacity:.25}50%{left:calc(100% - 3px);opacity:.9}}

/* ---- 14. 未连接时压缩版式：空房间再亮也还是空房间 ---- */
.arena-shell:has(>.arena-service-note:not([hidden])) .arena-stage{padding-bottom:4px}
.arena-shell:has(>.arena-service-note:not([hidden])) .arena-axis{padding:18px 2px 16px}
.arena-shell:has(>.arena-service-note:not([hidden])) .arena-axis::before,
.arena-shell:has(>.arena-service-note:not([hidden])) .arena-axis::after{top:18px;height:46px}
.arena-shell:has(>.arena-service-note:not([hidden])) .arena-axis__track{height:46px}
.arena-shell:has(>.arena-service-note:not([hidden])) .arena-messages{padding:48px 24px 50px;min-height:330px}
.arena-shell:has(>.arena-service-note:not([hidden])) .arena-panel__head{min-height:0;padding:14px 20px}

/* ---- 15. 空态图标：已并入文末「空态 v3」 ---- */

/* ---- 16. 闸门补充 ---- */
body.effects-paused .arena-shell,
body.effects-paused .arena-topline::after,
body.effects-paused .arena-axis::after{animation:none}
body.effects-paused .arena-axis::after{opacity:.3;left:50%}
@media (prefers-reduced-motion:reduce){
  .arena-shell,.arena-topline::after,.arena-axis::after{animation:none}
  .arena-axis::after{opacity:.3;left:50%}
}

/* ============================================================
   空态 v3：幽灵聊天预览
   声呐那一版在这块又宽又矮的面板里放不下：圆环被顶边截断，旋转扇形像一块
   渲染残影，环线还穿过正文。这里改成这块区域将来的样子——几行淡出的占位消息，
   左边是智能体发言，右边是回应，中间一张说明卡。只是轮廓，不含任何文字或数据。
   ============================================================ */
.arena-messages.is-resting{position:relative;overflow:hidden}
.arena-messages.is-resting>*{position:relative;z-index:2}

/* 占位消息：每 148px 一来一回两条，头像 + 名字条 + 一到两行文字条 */
.arena-messages.is-resting::before{
  content:"";position:absolute;inset:22px 24px 10px;z-index:0;pointer-events:none;opacity:.9;
  background:
    radial-gradient(circle at 15px 15px,#272d36 0 14px,transparent 14.5px) 0 0/30px 148px repeat-y,
    linear-gradient(transparent 4px,#232931 4px 12px,transparent 12px) 44px 0/96px 148px repeat-y,
    linear-gradient(transparent 21px,#1b2027 21px 30px,transparent 30px) 44px 0/27% 148px repeat-y,
    linear-gradient(transparent 37px,#1b2027 37px 46px,transparent 46px) 44px 0/18% 148px repeat-y,
    radial-gradient(circle at 15px 89px,#272d36 0 14px,transparent 14.5px) right 0 top 0/30px 148px repeat-y,
    linear-gradient(transparent 78px,#232931 78px 86px,transparent 86px) right 44px top 0/78px 148px repeat-y,
    linear-gradient(transparent 95px,#1b2027 95px 104px,transparent 104px) right 44px top 0/23% 148px repeat-y;
  -webkit-mask-image:linear-gradient(#000 0,#000 58%,transparent 100%);
          mask-image:linear-gradient(#000 0,#000 58%,transparent 100%);
}
/* 一道很慢的掠光，从左到右扫过占位消息；在说明卡下面走，不碰字 */
.arena-messages.is-resting::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,#f0b90b0a 46%,#fcd53514 50%,#f0b90b0a 54%,transparent 66%) 0 0/260% 100% no-repeat;
  animation:ghostSweep 8s ease-in-out infinite;
}
@keyframes ghostSweep{0%{background-position:130% 0}62%,100%{background-position:-30% 0}}

/* 说明卡：居中，身后一圈深色，让占位消息在卡片周围自然淡出 */
.arena-shell .arena-messages.is-resting .arena-empty--discussion{
  display:flex;flex-direction:column;align-items:center!important;text-align:center;
  max-width:44ch;padding:22px 34px 24px;border-left:0;
  background:radial-gradient(closest-side,#0d1116 64%,#0d111600);
}
/* 图标：聊天气泡，原来的「—」字形藏起来；气泡缓慢呼吸 */
.arena-shell .arena-messages.is-resting .arena-empty--discussion .arena-empty__rest{
  display:block;width:56px;height:56px;margin:0 0 18px;padding:0;border-radius:16px;
  font-size:0;line-height:0;color:transparent;opacity:1;
  border:1px solid #f0b90b4d;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0b90b' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4.5 5h15A1.5 1.5 0 0 1 21 6.5v9a1.5 1.5 0 0 1-1.5 1.5H10l-4.2 3.3V17H4.5A1.5 1.5 0 0 1 3 15.5v-9A1.5 1.5 0 0 1 4.5 5z'/%3E%3Ccircle cx='8.2' cy='11' r='1' fill='%23f0b90b' stroke='none'/%3E%3Ccircle cx='12' cy='11' r='1' fill='%23f0b90b' stroke='none'/%3E%3Ccircle cx='15.8' cy='11' r='1' fill='%23f0b90b' stroke='none'/%3E%3C/svg%3E") center/26px 26px no-repeat,
    radial-gradient(70% 70% at 50% 28%,#f0b90b2e,transparent 72%),
    linear-gradient(160deg,#1a1f27,#0d1116 78%);
  animation:emptyBreath 3.8s ease-in-out infinite;
}
.arena-shell .arena-messages.is-resting .arena-empty--discussion .arena-empty__rest::before,
.arena-shell .arena-messages.is-resting .arena-empty--discussion .arena-empty__rest::after{content:none}
@keyframes emptyBreath{
  0%,100%{box-shadow:0 0 22px #f0b90b1a,inset 0 1px 0 #ffffff17}
  50%    {box-shadow:0 0 40px #f0b90b40,inset 0 1px 0 #ffffff24}
}
.arena-shell .arena-messages.is-resting .arena-empty--discussion strong{color:#eaecef;font-weight:600}
.arena-shell .arena-messages.is-resting .arena-empty--discussion p{color:#848e9c;max-width:none}

/* 窄屏：说明卡占满宽度，占位消息退成很淡的底纹 */
@media (max-width:800px){
  .arena-messages.is-resting::before{opacity:.35}
}
body.effects-paused .arena-messages.is-resting .arena-empty__rest{animation:none}
@media (prefers-reduced-motion:reduce){
  .arena-messages.is-resting .arena-empty__rest{animation:none}
}

/* 主 CTA：一道掠过的高光 */
.arena-join,.arena-shell .arena-console__button{position:relative;overflow:hidden}
.arena-join::after{
  content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;pointer-events:none;
  background:linear-gradient(100deg,#ffffff00,#ffffff8c,#ffffff00);
  animation:hudGleam 4.6s ease-in-out infinite;
}
@keyframes hudGleam{0%,62%{left:-45%}92%,100%{left:118%}}

body.effects-paused .arena-messages.is-resting::after,
body.effects-paused .arena-join::after{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){
  .arena-messages.is-resting::after,.arena-join::after{animation:none}
  .arena-join::after{opacity:0}
}

/* ---- 17. 大厅整块的极光底：两团缓慢漂移的金色，面板因此浮在光上 ---- */
#arena{position:relative;isolation:isolate;overflow:hidden}
#arena::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-14% -8% -10% -10%;
  background:
    radial-gradient(42% 46% at 18% 24%,#f0b90b26,transparent 66%),
    radial-gradient(38% 42% at 84% 72%,#fcd53517,transparent 68%),
    radial-gradient(54% 40% at 50% 110%,#f0b90b14,transparent 70%);
  filter:blur(6px);
  animation:arenaAurora 24s ease-in-out infinite alternate;
}
@keyframes arenaAurora{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(2.4%,-1.8%,0) scale(1.07)}
  100%{transform:translate3d(-2%,1.6%,0) scale(1.03)}
}
body.effects-paused #arena::before{animation:none}
@media (prefers-reduced-motion:reduce){#arena::before{animation:none}}