/* ===========================================================
   等比缩放舞台
   -----------------------------------------------------------
   设计稿宽度 = 864 设计px（与效果图 UI.png 等宽）。
   全部尺寸用 rem 表达，1rem = 10 设计px。
   根字号跟随视口宽度线性变化：移动端 / 桌面端 / 任意窗口宽度
   看到的都是同一套版式，只是整体等比放大缩小，永不重排。
   桌面端由 --stage-max 锁定最大宽度（只改这一个值即可）。
   =========================================================== */
:root{ --stage-max: 620px; }
html{
  font-size: min(calc(100vw / 86.4), calc(var(--stage-max) / 86.4));
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

/* ===========================================================
   导弹游戏Lite —— 静态视觉层
   =========================================================== */
:root{
  --bg:            #f7f9fd;
  --card:          #ffffff;
  --line:          #e9edf3;
  --line-soft:     #f0f3f8;

  --text:          #1f2733;
  --text-2:        #5b6675;
  --text-3:        #9aa4b2;

  --blue:          #2f7cf6;
  --blue-soft:     #eaf1fe;
  --blue-border:   #d5e4fd;

  --red:           #ef4136;
  --red-soft:      #fdeeec;
  --red-border:    #f8d5d0;

  --green:         #22ac66;
  --green-soft:    #e8f7ef;
  --orange:        #f5a623;
  --gold:          #f3b32b;
  --gold-deep:     #d9930d;
  --cream:         #fdf3dc;
  --cream-text:    #8a6417;

  --radius-lg:     1.9rem;
  --radius-md:     1.5rem;
  --radius-sm:     1.1rem;
  --shadow-sm:     0 .1rem .4rem rgba(24,44,78,.05);
  --shadow-md:     0 .4rem 1.6rem rgba(24,44,78,.07);
  --shadow-lg:     0 1rem 3.4rem rgba(24,44,78,.14);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#e6eaf1;
  overflow-x:hidden;
  color:var(--text);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:1.6rem;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;padding:0;color:inherit;}
ul{margin:0;padding:0;list-style:none;}

.app{
  position:relative;
  width:86.4rem;            /* = 视口宽度（移动端）或 --stage-max（桌面端） */
  max-width:100%;
  margin:0 auto;
  padding:1.4rem 2.1rem 1rem;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  box-shadow:0 0 4rem rgba(24,44,78,.10);
}

/* 通用图标 */
.ico{width:2.2rem;height:2.2rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block;}
.ico .fill{fill:currentColor;stroke:none;}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;color:var(--text-2);border-radius:1rem;transition:background .15s;}
.icon-btn:hover{background:rgba(0,0,0,.04);}

/* 信用点金币 */
.coin{
  display:inline-block;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 34% 30%, #ffd970 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow:inset 0 0 0 .15rem rgba(255,255,255,.45), 0 .1rem .2rem rgba(180,120,0,.28);
}
.coin::after{
  content:"S";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-family:Georgia,"Times New Roman",serif;
  text-shadow:0 .1rem 0 rgba(160,105,0,.35);
}
.coin-sm{width:1.6rem;height:1.6rem;} .coin-sm::after{font-size:1.05rem;}
.coin-md{width:2.2rem;height:2.2rem;} .coin-md::after{font-size:1.4rem;}
.coin-lg{width:2.9rem;height:2.9rem;} .coin-lg::after{font-size:1.85rem;}
.coin-on-dark{box-shadow:inset 0 0 0 .15rem rgba(255,255,255,.6);}

