/* 外壳层（登录 / 大厅 / 房间 / 复盘）
   与牌桌共用同一套品牌色板（index.html 的 :root 变量）；本文件只写外壳自己的排版，
   不重定义任何色号 —— 改色只有一处，就是 index.html 的 :root。

   分层约定：
     #stage = 牌桌（display:contents，不改变原有布局）
     #shell = 外壳（绝对定位铺满，z-index 高于牌桌，但低于启动屏 100） */

.shell{
  position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;
  background:radial-gradient(130% 70% at 50% 0%, #17371F 0%, var(--molv) 58%, #0A1C0F 100%);
}
.sh-top{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid rgba(205,173,109,.22);
}
.sh-top .back{
  width:30px;height:30px;flex:0 0 auto;border-radius:8px;border:1px solid rgba(205,173,109,.4);
  background:rgba(13,12,13,.5);color:var(--gu);font-size:15px;line-height:1;
}
.sh-top .ttl{font-size:15px;font-weight:700;letter-spacing:.5px}
.sh-top .sub{font-size:11px;color:var(--gu-ying)}
.sh-top .right{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--gu-an)}
.sh-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px}
.sh-body.center{display:flex;flex-direction:column;justify-content:center}
.sh-foot{flex:0 0 auto;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid rgba(205,173,109,.16)}

