/* =============================================================================
 * 拍拍蓄 · 漫画风 UI
 * 设计语言：奶油纸面板 + 3px 纯黑描边 + 硬投影（无模糊）+ 网点底纹 + 粗斜体标题
 * 注意：布局机制（grid 区域、--card-h、minmax(auto,1fr)、overflow-y:auto）不能动，
 *       tests/layout.check.js 会断言「牌不压 HUD、按钮不出视口」。
 * ========================================================================== */
:root{
  --ink:#0d0d10;
  --paper:#fbf8ef;
  --paper2:#f0ebdc;
  --page:#131317;
  --dim:#6b6459;
  --energy:#e8a11c;
  --attack:#e0343f;
  --defense:#1f7fc4;
  --reflect:#7b46c9;
  --special:#12855c;
  --hp:#e0343f;
  --radius:3px;
  --bw:3px;                 /* 描边粗细 */
  --pop:5px;                /* 硬投影偏移 */
  /* 手牌：整体上调一档，保证招式图标和描述仍然可读。 */
  --card-h:clamp(132px, 34vh, 268px);
  --felt-card:clamp(104px, 18.5vh, 162px);
  --focus:#ffe27a;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:#06070a;
  color:var(--paper);
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,-apple-system,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}


/* 漫画字体：粗、斜、带描边 */
.manga{
  font-family:Impact,"Arial Black","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:900;font-style:italic;letter-spacing:.04em;
}

#fx{position:fixed;inset:0;z-index:50;pointer-events:none;}

#app{
  position:relative;z-index:10;
  display:grid;
  height:100vh;height:100dvh;
  grid-template-columns:minmax(0,1fr);
  /* 牌桌行用 minmax(auto,1fr)：矮窗口下宁可整页滚动，也不把牌压扁去压 HUD */
  grid-template-rows:auto minmax(auto,1fr) auto;
  grid-template-areas:
    "bar"
    "table"
    "panel";
  gap:12px;padding:12px;
  overflow-y:auto;overflow-x:hidden;
  will-change:transform;
}

/* 通用漫画面板 */
.panelSkin{
  position:relative;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--pop) var(--pop) 0 var(--ink);
  color:var(--ink);
}

/* ---------------------------------------------------------------- HUD */
.hud{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  position:relative;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--pop) var(--pop) 0 var(--ink);
  padding:8px 16px;
  color:var(--ink);
}
/* 面板角落的网点，做出印刷质感 */
.hud::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:2px;
  background-image:radial-gradient(circle, rgba(13,13,16,.10) 1px, transparent 1.2px);
  background-size:5px 5px;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,transparent 45%);
  mask-image:linear-gradient(100deg,#000 0%,transparent 45%);
}
#hud-opp{grid-area:opp;}
#hud-you{grid-area:you;}
.pname{
  font-family:Impact,"Arial Black","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:900;font-style:italic;font-size:19px;letter-spacing:.1em;
  flex:0 0 auto;
  -webkit-text-stroke:1px var(--ink);
}
.badges{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto;}
.badge{
  font-size:11px;font-weight:800;padding:2px 8px;
  border:2px solid var(--ink);border-radius:99px;background:var(--paper2);color:var(--ink);
  transform:rotate(-2deg);
}
.badge.token{background:#ffd9dd;color:#8c1019;}
.badge.inv{background:#c9f2df;color:#0a5c3f;}

.hp{display:flex;align-items:center;gap:7px;flex:0 0 auto;}
.pip{
  width:15px;height:15px;transform:rotate(45deg);
  border:2px solid var(--ink);
  background:linear-gradient(135deg,#ff5a66,#c1101c);
  box-shadow:1.5px 1.5px 0 var(--ink);
}
.pip.dead{
  background:
    repeating-linear-gradient(45deg,#cfc9ba 0 3px,#eae5d8 3px 6px);
  border-color:#9a9488;box-shadow:none;opacity:.85;
}
.pip.hit{animation:pipHit .5s ease-out;}
@keyframes pipHit{
  0%{transform:rotate(45deg) scale(2.3);background:#fff;}
  60%{transform:rotate(45deg) scale(.85);}
  100%{transform:rotate(45deg) scale(1);}
}

.en{display:flex;align-items:center;gap:10px;flex:1 1 200px;min-width:0;}
.enBar{
  flex:1;height:12px;border-radius:2px;overflow:hidden;
  background:repeating-linear-gradient(90deg,#ded8c8 0 5px,#eae4d4 5px 10px);
  border:2.5px solid var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.enBar i{
  display:block;height:100%;width:0%;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 4px,transparent 4px 8px),
    linear-gradient(180deg,#ffd35c,#e0921a);
  border-right:2px solid var(--ink);
  transition:width .3s cubic-bezier(.2,.9,.2,1);
}
.enNum{display:flex;align-items:baseline;gap:4px;min-width:64px;justify-content:flex-end;}
.enNum b{
  font-family:Impact,"Arial Black",sans-serif;font-style:italic;
  font-size:24px;color:var(--energy);font-variant-numeric:tabular-nums;
  -webkit-text-stroke:1.6px var(--ink);line-height:1;
}
.enNum span{font-size:10px;font-weight:800;color:var(--dim);}
.enNum.bump b{animation:bump .38s cubic-bezier(.3,1.7,.4,1);}
@keyframes bump{0%{transform:scale(1.7) rotate(-8deg);}100%{transform:scale(1);}}

/* ------------------------------------------------------- 回合条 / 牌桌 */
#roundBar{
  grid-area:bar;
  display:flex;align-items:center;justify-content:center;gap:10px 16px;flex-wrap:wrap;
  min-height:34px;padding:5px 14px;
  border:2px solid rgba(251,248,239,.17);border-radius:999px;
  background:linear-gradient(90deg,rgba(251,248,239,.03),rgba(251,248,239,.10),rgba(251,248,239,.03));
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;
  color:var(--paper);letter-spacing:.14em;font-size:13px;
}
#roundBar #roundTag{
  padding:2px 10px 1px;border-radius:999px;
  background:var(--paper);color:var(--ink);font-size:15px;
  box-shadow:2px 2px 0 rgba(0,0,0,.55);
}
#roundBar #hintMini{opacity:.72;font-size:11px;letter-spacing:.2em;}
#roundBar #targetHint{
  color:#ffe27a;font-size:13px;letter-spacing:.1em;
  animation:targetPulse 1s ease-in-out infinite;
}
#roundBar #targetHint:empty{display:none;}
@keyframes targetPulse{0%,100%{opacity:.55;}50%{opacity:1;}}

/* 牌桌：玩家沿椭圆就座，打出的牌飞到桌面中央各自的位置。
   座位/牌位的 left/top（百分比）由 main.js 按人数算好写进 style。 */
#table{
  grid-area:table;
  position:relative;
  min-height:0;
}
/* 台面：中间的椭圆 */
#table::before{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(62%,620px);height:min(62%,400px);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.085), rgba(255,255,255,.02) 60%, transparent 72%),
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(251,248,239,.05) 0deg 1.2deg, transparent 1.2deg 8deg);
  border:2px dashed rgba(251,248,239,.15);
  box-shadow:inset 0 0 100px rgba(0,0,0,.5), 0 0 0 18px rgba(251,248,239,.018);
  pointer-events:none;
}
#tableCore{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;
}
#tableWord{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;font-size:clamp(24px,4.2vh,48px);
  letter-spacing:.08em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(251,248,239,.12);
}
#seats{position:absolute;inset:0;}

/* 一个座位：紧凑的一块信息条（名字 / 血 / 能量） */
.seat{
  position:absolute;
  transform:translate(-50%,-50%);
  width:clamp(112px,14.5%,178px);
  padding:6px 9px 7px;
  border-radius:var(--radius);
  border:var(--bw) solid var(--ink);
  background:linear-gradient(135deg,#fffdf7 0%,var(--paper) 70%,#ede6d5 100%);
  box-shadow:var(--pop) var(--pop) 0 var(--ink);
  color:var(--ink);
  transition:transform .18s,box-shadow .18s,border-color .18s,filter .3s,opacity .3s;
}
.seat.me{
  border-color:#e8a11c;
  box-shadow:0 0 0 3px rgba(232,161,28,.55), var(--pop) var(--pop) 0 var(--ink);
}
.seat.hurt{background:linear-gradient(135deg,#fff8f4 0%,#ffe0df 100%);}
/* 别人的座位：**横排** —— 左头像 / 中名字+血点 / 右能量。
   以前三样挤在一个小方框里，又小又看不清。 */
.seat .hud{
  display:grid;
  grid-template-columns:auto auto 1fr;
  grid-template-areas:
    "face name   name"
    "face hp     hpNum"
    "face en     en"
    "face badges badges";
  gap:4px 9px;
  align-items:center;
  padding:0;background:none;border:0;box-shadow:none;
}
.seat .face{grid-area:face;width:38px;height:38px;flex:0 0 auto;}
.seat .face svg{width:100%;height:100%;display:block;}
.seat .pname{
  grid-area:name;font-size:13.5px;line-height:1.15;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.seat .hp{grid-area:hp;display:flex;gap:5px;}
.seat .hpNum{
  grid-area:hpNum;justify-self:start;
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;font-size:12px;color:var(--ink);white-space:nowrap;
}
.seat.dead .hpNum{color:#9a9488;}
.seat .badges{grid-area:badges;min-height:0;}
.seat .en{grid-area:en;flex:0 0 auto;gap:6px;}
.seat .enNum{min-width:0;justify-content:flex-end;}
.seat .enNum span{display:none;}
.seat .enBar{flex:0 0 auto;width:52px;height:9px;}

/* ---- 自己的信息条：单独放在牌栏上方，比别人的大一号 ---- */
#meBar{
  display:none;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"face mid en";
  gap:14px;align-items:center;
  margin-bottom:10px;padding:8px 14px;
  position:relative;overflow:hidden;
  background:none;
  border:2px solid rgba(232,161,28,.6);border-radius:var(--radius);
  box-shadow:none;
  color:var(--paper);
}
#meBar::before{
  content:"";position:absolute;inset:0 auto 0 0;width:8px;
  background:var(--energy);border-right:2px solid var(--ink);
}
/* 竖排：头像 → 名字 → 血量 → 能量。窄了，手牌区就能宽一点 */
#meBar.on{
  display:flex;flex-direction:column;align-items:stretch;
  flex:0 0 auto;width:min(212px,23vw);
  gap:7px;padding:10px 12px 11px;
}
#meBar .meMid{flex-direction:column;align-items:flex-start;gap:7px;}
/* 牌栏：左边是自己的信息条，右边是手牌 */
#panel{display:flex;align-items:stretch;gap:12px;}
#deckCol{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;}
#meBar .face{grid-area:face;width:54px;height:54px;flex:0 0 auto;}
#meBar .face svg{width:100%;height:100%;display:block;}
#meBar .meMid{grid-area:mid;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#meBar .pname{font-size:18px;letter-spacing:.06em;}
#meBar .hp{display:flex;gap:8px;}
#meBar .hp .pip{width:21px;height:21px;border-width:2.5px;}
#meBar .hpNum{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;font-size:19px;color:var(--ink);
}
/* 能量行：数字 + 单位 + 进度条，横着排 */
#meBar .en{grid-area:en;flex:0 0 auto;flex-direction:row;align-items:center;gap:9px;width:100%;}
#meBar .enBar{flex:1 1 auto;width:auto;min-width:60px;height:12px;border-radius:4px;}
#meBar .enNum{display:flex;align-items:baseline;gap:4px;flex:0 0 auto;}
#meBar .enBar{height:13px;border-radius:3px;width:190px;flex:0 0 auto;}
/* 能量数字：原来用 Impact 斜体，小字号压深色底上很难认，换粗黑体 + 发光 */
#meBar .enNum b{
  font-family:"Arial Black","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:900;font-style:normal;font-size:21px;color:#bfeaff;
  text-shadow:0 0 9px rgba(120,200,255,.7);
}
#meBar .enNum span{font-size:10px;}
#meBar .badges{display:flex;gap:6px;flex-wrap:wrap;}
#meBar.dead{filter:grayscale(1);opacity:.55;}
/* 没有白底了，文字改浅色才看得见 */
#meBar .pname{color:#ece7db;}
#meBar .hpNum{color:#ece7db;}
#meBar .enNum b{color:#8fdcff;}
#meBar .enNum span{color:#9aa3b2;}
#meBar .badges .badge{color:var(--ink);}

