:root {
  --bg:#0c1812; --felt1:#1e5638; --felt2:#0f3524; --line:#2e5c47;
  --gold:#f0cd7a; --gold2:#c99a3c; --red:#e05555; --ink:#20242b;
  --txt:#eef4ee; --dim:#a9c3b5;
  --teamA:#ffc36b; --teamB:#74c6ff;
  --shadow:0 4px 14px rgba(0,0,0,.45);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body { margin:0; font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:
    radial-gradient(1100px 640px at 50% 26%, var(--felt1), var(--felt2) 62%, var(--bg));
  color:var(--txt); }
button { font-family:inherit; cursor:pointer; }
.btn { border:none; border-radius:11px; padding:10px 22px; font-size:15px; background:linear-gradient(180deg,#37684f,#28503d);
  color:var(--txt); transition:.15s; box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.btn:hover:not(:disabled){ filter:brightness(1.12); }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{ opacity:.38; cursor:default; }
.btn.primary{ background:linear-gradient(160deg,#f6d98a,#d8ab48 55%,#bd8f34); color:#3c2c07; font-weight:800;
  box-shadow:0 3px 10px rgba(216,171,72,.35), inset 0 1px 0 rgba(255,255,255,.5); text-shadow:0 1px 0 rgba(255,255,255,.25); }
.btn.danger{ background:linear-gradient(180deg,#8c3a3a,#6d2b2b); }
.btn.small{ padding:6px 13px; font-size:13px; border-radius:9px; }

/* ---------- 大厅 ---------- */
.wrap{ max-width:520px; margin:0 auto; padding:30px 18px 40px; }
.logo{ text-align:center; margin-bottom:24px; }
.logo h1{ margin:0; font-size:46px; letter-spacing:8px; color:var(--gold);
  text-shadow:0 2px 16px rgba(232,197,106,.4), 0 1px 0 #7a5c1c; }
.logo p{ margin:10px 0 0; color:var(--dim); font-size:13.5px; letter-spacing:1px; }
.panel{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:14px;
  box-shadow:var(--shadow); }
.panel h3{ margin:0 0 13px; font-size:14px; color:var(--gold); font-weight:600; letter-spacing:1px; }
.rowflex{ display:flex; gap:10px; }
input[type=text]{ flex:1; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; color:var(--txt); font-size:16px; outline:none; min-width:0; }
input[type=text]:focus{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(232,197,106,.15); }
label.chk{ display:flex; align-items:center; gap:8px; color:var(--dim); font-size:14px; user-select:none; cursor:pointer; }
.err{ color:#ff9c9c; font-size:13px; min-height:18px; margin-top:10px; }

/* 首页教学入口 */
.tut-entry{ display:flex; align-items:center; justify-content:space-between; width:100%;
  background:linear-gradient(135deg,rgba(240,205,122,.14),rgba(240,205,122,.05));
  border:1px solid rgba(240,205,122,.4); border-radius:14px; padding:14px 16px;
  color:var(--gold); font-size:15px; font-weight:600; margin-bottom:14px; transition:.15s; }
.tut-entry:active{ transform:scale(.985); }
.tut-entry .arr{ opacity:.7; }

/* 教学弹窗 */
.tut-tabs{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.tut-tab{ flex:1; min-width:64px; border:none; border-radius:9px; padding:8px 4px; font-size:12.5px;
  background:rgba(255,255,255,.06); color:var(--dim); }
.tut-tab.on{ background:linear-gradient(160deg,#f0cd7a,#c99a3c); color:#3a2b07; font-weight:700; }
.tut-body{ font-size:13.5px; line-height:1.85; color:#dce8dd; min-height:230px; }
.tut-body h4{ margin:10px 0 6px; color:var(--gold); font-size:14.5px; }
.tut-body b{ color:#fff; }
.tut-body .hl{ color:var(--gold); font-weight:700; }
.tut-body ul{ margin:6px 0; padding-left:18px; }
.tut-body li{ margin:3px 0; }
.tut-body .eg{ display:inline-flex; gap:3px; vertical-align:-6px; margin:0 2px; }
.tut-body .card{ width:26px; height:37px; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.4); }
.tut-body .card .corner{ font-size:8px; padding:1px 2px; }
.tut-body .card .pip{ font-size:12px; }
.ladder{ background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font-size:12.5px; line-height:1.9; color:#cfe0d4; }

/* ---------- 牌桌 ---------- */
#app{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }
header.top{ display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:rgba(5,12,9,.55); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); flex-wrap:wrap; }
header.top .brand{ font-weight:800; color:var(--gold); letter-spacing:2px; }
header.top .code{ font-weight:800; letter-spacing:2px; color:var(--txt); font-size:16px;
  background:rgba(255,255,255,.07); padding:2px 10px; border-radius:8px; }
header.top .spacer{ flex:1; }

/* 队分栏 + 进度条 */
.teambar{ display:flex; align-items:center; gap:12px; justify-content:center; padding:7px 12px 5px;
  font-size:13.5px; background:rgba(5,12,9,.32); }
.teambar .tA,.teambar .tB{ font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.teambar .tA{ color:var(--teamA); } .teambar .tB{ color:var--teamB; color:var(--teamB); }
.teambar b{ font-size:17px; font-variant-numeric:tabular-nums; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dotA{ background:var(--teamA); box-shadow:0 0 6px var(--teamA); }
.dotB{ background:var(--teamB); box-shadow:0 0 6px var(--teamB); }
.scorewrap{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:150px; }
.scorebar{ display:flex; width:100%; height:6px; border-radius:4px; overflow:hidden;
  background:rgba(255,255,255,.09); box-shadow:inset 0 1px 2px rgba(0,0,0,.4); }
.scorebar .sb-a{ background:linear-gradient(90deg,#c8871f,var(--teamA)); transition:width .5s ease; }
.scorebar .sb-b{ background:linear-gradient(90deg,var(--teamB),#2f7cb1); margin-left:auto; transition:width .5s ease; }
.teambar .mid{ color:var(--dim); font-size:11.5px; white-space:nowrap; }

.table{ position:relative; flex:1; min-height:0;
  background:radial-gradient(closest-side at 50% 42%, rgba(255,255,255,.05), transparent 75%); }

/* 座位：胶囊卡 */
.seat{ position:absolute; width:150px; transform:translateX(-50%); text-align:center; pointer-events:none; }
.seatcard{ display:flex; align-items:center; gap:8px; background:rgba(5,14,10,.55);
  border:1px solid rgba(255,255,255,.09); border-radius:999px; padding:4px 12px 4px 5px;
  backdrop-filter:blur(4px); width:max-content; max-width:100%; margin:0 auto;
  box-shadow:0 2px 8px rgba(0,0,0,.35); transition:border-color .2s, box-shadow .2s; }
.seat.active .seatcard{ border-color:var(--gold); box-shadow:0 0 16px rgba(240,205,122,.45); }
.seat.partner .seatcard{ border-color:rgba(127,168,143,.55); }
.seat.tB .seatcard{ border-color:rgba(116,198,255,.35); }
.seat .avatar{ width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(160deg,#2c5a45,#1c3d2e); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:20px; position:relative; }
.seat.active .avatar{ border-color:var(--gold); animation:pulse 1.3s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 4px rgba(240,205,122,.3);} }
.seat .who{ text-align:left; min-width:0; }
.seat .nm{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:76px; }
.seat .cnt{ font-size:10.5px; color:var(--dim); }
.seat .badge{ position:absolute; right:-7px; top:-7px; background:linear-gradient(160deg,#f0cd7a,#c99a3c);
  color:#3a2b07; font-size:10.5px; font-weight:800; border-radius:8px; padding:1px 6px;
  box-shadow:0 1px 4px rgba(0,0,0,.4); }
.seat .zone{ min-height:52px; margin-top:5px; display:flex; flex-direction:column; align-items:center; gap:3px; }

/* 出牌展示 */
.played-cards{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.playtag{ font-size:10.5px; color:var(--gold); background:rgba(0,0,0,.4);
  border:1px solid rgba(240,205,122,.35); padding:1px 9px; border-radius:8px; white-space:nowrap; }
.played-cards-cards{ display:flex; padding-left:12px; }
.playtag.leadtag{ background:linear-gradient(160deg,#f0cd7a,#c99a3c); color:#3a2b07;
  border-color:transparent; font-weight:700; }
.passtag{ color:#c9d6cc; font-size:11.5px; border:1px dashed rgba(255,255,255,.25);
  padding:2px 12px; border-radius:999px; background:rgba(0,0,0,.3); animation:fadeIn .25s; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1;} }

.center-info{ position:absolute; left:50%; top:43%; transform:translate(-50%,-50%);
  text-align:center; pointer-events:none; z-index:2; }
.center-info .trickpts{ font-size:13px; color:var(--gold); text-shadow:0 1px 4px rgba(0,0,0,.6); }
.center-info .trickpts b{ font-size:19px; }
.center-info .turnhint{ font-size:12.5px; color:var(--dim); margin-top:4px; }
.logline{ position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  width:min(94%,720px); text-align:center; font-size:11.5px; color:rgba(157,184,170,.75);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- 扑克牌（角标式）---------- */
.card{ display:inline-flex; flex-direction:column; position:relative;
  width:54px; height:76px; border-radius:7px; overflow:hidden;
  background:linear-gradient(165deg,#ffffff,#f3f2ea);
  border:1px solid #c9c7ba; box-shadow:0 2px 6px rgba(0,0,0,.38);
  color:var(--ink); user-select:none; font-weight:800; line-height:1; }
.card::after{ content:''; position:absolute; inset:2.5px; border:1px solid rgba(0,0,0,.06); border-radius:5px; pointer-events:none; }
.card .corner{ position:absolute; top:3px; left:4px; font-size:12px; line-height:1.05;
  text-align:center; letter-spacing:0; }
.card .pip{ position:absolute; right:6px; bottom:3px; font-size:22px; opacity:.92; }
.card.red{ color:#d33a3a; }
/* 分牌：角标金色标识 */
.card.pt .corner{ color:#b8860b; }
.card.pt.red .corner{ color:#c99a3c; }
.card.joker .corner{ font-size:10px; }
.card.joker .pip{ font-size:17px; right:5px; bottom:4px; }
.card.sel{ transform:translateY(-14px); box-shadow:0 0 0 2px var(--gold), 0 8px 14px rgba(0,0,0,.4); }
.card.mini{ width:30px; height:43px; border-radius:5px; box-shadow:0 1px 4px rgba(0,0,0,.4); margin-left:-13px; }
.card.mini:first-child{ margin-left:0; }
.card.mini .corner{ font-size:8.5px; top:2px; left:3px; }
.card.mini .pip{ font-size:12px; right:3px; bottom:2px; }
.card.mini.pt .corner{ color:#b8860b; }

/* ---------- 我的手牌 ---------- */
.myarea{ padding:2px 10px 10px;
  background:linear-gradient(to top, rgba(4,10,7,.66), rgba(4,10,7,.18) 70%, transparent); }
.actions{ display:flex; justify-content:center; gap:12px; padding:8px 0 10px; align-items:center; }
.actions .btn{ min-width:96px; }
#playBtn{ min-width:132px; padding:11px 26px; font-size:16px; }
.handfan{ display:flex; justify-content:center; padding:16px 6px 8px; min-height:96px;
  flex-wrap:nowrap; overflow-x:auto; overflow-y:visible; scrollbar-width:none; }
.handfan::-webkit-scrollbar{ display:none; }
.handfan .card{ margin-left:-24px; transition:transform .13s; cursor:pointer; flex-shrink:0;
  animation:dealIn .3s backwards; }
.handfan .card:nth-child(-n+8){ animation-delay:.02s; }
@keyframes dealIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.handfan .card:first-child{ margin-left:0; }
@media (hover:hover) and (pointer:fine){
  .handfan .card:hover{ transform:translateY(-8px); }
}
.handfan .card.sel{ transform:translateY(-14px); }
.card, button { touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.btn.ghost{ background:rgba(255,255,255,.07); box-shadow:none; }
.btn.round{ width:42px; height:42px; padding:0; min-width:0; border-radius:50%; font-size:19px; flex-shrink:0; margin-left:4px; }
.card.shakeX{ animation:shakeX .16s 2; }
@keyframes shakeX{ 25%{ transform:translateY(var(--sy,0)) translateX(-4px);} 75%{ transform:translateY(var(--sy,0)) translateX(4px);} }
.seat .avatar{ pointer-events:auto; cursor:pointer; transition:.15s; }
.seat .avatar:hover{ border-color:rgba(240,205,122,.6); }
.seat.hit .seatcard{ animation:hitShake .45s; border-color:var(--red); }
@keyframes hitShake{ 20%{ transform:translate(-4px,1px) rotate(-2deg);} 40%{ transform:translate(4px,-1px) rotate(2deg);} 60%{ transform:translate(-3px,0);} 80%{ transform:translate(3px,0);} }
.flyprop{ position:fixed; z-index:90; font-size:32px; pointer-events:none;
  transition:transform .62s cubic-bezier(.35,-.25,.65,1.15); filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.splat{ position:fixed; z-index:89; font-size:22px; pointer-events:none;
  animation:splatFly .85s ease-out forwards; }
@keyframes splatFly{ from{ opacity:1; transform:translate(0,0) scale(1);} to{ opacity:0; transform:translate(var(--dx),var(--dy)) scale(.55);} }
.propmenu{ position:fixed; z-index:92; display:flex; gap:7px; padding:8px;
  background:rgba(8,17,12,.96); border:1px solid rgba(240,205,122,.35); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); animation:fadeIn .15s; }
.propmenu button{ width:44px; height:44px; font-size:24px; border:none; border-radius:11px;
  background:rgba(255,255,255,.08); transition:.12s; }
.propmenu button:active{ transform:scale(.88); background:rgba(240,205,122,.25); }
.chatpanel{ position:fixed; left:50%; bottom:150px; transform:translateX(-50%); z-index:93;
  width:min(92%,330px); max-height:52vh; overflow:auto;
  background:rgba(8,17,12,.97); border:1px solid var(--line); border-radius:15px; padding:10px;
  box-shadow:0 14px 40px rgba(0,0,0,.55); animation:fadeIn .16s; }
.cp-head{ display:flex; justify-content:space-between; align-items:center; padding:2px 4px 9px;
  color:var(--gold); font-size:13.5px; font-weight:700; }
.cp-head button{ border:none; background:rgba(255,255,255,.08); color:var(--txt);
  border-radius:8px; padding:5px 10px; font-size:12px; }
.ph{ display:block; width:100%; text-align:left; padding:10px 13px; margin-bottom:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.04));
  border:1px solid var(--line); border-radius:10px; color:var(--txt); font-size:13.5px; transition:.12s; }
.ph:active{ transform:scale(.98); border-color:var(--gold); }
.chatbubble{ position:fixed; z-index:91; max-width:min(200px,60vw);
  background:linear-gradient(165deg,#fff,#f2efe4); color:#23272e;
  padding:9px 13px; border-radius:13px; font-size:13px; font-weight:600; line-height:1.5;
  box-shadow:0 5px 16px rgba(0,0,0,.4); animation:bubbleIn .22s; }
.chatbubble::after{ content:''; position:absolute; left:50%; bottom:-7px; margin-left:-7px;
  border:7px solid transparent; border-top-color:#f2efe4; border-bottom:none; }
.chatbubble.bye{ opacity:0; transition:opacity .4s; }
@keyframes bubbleIn{ from{ opacity:0; transform:translateY(8px) scale(.92);} to{ opacity:1; transform:none;} }
.handrow{ display:flex; justify-content:center; position:relative; padding-bottom:7px; }
.handrow .card{ transition:margin-left .28s ease, transform .13s ease; }

/* 手机：手牌行间距收紧 */
@media (max-width:640px){
  .handrow{ padding-bottom:4px; }
  #chatBtn{ width:38px; height:38px; font-size:16px; }
}


/* ---------- 遮罩层 ---------- */
.overlay{ position:absolute; inset:0; background:rgba(6,13,9,.78); backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; z-index:20; overflow:auto; }
.hidden{ display:none !important; }
.sheet{ width:min(94%,560px); background:linear-gradient(180deg,#17301f,#102319);
  border:1px solid rgba(240,205,122,.25); border-radius:18px; padding:22px; margin:20px 0;
  box-shadow:0 18px 50px rgba(0,0,0,.55); }
.sheet h2{ margin:0 0 16px; color:var(--gold); font-size:20px; text-align:center; letter-spacing:1px; }
.seats{ display:grid; grid-template-columns:1fr 26px 1fr 26px 1fr; gap:8px; align-items:center; margin-bottom:14px; }
.seatbox{ background:rgba(255,255,255,.055); border:1.5px dashed rgba(255,255,255,.18);
  border-radius:13px; padding:12px 8px; text-align:center; cursor:pointer; min-height:86px; transition:.15s; }
.seatbox:hover{ border-color:rgba(240,205,122,.5); }
.seatbox.filled{ border-style:solid; cursor:default; background:rgba(255,255,255,.08); }
.seatbox.mine{ border-color:var(--gold); box-shadow:0 0 12px rgba(240,205,122,.2) inset; }
.seatbox .who{ font-size:14px; font-weight:600; }
.seatbox .sub{ font-size:11.5px; color:var(--dim); margin-top:4px; }
.vs{ color:rgba(255,255,255,.3); font-weight:800; font-size:12px; }
.teamsplit{ display:flex; justify-content:space-between; font-size:12px; color:var(--dim); margin:2px 4px 8px; }

/* 结算弹窗 */
.result-banner{ text-align:center; font-size:13px; color:var(--dim); margin-bottom:10px; }
.result-grid{ width:100%; border-collapse:separate; border-spacing:0 5px; margin:6px 0 14px; font-size:14px; }
.result-grid td,.result-grid th{ padding:8px 6px; text-align:center; }
.result-grid th{ color:var(--dim); font-weight:500; font-size:12px; border-bottom:1px solid var(--line); }
.result-grid td{ background:rgba(255,255,255,.045); }
.result-grid tr td:first-child{ border-radius:9px 0 0 9px; font-weight:600; }
.result-grid tr td:last-child{ border-radius:0 9px 9px 0; }
.result-grid tr.winrow td{ background:rgba(240,205,122,.13); color:var(--gold); }
#overDetail{ font-size:12.5px; color:var(--dim); text-align:center; margin-bottom:16px; line-height:1.8; }

.toast{ position:fixed; left:50%; top:13%; transform:translateX(-50%);
  background:rgba(10,5,5,.9); color:#ffd7d7; padding:10px 18px; border-radius:11px;
  z-index:99; font-size:13.5px; border:1px solid #8c3a3a; box-shadow:var(--shadow);
  animation:fadeIn .2s; max-width:86vw; text-align:center; }
.rules-body{ font-size:13.5px; color:#cfe0d4; line-height:1.8; max-height:56vh; overflow:auto; padding-right:6px; }
.rules-body h4{ color:var(--gold); margin:12px 0 4px; }
.rules-body b{ color:#fff; }

/* ==================== 手机适配 ==================== */
@media (max-width:640px){
  .logo h1{ font-size:34px; letter-spacing:5px; }
  .logo p{ font-size:12px; }
  .wrap{ padding:22px 14px 34px; }
  .panel{ padding:15px; margin-bottom:12px; }
  .sheet{ padding:16px 13px; margin:12px 0; }
  .sheet h2{ font-size:17px; }

  /* 首页教学入口 */
  .tut-entry{ padding:12px 14px; font-size:14px; }

  /* 大厅座位：2x2 */
  .seats{ grid-template-columns:1fr 1fr; gap:8px; }
  .vs{ display:none; }
  .seatbox{ min-height:70px; padding:9px 6px; }
  .seatbox .who{ font-size:13px; } .seatbox .sub{ font-size:10.5px; }

  /* 顶栏 */
  header.top{ padding:6px 8px; gap:5px; flex-wrap:nowrap; }
  header.top .brand{ display:none; }
  header.top .code{ font-size:13.5px; padding:2px 8px; }
  header.top .btn.small{ padding:5px 10px; font-size:12px; }
  .btn.small{ padding:6px 11px; font-size:12.5px; }

  /* 队分栏 */
  .teambar{ padding:5px 8px 4px; gap:8px; font-size:12px; }
  .teambar b{ font-size:15px; }
  .scorewrap{ min-width:104px; }
  .teambar .mid{ font-size:10px; }

  /* 对局座位 */
  .seat{ width:118px; }
  .seat .seatcard{ padding:3px 9px 3px 4px; gap:6px; }
  .seat .avatar{ width:31px; height:31px; font-size:16px; border-width:1.5px; }
  .seat .nm{ font-size:11px; max-width:58px; }
  .seat .cnt{ font-size:9.5px; }
  .seat .badge{ font-size:9px; right:-5px; top:-5px; }
  .seat .zone{ min-height:46px; margin-top:4px; }
  .pos-top{ left:50%; top:2%; }
  .pos-bottom{ left:50%; bottom:2px; }
  .pos-left{ left:15%; top:33%; }
  .pos-right{ left:85%; top:33%; }
  .center-info{ top:44%; }
  .center-info .trickpts{ font-size:11.5px; }
  .center-info .trickpts b{ font-size:16px; }
  .center-info .turnhint{ font-size:11px; }
  .logline{ font-size:10.5px; bottom:1px; }

  /* 扑克牌 */
  .card{ width:39px; height:55px; border-radius:5px; }
  .card .corner{ font-size:9.5px; top:2px; left:3px; }
  .card .pip{ font-size:16px; right:4px; bottom:2px; }
  .card.joker .corner{ font-size:8px; }
  .card.joker .pip{ font-size:13px; }
  .card.sel{ transform:translateY(-11px); }
  .card.mini{ width:27px; height:39px; margin-left:-12px; }
  .card.mini:first-child{ margin-left:0; }
  .card.mini .corner{ font-size:8px; top:1.5px; left:2.5px; }
  .card.mini .pip{ font-size:11px; right:2.5px; bottom:1.5px; }
  .playtag{ font-size:9.5px; padding:1px 7px; }

  /* 手牌区 */
  .myarea{ padding:0 4px 5px; }
  .actions{ gap:9px; padding:6px 0 7px; }
  .actions .btn{ min-width:0; padding:8px 16px; font-size:13px; }
  #playBtn{ min-width:112px; padding:9px 20px; font-size:14.5px; }
  .handfan{
    display:block; padding:10px 2px 4px; min-height:auto;
    overflow:visible; scrollbar-width:none;
  }
  .handfan::-webkit-scrollbar{ display:none; }

  /* 遮罩 */
  .overlay{ align-items:flex-start; padding-top:4vh; }
  .rules-body{ max-height:52vh; font-size:12.5px; }
  .result-grid{ font-size:12.5px; }
  .result-grid td,.result-grid th{ padding:6px 4px; }
  .toast{ font-size:12.5px; }
}

/* ---------- 房间列表 ---------- */
.rl-empty{ color:var(--dim); font-size:13px; text-align:center; padding:10px 0; }
.rl-row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:11px;
  padding:9px 12px; margin-bottom:7px; }
.rl-row.mine{ border-color:rgba(240,205,122,.55); background:rgba(240,205,122,.08); }
.rl-info{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.rl-info b{ color:var(--gold); letter-spacing:1px; font-size:14px; }
.rl-names{ color:var(--dim); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.rl-st{ font-size:11px; padding:1px 8px; border-radius:8px; margin-left:6px; vertical-align:1px; }
.rl-st.wait{ background:rgba(110,195,107,.18); color:#8fd98d; }
.rl-st.play{ background:rgba(224,85,85,.16); color:#ff9c9c; }
.rl-full{ color:var(--dim); font-size:12px; }

/* ---------- 移动端视口适配（浏览器地址栏安全）---------- */
#app{ height:100vh; height:100dvh; }
.myarea{ padding-bottom:calc(5px + env(safe-area-inset-bottom, 0px)); }
header.top{ padding-top:max(6px, env(safe-area-inset-top, 0px)); }

/* 牌桌中央装饰环，填补空区 */
.table::before{ content:''; position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:min(64%,300px); height:min(46%,240px); border-radius:50%;
  border:1.5px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 40px rgba(0,0,0,.25), 0 0 60px rgba(0,0,0,.18) inset;
  pointer-events:none; }

/* 级牌玩法选择 */
.lv-modes{ display:flex; gap:6px; }
.lv-mode{ flex:1; border:1.5px solid var(--line); border-radius:11px; padding:8px 4px;
  background:rgba(255,255,255,.05); color:var(--txt); font-size:13px; font-weight:600;
  transition:.15s; line-height:1.4; }
.lv-mode i{ display:block; font-style:normal; font-size:10.5px; color:var(--dim); font-weight:400; margin-top:2px; }
.lv-mode.on{ border-color:var(--gold); background:linear-gradient(160deg,rgba(240,205,122,.18),rgba(240,205,122,.06));
  box-shadow:0 0 10px rgba(240,205,122,.2); }
.lv-mode.on i{ color:rgba(240,205,122,.8); }
.lvl{ font-style:normal; font-size:11px; color:var(--dim);
  background:rgba(255,255,255,.08); border-radius:7px; padding:1px 6px; margin:0 3px; }

/* 级别/局数信息条 */
.midinfo-bar{ text-align:center; font-size:12px; color:var(--dim);
  padding:2px 8px 4px; background:rgba(5,12,9,.32); }
.midinfo-bar b{ color:var(--gold); }