/* ============================================================
   牌桌 2.0 —— 深绿绒布 + 木纹边框 + 全 CSS 动效，移动端优先
   ============================================================ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --green-deep:#062017;
  --green-felt:#0d4a33;
  --green-felt-2:#0a3a28;
  --gold:#e8c26a;
  --gold-2:#f7e3ac;
  --wood-1:#6b4225;
  --wood-2:#4a2b16;
  --wood-3:#8a5a33;
  --ink:#eaf4ee;
  --muted:#a9c6b7;
  --red:#e0544e;
  --card-w:46px;
  --card-h:64px;
  --seat-w:78px;
  --radius:16px;
  --tap:44px;
}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Zen Hei","Noto Color Emoji",system-ui,sans-serif;
  background:#04150f;
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button,input{font-family:inherit}
button{border:0;background:none;color:inherit;cursor:pointer;touch-action:manipulation}
input{
  width:100%;min-height:var(--tap);padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28);color:var(--ink);
  font-size:16px;outline:none;
}
input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,194,106,.16)}
.hidden{display:none!important}
#app{
  min-height:100dvh;
  background:
    radial-gradient(120% 70% at 50% -10%,#123d2c 0%,#071d15 55%,#04120d 100%);
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
  background:linear-gradient(180deg,rgba(4,20,14,.96),rgba(4,20,14,.72) 70%,transparent);
  backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:7px;font-weight:800;letter-spacing:.5px}
.brand-mark{
  display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:linear-gradient(145deg,var(--gold),#b98f37);color:#231708;font-size:16px;
  box-shadow:0 2px 10px rgba(232,194,106,.35);
}
.brand-txt{font-size:17px}
.brand-txt em{font-style:normal;color:var(--gold);font-size:12px;margin-left:2px;vertical-align:super}
.top-right{display:flex;align-items:center;gap:6px}
.pill{
  display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-size:13px;
  position:relative;
}
.pill b{color:var(--gold);font-variant-numeric:tabular-nums}
.pill.small{min-height:44px;font-size:12px;padding:0 10px}
.avatar-pill{max-width:130px}
.avatar-pill span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:#ff5d5d;box-shadow:0 0 0 2px #0a241a}
.icon-btn{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:rgba(255,255,255,.07);font-size:16px;border:1px solid rgba(255,255,255,.08);
}
.icon-btn:active{transform:scale(.94)}

/* ---------------- 通用 ---------------- */
.view{padding:0 12px 24px;max-width:720px;margin:0 auto}
.btn{
  min-height:var(--tap);padding:0 16px;border-radius:14px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);
  font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .12s ease,filter .12s ease,background .15s;
}
.btn:active{transform:scale(.96)}
.btn.primary{
  background:linear-gradient(180deg,#f0d391,#d3a748);color:#2a1c05;border-color:#f5e0a7;
  box-shadow:0 6px 18px rgba(232,194,106,.24),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn.ghost{background:rgba(255,255,255,.06)}
.btn.danger{background:linear-gradient(180deg,#c8483f,#8f2b26);border-color:#e07068;color:#fff}
.btn.big{min-height:48px;font-size:16px}
.btn.block{width:100%}
.btn.small{min-height:38px;font-size:13px;padding:0 12px}
.btn[disabled]{opacity:.4;filter:grayscale(.6);pointer-events:none}
.panel{
  margin-top:14px;padding:14px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.panel h2{margin:0 0 10px;font-size:15px;display:flex;align-items:baseline;gap:8px}
.panel h2 small{font-weight:400;font-size:11px;color:var(--muted)}

/* ---------------- 大厅 hero ---------------- */
.hero{margin-top:4px}
.hero-felt{
  position:relative;overflow:hidden;border-radius:20px;padding:20px 16px 18px;
  background:
    radial-gradient(120% 100% at 50% 0%,#156344 0%,#0b3f2b 60%,#082a1d 100%);
  border:1px solid rgba(232,194,106,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 40px rgba(0,0,0,.35);
}
.hero-felt:before{
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .6px);
  background-size:4px 4px;
}
.hero-felt h1{margin:0;font-size:22px;letter-spacing:.5px}
.hero-sub{margin:6px 0 14px;color:#b9d6c7;font-size:12.5px}
.quick{display:flex;gap:10px}
.quick{display:flex;gap:8px;flex-wrap:nowrap}
.quick .btn{flex:1 1 auto;white-space:nowrap;font-size:14px;padding:0 12px}
.quick .btn.ghost{flex:0 0 76px}

/* ---------------- 游戏选择 ---------------- */
.games{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.game-opt{
  position:relative;overflow:hidden;text-align:left;padding:12px;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);min-height:86px;
  transition:transform .14s,border-color .14s,background .14s;
}
.game-opt:active{transform:scale(.97)}
.game-opt .g-emoji{font-size:19px}
.game-opt .g-name{display:block;font-size:15px;font-weight:700;margin-top:5px}
.game-opt .g-desc{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.game-opt .g-seats{position:absolute;top:10px;right:10px;font-size:10px;color:var(--gold);opacity:.85}
.game-opt.active{
  border-color:var(--gold);
  background:linear-gradient(160deg,rgba(232,194,106,.2),rgba(232,194,106,.05));
  box-shadow:0 0 0 1px rgba(232,194,106,.35),0 8px 22px rgba(232,194,106,.12);
}
.game-opt.active:after{
  content:"✓";position:absolute;bottom:8px;right:10px;font-size:11px;color:var(--gold);
}

/* ---------------- 表单 ---------------- */
.form-row{display:flex;gap:8px;margin-bottom:8px}
.form-row label{flex:1;display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted)}
.form-row label.grow{flex:1}
.form-row label small{color:#6f8c7e;font-size:10px}

/* ---------------- 房间列表 ---------------- */
.roomlist{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.room-row{
  display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;
  padding:10px;border-radius:14px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
}
.room-row:active{background:rgba(255,255,255,.08)}
.room-row .r-emoji{
  display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:rgba(0,0,0,.3);font-size:17px;
}
.room-row .r-name{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.room-row .r-meta{font-size:11px;color:var(--muted);margin-top:2px}
.room-row .r-go{font-size:12px;color:var(--gold)}
.badge{font-size:9.5px;padding:1px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:var(--muted)}
.badge.live{color:#7ee2a8;border-color:rgba(126,226,168,.4);background:rgba(126,226,168,.1)}
.badge.lock{color:#ffcf7a;border-color:rgba(255,207,122,.4)}
.empty{padding:18px 8px;text-align:center;color:var(--muted);font-size:12px}

/* ---------------- 战绩 ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{
  padding:10px 4px;border-radius:12px;text-align:center;background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.06);
}
.stat b{display:block;font-size:17px;color:var(--gold);font-variant-numeric:tabular-nums}
.stat span{font-size:10.5px;color:var(--muted)}
.join-row{display:flex;gap:8px;margin-top:10px}
.join-row input{flex:1}

/* ---------------- 房间顶栏 ---------------- */
#room{padding:0 0 10px;max-width:900px}
.room-bar{
  display:flex;align-items:center;gap:8px;padding:6px 12px 8px;
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,rgba(4,20,14,.98),rgba(4,20,14,.7) 75%,transparent);
}
.room-info{flex:1;min-width:0}
.room-title{display:flex;align-items:center;gap:8px}
.room-title b{font-size:16px;letter-spacing:2px;font-variant-numeric:tabular-nums}
.room-meta{font-size:11px;color:var(--muted);margin-top:2px;white-space:normal;line-height:1.4;word-break:break-all}
.tag{
  font-size:10px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);color:#cfe6d9;
}
.tag.playing{background:rgba(126,226,168,.14);border-color:rgba(126,226,168,.4);color:#8ff0bb}
.tag.over{background:rgba(232,194,106,.14);border-color:rgba(232,194,106,.4);color:var(--gold)}
.room-actions{display:flex;gap:6px}

/* ---------------- 牌桌 ---------------- */
.table-wrap{padding:0 8px}
.table{
  position:relative;width:100%;aspect-ratio:1/1.12;max-height:62vh;
  margin:0 auto;
}
@media (min-width:560px){.table{aspect-ratio:1.35/1;max-height:52vh}}

/* 木纹外框 */
.table-inner{
  position:absolute;inset:0;border-radius:50%/46%;
  padding:12px;
  background:
    repeating-linear-gradient(92deg,rgba(0,0,0,.18) 0 3px,rgba(255,255,255,.03) 3px 7px),
    linear-gradient(160deg,var(--wood-3),var(--wood-1) 40%,var(--wood-2) 100%);
  box-shadow:
    0 18px 40px rgba(0,0,0,.55),
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -3px 8px rgba(0,0,0,.5);
}
.table-inner:after{ /* 木框高光 */
  content:"";position:absolute;inset:0;border-radius:50%/46%;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 0 26px rgba(0,0,0,.45);
}
/* 绒布 */
.felt{
  position:relative;width:100%;height:100%;border-radius:50%/46%;overflow:hidden;
  background:
    radial-gradient(85% 70% at 50% 32%,#176a49 0%,#0f5237 42%,#0a3a27 72%,#062418 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.55),inset 0 0 0 2px rgba(0,0,0,.25);
}
.felt:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:
    radial-gradient(rgba(255,255,255,.35) .5px,transparent .7px),
    radial-gradient(rgba(0,0,0,.4) .5px,transparent .7px);
  background-size:3px 3px,5px 5px;background-position:0 0,2px 2px;
}
.felt-line{
  position:absolute;inset:7%;border-radius:50%/46%;
  border:1px dashed rgba(232,194,106,.16);pointer-events:none;
}
.felt-logo{
  position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);
  font-size:13px;letter-spacing:6px;color:rgba(232,194,106,.13);font-weight:700;
  pointer-events:none;white-space:nowrap;text-align:center;
}
.felt-logo .sp{display:block;font-size:22px;letter-spacing:0;margin-bottom:2px}
.deck{
  position:absolute;left:50%;top:12%;width:1px;height:1px;pointer-events:none;
}

/* 底池 */
.pot{
  position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;
  z-index:3;
}
.pot-chips{position:relative;width:40px;height:22px;z-index:1}
.pot-chips i{
  position:absolute;left:50%;top:0;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  background:repeating-conic-gradient(#f5e6c8 0 25%,#c0392b 0 50%);
  border:2px solid #fff3df;box-shadow:0 3px 6px rgba(0,0,0,.4);
  transform:translateY(0);
}
.pot-num{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  background:rgba(0,0,0,.68);border:1px solid rgba(232,194,106,.32);
  font-size:10px;color:#d9c089;white-space:nowrap;
}
.pot-num b{font-size:15px;line-height:1.1;color:var(--gold-2);font-variant-numeric:tabular-nums;min-width:12px;text-align:center}
.pot.bump{animation:potBump .45s ease}
@keyframes potBump{0%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.22)}100%{transform:translate(-50%,-50%) scale(1)}}

/* 公共牌 */
.board{
  position:absolute;left:50%;top:31%;transform:translate(-50%,-50%);
  display:flex;gap:4px;z-index:2;
}
.board .card{--card-w:34px;--card-h:48px}

/* ---------------- 座位 ---------------- */
.seats{position:absolute;inset:0;z-index:6}
.seat{
  position:absolute;width:var(--seat-w);transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:opacity .25s;
}
.seat .avatar-wrap{position:relative;width:40px;height:40px;display:grid;place-items:center}
.seat .avatar{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(160deg,#2b4a3c,#16281f);
  border:2px solid rgba(255,255,255,.16);font-size:19px;
  box-shadow:0 3px 10px rgba(0,0,0,.45);
  transition:border-color .2s,box-shadow .2s;
}
.seat.active .avatar{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(232,194,106,.18),0 0 18px rgba(232,194,106,.55);
}
.seat.winner .avatar{
  border-color:#ffe9a8;
  animation:winPulse 1.1s ease-in-out infinite;
}
@keyframes winPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(255,233,168,.3),0 0 22px rgba(255,215,120,.6)}
  50%{box-shadow:0 0 0 6px rgba(255,233,168,.16),0 0 40px rgba(255,215,120,.95)}
}
.seat.folded{opacity:.42}
.seat.offline .avatar:after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px dashed rgba(255,120,120,.7);
}
.seat .nm{
  max-width:var(--seat-w);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:0 6px;border-radius:7px;background:rgba(0,0,0,.42);line-height:1.6;
}
.seat .sc{
  font-size:10px;font-variant-numeric:tabular-nums;color:#c9e3d4;
  padding:0 6px;border-radius:999px;background:rgba(0,0,0,.4);line-height:1.5;
}
.seat .sc.plus{color:#8ff0bb}
.seat .sc.minus{color:#ff9c93}
.seat .hand{display:flex;gap:0;margin-top:1px;height:calc(var(--card-h)*.62)}
.seat.me .hand{display:none}
.seat .hand .card{--card-w:24px;--card-h:33px;margin-left:-11px}
.seat .hand .card:first-child{margin-left:0}
.seat .badge-row{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px;min-height:13px;justify-content:center;max-width:calc(var(--seat-w) + 10px)}
.chip-badge{
  font-size:8.5px;padding:0 5px;border-radius:999px;background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);color:#d5e8dd;line-height:1.5;
}
.chip-badge.gold{color:#2a1c05;background:linear-gradient(180deg,#f0d391,#d3a748);border-color:#f7e3ac}
.chip-badge.hot{color:#ffd0a0;border-color:rgba(255,160,90,.5)}
.seat.top-seat{flex-direction:column-reverse}
.seat .bet{
  position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
  font-size:9px;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);color:#ffe2a8;white-space:nowrap;
}
/* 倒计时圆环 */
.ring{position:absolute;inset:-4px;transform:rotate(-90deg);pointer-events:none}
.ring circle{fill:none;stroke-width:2.5;stroke-linecap:round}
.ring .bg{stroke:rgba(255,255,255,.1)}
.ring .fg{stroke:var(--gold);transition:stroke .2s}
.ring.low .fg{stroke:#ff6b5e}
/* 聊天气泡 */
.bubble{
  position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  max-width:150px;padding:5px 9px;border-radius:12px;font-size:11px;
  background:#fdfaf2;color:#1c2a22;white-space:pre-wrap;word-break:break-word;
  box-shadow:0 6px 16px rgba(0,0,0,.4);animation:bubbleIn .22s ease;
  z-index:20;
}
.bubble:after{
  content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#fdfaf2;border-bottom:0;
}
.bubble.emote{font-size:24px;padding:1px 9px 3px;background:#fdfaf2;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.45);color:#111}
.bubble.emote:after{display:none}
@keyframes bubbleIn{from{opacity:0;transform:translate(-50%,6px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.table-note{
  position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
  font-size:11px;color:rgba(255,255,255,.55);pointer-events:none;text-align:center;width:80%;
}

/* ---------------- 卡牌（3D 翻牌） ---------------- */
.card{
  width:var(--card-w);height:var(--card-h);
  perspective:600px;flex:0 0 auto;position:relative;
}
.card .ci{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.3,.9,.3,1.2);
  transform:rotateY(0deg);
}
.card.up .ci{transform:rotateY(180deg)}
.card .f{
  position:absolute;inset:0;border-radius:5px;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:700;line-height:1;
  box-shadow:0 2px 5px rgba(0,0,0,.35);
}
.card .back{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 5px),
    linear-gradient(150deg,#1d5f8a,#123c5c 60%,#0b2740);
  border:1px solid rgba(255,255,255,.22);
}
.card .back:after{
  content:"♠";font-size:calc(var(--card-h)*.34);color:rgba(255,255,255,.28);
}
.card .front{
  transform:rotateY(180deg);background:linear-gradient(170deg,#fffef9,#f0ece0);
  color:#1a1a1a;border:1px solid rgba(0,0,0,.12);
  font-size:calc(var(--card-h)*.32);gap:1px;
}
.card .front .suit{font-size:calc(var(--card-h)*.26)}
.card .front.red{color:#cc2f2a}
.card.sel{transform:translateY(-10px);filter:drop-shadow(0 6px 10px rgba(232,194,106,.5))}
.card.sel .front{box-shadow:0 0 0 2px var(--gold) inset}
.card.joker .front{font-size:calc(var(--card-h)*.2)}
.card.mini{--card-w:22px;--card-h:30px}
/* 发牌动画 */
.card.deal{animation:dealIn .42s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes dealIn{
  from{transform:translate(var(--dx,0),var(--dy,0)) scale(.55) rotate(-18deg);opacity:.2}
  60%{opacity:1}
  to{transform:translate(0,0) scale(1) rotate(0);opacity:1}
}
.card.pop{animation:cardPop .3s ease}
@keyframes cardPop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

/* 筹码飞行 */
.flychip{
  position:fixed;z-index:120;width:16px;height:16px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(#f5e6c8 0 25%,#c0392b 0 50%);
  border:1.5px solid #fff3df;box-shadow:0 2px 6px rgba(0,0,0,.5);
  transition:transform .55s cubic-bezier(.4,.1,.4,1),opacity .55s;
}

/* ---------------- 我的手牌 ---------------- */
.my-area{padding:10px 12px 4px;display:flex;justify-content:center;min-height:76px;align-items:center}
.my-hand{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;max-width:100%}
.my-hand .card{--card-w:52px;--card-h:72px;transition:transform .16s}
.my-hand .card:active{transform:translateY(-4px)}
.my-hand .card.sel{transform:translateY(-12px)}
.my-hand .card:not(.sel):active{transform:translateY(-4px)}
.hand-tip{font-size:11px;color:var(--muted);text-align:center;width:100%}

/* ---------------- 操作栏 ---------------- */
.action-bar{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  min-height:60px;align-items:center;
}
.action-bar .btn{flex:1 1 0;min-width:calc(33% - 8px);max-width:220px}
.action-bar .btn.raise{background:linear-gradient(180deg,#f0d391,#d3a748);color:#2a1c05;border-color:#f7e3ac}
.action-bar .btn.fold{background:rgba(200,72,63,.18);border-color:rgba(224,112,104,.4);color:#ffb4ac}
.action-bar .hintline{width:100%;text-align:center;font-size:12px;color:var(--muted)}
.raise-row{display:flex;gap:8px;align-items:center;width:100%;padding:4px 2px}
.raise-row input[type=range]{width:100%;accent-color:#e8c26a;height:34px}
.raise-row .num{min-width:66px;text-align:right;font-size:15px;font-weight:700;color:var(--gold)}
.amt-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%}
.amt-chips button{
  min-height:44px;padding:0 12px;border-radius:11px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);font-size:13px;
}
.amt-chips button.on{background:rgba(232,194,106,.9);color:#2a1c05;font-weight:700}

/* ---------------- 表情/聊天 ---------------- */
.emote-bar{
  display:flex;gap:6px;justify-content:center;padding:0 12px 8px;overflow-x:auto;
}
.emote{
  min-width:44px;height:44px;border-radius:14px;font-size:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  display:grid;place-items:center;flex:0 0 auto;
}
.emote:active{transform:scale(.9);background:rgba(232,194,106,.2)}
.chat-panel{
  margin:0 12px 12px;border-radius:16px;overflow:hidden;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.09);
}
.chat-log{max-height:132px;overflow:auto;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.chat-line{font-size:12px;line-height:1.45;color:#d6e6dc}
.chat-line b{color:var(--gold);font-weight:600;margin-right:4px}
.chat-line.sys{color:#8fb5a2;font-style:italic}
.chat-line .em{font-size:18px}
.chat-input{display:flex;gap:6px;padding:8px;border-top:1px solid rgba(255,255,255,.07)}
.chat-input input{min-height:44px}
.chat-input .btn{flex:0 0 auto;min-height:44px}

/* ---------------- 结算面板 ---------------- */
.overlay{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;
  background:rgba(2,10,7,.72);backdrop-filter:blur(6px);
  animation:fadeIn .22s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.result-card{
  width:100%;max-width:420px;max-height:88dvh;overflow:auto;
  border-radius:22px;padding:18px 16px 16px;
  background:linear-gradient(180deg,#123c2b,#0a2418 70%,#071a12);
  border:1px solid rgba(232,194,106,.3);
  box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);
  animation:cardUp .3s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes cardUp{from{transform:translateY(18px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.result-head{text-align:center;margin-bottom:12px}
.crown{font-size:34px;line-height:1;filter:drop-shadow(0 4px 12px rgba(232,194,106,.5))}
.result-head h3{margin:6px 0 3px;font-size:17px}
.result-sub{font-size:11.5px;color:var(--muted)}
.result-list{display:flex;flex-direction:column;gap:6px}
.res-row{
  display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:9px;
  padding:8px 10px;border-radius:13px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
}
.res-row.win{border-color:rgba(232,194,106,.5);background:linear-gradient(90deg,rgba(232,194,106,.18),rgba(232,194,106,.04))}
.res-row .av{font-size:18px;text-align:center}
.res-row .nm{font-size:13px;font-weight:600;display:flex;align-items:center;gap:5px}
.res-row .sub{font-size:10.5px;color:var(--muted);margin-top:1px}
.res-row .dl{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.res-row .dl.plus{color:#7ee2a8}
.res-row .dl.minus{color:#ff9c93}
.res-cards{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap}
.res-cards .pcard{
  font-size:10px;padding:1px 5px;border-radius:5px;background:#fbf7ec;color:#141414;
  font-weight:700;line-height:1.5;letter-spacing:.3px;
}
.res-cards .pcard.red{color:#c62f2a}
.res-board{
  display:flex;gap:3px;justify-content:center;margin-top:8px;padding:6px;border-radius:10px;
  background:rgba(0,0,0,.22);border:1px dashed rgba(232,194,106,.22);min-height:34px;
  align-items:center;flex-wrap:wrap;
}
.res-board .lbl{font-size:10px;color:var(--muted);margin-right:4px}
.result-foot{margin-top:12px}
.next-hint{text-align:center;font-size:11.5px;color:var(--muted);margin-bottom:8px;min-height:16px}
.podium{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.pod-row{
  display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;
  padding:10px;border-radius:14px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
}
.pod-row.first{border-color:var(--gold);background:linear-gradient(90deg,rgba(232,194,106,.22),rgba(232,194,106,.05))}
.pod-rank{font-size:15px;text-align:center}
.pod-sc{font-size:15px;font-weight:800;color:var(--gold)}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px}
.avatar-grid button{
  aspect-ratio:1;border-radius:12px;font-size:20px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
}
.avatar-grid button.on{border-color:var(--gold);background:rgba(232,194,106,.2)}

/* ---------------- 金光/彩带 ---------------- */
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:9}
.glow{
  position:absolute;inset:0;pointer-events:none;border-radius:50%/46%;opacity:0;z-index:1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,222,140,.55),rgba(255,200,80,.12) 45%,transparent 70%);
  transition:opacity .5s;
}
.glow.on{opacity:1;animation:glowPulse 1.6s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.5;transform:scale(.98)}50%{opacity:.95;transform:scale(1.02)}}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translate(-50%,14px);
  z-index:300;padding:10px 16px;border-radius:14px;font-size:13px;max-width:86vw;text-align:center;
  background:rgba(8,30,21,.96);border:1px solid rgba(232,194,106,.35);color:#f4ecdb;
  box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:rgba(255,120,110,.5);background:rgba(60,18,16,.96)}

/* 横屏/大屏 */
@media (min-width:560px){
  :root{--card-w:52px;--card-h:72px;--seat-w:92px}
  .games{grid-template-columns:repeat(3,1fr)}
  .my-hand .card{--card-w:60px;--card-h:84px}
  .seat .hand .card{--card-w:26px;--card-h:36px}
  .action-bar .btn{min-width:auto;flex:0 1 auto;padding:0 20px}
}
@media (max-height:680px){
  .table{max-height:52vh}
  .emote-bar .emote{min-width:40px;height:40px;font-size:18px}
}

/* ============================================================
   3.0 新增：重启提示 / 连局倒计时 / 分享二维码 / 规则卡 / 复盘
   ============================================================ */
.boot-banner{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  margin:0 12px 8px;padding:10px 12px;border-radius:14px;font-size:12.5px;line-height:1.5;
  background:rgba(255,180,80,.14);border:1px solid rgba(255,196,106,.45);color:#ffe6b8;
}
.boot-banner button{
  flex:0 0 auto;min-height:34px;padding:0 10px;border-radius:10px;font-size:12px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
}
.countdown{
  position:sticky;bottom:calc(96px + env(safe-area-inset-bottom));z-index:40;
  margin:0 auto 6px;width:max-content;padding:7px 14px;border-radius:999px;font-size:12.5px;
  background:rgba(8,32,22,.92);border:1px solid rgba(232,194,106,.45);color:var(--gold-2);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.result-btns{display:flex;gap:8px;margin-top:8px}
.result-btns .btn{flex:1}
.sync{font-size:10.5px;font-weight:500;letter-spacing:0}
.sync.ok{color:#8ff0bb}
.sync.diff{color:#ffd08a}

/* 分享 */
.share-card{max-width:360px}
.share-qr{display:grid;place-items:center;margin:6px 0 10px;padding:10px;border-radius:18px;background:#fff}
.share-qr canvas{border-radius:8px;display:block}
.share-link{display:flex;gap:8px;align-items:center}
.share-link input{font-size:12.5px;color:#cfe7da}
.share-tip{font-size:11.5px;color:var(--muted);margin:8px 0 12px;text-align:center}

/* 规则卡 */
.rules-card{max-width:420px}
.rules-list{
  margin:4px 0 14px;padding:0 0 0 18px;max-height:52vh;overflow-y:auto;
  font-size:13px;line-height:1.75;color:#dcefe4;
}
.rules-list li{margin-bottom:6px}
.rules-list li::marker{color:var(--gold)}

/* 复盘 */
.replay-card{max-width:460px}
.replay-body{max-height:56vh;overflow-y:auto;padding-right:2px}
.rp-section{font-size:11px;letter-spacing:.1em;color:var(--muted);margin:10px 0 6px;text-transform:uppercase}
.rp-players{display:flex;flex-direction:column;gap:6px}
.rp-player{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:12px;
}
.rp-av{font-size:16px}
.rp-nm{flex:0 0 82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.rp-cards{display:flex;gap:3px;flex:1;flex-wrap:wrap}
.rp-cards .pcard{background:rgba(255,255,255,.9);color:#17281f;border-radius:4px;padding:1px 4px;font-size:11px}
.rp-cards .pcard.red{color:#c62f2a}
.rp-hand{font-size:11px;color:var(--gold-2);flex:0 0 auto}
.rp-dl{font-variant-numeric:tabular-nums;font-weight:700;flex:0 0 auto}
.rp-dl.plus{color:#8ff0bb}
.rp-dl.minus{color:#ff9d95}
.rp-events{display:flex;flex-direction:column;gap:2px}
.rp-ev{display:flex;gap:8px;font-size:12px;line-height:1.5;padding:5px 8px;border-radius:8px}
.rp-ev:nth-child(odd){background:rgba(255,255,255,.03)}
.rp-ev.settle{background:rgba(232,194,106,.12);color:var(--gold-2)}
.rp-t{flex:0 0 44px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px;padding-top:1px}
.rp-seq{flex:0 0 30px;color:#6f8d7e;font-size:10.5px;padding-top:2px}
.rp-txt{flex:1;word-break:break-word}
@media (max-width:380px){.rp-nm{flex-basis:64px}.rp-hand{display:none}}


/* 左下半透明小字（同时是隐藏入口） */
.gamble-tag{
  position:fixed;left:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:40;
  font-size:11px;letter-spacing:.5px;color:rgba(255,255,255,.26);
  padding:4px 6px;user-select:none;-webkit-user-select:none;cursor:default;
}
.gamble-tag.on{color:rgba(255,214,120,.42)}