/* ---- 双人局：牌栏上方是自己的信息条，桌上只剩对手 ---- */
#table.duel::before{width:min(88%,1000px);height:min(80%,540px);}
#table.duel .seat{width:clamp(210px,27%,320px);}
#table.duel .seat .face{width:48px;height:48px;}
#table.duel .seat .pname{font-size:15px;}
#table.duel .seat .hp .pip{width:17px;height:17px;}
#table.duel .feltCard{--felt-card:clamp(172px,32vh,296px);}
#table.duel .seat .hpNum{font-size:17px;}
/* 出局 */
.seat.dead{opacity:.4;filter:grayscale(1);}
.seat.dead::after{
  content:"出局";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-10deg);
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;font-size:15px;letter-spacing:.08em;
  color:var(--paper);background:var(--attack);
  border:2px solid var(--ink);padding:1px 8px 0;
  box-shadow:2px 2px 0 var(--ink);
}

/* 选目标模式 */
#table.picking .seat.targetable{cursor:crosshair;}
#table.picking .seat.targetable:hover{
  border-color:#ffe27a;
  box-shadow:0 0 0 4px rgba(255,226,122,.65), var(--pop) var(--pop) 0 var(--ink);
  transform:translate(-50%,-50%) scale(1.08);
}
.seat.targetable::before{
  content:"";position:absolute;inset:-7px;border-radius:calc(var(--radius) + 4px);
  border:2.5px dashed #ffe27a;pointer-events:none;
  animation:targetPulse 1s ease-in-out infinite;
}
.seat.hurt{border-color:#e0343f;}

/* 桌面上的出牌位 */
#felt{position:absolute;inset:0;pointer-events:none;}

/* 亮牌之后给每个「有目标」的人拉一条线到目标座位 ——
   谁打谁必须一眼看出来，光靠弹道那一下太快了看不清 */
/* 亮牌之后给每个「有目标」的人画一条弧线到目标座位。
   直线交叉起来一团乱，改成贝塞尔弧线 + 圆头箭头。 */
#tethers{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:7;overflow:visible;
}
#tethers path{stroke-linecap:round;stroke-linejoin:round;}
/* 流光：短亮段沿路径跑。位移等于 dasharray 的周期，循环看不出接缝 */
#tethers path.tflow{animation:tflow .62s linear infinite;}
@keyframes tflow{to{stroke-dashoffset:-150;}}

/* 选目标时从你的出牌位拉向鼠标下座位的指示线 */
#aimLine{
  position:absolute;display:none;height:0;
  transform-origin:0 50%;
  pointer-events:none;z-index:8;
  border-top:5px solid rgba(255,226,122,.55);
  filter:drop-shadow(0 0 10px rgba(255,226,122,1)) drop-shadow(0 0 24px rgba(255,176,0,.75));
}
/* 走马灯虚线：线会「跑」，一眼就知道箭头朝哪边 */
#aimLine::before{
  content:"";position:absolute;left:0;right:0;top:-5px;height:10px;
  background:repeating-linear-gradient(90deg,#ffe27a 0 16px,transparent 16px 30px);
  animation:aimMarch .45s linear infinite;
}
@keyframes aimMarch{to{background-position:30px 0;}}
#aimLine::after{
  content:"";position:absolute;right:-4px;top:-14px;
  border-left:26px solid #ffe27a;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  filter:drop-shadow(0 0 8px #ffe27a);
}
/* 被瞄准的座位：十字准星 + 放大 */
.seat.aimed{
  border-color:#ffe27a;
  box-shadow:0 0 0 5px rgba(255,226,122,.75), var(--pop) var(--pop) 0 var(--ink);
  transform:translate(-50%,-50%) scale(1.1);
  z-index:12;
}
.seat.aimed::after{
  content:"";position:absolute;left:50%;top:50%;
  width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  border:3px solid #ffe27a;
  box-shadow:0 0 0 3px rgba(20,20,20,.55), inset 0 0 0 3px rgba(20,20,20,.55);
  animation:reticle .8s ease-out infinite;
  pointer-events:none;
}
@keyframes reticle{
  0%{transform:scale(.7);opacity:1;}
  100%{transform:scale(1.35);opacity:0;}
}
.feltCard{
  position:absolute;
  transform:translate(-50%,-50%);
  width:calc(var(--felt-card) * .7174);
  height:var(--felt-card);
  /* 牌面里的字号全是按 --card-h 算的，这里改写成桌面牌的尺寸，
     否则 96px 的小牌会套用 268px 的字号，字会直接爆出牌外 */
  --card-h:var(--felt-card);
  transition:transform .40s cubic-bezier(.22,1.35,.36,1), opacity .22s, filter .25s;
  will-change:transform;
}
.feltCard .card{box-shadow:3px 3px 0 var(--ink);}
/* 出招的那一张亮起来，别的压暗 —— 指向更清楚 */
#felt.active .feltCard:not(.lead){filter:brightness(.6) saturate(.65);}
.feltCard.lead .card{box-shadow:0 0 0 3px #ffe27a, 4px 4px 0 var(--ink);}
.feltCard.hitFlash .card{animation:cardHit .34s ease-out;}
@keyframes cardHit{
  0%{transform:translateX(0) scale(1);}
  35%{transform:translateX(-5px) scale(1.07);}
  70%{transform:translateX(4px) scale(1.02);}
  100%{transform:translateX(0) scale(1);}
}
.feltCard.turning .card{animation:cardTurn .44s cubic-bezier(.3,1.4,.4,1);}
@keyframes cardTurn{
  0%{transform:rotateY(88deg) scale(.84);}
  60%{transform:rotateY(-12deg) scale(1.05);}
  100%{transform:rotateY(0) scale(1);}
}

.slotLabel{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;font-size:12px;letter-spacing:.3em;
  color:var(--paper);background:var(--ink);padding:2px 10px 1px;
  transform:rotate(-1.5deg);
}
.cardSlot{
  width:calc(var(--card-h) * 0.7174);
  height:var(--card-h);
  position:relative;
  perspective:800px;
}

/* 牌 = 一格格漫画分镜 */
.card{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  background:var(--paper);
  box-shadow:var(--pop) var(--pop) 0 var(--ink);
  color:var(--ink);
  transform-style:preserve-3d;
  transition:transform .26s cubic-bezier(.3,1.4,.4,1),box-shadow .2s;
  overflow:hidden;
}
.card.back{
  background:
    repeating-linear-gradient(45deg,#20202a 0 7px,#15151c 7px 14px);
  box-shadow:var(--pop) var(--pop) 0 #000;
}
.card.back::after{
  content:"";position:absolute;width:38%;aspect-ratio:1;transform:rotate(45deg);
  border:3px solid rgba(255,255,255,.22);
}
.card.flip{animation:flipIn .34s cubic-bezier(.3,1.5,.4,1);}
@keyframes flipIn{
  0%{transform:rotateY(90deg) scale(.8);}
  70%{transform:rotateY(-8deg) scale(1.06);}
  100%{transform:rotateY(0) scale(1);}
}
/* 出招瞬间的「集中线」背景 */
.card::before{
  content:"";position:absolute;inset:-30%;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(13,13,16,.16) 0deg 2deg, transparent 2deg 11deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 24%, #000 78%);
  mask-image:radial-gradient(circle at 50% 50%, transparent 24%, #000 78%);
}
.card .glyph svg{width:100%;height:100%;display:block;}
.glyph{
  position:relative;font-size:calc(var(--card-h) * 0.26);line-height:1;
  -webkit-text-stroke:1.5px var(--ink);z-index:1;
}
.card .cname{
  position:relative;z-index:1;
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;
  font-size:clamp(13px, calc(var(--card-h) * 0.105), 20px);
  letter-spacing:.06em;
}
.card .cmeta{
  position:relative;z-index:1;
  font-size:clamp(8px, calc(var(--card-h) * 0.062), 11.5px);
  font-weight:700;color:#4a453c;
}
.card .cost{
  position:absolute;top:-2px;left:-2px;z-index:2;
  font-family:Impact,"Arial Black",sans-serif;font-style:italic;
  font-size:clamp(11px, calc(var(--card-h) * 0.082), 16px);
  color:#fff;background:var(--energy);
  border:2.5px solid var(--ink);border-radius:0 0 6px 0;
  padding:1px 8px 0;
  -webkit-text-stroke:.8px var(--ink);
}
.card[data-cat="energy"]  .glyph{color:var(--energy);}
.card[data-cat="attack"]  .glyph{color:var(--attack);}
.card[data-cat="defense"] .glyph{color:var(--defense);}
.card[data-cat="reflect"] .glyph{color:var(--reflect);}
.card[data-cat="special"] .glyph{color:var(--special);}
/* 每类牌左侧一道色条，像漫画的分镜标记 */
.card[data-cat]::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  border-right:2.5px solid var(--ink);z-index:2;
}
.card[data-cat="energy"]::after{background:var(--energy);}
.card[data-cat="attack"]::after{background:var(--attack);}
.card[data-cat="defense"]::after{background:var(--defense);}
.card[data-cat="reflect"]::after{background:var(--reflect);}
.card[data-cat="special"]::after{background:var(--special);}

#vs{display:flex;flex-direction:column;align-items:center;gap:8px;}
#vs b{
  font-family:Impact,"Arial Black",sans-serif;font-style:italic;
  font-size:clamp(30px,5.2vh,54px);letter-spacing:.06em;color:var(--paper);
  -webkit-text-stroke:3px var(--ink);
  text-shadow:5px 5px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink);
  transform:rotate(-4deg);
}
#vs span{
  font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--paper);
  background:var(--ink);padding:3px 9px;transform:rotate(-1deg);
}
#roundTag{font-style:italic;}

