:root{
  --bg:#0b1220; --panel:#1a1d24; --panel2:#22262f; --line:#2c313c;
  --text:#e8eaed; --muted:#9aa3b2; --accent:#f5c542; --accent2:#caa030;
  --red:#e23b3b; --green:#22c55e; --blue:#3a7bff; --orange:#e67e22;
  --felt-1:#2f9e5e; --felt-2:#15703f; --felt-3:#06351c;
  --felt-edge:#c9a25a; --felt-edge-d:#8a5a22;
  --rank1:#f5c542; --rank2:#e23b3b; --rank3:#8aa0b8; --rank4:#22c55e;
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(ellipse at 50% 0%,#1b2740,var(--bg));color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}
#app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;
  box-shadow:0 0 0 1px #ffffff0f,0 30px 80px #0008;overflow:hidden}
.view{min-height:100vh;padding:16px}
.hidden{display:none!important}
.btn{display:block;width:100%;padding:11px;border:none;border-radius:10px;background:var(--panel2);color:var(--text);font-size:15px;cursor:pointer;margin-top:8px;transition:.15s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent2));color:#2a1e02;font-weight:800;box-shadow:0 4px 14px #caa03044}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.link{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px}
.hint{color:var(--muted);font-size:12px;margin-top:8px;min-height:16px}
label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
input,select{width:100%;padding:10px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:15px;outline:none}
input:focus,select:focus{border-color:var(--accent)}
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);background:#000d;padding:10px 16px;border-radius:20px;font-size:13px;opacity:0;transition:.25s;pointer-events:none;z-index:50;border:1px solid #ffffff1a}
.toast.show{opacity:1}

