/* 棋牌小馆 · QQ 游戏式排版 v5
   大厅：搜索 + 分类 tab + banner + 三列宫格 + 底部导航
   牌桌：顶栏浮动 / 座位牌位化 / 我的手牌加大重叠 / 底部操作条常驻
   —— 只改外观与排版，不改任何 class 名与游戏逻辑 */
:root{
  --bg0:#070512; --bg1:#150a26; --panel:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.2);
  --gold:#ffd166; --gold2:#f0a93a; --pink:#ff3d8b; --violet:#8b5cf6;
  --text:#f4eeff; --dim:#a395c2; --red:#ff5a6a;
  --felt1:#12724c; --felt2:#07331f;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  font:14px/1.6 -apple-system,"PingFang SC","Segoe UI","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(900px 460px at 84% -12%, rgba(255,61,139,.18), transparent 60%),
    radial-gradient(780px 420px at 6% 4%, rgba(139,92,246,.18), transparent 62%),
    linear-gradient(180deg,var(--bg1),var(--bg0) 64%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold);text-decoration:none}
b{font-weight:800}

/* =================================================================
   一、牌桌页（games/*.html）
   ================================================================= */
.topbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:10px 12px;
  position:sticky;top:0;z-index:9;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(18,9,32,.96), rgba(10,6,20,.78));
  backdrop-filter:blur(14px);
}
.topbar>*{flex:0 0 auto;min-width:0}
.topbar a{
  display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:#d9cff0;
  background:rgba(255,255,255,.07);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px 5px 8px;white-space:nowrap;
}
.topbar h1{
  font-size:16px;margin:0;font-weight:800;letter-spacing:.5px;white-space:nowrap;
  background:linear-gradient(92deg,#fff,var(--gold) 72%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.topbar .spacer{flex:1 0 0;min-width:0}
.topbar label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);white-space:nowrap}
.topbar .tag{
  font-size:11.5px;color:#cfc3e6;border:1px solid var(--line);
  background:rgba(255,255,255,.05);border-radius:999px;padding:3px 10px;white-space:nowrap;
}
.topbar .tag:has(+ select){display:none}
.topbar select{
  background:rgba(10,6,20,.8);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:5px 8px;font-size:12.5px;max-width:50vw;
}

.app{
  max-width:760px;margin:0 auto;padding:10px 12px 26px;
  display:flex;flex-direction:column;
}

/* ---- 牌桌 ---- */
.table{
  position:relative;border-radius:22px;padding:12px 11px 14px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(255,255,255,.13), transparent 56%),
    radial-gradient(ellipse at 50% 42%, var(--felt1), var(--felt2) 74%);
  border:1px solid rgba(255,209,102,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -26px 54px rgba(0,0,0,.5),
    0 16px 40px rgba(0,0,0,.45);
}
.table::after{
  content:"";position:absolute;inset:7px;border-radius:16px;pointer-events:none;
  border:1px solid rgba(255,209,102,.14);
}

