/* ============================================================
   board.css — v2 棚格 / 顶栏(风向·bug 表)/ 牌桌(项目面板|排期区|事件流)
   / 工期点 ●●● / 攒工期 / 牌型徽章 / 行动条 / 发布条
   深蓝毛玻璃赌桌:是牌桌,不是后台。(v1 资产 + v2 增量)
   ============================================================ */

#game-screen{
  flex-direction:column;
  height:100vh;height:100dvh;min-height:640px;
}

/* ============================================================
   #topbar —— 细冷职场条(等宽数字)
   ============================================================ */
#topbar{
  flex:none;display:flex;align-items:center;gap:14px;
  height:48px;padding:0 16px;
  background:linear-gradient(180deg,#151d2e,#101726);
  border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--dim);letter-spacing:.03em;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  white-space:nowrap;overflow:hidden;
}
#topbar > span{white-space:nowrap}
#q-label{color:var(--text);font-weight:700;letter-spacing:.06em}
#q-target{color:var(--gold)}
#q-progress{color:var(--text)}
#cash{color:var(--gold)}
#rep{color:var(--text)}
#points{color:var(--dim)}
#topbar > :is(#q-target,#q-progress,#cash,#rep,#points){
  font-family:var(--mono),monospace;
  font-variant-numeric:tabular-nums;font-size:12.5px;
}
#career-label{
  margin-left:auto;
  font-size:11px;letter-spacing:.18em;
  color:var(--dim);
  border:1px solid var(--line);border-radius:20px;
  padding:2px 12px;
}

/* ---------- 风向槽(基础公开 / 进阶隐藏 ???) ---------- */
#trend-slot{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;
  color:var(--text);
  border:1px dashed rgba(240,201,106,.45);border-radius:8px;
  padding:3px 10px;
  background:linear-gradient(180deg,rgba(240,201,106,.06),transparent);
  cursor:help;
}
#trend-slot .t-basic{font-weight:700;letter-spacing:.05em}
#trend-slot .t-adv{
  font-family:var(--mono),monospace;font-size:11px;color:var(--dim);
  border-left:1px solid var(--line);padding-left:8px;
}
#trend-slot .t-adv.known{color:var(--gold);text-shadow:0 0 10px rgba(240,201,106,.4)}

/* ---------- bug 表(冒烟变色:mild → light → heavy) ---------- */
#bug-meter{
  display:inline-flex;align-items:center;gap:2px;
  min-width:64px;justify-content:center;
  font-size:13px;
  border:1px solid var(--line);border-radius:8px;
  padding:3px 8px;
  color:var(--dim);
  cursor:help;
}
#bug-meter.mild{color:var(--text);border-color:#4a4436}
#bug-meter.light{color:#d8a04a;border-color:#8a6a22;background:rgba(216,160,74,.08);animation:bug-pulse 1.6s ease-in-out infinite}
#bug-meter.heavy{color:var(--red);border-color:var(--red);background:rgba(229,96,92,.1);animation:bug-pulse .8s ease-in-out infinite}
@keyframes bug-pulse{
  0%,100%{box-shadow:0 0 0 rgba(229,96,92,0)}
  50%{box-shadow:0 0 12px rgba(229,96,92,.45)}
}
#bug-meter b{font-family:var(--mono),monospace;font-size:11px}

/* ---------- 舆论横条:0-100,30/60/85 刻度,越阈 .warn 抖动红闪(v1) ---------- */
#heat-wrap{
  position:relative;flex:none;
  width:clamp(108px,13vw,180px);height:14px;
  border:1px solid var(--line);border-radius:8px;
  background:#0a101c;
}
#heat-wrap::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(90deg,transparent 0 calc(30% - 1px),rgba(201,212,232,.55) calc(30% - 1px) calc(30% + 1px),transparent calc(30% + 1px) 100%),
    linear-gradient(90deg,transparent 0 calc(60% - 1px),rgba(201,212,232,.55) calc(60% - 1px) calc(60% + 1px),transparent calc(60% + 1px) 100%);
}
#heat-wrap::before{
  content:"";position:absolute;top:-3px;bottom:-3px;left:85%;width:2px;z-index:3;
  background:rgba(229,96,92,.85);border-radius:1px;
  box-shadow:0 0 6px rgba(229,96,92,.5);
}
#heat-bar{
  height:100%;width:0%;border-radius:7px;
  background:linear-gradient(90deg,var(--green) 0%,#d8c56a 45%,var(--red) 100%);
  transition:width .45s cubic-bezier(.3,.8,.3,1);
}
#heat-num{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);z-index:3;
  font-family:var(--mono),monospace;font-size:9.5px;font-weight:700;
  color:var(--text);text-shadow:0 1px 3px #000,0 0 4px #000;
}
#heat-wrap.warn{animation:heat-shake .45s linear infinite;border-color:var(--red)}
#heat-wrap.warn #heat-num{color:var(--red)}
#heat-wrap.warn #heat-bar{animation:heat-flash .45s ease-in-out infinite}
@keyframes heat-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-2px)}
  40%{transform:translateX(2px)}
  60%{transform:translateX(-1px)}
  80%{transform:translateX(1px)}
}
@keyframes heat-flash{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.9) saturate(1.5)}
}

