/* ============ 毡绿·精装 ============ */
:root{
  --felt:#1B5E4A; --felt-top:#226A54; --felt-deep:#164C3C;
  --gold:#F0C460; --gold-deep:#C9A227;
  --ivory:#F7F5EF; --card:#FFFFFF;
  --profit:#E5484D;          /* 红 = 盈利 */
  --loss:#2E9E6B;            /* 绿 = 亏损 */
  --navy:#2B4C7E;            /* 昵称藏蓝 */
  --ink:#26302B; --muted:#7A857F; --line:#E7E3D8;
  --radius:16px;
  --shadow:0 4px 16px rgba(27,94,74,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--ivory); color:var(--ink); min-height:100vh;
}
.num,.num-lg,.pnl,.matrix td{font-variant-numeric:tabular-nums}

/* ---- 顶部房间状态条 ---- */
.room-bar{
  position:relative;z-index:30;
  background:#123528;                       /* 比 header 更深一号的绿 */
  border-bottom:1px solid var(--gold-deep);
  color:#fff;
  padding:env(safe-area-inset-top,0px) 12px 0;
}
.room-bar-inner{
  max-width:720px;margin:0 auto;height:32px;
  display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap;
}
.rb-off{color:#C9BD8F}                      /* 灰金 */
.rb-flex{flex:1}
.rb-btn{
  display:inline-flex;align-items:center;gap:4px;flex:none;
  background:none;border:1px solid rgba(240,196,96,.55);color:var(--gold);
  border-radius:8px;padding:3px 10px;font-size:12px;line-height:1.4;cursor:pointer;
}
.rb-btn:disabled{opacity:.55;cursor:default}
.rb-ico{font-size:15px;line-height:1}
.rb-more{padding:3px 9px;letter-spacing:1px;font-size:14px;line-height:1.2}
.rb-dot{
  width:8px;height:8px;border-radius:50%;background:#37D08C;flex:none;
  box-shadow:0 0 6px rgba(55,208,140,.8);
}
.rb-code{font-weight:700;letter-spacing:1px;cursor:pointer;flex:none}
.rb-info{color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;min-width:0}
.rb-info.err{color:#FF8A8E}
.rb-spin{display:inline-block;animation:rb-rot 1s linear infinite}
@keyframes rb-rot{to{transform:rotate(360deg)}}
.rb-menu{
  position:absolute;right:12px;top:calc(100% + 6px);z-index:60;
  background:var(--card);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.28);
  overflow:hidden;min-width:132px;
}
.rb-menu button{
  display:block;width:100%;background:none;border:none;text-align:left;
  padding:11px 16px;font-size:13px;color:var(--ink);cursor:pointer;font-family:inherit;
}
.rb-menu button:hover{background:var(--ivory)}
.rb-menu button+button{border-top:1px solid #F1EEE4}
.rb-menu .danger{color:var(--profit)}
@media(max-width:480px){
  .rb-ico-btn .rb-txt{display:none}         /* 窄屏拉取/上传缩成图标 */
  .rb-ico-btn{padding:4px 10px}
  .rb-ico{font-size:18px}                   /* 手机端图标放大 */
  .rb-more{font-size:17px;padding:4px 10px}
}

/* ---- 顶栏 ---- */
.topbar{
  background:linear-gradient(160deg,var(--felt-top),var(--felt-deep));
  border-bottom:2px solid var(--gold-deep);
  color:#fff; padding:18px 16px 14px;       /* 安全区内边距由状态条承担 */
}
.topbar-inner{max-width:720px;margin:0 auto}
.brand{display:flex;align-items:baseline;justify-content:center;gap:10px}
.brand-suit{color:var(--gold);font-size:22px}
.brand h1{
  font-family:Georgia,"Songti SC","Noto Serif SC",serif;
  font-size:24px; letter-spacing:6px; font-weight:700;
}
.brand-sub{color:rgba(255,255,255,.65);font-size:12px;letter-spacing:1px;margin-top:4px;text-align:center}

/* ---- Tab ---- */
.tabs{
  position:sticky;top:0;z-index:20;display:flex;
  background:var(--felt-deep);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.tab{
  flex:1;padding:12px 0;font-size:15px;letter-spacing:2px;
  background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;
  border-bottom:3px solid transparent;transition:color .15s;
}
.tab.active{color:var(--gold);border-bottom-color:var(--gold);font-weight:600}

/* ---- 布局 ---- */
main{max-width:720px;margin:0 auto;padding:16px 12px calc(env(safe-area-inset-bottom,0px) + 40px)}
.view{display:none}
.view.active{display:block}
.card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;margin-bottom:14px;
}
.card-title{font-size:15px;font-weight:700;margin-bottom:10px;letter-spacing:1px}
.card-title .mini-label{font-weight:400;margin-left:6px}
.mini-label{font-size:12px;color:var(--muted)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hint{font-size:12px;color:var(--muted);text-align:center;margin:6px 0 20px;line-height:1.7}
.empty{text-align:center;color:var(--muted);padding:48px 0}
.hidden{display:none !important}
.center{text-align:center}.right{text-align:right}

/* ---- 输入 & 按钮 ---- */
.input{
  border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:15px;
  background:#FDFCF9;color:var(--ink);width:100%;
}
.input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold-deep)}
.input.num{width:96px;text-align:right}
.field-label{font-size:14px;font-weight:600}
.btn{
  border:none;border-radius:12px;padding:12px 18px;font-size:15px;cursor:pointer;
  letter-spacing:1px;transition:transform .05s,opacity .15s;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:linear-gradient(160deg,var(--felt-top),var(--felt-deep));color:#fff;font-weight:600;box-shadow:0 3px 10px rgba(27,94,74,.3)}
.btn-gold{background:linear-gradient(160deg,var(--gold),var(--gold-deep));color:#4A3A08;font-weight:700}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-danger{background:#fff;border:1px solid var(--profit);color:var(--profit)}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:10px}
.btn-close{background:none;border:none;font-size:24px;color:var(--muted);cursor:pointer;line-height:1;padding:4px 8px}
.action-row{display:flex;gap:10px;margin-top:6px}
.action-row .btn{flex:1}

/* ---- 记账:玩家行 ---- */
.player-grid{display:grid;grid-template-columns:1fr 92px 76px 70px 28px;gap:6px;align-items:center}
.table-head{font-size:12px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--line)}
.player-row{padding:10px 0;border-bottom:1px dashed var(--line)}
.player-row:last-child{border-bottom:none}
.p-name{font-weight:600;color:var(--navy);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stepper{display:flex;align-items:center;justify-content:center;gap:2px}
.stepper button{
  width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:#fff;
  font-size:16px;cursor:pointer;color:var(--felt);line-height:1;
}
.stepper span{min-width:26px;text-align:center;font-weight:600}
.chips-input{width:100%;text-align:center;padding:7px 4px;font-size:15px}
.pnl{text-align:right;font-weight:700;font-size:15px}
.profit{color:var(--profit)}
.loss{color:var(--loss)}
.flat{color:var(--muted)}
.btn-remove{background:none;border:none;color:#C9C2B2;font-size:18px;cursor:pointer;padding:2px}
.btn-remove:hover{color:var(--profit)}
.add-row{display:flex;gap:8px;margin-top:12px}
.add-row .input{flex:1}
.add-row .btn{white-space:nowrap}

/* ---- 平账 ---- */
.balance-card{display:flex;align-items:center;justify-content:space-between;gap:12px}
.balance-grid{display:flex;gap:20px;flex:1}
.balance-grid>div{display:flex;flex-direction:column;gap:2px}
.num-lg{font-size:18px;font-weight:700}
.balance-badge{
  font-size:13px;font-weight:700;padding:8px 12px;border-radius:10px;white-space:nowrap;
}
.balance-badge.ok{background:rgba(240,196,96,.18);color:var(--gold-deep);border:1px solid var(--gold-deep)}
.balance-badge.bad{background:rgba(229,72,77,.08);color:var(--profit);border:1px solid var(--profit)}

/* ---- 历史 ---- */
.toolbar{
  position:sticky;top:47px;z-index:10;display:flex;align-items:center;gap:10px;
  background:var(--ivory);padding:8px 2px;font-size:13px;color:var(--muted);
}
.toolbar #sel-count{flex:1}
.session-item{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px;cursor:pointer;
}
.session-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--felt)}
.session-main{flex:1;min-width:0}
.session-date{font-weight:700;font-size:15px}
.session-meta{font-size:12px;color:var(--muted);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap}
.session-meta b{font-weight:600}
.btn-del-session{background:none;border:none;color:#C9C2B2;font-size:17px;cursor:pointer;padding:4px}
.btn-del-session:hover{color:var(--profit)}

/* ---- 矩阵表格 ---- */
.matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.matrix{border-collapse:collapse;width:100%;font-size:13px;white-space:nowrap}
.matrix th{
  color:var(--muted);font-weight:600;font-size:12px;text-align:right;
  padding:8px 10px;border-bottom:1.5px solid var(--line);
}
.matrix th:first-child,.matrix td:first-child{
  text-align:left;position:sticky;left:0;background:var(--card);
  color:var(--navy);font-weight:600;max-width:110px;overflow:hidden;text-overflow:ellipsis;
}
.matrix td{padding:9px 10px;text-align:right;border-bottom:1px solid #F1EEE4;font-weight:600}
.matrix tr:last-child td{border-bottom:none}
.matrix .col-total{background:rgba(240,196,96,.10)}
.rank-medal{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;
  background:linear-gradient(160deg,var(--gold),var(--gold-deep));color:#4A3A08;font-weight:800;font-size:11px;margin-right:6px}
.rank-plain{display:inline-block;width:20px;text-align:center;color:var(--muted);margin-right:6px;font-weight:600}
.streak-tag{
  display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:1px 6px;margin-left:6px;
}
.streak-tag.win{background:rgba(229,72,77,.10);color:var(--profit)}
.streak-tag.lose{background:rgba(46,158,107,.12);color:var(--loss)}

/* ---- 合并排名 / 纪录 ---- */
.rank-item{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px}
.rank-item:last-child{border-bottom:none}
.rank-item .p-name{flex:1}
.rank-sub{font-size:12px;color:var(--muted)}
.records{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.record-box{border:1px solid var(--line);border-radius:12px;padding:12px}
.record-box .mini-label{display:block;margin-bottom:6px}
.record-box .num-lg{font-size:20px}
.record-box .rank-sub{margin-top:4px;display:block}

/* ---- 走势图 ---- */
#career-chart{position:relative}
#career-chart svg{width:100%;height:auto;display:block}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:#fff;border-radius:999px;padding:5px 11px;font-size:12px;
  cursor:pointer;color:var(--ink);transition:border-color .15s,background .15s;
}
.chip i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.chip.focused{border-color:var(--gold-deep);background:rgba(240,196,96,.16);font-weight:700}
.chip-add{color:var(--muted);border-style:dashed}
g.pline{transition:opacity .15s}
g.pline .hit{fill:transparent;cursor:pointer}
g.pline .line-hit{cursor:pointer}
.dot-label{
  display:none;font-size:10px;font-weight:700;pointer-events:none;
  paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;
}
svg.few g.pline .dot-label,
svg.has-focus g.pline.on .dot-label{display:block}
svg.has-focus g.pline{opacity:.14}
svg.has-focus g.pline.on{opacity:1}
svg.has-focus g.pline.on path:not(.line-hit){stroke-width:3}
svg.has-focus g.pline.on .dot{r:4}
svg.has-focus g.pline:not(.on) .hit{pointer-events:none}   /* 变淡的曲线仍可点选,数据点不响应 */
.chart-tip{
  position:absolute;z-index:6;background:rgba(38,48,43,.96);color:#fff;
  border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.7;
  box-shadow:0 8px 24px rgba(0,0,0,.28);max-width:210px;
}
.chart-tip .profit{color:#FF8A8E}
.chart-tip .loss{color:#5FCB9A}
.chart-tip .btn{margin-top:6px;width:100%;padding:6px 8px;font-size:12px}
.pick-row{display:flex;align-items:center;gap:9px;padding:10px 2px;border-bottom:1px dashed var(--line);cursor:pointer;font-size:14px}
.pick-row:last-child{border-bottom:none}
.pick-row input{width:17px;height:17px;accent-color:var(--felt);flex:none}
.pick-row i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.pick-row .p-name{flex:1}
button.pick-row{width:100%;background:none;border:none;border-bottom:1px dashed var(--line);font-family:inherit;color:var(--ink);text-align:left}
button.pick-row:last-child{border-bottom:none}

/* ---- 房间弹层表单 ---- */
.room-join{display:flex;gap:8px}
.room-join .input{flex:1}
.room-join .btn{white-space:nowrap}

/* ---- 弹层 / Toast ---- */
.modal{position:fixed;inset:0;background:rgba(22,76,60,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal-panel{
  background:var(--card);border-radius:20px 20px 0 0;width:100%;max-width:720px;
  padding:18px 16px calc(env(safe-area-inset-bottom,0px) + 18px);max-height:85vh;overflow-y:auto;
}
@media(min-width:600px){
  .modal{align-items:center}
  .modal-panel{border-radius:20px;padding-bottom:18px}
}
.modal textarea{margin:10px 0;font-family:monospace;font-size:12px}
.toast{
  position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:99;
  background:rgba(38,48,43,.92);color:#fff;font-size:14px;padding:10px 18px;border-radius:12px;
  max-width:86vw;text-align:center;transition:opacity .25s;
}
.merge-head{margin-bottom:12px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}
@media(max-width:400px){
  .player-grid{grid-template-columns:1fr 84px 66px 60px 24px}
  .balance-grid{gap:12px}
  .num-lg{font-size:16px}
}