/* ==========================================================================
   05 · HERO PANEL — identity card, expressions, action console
   ========================================================================== */

.hero-panel{
  position:relative;z-index:22;
  width:min(1120px,100%);margin:0 auto;
  display:grid;grid-template-rows:auto auto;gap:11px;
}
.hero-info{
  display:grid;grid-template-columns:minmax(0,calc(534px * (1 + (var(--ui-widen) - 1) * .25))) calc(244px * var(--ui-widen));gap:12px;
  justify-content:center;align-items:stretch;min-width:0;
  /* 角色卡列按 --ui-widen 的 25% 参与加宽：最大字阶（≈1.48）下账簿胶囊
     「正在行动 / BB · #10 / 100.0%」不再省略；总宽仍低于 1120px 面板上限。 */
}

/* ---------- hero player card --------------------------------------------- */
.hero-player-card{
  position:relative;min-width:0;
  border-radius:var(--r-md);border:1px solid var(--line-2);
  background:linear-gradient(170deg,rgba(24,30,40,calc(.92 * var(--scrim-scale))),rgba(12,15,21,calc(.94 * var(--scrim-scale))));
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.hero-card-accent{
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),transparent 85%);
}
.hero-card-header{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:12px 16px 10px 15px;
}
.hero-avatar-shell{position:relative;flex:none}
.hero-avatar{
  width:44px;height:44px;display:grid;place-items:center;border-radius:13px;
  font-size:.98rem;font-weight:800;color:var(--on-accent);
  background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));
  box-shadow:0 6px 16px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.3);
}
.hero-presence-dot{
  position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;
  background:var(--green);border:2.5px solid #12161d;
}
.hero-identity{min-width:0}
.hero-name-row{display:flex;align-items:center;gap:8px;min-width:0}
.hero-name-row strong{
  font-size:.98rem;font-weight:800;letter-spacing:.01em;
  color:var(--seat-name-color,var(--tx-1));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.you-badge{
  flex:none;font-family:var(--font-display);font-size:.5rem;font-weight:700;letter-spacing:.18em;
  padding:2.5px 7px;border-radius:6px;
  background:var(--accent);color:var(--on-accent);
}
.hero-status-text{margin-top:2px;font-size:.68rem;font-weight:600;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-primary-stack{display:flex;flex-direction:column;align-items:flex-end;gap:0;line-height:1.1}
.hero-primary-stack span{font-size:.54rem;font-weight:800;letter-spacing:.14em;color:var(--tx-3);text-transform:uppercase}
.hero-primary-stack strong{
  font-family:var(--font-num);font-size:1.5rem;font-weight:700;color:var(--tx-1);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.hero-primary-stack small{font-size:.62rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.hero-primary-stack .hero-stack-tend{font-size:.54rem;font-weight:700;color:var(--tx-3);white-space:nowrap;margin-top:1px}

.hero-card-main{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:stretch;
  margin:0 12px;padding:11px 13px;
  border-radius:12px;background:rgba(0,0,0,.24);border:1px solid var(--line-1);
}
.hero-hole-zone{display:flex;flex-direction:column;gap:7px;justify-content:center}
.hero-section-label{display:flex;align-items:baseline;gap:8px}
.hero-section-label span{font-size:.56rem;font-weight:800;letter-spacing:.16em;color:var(--tx-3);text-transform:uppercase}
.hero-section-label small{font-family:var(--font-display);font-size:.5rem;letter-spacing:.2em;color:var(--tx-3);opacity:.7}
.hero-hand{display:flex;gap:7px}
/* readout: two stacked rows — a pill strip (状态 / 位置·顺序 / 实时胜率) sized
   for the longest case (正在行动 · BTN · #10 · 100.0%), then the 最大牌型 row
   with the description on the left and the mini cards on the right */
.hero-readout{
  display:flex;flex-direction:column;justify-content:center;gap:9px;min-width:0;
}
.hero-ledger{
  display:flex;align-items:stretch;gap:7px;min-width:0;flex-wrap:nowrap;
}
.hero-ledger-cell{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;
  flex:1 1 auto;min-width:0; /* 内容基准等分余量：最长信息（正在行动/BTN · #10/100.0%）不再被省略 */
  padding:5px 9px;border:1px solid var(--line-1);border-radius:99px;
  background:rgba(255,255,255,.04);
}
.hero-ledger-cell:first-child{padding-left:9px;border-left:1px solid var(--line-1)}
.hero-ledger-label{
  flex:none;font-size:.48rem;font-weight:800;letter-spacing:.09em;color:var(--tx-3);
  text-transform:uppercase;white-space:nowrap;
}
.hero-ledger-value{
  display:flex;align-items:center;gap:4px;min-width:0;
  font-size:.72rem;font-weight:800;color:var(--tx-1);white-space:nowrap;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;
}
/* status carries a live dot; 正在行动时整个状态胶囊呼吸发光 */
.hero-state-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.hero-state-chip.active{color:var(--gold);text-shadow:0 0 16px rgba(237,174,73,.5);animation:ledgerPulse 1.6s ease-in-out infinite}
.hero-state-chip.waiting{color:var(--tx-3)}
.hero-state-chip.folded{color:var(--red)}
.hero-state-chip.allin{color:var(--gold)}
.hero-state-chip.busted{color:var(--tx-3)}
@keyframes ledgerPulse{50%{text-shadow:0 0 24px rgba(237,174,73,.9)}}
.hero-ledger-cell:has(.hero-state-chip.active){
  border-color:color-mix(in srgb,var(--gold) 55%,transparent);
  background:var(--gold-soft);
  animation:ledgerCellPulse 1.6s ease-in-out infinite;
}
@keyframes ledgerCellPulse{
  0%,100%{box-shadow:0 0 12px rgba(237,174,73,.14),inset 0 0 8px rgba(237,174,73,.05)}
  50%{box-shadow:0 0 24px rgba(237,174,73,.34),inset 0 0 14px rgba(237,174,73,.12)}
}
#heroEquity{color:var(--blue)}
.hero-best-hand{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;min-width:0;
}
.hero-best-hand-copy{display:flex;flex-direction:column;gap:1px;flex:none;align-items:flex-start;min-width:0}
.hero-best-hand-copy span{font-size:.52rem;font-weight:800;letter-spacing:.14em;color:var(--tx-3);text-transform:uppercase;white-space:nowrap}
.hero-best-hand-copy strong{font-size:.8rem;font-weight:800;color:var(--gold);white-space:nowrap}
.hero-best-hand-cards{display:flex;gap:4px;justify-content:flex-end}
/* badges row (D/SB/#1/行动) duplicates the state + position chips above — hidden on every client */
.hero-badges{display:none}
.position-note{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;
  font-size:.58rem;font-weight:700;color:var(--tx-2);background:rgba(255,255,255,.05);
}
.hero-relation-note{color:var(--accent);background:var(--accent-soft)}

/* bet column is wider than the rest; the +N increment floats in its corner
   (out of flow) so the value never shifts or resizes the cell */
.hero-stat-grid{
  display:grid;grid-template-columns:1.28fr 1fr 1fr 1fr;
  border-top:1px solid var(--line-1);margin-top:auto;
}
.hero-stat{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 8px 10px;border-left:1px solid var(--line-1);
}
.hero-stat:first-child{border-left:0}
.hero-stat>span{font-size:.54rem;font-weight:800;letter-spacing:.12em;color:var(--tx-3);text-transform:uppercase;white-space:nowrap}
.hero-stat strong{font-family:var(--font-num);font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums}
.hero-stat.bet{position:relative}
.hero-stat.bet strong{color:var(--gold)}
.hero-stat.call strong{color:var(--red)}
.hero-stat.odds strong{color:var(--blue)}
.hero-bet-display{display:flex;align-items:baseline;gap:4px}
.hero-bet-display em{
  position:absolute;top:3px;right:7px;
  font-family:var(--font-num);font-style:normal;font-size:.6rem;font-weight:700;color:var(--green);
}
.hero-bet-display em:empty{display:none}

/* ---------- expression picker -------------------------------------------- */
.expression-picker{
  display:flex;flex-direction:column;gap:8px;
  border-radius:var(--r-md);border:1px solid var(--line-1);
  background:rgba(16,20,27,calc(.86 * var(--scrim-scale)));
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  box-shadow:var(--shadow-1);padding:12px 13px;
}
.expression-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.expression-title-block{display:flex;flex-direction:column;gap:1px}
.expression-title{font-size:.68rem;font-weight:800;letter-spacing:.08em;color:var(--tx-1)}
.expression-title-block small{font-size:.58rem;color:var(--tx-3)}
.expression-lock-pill{
  flex:none;font-size:.54rem;font-weight:800;letter-spacing:.06em;
  padding:3px 8px;border-radius:99px;
  background:rgba(255,255,255,.05);color:var(--tx-3);border:1px solid var(--line-1);
}
.expression-current{
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:11px;
  background:rgba(0,0,0,.24);border:1px solid var(--line-1);
}
.expression-current-face{font-size:1.3rem;line-height:1}
.expression-current-copy{display:flex;flex-direction:column;min-width:0}
.expression-current-copy strong{font-size:.74rem;font-weight:800}
.expression-current-copy small{font-size:.56rem;color:var(--tx-3)}
.expression-current-state{margin-left:auto;font-size:.54rem;font-weight:800;color:var(--tx-3);letter-spacing:.08em}
.expression-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;flex:1;grid-auto-rows:1fr}
.expression-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;height:100%;padding:7px 4px 6px;border-radius:11px;
  border:1px solid var(--line-1);background:rgba(255,255,255,.025);
  transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast),opacity var(--t-fast);
}
.expression-btn:hover:not(:disabled){border-color:var(--line-3);transform:translateY(-1px)}
.expression-btn .face{font-size:1.15rem;line-height:1}
.expression-copy{display:flex;flex-direction:column;align-items:center}
.expression-copy small{font-size:.62rem;font-weight:800;color:var(--tx-1)}
.expression-copy em{font-style:normal;font-size:.5rem;color:var(--tx-3)}
.expression-btn.selected{
  border-color:var(--accent-line);background:var(--accent-soft);
  box-shadow:0 0 16px var(--accent-glow);
}
.expression-btn.locked:not(.selected){opacity:.55}
.expression-hint{font-size:.56rem;line-height:1.5;color:var(--tx-3)}

/* ---------- action console ------------------------------------------------ */
.controls{
  width:min(calc(790px * var(--ui-widen)),100%);margin:0 auto;min-width:0;
  display:grid;align-items:center;gap:11px;
  grid-template-columns:calc(112px * var(--ui-widen)) calc(128px * var(--ui-widen)) minmax(140px,1fr) calc(174px * var(--ui-widen));
  grid-template-areas:"fold call raisebox raise";
  padding:11px 13px;
  border-radius:var(--r-md);border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(24,30,40,calc(.94 * var(--scrim-scale))),rgba(12,15,21,calc(.96 * var(--scrim-scale))));
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.05);
}
/* reveal return: slider hidden, raise + return share the row (original behavior) */
.controls.reveal-return-active{
  grid-template-columns:calc(112px * var(--ui-widen)) calc(128px * var(--ui-widen)) minmax(0,174px) minmax(0,150px);
  grid-template-areas:"fold call raise reveal";
  justify-content:center;
}
.controls.reveal-return-active .raise-box{display:none}
#foldBtn{grid-area:fold}
#callBtn{grid-area:call}
.raise-box{grid-area:raisebox}
.raise-action-btn{grid-area:raise}
/* 字号放大时按钮内容允许两行堆叠、纵向长高，不再横向顶出下注区边框（列宽是固定 px 轨道） */
.raise-action-btn{flex-wrap:wrap;row-gap:1px;white-space:normal;line-height:1.15;padding-top:5px;padding-bottom:5px;text-align:center}
.raise-action-btn .raise-btn-label,.raise-action-btn .raise-btn-value{white-space:nowrap}
.reveal-return-action{grid-area:reveal}

