/* 越南纸牌共用牌桌(_game/vncards/stage.php)。尺寸全用舞台的容器单位(cqw / cqh), 页面内 16:9, 全屏时按窗口铺满。
   座位: 你在下方; 4 人 = 右 / 上 / 左(按逆时针出牌顺序), 3 人 = 右 / 左, 2 人 = 上。类名统一 vc- 前缀(站点模板有 .hp / .hero, 避免撞名) */
.vc-stage{--serif:"Noto Serif",Cambria,"Times New Roman","Noto Serif SC","Songti SC",serif;--gold:#e7c983;--gold2:#b8954f;--ink:#f3ecdc;--muted:#a9bdb4;--felt:#0f3b2f;--felt2:#082820;--line:#e7c98333;
  --chb:19cqh;--mhb:9cqh;--ar:5/7;--ch:var(--chb);--cw:calc(var(--ch)*var(--ar));--mh:var(--mhb);--mw:calc(var(--mh)*var(--ar)); /* 各牌种只改 --chb / --mhb / --ar(宽高比), .vc-me 按它们缩小 */
  position:relative;width:min(100%,calc((100vh - 100px)*16/9));aspect-ratio:16/9;margin:0 auto;border-radius:18px;overflow:hidden;container-type:size;
  color:var(--ink);font:14px/1.45 system-ui,"Segoe UI","Microsoft YaHei",sans-serif;background:radial-gradient(ellipse 70% 62% at 50% 52%,#1c5c48 0,var(--felt) 45%,var(--felt2) 78%,#03100c 100%);color-scheme:dark}
.vc-stage *{box-sizing:border-box}
.vc-stage [hidden]{display:none!important}
.vc-deck-totom{--chb:27cqh;--mhb:14cqh;--ar:1/3.6}
.vc-deck-tusac{--chb:24cqh;--mhb:12cqh;--ar:1/3.2}
.vc-deck-mahjong{--chb:14cqh;--mhb:7.5cqh;--ar:.75}
.vc-deck-mahjong .vc-card{border-radius:calc(var(--cw)*.1)}
.vc-deck-mahjong .vc-group .vc-card+.vc-card,.vc-deck-mahjong .vc-discards .vc-card+.vc-card{margin-left:1px}
html.game-full,html.game-full body{overflow:hidden}
html.game-full .vc-stage{position:fixed;inset:0;z-index:50;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border-radius:0}
html.game-full .chat-fab{display:none}
.vc-stage button{font:inherit;font-size:max(12px,1.9cqh);border:1px solid #e7c98355;background:#0b231cdd;color:var(--ink);border-radius:8px;padding:.55em 1.2em;cursor:pointer;transition:border-color .15s,color .15s,transform .15s}
.vc-stage button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.vc-stage button:disabled{opacity:.38;cursor:default}
.vc-stage button.primary{background:linear-gradient(180deg,#f2d993,#c49a4c);color:#2b1d07;border-color:#f6e2a6;font-weight:700}
.vc-stage button.primary:hover:not(:disabled){color:#1a1103;transform:translateY(-1px)}
.vc-stage button:focus-visible,.vc-stage a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#vc-actors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
/* 桌布: 一圈金线 + 中央名字 */
.vc-felt{position:absolute;left:8cqw;right:8cqw;top:15cqh;bottom:7cqh;border-radius:50%/42%;border:1px solid var(--line);box-shadow:inset 0 0 0 1.2cqh #ffffff05,inset 0 0 8cqh #00000055;pointer-events:none;display:grid;place-content:center;text-align:center}
.vc-felt span{font:600 4.4cqh var(--serif);letter-spacing:.5em;color:#e7c98326}
.vc-felt small{display:block;margin-top:1cqh;font-size:1.7cqh;letter-spacing:.2em;color:#e7c98333}
.vc-head{position:absolute;top:0;left:0;right:0;height:8cqh;display:flex;align-items:center;justify-content:space-between;padding:0 2.4cqw;background:linear-gradient(#03100ce6,transparent);z-index:6}
.vc-back{display:inline-flex;align-items:center;gap:.3em;color:var(--muted);text-decoration:none;font-size:max(12px,1.8cqh);letter-spacing:.06em;transition:color .2s}
.vc-back svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.vc-back:hover{color:var(--gold)}.vc-back:hover svg{transform:translateX(-3px)}
.vc-brand{font:600 3.2cqh var(--serif);letter-spacing:.18em;color:var(--gold);text-align:center}
.vc-brand small{display:block;font:500 1.25cqh system-ui;letter-spacing:.32em;color:var(--muted)}
/* 顶栏按钮(10-31 用户: 无边框、统一): 只有字 / 图标, 悬停变金 + 底下一道渐隐金线; 按钮之间一个小点隔开 */
.vc-head .game-header-tools{display:flex;gap:.2cqw;align-items:center}
.vc-head .game-header-tools>button,.vc-head .game-header-tools>*>button{position:relative;padding:.45em .8em;border:0!important;background:none!important;color:var(--muted);font-size:max(12px,1.75cqh);letter-spacing:.08em;border-radius:6px}
.vc-head .game-header-tools>button::after,.vc-head .game-header-tools>*>button::after{content:"";position:absolute;left:30%;right:30%;bottom:.1em;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .2s,left .2s,right .2s}
.vc-head .game-header-tools>button:hover:not(:disabled),.vc-head .game-header-tools>*>button:hover:not(:disabled){color:var(--gold);transform:none}
.vc-head .game-header-tools>button:hover::after,.vc-head .game-header-tools>*>button:hover::after{opacity:1;left:12%;right:12%}
.vc-head .game-header-tools>button+button::before{content:"";position:absolute;left:-.12cqw;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:#e7c98355}
/* 对手座位 */
.vc-seat{position:absolute;z-index:3;display:flex;flex-direction:column;gap:.8cqh}
.vc-seat-top{top:8.5cqh;left:50%;transform:translateX(-50%);align-items:center;width:56cqw}
.vc-seat-left{left:1.5cqw;top:30cqh;width:24cqw;align-items:flex-start}
.vc-seat-right{right:1.5cqw;top:30cqh;width:24cqw;align-items:flex-end}
.vc-plate{cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4cqh .8cqw;padding:.7cqh 1.2cqw;border-radius:1.2cqh;background:#03100cc4;border:1px solid var(--line);backdrop-filter:blur(3px);max-width:100%}
.vc-plate h2{margin:0;font:600 2.2cqh var(--serif);color:var(--gold)}
.vc-count,.vc-info{font-size:1.7cqh;color:var(--muted)}
.vc-info:empty,.vc-count:empty{display:none}
.vc-seat.is-turn .vc-plate{border-color:var(--gold);box-shadow:0 0 2cqh #e7c98355}
.vc-me.is-turn~.vc-status .vc-turn{background:var(--gold);color:#1b1206;font-weight:700;animation:vc-myturn 1.6s ease-in-out infinite} /* 轮到你: 左上那颗「轮到你」亮起来(原来是底栏一道金线) */
@keyframes vc-myturn{50%{box-shadow:0 0 0 .6cqh #e7c98333}}
.vc-seat.is-out{opacity:.45}
.vc-say{margin:0;max-width:22cqw;padding:.8cqh 1.1cqw;border-radius:1.4cqh;background:#f6efdd;color:#28331f;font-size:1.75cqh;box-shadow:0 .6cqh 2cqh #0007;animation:vc-pop .25s ease-out}
@keyframes vc-pop{from{transform:scale(.85);opacity:0}}
.vc-zone{display:flex;flex-wrap:wrap;gap:.5cqh .4cqw;align-items:flex-end}
.vc-zone:empty{display:none}
.vc-seat-right .vc-zone{justify-content:flex-end}
.vc-seat-top .vc-zone{justify-content:center}
.vc-group{display:flex;padding:.35cqh;border-radius:.8cqh;background:#00000038}
.vc-group .vc-card+.vc-card{margin-left:calc(var(--mw)*-.45)}
.vc-deck-totom .vc-group .vc-card+.vc-card,.vc-deck-tusac .vc-group .vc-card+.vc-card{margin-left:calc(var(--mw)*-.2)}
.vc-discards{opacity:.92}
.vc-discards .vc-card+.vc-card{margin-left:calc(var(--mw)*-.55)}
/* 中央: 牌堆 + 出牌 */
.vc-center{position:absolute;left:27cqw;right:27cqw;top:33cqh;height:26cqh;display:flex;align-items:center;justify-content:center;gap:2cqw;z-index:2}
.vc-pile{position:relative;flex:none;width:var(--mw);height:var(--mh)}
.vc-pile-back{position:absolute;inset:0;border-radius:.8cqh;background:var(--back,#7a1e1e);box-shadow:.3cqh .3cqh 0 #00000055,.6cqh .6cqh 0 #00000033}
.vc-pile-n{position:absolute;left:50%;bottom:-2.6cqh;transform:translateX(-50%);font-size:1.6cqh;color:var(--muted);white-space:nowrap}
.vc-table{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.2cqh 1.5cqw;max-width:100%}
.vc-play{display:flex;flex-direction:column;align-items:center;gap:.6cqh}
.vc-play small{font-size:1.5cqh;color:var(--muted)}
.vc-play .vc-cards{display:flex}
.vc-play .vc-card+.vc-card{margin-left:calc(var(--cw)*-.55)}
.vc-play.is-mini .vc-card+.vc-card{margin-left:calc(var(--mw)*-.4)}
.vc-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:1.4cqh 3cqw;border-radius:2cqh;background:#03100ce8;border:1px solid var(--gold);color:var(--gold);font:600 3.4cqh var(--serif);letter-spacing:.12em;white-space:nowrap;z-index:7;animation:vc-pop .3s ease-out}
/* 你 */
.vc-me{position:absolute;left:0;right:0;bottom:2.5cqh;z-index:4;display:flex;flex-direction:column;align-items:center;gap:1cqh;pointer-events:none}
.vc-me>*{pointer-events:auto}
.vc-me{--ch:calc(var(--chb)*.8);--cw:calc(var(--ch)*var(--ar));--mh:calc(var(--mhb)*.8);--mw:calc(var(--mh)*var(--ar))} /* 11-08 用户: 你这边的手牌 + 吃碰牌整体小两成, 桌上和对手的不变 */
/* 11-08 布局(参照常见牌桌): 最上 你的弃牌(桌面靠你这边) → 中间 按钮 → 最下 手牌, 你亮出 / 吃碰的牌接在手牌右边同一行(小一号)。
   .vc-me-zones 用 display:contents 让弃牌 / 吃碰牌直接进 .vc-me 的网格; 手牌重叠按扣掉吃碰牌后的宽度算(kit.js fit) */
.vc-me{display:grid;grid-template-columns:auto auto;justify-content:center;justify-items:center;align-items:end;row-gap:1cqh}
.vc-me-zones{display:contents}
.vc-me-zones>*{pointer-events:auto}
.vc-me .vc-discards{grid-area:1/1/2/3}
.vc-me .vc-actions{grid-area:2/1/3/3}
.vc-me .vc-hand{grid-area:3/1}
.vc-me .vc-melds{grid-area:3/2;margin-left:1.6cqw;max-width:40cqw;flex-wrap:nowrap}
.vc-hand{--ov:0px;display:flex;justify-content:center;padding-top:calc(var(--ch)*.22);max-width:96cqw}
.vc-hand .vc-card+.vc-card{margin-left:var(--ov)}
.vc-hand .vc-card{transition:transform .14s ease-out,box-shadow .14s}
.vc-hand .vc-card:hover{transform:translateY(calc(var(--ch)*-.06))}
.vc-hand .vc-card.is-sel{transform:translateY(calc(var(--ch)*-.2));box-shadow:0 0 0 .35cqh var(--gold),0 1cqh 2cqh #000a}
.vc-hand .vc-card.is-hint{box-shadow:0 0 0 .35cqh #8ee6c4}
.vc-hand .vc-card.is-new{animation:vc-new 1.2s ease-out}
@keyframes vc-new{0%{box-shadow:0 0 0 .5cqh #fff}100%{box-shadow:0 0 0 0 #fff0}}
.vc-hand .vc-card.is-locked{filter:saturate(.6) brightness(.9)}
.vc-status{position:absolute;left:2cqw;top:9cqh;z-index:5;max-width:19cqw;max-height:20.5cqh;overflow-y:auto;scrollbar-width:none} /* 11-03 用户: 放左上, 不挡左边的选手。宽度避开顶部选手(从 22cqw 起), 高度到左边选手(30cqh)之前为止, 字多就在框内滚 */
.vc-turn{display:inline-block;padding:.3cqh 1cqw;border-radius:99px;background:#e7c98322;color:var(--gold);font-size:1.6cqh;letter-spacing:.08em}
.vc-msg{margin:.6cqh 0 0;font-size:1.9cqh;color:var(--ink);text-shadow:0 1px 3px #000}
.vc-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6cqw;max-width:70cqw} /* 11-08: 放进 .vc-me 里, 排在你的吃碰牌和手牌中间(原来浮在手牌上方会压住吃碰牌; 改右下竖排用户不要) */
.vc-actions button{padding:.38em 1.05em;font-size:max(12px,1.6cqh);border-radius:999px}
.vc-actions button:empty{display:none}
.vc-stage .vc-actions .vc-ghost{border-color:transparent;background:none;color:var(--muted)} /* 理牌: 管手牌的小功能, 不抢出牌按钮的眼 */
.vc-stage .vc-actions .vc-ghost:hover:not(:disabled){border-color:transparent;color:var(--gold)}
/* 你的名牌(10-31): 放在左上 .vc-status 里, 和「轮到你 / 提示」合成一块: 第一行 你 + 筹码(积分), 第二行 几张 · 说明, 再下面轮到你 */
.vc-foot{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.8cqw;row-gap:.2cqh;margin-bottom:.9cqh;font-size:1.6cqh;color:var(--muted);text-shadow:0 1px 3px #000}
.vc-foot::after{content:"";order:2;flex-basis:100%}
.vc-foot strong{order:0;color:var(--gold);font:600 2.4cqh var(--serif)}
.vc-score{order:1;font:700 2.1cqh var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.vc-foot .vc-count{order:3}.vc-foot .vc-info{order:4}
.vc-foot .vc-info:not(:empty)::before{content:"· ";opacity:.5}
/* 牌 */
.vc-card{position:relative;flex:none;display:block;width:var(--cw);height:var(--ch);padding:0;border:0!important;border-radius:calc(var(--ch)*.05);background:#fff;box-shadow:0 .4cqh 1cqh #0008;overflow:hidden;cursor:default}
.vc-stage button.vc-card{background:#fff;color:#000;padding:0;cursor:pointer}
.vc-card.is-mini{width:var(--mw);height:var(--mh);box-shadow:0 .2cqh .5cqh #0007}
.vc-card img,.vc-card svg{display:block;width:100%;height:100%;pointer-events:none}
.vc-card.is-back{background:var(--back,#7a1e1e)}
.vc-card.is-back::after{content:"";position:absolute;inset:8%;border-radius:inherit;border:1px solid #f3d99a66;background:repeating-linear-gradient(45deg,#f3d99a14 0 4px,transparent 4px 9px)}
.vc-card.is-down{filter:brightness(.55) saturate(.4)}
.vc-card.is-glow{box-shadow:0 0 0 .3cqh #8ee6c4,0 .4cqh 1cqh #0008}
.vc-deck-totom .vc-card{border-radius:calc(var(--cw)*.12)}
.vc-deck-totom{--back:#b8461f}
.vc-deck-tusac{--back:#1f4f7a}
/* 加载 */
.vc-stage #loading{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#04130ef2;text-align:center}
.vc-stage #loading h2{margin:0;font:600 26px var(--serif);color:var(--gold)}
.vc-stage #loading p{margin:0;color:var(--muted)}
.vc-stage .spinner{width:46px;height:46px;border-radius:50%;border:3px solid #e7c98333;border-top-color:var(--gold);animation:vc-spin 1s linear infinite}
@keyframes vc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vc-stage *{animation:none!important;transition:none!important}}
/* 手机竖屏: 舞台按宽度, 座位收窄 */
@media (orientation:portrait) and (max-width:820px){
  .vc-stage{aspect-ratio:9/16;width:100%}
  html.game-full .vc-stage{aspect-ratio:auto}
  .vc-stage{--chb:12cqh}
  .vc-deck-totom{--chb:17cqh}.vc-deck-tusac{--chb:15cqh}.vc-deck-mahjong{--chb:9cqh}
  .vc-seat-left,.vc-seat-right{width:30cqw;top:24cqh}
  .vc-seat-top{width:90cqw}
  .vc-center{left:6cqw;right:6cqw;top:44cqh;height:16cqh}
  .vc-status{max-width:60cqw;max-height:none;top:auto} /* 竖屏顶部选手占满宽度, 还放下面 */
  .vc-actions{max-width:96cqw}
  .vc-status{bottom:calc(11cqh + var(--ch) * 1.3)}
  .vc-say{max-width:44cqw}
}
/* 11-08 点对手名牌: 看他亮出 / 吃碰的牌和打过的牌(kit.js seatLog) */
.vc-log h3{text-align:left}
.vc-log .vc-zone{justify-content:flex-start}
.vc-log .vc-empty{color:#a9bdb4;font-size:13px}
/* 11-08 3D: 对手亮出 / 吃碰的牌 → 左边面板(左上信息区正下方, 每家一行: 名字 + 牌), 头顶不再放 */
.vc-board{position:absolute;left:0;top:31cqh;z-index:5;width:24cqw;max-height:33cqh;overflow-y:auto;scrollbar-width:none;padding:.4cqh 2cqw;
  --mh:calc(var(--mhb)*.66);--mw:calc(var(--mh)*var(--ar));background:linear-gradient(90deg,#03100cc8,#03100c8a 65%,#03100c00);
  -webkit-mask:linear-gradient(#000 calc(100% - 2cqh),#0000);mask:linear-gradient(#000 calc(100% - 2cqh),#0000)}
.vc-board:empty,.vc-stage:not(.is-3d) .vc-board{display:none}
.vc-board-row{position:relative;padding:1cqh 0 1.1cqh}
.vc-board-row+.vc-board-row::before{content:"";position:absolute;left:0;right:15%;top:0;height:1px;background:linear-gradient(90deg,#e7c98340,#e7c98300)}
.vc-board-row b{display:flex;align-items:center;gap:.5em;margin-bottom:.6cqh;font:600 1.6cqh var(--serif);letter-spacing:.06em;color:var(--muted)}
.vc-board-row b::before{content:"";width:.45em;height:.45em;border-radius:50%;background:#e7c98355}
.vc-board-row.is-turn b{color:var(--gold)}
.vc-board-row.is-turn b::before{background:var(--gold);box-shadow:0 0 .6em var(--gold)}
.vc-board .vc-zone{justify-content:flex-start;gap:.5cqh .3cqw}
.vc-board .vc-group{padding:.25cqh}
.vc-stage.is-3d .vc-seat .vc-melds{display:none}