/* ============================================================
   #board —— 毛玻璃深蓝牌桌(v2:项目面板 | 排期区+事件流)
   ============================================================ */
#board{
  position:relative;
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:clamp(212px,21vw,252px) 1fr;
  gap:12px;padding:12px;
  margin:10px 14px 6px;
  border:1px solid var(--line);border-radius:16px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(110,168,254,.06), transparent 60%),
    radial-gradient(80% 55% at 50% 115%, rgba(240,201,106,.05), transparent 58%),
    linear-gradient(160deg,rgba(23,32,50,.92),rgba(13,19,31,.95));
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 14px 40px rgba(0,0,0,.4);
}

/* ---------- #panel-board:8 槽货架(模块永久驻留) ---------- */
#panel-board{
  display:flex;flex-direction:column;min-height:0;
  padding:10px;
  background:rgba(9,14,23,.55);
  border:1px solid var(--line);border-radius:12px;
}
.pb-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  font-size:11px;letter-spacing:.3em;color:var(--dim);
  padding:2px 4px 8px;
}
#pb-count{font-family:var(--mono),monospace;color:var(--gold);letter-spacing:.05em}
#pb-slots{
  flex:1;min-height:0;overflow-y:auto;
  display:grid;grid-template-columns:1fr 1fr;
  grid-auto-rows:minmax(96px,1fr);
  gap:8px;align-content:start;
  padding-right:2px;
}

/* ---------- #mid-zone:排期区 | 事件流 ---------- */
#mid-zone{
  display:grid;grid-template-rows:minmax(0,1fr) auto;
  gap:12px;min-height:0;
}

#schedule-zone{
  display:flex;flex-direction:column;min-height:0;
  gap:8px;
  padding:12px 14px;
  border:1.5px dashed rgba(110,168,254,.4);border-radius:12px;
  background:rgba(10,16,27,.5);
  position:relative;
}
#schedule-zone::before{
  content:"排期 · 每版本 3 工期 + 结转";position:absolute;top:-1px;left:12px;transform:translateY(-50%);
  font-size:10px;letter-spacing:.3em;color:rgba(110,168,254,.6);
  background:var(--bg);padding:0 6px;
}

/* 工期点 ●●●(排期时消耗)+ 攒工期 + 牌型预告 */
.sz-top{
  flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:12.5px;
}
#work-dots{display:inline-flex;align-items:center;gap:3px}
#work-dots i{font-style:normal;font-size:16px;line-height:1;transition:transform .2s ease,opacity .2s ease}
#work-dots i.on{color:var(--gold);text-shadow:0 0 8px rgba(240,201,106,.5)}
#work-dots i.off{color:var(--line);transform:scale(.8);opacity:.6}
#banked-label{font-family:var(--mono),monospace;color:var(--gold);font-size:12px}
#pattern-hint{margin-left:auto;display:inline-flex;gap:6px}