/* -------------------------------------------------------- 结算抽屉 */
/* 默认收起在屏幕右侧外面，点右边的标签展开 */
#logWrap{
  position:fixed;top:0;right:0;bottom:0;z-index:70;
  width:min(390px, 88vw);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  background:#1b1b21;
  border-left:var(--bw) solid var(--ink);
  box-shadow:-7px 0 0 rgba(0,0,0,.55);
  transform:translateX(102%);
  transition:transform .28s cubic-bezier(.3,1.15,.4,1);
}
#logWrap.open{transform:translateX(0);}
#logWrap h3{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;font-size:15px;letter-spacing:.4em;
  background:var(--ink);color:var(--paper);
  padding:9px 14px 7px;flex:0 0 auto;
}
#btnLog{
  position:fixed;right:0;top:50%;z-index:71;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:13px 7px 11px;
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;font-size:15px;line-height:1.05;letter-spacing:.08em;
  color:var(--paper);background:var(--ink);
  border:var(--bw) solid var(--ink);border-right:0;
  border-radius:5px 0 0 5px;
  box-shadow:-4px 4px 0 rgba(0,0,0,.5);
  cursor:pointer;font-family:inherit;
  transition:right .28s cubic-bezier(.3,1.15,.4,1), background .15s, transform .12s;
}
#btnLog:hover{background:#2c2c36;}
#btnLog:active{transform:translateY(-50%) translateX(2px);}
#logWrap.open ~ #btnLog{right:min(390px, 88vw);}
#logBadge{
  font-style:normal;font-size:10px;font-weight:800;
  min-width:17px;height:17px;line-height:16px;text-align:center;
  border-radius:99px;background:var(--dim);color:var(--paper);
  margin-top:3px;padding:0 4px;
}
#logBadge.on{background:var(--attack);animation:badgePop .45s ease-out;}
@keyframes badgePop{0%{transform:scale(1.9);}100%{transform:scale(1);}}
#log{
  flex:1;overflow-y:auto;padding:10px 11px 16px;
  display:flex;flex-direction:column;gap:8px;
}
/* 每条日志 = 一个漫画旁白框 */
.logLine{
  font-size:12.5px;line-height:1.5;font-weight:600;
  background:var(--paper);color:#22201c;
  border:2.5px solid var(--ink);border-radius:2px;
  box-shadow:3px 3px 0 rgba(0,0,0,.85);
  padding:6px 9px;
  transform:rotate(-.5deg);
  animation:slideIn .22s ease-out;
}
.logLine:nth-child(even){transform:rotate(.6deg);}
@keyframes slideIn{from{opacity:0;transform:translateX(14px) rotate(2deg);}to{opacity:1;}}
.logLine.good{background:#d8f5e7;}
.logLine.bad{background:#ffdfe2;}
.logLine.key{background:#ffeec2;font-weight:800;}
.logLine.round{
  background:transparent;border:0;box-shadow:none;color:#8b8677;
  font-style:italic;font-size:11px;letter-spacing:.3em;text-align:center;
  padding:6px 0 0;transform:none;
}
.logLine.over{
  background:var(--ink);color:var(--paper);border-color:var(--paper);
  font-weight:900;font-size:14px;transform:rotate(-1deg);
}

/* -------------------------------------------------------------- 面板 */
/* 牌栏这一行本身不再有底 —— 底只铺在手牌那一块上，
   这样左边自己的状态栏底下就是纯黑（用户要求去掉白底） */
#panel{
  grid-area:panel;
  position:relative;
}
#deckCol{
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--pop) var(--pop) 0 var(--ink);
  color:var(--ink);
  padding:10px 12px 8px;
}
#panel::after{
  content:"YOUR MOVE";position:absolute;right:13px;top:8px;
  color:rgba(13,13,16,.17);font-family:Impact,"Arial Black",sans-serif;
  font-size:10px;font-style:italic;font-weight:900;letter-spacing:.16em;
  pointer-events:none;
}
/* 手牌区：单排横向滚动，只放当前出得起的招式 */
#groups{
  display:flex;align-items:stretch;gap:8px;
  overflow-x:auto;overflow-y:hidden;
  padding:14px 4px 13px;      /* 给角标和硬投影留出空间，别被裁掉 */
  /* 不要加 scroll-behavior:smooth：滚轮翻牌走的是 scrollLeft 赋值，
     平滑动画会让它「发飘」，而且同步读 scrollLeft 会读不到变化。 */
}
#groups.empty::after{
  content:"这一手没有别的选择了 —— 只能「蓄」";
  align-self:center;padding-left:8px;
  font-size:12px;font-weight:800;color:#8b8677;font-style:italic;
}

