/* ==========================================================================
   NZEP 资料库 · assets/games/wanning.css —— 万宁中国象棋（页面样式）
   --------------------------------------------------------------------------
   只写 w- 前缀的类；外壳的 st-* / g-* 一律复用 games.css 与 subsite.css。
   两套布局：
     · 大厅：白底资料库风格，hero + 页签 + 卡片列表；
     · 对局：整块塞进视口 —— 顶栏下面一条 HUD、中间棋盘、底部技能手牌，
       手机上页面**不滚动**（st-main 被 .w-playing 锁住），棋盘按 min(宽, 高×88/98) 算。
   390×844 实测：棋盘约 370×412，格子 46px，棋子热区 44px，手牌卡 90×96。
   ========================================================================== */

/* ------------------------------------------------------------------ 通用 */
.w-body .st-main { padding: 0; }
.w-wrap { padding: 1.1rem 1.1rem 1.6rem; max-width: 1180px; margin: 0 auto; width: 100%; }
.w-hide { display: none !important; }
.w-mono { font-family: var(--mono); }
.w-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.w-btn {
  appearance: none; font-family: inherit; cursor: pointer; font-size: .86rem;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  padding: .55rem .9rem; min-height: 44px; border-radius: 2px; line-height: 1.4;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  text-decoration: none;
}
.w-btn:hover { background: var(--bg-subtle); text-decoration: none; }
.w-btn.primary { background: #b32424; border-color: #8f1c1c; color: #fff; }
.w-btn.primary:hover { background: #8f1c1c; }
.w-btn.ink { background: #191919; border-color: #191919; color: #fff; }
.w-btn.ink:hover { background: #2a2a2a; }
.w-btn.ghost { border-color: transparent; background: none; color: var(--link); }
.w-btn.danger { color: var(--bad); border-color: #e6c3c3; }
.w-btn.sm { min-height: 44px; padding: .35rem .6rem; font-size: .8rem; }
.w-btn[disabled] { opacity: .45; cursor: not-allowed; }
.w-btn.big { min-height: 50px; font-size: 1rem; padding: .7rem 1.2rem; }

/* ------------------------------------------------------------------ 大厅 */
.w-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--border-soft); background:
    linear-gradient(135deg, #fffdf7 0%, #fbf4e6 55%, #f7efe9 100%);
  padding: 1.1rem 1.15rem 1rem; margin: 0 0 .9rem;
}
.w-hero::after {
  content: "象"; position: absolute; right: .6rem; bottom: -2.2rem;
  font-family: var(--serif); font-size: 7.5rem; line-height: 1;
  color: rgba(179, 36, 36, .07); pointer-events: none;
}
.w-hero h1 {
  font-family: var(--serif); font-size: 1.6rem; margin: 0 0 .25rem; color: #7d0009;
  letter-spacing: .02em;
}
.w-hero .w-lead { color: var(--text-2); font-size: .88rem; line-height: 1.9; margin: 0 0 .85rem; max-width: 46rem; }
.w-hero-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.w-hero-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.w-chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 .5rem;
  border: 1px solid var(--border-soft); background: rgba(255, 255, 255, .7);
  font-size: .75rem; color: var(--text-2);
}

/* 页签条：桌面一行，手机 4 个等分，不横向滚动 */
.w-tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem;
  border-bottom: 1px solid var(--border); margin: 0 0 .9rem;
}
.w-tab {
  appearance: none; font-family: inherit; cursor: pointer; font-size: .86rem;
  border: 1px solid transparent; border-bottom: 2px solid transparent;
  background: none; color: var(--text-2); min-height: 44px; padding: .4rem .5rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w-tab:hover { background: var(--bg-subtle); color: var(--text); }
.w-tab[aria-selected="true"] { color: #7d0009; border-bottom-color: #b32424; font-weight: 700; }
.w-panel[hidden] { display: none; }

.w-sec-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .55rem; }
.w-sec-head h2 { font-family: var(--serif); font-size: 1.1rem; margin: 0; border: 0; padding: 0; }
.w-sec-head .w-sec-ops { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.w-sec-desc { color: var(--text-3); font-size: .8rem; line-height: 1.8; margin: 0 0 .7rem; }

.w-filter-row { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .7rem; }
.w-input, .w-select, .w-textarea {
  font-family: inherit; font-size: .86rem; border: 1px solid var(--border);
  background: #fff; color: var(--text); padding: .5rem .55rem; min-height: 44px;
  border-radius: 2px; min-width: 0;
}
.w-input { flex: 1 1 10rem; }
.w-textarea { width: 100%; min-height: 5.5rem; line-height: 1.7; resize: vertical; }
.w-input:focus, .w-select:focus, .w-textarea:focus { outline: 2px solid #3366cc; outline-offset: 0; }

.w-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: .65rem; }
.w-skill {
  border: 1px solid var(--border-soft); border-left: 4px solid #b32424; background: #fff;
  padding: .65rem .75rem; display: flex; flex-direction: column; gap: .35rem;
}
.w-skill.office { border-left-color: #3366cc; }
.w-skill .w-skill-top { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.w-skill h3 { font-family: var(--serif); font-size: 1rem; margin: 0; }
.w-skill .w-cost {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: #b32424; color: #fff; font-size: .76rem; font-weight: 700;
  font-family: var(--mono); flex: 0 0 auto;
}
.w-skill .w-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.w-skill .w-tag {
  border: 1px solid var(--border-soft); background: var(--bg-subtle); color: var(--text-2);
  font-size: .72rem; padding: 0 .3rem; line-height: 1.7;
}
.w-skill .w-desc { font-size: .8rem; line-height: 1.75; color: var(--text-2); margin: 0; white-space: pre-wrap; }
.w-skill .w-ops { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .25rem; }
.w-skill .w-ops .w-btn { min-height: 44px; }

.w-empty {
  border: 1px dashed var(--border-soft); background: var(--bg-subtle); color: var(--text-3);
  padding: .9rem .8rem; font-size: .84rem; line-height: 1.8;
}
.w-note {
  border-left: 4px solid #3366cc; background: #eaf3ff; padding: .55rem .7rem;
  font-size: .82rem; line-height: 1.8; margin: 0 0 .7rem;
}
.w-note.warn { border-left-color: #d9a400; background: #fff8e6; }
.w-note.bad { border-left-color: #b32424; background: #fdf3f3; }
.w-rules { font-size: .84rem; line-height: 1.95; color: var(--text-2); white-space: pre-wrap; }
.w-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.w-stat { border: 1px solid var(--border-soft); background: #fff; padding: .7rem .8rem; }
.w-stat b { display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--text-3); }
.w-stat span { font-size: .78rem; color: var(--text-3); }

/* ------------------------------------------------------------------ 对局壳 */
body.w-playing { overflow: hidden; }
body.w-playing .st-main { padding: 0; overflow: hidden; }
body.w-playing .st-foot { display: none; }
body.w-playing #wRoot { height: 100%; min-height: 0; display: flex; flex-direction: column; }
body.w-playing #wnGame { flex: 1 1 auto; min-height: 0; }
.w-modal-open { overflow: hidden; }

.w-game {
  height: 100%; min-height: 0; display: flex; flex-direction: column;
  background: #f3f1ec;
}
.w-hud {
  flex: 0 0 auto; display: flex; align-items: center; gap: .5rem;
  padding: .35rem .55rem; background: #191919; color: #f2f2ef;
  min-height: 48px;
}
.w-hud .w-hud-btn {
  appearance: none; font-family: inherit; cursor: pointer; background: none;
  border: 1px solid #3a3a3a; color: #f2f2ef; border-radius: 2px; min-height: 44px;
  min-width: 44px; padding: 0 .55rem; font-size: .8rem; display: inline-flex;
  align-items: center; justify-content: center; gap: .3rem;
}
.w-hud .w-hud-btn:hover { background: #2a2a2a; }
.w-hud .w-hud-title { font-family: var(--serif); font-size: .92rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.w-hud .w-hud-spacer { flex: 1; }
.w-hud .w-seat-mini { font-size: .74rem; color: #a9a9a2; white-space: nowrap; }
.w-hud .w-seat-mini b { color: #fff; font-weight: 700; }
.w-turn-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #b32424; display: inline-block; }
.w-turn-dot.black { background: #e8e8e8; }
.w-turn-dot.idle { background: #6b6b6b; }

.w-stage { flex: 1 1 auto; min-height: 0; display: flex; gap: .5rem; padding: .45rem .55rem .25rem; }
.w-stage-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.w-rail { flex: 0 0 19rem; display: none; flex-direction: column; gap: .5rem; min-height: 0; }
.w-seatbar {
  display: flex; align-items: center; gap: .45rem; min-height: 36px;
  padding: 0 .5rem; background: #fff; border: 1px solid #ded8cb; font-size: .8rem;
}
.w-seatbar .w-seat-name { font-weight: 700; }
.w-seatbar .w-seat-hand { margin-left: auto; color: var(--text-3); font-family: var(--mono); font-size: .76rem; }
.w-seatbar.opp { border-bottom: 0; }
.w-seatbar.me { border-top: 0; }
.w-seatbar.active { box-shadow: inset 3px 0 0 0 #b32424; background: #fffdf8; }

.w-board-wrap {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  position: relative; padding: .2rem 0;
}
.w-board {
  position: relative; aspect-ratio: 88 / 98; max-width: 100%; max-height: 100%;
  background: #f7e9c8;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .55), transparent 60%),
    repeating-linear-gradient(92deg, rgba(120, 80, 20, .045) 0 2px, transparent 2px 7px);
  box-shadow: 0 2px 10px rgba(60, 40, 10, .18), inset 0 0 0 1px #c8ab72;
  border-radius: 3px; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: box-shadow .2s var(--ease);
}
.w-board.in-check { box-shadow: 0 0 0 3px rgba(179, 36, 36, .55), 0 2px 14px rgba(179, 36, 36, .3), inset 0 0 0 1px #c8ab72; }
.w-board-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.w-board-svg line, .w-board-svg rect { vector-effect: non-scaling-stroke; }
.w-grid-line { stroke: #8a6d3b; stroke-width: 1.4; }
.w-grid-edge { stroke: #6f5527; stroke-width: 2.2; }
.w-river-text {
  font-family: var(--serif); font-size: .5px; fill: #8a6d3b; letter-spacing: .2px;
  text-anchor: middle; dominant-baseline: middle;
}

/* 棋子：圆形木牌 + 楷体字；按钮热区 >=44px（390 宽实测 44px） */
.w-pc {
  position: absolute; transform: translate(-50%, -50%);
  width: 11.6%; min-width: 44px; min-height: 44px; aspect-ratio: 1;
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; z-index: 3;
}
.w-pc .w-pc-face {
  width: 88%; height: 88%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "Songti SC", var(--serif);
  font-size: clamp(15px, 5.2vw, 30px); font-weight: 700; line-height: 1;
  background: radial-gradient(circle at 34% 28%, #fffdf5, #f3e2bb 70%, #e3c98f);
  box-shadow: 0 2px 3px rgba(60, 40, 10, .35), inset 0 0 0 2px #efe0bd, inset 0 0 0 3px #b99b5f;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.w-pc.red .w-pc-face { color: #b32424; }
.w-pc.black .w-pc-face { color: #1a1a1a; }
.w-pc:hover .w-pc-face { transform: translateY(-1px); }
.w-pc.sel .w-pc-face { box-shadow: 0 0 0 3px #d9a400, 0 3px 6px rgba(60, 40, 10, .4), inset 0 0 0 2px #efe0bd; }
.w-pc.target .w-pc-face { animation: w-pulse 1s ease-in-out infinite; }
.w-pc.last::after {
  content: ""; position: absolute; inset: 4%;
  border: 2px dashed rgba(20, 134, 109, .8); border-radius: 50%; pointer-events: none;
}
.w-pc.in-check .w-pc-face { box-shadow: 0 0 0 3px #b32424, 0 0 14px rgba(179, 36, 36, .65), inset 0 0 0 2px #efe0bd; }
@keyframes w-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #14866d, inset 0 0 0 2px #efe0bd; }
  50% { box-shadow: 0 0 0 6px rgba(20, 134, 109, .35), inset 0 0 0 2px #efe0bd; }
}

/* 可落点：空点=小圆点，吃子=圆环 */
.w-dot {
  position: absolute; transform: translate(-50%, -50%); width: 13px; height: 13px;
  border-radius: 50%; background: rgba(20, 134, 109, .85);
  box-shadow: 0 0 0 3px rgba(20, 134, 109, .18); pointer-events: none; z-index: 2;
}
.w-cap {
  position: absolute; transform: translate(-50%, -50%); width: 11.6%; min-width: 44px; min-height: 44px;
  pointer-events: none; z-index: 4;
}
.w-cap::after {
  content: ""; position: absolute; inset: 2%; border-radius: 50%;
  border: 3px solid rgba(179, 36, 36, .85);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7) inset;
}
/* 上一步的起点（走完就空了，用一个虚线小方框标一下） */
.w-last {
  position: absolute; transform: translate(-50%, -50%);
  width: 10%; aspect-ratio: 1; min-width: 36px; min-height: 36px;
  border: 2px dashed rgba(20, 134, 109, .55); border-radius: 3px;
  pointer-events: none; z-index: 2;
}
/* 技能指向的空格 */
.w-sq {
  position: absolute; transform: translate(-50%, -50%);
  width: 10.2%; aspect-ratio: 1; min-width: 36px; min-height: 36px;
  border: 2px dashed #14866d; background: rgba(20, 134, 109, .14);
  pointer-events: none; z-index: 2; border-radius: 3px;
  animation: w-pulse-sq 1.1s ease-in-out infinite;
}
@keyframes w-pulse-sq { 50% { background: rgba(20, 134, 109, .3); } }

.w-check-flash {
  position: absolute; top: .4rem; left: 50%; transform: translateX(-50%);
  background: #b32424; color: #fff; font-size: .78rem; padding: .15rem .6rem;
  border-radius: 2px; z-index: 8; pointer-events: none; font-weight: 700;
  animation: w-flash 1.2s ease-in-out infinite;
}
@keyframes w-flash { 50% { opacity: .55; } }

.w-board-hint {
  position: absolute; left: 50%; bottom: .3rem; transform: translateX(-50%);
  background: rgba(25, 25, 25, .88); color: #fff; font-size: .78rem; line-height: 1.6;
  padding: .28rem .65rem; border-radius: 2px; max-width: 92%; text-align: center;
  z-index: 9; pointer-events: none;
}

/* ------------------------------------------------------------------ 手牌 */
.w-hand-zone {
  flex: 0 0 auto; background: #efece4; border-top: 1px solid #d8d2c4;
  padding: .35rem .5rem calc(.4rem + env(safe-area-inset-bottom, 0px));
}
.w-energy-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .3rem; }
.w-energy {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 30px;
  padding: 0 .5rem; background: #fff; border: 1px solid #d8d2c4; border-radius: 2px;
  font-size: .8rem; font-weight: 700; color: #7d0009; font-family: var(--mono);
}
.w-energy .w-bolt { color: #d9a400; }
.w-counter { font-size: .74rem; color: var(--text-3); font-family: var(--mono); }
.w-hand-row { display: flex; gap: .4rem; align-items: stretch; }
.w-hand {
  flex: 1 1 auto; min-width: 0; display: flex; gap: .4rem; overflow-x: auto;
  padding: .1rem .1rem .25rem; scrollbar-width: thin;
}
.w-hand-empty { color: var(--text-3); font-size: .8rem; padding: .6rem .3rem; }
.w-card {
  flex: 0 0 auto; width: 5.9rem; min-height: 96px; border: 1px solid #b99b5f;
  background: linear-gradient(180deg, #fffdf6, #f7ecd2); color: var(--text);
  border-radius: 3px; padding: .3rem .35rem; display: flex; flex-direction: column;
  gap: .15rem; cursor: pointer; position: relative; text-align: left; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.w-card:hover { border-color: #7d0009; }
.w-card.sel { box-shadow: 0 0 0 2px #14866d; border-color: #14866d; }
.w-card .w-card-head { display: flex; align-items: center; gap: .25rem; }
.w-card .w-card-name {
  font-family: var(--serif); font-size: .8rem; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto;
}
.w-card .w-card-cost {
  flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #b32424; color: #fff; font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-family: var(--mono);
}
.w-card .w-card-desc {
  font-size: .66rem; line-height: 1.45; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.w-card .w-card-foot {
  margin-top: auto; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
  font-size: .62rem; color: var(--text-3); font-family: var(--mono);
}
.w-card .w-cd {
  border: 1px solid #c8ccd1; background: #f8f9fa; padding: 0 .2rem; border-radius: 2px;
}
.w-card.cooling { filter: grayscale(.75); opacity: .72; }
.w-card.cooling .w-card-cost { background: #6b6b6b; }
.w-card.noenergy { opacity: .75; }
.w-card.noenergy .w-card-cost { background: #ac6600; }
.w-hand-acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: .3rem; justify-content: center; }
.w-hand-acts .w-btn { min-height: 44px; min-width: 84px; font-size: .82rem; }

.w-targeting {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: #e6f7f4; border: 1px solid #9ed8ca; color: #0f6b57;
  font-size: .8rem; padding: .3rem .55rem; margin: 0 0 .3rem; min-height: 44px;
}
.w-targeting .w-btn { min-height: 44px; padding: .2rem .55rem; font-size: .76rem; }

/* ------------------------------------------------------------------ 战报 */
.w-log { border: 1px solid #ded8cb; background: #fff; overflow: auto; flex: 1 1 auto; min-height: 0; }
.w-log div { padding: .3rem .5rem; border-bottom: 1px solid #f0ece2; font-size: .78rem; color: var(--text-2); line-height: 1.6; }
.w-log div:last-child { border-bottom: 0; }
.w-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; border-top: 2px solid #191919;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .22);
  max-height: 72vh; display: flex; flex-direction: column;
  transform: translateY(102%); transition: transform .22s var(--ease);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.w-drawer.open { transform: translateY(0); }
.w-drawer-head {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem;
  border-bottom: 1px solid var(--border-faint); font-family: var(--serif); font-weight: 700;
}
.w-drawer-head .w-btn { margin-left: auto; }

/* 结算条 */
.w-over {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 20; background: #fff; border: 2px solid #191919; padding: 1rem 1.1rem;
  text-align: center; min-width: min(18rem, 90vw); box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.w-over b { display: block; font-family: var(--serif); font-size: 1.3rem; color: #7d0009; margin: 0 0 .2rem; }
.w-over p { font-size: .82rem; color: var(--text-2); margin: 0 0 .7rem; }
.w-over .w-ops { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ 编辑器 */
.w-modal {
  position: fixed; inset: 0; z-index: 80; background: rgba(20, 20, 20, .42);
  display: flex; align-items: flex-end; justify-content: center;
}
.w-modal-box {
  background: #fff; width: min(100%, 46rem); max-height: 94vh; display: flex; flex-direction: column;
  border-top: 3px solid #191919; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
}
.w-modal-head {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem;
  border-bottom: 1px solid var(--border-faint); flex: 0 0 auto;
}
.w-modal-head h2 { font-family: var(--serif); font-size: 1.05rem; margin: 0; border: 0; padding: 0; }
.w-modal-head .w-btn { margin-left: auto; }
.w-modal-body { padding: .7rem .7rem 1rem; overflow: auto; flex: 1 1 auto; }
.w-modal-foot {
  display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  padding: .55rem .7rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-faint); background: var(--bg-subtle); flex: 0 0 auto;
}
.w-modal-foot .w-grow { flex: 1; }
.w-field { margin: 0 0 .65rem; }
.w-field > label, .w-field > .w-label {
  display: block; font-size: .8rem; font-weight: 700; color: var(--text); margin: 0 0 .25rem;
}
.w-field .w-help { font-size: .74rem; color: var(--text-3); margin: .2rem 0 0; line-height: 1.7; }
.w-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.w-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.w-field .w-input, .w-field .w-select { width: 100%; }
.w-check { display: flex; align-items: center; gap: .4rem; min-height: 44px; font-size: .84rem; }
.w-check input { width: 20px; height: 20px; }

.w-effect-row {
  border: 1px solid var(--border-soft); background: var(--bg-subtle);
  padding: .5rem .55rem; margin: 0 0 .5rem;
}
.w-effect-row .w-effect-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.w-effect-row .w-effect-head b { font-size: .8rem; }
.w-effect-row .w-effect-head .w-btn { margin-left: auto; }
.w-effect-row .w-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .4rem; margin-top: .4rem; }
.w-effect-row .w-param label { display: block; font-size: .72rem; color: var(--text-2); margin: 0 0 .15rem; }
.w-effect-row .w-param .w-input, .w-effect-row .w-param .w-select { width: 100%; min-height: 44px; padding: .3rem .4rem; font-size: .8rem; }
.w-effect-desc { font-size: .74rem; color: var(--text-3); line-height: 1.7; margin: .3rem 0 0; }
.w-err { color: var(--bad); font-size: .8rem; line-height: 1.7; background: var(--bad-bg); border-left: 3px solid var(--bad); padding: .35rem .5rem; margin: .3rem 0 0; }
.w-ok { color: var(--ok); font-size: .8rem; }

/* ------------------------------------------------------- 联机房间 / 技能卡组 */
/* 2026-11 加：大厅里的联机块、房间等待屏、抽签、卡组编辑器、战绩列表。
   全部沿用 w- 前缀与同一套配色；390 宽下都是单列（房间两个座位卡竖排），
   房间码 / 昵称 / 技能名一律 overflow-wrap:anywhere，不把页面撑出横向滚动。 */
.w-online {
  border: 1px solid var(--border-soft); background: #fff;
  padding: .85rem .9rem .75rem; margin: 1rem 0 0; min-width: 0;
}
.w-online .w-sec-head { margin-top: 0; }
.w-online-acts { display: flex; gap: .4rem; flex-wrap: wrap; }
.w-join-row { display: flex; gap: .4rem; flex-wrap: wrap; margin: .55rem 0 0; }
.w-join-row .w-input { flex: 1 1 6rem; min-width: 0; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.w-room-list { margin-top: .55rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.w-room-rows { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.w-room-row {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  border: 1px solid var(--border-soft); background: #fff; padding: .35rem .5rem; min-width: 0;
}
.w-room-code { font-family: var(--mono); font-weight: 700; letter-spacing: .08em; }
.w-room-names { color: var(--text-2); font-size: .8rem; flex: 1 1 6rem; min-width: 0; overflow-wrap: anywhere; }
.w-room-meta { font-size: .75rem; color: var(--text-3); white-space: nowrap; }
.w-deck-line { margin: .55rem 0 0; font-size: .8rem; color: var(--text-3); line-height: 2; }
.w-deck-line b { color: var(--text); }

.w-room { max-width: 780px; }
.w-room-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .1rem 0 .2rem; }
.w-room-head h1 { font-family: var(--serif); font-size: 1.2rem; margin: 0; border: 0; padding: 0; }
.w-room-code-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .45rem 0 .3rem; }
.w-room-code-lg {
  font-family: var(--mono); font-size: 1.55rem; letter-spacing: .12em; font-weight: 700;
  padding: .1rem .5rem; border: 1px dashed #b32424; color: #7d0009;
  max-width: 100%; overflow-wrap: anywhere;
}
.w-room-hint { color: var(--text-3); font-size: .8rem; line-height: 1.85; margin: 0 0 .7rem; }
.w-seat-cards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; margin: .6rem 0; }
.w-seat-card {
  border: 1px solid var(--border-soft); background: #fff; padding: .55rem .65rem;
  min-width: 0; display: flex; flex-direction: column; gap: .2rem;
}
.w-seat-card.me { box-shadow: inset 3px 0 0 0 #b32424; }
.w-seat-card-top { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-size: .76rem; color: var(--text-3); }
.w-seat-card-name { font-family: var(--serif); font-size: 1rem; overflow-wrap: anywhere; }
.w-seat-card-deck { font-size: .74rem; color: var(--text-3); }
.w-vs { font-family: var(--serif); color: var(--text-3); font-size: .9rem; }
.w-spin { border: 1px solid #e6c98f; background: #fffaf0; padding: .6rem .7rem; margin: .6rem 0; min-width: 0; }
.w-spin-title { font-weight: 700; font-size: .85rem; color: #7d5a00; }
.w-spin-order { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: .35rem 0; }
.w-spin-name {
  border: 1px solid #ded8cb; background: #fff; padding: .15rem .5rem; font-size: .82rem;
  max-width: 100%; overflow-wrap: anywhere;
}
.w-spin-name.first { border-color: #b32424; color: #7d0009; font-weight: 700; }
.w-spin-arrow { color: var(--text-3); }
.w-spin-count { font-size: .8rem; color: var(--text-2); }
.w-spin-count b { font-size: 1.15rem; color: #7d0009; }
.w-room-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.w-hud .w-hud-code { font-size: .7rem; color: #a9a9a2; font-family: var(--mono); letter-spacing: .06em; white-space: nowrap; }
.w-over-code { font-size: .72rem; color: var(--text-3); margin: .45rem 0 0; }

.w-deck-bar {
  border: 1px solid var(--border-soft); background: #fff; padding: .45rem .6rem;
  font-size: .82rem; margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: center;
}
.w-deck-bar b { color: #7d0009; }
.w-deck-hint { color: var(--text-3); }
.w-deck-group { margin-top: .85rem; }
.w-deck-group h3 {
  font-family: var(--serif); font-size: .95rem; margin: 0 0 .35rem;
  display: flex; align-items: baseline; gap: .35rem;
}
.w-deck-num { font-size: .72rem; color: var(--text-3); font-family: var(--mono); }
.w-deck-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: .3rem; }
.w-deck-item {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center; gap: .25rem .45rem; border: 1px solid var(--border-soft);
  background: #fff; padding: .3rem .5rem; min-height: 44px; min-width: 0; cursor: pointer;
}
.w-deck-item.on { border-color: #b32424; box-shadow: inset 3px 0 0 0 #b32424; }
.w-deck-item.bad { opacity: .72; border-color: #e6c3c3; cursor: not-allowed; }
.w-deck-item input { width: 20px; height: 20px; margin: 0; }
.w-deck-name { font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.w-deck-cost {
  font-family: var(--mono); font-size: .78rem; color: #ac6600;
  border: 1px solid #e6c98f; padding: 0 .25rem; min-width: 1.4rem; text-align: center;
}
.w-deck-desc { grid-column: 2 / -1; font-size: .7rem; color: var(--text-3); line-height: 1.5; overflow-wrap: anywhere; }
.w-deck-desc:empty { display: none; }
.w-deck-err { grid-column: 2 / -1; color: var(--bad); font-size: .72rem; line-height: 1.5; }
.w-stats-box { min-width: 0; }
.w-statline { font-size: .84rem; margin: 0 0 .45rem; color: var(--text-2); }
.w-hist { list-style: none; margin: 0; padding: 0; }
.w-hist li {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  border-bottom: 1px solid #f0ece2; padding: .3rem .1rem; font-size: .8rem; min-width: 0;
}
.w-hist-out {
  min-width: 1.7rem; text-align: center; border: 1px solid var(--border-soft);
  font-size: .74rem; color: var(--text-2);
}
.w-hist-out.win { color: #0f6b3a; border-color: #b6d8c5; }
.w-hist-out.lose { color: var(--bad); border-color: #e6c3c3; }
.w-hist-out.draw { color: #8a6d3b; border-color: #e6d8b6; }
.w-hist-opp { overflow-wrap: anywhere; }
.w-hist-reason { color: var(--text-3); overflow-wrap: anywhere; }
.w-hist-at { margin-left: auto; color: var(--text-3); font-family: var(--mono); font-size: .72rem; }

/* ------------------------------------------------------------------ 桌面 */
@media (min-width: 900px) {
  .w-rail { display: flex; }
  .w-seatbar { min-height: 40px; font-size: .84rem; }
  .w-stage { padding: .6rem .75rem .35rem; gap: .7rem; }
  .w-hand-zone { padding: .45rem .75rem .5rem; }
  .w-card { width: 6.6rem; min-height: 104px; }
  .w-card .w-card-name { font-size: .85rem; }
  .w-hero { padding: 1.5rem 1.6rem 1.3rem; }
  .w-hero h1 { font-size: 2rem; }
}

/* ------------------------------------------------------------------ 手机 */
@media (max-width: 760px) {
  .w-wrap { padding: .8rem .6rem 1rem; }
  .w-hero { padding: .9rem .8rem .85rem; }
  .w-hero h1 { font-size: 1.35rem; }
  .w-hero::after { font-size: 5.5rem; bottom: -1.3rem; }
  .w-hero-acts .w-btn { flex: 1 1 8rem; }
  .w-tabs { gap: 0; }
  .w-tab { font-size: .8rem; padding: .35rem .2rem; }
  .w-hud { padding: .25rem .4rem; min-height: 46px; gap: .35rem; }
  .w-hud .w-hud-title { font-size: .84rem; }
  .w-hud .w-seat-mini { display: none; }
  .w-stage { padding: .3rem .35rem .2rem; gap: 0; }
  .w-seatbar { min-height: 30px; font-size: .74rem; padding: 0 .4rem; }
  .w-card { width: 5.6rem; min-height: 88px; }
  .w-card .w-card-desc { -webkit-line-clamp: 2; font-size: .62rem; }
  .w-hand-acts .w-btn { min-width: 76px; font-size: .78rem; }
  .w-energy-row { gap: .35rem; margin-bottom: .2rem; }
  .w-counter { font-size: .7rem; }
  .w-hand-zone { padding: .3rem .35rem calc(.35rem + env(safe-area-inset-bottom, 0px)); }
  .w-grid2, .w-grid3 { grid-template-columns: minmax(0, 1fr); }
  .w-modal { align-items: stretch; }
  .w-modal-box { max-height: 100%; width: 100%; border-top: 0; }
  .w-modal-body { padding: .6rem .55rem .9rem; }
  .w-effect-row .w-params { grid-template-columns: minmax(0, 1fr); }
  .w-board-wrap { padding: 0; }
  /* 联机 / 卡组（2026-11）：手机上一律单列，别让两块并排把页面撑宽 */
  .w-online { padding: .65rem .6rem .6rem; }
  .w-seat-cards { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .w-vs { display: none; }
  .w-room-code-lg { font-size: 1.25rem; letter-spacing: .1em; }
  .w-room-head h1 { font-size: 1.05rem; }
  .w-deck-items { grid-template-columns: minmax(0, 1fr); }
  .w-hud .w-hud-code { display: none; }
  .w-room-actions .w-btn, .w-online-acts .w-btn, .w-join-row .w-btn { flex: 1 1 8rem; }
  .w-spin-order { gap: .25rem; }
}
@media (max-height: 620px) and (max-width: 760px) {
  .w-card { min-height: 76px; }
  .w-card .w-card-desc { display: none; }
  .w-seatbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .w-pc.target .w-pc-face, .w-sq, .w-check-flash { animation: none; }
  .w-drawer { transition: none; }
}