/* 牌型徽章(达成时闪光) */
.pat-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:700;letter-spacing:.05em;
  color:var(--text);
  border:1px solid var(--line);border-radius:12px;
  padding:2px 10px;
  background:rgba(20,28,44,.8);
}
.pat-badge.deep{color:var(--green);border-color:rgba(111,208,140,.5)}
.pat-badge.stitch{color:#b48ce0;border-color:rgba(180,140,224,.5)}
.pat-badge.big{color:var(--gold);border-color:rgba(240,201,106,.6)}
.pat-badge.longrun{color:var(--blue);border-color:rgba(110,168,254,.5)}
.pat-badge.flash{animation:pat-flash .6s ease-out 3}
@keyframes pat-flash{
  0%{box-shadow:0 0 0 rgba(240,201,106,0);filter:brightness(1)}
  40%{box-shadow:0 0 18px rgba(240,201,106,.8);filter:brightness(1.7)}
  100%{box-shadow:0 0 0 rgba(240,201,106,0);filter:brightness(1)}
}

/* 商业化条(已挂卡一览) */
#joker-strip{
  flex:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  min-height:26px;
  font-size:12px;
}
.jchip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:14px;
  border:1px solid rgba(240,201,106,.5);
  background:linear-gradient(180deg,#181206,#0b0906);
  color:#e8ddc0;
}
.jchip b{font-family:var(--mono),monospace;color:var(--gold)}
.jchip i{font-style:normal;font-size:11px}
.jchip.new{animation:jc-chip-new .6s ease-out}
@keyframes jc-chip-new{
  0%{box-shadow:0 0 0 0 rgba(240,201,106,0);filter:brightness(1)}
  40%{box-shadow:0 0 20px 5px rgba(240,201,106,.6);filter:brightness(1.6)}
  100%{box-shadow:none;filter:brightness(1)}
}

/* 供给手牌(标成本) */
#hand-cards{
  flex:1;min-height:120px;
  display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;align-content:center;
  gap:10px;
  overflow-y:auto;
  padding:4px 2px;
}

/* 排期行动按钮 */
.sz-actions{
  flex:none;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
}

/* 已排期清单 */
#planned-list{
  flex:none;display:flex;flex-wrap:wrap;gap:6px;
  min-height:22px;
  font-size:12px;
}
#planned-list .pl{
  padding:2px 9px;border-radius:10px;
  border:1px solid var(--line);
  background:rgba(13,19,31,.85);
  color:var(--text);
  animation:feed-in .32s ease-out;
}
#planned-list .pl.new{border-color:rgba(111,208,140,.5)}
#planned-list .pl.reno{border-color:rgba(110,168,254,.5)}
#planned-list .pl.fix{border-color:rgba(229,96,92,.5)}
#planned-list .pl.bank{border-color:rgba(240,201,106,.5)}

/* ---------- #event-feed(v1) ---------- */
#event-feed{
  flex:none;
  display:flex;flex-direction:column;gap:6px;
  max-height:168px;min-height:44px;overflow:hidden;
  padding:4px 2px;
}
#event-feed > *{
  flex:none;
  padding:7px 10px;border-radius:7px;
  background:rgba(13,19,31,.85);
  border:1px solid rgba(38,50,74,.55);border-left:3px solid var(--dim);
  font-size:12.5px;line-height:1.55;color:var(--text);
  animation:feed-in .32s ease-out;
}
#event-feed > :nth-child(n+4){opacity:.55}
#event-feed .good,#event-feed .pos{border-left-color:var(--green)}
#event-feed .bad,#event-feed .crisis{border-left-color:var(--red)}
#event-feed .warn,#event-feed .gold{border-left-color:var(--gold)}
#event-feed .sys,#event-feed .info{border-left-color:var(--blue)}
@keyframes feed-in{
  from{opacity:0;transform:translateX(-14px)}
  to{opacity:1;transform:translateX(0)}
}

.empty-hint{
  align-self:center;margin:auto;
  padding:12px 18px;text-align:center;
  color:var(--dim);opacity:.75;
  font-size:13px;letter-spacing:.1em;line-height:1.8;
}

/* ============================================================
   #actions + #publish-bar
   ============================================================ */
#actions{
  flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  padding:8px 16px 4px;
}
#publish-bar{
  flex:none;display:flex;justify-content:center;
  padding:4px 16px 14px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(9,14,23,.65));
  position:relative;z-index:2;
}

/* ============================================================
   1024 兜底:不崩
   ============================================================ */
@media (max-width:1120px){
  #topbar{gap:8px;font-size:11px;padding:0 10px;height:44px}
  #topbar > :is(#q-target,#q-progress,#cash,#rep,#points){font-size:11px}
  #career-label{padding:2px 8px;letter-spacing:.08em}
  #trend-slot{padding:2px 8px;font-size:11px}
  #heat-wrap{width:clamp(96px,12vw,150px)}
  #board{margin:8px 10px 4px;padding:10px;gap:10px;grid-template-columns:clamp(196px,20vw,232px) 1fr}
  #pb-slots{grid-auto-rows:minmax(88px,1fr)}
  #hand-cards .ccard{--cw:96px;--ch:132px}
  .sz-actions .act-btn{padding:0 12px}
}
@media (max-height:780px){
  #hand-cards{min-height:100px}
  #event-feed{max-height:120px}
  #publish-bar{padding-bottom:10px}
}