/* 一张招式牌 = 一格格小分镜 */
.sk{
  position:relative;flex:0 0 auto;cursor:pointer;
  width:clamp(84px, 9.4vh, 116px);
  min-height:clamp(84px, 9.4vh, 116px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:2.5px solid var(--ink);border-radius:3px;
  background:linear-gradient(145deg,#fffdf7 0%,var(--paper) 70%,#eee7d7 100%);color:var(--ink);font-family:inherit;
  padding:10px 6px 7px;text-align:center;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s,box-shadow .1s,background .15s,opacity .2s,filter .2s;
}
.sk .g svg{width:100%;height:100%;display:block;}
.sk .g{
  font-size:clamp(20px, 4.6vh, 30px);line-height:1;
  -webkit-text-stroke:1px var(--ink);
}
.sk .n{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;font-size:clamp(12px, 2.3vh, 15px);letter-spacing:.03em;
}
.sk .m{font-size:clamp(8px, 1.5vh, 10px);font-weight:700;color:#5c564b;line-height:1.25;}
.sk .c{
  position:absolute;top:-9px;right:-7px;
  font-family:Impact,"Arial Black",sans-serif;font-style:italic;
  font-size:13px;color:#fff;background:var(--energy);
  border:2px solid var(--ink);border-radius:50%;
  width:22px;height:22px;line-height:18px;text-align:center;
  -webkit-text-stroke:.7px var(--ink);
}
.sk .u{
  position:absolute;bottom:-8px;left:-6px;font-size:9px;font-weight:800;
  color:var(--paper);background:var(--ink);border-radius:2px;padding:0 5px;
  letter-spacing:.04em;
}
.sk[data-cat="energy"] .g{color:var(--energy);}
.sk[data-cat="attack"] .g{color:var(--attack);}
.sk[data-cat="defense"] .g{color:var(--defense);}
.sk[data-cat="reflect"] .g{color:var(--reflect);}
.sk[data-cat="special"] .g{color:var(--special);}
.sk:not(.locked):hover{transform:translate(-1px,-3px);box-shadow:5px 6px 0 var(--ink);background:#fff;}
.sk:not(.locked):active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
/* 出不起的招式：默认整张收起来，切到「全部招式」时显示为灰色 */
.sk.gone{display:none;}
.sk.locked{
  cursor:not-allowed;box-shadow:2px 2px 0 #a9a394;border-color:#a9a394;color:#a9a394;
  background:repeating-linear-gradient(45deg,#efeade 0 4px,#e6e0d2 4px 8px);
  opacity:.75;
}
.sk.locked .c{background:#a9a394;border-color:#a9a394;}
.sk.locked .u{background:#a9a394;}
.sk.locked .g{color:#a9a394 !important;}
/* 顶部的分类色条 */
.sk::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  border-bottom:2px solid var(--ink);border-radius:1px 1px 0 0;
}
.sk[data-cat="energy"]::before{background:var(--energy);}
.sk[data-cat="attack"]::before{background:var(--attack);}
.sk[data-cat="defense"]::before{background:var(--defense);}
.sk[data-cat="reflect"]::before{background:var(--reflect);}
.sk[data-cat="special"]::before{background:var(--special);}
.sk.locked::before{background:#c9c3b4;border-color:#a9a394;}
.sk.pulse{animation:skPulse .5s ease-out;}
@keyframes skPulse{0%{box-shadow:0 0 0 0 rgba(224,52,63,.7);}100%{box-shadow:0 0 0 16px rgba(224,52,63,0);}}

#panelFoot{
  display:flex;align-items:center;gap:6px;
  margin-top:6px;padding-top:8px;border-top:2.5px solid var(--ink);
  font-size:10.5px;font-weight:700;color:#5c564b;
}
#deckHint{margin-right:2px;}
#btnAll{margin-left:0;}
#btnAll.on{background:var(--ink);color:var(--paper);}
#btnSound.off, #btnBgm.off{opacity:.45;text-decoration:line-through;}
#btnRestart{margin-left:auto;}
.kbd{
  border:2px solid var(--ink);border-radius:2px;padding:0 6px;
  font-size:10px;background:var(--paper2);color:var(--ink);box-shadow:1.5px 1.5px 0 var(--ink);
}
.sep{opacity:.4;}
button.ghost{
  background:var(--paper);border:2.5px solid var(--ink);color:var(--ink);
  border-radius:2px;padding:3px 11px;font-size:11px;font-weight:800;font-family:inherit;
  cursor:pointer;box-shadow:2.5px 2.5px 0 var(--ink);
}
button.ghost:hover{background:var(--ink);color:var(--paper);}
button.ghost:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink);}

/* 键盘操作时要有明确焦点，而不是只依赖鼠标悬停。 */
button:focus-visible,.seat.targetable:focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;
  box-shadow:0 0 0 3px var(--ink), var(--pop) var(--pop) 0 var(--ink);
}

/* ----------------------------------------------------------- 提示气泡 */
#tooltip{
  position:fixed;z-index:80;max-width:300px;pointer-events:none;
  background:var(--paper);color:var(--ink);
  border:var(--bw) solid var(--ink);border-radius:2px;
  box-shadow:5px 5px 0 var(--ink);
  padding:9px 12px;font-size:11.5px;font-weight:600;line-height:1.65;
  opacity:0;transition:opacity .14s;
}
#tooltip.show{opacity:1;}
#tooltip b{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;font-size:14px;
}

/* -------------------------------------------------------------- 遮罩 */
#overlay{
  position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:90;display:none;
  align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(10,10,15,.74), rgba(4,4,7,.95)),
    repeating-linear-gradient(45deg, rgba(251,248,239,.035) 0 3px, transparent 3px 9px);
}
#overlay.show{display:flex;}
.ovPanel{
  position:relative;text-align:center;padding:36px 46px 30px;
  background:var(--paper);color:var(--ink);
  border:4px solid var(--ink);border-radius:3px;
  box-shadow:10px 10px 0 var(--ink);
  max-width:600px;
}
.ovPanel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle, rgba(13,13,16,.10) 1px, transparent 1.2px);
  background-size:5px 5px;
  -webkit-mask-image:linear-gradient(160deg,#000 0%,transparent 55%);
  mask-image:linear-gradient(160deg,#000 0%,transparent 55%);
}
.ovPanel h1{
  position:relative;
  font-family:Impact,"Arial Black","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:900;font-style:italic;
  font-size:52px;letter-spacing:.16em;text-indent:.16em;
  /* 奶白面板上必须用深色字芯：白字 + 粗描边会把汉字内部笔画吃光，糊成一坨 */
  color:var(--attack);
  -webkit-text-stroke:2.5px var(--ink);
  text-shadow:5px 5px 0 var(--ink);
  transform:rotate(-2.5deg);
  margin-bottom:14px;
}
.ovPanel .sub{
  position:relative;
  font-size:12px;font-weight:800;letter-spacing:.22em;color:#4a453c;margin-bottom:20px;
}
.ovPanel .rules{
  position:relative;
  font-size:13px;line-height:1.95;color:#3b372f;font-weight:600;margin-bottom:22px;
  text-align:left;
}
.ovPanel .rules b{font-weight:900;}
.ovPanel .tiny{position:relative;font-size:10.5px;color:#8b8677;margin-top:18px;font-weight:700;}
.ovPanel code{
  color:var(--ink);background:var(--paper2);border:1.5px solid var(--ink);
  border-radius:2px;padding:0 4px;font-size:10px;
}
.diffRow{position:relative;display:flex;gap:9px;justify-content:center;margin-bottom:14px;}
.pickRow{position:relative;display:flex;gap:9px;justify-content:center;align-items:center;margin:0 0 22px;}
.pickLabel{font-size:11px;font-weight:800;color:#8b8677;letter-spacing:.14em;margin-right:3px;}
.pickRow .diff{padding:5px 14px;font-size:12px;}

/* 性格说明（只在 3 人以上出现） */
.persBox{margin:0 0 18px;text-align:center;}
.persList{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:7px;}
.persChip{
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  background:#f1ece0;border:2px solid var(--ink);border-radius:6px;
  padding:4px 9px;font-size:10px;color:#6f6a5c;max-width:150px;line-height:1.25;
}
.persChip b{font-size:12px;color:var(--ink);letter-spacing:.08em;}
.diff{
  font-family:inherit;font-weight:800;font-size:13px;
  background:var(--paper);color:#4a453c;
  border:2.5px solid var(--ink);border-radius:2px;
  padding:7px 18px;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s,box-shadow .1s;
}
.diff:hover{background:#fff;color:var(--ink);}
.diff.on,.diff[data-on="1"]{background:var(--attack);color:#fff;-webkit-text-stroke:.5px var(--ink);}
.diff:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
#btnStart{
  position:relative;
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;
  font-size:22px;letter-spacing:.3em;text-indent:.3em;
  color:#fff;background:var(--attack);
  border:3.5px solid var(--ink);border-radius:3px;
  padding:12px 54px;cursor:pointer;
  box-shadow:6px 6px 0 var(--ink);
  -webkit-text-stroke:1.2px var(--ink);
  transition:transform .1s,box-shadow .1s;
}
#btnStart:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink);}
#btnStart:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink);}
.ovPanel h1.resWin,.ovPanel h1.resLose,.ovPanel h1.resDraw{
  font-size:44px;letter-spacing:.2em;text-indent:.2em;
}
.ovPanel h1.resWin{color:#0f9c6c;}
.ovPanel h1.resLose{color:var(--attack);}
.ovPanel h1.resDraw{color:#d4971a;}
.ovPanel .rules b{font-variant-numeric:tabular-nums;}

/* -------------------------------------------- 矮窗口：优先压缩面板，别压牌 */
@media (max-height:700px){
  .sk{width:clamp(74px, 12vh, 100px);min-height:clamp(74px, 12vh, 100px);padding:8px 5px 5px;}
  .sk .n{font-size:12.5px;}
  .sk .m{font-size:8.5px;}
  #groups{gap:6px;padding:9px 3px 11px;}
  #panel{padding:7px 10px 6px;}
  #panelFoot{margin-top:5px;padding-top:5px;}
  .ovPanel{padding:24px 32px 20px;}
  .ovPanel h1{font-size:40px;}
}
@media (max-height:620px){
  :root{ --card-h:clamp(84px, 18vh, 150px); --pop:3px; }
  .slot{gap:5px;}
  .slotLabel{font-size:9px;letter-spacing:.2em;}
  #logWrap h3{padding:7px 12px 5px;font-size:12px;letter-spacing:.25em;}
  #log{padding:8px 9px 10px;gap:5px;}
  .logLine{font-size:11.5px;padding:5px 7px;}
}

/* -------------------------------------------------------- 窄屏兜底 */
/* 布局本来就已经是单列了（结算改成抽屉之后），窄屏只需要把东西压小 */
@media (max-width:900px){
  .sk{width:clamp(68px, 15vw, 92px);min-height:clamp(68px, 15vw, 92px);}
  .sk .g svg{width:100%;height:100%;display:block;}
.sk .g{font-size:clamp(17px, 4vh, 24px);}
  #panelFoot{font-size:9.5px;gap:4px;}
  #btnLog{font-size:13px;padding:11px 6px 9px;}
  #logWrap{width:min(330px, 92vw);}
  #logWrap.open ~ #btnLog{right:min(330px, 92vw);}
}

/* ============================================================ 首页 */
#overlay.home{background:radial-gradient(circle at 50% 40%, rgba(10,10,15,.88), rgba(4,4,7,.985));}
.home{
  /* 这两条是早期「首页是个浮窗」时代的残留：新版 .home 是整页 grid，
     限高 94vh + overflow 会造成①整页可滚 ②#homeFx 画布底部露黑。 */
  padding:6px 4px 10px;
}
.homeHero{text-align:center;flex:0 0 auto;}
.homeHero h1{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;letter-spacing:.12em;
  font-size:clamp(38px,8.2vh,78px);line-height:1;
  color:var(--attack);-webkit-text-stroke:2.5px var(--ink);
  text-shadow:5px 5px 0 var(--ink);
  transform:rotate(-2deg);
}
.homeBody{display:flex;gap:14px;flex-wrap:wrap;}
.homeCard{
  flex:1 1 300px;min-width:0;
  background:linear-gradient(135deg,#fffdf7 0%,var(--paper) 76%,#eee7d7 100%);border:var(--bw) solid var(--ink);border-radius:var(--radius);
  box-shadow:5px 5px 0 var(--ink);padding:12px 14px 14px;
}
.homeCard h2{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;font-size:15px;letter-spacing:.18em;
  color:var(--ink);margin-bottom:9px;
  border-bottom:2.5px solid var(--ink);display:inline-block;padding-bottom:1px;
}
.homeCard .rules{font-size:12.5px;line-height:1.75;color:#5c574a;}
.homeCard .rules b{color:var(--ink);}
.homeCard .tiny{margin-top:9px;font-size:10.5px;color:#9a9488;}
.homeCard .tiny code{background:#efeadd;padding:1px 5px;border-radius:3px;}

.avatarGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;}
.avatarPick{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:5px 2px 4px;cursor:pointer;
  background:#f1ece0;border:2.5px solid transparent;border-radius:8px;
  font:inherit;transition:transform .14s,border-color .14s,background .14s;
}
.avatarPick svg{width:38px;height:38px;display:block;}
.avatarPick span{font-size:9.5px;font-weight:800;color:#7a7466;letter-spacing:.06em;}
.avatarPick:hover{transform:translateY(-2px);background:#e9e2d2;}
.avatarPick.on{border-color:var(--ink);background:#ffe9b8;box-shadow:2px 2px 0 var(--ink);}
.avatarPick.on span{color:var(--ink);}

.cycle{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;}
.cycle .cy{
  font-size:11.5px;font-weight:900;letter-spacing:.04em;
  color:var(--paper);background:var(--c);padding:3px 9px 2px;
  border:2px solid var(--ink);border-radius:5px;box-shadow:2px 2px 0 var(--ink);
  transform:rotate(-1.5deg);
}
.cycle i{color:#b3ad9e;font-style:normal;font-weight:900;}

.homeStart{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:14px 12px 12px;background:rgba(251,248,239,.08);
  border:2px dashed rgba(251,248,239,.25);border-radius:var(--radius);
}
.homeStart .homePick{display:flex;flex-direction:column;gap:8px;}
.homeStart .pickRow,.homeStart .diffRow{margin:0;}
.homeStart #btnStart{margin-top:2px;padding:13px 60px;font-size:19px;}

@media (max-width:700px){
  #app{gap:8px;padding:8px;}
  #roundBar{gap:5px 9px;min-height:30px;padding:4px 8px;border-radius:8px;}
  #roundBar #roundTag{font-size:13px;padding:2px 7px 1px;}
  #roundBar #hintMini{font-size:9px;letter-spacing:.12em;}
  #table::before{width:86%;height:70%;}
  #meBar{grid-template-columns:auto 1fr;grid-template-areas:"face mid" "en en";gap:7px 10px;padding:7px 10px 8px;}
  #meBar .face{width:44px;height:44px;}
  #meBar .pname{font-size:16px;}
  #meBar .hp .pip{width:17px;height:17px;}
  #meBar .en{min-width:0;width:100%;}
  #panel{padding:8px 9px 6px;}
  #panel::after{right:9px;top:6px;font-size:8px;}
  #panelFoot{flex-wrap:wrap;row-gap:7px;padding-top:7px;}
  #btnRestart{margin-left:auto;}
  .home{width:min(96vw,620px);gap:10px;padding:3px 2px 8px;}
  .homeHero h1{font-size:clamp(36px,12vw,58px);}
  .homeBody{gap:10px;}
  .homeCard{flex-basis:100%;padding:10px 11px;}
  .avatarGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;}
  .avatarPick svg{width:32px;height:32px;}
  .avatarPick span{font-size:8px;}
  .homeStart{padding:10px 7px;}
  .pickRow,.diffRow{gap:5px;flex-wrap:wrap;}
  .pickLabel{width:100%;text-align:center;margin:0;}
  .homeStart #btnStart{padding:11px 42px;font-size:18px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important;}
}

/* 背景粒子光屏：独立画布，压在最底下 */
#bgfx{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none;}
/* 自己的状态栏：**不要任何底色**。
   它带着 .seat 类（为了复用内部的 .pinfo/.hp/.en 样式），而 .seat 有奶油底，
   所以这里在样式表末尾明确压掉。 */
#meBar, #meBar.on{
  background:none !important;
  border:2px solid rgba(232,161,28,.6);
  border-radius:var(--radius);
  box-shadow:none;
}
/* ============================================================ 末段覆盖 */
/* 牌栏也不要有白底了 —— 底全去掉，只剩卡片本身 */
#deckCol{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:6px 0 0 !important;
  color:var(--paper);
}
#panelFoot, #panelFoot .ghost, #deckHint, #panelFoot .sep, #panelFoot .kbd{
  color:#dfe4ec !important;
}
#panelFoot .ghost{
  background:rgba(223,228,236,.08) !important;
  border-color:rgba(223,228,236,.55) !important;
}
#panelFoot .ghost:hover{background:rgba(223,228,236,.2) !important;}
#panelFoot .ghost.on{background:rgba(232,161,28,.85) !important;color:#141414 !important;}
#panelFoot .kbd{background:rgba(223,228,236,.16) !important;color:#fff !important;}

/* 血量数字：不要黑色（现在底是黑的，深色数字看不见） */
#meBar .hpNum{color:#ffd9de !important;text-shadow:0 0 8px rgba(224,52,63,.55);}

/* 血点改成心形（内联 SVG 作背景，不用改 JS） */
.pip, #meBar .hp .pip, .seat .hp .pip{
  width:17px;height:16px;
  transform:none;border:0;box-shadow:none;background:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'><path d='M16 28.4S2.2 19.6 2.2 10.6C2.2 5.6 6.2 2.2 10.4 2.2c2.6 0 4.6 1.4 5.6 3.2 1-1.8 3-3.2 5.6-3.2 4.2 0 8.2 3.4 8.2 8.4 0 9-13.8 17.8-13.8 17.8z' fill='%23e0343f' stroke='%23141414' stroke-width='2.6' stroke-linejoin='round'/></svg>");
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
.pip.dead, #meBar .hp .pip.dead, .seat .hp .pip.dead{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'><path d='M16 28.4S2.2 19.6 2.2 10.6C2.2 5.6 6.2 2.2 10.4 2.2c2.6 0 4.6 1.4 5.6 3.2 1-1.8 3-3.2 5.6-3.2 4.2 0 8.2 3.4 8.2 8.4 0 9-13.8 17.8-13.8 17.8z' fill='%23c9c3b4' stroke='%23807a6d' stroke-width='2.6' stroke-linejoin='round'/></svg>");
  opacity:.85;
}
#meBar .hp{gap:6px;}
.seat .hp{gap:4px;}
/* 心形比菱形宽，间距收一点 */
.seat .hp .pip{width:14px;height:13px;}
/* 音量条：放在底栏，和音效/音乐开关并排 */
#volWrap{display:inline-flex;align-items:center;gap:6px;color:#dfe4ec;}
#volRange{
  -webkit-appearance:none;appearance:none;
  width:96px;height:5px;border-radius:3px;cursor:pointer;
  background:linear-gradient(90deg,#e8a11c var(--v,75%), rgba(223,228,236,.28) var(--v,75%));
  outline:none;
}
#volRange::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:#fbf8ef;border:2.5px solid #141414;cursor:pointer;
  box-shadow:0 0 8px rgba(232,161,28,.8);
}
#volRange::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;
  background:#fbf8ef;border:2.5px solid #141414;cursor:pointer;
}
#volNum{
  font-family:"Arial Black","PingFang SC",sans-serif;font-weight:900;
  font-size:12px;color:#ffd98a;min-width:22px;text-align:right;
}
/* 出局后出现的「直接看结果」按钮（平时隐藏） */
#btnSkip{
  display:none;
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;letter-spacing:.1em;font-size:12px;
  padding:5px 14px;border-radius:4px;cursor:pointer;
  color:#141414;background:#e8a11c;border:2.5px solid #141414;
  box-shadow:3px 3px 0 #141414;
  animation:skipPulse 1.4s ease-in-out infinite;
}
#btnSkip.on{display:inline-block;}
#btnSkip:hover{transform:translateY(-1px);}
@keyframes skipPulse{0%,100%{box-shadow:3px 3px 0 #141414;}50%{box-shadow:3px 3px 0 #141414,0 0 18px 2px rgba(232,161,28,.9);}}

/* 出局后「回房间」：只有联机 3 人以上才会亮（单人没有房间可回）。
   和 #btnSkip 并排，但用中性配色 —— 它是"离开观战"，不是"快进"。 */
#btnExitRoom{
  display:none;
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;letter-spacing:.1em;font-size:12px;
  padding:5px 14px;border-radius:4px;cursor:pointer;
  color:#141414;background:#dfe4ec;border:2.5px solid #141414;
  box-shadow:3px 3px 0 #141414;
}
#btnExitRoom.on{display:inline-block;}
#btnExitRoom:hover{transform:translateY(-1px);background:#fffdf7;}

/* 结算面板底部的两个按钮排一行 */
.resBtns{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:4px;}
.resBtns #btnStart{margin:0;padding:13px 34px;font-size:17px;}
.resBtns .ghost{
  padding:13px 22px;font-size:14px;font-weight:900;
  background:var(--paper);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:4px;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
}
.resBtns .ghost:hover{transform:translateY(-1px);}
/* 首页的对局记录条 + 导出文本框 */
.recBox{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:10px;padding-top:9px;border-top:2px dashed rgba(13,13,16,.2);
}
.recBox #recCount{font-size:11.5px;font-weight:800;color:#6f6a5c;letter-spacing:.04em;}
.recBox .ghost{
  font:inherit;font-size:11.5px;font-weight:900;cursor:pointer;
  padding:4px 11px;border-radius:4px;
  background:#f1ece0;color:var(--ink);border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}
#expArea{
  width:100%;height:min(46vh,340px);margin:10px 0 4px;
  font-family:ui-monospace,Consolas,monospace;font-size:11px;line-height:1.45;
  padding:9px;border:2px solid var(--ink);border-radius:4px;
  background:#fbf8ef;color:var(--ink);resize:vertical;white-space:pre;
}
/* ==========================================================================
 * 环形牌廊（首页背景）
 *   纯 CSS 3D：舞台给 perspective，圆筒给 preserve-3d，
 *   每张牌 rotateY(自己的角度) translateZ(半径)。
 * ====================================================================== */
.galStage{
  position:relative;width:100%;height:100%;
  perspective-origin:50% 46%;
  cursor:grab;
}
.galStage:active{cursor:grabbing;}
.galRing{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.galCard{
  position:absolute;left:0;top:0;
  width:var(--gal-w);height:var(--gal-h);
  margin-left:calc(var(--gal-w) / -2);
  margin-top:calc(var(--gal-h) / -2);
  transform-style:preserve-3d;
  transform:rotateY(var(--rot,0deg)) translateZ(var(--gal-r));
}
/* 注意：这里**不能**给 .galCard 加 transition:opacity。
   JS 每帧都在写 opacity，加了过渡等于每帧重新定向一次 0.2s 动画，
   22 张卡片的过渡永远跑不完，合成器一直在忙 —— 首页动画就是这么卡住的。 */
.galFlip{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.9,.3,1.25);
  transform:rotateY(0deg) scale(1);
}
.galCard:hover .galFlip{ transform:rotateY(0deg) scale(1.16); }
.galCard.flip .galFlip{ transform:rotateY(180deg) scale(1.06); }
.galCard.flip:hover .galFlip{ transform:rotateY(180deg) scale(1.16); }

.galFace,.galBack{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 8px;text-align:center;
}
.galFace{
  background:linear-gradient(135deg,#fffdf7 0%,var(--paper) 62%,#ece4d2 100%);
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 rgba(0,0,0,.55);
  color:var(--ink);
}
.galBack{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,#1b1f2a,#0d1017);
  border:3px solid var(--accent,#e8a11c);
  box-shadow:4px 4px 0 rgba(0,0,0,.55), 0 0 22px -6px var(--accent,#e8a11c);
  color:var(--paper);
  justify-content:flex-start;
}
.galFace .g{display:block;width:56%;flex:0 1 auto;min-height:0;margin-bottom:8px;}
.galFace .g svg{width:100%;height:100%;display:block;}
.galFace .n{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;letter-spacing:.1em;
  font-size:22px;line-height:1;
}
.galFace .m{font-size:11px;font-weight:800;color:#6d6759;margin-top:5px;letter-spacing:.04em;}
.galFace .c{
  position:absolute;right:7px;top:6px;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:Impact,"Arial Black",sans-serif;font-weight:900;font-size:13px;
  background:var(--energy);color:var(--ink);border:2px solid var(--ink);
}
.galBack .bn{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-weight:900;font-style:italic;letter-spacing:.12em;
  font-size:19px;color:var(--accent,#e8a11c);margin-bottom:7px;
}
.galBack .bd{font-size:10.5px;line-height:1.45;color:#cfd6e2;font-weight:600;overflow:hidden;}

/* 环形牌廊 + 右侧选择区：整页铺开，不是浮在中间的框 */
#overlay.home{
  background:
    radial-gradient(ellipse 90% 70% at 32% 48%, rgba(232,161,28,.10), transparent 70%),
    radial-gradient(ellipse 80% 60% at 78% 20%, rgba(120,180,255,.07), transparent 70%),
    #07080b;
}
/* 首页是整页 —— 覆盖 overlay 的居中 flex，否则 grid 会被按内容高度压扁 */
#overlay.home.show{display:block;}
.home{
  position:relative;                 /* #homeFx 要绝对定位铺满这一页 */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,27vw);
  width:100%;height:100%;gap:0;
}
/* 首页的光粒子：铺在牌廊和选择区**后面**，不拦鼠标 */
#homeFx{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.homeGal,.homeSide{position:relative;z-index:1;}
.homeGal{
  position:relative;display:flex;flex-direction:column;
  min-width:0;overflow:hidden;
  border-right:3px solid rgba(20,20,20,.9);
}
.homeHero{
  position:absolute;left:0;right:0;top:clamp(34px,9vh,104px);
  text-align:center;z-index:30;pointer-events:none;
}
.homeHero h1{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-size:clamp(38px,5.6vw,76px);letter-spacing:.14em;line-height:1;
  color:var(--attack);
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill;
  text-shadow:5px 5px 0 var(--ink);
}
#galStageWrap{flex:1 1 auto;min-height:0;position:relative;}

.homeSide{
  display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px);
  padding:clamp(16px,3vh,34px) clamp(16px,2vw,28px);
  overflow-y:auto;overscroll-behavior:contain;   /* 滚到底不要把整页带着滚 */
  background:rgba(10,12,16,.55);
}
.homeSide section{
  background:linear-gradient(135deg,#fffdf7 0%,var(--paper) 70%,#ece4d2 100%);
  border:3px solid var(--ink);border-radius:7px;
  box-shadow:4px 4px 0 var(--ink);
  padding:14px 16px 16px;color:var(--ink);
}
.homeSide h2{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-size:21px;letter-spacing:.1em;color:var(--ink);
  margin-bottom:11px;
}
/* 右侧的字整体放大 */
.homeSide .avatarGrid{gap:9px;grid-template-columns:repeat(4,1fr);}
.homeSide .avatarPick{padding:7px 4px 5px;border-width:3px;}
.homeSide .avatarPick svg{width:52px;height:52px;}
.homeSide .avatarPick span{font-size:11.5px;margin-top:3px;}
.homeSide .seg{padding:10px 20px;font-size:16px;border-width:3px;}
.homeSide #btnStart{
  padding:20px 34px;font-size:26px;letter-spacing:.22em;
  border-width:4px;box-shadow:5px 5px 0 var(--ink);
}
.homeSide .recBox{border-top-width:2px;margin-top:12px;padding-top:11px;}
.homeSide .recBox #recCount{font-size:12.5px;color:#5d5849;}
.homeSide .recBox .ghost{font-size:12.5px;padding:6px 13px;}
/* ==========================================================================
 * 首页是**独立的一页**，不是盖在游戏上的浮层
 *   以前 #overlay 是 100vh 的遮罩，但页面比视口高（游戏面板溢出了），
 *   底部 40 多像素的牌栏会从遮罩下面露出来。
 *   现在首页显示时直接把游戏整个藏起来，点「开始」才切进游戏。
 * ====================================================================== */
body.home-mode #app,
body.home-mode #logWrap,
body.home-mode #btnLog,
body.home-mode #fx,
body.home-mode #bgfx{visibility:hidden;}
body.home-mode{overflow:hidden;}
/* ==========================================================================
 * 去掉所有滚动条
 *   只隐藏**条**，滚动本身照常可用（滚轮 / 拖动 / 键盘都还在），
 *   否则内容就够不着了。
 * ====================================================================== */
*{scrollbar-width:none;-ms-overflow-style:none;}
*::-webkit-scrollbar{width:0;height:0;display:none;}
/* ==========================================================================
 * 局内表情
 *   #meBar 是竖排（头像在上、信息在下），所以要贴到头像右边得用绝对定位。
 *   选择面板和气泡挂在 #panel 上（#meBar 有 overflow:hidden，挂里面会被裁掉）。
 * ====================================================================== */
#btnEmoji{
  position:absolute;left:74px;top:22px;      /* 头像右边那块空白 */
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;cursor:pointer;
  background:var(--paper);color:var(--ink);
  border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  transition:transform .12s, background .12s;
}
#btnEmoji:hover{transform:translateY(-1px) scale(1.06);background:#ffe9a8;}

#emojiPop{
  display:none;
  position:absolute;left:0;bottom:calc(100% + 10px);z-index:60;
  grid-template-columns:repeat(4,1fr);gap:7px;padding:11px;
  background:var(--paper);border:3px solid var(--ink);border-radius:9px;
  box-shadow:4px 4px 0 var(--ink);
}
#emojiPop.show{display:grid;}
.emojiItem{
  width:58px;height:58px;padding:3px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#fffdf7;border:2px solid var(--ink);border-radius:7px;
  transition:transform .12s, background .12s;
}
.emojiItem:hover{transform:translateY(-2px) scale(1.07);background:#ffe9a8;}
.emojiItem img{width:100%;height:100%;object-fit:contain;display:block;}

/* 发出去的气泡：飘在头像斜上方 */
#emojiBubble{
  position:absolute;left:34px;top:-118px;z-index:55;pointer-events:none;
  opacity:0;transform:scale(.5) translateY(10px);
  transition:opacity .16s, transform .3s cubic-bezier(.2,1.5,.4,1);
}
#emojiBubble.show{opacity:1;transform:scale(1) translateY(0);}
/* 表情图本身就是带脚的气泡（脚朝右下），所以直接用图片，
   不再套白色圆框、也不再另加 CSS 尾巴。
   摆放时按位置给 .mir 让它水平镜像，脚就朝回头像。 */
#emojiBubble img,.emojiFloatEl img{
  display:block;width:130px;height:auto;
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.6));
}
#emojiBubble.mir img,.emojiFloatEl.mir img{transform:scaleX(-1);}
/* 别人发表情的气泡：挂在 #table 上，位置由 JS 按座位锚点算 */
.emojiFloatEl{
  position:absolute;left:0;top:0;z-index:58;pointer-events:none;
  /* 镜像由 JS 按摆放位置加 .mir */
  opacity:0;transform:scale(.4) translateY(10px);
  transition:opacity .16s, transform .3s cubic-bezier(.2,1.5,.4,1);
}
.emojiFloatEl.show{opacity:1;transform:scale(1) translateY(0);}
/* ==========================================================================
 * 模式入口（首页）
 * ====================================================================== */
.modeBtn{
  width:100%;padding:16px 18px;cursor:pointer;
  font-size:22px;letter-spacing:.14em;
  background:var(--accent,#e0343f);color:#fff;
  border:3px solid var(--ink);border-radius:10px;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, filter .12s;
}
.modeBtn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink);filter:brightness(1.08);}
.modeBtn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}
/* 次要按钮：只改颜色，尺寸和主按钮完全一致 */
.modeBtn.alt{background:var(--paper);color:var(--ink);}
.modeBtn + .modeBtn{margin-top:12px;}
/* 人数页的返回键：和「开始」一样宽一样高，只是次要配色 */
#btnBack{
  display:block;width:100%;margin-top:12px;padding:16px 18px;
  font-size:22px;letter-spacing:.14em;cursor:pointer;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);border-radius:10px;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s, box-shadow .12s;
}
#btnBack:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink);}
#btnBack:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}