/* ---- 座位（牌位） ---- */
.seat{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px 9px;padding:7px 9px;
  border-radius:12px;position:relative;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.18));
  transition:.18s;
}
.seat+.seat{margin-top:6px}
.seat::before{
  content:"";width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 34%, #6a5b92, #372a55 70%),
    linear-gradient(145deg,#4b3f6b,#241a3a);
  border:2px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.24), 0 2px 8px rgba(0,0,0,.4);
}
.seat.active{
  border-color:rgba(255,209,102,.8);
  background:linear-gradient(100deg, rgba(255,209,102,.18), rgba(255,61,139,.12));
  box-shadow:0 0 0 1px rgba(255,209,102,.32), 0 6px 20px rgba(255,180,60,.18);
}
.seat.active::before{
  border-color:var(--gold);
  background:radial-gradient(circle at 50% 34%,#ffe6a6,#e0912a 72%);
  box-shadow:0 0 14px rgba(255,209,102,.8);
}
.seat .name{font-size:12px;color:var(--dim);flex:1 1 88px;min-width:0;line-height:1.35}
.seat .name b{color:#fff;font-size:13.5px;letter-spacing:.2px}
.seat .score{
  flex:0 0 auto;margin-left:auto;white-space:nowrap;text-align:right;
  font-variant-numeric:tabular-nums;font-weight:800;font-size:13.5px;line-height:1.3;
  color:var(--gold);text-shadow:0 0 14px rgba(255,209,102,.32);
}

/* ---- 手牌（QQ 式轻微重叠） ---- */
.hand{display:flex;flex-wrap:wrap;gap:0;min-height:0;align-items:center}
.hand>.card{margin-right:-11px}
.hand>.card:last-child{margin-right:0}
.seat .hand{min-width:0}
.seat:has(> .name){flex-wrap:wrap}
.seat:has(> .name) > .name{order:1}
.seat:has(> .name) > .score{order:2}
.seat:has(> .name) > :not(.name):not(.score){
  order:3;flex:1 1 auto !important;min-width:0;
}

.card{
  position:relative;
  width:42px;height:58px;border-radius:8px;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:linear-gradient(160deg,#ffffff,#f5f0ff 68%,#e8dff8);
  color:#160e22;font-weight:800;user-select:none;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 5px 12px rgba(0,0,0,.4), inset 0 1px 0 #fff;
  transition:transform .12s, box-shadow .12s, margin .12s;
}
.card .r{font-size:17px;line-height:1;letter-spacing:-.5px}
.card .s{font-size:14px;line-height:1;opacity:.95}
.card.red{color:#e11d48}
.card:hover{transform:translateY(-5px);z-index:2}
.card.picked{
  outline:2px solid var(--gold);transform:translateY(-11px);z-index:3;
  box-shadow:0 12px 24px rgba(255,209,102,.38), 0 0 0 3px rgba(255,209,102,.16);
}
.card.dim{filter:grayscale(.6) brightness(.7)}
.card.small{width:31px;height:43px;border-radius:7px}
.card.small .r{font-size:13.5px}.card.small .s{font-size:11.5px}
.card.back{
  border:1px solid rgba(255,209,102,.5);
  background:
    radial-gradient(circle at 50% 46%, rgba(255,209,102,.22), transparent 46%),
    repeating-linear-gradient(45deg,#2d2058 0 4px,#1b1238 4px 8px);
  box-shadow:0 5px 12px rgba(0,0,0,.44), inset 0 0 0 1px rgba(255,255,255,.07),
             inset 0 0 18px rgba(139,92,246,.3);
}
.card.back::after{
  content:"";position:absolute;inset:4px;border-radius:4px;pointer-events:none;
  border:1px solid rgba(255,209,102,.34);
  background:radial-gradient(circle at 50% 50%, rgba(255,209,102,.22), transparent 70%);
}
.card.mj{
  width:36px;height:50px;border-radius:7px;font-size:14px;color:#2a1a3a;font-weight:800;
  background:linear-gradient(165deg,#fffdf6,#f2e9d3 74%,#e5d7b4);
  border:1px solid #d9c79a;
  box-shadow:0 3px 0 #cbb68b, 0 5px 11px rgba(0,0,0,.34), inset 0 1px 0 #fff;
}

/* 麻将牌不重叠（要看完整牌面） */
.hand>.card.mj{margin-right:1px}

/* 我的手牌：加大一号，贴牌桌底部 */
#myhand>.card,#heroSeat .hand>.card{width:48px;height:66px;border-radius:9px}
#myhand>.card .r,#heroSeat .hand>.card .r{font-size:19px}
#myhand>.card .s,#heroSeat .hand>.card .s{font-size:15px}
#myhand>.card{margin-right:-13px}
#myhand,#heroSeat{margin-top:8px}

/* ---- 中央区 ---- */
.center{text-align:center;color:#bdb0d8;font-size:12px;letter-spacing:.3px;margin:8px 0 0}
.pot{
  font-size:23px;font-weight:900;letter-spacing:.5px;
  background:linear-gradient(92deg,#fff6d2,var(--gold) 58%,var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 20px rgba(255,209,102,.28);
}
.board{display:flex;gap:6px;justify-content:center;align-items:center;margin:10px 0;flex-wrap:wrap}
.board .card{width:40px;height:56px}
.board .slot,.board .empty{
  width:40px;height:56px;border-radius:8px;border:1px dashed rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
}
.board .empty:not(:empty){
  width:auto;height:auto;min-height:32px;max-width:100%;padding:6px 12px;
  border-radius:11px;background:rgba(0,0,0,.3);
  color:#cbbfe6;font-size:12.5px;line-height:1.4;
}
.board .who{color:var(--dim);font-size:12px}

/* ---- 底部操作条（常驻） ---- */
.controls{
  position:sticky;bottom:0;z-index:7;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
  margin:8px -4px 0;padding:10px 4px 12px;
  background:linear-gradient(180deg, rgba(7,5,18,0) 0%, rgba(7,5,18,.9) 42%, rgba(7,5,18,.98) 100%);
  backdrop-filter:blur(6px);
}
.btn{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:800;letter-spacing:.2px;
  padding:10px 18px;border-radius:999px;color:#eee6ff;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  box-shadow:0 6px 16px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.22);
  transition:.14s;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.34)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  color:#3c2404;border-color:#ffe9a8;
  background:linear-gradient(180deg,#ffe08a,#f6a91d 72%,#e8930c);
  box-shadow:0 10px 22px rgba(246,169,29,.4), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
.btn.danger{
  color:#fff;border-color:rgba(255,140,150,.5);
  background:linear-gradient(180deg,#ff7182,#c81f3d);
  box-shadow:0 8px 20px rgba(255,90,106,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn:disabled{opacity:.34;cursor:not-allowed;transform:none;filter:grayscale(.3)}

/* ---- 信息条（横向滚动） ---- */
.meta{
  display:flex;flex-wrap:nowrap;gap:7px;margin-top:10px;
  overflow-x:auto;padding-bottom:4px;scrollbar-width:none;
}
.meta::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:4px 11px;font-size:12px;color:var(--dim);
}
.chip b{color:var(--gold);font-weight:800}

/* ---- 日志 / 提示 ---- */
.log{
  margin-top:10px;padding:8px 11px;height:92px;overflow:hidden auto;word-break:break-word;font-size:12px;
  color:#c3b7dc;border:1px solid rgba(255,255,255,.09);border-radius:13px;
  background:linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.26));
}
.log div{padding:1px 0}
.log .hl{color:var(--gold)}
.hint{margin-top:8px;color:#8a7ea4;font-size:11.5px;line-height:1.72}

/* =================================================================
   二、大厅页（index.html，body.pg-lobby）
   ================================================================= */
.pg-lobby{padding-bottom:78px}
.qwrap{max-width:1040px;margin:0 auto;padding:8px 14px 12px}

.qhead{display:flex;align-items:center;gap:10px;padding:8px 0 4px}
.qavatar{
  width:42px;height:42px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  font-weight:900;font-size:19px;color:#3a2405;
  background:linear-gradient(160deg,#ffe08a,#f2a51c 70%,#e08a06);
  box-shadow:0 8px 18px rgba(240,169,58,.35), inset 0 1px 0 rgba(255,255,255,.7);
}
.qwho{display:flex;flex-direction:column;line-height:1.28;min-width:0}
.qwho b{font-size:17px;letter-spacing:.4px;background:linear-gradient(92deg,#fff,var(--gold) 74%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.qwho span{font-size:11.5px;color:var(--dim)}
.qcoin{
  margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:800;color:#ffe6a6;
  background:rgba(255,209,102,.12);border:1px solid rgba(255,209,102,.4);
  border-radius:999px;padding:5px 11px;
}
.qcoin i{font-style:normal;color:var(--gold)}

.qsearch{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:14px;padding:9px 12px;
}
.qsearch .qi{color:var(--dim);font-size:15px}
.qsearch input{
  flex:1;min-width:0;background:transparent;border:0;outline:none;
  color:var(--text);font-size:13.5px;font-family:inherit;
}
.qsearch input::placeholder{color:#8c81a6}

.qtabs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.qtabs::-webkit-scrollbar{display:none}
.qtabs button{
  flex:0 0 auto;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;
  color:#cfc3e6;background:rgba(255,255,255,.055);border:1px solid var(--line);
  border-radius:999px;padding:7px 16px;transition:.15s;
}
.qtabs button.on{
  color:#3c2404;border-color:#ffe9a8;
  background:linear-gradient(180deg,#ffe08a,#f6a91d 74%);
  box-shadow:0 8px 18px rgba(246,169,29,.32);
}

.qbanner{
  position:relative;overflow:hidden;margin-top:11px;border-radius:18px;
  padding:16px 16px 15px;display:flex;align-items:flex-end;gap:12px;
  background:
    radial-gradient(120% 120% at 92% 0%, rgba(255,61,139,.42), transparent 58%),
    radial-gradient(90% 120% at 4% 100%, rgba(139,92,246,.38), transparent 62%),
    linear-gradient(140deg,#2a1046,#140a24 70%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);
}
.qbtxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.qbtxt b{font-size:18px;letter-spacing:.4px;background:linear-gradient(92deg,#fff,#ffd166 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.qbtxt span{font-size:12px;color:#cbbfe6}
.qbtag{
  margin-left:auto;flex:0 0 auto;font-size:11.5px;font-weight:800;color:#ffd9e7;
  background:rgba(255,61,139,.22);border:1px solid rgba(255,61,139,.5);
  border-radius:999px;padding:5px 11px;white-space:nowrap;
}

.qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.gitem{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:13px 6px 11px;border-radius:16px;color:var(--text);
  border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,255,255,.028));
  box-shadow:0 10px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14);
  transition:.16s;
}
.gitem:hover{
  transform:translateY(-3px);border-color:rgba(255,209,102,.5);
  box-shadow:0 16px 32px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.2);
}
.gitem b{font-size:13.5px;letter-spacing:.2px}
.gitem .gm{font-size:10.5px;color:var(--dim);letter-spacing:.2px}
.gi{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  font-size:25px;font-weight:900;color:#fff;letter-spacing:-1px;
  box-shadow:0 8px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.42);
}
.gi-1{background:linear-gradient(160deg,#ff9a3c,#e8443f)}
.gi-2{background:linear-gradient(160deg,#5b8cff,#2f45c8)}
.gi-3{background:linear-gradient(160deg,#39d98a,#0f8f5b)}
.gi-4{background:linear-gradient(160deg,#ffcf4d,#dd8b0a)}
.gi-5{background:linear-gradient(160deg,#c77dff,#6d3ad6)}
.gi-6{background:linear-gradient(160deg,#ff7a9c,#c8164e)}
.gi-7{background:linear-gradient(160deg,#45c6d8,#0e7d92)}
.gi-8{background:linear-gradient(160deg,#ffb457,#c2530a)}
.gb{
  position:absolute;top:6px;right:6px;font-style:normal;font-size:10px;font-weight:800;
  line-height:1;padding:3px 5px;border-radius:7px 7px 7px 2px;color:#fff;
}
.gb.hot{background:linear-gradient(150deg,#ff5a6a,#c8122f)}
.gb.new{background:linear-gradient(150deg,#ffd166,#e08a06);color:#3c2404}

.qempty{margin:16px 0;text-align:center;color:var(--dim);font-size:13px}

.qcard{
  margin-top:14px;padding:14px 15px;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);
}
.qcard h2{
  margin:0 0 8px;font-size:14px;font-weight:800;color:#ffe6a6;letter-spacing:.4px;
}
.qcard p{margin:0 0 7px;font-size:12.5px;line-height:1.78;color:#b9add2}
.qcard p:last-child{margin-bottom:0}
.qcard b{color:#efe7ff}
.qfoot{margin:18px 0 6px;text-align:center;color:#7c7096;font-size:11.5px}

.qnav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;
  padding:7px 6px calc(7px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(16,9,28,.92), rgba(8,5,16,.98));
  backdrop-filter:blur(16px);
}
.qnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11px;color:#9c90b8;padding:5px 0;border-radius:12px;
}
.qnav a i{font-style:normal;font-size:16px;line-height:1}
.qnav a.on{color:var(--gold)}
.qnav a.on i{text-shadow:0 0 14px rgba(255,209,102,.6)}

/* =================================================================
   三、响应式
   ================================================================= */
@media (min-width:560px){
  .qgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .gi{width:60px;height:60px;font-size:28px}
  .gitem b{font-size:14.5px}
}
@media (min-width:860px){
  .qgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .qwrap{padding:12px 20px 16px}
  .qnav{max-width:none}
}
@media (max-width:430px){
  .topbar{padding:9px 11px;gap:7px 9px}
  .topbar h1{font-size:15.5px}
  .card{width:39px;height:54px}
  .card.small{width:29px;height:40px}
  .card.mj{width:32px;height:45px;font-size:13px}
  .board .card,.board .slot,.board .empty{width:37px;height:51px}
  .hand>.card{margin-right:-10px}
  #myhand>.card,#heroSeat .hand>.card{width:45px;height:62px}
  #myhand>.card{margin-right:-12px}
  .btn{padding:9px 15px;font-size:13.5px}
  .log{height:84px}
  .topbar .tag{max-width:32vw;overflow:hidden;text-overflow:ellipsis}
  .qgrid{gap:9px}
  .gi{width:50px;height:50px;font-size:23px;border-radius:14px}
  .gitem{padding:11px 5px 10px}
  .gitem b{font-size:12.8px}
  .gitem .gm{font-size:10px}
}

/* =================================================================
   四、41068 对局页布局（对手席 / 扇形手牌 / 工具栏 / 计时器 / 离开确认）
   ================================================================= */
.qtable{position:relative}

/* ---- 对手席：窄屏一列，≥560px 起两侧分列 ---- */
.qseats{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:8px}
.qseats>.seat{margin-top:0 !important}
.qseats[data-count="1"]{grid-template-columns:1fr}

/* ---- 扇形手牌 ---- */
.hand.qfan{
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;
  gap:0;padding:28px 18px 10px;overflow:visible;
}
.hand.qfan>.card{
  margin-right:var(--mr,-12px) !important;flex:0 0 auto;
  transform:rotate(var(--rot,0deg)) translateY(var(--dy,0px));
  transform-origin:50% 145%;
  transition:transform .14s, box-shadow .14s;
}
.hand.qfan>.card:hover{
  transform:rotate(var(--rot,0deg)) translateY(calc(var(--dy,0px) - 10px));
}
.hand.qfan>.card.picked{
  transform:rotate(var(--rot,0deg)) translateY(calc(var(--dy,0px) - 20px));
}

/* ---- 对手席样式（牌位化） ---- */
.seat[data-pos]{min-width:0}
.seat[data-pos] .name{flex:1 1 60px}

/* ---- 右侧工具栏 ---- */
.q-toolbar{
  display:flex;align-items:center;gap:6px;margin-right:auto;
  flex:0 0 auto;
}
.controls.q-has-tools{justify-content:space-between}
.q-sbtn{
  width:32px;height:32px;border-radius:11px;cursor:pointer;font-size:14px;line-height:1;
  display:grid;place-items:center;color:#e8dfff;font-family:inherit;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(28,15,48,.9), rgba(10,6,20,.8));
  box-shadow:0 8px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(8px);transition:.14s;
}
.q-sbtn:hover{border-color:rgba(255,209,102,.55);color:#ffe6a6;transform:translateY(-1px)}
.q-sbtn:active{transform:translateY(1px)}

/* ---- 面板 ---- */
.q-sheet{
  position:fixed;left:10px;right:10px;bottom:14px;z-index:50;
  border-radius:18px;padding:13px 14px;
  background:linear-gradient(180deg, rgba(26,14,46,.97), rgba(9,5,18,.98));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 22px 48px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
}
.q-stitle{font-size:12px;color:#a99cc4;letter-spacing:.4px;margin-bottom:9px}
.q-chips{display:flex;flex-wrap:wrap;gap:7px}
.q-chip{
  cursor:pointer;font-family:inherit;font-size:12.5px;color:#efe7ff;
  padding:7px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
}
.q-chip:hover{border-color:rgba(255,209,102,.5);color:#ffe6a6}
.q-faces{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.q-face{
  cursor:pointer;font-size:20px;line-height:1;padding:8px 0;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);font-family:inherit;
}
.q-face:hover{background:rgba(255,209,102,.16);border-color:rgba(255,209,102,.45)}
.q-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 0;font-size:13px;color:#e4dbff;border-bottom:1px solid rgba(255,255,255,.07);
}
.q-row:last-of-type{border-bottom:0}
.q-row input{width:18px;height:18px;accent-color:#f6a91d}
.q-note{margin-top:8px;font-size:11.5px;color:#8f83a8}

/* ---- 计时器 ---- */
.q-timer{
  position:static;margin-left:auto;z-index:6;
  display:inline-flex;align-items:center;gap:5px;
  font:800 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#cfc3e6;
  background:rgba(0,0,0,.44);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:5px 9px;
}
.q-timer i{font-style:normal;font-size:11px;opacity:.8}
.q-timer.running{color:#ffe6a6;border-color:rgba(255,209,102,.4)}

/* ---- 飘表情 ---- */
.q-emoji{
  position:fixed;z-index:60;font-size:34px;pointer-events:none;
  animation:qFloat 1.4s ease-out forwards;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
@keyframes qFloat{
  0%{opacity:0;transform:translateY(10px) scale(.7)}
  22%{opacity:1;transform:translateY(-6px) scale(1.08)}
  100%{opacity:0;transform:translateY(-96px) scale(1)}
}

/* ---- 离开确认 ---- */
.q-mask{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
  background:rgba(4,2,10,.72);backdrop-filter:blur(8px);
}
.q-modal{
  width:min(340px,100%);border-radius:20px;padding:18px 18px 15px;
  background:linear-gradient(180deg,#1d1033,#0d0719);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.65);
  text-align:center;
}
.q-mtitle{font-size:16px;font-weight:800;color:#fff;margin-bottom:7px}
.q-mtext{font-size:12.5px;color:#a99cc4;line-height:1.7;margin-bottom:15px}
.q-mbtns{display:flex;gap:9px;justify-content:center}
.q-mbtns .btn{flex:1;justify-content:center}

/* ---- 设置生效 ---- */
body.big-cards #myhand>.card,
body.big-cards #heroSeat .hand>.card{width:54px;height:74px}
body.big-cards #myhand>.card .r,
body.big-cards #heroSeat .hand>.card .r{font-size:22px}
body.big-cards #myhand>.card .s,
body.big-cards #heroSeat .hand>.card .s{font-size:17px}
body.hide-log .log{display:none}

/* 扇形模式下牌面左对齐（重叠时也能看到点数和花色） */
.hand.qfan-tight>.card{align-items:flex-start;justify-content:flex-start;padding:4px 0 0 4px}
.hand.qfan-tight>.card .r{font-size:15px;letter-spacing:0}
.hand.qfan-tight>.card .s{font-size:12px;margin-top:1px}
.hand.qfan-tight>.card.picked{align-items:center;justify-content:center;padding:0}

/* 「我」的座位在同一个容器里时：占满整行、排在最后 */
.qseats>.seat[data-pos="hero"]{grid-column:1/-1;order:99}

/* hidden 必须真的隐藏（.q-mask 用了 display:grid 会盖掉 [hidden]） */
.q-mask[hidden],.q-sheet[hidden]{display:none !important}


/* =================================================================
   五、桌面双栏外壳 + 麻将页重排（局内 UI 加深）
   ================================================================= */
.app.q-app{max-width:1180px;padding-bottom:18px}

.q-aside{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.q-panel{
  border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 11px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.q-ptitle{
  display:flex;align-items:center;gap:7px;
  font-size:11.5px;letter-spacing:.6px;color:#a99cc4;margin-bottom:8px;
}
.q-ptitle::before{
  content:"";width:3px;height:12px;border-radius:2px;
  background:linear-gradient(180deg,#ffd166,#f0a93a);
}
.q-panel .meta{margin-top:0}
.q-panel .log{margin-top:0;height:170px;border:0;background:rgba(0,0,0,.34);border-radius:10px}
.q-panel .hint{margin-top:0;font-size:11.5px;line-height:1.75}

@media (min-width:1024px){
  .app.q-app{
    display:grid;grid-template-columns:minmax(0,1fr) 344px;
    grid-template-areas:"arena aside" "actions aside";
    gap:12px 16px;align-items:start;
  }
  .app.q-app>.table{grid-area:arena}
  .app.q-app>.controls{
    grid-area:actions;position:static;margin:0;padding:2px 0 0;
    background:none;backdrop-filter:none;justify-content:space-between;
  }
  .app.q-app>.q-aside{grid-area:aside;margin-top:0;position:sticky;top:62px}
  .app.q-app>.table{min-height:clamp(500px,66vh,680px);display:flex;flex-direction:column}
  /* 对手席按人数排：2 人一对、3 人一排、4 人一排，别出现 3+1 */
  .qseats[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qseats[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qseats[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* 我的手牌贴到牌桌底部，中间留白由牌桌自己吸收 */
  .qtable>#seat0,.qtable>#heroSeat,.qtable>#myhand,.qtable>.me,.qtable>[data-pos="hero"]{margin-top:auto}
  /* 麻将页：让它自己的 .mjtable 也变纵向 flex，我的手牌同样贴底 */
  .qtable>.mjtable{flex:1 1 auto;display:flex;flex-direction:column}
  .qtable .mjseat#seat0{margin-top:auto}
  /* 桌面操作条：图标靠左、按钮统一右对齐，避免孤行 */
  .app.q-app>.controls{justify-content:flex-end}
  .app.q-app>.controls .q-toolbar{margin-right:auto}
  .hand.qfan{padding:30px 26px 10px}
  .hand.qfan-tight>.card .r{font-size:19px}
  .hand.qfan-tight>.card .s{font-size:15px}

  /* 桌面把牌和座位放大一号 */
  .card{width:54px;height:74px;border-radius:10px}
  .card .r{font-size:22px}
  .card .s{font-size:18px}
  .card.small{width:38px;height:52px}
  .card.small .r{font-size:16px}
  .card.small .s{font-size:13px}
  .card.mj{width:46px;height:62px;font-size:17px}
  #myhand>.card,#heroSeat .hand>.card{width:60px;height:82px}
  #myhand>.card .r,#heroSeat .hand>.card .r{font-size:24px}
  #myhand>.card .s,#heroSeat .hand>.card .s{font-size:19px}
  .board .card,.board .slot,.board .empty{width:52px;height:70px}
  .seat{padding:9px 12px}
  .seat::before{width:38px;height:38px}
  .seat .name b{font-size:15px}
  .seat .score{font-size:14.5px}
  .pot{font-size:28px}
  .btn{padding:11px 22px;font-size:15px}
  .q-sbtn{width:36px;height:36px;border-radius:12px;font-size:15px}
}

/* ---- 麻将页（页面自带 .mjtable/.mjseat/.riverbox 结构，用 .qtable 前缀加权覆盖） ---- */
.qtable .mjrow{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;align-items:stretch;
}
.qtable .mjseat{
  background:linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:8px 10px;
  transition:.18s;
}
.qtable .mjseat.active{
  border-color:rgba(255,209,102,.65);
  box-shadow:0 0 0 1px rgba(255,209,102,.25), 0 6px 18px rgba(255,180,60,.16);
}
.qtable .mjseat h4{
  display:flex;align-items:center;gap:6px;margin:0 0 7px;
  font-size:12px;font-weight:600;color:#cfc3e6;
}
.qtable .mjseat h4 b{color:#fff;font-size:14px;letter-spacing:.3px}
.qtable .mjseat h4 .badge{
  font-size:10.5px;padding:1px 6px;border-radius:999px;
  background:rgba(255,255,255,.12);color:#e6dcff;font-weight:700;
}
.qtable .mjseat h4 .sc{margin-left:auto;color:#ffd166;font-weight:800;font-size:13px}
.qtable .backs{display:flex;flex-wrap:wrap;gap:2px;align-items:center;min-height:20px}
.qtable .backs i{
  width:9px;height:15px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(160deg,#5b8dff,#233a78);
  box-shadow:0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.qtable .backs .cnt{font-size:11px;color:#a99cc4;margin-left:7px}
.qtable .riverbox{
  margin-top:9px;padding:9px 11px;border-radius:13px;
  border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.2);
}
.qtable .riverbox .head{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-size:11.5px;color:#a99cc4;margin-bottom:7px;
}
.qtable .riverbox .head b{color:#ffd166;font-weight:800}
.qtable .river{display:flex;align-items:center;gap:6px;min-height:24px}
.qtable .river .lb{font-size:11px;color:#8f83a8;min-width:32px;flex:0 0 auto}
.qtable #seat0{
  margin-top:10px;padding:9px 11px;border-radius:14px;
  border:1px solid rgba(255,209,102,.4);
  background:linear-gradient(180deg, rgba(255,209,102,.12), rgba(0,0,0,.22));
}
.qtable #seat0 .hand{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.qtable #seat0 .card.mj{width:40px;height:54px;font-size:15px}

@media (min-width:1024px){
  .qtable #seat0 .card.mj{width:46px;height:62px;font-size:17px}
  .qtable .backs i{width:11px;height:18px}
}

/* 手机顶栏：一行放得下就行（返回 · 标题 · 计时器），说明标签并进侧栏 */
@media (max-width:430px){
  .topbar .tag{display:none}
  .topbar{padding:9px 11px}
}