/* ===================== 设计变量 ===================== */
:root{
  --gold:#F2C46B;      --gold:oklch(0.84 0.13 82);
  --gold-lt:#FFE3AC;   --gold-lt:oklch(0.93 0.08 88);
  --gold-dp:#D2933C;   --gold-dp:oklch(0.72 0.13 72);
  --jade:#3EE0B0;      --jade:oklch(0.84 0.15 165);
  --rose:#FF4D6D;      --rose:oklch(0.68 0.20 15);
  --violet:#8B6CFF;    --violet:oklch(0.68 0.19 295);
  --txt:#F2F7F6;  --txt2:#A9BDB8;  --txt3:#6D847E;
  --line:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.055);
  --r:16px;
  --shadow-m:0 10px 26px -8px rgba(0,0,0,.6);
  --shadow-l:0 30px 70px rgba(0,0,0,.65);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:#04090A;color:var(--txt);font-family:var(--font);
  overflow:hidden;user-select:none;overscroll-behavior:none;
}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font-family:inherit}

/* ===================== 背景 ===================== */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#04090A}
.bg i{position:absolute;display:block;border-radius:50%;filter:blur(58px);mix-blend-mode:screen;will-change:transform}
.bg i:nth-child(1){width:64vw;height:64vw;left:-20vw;top:-18vw;
  background:radial-gradient(circle,#00C896,transparent 66%);opacity:.50;animation:f1 22s ease-in-out infinite}
.bg i:nth-child(2){width:56vw;height:56vw;right:-18vw;top:6vh;
  background:radial-gradient(circle,#FF3D6E,transparent 66%);opacity:.34;animation:f2 27s ease-in-out infinite}
.bg i:nth-child(3){width:74vw;height:74vw;left:6vw;bottom:-32vh;
  background:radial-gradient(circle,#F2C46B,transparent 68%);opacity:.30;animation:f3 32s ease-in-out infinite}
.bg i:nth-child(4){width:52vw;height:52vw;right:-12vw;bottom:-18vh;
  background:radial-gradient(circle,#7C5CFF,transparent 66%);opacity:.30;animation:f2 25s ease-in-out infinite reverse}
@keyframes f1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8vw,10vh,0) scale(1.15)}}
@keyframes f2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-10vw,14vh,0) scale(.9)}}
@keyframes f3{0%,100%{transform:translate3d(0,0,0) scale(1.1)}50%{transform:translate3d(-6vw,-12vh,0) scale(.95)}}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.075;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

.app{
  position:relative;z-index:2;height:100dvh;max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;
  background:
    radial-gradient(120% 58% at 50% 0%, rgba(255,255,255,.055), transparent 62%),
    linear-gradient(180deg, rgba(3,8,9,.20) 0%, rgba(3,8,9,.58) 52%, rgba(2,5,6,.90) 100%);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.05), inset -1px 0 0 rgba(255,255,255,.05);
}
.screen{display:none;flex:1;min-height:0;flex-direction:column}
.screen.show{display:flex}

/* ===================== 顶栏 ===================== */
.topbar{
  position:relative;z-index:4;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top) + 12px) 14px 10px;
}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand-mark{
  width:34px;height:34px;flex:none;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#2A1A05;
  background:linear-gradient(140deg,var(--gold-lt),var(--gold) 45%,var(--gold-dp));
  box-shadow:0 6px 16px -4px rgba(242,196,107,.55), inset 0 1px 0 rgba(255,255,255,.7);
}
.brand-txt h1{
  font-size:16px;font-weight:700;letter-spacing:.20em;line-height:1.15;
  background:linear-gradient(180deg,#FFF6E4,var(--gold) 55%,var(--gold-dp));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-txt span{display:block;font-size:10px;color:var(--txt3);letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tools{margin-left:auto;display:flex;gap:6px}
.chip{
  display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 11px;border-radius:999px;
  font-size:11px;font-weight:500;color:var(--txt2);
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:.18s cubic-bezier(.2,.9,.3,1);
}
.chip .ico{width:13px;height:13px;flex:none;opacity:.85}
.chip:active{transform:scale(.93);background:rgba(255,255,255,.12);color:#fff}
.chip.hot{color:var(--gold);border-color:rgba(242,196,107,.35);background:rgba(242,196,107,.10)}
.chip.off{opacity:.5}

/* ===================== 入场 / 房间 ===================== */
.center-scroll{
  flex:1;min-height:0;overflow:auto;padding:8px 18px 24px;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
}
.hero{text-align:center;margin-bottom:6px}
.hero h2{
  font-size:26px;font-weight:800;letter-spacing:.10em;margin-bottom:8px;
  background:linear-gradient(180deg,#FFF6E4,var(--gold) 60%,var(--gold-dp));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{font-size:12.5px;color:var(--txt3);line-height:1.7}
.card-panel{
  padding:18px;border-radius:22px;
  background:linear-gradient(180deg, rgba(24,36,34,.72), rgba(8,15,14,.82));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-m), inset 0 1px 0 rgba(255,255,255,.08);
}
.field{margin-bottom:12px}
.field label{display:block;font-size:11px;color:var(--txt3);letter-spacing:.10em;margin-bottom:7px}
.input{
  width:100%;height:48px;padding:0 14px;border-radius:14px;
  font-size:16px;color:var(--txt);letter-spacing:.06em;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  outline:none;transition:.18s;
}
.input:focus{border-color:rgba(242,196,107,.5);background:rgba(242,196,107,.06)}
.input.code{text-align:center;font-size:22px;font-weight:800;letter-spacing:.34em;text-transform:uppercase}
.btn{
  flex:1;height:48px;border-radius:15px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;font-weight:600;letter-spacing:.04em;
  color:var(--txt);background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .14s cubic-bezier(.2,1.2,.4,1), box-shadow .18s, opacity .18s;
}
.btn .ico{width:16px;height:16px;flex:none;opacity:.9}
.btn:active{transform:scale(.95)}
.btn[disabled]{opacity:.32}
.btn.primary{
  color:#2A1A05;border:none;
  background:linear-gradient(135deg,#FFF0D0,var(--gold) 46%,var(--gold-dp));
  box-shadow:0 10px 24px -8px rgba(242,196,107,.65), inset 0 1px 0 rgba(255,255,255,.7);
}
.btn.wide{width:100%}
.btn.ghost{color:var(--gold);border-color:rgba(242,196,107,.28);background:rgba(242,196,107,.07)}

/* 房号 */
.roomcode{
  display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 14px;
}
.roomcode .num{
  font-size:38px;font-weight:800;letter-spacing:.22em;
  background:linear-gradient(180deg,#FFF6E4,var(--gold) 60%,var(--gold-dp));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.roomcode .copy{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--glass);border:1px solid var(--line);color:var(--txt2);
}
.roomcode .copy:active{transform:scale(.9)}

/* 座位列表 */
.slots{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.slot{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:15px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
}
.slot.empty{opacity:.5;border-style:dashed}
.slot.bot{background:rgba(139,108,255,.10);border-color:rgba(139,108,255,.25)}
.slot .av{
  width:38px;height:38px;flex:none;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#06201B;
  background:linear-gradient(155deg,#8CF0D6,#2FA98A 60%,#1D7A63);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.slot.bot .av{color:#fff;background:linear-gradient(155deg,#A992FF,#6A47E0 70%,#4B2FB8)}
.slot.empty .av{color:var(--txt3);background:rgba(255,255,255,.06);box-shadow:none}
.slot .nm{flex:1;font-size:14px;font-weight:600}
.slot .nm small{display:block;font-size:11px;font-weight:400;color:var(--txt3);margin-top:2px}
.slot .tag{font-size:10px;padding:3px 9px;border-radius:999px;color:var(--gold);
  border:1px solid rgba(242,196,107,.3);background:rgba(242,196,107,.10)}

/* 人数选择 */
.seg{display:flex;gap:8px;margin-bottom:14px}
.seg .btn{font-size:13px}
.seg .btn.on{
  color:var(--gold-lt);border-color:var(--gold);
  background:linear-gradient(120deg,rgba(242,196,107,.22),rgba(242,196,107,.06));
  box-shadow:0 0 0 1px rgba(242,196,107,.25);
}
.seg .btn small{font-size:10px;opacity:.7}
.hint{font-size:11.5px;color:var(--txt3);line-height:1.7;text-align:center}
.hint.waiting{color:var(--gold-lt);font-size:12.5px;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.55}}

/* ===================== 牌桌 ===================== */
.table{position:relative;z-index:2;flex:1;min-height:0}
.felt{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:118%;aspect-ratio:1.32/1;border-radius:50%;
  background:
    radial-gradient(58% 58% at 50% 40%, rgba(62,224,176,.10), transparent 70%),
    radial-gradient(100% 100% at 50% 50%, rgba(255,255,255,.05), rgba(0,0,0,.42) 78%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 70px rgba(0,0,0,.62), var(--shadow-m);
}
.felt::after{
  content:"";position:absolute;inset:-16px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 58%, rgba(242,196,107,.55) 74%, transparent 88%);
  -webkit-mask:radial-gradient(closest-side, transparent 90%, #000 91%);
          mask:radial-gradient(closest-side, transparent 90%, #000 91%);
  animation:spin 14s linear infinite;opacity:.5;
}
@keyframes spin{to{transform:rotate(360deg)}}

.seat{position:absolute;top:10px;width:78px;text-align:center;transition:transform .28s cubic-bezier(.2,1.1,.4,1)}
.seat.on{transform:scale(1.07)}
.seat.off{opacity:.45}
.av-wrap{position:relative;width:54px;height:54px;margin:0 auto}
.seat.on .av-wrap::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 60%, var(--gold) 80%, transparent 94%);
  animation:spin 2.2s linear infinite;opacity:.9;
}
.avatar{
  position:relative;z-index:1;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;color:#06201B;
  background:linear-gradient(155deg,#8CF0D6,#2FA98A 60%,#1D7A63);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), var(--shadow-m);
  transition:.25s;
}
.avatar.bot{color:#fff;background:linear-gradient(155deg,#A992FF,#6A47E0 70%,#4B2FB8)}
.seat.on .avatar{box-shadow:0 0 0 2px var(--gold), 0 0 22px rgba(242,196,107,.55), var(--shadow-m)}
.av-badge{
  position:absolute;right:-6px;bottom:-4px;z-index:2;
  min-width:22px;height:19px;padding:0 5px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--gold-lt);background:rgba(8,18,16,.92);
  border:1px solid rgba(242,196,107,.38);
  box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.av-badge::after{content:"张";font-size:8px;font-weight:500;margin-left:1px;opacity:.75}
.av-badge.low{
  color:#fff;background:linear-gradient(140deg,#FF7A8E,#E22B4C);
  border-color:transparent;animation:pop 1s ease-in-out infinite;
}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.sname{font-size:11px;color:var(--txt2);margin-top:7px;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sscore{font-size:10px;color:var(--txt3);margin-top:1px;font-variant-numeric:tabular-nums}
.sflag{margin-top:3px;font-size:11px;font-weight:600;min-height:16px;color:var(--rose);letter-spacing:.06em}
.sflag.pass{color:var(--txt3);font-weight:400}

.center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);
  width:100%;text-align:center;pointer-events:none;
}
.lastby{font-size:11px;color:var(--txt2);margin-bottom:9px;min-height:15px;letter-spacing:.06em}
.lastcards{
  display:flex;justify-content:center;align-items:center;gap:5px;min-height:94px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
.lastcards .card{animation:drop .34s cubic-bezier(.2,1.25,.45,1) both;animation-delay:calc(var(--i,0)*40ms)}
@keyframes drop{from{opacity:0;transform:translateY(-22px) scale(.86) rotate(-4deg)}to{opacity:1;transform:none}}
.typetag{
  display:inline-flex;align-items:center;margin-top:11px;padding:4px 13px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.10em;color:#2A1A05;
  background:linear-gradient(120deg,var(--gold-lt),var(--gold) 50%,var(--gold-dp));
  box-shadow:0 5px 16px -4px rgba(242,196,107,.6), inset 0 1px 0 rgba(255,255,255,.65);
  animation:tagIn .3s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes tagIn{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}
.deckbox{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;
  font-size:10px;color:var(--txt3);letter-spacing:.08em;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.deckbox b{color:var(--txt2);font-size:11px;font-variant-numeric:tabular-nums}

/* ===================== 扑克牌 ===================== */
.card{
  position:relative;width:48px;height:68px;flex:none;overflow:hidden;
  border-radius:10px;
  background:linear-gradient(158deg,#FFFFFF 0%,#F4F7F8 46%,#E2E8EA 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.08),
             0 6px 14px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.28);
  color:#151A1E;font-weight:700;
}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 42%);
}
.card.red{color:#E0243C}
.card.joker{background:linear-gradient(158deg,#FFF9EC 0%,#F6E7C6 50%,#E8D3A6 100%)}
.c-idx{position:absolute;top:3px;left:4px;font-size:11px;line-height:1;text-align:center;letter-spacing:-.02em}
.c-idx i{display:block;font-style:normal;font-size:9px;margin-top:1px;opacity:.9}
.c-idx2{position:absolute;right:4px;bottom:3px;font-size:9px;transform:rotate(180deg);opacity:.55;text-align:center}
.c-idx2 i{display:block;font-style:normal;font-size:8px}
.c-pip{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:25px;line-height:1;opacity:.92}
.card.joker .c-pip{bottom:auto;top:24px;font-size:18px;color:#E0243C}
.jk-t{position:absolute;top:3px;left:4px;font-size:10px;color:#E0243C}
.jk-s{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:7px;
  letter-spacing:.16em;color:rgba(224,36,60,.75);font-weight:800}

/* ===================== 我的手牌 ===================== */
.handwrap{position:relative;z-index:4;padding:0 10px;transition:.3s}
.handwrap.turn .mybar .dot{
  background:var(--jade);box-shadow:0 0 0 4px rgba(62,224,176,.16), 0 0 14px var(--jade);
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.mybar{display:flex;align-items:center;gap:8px;padding:0 8px 8px;font-size:12px;color:var(--txt2)}
.mybar .dot{width:6px;height:6px;border-radius:50%;background:var(--txt3);transition:.3s}
.mybar .me{font-weight:600;color:var(--txt)}
.mybar .sc{
  margin-left:auto;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;
  color:var(--gold-lt);background:rgba(242,196,107,.10);border:1px solid rgba(242,196,107,.28);
  font-variant-numeric:tabular-nums;
}
.hand{display:flex;justify-content:center;align-items:flex-end;min-height:94px;padding-top:16px}
.hand .card{
  margin-left:-15px;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,1.1,.4,1), box-shadow .18s, opacity .18s;
}
.hand .card.in{animation:cardIn .38s cubic-bezier(.2,1.15,.35,1) both;animation-delay:calc(var(--i,0)*30ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) rotate(-6deg) scale(.9)}to{opacity:1;transform:none}}
.hand .card.sel{
  transform:translateY(-19px) scale(1.05);
  box-shadow:0 16px 28px -8px rgba(0,0,0,.7), 0 0 0 2px var(--gold),
             0 0 24px rgba(242,196,107,.5), inset 0 1px 0 rgba(255,255,255,.95);
  z-index:5;
}
.hand .card.dim{opacity:.45}
.hand.tight .card{margin-left:-26px}
.hand .card:first-child{margin-left:0}

/* ===================== 操作区 ===================== */
.actions{
  position:relative;z-index:4;display:flex;gap:9px;
  padding:12px 14px calc(env(safe-area-inset-bottom) + 12px);
}
.actions .btn.primary{flex:1.35}
.actions .btn.ghost{flex:.9;font-size:13px}

/* ===================== 弹层 ===================== */
.modal{
  position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:22px;
  background:rgba(2,6,7,.68);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.modal.show{display:flex;animation:fade .22s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  position:relative;width:100%;max-width:420px;max-height:84vh;overflow:auto;
  padding:24px 22px 22px;border-radius:26px;
  background:linear-gradient(180deg, rgba(24,36,34,.94), rgba(8,15,14,.97));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:var(--shadow-l), inset 0 1px 0 rgba(255,255,255,.10);
  animation:up .34s cubic-bezier(.2,1.05,.4,1) both;
}
.sheet::before{
  content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,196,107,.7),transparent);
}
@keyframes up{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
.sheet h3{
  font-size:19px;font-weight:700;letter-spacing:.06em;margin-bottom:5px;
  background:linear-gradient(180deg,#FFF3DC,var(--gold) 60%,var(--gold-dp));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sheet .sub{font-size:12px;color:var(--txt3);line-height:1.6;margin-bottom:16px}
.sheet h4{
  font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gold);
  margin:18px 0 8px;display:flex;align-items:center;gap:8px;
}
.sheet h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(242,196,107,.28),transparent)}
.sheet p{font-size:13px;color:var(--txt2);line-height:1.75}
.sheet ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.sheet li{font-size:13px;color:var(--txt2);line-height:1.6;padding-left:14px;position:relative}
.sheet li::before{
  content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--gold-dp);
}
.sheet li b{color:var(--gold-lt);font-weight:600}

.rows{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.row{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
}
.row .who{flex:1;font-size:13px;font-weight:600}
.row .who small{display:block;font-size:11px;color:var(--txt3);font-weight:400;margin-top:2px}
.row .val{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.row .val.up{color:var(--jade)}
.row .val.dn{color:var(--rose)}
.row.win{
  border-color:rgba(242,196,107,.42);background:rgba(242,196,107,.12);
  box-shadow:inset 0 0 0 1px rgba(242,196,107,.12);
}

/* 邀请弹层 */
.inv-code{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;
  background:rgba(242,196,107,.10);border:1px solid rgba(242,196,107,.42);margin-bottom:14px;
}
.inv-code .l{flex:1;min-width:0}
.inv-code .num{
  font-size:32px;font-weight:700;letter-spacing:.22em;line-height:1;
  color:var(--gold-lt);font-variant-numeric:tabular-nums;
}
.inv-code .cap{font-size:11px;color:var(--txt3);margin-top:6px;letter-spacing:.02em}
.inv-code button{
  flex:none;margin-left:auto;padding:10px 16px;border-radius:11px;font-size:12px;font-weight:600;
  color:#2A1A05;background:linear-gradient(135deg,#FFF0D0,var(--gold) 50%,var(--gold-dp));
}
.inv-code button:active{transform:scale(.94)}
.inv-qr{display:flex;flex-direction:column;align-items:center;gap:9px;margin:2px 0 16px}
.inv-qr .frame{
  padding:10px;border-radius:18px;background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(242,196,107,.5);
}
.inv-qr img{display:block;width:150px;height:150px;border-radius:9px;image-rendering:pixelated}
.inv-qr .cap{font-size:11px;color:var(--txt3);letter-spacing:.02em;text-align:center;line-height:1.5}

.inv-lab{font-size:11.5px;color:var(--txt3);margin:0 0 8px 2px;line-height:1.5}
.inv-row{display:flex;gap:8px;align-items:stretch;margin-bottom:14px}
.inv-url{
  flex:1;min-width:0;background:rgba(0,0,0,.35);color:var(--gold-lt);
  border:1px dashed rgba(242,196,107,.35);border-radius:13px;
  font-size:12.5px;padding:12px;font-family:ui-monospace,Consolas,monospace;
  white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  font-variant-numeric:tabular-nums;
}
.inv-url:focus{outline:none;border-color:rgba(242,196,107,.65)}
.inv-row button{
  flex:none;padding:0 16px;border-radius:13px;font-size:12px;font-weight:600;
  color:#2A1A05;background:linear-gradient(135deg,#FFF0D0,var(--gold) 50%,var(--gold-dp));
}
.inv-row button:active{transform:scale(.94)}
.inv-btns{display:flex;gap:10px;margin-top:2px}
.inv-btns .btn{flex:1}

/* ===================== Toast ===================== */
.toast{
  position:fixed;left:50%;bottom:24%;transform:translate(-50%,12px) scale(.96);
  z-index:30;max-width:80vw;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:500;
  background:rgba(10,22,20,.90);border:1px solid rgba(242,196,107,.32);color:var(--gold-lt);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-m);opacity:0;pointer-events:none;
  transition:opacity .22s, transform .32s cubic-bezier(.2,1.2,.4,1);
}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}

/* 连接状态 */
.conn{
  position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:6;
  display:none;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:10px;letter-spacing:.06em;color:var(--rose);
  background:rgba(10,22,20,.9);border:1px solid rgba(255,77,109,.35);
}
.conn.show{display:inline-flex}
.conn i{width:6px;height:6px;border-radius:50%;background:var(--rose);animation:pulse 1.2s infinite}

@media(min-height:760px){
  .card{width:54px;height:76px}
  .hand .card{width:54px;height:76px;margin-left:-17px}
  .c-pip{font-size:28px}
  .avatar,.av-wrap{width:58px;height:58px}
  .avatar{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .bg i,.felt::after,.seat.on .av-wrap::before,.av-badge.low{animation:none}
  .card{animation:none!important}
}