/* ==========================================================================
 * 单挑模式：没有血条
 *   1 点血，显示"5/5"那种格子没有意义，整个隐掉。
 *   两条选择器分别管自己（#meBar）和 AI 座位（.seat）。
 * ====================================================================== */
body.duel-mode #meBar .hp,
body.duel-mode #meBar .hpNum,
body.duel-mode .seat .hp,
body.duel-mode .seat .hpNum{display:none;}
/* ==========================================================================
 * 2 人局的模式选择窗
 * ====================================================================== */
#modePick{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,16,.72);
}
.mpBox{
  width:min(92vw,400px);padding:26px 24px;
  display:flex;flex-direction:column;gap:12px;
  background:var(--paper);border:3px solid var(--ink);border-radius:14px;
  box-shadow:8px 8px 0 var(--ink);
}
.mpBox h2{margin:0 0 4px;font-size:20px;letter-spacing:.1em;text-align:center;
  color:var(--ink);}   /* overlay.home 的文字是浅色，这里必须显式压回墨色 */
.mpBtn{
  width:100%;padding:14px 16px;cursor:pointer;text-align:left;
  background:#fffdf7;color:var(--ink);
  border:3px solid var(--ink);border-radius:10px;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .12s;
}
.mpBtn b{display:block;font-size:19px;letter-spacing:.08em;}
.mpBtn small{display:block;margin-top:4px;font-size:12px;color:#8b8578;letter-spacing:0;}
.mpBtn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);background:#ffe9a8;}
.mpBtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
#mpCancel{width:100%;padding:10px;font-size:14px;cursor:pointer;}