.action-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:0;min-height:50px;padding:0 12px;
  border-radius:13px;font-size:.9rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  border:1px solid var(--line-2);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast),filter var(--t-fast),opacity var(--t-fast);
  user-select:none;
}
.action-btn:hover:not(:disabled){transform:translateY(-2px)}
.action-btn:active:not(:disabled){transform:translateY(0)}
.action-btn:disabled{opacity:.38;filter:saturate(.4)}
.action-btn.danger{
  background:linear-gradient(180deg,rgba(224,88,99,.16),rgba(224,88,99,.07));
  border-color:rgba(224,88,99,.45);color:#f2838c;
}
.action-btn.danger:hover:not(:disabled){box-shadow:0 10px 26px rgba(224,88,99,.22);border-color:rgba(224,88,99,.7)}
.action-btn.primary{
  background:linear-gradient(180deg,#35c184,var(--green-deep));
  border-color:color-mix(in srgb,var(--green) 65%,#fff 15%);color:#06281a;
  box-shadow:0 10px 26px rgba(47,181,121,.28),inset 0 1px 0 rgba(255,255,255,.3);
}
.action-btn.primary:hover:not(:disabled){filter:brightness(1.07)}
.action-btn.gold{
  background:linear-gradient(180deg,#f4be60,var(--gold-deep));
  border-color:color-mix(in srgb,var(--gold) 65%,#fff 18%);color:#2a1a04;
  box-shadow:0 10px 26px rgba(237,174,73,.3),inset 0 1px 0 rgba(255,255,255,.35);
}
.action-btn.gold:hover:not(:disabled){filter:brightness(1.06)}
.raise-btn-label{font-weight:800;white-space:nowrap}
.raise-btn-value{font-family:var(--font-num);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.raise-btn-value:empty{display:none}
.raise-btn-value:not(:empty)::before{content:"·";margin:0 5px;font-weight:400;opacity:.6}
.reveal-return-action{
  background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);
}

/* raise control cluster */
.raise-box{
  display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:center;gap:12px;
  min-height:50px;padding:0 8px 0 14px;border-radius:13px;
  border:1px solid var(--line-1);background:rgba(0,0,0,.28);
}
#raiseRange{
  -webkit-appearance:none;appearance:none;width:100%;height:32px;margin:0;
  background:transparent;cursor:pointer;--raise-progress:0%;
  touch-action:none;position:relative;z-index:2;
}
#raiseRange::-webkit-slider-runnable-track{
  height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold) 0 var(--raise-progress),rgba(255,255,255,.12) var(--raise-progress) 100%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
#raiseRange::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;margin-top:-7px;
  background:linear-gradient(180deg,#fff,#d8dde4);
  border:3px solid var(--gold);
  box-shadow:0 3px 10px rgba(0,0,0,.55),0 0 14px rgba(237,174,73,.35);
  transition:transform var(--t-fast);
}
#raiseRange::-webkit-slider-thumb:hover{transform:scale(1.1)}
#raiseRange::-moz-range-track{height:6px;border-radius:99px;background:rgba(255,255,255,.12)}
#raiseRange::-moz-range-progress{height:6px;border-radius:99px;background:var(--gold)}
#raiseRange::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--gold)}
#raiseRange:disabled{opacity:.35;cursor:not-allowed}
.raise-input-shell{position:relative;display:flex;align-items:center}
.raise-input{
  width:100%;height:42px;padding:4px 22px 4px 10px;text-align:left;
  font-family:var(--font-num);font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;
  border-radius:11px;border:1px solid var(--line-2);background:rgba(0,0,0,.34);
}
.raise-input:focus-visible{border-color:var(--gold);box-shadow:0 0 0 3px rgba(237,174,73,.18)}
.raise-input.raise-invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(224,88,99,.2);animation:invalidShake .34s var(--ease-out)}
@keyframes invalidShake{25%{transform:translateX(-4px)}55%{transform:translateX(3px)}80%{transform:translateX(-2px)}}
.raise-stepper{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:2px;
}
.raise-step-btn{
  position:relative;width:16px;height:12px;border-radius:3px;
  background:transparent;transition:background var(--t-fast);
}
.raise-step-btn:hover:not(:disabled){background:rgba(255,255,255,.12)}
.raise-step-btn::before{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  border-left:1.6px solid var(--tx-2);border-top:1.6px solid var(--tx-2);
}
.raise-step-btn.up::before{transform:translate(-50%,-30%) rotate(45deg)}
.raise-step-btn.down::before{transform:translate(-50%,-70%) rotate(225deg)}
.raise-step-btn:disabled{opacity:.3}