/* ===================== 顶部栏 ===================== */
.app-header{display:flex;align-items:flex-start;gap:1rem;padding:.4rem 0 2.1rem;}
.menu-btn{width:4.4rem;height:4.4rem;color:var(--text);margin-top:.4rem;}
.menu-btn .ico{width:3rem;height:3rem;stroke-width:2.2;}
.header-center{flex:1;text-align:center;min-width:0;}
.game-title{
  margin:0;font-size:2.8rem;font-weight:800;letter-spacing:.05rem;line-height:1.2;
  display:flex;align-items:center;justify-content:center;gap:.9rem;
}
.title-emoji{font-size:2.6rem;}
.room-line{margin-top:1.5rem;display:flex;align-items:center;justify-content:center;gap:.3rem;color:var(--text-2);font-size:1.8rem;line-height:1.2;}
.room-id{font-weight:600;}
.copy-btn{width:2.6rem;height:2.6rem;color:var(--text-3);margin-left:.4rem;}
.copy-btn .ico{width:1.8rem;height:1.8rem;}
.header-right{display:flex;align-items:center;gap:.8rem;margin-top:.6rem;}
.player-count{
  display:flex;align-items:center;gap:.7rem;background:#eef1f6;color:var(--text-2);
  padding:.8rem 1.5rem;border-radius:2.4rem;font-size:1.8rem;font-weight:500;line-height:1;
}
.player-count .ico{width:2rem;height:2rem;}
.gear-btn{width:4.4rem;height:4.4rem;color:var(--text-2);}
.gear-btn .ico{width:2.9rem;height:2.9rem;stroke-width:1.6;}