/* ── 卡片 ── */
.sh-card{
  padding:14px;border-radius:14px;margin-bottom:12px;
  background:linear-gradient(180deg,#17301F,var(--molv));border:1px solid rgba(205,173,109,.3);
}
.sh-card h3{margin:0 0 8px;font-size:14px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.sh-card h3 .tag2{font-size:9px;font-weight:400;padding:1px 5px;border-radius:3px;border:1px solid rgba(205,173,109,.5);color:var(--jinsha-l)}
.sh-card p{margin:0;font-size:12px;color:var(--gu-ying);line-height:1.6}
.sh-card.tapable{cursor:pointer}
.sh-card.tapable:active{transform:translateY(1px)}
.sh-card.sel{border-color:var(--jinsha-l);box-shadow:0 0 0 1px rgba(235,203,139,.45)}

/* ── 表单 ── */
.sh-field{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;margin-bottom:9px;
  background:rgba(13,12,13,.5);border:1px solid rgba(205,173,109,.26)}
.sh-field label{font-size:12px;color:var(--gu-an);flex:0 0 62px}
.sh-field input{flex:1 1 auto;min-width:0;background:none;border:none;outline:none;color:var(--gu);font-size:14px}
.sh-field input::placeholder{color:#7C877C}
.sh-field.err{border-color:var(--qizhu)}
.sh-hint{font-size:11px;color:var(--gu-ying);line-height:1.6;margin:2px 0 10px}

/* ── 按钮 ── */
.sh-btn{
  width:100%;height:46px;border:none;border-radius:11px;font-size:16px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,var(--qizhu),var(--qizhu-d));
}
.sh-btn:active{transform:translateY(2px)}
.sh-btn[disabled]{filter:grayscale(.7) brightness(.8)}
.sh-btn.ghost{background:none;color:var(--jinsha-l);border:1px solid rgba(205,173,109,.5);font-weight:400;font-size:14px;height:40px}
.sh-btn.zh{background:linear-gradient(180deg,var(--zhuqing-l2),var(--zhuqing))}
.sh-btn.sm{height:36px;font-size:13px;font-weight:400}
/* 一键约定：首次进来最省事的一条路。金色描边区别于「开始游戏」的实心主按钮 */
.tr-all{display:block;width:100%;margin:8px 0 4px;padding:9px 10px;border-radius:10px;
  background:rgba(205,173,109,.10);border:1px dashed rgba(205,173,109,.65);color:var(--jinsha-l);
  font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;text-align:center}
.tr-all i{display:block;font-style:normal;font-size:11px;font-weight:400;color:var(--gu-ying);margin-top:2px}
.tr-all:active{transform:translateY(1px)}
/* 大厅顶部的"我"：头像 + 名字。自己也要有张脸 —— 不然一桌四个头像里只有三个是"人" */
.avt.lg{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover;background:var(--molv);
  box-shadow:0 0 0 1.5px rgba(205,173,109,.55)}
.sh-top{align-items:center;gap:10px}

/* ===== 联机：座位表 =====
   等位期最怕"看着像卡住了"，所以每个位子都要把状态写清楚：
   已就座（绿点）/ 电脑陪打（金点）/ 空位（灰点）/ 掉线（红点 + 位置给你留着）。 */
.ol-seat{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-top:7px;border-radius:10px;
  background:rgba(13,12,13,.5);border:1px solid rgba(205,173,109,.22)}
.ol-seat.me{border-color:rgba(205,173,109,.7);background:rgba(32,26,14,.55)}
.ol-seat.open{border-style:dashed;opacity:.62}
.ol-seat.open .avt{opacity:.35}
.ol-seat .lb{flex:1;min-width:0}
.ol-seat .lb b{display:block;font-size:14px;color:var(--gu);font-weight:600}
.ol-seat .lb i{display:block;font-size:11px;color:var(--gu-ying);font-style:normal;margin-top:2px}
.ol-dot{width:8px;height:8px;border-radius:50%;flex:none}
.ol-dot.on{background:var(--zhuqing_l2);box-shadow:0 0 6px rgba(95,156,66,.7)}
.ol-dot.idle{background:rgba(249,248,246,.22)}
.ol-dot.off{background:var(--qizhu);box-shadow:0 0 6px rgba(211,43,42,.55)}
.ol-code{color:var(--jinsha-l);letter-spacing:.16em;font-size:18px}
.ol-input{width:100%;height:40px;margin-top:8px;padding:0 12px;border-radius:9px;
  background:rgba(13,12,13,.6);border:1px solid rgba(205,173,109,.4);color:var(--gu);font-size:14px}
.ol-input::placeholder{color:var(--gu-ying)}
.ol-input:disabled{opacity:.5}

/* 危险动作上膛态：把按钮染红并改字，让「再点一次」这件事本身看得见（不是静默的二次点） */
/* ===== 新手引导（coach mark）=====
   一个 div 撑出"挖洞"效果：巨大 box-shadow 铺满全屏暗色，中间那圈是唯一亮的地方。
   比"四块遮罩拼一框"少一半 DOM，也不会在圆角处露缝。 */
.coach{position:fixed;inset:0;z-index:200}
.coach-hole{position:absolute;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(6,12,8,.78),0 0 0 1.5px rgba(205,173,109,.85) inset}
.coach-hole.center{left:50%;top:46%;width:1px;height:1px;border-radius:0}
.coach-card{position:absolute;left:14px;right:14px;padding:13px 14px 11px;border-radius:12px;
  background:rgba(14,20,15,.97);border:1px solid rgba(205,173,109,.45);box-shadow:0 10px 30px rgba(0,0,0,.55)}
.coach-card.below{bottom:18%}
.coach-card.above{top:12%}
.coach-card.center{top:34%}
.coach-step{font-size:10px;color:var(--jinsha);letter-spacing:.1em;margin-bottom:4px}
.coach-card h3{margin:0 0 6px;font-size:16px;color:var(--gu)}
.coach-card p{margin:0;font-size:12.5px;line-height:1.72;color:var(--gu-an)}
.coach-btns{display:flex;gap:9px;justify-content:flex-end;margin-top:12px}

/* ===== 15. 横屏姿态 =====
   手机上竖屏是主场（碎片时间单手搓），但**横过来就该给更宽的视野**（八戒四川麻将就是这么做的）。
   这里只调"纵向被压扁后需要补偿"的东西：间距、牌高、浮层位置。

   ⚠ 不要动牌桌的网格列宽（.seat-left/.seat-right）。试过把侧座从 66px 加宽到 96px，
   结果中央区被它的内容宽度顶开，整页横向溢出 24px —— 竖屏全绿的布局，横屏一改列宽就破。
   横屏的收益在"视线更平"，不在"侧座更宽"。 */
@media (orientation: landscape) and (max-height: 560px) {
  /* 横屏真正的收益是"屏宽全部归牌桌"。桌面用的 max-width:560 在手机横屏上会白扔掉
     三分之一屏宽（844 宽只画 560，左右各留 142 死黑）。这里只放宽容器 —— 网格是
     66px 1fr 66px，多出来的宽度全被中央区 1fr 吃掉，侧座列宽一个像素都没动。 */
  :root{--app-max:100%}
  .topbar{padding-top:6px}
  .hand{min-height:52px}
  .hand .tile{height:52px}
  .turnclock{top:60%}
  .wpanel{top:38px;width:300px}
  .coach-card.below{bottom:6%}
  .coach-card.above{top:4%}
  .coach-card.center{top:22%}
  .coach-card{padding:10px 12px 9px}
  .coach-card p{font-size:12px;line-height:1.6}
}

/* 平板横屏：高度够（不会被压扁），但宽度富余得离谱 —— 1024 宽只画 560 会留掉 45%。
   只放宽容器到 720，不碰网格列宽；纵向不做补偿（它不缺高度）。 */
/* 大厅主按钮：这一屏只能有一个最显眼的东西。它是绝大多数人唯一会点的那个。 */
.sh-cta{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:100%; margin:2px 0 12px; padding:20px 14px; border-radius:16px; cursor:pointer;
  background:linear-gradient(180deg,var(--qizhu),var(--qizhu-d));
  border:1px solid rgba(212,175,55,.5);
  box-shadow:0 8px 22px rgba(139,26,26,.34), inset 0 1px 0 rgba(255,255,255,.16);
}
.sh-cta:active{transform:translateY(1px);filter:brightness(1.06)}
.sh-cta .cta-big{
  font-size:26px; font-weight:800; letter-spacing:.22em; color:#fff; text-indent:.22em;
  text-shadow:0 2px 5px rgba(0,0,0,.42);
}
.sh-cta .cta-sub{font-size:11.5px;color:rgba(255,255,255,.82);line-height:1.4}

@media (orientation: landscape) and (min-height:561px) and (max-height:900px) {
  :root{--app-max:720px}
}

/* ===== 16. 口径确认卡 =====
   桌规不能砍（这是钱能说清出处的根），但可以少花按钮：六次选择合成一次确认。
   所以这张卡的重点不是"选"，是"看清" —— 每一条本城默认都原样摆出来，附口径指纹。 */
.cal-mask{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(6,18,10,.72); backdrop-filter:blur(2px);
}
.cal-card{
  width:100%; max-width:360px; max-height:86vh; overflow:auto;
  background:linear-gradient(180deg,#17371F,#0E2614);
  border:1px solid rgba(212,175,55,.24); border-radius:16px; padding:16px 16px 14px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.cal-h h3{margin:0;font-size:17px;color:var(--gu)}
.cal-sub{margin-top:4px;font-size:11.5px;color:var(--gu-ying);line-height:1.55}
.cal-list{margin:12px 0 10px;display:flex;flex-direction:column;gap:1px}
.cal-row{
  display:flex; align-items:baseline; gap:10px; padding:7px 9px; border-radius:8px;
  background:rgba(255,255,255,.035);
}
.cal-row .q{flex:1 1 auto;font-size:12px;color:var(--gu-an);line-height:1.45}
.cal-row .a{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--jinsha-l)}
.cal-row.sp .q{opacity:.7}
.cal-fp{font-size:10.5px;color:var(--gu-ying);line-height:1.6;margin-bottom:12px}
.cal-fp b{color:var(--jinsha-l);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cal-btns{display:flex;gap:9px}
.cal-btns .sh-btn{flex:1}
.cal-btns .cal-ok{flex:1.6}
.cal-note{margin-top:9px;font-size:10.5px;color:var(--gu-ying);text-align:center;line-height:1.5}

/* 没约到的那一条：被人点了「开始」才闪，把"为什么没反应"变成"在这儿呢" */
.tr-item.flash{animation:trflash .55s ease-in-out 3}
@keyframes trflash{
  0%,100%{box-shadow:0 0 0 0 rgba(205,173,109,0)}
  50%{box-shadow:0 0 0 3px rgba(205,173,109,.45)}
}

/* 中央区不许被内容顶开：它是 1fr 的网格项，默认 min-width:auto 会退让给内容宽度 ——
   文案一长（或横屏列宽一改），整页就横向溢出。这条护栏是拿 24px 溢出换来的。 */
.center{min-width:0}
.seat{min-width:0}
.sh-btn.danger{background:linear-gradient(180deg,var(--qizhu),var(--qizhu-d));color:#fff;border-color:transparent;font-weight:600}
.sh-row{display:flex;gap:9px}

/* ── 大厅：模式瓦片 ── */
.sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sh-tile{
  position:relative;padding:12px;border-radius:13px;min-height:88px;text-align:left;
  background:linear-gradient(160deg,#1D3D26,var(--molv));border:1px solid rgba(205,173,109,.28);color:var(--gu);
}
.sh-tile:active{transform:translateY(1px)}
/* 入口图标盘：**金沙圆盘 + 一枚矢量图标**（图标在 art/icons.js，这里只管底盘）。
   曾经这里是「金沙描边圆章 + 一个汉字」（联/房/回/设）—— 那是"用文字顶替图形"，
   四个入口于是长得像四个标签。现在圆盘里是一枚真图标：房是门、复盘是胶片、设置是齿轮。 */
.plaque{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(205,173,109,.5);background:rgba(13,12,13,.34);
  color:var(--jinsha-l);
}
.sh-tile.wide .plaque{width:40px;height:40px}
.sh-tile .nm{display:block;margin-top:6px;font-size:14px;font-weight:700}
.sh-tile .ds{display:block;margin-top:2px;font-size:11px;color:var(--gu-ying);line-height:1.45}
.sh-tile.wide{grid-column:1 / -1;min-height:64px;display:flex;align-items:center;gap:11px}
.sh-tile.wide .nm{margin-top:0}
.sh-tile.lock{filter:saturate(.4) brightness(.85)}

/* ── 房间：四个座位 ── */
.seat-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.slot{
  padding:11px;border-radius:12px;min-height:84px;
  background:rgba(13,12,13,.42);border:1px solid rgba(205,173,109,.22);
}
.slot.me{border-color:var(--jinsha);background:rgba(205,173,109,.10)}
.slot.empty{border-style:dashed;color:var(--gu-ying)}
.slot .who{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700}
.slot .meta{margin-top:5px;font-size:11px;color:var(--gu-ying);line-height:1.5}
.slot .tag-mini{font-size:9px;padding:1px 4px;border-radius:3px;border:1px solid rgba(205,173,109,.5);color:var(--jinsha-l)}
.slot .tag-mini.ready{background:var(--zhuqing);border-color:transparent;color:#fff}
.roomno{font-size:26px;font-weight:700;letter-spacing:6px;color:var(--jinsha-l);text-align:center;margin:2px 0 10px}

/* ── 复盘：播放条 ── */
.rp-list{display:flex;flex-direction:column;gap:9px}
.rp-item{display:flex;align-items:center;gap:10px;padding:11px;border-radius:12px;
  background:rgba(13,12,13,.42);border:1px solid rgba(205,173,109,.22)}
.rp-item .big{font-size:18px;font-weight:700;min-width:62px}
.rp-item .mid{flex:1 1 auto;min-width:0;font-size:12px;color:var(--gu-an)}
.rp-item .mid i{display:block;font-style:normal;font-size:11px;color:var(--gu-ying);margin-top:2px}
/* 复盘形态：牌桌要看得见（那正是被回放的东西），所以外壳整层"让开"——
   背景透明、不吃点击，只把底部那条播放条留成可交互的实体。 */
.shell.rp{background:none;pointer-events:none;justify-content:flex-end}
/* 播放条既然是浮的，就会压住牌桌底部的「我的牌河 + 手牌」—— 而手牌正是复盘里
   最该看清的东西（少了它，复盘等于只能看别人打牌）。让牌桌底部把这条的高度让出来。
   长度由 scene-replay 实测写入（含安全区，所以这里直接覆盖 .app 的 padding-bottom，
   不再叠加一次 env(safe-area-inset-bottom)）。 */
.app.rp-open{padding-bottom:var(--rp-bar-h,88px)}
.rp-bar{
  pointer-events:auto;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,28,15,.72),rgba(10,28,15,.96));
  border-top:1px solid rgba(205,173,109,.35);backdrop-filter:blur(3px);
}
.rp-line{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.rp-bar button{width:50px;height:38px;border-radius:9px;border:1px solid rgba(205,173,109,.4);
  background:rgba(13,12,13,.6);color:var(--gu);font-size:14px;flex:0 0 auto}
.rp-bar button.main{width:62px;background:linear-gradient(180deg,var(--qizhu),var(--qizhu-d));border:none;color:#fff}
/* 上一手 / 下一手 用文字而不是两个一摸一样的 ▶：单步和播放混在一排，是最常点错的一处 */
.rp-bar button[data-do="prev"],.rp-bar button[data-do="next"]{width:56px;font-size:12px}
.rp-bar .step{flex:1 1 auto;min-width:0;text-align:center;font-size:11px;color:var(--gu-an);line-height:1.4}
.rp-bar .step b{color:var(--jinsha-l);font-size:15px}
.rp-bar .rp-label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gu-ying)}
.rp-bar input[type=range]{width:100%;accent-color:var(--jinsha)}


/* ── 战绩条 ── */
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stat3 div{padding:9px 4px;border-radius:11px;background:rgba(13,12,13,.42);border:1px solid rgba(205,173,109,.2)}
.stat3 b{display:block;font-size:19px;color:var(--jinsha-l)}
.stat3 span{font-size:11px;color:var(--gu-ying)}

/* ── 设置开关行 ── */
.sw-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(223,218,207,.12)}
.sw-row:first-of-type{border-top:none}
.sw-row .lb{flex:1 1 auto;font-size:13px}
.sw-row .lb i{display:block;font-style:normal;font-size:11px;color:var(--gu-ying);margin-top:2px}
.sw{width:46px;height:26px;border-radius:999px;border:1px solid rgba(205,173,109,.4);background:rgba(13,12,13,.6);position:relative;flex:0 0 auto}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--gu-ying);transition:transform .16s ease}
.sw.on{background:rgba(95,156,66,.45);border-color:var(--zhuqing-l2)}
.sw.on::after{transform:translateX(20px);background:var(--gu)}
.pick-btns{display:flex;gap:6px}
.pick-btns button{padding:5px 10px;border-radius:8px;font-size:12px;color:var(--gu-an);
  background:rgba(13,12,13,.5);border:1px solid rgba(205,173,109,.3)}
.pick-btns button.on{background:rgba(205,173,109,.22);border-color:var(--jinsha-l);color:var(--gu)}
.empty-tip{text-align:center;font-size:12px;color:var(--gu-ying);padding:26px 10px;line-height:1.8}

/* ── 桌规：开牌前说清楚 ──────────────────────────────────
   存疑项未点选时整条描红（.todo），"未约定"三个字压在每一条下面 ——
   不点就不算约定，系统不会替玩家挑一个默认值。                     */
.tr-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.tr-item{padding:10px 12px;border-radius:10px;border:1px solid rgba(205,173,109,.28);background:rgba(13,12,13,.35)}
.tr-item.todo{border-color:rgba(198,86,74,.55)}
.tr-q{font-size:14px;color:var(--gu);font-weight:600}
.tr-q span{display:block;font-weight:400;font-size:12px;color:var(--gu-an);margin-top:2px}
.tr-opts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.tr-opt{flex:1 1 46%;min-width:118px;text-align:left;padding:8px 10px;border-radius:8px;
  border:1px solid rgba(205,173,109,.3);background:rgba(13,12,13,.5);color:var(--gu-an);font-size:13px}
.tr-opt b{display:block;color:var(--gu);font-size:13px}
.tr-opt i,.tr-sp i{display:block;font-style:normal;font-size:11px;opacity:.75;margin-top:2px}
.tr-opt.on{border-color:var(--jinsha);background:rgba(205,173,109,.18);color:var(--gu)}
.tr-opt.on b{color:var(--jinsha-l)}
.tr-flag{margin-top:6px;font-size:11px;color:var(--jinsha)}
.tr-item.todo .tr-flag{color:#c6564a}
.tr-fp{margin-top:10px;font-size:12px;color:var(--gu-ying)}
.tr-fp.warn{color:#c6564a}
.tr-fp b{color:var(--jinsha-l);font-family:ui-monospace,Menlo,monospace}
.tr-sub{margin-top:12px;font-size:12px;color:var(--gu-ying)}
.tr-specials{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.tr-sp{flex:1 1 46%;min-width:118px;text-align:left;padding:7px 10px;border-radius:8px;
  border:1px solid rgba(205,173,109,.25);background:rgba(13,12,13,.45);color:var(--gu-an);font-size:12px}
.tr-sp b{display:block;color:var(--gu);font-size:12px}
.tr-sp.on{border-color:var(--jinsha);background:rgba(205,173,109,.16)}
.tr-unsup{margin-top:8px;font-size:11px;color:var(--gu-ying);opacity:.7}

/* ===== 外壳图形层 =====
   本文件只负责"图标摆在哪、多大"；图标长什么样在 web/art/icons.js（一处定义）。
   与牌桌层同一份 .hasic / .ic / .plaque 约定，所以两层的按钮长得是一套东西。 */

/* 小号图标盘：座位槽那种一行里塞得下的地方 */
.plaque.sm{width:26px;height:26px;border-radius:8px}
.slot{text-align:left;display:flex;flex-direction:column;gap:0}

/* 顶栏返回键：以前是「←」字符 —— 不同字体的箭头粗细与基线都不一样，图标是画出来的 */
.sh-top .back{display:flex;align-items:center;justify-content:center;padding:0}
.sh-top .ttl.hasic{display:flex}

/* 登录/注册字段：左侧一枚图标，右边才是标签与输入框 */
.sh-field label{display:inline-flex;align-items:center;gap:4px;color:var(--gu-an)}
.sh-field label .ic{color:var(--jinsha-l);opacity:.9}

/* 设置行标题也带图标：一屏开关里，"这行是管什么的"第一眼就要分得出来 */
.sw-row .lb.hasic{align-items:flex-start}
.sw-row .lb .ic{color:var(--jinsha-l);opacity:.85;margin-top:1px}

/* 复盘播放条：上一手/下一手/播放/暂停/关闭全部换成图标。
   注意一件事：**单步和播放必须长得明显不一样**（条形+三角 vs 纯三角），
   否则一排按钮里最容易点错的就是这两颗 —— 这是当初写成文字的原因，现在由图形本身解决。 */
.rp-bar button{display:flex;align-items:center;justify-content:center}
.rp-bar button[data-do="prev"],.rp-bar button[data-do="next"]{width:50px;font-size:12px}

/* 桌规卡片：一键约定、每条选项的图标位。
   选项前那枚「圈 / 对勾」是这一屏最要紧的图形：选中与没选中一眼可辨，
   不必去读下面那行"已约定 / 未约定"的小字。 */
.tr-all{display:flex;flex-direction:column;align-items:center;gap:2px}
.tr-all .ic{color:var(--jinsha-l)}
.tr-opt,.tr-sp{display:flex;align-items:flex-start;gap:6px;text-align:left}
.tr-opt .tx,.tr-sp .tx{min-width:0;flex:1 1 auto}
.tr-opt .ic,.tr-sp .ic{color:var(--jinsha-l);opacity:.8;margin-top:1px}
.tr-opt.on .ic,.tr-sp.on .ic{opacity:1}
.tr-opt b,.tr-sp b{margin-top:0}

/* 登录页品牌图：位图（assets/icon）走 art 接入层，尺寸与圆角在这里 */
.brand-lg{width:76px;height:76px;border-radius:18px;box-shadow:0 0 0 1px rgba(205,173,109,.5)}

/* 新手引导与口径卡：按钮同样带图标 */
.coach-btns .sh-btn{gap:6px}
.cal-btns .sh-btn{gap:6px}
.empty-tip .ic,.sh-hint .ic{vertical-align:-3px;color:var(--jinsha-l);opacity:.85}

/* 战绩条：三格的数字上方各一枚图标 */
.stat3 .ic{color:var(--jinsha-l);opacity:.85;margin-bottom:2px}
.stat3 div{display:flex;flex-direction:column;align-items:center}

/* 顶栏拥挤时**先挤重复信息，不许把按钮挤成两行**。
   实测：390 宽、昵称较长时，「设置 / 退出」被压成「设/置」「退/出」两行 ——
   图标 + 文字并排的按钮一旦折行，看起来就像两个坏掉的方块。
   所以：按钮一律 nowrap 且不许收缩，昵称与"当前城市"走省略号。 */
.sh-btn{white-space:nowrap}
.sh-top .right{flex-wrap:nowrap;min-width:0}
.sh-top .right > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-top .right button{flex:0 0 auto}
.sh-top > div{min-width:0}
.sh-top .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 记牌器行首那一门：不是第 10 张牌，是这一行的**门类标签**（真牌面 + 金环 + 多一格间距），
   否则整行 10 个格子会被读成"这一门有 10 张牌"。 */
.tchip.ws-chip{margin-right:3px;box-shadow:0 0 0 1px rgba(205,173,109,.5)}

/* 邀请一行：图标 + 说明 + 右侧复制键，整行是"顺便提醒"，不该抢走房间号的视觉重心 */
.ol-invite{
  display:flex;align-items:center;gap:6px;margin-top:10px;padding:7px 9px;border-radius:9px;
  background:rgba(13,12,13,.35);border:1px dashed rgba(205,173,109,.35);
  font-size:12px;color:var(--gu-an);
}
.ol-invite .tx{flex:1 1 auto;min-width:0}
.ol-invite .ic{color:var(--jinsha-l);flex:0 0 auto}

/* ── 桌上说话 ──
   快捷语是横排可换行的胶囊，表情是大号方块（手指点得中），
   喇叭那行是"输入框 + 喊"—— 输入框要能撑满剩余宽度，不然拇指总点在空处。 */
.say-lines{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.say-emojis{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.say-emojis .say-emo{width:44px;padding:0;font-size:20px;line-height:1}
.say-input-row{display:flex;gap:6px;margin-top:10px;align-items:center}
.say-input{
  flex:1 1 auto;min-width:0;height:34px;padding:0 10px;border-radius:8px;font-size:13px;
  background:rgba(13,12,13,.55);border:1px solid rgba(205,173,109,.35);color:var(--gu);
}
.say-input:disabled{opacity:.45}
.say-input::placeholder{color:var(--gu-ying)}

/* ── 榜单 / 赛事排名 / 积分流水行 ──
   这几行的共同点：左边是名次或名目，右边是一个带正负的数字。
   数字的颜色不红不绿（那是行情的用法，放在棋牌里会被读错意思），
   一律用**金沙金表示进、骨影灰表示出** —— 与品牌色板一致，也避开涨红跌绿的歧义。 */
.rk-row{
  display:flex;align-items:center;gap:9px;padding:9px 11px;margin-bottom:6px;
  border-radius:10px;background:rgba(13,12,13,.35);border:1px solid rgba(205,173,109,.14);
}
.rk-row.me{border-color:rgba(235,203,139,.5);background:rgba(205,173,109,.1)}
.rk-no{
  flex:0 0 auto;width:22px;height:22px;border-radius:6px;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  background:rgba(205,173,109,.16);color:var(--jinsha-l);
}
.rk-nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.rk-mt{flex:0 0 auto;font-size:11px;color:var(--gu-ying)}
.rk-sc{flex:0 0 auto;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--jinsha-l)}
.rk-sc.up{color:var(--jinsha-l)}
.rk-sc.down{color:var(--gu-ying)}

/* 说明小字：规则的"为什么"写在正文下面，不挤占标题 */
.sh-note{display:block;margin-top:5px;font-size:11px;color:var(--gu-ying);line-height:1.55}
.sh-body > h3{margin:14px 0 8px;font-size:13px;font-weight:700;color:var(--gu-an);letter-spacing:.5px}

/* ── 我的（账号/实名/客服/法务公示） ───────────────────────────── */
.me-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.me-form input{
  padding:10px 12px;border-radius:10px;font-size:14px;color:var(--gu-an);
  background:rgba(13,12,13,.4);border:1px solid rgba(205,173,109,.18);outline:none;
}
.me-form input:focus{border-color:rgba(235,203,139,.55)}
.me-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.me-danger{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(205,173,109,.18)}
.me-danger .sh-btn.danger{border-color:#b4453c;color:#e08a80}
.me-doc{max-height:52vh;overflow-y:auto;margin-top:8px;padding-right:6px}
.me-doc h3{margin:12px 0 6px;font-size:14px;color:var(--jinsha-l)}
.me-doc h4{margin:10px 0 4px;font-size:13px;color:var(--gu-an)}
.me-doc p{margin:4px 0;font-size:12.5px;line-height:1.7;color:var(--gu-an)}
.me-doc p.li{padding-left:10px}
.sh-err{color:#e08a80;font-size:13px}