/* 首页账号块 / 在线模式 / 账号页 / 轻提示
   追加在文件末尾，不动上面任何既有规则。 */
.acctBox{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.acctBox.empty{display:block;}
.acctCreate{
  width:100%;padding:13px 16px;cursor:pointer;
  font-size:17px;font-weight:900;letter-spacing:.16em;
  background:#ffe9b8;color:var(--ink);
  border:3px solid var(--ink);border-radius:10px;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .12s;
}
.acctCreate:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);background:#ffdf94;}
.acctCreate:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.acctHint{margin:8px 0 0;font-size:11.5px;line-height:1.5;color:#8b8578;font-weight:700;}
.acctBox.has{
  padding:9px 12px;background:#fffdf7;
  border:3px solid var(--ink);border-radius:10px;
  box-shadow:3px 3px 0 var(--ink);
}
.acctBox .acctAv{display:block;width:44px;height:44px;flex:0 0 auto;}
.acctBox .acctAv svg{width:44px;height:44px;display:block;}
.acctBox .acctName{
  flex:1;min-width:0;font-size:18px;font-weight:900;letter-spacing:.05em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acctBox .acctEdit{font-size:12.5px;padding:6px 13px;flex:0 0 auto;}

/* ---- 在线模式 ---- */
.onlineBox{display:flex;flex-direction:column;gap:9px;}
.onlineBtn{
  width:100%;padding:13px 16px;cursor:pointer;
  font-size:17px;font-weight:900;letter-spacing:.16em;
  background:#cfe8ff;color:var(--ink);
  border:3px solid var(--ink);border-radius:10px;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .12s;
}
.onlineBtn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);background:#b6dcff;}
.onlineBtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.onlineBtn.ghost{background:#fffdf7;}
.onlineBtn.ghost:hover{background:#eef6ff;}
.onlineHint{margin:2px 0 0;font-size:11.5px;line-height:1.5;color:#8b8578;font-weight:700;}

/* ---- 账号页（创建 / 修改）---- */
.acctPanel{max-width:520px;}
.acctTitle{margin:0;font-size:30px;letter-spacing:.14em;text-align:center;color:var(--ink);}
.acctPanel .sub{margin:8px 0 18px;font-size:12.5px;text-align:center;color:#8b8578;font-weight:700;}
.acctForm{display:flex;flex-direction:column;gap:16px;}
.acctPreview{display:flex;justify-content:center;}
.acctAvLg{display:block;width:96px;height:96px;
  background:#fffdf7;border:3px solid var(--ink);border-radius:16px;
  box-shadow:4px 4px 0 var(--ink);padding:6px;}
.acctAvLg svg{width:100%;height:100%;display:block;}
.acctField{display:flex;flex-direction:column;gap:7px;}
.acctInput{
  width:100%;padding:12px 14px;font-size:19px;font-weight:800;letter-spacing:.06em;
  font-family:inherit;color:var(--ink);background:#fffdf7;
  border:3px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);
}
.acctInput:focus{outline:none;background:#fff8e2;}
.acctErr{margin:0;padding:9px 12px;font-size:12.5px;font-weight:800;color:#fff;
  background:#e0343f;border:3px solid var(--ink);border-radius:9px;box-shadow:3px 3px 0 var(--ink);}
.acctPanel .resBtns{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.acctPanel .resBtns button{flex:1;min-width:110px;}

/* ---- 轻提示 ---- */
.toast{
  position:fixed;left:50%;top:22px;transform:translate(-50%,-24px);
  max-width:min(680px,92vw);padding:13px 20px;z-index:9000;
  font-size:13.5px;font-weight:800;line-height:1.55;letter-spacing:.02em;
  color:var(--ink);background:#ffe9b8;
  border:3px solid var(--ink);border-radius:11px;
  box-shadow:5px 5px 0 var(--ink);
  opacity:0;pointer-events:none;
  transition:opacity .18s, transform .18s;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ==========================================================================
 * 首页右侧卡片的三处调整（用户反馈）
 *   1. 账号页「保存」按钮和旁边两个不一样大
 *   2. 「加入房间」比「开房间」小
 *   3. 人数 / 难度 / 开始 散着放，收进「单人模式」一张卡里
 * ====================================================================== */

/* ---- 1. 账号页：三个按钮同款同尺寸 ----
   根因是 #btnStart 有 ID 选择器（13px 34px / 17px），而旁边的 .ghost 是
   13px 22px / 14px，保存按钮夹在中间既不像这个也不像那个。 */
.acctPanel .resBtns button,
.acctPanel .resBtns .ghost{
  flex:1 1 0;min-width:0;
  margin:0;padding:13px 20px;
  font-family:inherit;font-size:15px;font-weight:900;letter-spacing:.1em;
  border:3px solid var(--ink);border-radius:4px;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
}

/* ---- 2. 在线模式：两个按钮完全等大 ----
   「加入房间」原来挂了 ghost 类，比「开房间」矮一截。现在两个同款，
   只靠底色区分主次。 */
.onlineBtn.alt{background:#fffdf7;}
.onlineBtn.alt:hover{background:#eef6ff;}

/* ---- 3. 单人模式：一张卡装下人数 / 难度 / 开始 ---- */
.homeSide .soloCard{text-align:center;}
.homeSide .soloCard h2{margin-bottom:8px;}
/* .pickRow 自带 22px 下边距，卡里不需要那么松 */
.homeSide .soloCard .pickRow{margin-bottom:9px;}
.homeSide .soloCard #btnStart{margin-top:4px;}

/* 单人模式卡里的「对局记录」条
   原来它是单独一张卡，现在并进「单人模式」，用一条虚线分隔。
   按钮文字也收短了（导出 / 清空），所以字号和内边距跟着收一点。 */
.homeSide .soloCard .recBox{margin-top:14px;padding-top:12px;}
.homeSide .soloCard .recBox .ghost{font-size:12px;padding:5px 12px;}
.recBox .recLabel{
  font-size:11px;font-weight:900;letter-spacing:.14em;color:#8b8677;
  margin-right:2px;
}

/* ==========================================================================
 * 联机大厅：房间页 / 加入页
 *   结构照参考图（座位卡一排 + 右侧信息栏 + 底部开始），配色沿用漫画风。
 * ====================================================================== */
.lobby{
  width:100%;height:100%;display:flex;flex-direction:column;
  padding:clamp(10px,1.6vh,20px) clamp(12px,2vw,26px);
  gap:clamp(8px,1.4vh,16px);
}

/* ---- 顶栏 ---- */
.lobbyTop{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:2px dashed rgba(251,248,239,.28);
}
.lobbyTitle{
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-size:clamp(22px,3.2vh,34px);letter-spacing:.16em;color:var(--paper);
}
.lobbyTitle .lbMark{color:#e0343f;margin-right:6px;}
.lobbyMeta{display:flex;align-items:center;gap:10px;color:var(--paper);font-weight:900;}
.lobbyMeta b{font-size:clamp(16px,2.2vh,22px);}
.lobbyMeta .lbWait{font-size:12.5px;color:#c9c3b4;letter-spacing:.06em;}
.lobbyCode{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  color:#c9c3b4;font-size:13px;font-weight:800;
}
.lobbyCode b{color:var(--paper);font-size:16px;letter-spacing:.14em;}

/* ---- 主体：左座位 / 右信息 ---- */
.lobbyBody{flex:1;min-height:0;display:flex;gap:clamp(10px,1.6vw,22px);align-items:stretch;}
.lobbySeats{
  flex:1;min-width:0;display:flex;align-items:center;gap:6px;
}
.seatRow{
  flex:1;min-width:0;display:flex;gap:clamp(8px,1.2vw,16px);
  align-items:center;justify-content:center;
  overflow-x:auto;padding:6px 2px;
}
.lobbyArrow{
  flex:0 0 auto;width:30px;height:56px;cursor:pointer;
  background:rgba(251,248,239,.10);color:var(--paper);
  border:2px solid rgba(251,248,239,.35);border-radius:7px;
  font-size:20px;font-weight:900;
}
.lobbyArrow:hover{background:rgba(251,248,239,.22);}

/* ---- 座位卡 ---- */
.seatCard{
  position:relative;flex:0 0 auto;
  width:clamp(96px,11vw,140px);height:clamp(120px,17vh,178px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(135deg,#fffdf7 0%,var(--paper) 70%,#ece4d2 100%);
  border:3px solid var(--ink);border-radius:9px;
  box-shadow:5px 5px 0 var(--ink);
  color:var(--ink);overflow:hidden;
}
.seatCard .scAv{
  width:clamp(40px,5.4vw,62px);height:clamp(40px,5.4vw,62px);
  display:flex;align-items:center;justify-content:center;
}
.seatCard .scAv svg{width:100%;height:100%;display:block;}
.seatCard .scName{
  font-size:clamp(11px,1.5vh,14px);font-weight:900;letter-spacing:.04em;
  max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.seatCard .scState{font-size:10.5px;font-weight:800;letter-spacing:.05em;}
.seatCard .scState.ok{color:#12855c;}
.seatCard .scState.no{color:#e0343f;}
.seatCard .scCrown{position:absolute;top:3px;left:5px;font-size:15px;}
.seatCard .scMe{
  position:absolute;top:3px;right:5px;font-size:10px;font-weight:900;
  background:#e8a11c;color:var(--ink);border-radius:4px;padding:1px 5px;
}
.seatCard.me{border-color:#e8a11c;box-shadow:5px 5px 0 #e8a11c;}
.seatCard.empty{
  cursor:pointer;background:rgba(251,248,239,.08);
  border-style:dashed;border-color:rgba(251,248,239,.45);
  box-shadow:none;color:rgba(251,248,239,.75);
  font-family:inherit;
}
.seatCard.empty .scAv{
  border-radius:50%;background:rgba(251,248,239,.18);
  font-size:26px;font-weight:900;color:var(--paper);
}
.seatCard.empty:hover{background:rgba(251,248,239,.18);}
.seatCard.ai{border-color:#7b46c9;box-shadow:5px 5px 0 #7b46c9;}

/* ---- 右侧信息栏 ---- */
.lobbyInfo{
  flex:0 0 clamp(200px,22vw,270px);
  display:flex;flex-direction:column;gap:9px;
  overflow-y:auto;
}
.infoCard{
  background:linear-gradient(135deg,#fffdf7 0%,var(--paper) 70%,#ece4d2 100%);
  border:3px solid var(--ink);border-radius:8px;
  box-shadow:4px 4px 0 var(--ink);
  padding:11px 13px;color:var(--ink);
}
.infoCard h3{
  margin:0 0 9px;font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-size:15px;letter-spacing:.12em;
}
.infoRow{
  display:flex;align-items:center;gap:7px;
  padding:5px 0;font-size:12.5px;font-weight:800;
  border-top:1px dashed rgba(13,13,16,.18);
}
.infoRow:first-of-type{border-top:none;}
.infoRow span{color:#8b8677;flex:0 0 46px;}
.infoRow b{flex:1;letter-spacing:.06em;}
.iconBtn{
  flex:0 0 auto;width:24px;height:24px;cursor:pointer;
  background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);border-radius:5px;
  font-size:12px;line-height:1;font-weight:900;
}
.iconBtn:hover{background:#ffe9b8;}

.lobbyBig{
  width:100%;padding:13px 14px;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:900;letter-spacing:.14em;
  background:#e0343f;color:#fff;border:3px solid var(--ink);border-radius:9px;
  box-shadow:4px 4px 0 var(--ink);
}
.lobbyBig:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink);}
.lobbyGhost{
  width:100%;padding:10px 12px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:900;letter-spacing:.08em;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);border-radius:9px;box-shadow:3px 3px 0 var(--ink);
}
.lobbyGhost:hover{background:#eef6ff;}
.lobbyGhost.soon{
  position:relative;opacity:.55;cursor:not-allowed;
  background:#e9e2d2;
}
.lobbyGhost.soon:hover{background:#e9e2d2;}
.soonTag{
  position:absolute;top:-8px;right:8px;
  font-size:9.5px;font-weight:900;letter-spacing:.06em;
  background:#7b46c9;color:#fff;border-radius:4px;padding:1px 6px;
}
.lobbyWhy{
  margin:0;font-size:10.5px;line-height:1.5;color:#8b8578;font-weight:700;
}

/* ---- 底栏 ---- */
.lobbyFoot{
  display:flex;align-items:center;gap:14px;
  padding-top:9px;border-top:2px dashed rgba(251,248,239,.28);
}
.hostTag{color:#c9c3b4;font-size:13px;font-weight:800;}
.lobbyWaitTag{color:#e8a11c;font-size:14px;font-weight:900;letter-spacing:.08em;}
.lobbyStart{
  margin-left:auto;padding:13px 34px;cursor:pointer;
  font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-size:19px;letter-spacing:.16em;
  background:#e0343f;color:#fff;border:3px solid var(--ink);border-radius:9px;
  box-shadow:4px 4px 0 var(--ink);
}
.lobbyStart.wide{margin:0;width:100%;font-size:17px;padding:13px;}
.lobbyStart:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink);}
.lobbyStart:disabled{opacity:.45;cursor:not-allowed;}
.lobbyQuit{
  padding:9px 16px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:900;letter-spacing:.08em;
  background:transparent;color:#c9c3b4;
  border:2px solid rgba(201,195,180,.5);border-radius:7px;
}
.lobbyQuit:hover{color:var(--paper);border-color:var(--paper);}

/* ---- 加入页 ---- */
.joinBody{flex:1;min-height:0;display:flex;gap:clamp(12px,2vw,28px);align-items:center;justify-content:center;}
.joinCard{
  flex:0 0 clamp(280px,34vw,420px);
  background:linear-gradient(135deg,#fffdf7 0%,var(--paper) 70%,#ece4d2 100%);
  border:4px solid var(--ink);border-radius:12px;
  box-shadow:7px 7px 0 var(--ink);
  padding:clamp(16px,3vh,30px);color:var(--ink);
  display:flex;flex-direction:column;gap:13px;
}
.joinCard h2{
  margin:0;font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-size:clamp(20px,3vh,30px);letter-spacing:.14em;
}
.joinHint{margin:0;font-size:12px;line-height:1.55;color:#8b8578;font-weight:700;}
.joinCard .acctInput{text-align:center;font-size:24px;letter-spacing:.3em;}
.joinErr{margin:0;min-height:16px;font-size:12px;font-weight:800;color:#e0343f;}
.joinSide{flex:0 0 clamp(200px,24vw,320px);}
.joinNote{
  background:rgba(251,248,239,.08);
  border:2px dashed rgba(251,248,239,.35);border-radius:9px;
  padding:13px 15px;color:#c9c3b4;
}
.joinNote b{display:block;color:var(--paper);font-size:13.5px;margin-bottom:6px;letter-spacing:.06em;}
.joinNote p{margin:0;font-size:11.5px;line-height:1.6;font-weight:700;}
.joinNote p b{display:inline;font-size:inherit;margin:0;color:#e8a11c;}

/* ==========================================================================
 * 房间聊天 + 公开房间列表
 * ====================================================================== */
.chatCard{
  flex:1;min-height:120px;
  display:flex;flex-direction:column;gap:7px;
  background:linear-gradient(135deg,#fffdf7 0%,var(--paper) 70%,#ece4d2 100%);
  border:3px solid var(--ink);border-radius:8px;
  box-shadow:4px 4px 0 var(--ink);
  padding:10px 12px;color:var(--ink);
}
.chatCard h3{
  margin:0;font-family:Impact,"Arial Black","PingFang SC",sans-serif;
  font-size:14px;letter-spacing:.12em;
}
.chatLog{
  flex:1;min-height:60px;overflow-y:auto;
  padding:6px 7px;border-radius:6px;
  background:rgba(13,13,16,.06);
  font-size:11.5px;line-height:1.6;
}
.chatEmpty{margin:0;color:#9a9488;font-weight:700;}
.chatLine{margin:0 0 3px;word-break:break-word;}
.chatLine b{color:#7b46c9;margin-right:5px;font-weight:900;}
.chatLine.me b{color:#12855c;}
.chatInputRow{display:flex;gap:6px;}
.chatInput{
  flex:1;min-width:0;padding:7px 9px;font-family:inherit;
  font-size:12px;font-weight:700;color:var(--ink);
  background:#fffdf7;border:2.5px solid var(--ink);border-radius:6px;
}
.chatInput:focus{outline:none;background:#fff8e2;}
.chatSend{
  flex:0 0 auto;width:34px;cursor:pointer;font-size:14px;font-weight:900;
  background:#e0343f;color:#fff;border:2.5px solid var(--ink);border-radius:6px;
}
.chatSend:hover{background:#c72b36;}

/* ---- 加入页：房间列表 ---- */
.joinTabs{display:flex;align-items:center;gap:9px;margin-left:auto;}
.joinTab{
  font-size:13px;font-weight:900;letter-spacing:.08em;color:var(--paper);
  border-bottom:3px solid #e0343f;padding-bottom:2px;
}
.roomList{
  flex:1;min-width:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;padding:2px 4px 2px 0;
}
.roomListHint{
  margin:0;padding:16px;border-radius:9px;
  background:rgba(251,248,239,.08);
  border:2px dashed rgba(251,248,239,.35);
  color:#c9c3b4;font-size:12.5px;line-height:1.7;font-weight:700;
}
.roomListHint b{color:#e8a11c;}
.roomRow{
  display:flex;align-items:center;gap:12px;
  padding:10px 13px;border-radius:9px;
  background:linear-gradient(135deg,#fffdf7 0%,var(--paper) 70%,#ece4d2 100%);
  border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  color:var(--ink);
}
.rrMain{flex:1;min-width:0;}
.rrName{
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:900;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rrTag{
  flex:0 0 auto;font-size:10px;font-weight:900;letter-spacing:.06em;
  border-radius:4px;padding:1px 7px;color:#fff;border:2px solid var(--ink);
}
.rrTag.classic{background:#e0343f;}
.rrTag.normal{background:#1f7fc4;}
.rrSub{
  display:flex;align-items:center;gap:7px;margin-top:3px;
  font-size:11.5px;font-weight:800;color:#8b8677;
}
.rrSub b{color:var(--ink);letter-spacing:.1em;}
.rrMeta{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  font-size:11.5px;font-weight:800;
}
.rrCount{color:#6f6a5c;}
.rrState.waiting{color:#12855c;}
.rrState.playing{color:#e8a11c;}
.rrJoin{
  flex:0 0 auto;padding:9px 20px;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:900;letter-spacing:.1em;
  background:#7b46c9;color:#fff;border:3px solid var(--ink);border-radius:8px;
  box-shadow:3px 3px 0 var(--ink);
}
.rrJoin:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);}
.joinBody{flex:1;min-height:0;display:flex;gap:clamp(12px,2vw,26px);align-items:stretch;}
.joinBody .joinSide{
  flex:0 0 clamp(240px,28vw,340px);
  display:flex;align-items:center;
}

/* ==========================================================================
 * 侧栏布局修正 + 聊天的可读性
 *
 *   问题：.lobbyInfo 原来是 overflow-y:auto 的普通列，聊天卡又是 flex:1，
 *   在内容偏多时会被压扁甚至挤出可视区 —— 表现就是"聊天框发了没显示"
 *   （消息其实收到了，只是那块看不见）。
 *
 *   改成：信息卡和按钮固定高度，聊天卡吃掉剩下的高度且不许被压缩。
 * ====================================================================== */
.lobbyInfo{
  overflow:hidden;                 /* 只让聊天内部滚，侧栏自己不滚 */
  min-height:0;
}
.lobbyInfo > .infoCard,
.lobbyInfo > .lobbyBig,
.lobbyInfo > .lobbyGhost,
.lobbyInfo > .lobbyWhy{flex:0 0 auto;}

.chatCard{
  flex:1 1 auto;
  min-height:150px;                /* 不许被压没 —— 压没了聊天就"看不见"了 */
  overflow:hidden;
}
.chatCard h3{
  display:flex;align-items:center;gap:7px;
}
/* 未读条数：一眼能看出"到底有没有收到消息" */
.chatCard h3 .chatN{
  font-family:inherit;font-size:11px;font-weight:900;letter-spacing:.04em;
  background:#7b46c9;color:#fff;border-radius:9px;padding:1px 7px;
}
.chatCard h3 .chatN.zero{background:#c9c3b4;}
.chatLog{
  min-height:70px;
  overscroll-behavior:contain;
}
.chatLine{
  padding:2px 0;
}
.chatLine b{
  font-size:11px;
}

/* ==========================================================================
 * 对局中的聊天输入行（在右侧结算抽屉底部）
 *   只有联机时才显示（refreshLogChat 会设 display）。
 * ====================================================================== */
#logChat{
  display:none;                 /* 单机时隐藏；联机时 main.js 会改成 flex */
  gap:6px;align-items:center;
  padding:8px 10px 10px;
  border-top:2px dashed rgba(251,248,239,.22);
}
#logChat input{
  flex:1;min-width:0;padding:7px 9px;
  font-family:inherit;font-size:12px;font-weight:700;
  color:var(--ink);background:var(--paper);
  border:2.5px solid var(--ink);border-radius:6px;
}
#logChat input:focus{outline:none;background:#fff8e2;}
#logChat button{
  flex:0 0 auto;width:32px;height:32px;cursor:pointer;
  font-size:14px;font-weight:900;font-family:inherit;
  color:#fff;background:#e0343f;
  border:2.5px solid var(--ink);border-radius:6px;
}
#logChat button:hover{background:#c72b36;}

/* 聊天在结算日志里的样式：和结算条目区分开 */
#log .chat,
#log .lchat{
  color:#8fd0ff !important;
  font-weight:800;
}

/* 联机诊断框：屏幕上直接显示，可截图
   只在联机对局开始时出现一次，点一下关掉。 */
.diag{
  position:fixed;left:10px;bottom:10px;z-index:9500;
  max-width:min(560px,92vw);max-height:38vh;overflow:auto;
  padding:10px 13px;border-radius:9px;
  font-family:Consolas,Menlo,monospace;
  font-size:11.5px;line-height:1.6;white-space:pre-wrap;word-break:break-all;
  color:#d6ffe6;background:rgba(8,14,10,.92);
  border:2px solid #12855c;box-shadow:4px 4px 0 rgba(0,0,0,.5);
  cursor:pointer;user-select:text;
}