/* ===================== 比分条 ===================== */
.score-bar{display:flex;align-items:stretch;gap:.6rem;height:11.1rem;margin-bottom:1.9rem;}
.side-card{
  flex:1;display:flex;align-items:center;gap:1.8rem;padding:0 1.9rem;
  border-radius:var(--radius-lg);min-width:0;
}
.side-card.guardian{background:#eaf1fd;}
.side-card.destroyer{background:#fdecea;justify-content:flex-end;}
.side-emblem{position:relative;width:6.6rem;height:7.2rem;flex:none;filter:drop-shadow(0 .3rem .6rem rgba(24,44,78,.18));}
.side-emblem .shield{width:6.6rem;height:7.2rem;stroke:none;}
.guardian-emblem .shield path{fill:#3178e8;}
.destroyer-emblem .shield path{fill:#e8382d;}
.emblem-inner{position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);width:3rem;height:3rem;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.side-text{display:flex;flex-direction:column;gap:.9rem;min-width:0;}
.side-text.align-right{align-items:flex-end;}
.side-name{font-size:2rem;font-weight:700;line-height:1;}
.guardian .side-name{color:var(--blue);}
.destroyer .side-name{color:var(--red);}
.side-stat{display:flex;align-items:center;gap:1.2rem;}
.side-stat-label{font-size:2rem;font-weight:600;color:var(--text);line-height:1;}
.side-score{font-size:3.8rem;font-weight:800;line-height:1;}
.guardian .side-score{color:var(--blue);}
.destroyer .side-score{color:var(--red);}

.round-card{
  flex:none;width:19.4rem;background:var(--card);border-radius:2.2rem;
  box-shadow:var(--shadow-md);padding:.6rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
}
.round-title{font-size:2.6rem;font-weight:800;line-height:1;}
.round-sub{font-size:1.4rem;color:var(--text-3);line-height:1;}
.round-timer{font-size:2.4rem;font-weight:800;letter-spacing:.05rem;line-height:1;}

/* ===================== 主体三栏 ===================== */
.main-grid{
  display:grid;
  grid-template-columns:14.4rem minmax(0,1fr) 14.4rem;
  grid-template-areas:"left center right" "chat chat right";
  column-gap:1.7rem;row-gap:2.9rem;
  align-items:start;
  position:relative;
}
.player-col:first-of-type{grid-area:left;}
.center-col{grid-area:center;}
.player-col:last-of-type{grid-area:right;}
.chat-panel{grid-area:chat;}

/* ---------- 玩家列 ---------- */
.player-list{
  background:var(--card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:1.8rem .6rem;
  display:flex;flex-direction:column;gap:2.45rem;
}
.player{display:flex;flex-direction:column;align-items:center;gap:1.2rem;}
.player-avatar-wrap{position:relative;}
.avatar{
  width:7.2rem;height:7.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:3.8rem;line-height:1;background:#eef2f8;box-shadow:0 .2rem .6rem rgba(24,44,78,.10);
  border:.2rem solid #fff;overflow:hidden;user-select:none;
}
.avatar img{width:100%;height:100%;object-fit:cover;}
.avatar-lg{width:7.6rem;height:7.6rem;font-size:4rem;}
.status-dot{
  position:absolute;right:.1rem;bottom:.2rem;width:1.65rem;height:1.65rem;border-radius:50%;
  border:.28rem solid #fff;background:#31c366;
}
.status-dot.offline{background:#c3cad4;}
.status-dot.muted{
  background:var(--red);width:1.95rem;height:1.95rem;
  display:flex;align-items:center;justify-content:center;
}
.status-dot.muted::after{
  content:"";width:1rem;height:1rem;background:#fff;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 5 6.5 9H3v6h3.5L11 19z' fill='black'/><path d='M16 8l5 8M21 8l-5 8' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 5 6.5 9H3v6h3.5L11 19z' fill='black'/><path d='M16 8l5 8M21 8l-5 8' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") center/contain no-repeat;
}
.player-name{font-size:1.8rem;font-weight:600;text-align:center;line-height:1.2;}
.player-credits{display:flex;align-items:center;gap:.6rem;font-size:1.8rem;color:var(--text-2);font-weight:600;line-height:1.2;}
.player.is-president .avatar{border-color:var(--gold);box-shadow:0 0 0 .2rem var(--gold);}
.player.is-team .avatar{border-color:var(--blue);box-shadow:0 0 0 .2rem var(--blue);}
.player.is-me .player-name{color:var(--blue);}

/* ---------- 中间流程 ---------- */
.team-banner{
  background:var(--cream);color:var(--cream-text);font-weight:700;font-size:2.15rem;line-height:1.2;
  text-align:center;padding:1.2rem;border-radius:var(--radius-md);margin-bottom:2.1rem;
}
.step-card{border-radius:var(--radius-lg);}
.step-card.step-active{background:#f2f7ff;border:.15rem solid var(--blue-border);padding:2.4rem 3.1rem 1.3rem;}
.step-card.step-idle{background:#f0f3f8;padding:2.5rem 2.2rem 1.7rem;margin-top:1.3rem;}
.step-head{display:flex;align-items:center;justify-content:center;gap:.9rem;color:var(--blue);line-height:1.2;}
.step-head-ico{width:2.6rem;height:2.6rem;stroke-width:1.8;}
.step-head-title{font-size:2.4rem;font-weight:800;}
.help-btn{
  width:2.3rem;height:2.3rem;border-radius:50%;border:.15rem solid #9dbdf3;color:#7ba4ef;
  font-size:1.5rem;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;
}
.step-desc{margin:1.6rem 0 0;text-align:center;color:var(--text-2);font-size:1.8rem;line-height:1.25;}

/* 领先者 */
.leader-box{
  margin-top:2.6rem;background:var(--card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  height:12.7rem;padding:0 5.2rem 0 2.4rem;display:flex;align-items:center;gap:2rem;
}
.leader-avatar-wrap{position:relative;flex:none;padding-top:1.4rem;}
.crown{position:absolute;top:-.4rem;left:50%;transform:translateX(-52%) rotate(-10deg);font-size:2.6rem;z-index:2;line-height:1;}
.leader-name{font-size:2.5rem;font-weight:700;flex:1;}
.leader-bid{text-align:center;flex:none;}
.leader-bid-label{font-size:1.6rem;color:var(--text-2);margin-bottom:.9rem;line-height:1;}
.leader-bid-value{display:flex;align-items:center;justify-content:center;gap:.8rem;color:var(--red);font-size:4rem;font-weight:800;line-height:1;}

/* 警告 */
.warn-box{
  margin-top:2rem;background:var(--red-soft);border:.1rem solid var(--red-border);
  border-radius:var(--radius-md);padding:1.4rem 2rem 1.3rem;text-align:center;
}
.warn-title{display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--red);font-size:2.5rem;font-weight:800;line-height:1.1;}
.warn-ico{width:3rem;height:3rem;fill:var(--red);stroke:none;}
.warn-ico .wstroke{stroke:#fff;stroke-width:2;stroke-linecap:round;fill:none;}
.warn-ico .wdot{fill:#fff;}
.warn-text{margin:1.2rem 0 0;font-size:1.75rem;color:var(--text);line-height:1.7;}
.warn-text b{color:var(--red);font-weight:700;}
.warn-divider{height:.1rem;background:var(--red-border);margin:1.5rem 0 1.3rem;}
.warn-mybid{display:flex;align-items:center;justify-content:center;gap:.6rem;color:var(--red);font-size:2rem;font-weight:600;line-height:1;}

/* 倒计时 */
.bid-countdown{
  margin-top:1.3rem;background:var(--card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  height:5.6rem;display:flex;align-items:center;justify-content:center;
  font-size:2.1rem;font-weight:600;
}
.bid-countdown b{color:var(--red);font-size:2.3rem;font-weight:800;margin:0 .4rem;}

/* 按钮 */
.bid-actions{display:flex;gap:3.4rem;margin-top:1.6rem;}
.btn{
  flex:1;border-radius:var(--radius-md);height:5.7rem;font-size:2.1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:.8rem;transition:filter .15s,opacity .15s;
}
.btn:active{filter:brightness(.94);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-label{display:inline-flex;align-items:baseline;}
.btn-danger{background:var(--red);color:#fff;box-shadow:0 .3rem 1rem rgba(239,65,54,.28);}
.btn-ghost{background:#e7eaef;color:var(--text);}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 .4rem 1.2rem rgba(47,124,246,.3);}
.bid-foot{display:flex;justify-content:center;gap:3.2rem;margin-top:2rem;color:var(--text-2);font-size:1.8rem;line-height:1.2;}

/* 折叠步骤行 */
.step-row{display:flex;align-items:center;gap:1.4rem;}
.step-badge{width:3.4rem;height:3.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;}
.step-badge .ico{width:1.9rem;height:1.9rem;stroke-width:2.4;}
.badge-blue{background:var(--blue);}
.badge-green{background:var(--green);}
.badge-orange{background:var(--orange);}
.step-row-text{flex:1;min-width:0;}
.step-row-title{font-size:1.9rem;font-weight:700;line-height:1.2;}
.step-row-sub{font-size:1.7rem;color:var(--text-3);margin-top:.8rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.step-row-right{display:flex;align-items:center;gap:.6rem;color:var(--text-2);font-size:1.8rem;flex:none;}
.step-row-right .clock{width:2rem;height:2rem;stroke-width:1.9;}

/* ---------- 聊天 ---------- */
.chat-panel{
  background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  height:50.3rem;display:flex;flex-direction:column;overflow:hidden;
}
.chat-tabs{display:flex;gap:3rem;padding:1.8rem 3.1rem 0;border-bottom:.1rem solid var(--line-soft);flex:none;}
.chat-tab{position:relative;padding:0 .2rem 1.3rem;font-size:2rem;font-weight:600;color:var(--text-2);line-height:1.2;}
.chat-tab.active{color:var(--blue);font-weight:700;}
.chat-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:.35rem;border-radius:.35rem;background:var(--blue);}
.chat-body{flex:1;padding:4.4rem 2.6rem 1rem;display:flex;flex-direction:column;gap:3.2rem;overflow-y:auto;}
.chat-msg{display:flex;gap:1.2rem;}
.chat-avatar{
  width:2.8rem;height:2.8rem;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;background:#eef2f8;overflow:hidden;
}
.chat-avatar img{width:100%;height:100%;object-fit:cover;}
.chat-main{min-width:0;}
.chat-meta{display:flex;align-items:baseline;gap:1rem;}
.chat-name{font-size:1.6rem;font-weight:600;color:var(--text-2);line-height:1.2;}
.chat-time{font-size:1.5rem;color:var(--text-3);}
.chat-text{margin-top:.9rem;font-size:1.75rem;line-height:1.4;word-break:break-word;}
.chat-msg.is-system .chat-text{color:var(--text-2);}
.chat-input-row{display:flex;align-items:center;gap:1.4rem;padding:0 2.6rem 4.8rem;flex:none;}
.chat-input-wrap{flex:1;position:relative;}
.chat-input{
  width:100%;height:5.2rem;border-radius:2.6rem;border:.1rem solid var(--line);background:#fafbfd;
  padding:0 5rem 0 2.2rem;font-size:1.8rem;color:var(--text);outline:none;
}
.chat-input::placeholder{color:var(--text-3);}
.chat-input:focus{border-color:var(--blue-border);background:#fff;}
.emoji-btn{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);color:var(--text-3);}
.emoji-btn .ico{width:2.4rem;height:2.4rem;}
.send-btn{
  width:5.2rem;height:5.2rem;border-radius:50%;background:var(--blue);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;box-shadow:0 .4rem 1.2rem rgba(47,124,246,.3);
}
.send-btn .ico{width:2.5rem;height:2.5rem;transform:translateX(-.1rem);}

/* ===================== 结算弹窗 ===================== */
.settlement{
  position:absolute;right:-.2rem;bottom:-.8rem;width:45.7rem;z-index:30;
  background:var(--card);border-radius:2.2rem;box-shadow:var(--shadow-lg);
  padding:2.2rem 1.7rem 1.9rem;
}
.settlement[hidden]{display:none;}
.settlement-head{display:flex;align-items:center;justify-content:center;position:relative;padding-bottom:1.7rem;}
.settlement-title{font-size:2.6rem;font-weight:800;line-height:1.2;}
.close-btn{position:absolute;right:-.4rem;top:-.4rem;width:3.6rem;height:3.6rem;color:var(--text-2);}
.close-btn .ico{width:2.4rem;height:2.4rem;stroke-width:2;}
.settlement-result{
  display:flex;align-items:center;justify-content:center;gap:1.2rem;
  border-radius:var(--radius-md);height:6.3rem;font-size:2.8rem;font-weight:800;
}
.settlement-result.success{background:var(--green-soft);color:var(--green);}
.settlement-result.fail{background:var(--red-soft);color:var(--red);}
.result-emoji{font-size:2.8rem;}
.settlement-summary{display:flex;align-items:center;padding:2rem 0 1.6rem;}
.sum-cell{flex:1;text-align:center;}
.sum-split{width:.1rem;align-self:stretch;background:var(--line);}
.sum-label{font-size:1.7rem;font-weight:600;margin-bottom:1.1rem;line-height:1;}
.sum-value{display:flex;align-items:center;justify-content:center;gap:.9rem;font-size:3rem;font-weight:800;line-height:1;}
.sum-value.plus{color:var(--green);}
.sum-value.minus{color:var(--red);}
.settlement-detail{border:.1rem solid var(--line);border-radius:var(--radius-md);padding:1.6rem 1.4rem 1.4rem;margin:0 1.6rem;}
.detail-group + .detail-group{margin-top:1.4rem;}
.detail-title{font-size:1.6rem;font-weight:700;margin-bottom:.8rem;line-height:1.2;}
.detail-list li{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0 .5rem 2rem;font-size:1.5rem;color:var(--text-2);line-height:1.3;}
.detail-list .amount{font-weight:600;}
.detail-list .amount.plus,.detail-list .amount.zero{color:var(--green);}
.detail-list .amount.minus{color:var(--red);}
.detail-divider{height:.1rem;background:var(--line);margin:1.4rem 0 1.2rem;}
.balance-row{display:flex;justify-content:space-between;align-items:center;font-size:1.6rem;color:var(--text-2);}
.balance-value{display:flex;align-items:center;gap:.8rem;color:var(--text);font-size:2.6rem;font-weight:800;line-height:1;}
.settlement-ok{width:calc(100% - 5.2rem);margin:2.7rem auto 0;border-radius:var(--radius-md);height:5.3rem;}