/* 登录/激活 */
.auth-card{max-width:360px;margin:8vh auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 20px 60px #0007}
.logo{text-align:center;font-size:32px;margin:0;letter-spacing:8px;color:var(--accent);text-shadow:0 2px 12px #caa03055}
.sub{text-align:center;color:var(--muted);margin:6px 0 16px}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tab{flex:1;padding:9px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:9px;cursor:pointer}
.tab.on{color:var(--accent);border-color:var(--accent)}

/* 顶部栏 */
.topbar{display:flex;align-items:center;gap:10px;padding:6px 2px 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.topbar .brand{font-weight:800;color:var(--accent);letter-spacing:3px}
.topbar .me{margin-left:auto;color:var(--muted)}

/* 主界面卡片 */
.home-grid{display:flex;flex-direction:column;gap:14px}
.card{background:linear-gradient(160deg,#20242e,#181b22);border:1px solid var(--line);border-radius:14px;padding:16px}
.card h3{margin:0 0 12px;font-size:16px;color:var(--accent)}
.field{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.field span{color:var(--muted);min-width:64px}
.field input,.field select{width:120px}
.k-field{align-items:flex-start}
.k-field small{color:var(--muted);font-size:10px;line-height:1.3}
.k-row{display:flex;gap:6px;flex:1;justify-content:flex-end}
.k-row label{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--muted);text-align:center}
.k-row input{width:52px;padding:6px 4px;font-size:13px;text-align:center}
.empty{color:var(--muted);text-align:center;padding:18px 0;font-size:13px}
.hist-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:.15s}
.hist-item:hover{border-color:var(--accent);transform:translateY(-1px)}
.hist-item .code{font-weight:800;letter-spacing:2px;color:var(--accent)}
.hist-item .meta{color:var(--muted);font-size:12px}
.hist-item .delta{margin-left:auto;font-weight:800}
.delta.win,.pl .d.win,.pay-pos{color:var(--green)} .delta.lose,.pl .d.lose,.pay-neg{color:var(--red)} .delta.tie{color:var(--muted)}

/* ── 游戏桌：绒面 + 金色桌沿（贴近真实牌桌）── */
#view-room{padding:0;background:#0a2a18}
.room-top{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#ffffff0d;border-bottom:1px solid #ffffff14}
.room-top .info{color:#e7eee9;font-size:12px}
.room-top .leave{margin-left:auto}
.table{position:relative;margin:12px;border-radius:26px;padding:18px 12px 22px;min-height:310px;
  background:
    radial-gradient(ellipse 120% 95% at 50% 32%,var(--felt-1) 0%,var(--felt-2) 52%,var(--felt-3) 100%),
    repeating-linear-gradient(0deg,#ffffff09 0 2px,transparent 2px 4px),
    radial-gradient(ellipse 75% 42% at 50% 16%,#ffffff29,transparent 60%);
  box-shadow:inset 0 0 0 8px var(--felt-edge),inset 0 0 0 10px var(--felt-edge-d),
    inset 0 0 70px #0009,0 0 0 1px #0006,0 8px 30px #0007;}
.round-banner{display:block;width:fit-content;margin:0 auto 12px;padding:5px 15px;border-radius:999px;
  background:linear-gradient(180deg,#e8493b,#c62828);color:#fff;font-size:12px;font-weight:800;
  box-shadow:0 3px 10px #c6282873,inset 0 0 0 1px #ffffff40}
.opponents{display:flex;justify-content:space-around;align-items:flex-start;gap:8px;padding:4px 6px 10px}
.opponents .seat{flex:1;min-width:0}
/* 座位：深色玻璃 + 金色头像边 */
.seat{position:relative;background:#06180f99;backdrop-filter:blur(10px) saturate(140%);
  border:1px solid #ffffff29;border-radius:var(--r);padding:8px 9px;text-align:center;
  box-shadow:0 5px 16px #0007,inset 0 1px 0 #ffffff14;transition:transform .15s,box-shadow .15s}
.seat.self{border:1.5px solid var(--accent);background:#14281999;
  box-shadow:0 0 0 3px #f5c54238,0 6px 18px #0007}
.seat.bonus{border-color:#a855f7;box-shadow:0 0 0 3px #a855f773,0 6px 18px #0007}
.seat .avatar{width:40px;height:40px;border-radius:50%;margin:0 auto;
  background:linear-gradient(145deg,#3a4a63,#222d3d);display:flex;align-items:center;justify-content:center;
  font-size:21px;box-shadow:inset 0 0 0 2px #f5c5428c,0 2px 6px #0006}
.seat.self .avatar{width:46px;height:46px;background:linear-gradient(145deg,#4b5680,#2d3566);
  box-shadow:inset 0 0 0 2px var(--accent),0 2px 6px #0006}
.seat .name{font-size:12px;font-weight:700;color:#fff;margin:3px 0;letter-spacing:.3px}
.seat .chips{color:var(--accent);font-weight:800;font-size:12px;display:inline-flex;align-items:center;gap:4px}
.seat .chips::before{content:'';width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe49a,var(--accent));box-shadow:0 0 0 1px #caa03080}
.seat .badge{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;box-shadow:0 2px 6px #0005}
.seat .htype{font-size:11px;color:var(--accent);margin-top:3px;font-weight:700}
.seat .htype.kill{color:#c084fc}
.seat .locked{font-size:10px;color:#cdd6e2}
.seat .locked::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:4px}
.seat .played{display:flex;gap:4px;justify-content:center;margin-top:6px;flex-wrap:wrap}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 2px}
.pub-label{font-size:11px;color:#ffffffe0;font-weight:600;margin-bottom:7px;text-align:center;letter-spacing:.4px}
.pub-cards{display:flex;gap:6px;justify-content:center;padding:9px 13px;border-radius:18px;
  background:#06120b66;box-shadow:inset 0 0 0 1px #ffffff2e,0 4px 14px #0005}
.pub-cards>div{display:flex;flex-direction:column;align-items:center;gap:3px}
.pub-cards>div>div:first-child{font-size:9px;color:#ffffffb0}
.my-zone{display:flex;justify-content:center;margin-top:12px}
.my-zone .seat{width:100%;max-width:330px}
.handbar{background:linear-gradient(180deg,#06140b00,#030c07f2);padding:10px 14px 16px}
.hand-cards{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.hand-title{display:flex;justify-content:space-between;font-size:12px;color:#d7e3db}

/* ── 扑克牌 ── */
.card-p{width:44px;height:62px;border-radius:9px;position:relative;flex-shrink:0;
  background:linear-gradient(160deg,#fff,#f1f5fb);border:1px solid #dde3ec;color:#1f2430;
  font-weight:800;user-select:none;box-shadow:0 3px 8px #0005,inset 0 1px 0 #fff}
.card-p>span:first-child{position:absolute;top:4px;left:6px;font-size:16px;line-height:1;z-index:2}
.card-p .s{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:26px;opacity:.9}
.card-p.mini{width:30px;height:43px;border-radius:7px}
.card-p.mini>span:first-child{font-size:11px;top:3px;left:4px}
.card-p.mini .s{font-size:16px}
.card-p.red{color:var(--red)}
.card-p.joker{background:linear-gradient(145deg,#fde68a,#f59e0b);color:#7a3e00;border-color:#d98a00;
  display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.05;font-size:13px}
.card-p.back{background:repeating-linear-gradient(45deg,#2b6cff 0 5px,#1a4fd6 5px 10px);
  border:1.5px solid #ffffffd9;box-shadow:0 3px 8px #0005,inset 0 0 0 1px #143fb0}
.card-p.back>span{display:none}
.card-p.back::after{content:'捉';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#ffffffe6;font-size:16px;font-weight:800;text-shadow:0 1px 2px #0006}
.card-p.mini.back::after{font-size:12px}
.card-p.used{opacity:.32;filter:grayscale(1)}
.card-p.used::after{content:'✕';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#ff5a4d;font-size:18px;font-weight:900;text-shadow:0 1px 3px #0009}
.card-p.selectable{cursor:pointer;transition:transform .15s,box-shadow .15s}
.card-p.selectable:hover{transform:translateY(-6px)}
.card-p.selected{box-shadow:0 0 0 3px var(--accent),0 8px 18px #f5c54266;transform:translateY(-9px)}
.card-p.dim{opacity:.35}
.card-p.flip{animation:flipIn .42s ease both}
@keyframes flipIn{from{opacity:0;transform:rotateY(90deg) translateY(8px)}to{opacity:1;transform:none}}
.seat.reveal{animation:popIn .34s ease both}
@keyframes popIn{from{opacity:.25;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}

/* 筹码流动 */
.coin-flow{display:flex;flex-direction:column;gap:4px;margin:10px 0}
.coin-line{display:flex;align-items:center;gap:6px;font-size:11px;color:#d7e3db}
.coin-line .coin{width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe49a,var(--accent));box-shadow:0 0 0 1px #caa030;
  animation:coinFly .55s ease both}
@keyframes coinFly{from{transform:translateX(-26px) scale(.6);opacity:0}to{transform:none;opacity:1}}

/* ── 弹层 / 结算 ── */
.overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:40;padding:18px}
.modal{background:linear-gradient(160deg,#20242e,#181b22);border:1px solid var(--line);border-radius:16px;padding:20px;max-width:420px;width:100%;max-height:84vh;overflow:auto;box-shadow:0 24px 70px #000b}
.modal h3{margin:0 0 4px;color:var(--accent)}
.modal .sub{color:var(--muted);font-size:12px;margin-bottom:12px}
.settle-row{display:grid;grid-template-columns:1.45fr .55fr .68fr .68fr .68fr .68fr;gap:4px;padding:7px 2px;border-bottom:1px solid var(--line);align-items:center;font-size:12px;
  animation:popIn .3s ease both}
.settle-row.head{color:var(--muted);font-size:10px;animation:none}
.settle-row .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.settle-row .r{display:inline-block;padding:1px 8px;border-radius:9px;font-size:11px;font-weight:800;color:#fff}
.settle-sub{margin:14px 0 4px;color:var(--accent);font-size:13px}
.settle-note{color:var(--muted);font-size:12px;line-height:1.7}
.settle-note.big{color:var(--text);font-size:14px;font-weight:600}
.modal .foot{display:flex;gap:10px;margin-top:16px}
.share-box{background:var(--panel2);border:1px dashed var(--accent);border-radius:10px;padding:12px;margin:10px 0;text-align:center;word-break:break-all;color:var(--accent);font-weight:700}
.kbd{background:var(--panel2);padding:2px 8px;border-radius:6px;border:1px solid var(--line);font-family:monospace;color:var(--accent);font-weight:700}
.room-code-big{font-size:34px;letter-spacing:8px;text-align:center;color:var(--accent);margin:8px 0;text-shadow:0 2px 16px #caa03055}
.wait-list{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;justify-content:center}
.wait-pill{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:13px}
.pill-host{color:var(--accent);border-color:var(--accent)}

/* 历史明细 */
.detail-back{margin-bottom:12px}
.gj{margin-bottom:18px}
.gj h4{margin:0 0 6px;color:var(--accent)}
.round-block{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px}
.round-block .rh{color:var(--muted);font-size:12px;margin-bottom:6px}
.pl{display:flex;gap:8px;align-items:center;font-size:13px;padding:3px 0}
.pl .t{font-size:11px;padding:1px 7px;border-radius:9px;color:#fff;min-width:42px;text-align:center}
.pl .d{margin-left:auto;font-weight:700}

/* ── 发起游戏配置提示 ── */
.field select{width:168px;padding:8px 6px;font-size:13px}
.field-note{color:var(--muted);font-size:11px;line-height:1.6;margin:4px 0 8px;padding:8px 10px;border-left:2px solid var(--accent2);background:#f5c5420d;border-radius:0 8px 8px 0}

/* ── 分享邀请落地页 / 规则卡片 ── */
.invite-card{max-width:420px;margin:0 auto;background:linear-gradient(160deg,#20242e,#181b22);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 20px 60px #0007}
.invite-card .logo{font-size:26px;letter-spacing:6px}
.invite-status{text-align:center;color:var(--muted);font-size:12px;margin-bottom:8px}
.rule-grid{display:flex;flex-direction:column;gap:6px;margin:4px 0}
.rule-item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);font-size:12px}
.rule-item span{color:var(--muted);flex-shrink:0}
.rule-item b{color:var(--text);font-weight:600;text-align:right;line-height:1.5}
.rule-list{margin:4px 0 0;padding-left:18px;color:var(--muted);font-size:12px;line-height:1.75}
.rule-list li{margin-bottom:4px}
.rule-strip{text-align:center;padding:6px 10px;background:#ffffff0d;color:#e7eee9;font-size:11px;border-bottom:1px solid #ffffff14}
.rule-strip span{color:#ffffff80}
.invite-card .link{display:block;width:100%;margin-top:12px;text-align:center}
.rule-grid+.settle-sub{margin-top:14px}