:root{
  /* ===== 国风糖果 调色板 ===== */
  --green-50:#E8F8EF; --green-100:#C7EFD6; --green-200:#8FE0B0;
  --green-400:#2EC974; --green-500:#1FA85A; --green-600:#178F4C; --green-700:#0F6630;
  --gold-50:#FFF8E0; --gold-100:#FFEDB0; --gold-300:#FFD45C; --gold-500:#F5B324; --gold-700:#D89000; --gold-900:#6B3A00;
  --red-50:#FFEEEC; --red-300:#FF6B5E; --red-500:#E8483B; --red-700:#8B0000;
  --cream-50:#FFFBEC; --cream-100:#FFF6E0; --cream-200:#FBE9C0; --cream-300:#F2D9A0;
  --wood-100:#D9B58A; --wood-300:#A77643; --wood-500:#6B4E33; --wood-700:#3D2817;
  --blue-100:#BBDEFB; --blue-400:#64B5F6; --blue-500:#2196F3; --blue-700:#1565C0;
  --purple-400:#B97AFF; --purple-500:#9B59E8;
  --teal-400:#26A69A; --teal-500:#00897B;
  --orange-400:#FF9800; --orange-500:#F57C00;
  --silver-400:#C0C8D0; --silver-700:#8A96A4;
  --ok:#1FA85A; --warn:#F5B324; --err:#E8483B; --info:#2196F3;
  /* ===== 兼容旧 token 名（保留以防遗漏） ===== */
  --green-deep:#0F6630; --green:#1FA85A; --green-light:#2EC974; --green-mint:#E8F8EF;
  --gold:#F5B324; --gold-light:#FFD45C; --gold-deep:#D89000;
  --cream:#FFF6E0; --cream-deep:#FBE9C0;
  --brown:#3D2817; --brown-light:#6B4E33;
  --red:#E8483B; --red-light:#FF6B5E;
  --blue:#2196F3; --blue-light:#64B5F6; --blue-deep:#1565C0;
  --purple:#9B59E8; --purple-light:#B97AFF;
  --teal:#00897B; --teal-light:#26A69A;
  --orange:#F57C00; --orange-light:#FF9800;
  --silver:#C0C8D0; --silver-deep:#8A96A4;
  --bg:#FFF6E0; --card:#FFFFFF;
  /* ===== 圆角 / 阴影 / 动效 ===== */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:28px; --r-pill:999px;
  --sh-flat:0 1px 0 rgba(61,40,23,.18);
  --sh-card:0 4px 0 var(--wood-300), 0 6px 14px rgba(61,40,23,.22);
  --sh-pop:0 6px 0 var(--wood-500), 0 12px 28px rgba(0,0,0,.35);
  --sh-glow:0 0 0 3px var(--gold-500), 0 0 18px rgba(245,179,36,.7);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(0,0,0,.12);
  --shadow:0 6px 18px rgba(61,40,23,.15);
  --shadow-soft:0 3px 10px rgba(61,40,23,.1);
  --radius:16px; --radius-sm:10px; --radius-lg:22px;
  --ease-pop:cubic-bezier(.2,.8,.2,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --bw-thin:1.5px; --bw:2px; --bw-bold:3px;
  --bd-ink:var(--wood-700); --bd-gold:var(--gold-500);
  --ff-display:"Baloo 2","PingFang SC",sans-serif;
  --ff-body:"Nunito","PingFang SC","Microsoft YaHei",sans-serif;
  --hit-min:44px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Nunito','PingFang SC','Microsoft YaHei',sans-serif;background:#0A0502;background-image:radial-gradient(circle at 30% 20%,rgba(200,48,42,.18),transparent 50%),radial-gradient(circle at 70% 80%,rgba(245,179,36,.10),transparent 50%);min-height:100vh;display:flex;align-items:center;justify-content:center;color:#FFE48A;overflow:hidden}
h1,h2,h3,h4{font-family:'Baloo 2',sans-serif;font-weight:700}
button{font-family:inherit;cursor:pointer}
.app{width:100%;height:100%;max-width:900px;max-height:100vh;background:var(--bg);border-radius:0;overflow:hidden;position:relative;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.4)}
@media(min-width:560px){.app{border-radius:24px;height:min(100vh,560px)}}
.screen{display:none;width:100%;height:100%;position:relative;overflow:hidden;flex:1;flex-direction:column}.screen.active{display:flex}
.hidden{display:none!important}

/* Login */
#screen-login{background:linear-gradient(135deg,var(--green-deep),var(--green) 50%,var(--green-light));flex-direction:row;align-items:stretch}
.login-left{width:42%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px;position:relative}
.login-left h1{font-size:30px;text-shadow:0 3px 6px rgba(0,0,0,.2);margin-bottom:4px}
.login-left .tagline{font-size:12px;opacity:.92;font-weight:600}
.login-left .features{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.login-left .feature{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;background:rgba(255,255,255,.15);padding:6px 12px;border-radius:20px}
.login-right{flex:1;display:flex;align-items:center;justify-content:center;background:#fff;padding:20px}
.login-card{width:100%;max-width:320px}
.login-card h2{font-size:20px;color:var(--brown);margin-bottom:2px}
.login-card .sub{font-size:12px;color:var(--brown-light);font-weight:600;margin-bottom:14px}
.input-group{margin-bottom:10px}
.input-group label{font-size:11px;font-weight:800;color:var(--brown-light);margin-left:4px;display:block;margin-bottom:4px}
.input-group input{width:100%;padding:11px 14px;border-radius:12px;border:2px solid var(--cream-deep);font-size:14px;font-weight:600;color:var(--brown);background:var(--cream);outline:none}
.input-group input:focus{border-color:var(--green);background:#fff}
.btn-primary{width:100%;padding:12px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--green),var(--green-light));color:#fff;font-family:'Baloo 2';font-size:15px;font-weight:700;box-shadow:0 4px 0 var(--green-deep),0 6px 12px rgba(31,168,90,.3);transition:.1s}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--green-deep)}
.btn-text{width:100%;text-align:center;font-size:12px;color:var(--brown-light);font-weight:700;margin-top:10px;background:none;border:none}

/* App Shell */
.app-shell{display:flex;width:100%;height:100%;flex:1;overflow:hidden}
.left-nav{width:64px;background:linear-gradient(180deg,var(--green-deep),var(--green));display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;flex-shrink:0}
.left-nav .logo-mini{width:40px;height:40px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:8px;font-family:'Baloo 2';font-weight:800;color:var(--green-deep);font-size:18px}
.left-nav .nav-btn{width:50px;height:50px;border-radius:12px;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;color:rgba(255,255,255,.7);transition:.2s;font-size:9px;font-weight:700}
.left-nav .nav-btn svg{width:20px;height:20px}
.left-nav .nav-btn.active{background:rgba(255,255,255,.2);color:#fff}
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.top-strip{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#fff;box-shadow:var(--shadow-soft);flex-shrink:0}
.page-title{font-family:'Baloo 2';font-size:18px;color:var(--brown)}
.currency-strip{display:flex;gap:8px}
.cmini{display:flex;align-items:center;gap:4px;background:var(--cream);padding:4px 10px;border-radius:14px;font-size:12px;font-weight:700;color:var(--brown)}
.cmini .dot{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:800}
.cmini .dot.g{background:var(--gold)}.cmini .dot.s{background:var(--silver-deep)}
.content-scroll{flex:1;overflow-y:auto;padding:12px}

/* Lobby game tiles */
.games-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px}
.game-tile{min-width:150px;height:90px;border-radius:14px;padding:10px;color:#fff;position:relative;overflow:hidden;cursor:pointer;flex-shrink:0;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-soft)}
.game-tile.texas{background:linear-gradient(135deg,var(--blue-deep),var(--blue-light))}
.game-tile.ddz{background:linear-gradient(135deg,#C62828,#FF6B5E)}
.game-tile.wsk{background:linear-gradient(135deg,#6A1B9A,var(--purple-light))}
.game-tile.clb{background:linear-gradient(135deg,var(--teal),var(--teal-light))}
.game-tile.jhw{background:linear-gradient(135deg,var(--orange),var(--orange-light))}
.game-tile.more{background:linear-gradient(135deg,#555,#888)}
.game-tile .gt-name{font-family:'Baloo 2';font-size:15px;font-weight:700}
.game-tile .gt-desc{font-size:10px;opacity:.9;font-weight:600}
.game-tile .gt-play{font-size:11px;font-weight:700;margin-top:4px}

.lobby-bottom{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.quick-row{display:flex;gap:8px}
.quick-card{flex:1;background:#fff;border-radius:12px;padding:10px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-soft);cursor:pointer}
.qc-ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.qc-ic svg{width:16px;height:16px;color:#fff}
.qc-tx{font-size:12px;font-weight:800;color:var(--brown)}.qc-sub{font-size:10px;color:var(--silver-deep);font-weight:600}
.activity-strip{background:linear-gradient(135deg,var(--gold),var(--gold-light));border-radius:12px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;color:#fff;box-shadow:var(--shadow-soft);cursor:pointer}
.activity-strip h4{font-size:14px}.activity-strip p{font-size:11px;opacity:.9;font-weight:600}
.as-btn{background:rgba(255,255,255,.3);border:none;color:#fff;padding:6px 14px;border-radius:10px;font-weight:700;font-size:12px}

/* Rooms */
.rooms-toolbar{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.tab-pill{padding:5px 12px;border-radius:9px;border:1.5px solid var(--cream-deep);font-size:11px;font-weight:700;color:var(--brown-light);background:#fff;cursor:pointer}
.tab-pill.active{background:var(--green);color:#fff;border-color:var(--green)}
.room-tile{background:#fff;border-radius:12px;padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-soft)}
.rt-name{font-weight:800;font-size:13px;color:var(--brown)}.rt-info{font-size:10px;color:var(--silver-deep);font-weight:600}
.rt-right{display:flex;align-items:center;gap:10px}.rt-players{font-family:'Baloo 2';font-size:18px;color:var(--green);font-weight:800}
.rt-join{background:var(--green);color:#fff;border:none;padding:7px 16px;border-radius:9px;font-weight:700;font-size:12px}

/* Room (waiting) */
.room-wait{display:flex;flex-direction:column;height:100%}
.room-topbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--green-deep);color:#fff;flex-shrink:0}
.tt-btn{background:rgba(255,255,255,.2);border:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}.tt-btn svg{width:18px;height:18px;display:block}
.tt-badge{background:rgba(255,255,255,.2);padding:3px 9px;border-radius:8px;font-size:11px;font-weight:700}
.room-seats{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;padding:14px;align-content:center}
.wait-seat{background:#fff;border-radius:14px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:var(--shadow-soft);min-height:130px;justify-content:center;position:relative}
.wait-seat.empty{border:2px dashed var(--cream-deep);color:var(--silver-deep)}
.wait-seat .av{width:44px;height:44px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:4px}.wait-seat .av svg{width:24px;height:24px;color:#fff}
.wait-seat .nm{font-weight:800;font-size:13px;color:var(--brown)}
.wait-seat .role{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px}
.wait-seat .role.host{background:var(--gold);color:#fff}.wait-seat .role.bot{background:var(--purple);color:#fff}
.wait-seat .ready-tag{font-size:10px;font-weight:800;color:var(--green)}.wait-seat .not-ready{color:var(--silver-deep)}
.room-actions{display:flex;gap:8px;padding:12px;flex-shrink:0}
.room-actions button{flex:1;padding:11px;border-radius:11px;border:none;font-family:'Baloo 2';font-weight:700;font-size:13px}
.btn-ready{background:var(--green);color:#fff;box-shadow:0 3px 0 var(--green-deep)}
.btn-unready{background:var(--cream);color:var(--brown)}
.btn-bot{background:var(--purple);color:#fff;box-shadow:0 3px 0 #6a1b9a}
.btn-start{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;box-shadow:0 3px 0 var(--brown)}
.btn-invite{background:var(--blue);color:#fff}

/* Table */
.table-shell{display:flex;flex-direction:column;height:100%;background:radial-gradient(ellipse at center,#1a7a3e,#0d4f28)}
.table-topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:rgba(0,0,0,.4);color:#fff;flex-shrink:0}
.table-topbar .tt-left{display:flex;align-items:center;gap:6px}.table-topbar .tt-right{display:flex;gap:6px}
.table-area{flex:1;position:relative;overflow:hidden}
.poker-table-oval{position:absolute;inset:30px 40px 90px;border-radius:50%;background:radial-gradient(ellipse at center,#2aa055,#157a3e);box-shadow:inset 0 0 40px rgba(0,0,0,.3),0 8px 30px rgba(0,0,0,.4)}
.pt-logo{position:absolute;top:14px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.5);font-family:'Baloo 2';font-weight:800;text-align:center}.pt-logo small{display:block;font-size:10px;font-weight:600}
.seats-layer{position:absolute;inset:0}
.seat{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;width:60px}
.seat .av{width:40px;height:40px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;border:3px solid rgba(255,255,255,.3)}.seat .av svg{width:22px;height:22px;color:#fff}
.seat.self .av{background:var(--blue);border-color:var(--gold-light)}
.seat.turn .av{border-color:var(--gold-light);box-shadow:0 0 12px var(--gold-light)}
.seat.folded{opacity:.4}
.seat .nm{font-size:10px;font-weight:700;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .ch{font-size:9px;font-weight:700;background:rgba(0,0,0,.5);padding:1px 6px;border-radius:6px}
.seat .bet{font-size:9px;font-weight:700;color:var(--gold-light)}
.seat .hc{display:flex;gap:1px}.seat .hc .cb{width:8px;height:11px;border-radius:2px;background:repeating-linear-gradient(45deg,#1a3a6b,#1a3a6b 2px,#2456a0 2px,#2456a0 4px);border:1px solid #fff}
.role-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:8px;font-weight:800;padding:1px 6px;border-radius:6px;white-space:nowrap}
.role-badge.host,.role-badge.dealer{background:var(--gold-deep)}.role-badge.bot{background:var(--purple)}
.center-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.center-play .last-play{display:flex;gap:3px}.center-play .play-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.8)}
.bid-log{min-width:170px}.bid-log .bid-row{display:flex;justify-content:space-between;gap:18px;font-size:11px;font-weight:700;color:rgba(255,255,255,.85);padding:3px 10px;background:rgba(0,0,0,.4);border-radius:6px;margin-top:4px;min-width:150px}
.bid-log .bid-row .bv{color:rgba(255,255,255,.65)}.bid-log .bid-row .bv.hi{color:var(--gold-light)}
.community-zone{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:4px}
.pot-chip{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:var(--gold-light);font-family:'Baloo 2';font-weight:800;font-size:13px;padding:4px 14px;border-radius:14px}

/* Cards */
.pcard{width:34px;height:48px;border-radius:5px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;color:var(--red);box-shadow:0 2px 4px rgba(0,0,0,.3);flex-shrink:0;line-height:1}
.pcard.black{color:#222}
.pcard .r{font-size:13px;font-family:'Baloo 2'}.pcard .s{font-size:12px}
.pcard.back{background:repeating-linear-gradient(45deg,#1a3a6b,#1a3a6b 3px,#2456a0 3px,#2456a0 6px);border:1px solid #fff}
.pcard.joker{color:var(--gold-deep)}
.pcard.joker.black{color:#222}
.my-hand{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);display:flex;gap:0;z-index:8;max-width:96%;flex-wrap:nowrap;overflow-x:auto;justify-content:center;padding:4px 2px}
.my-hand .pcard{cursor:pointer;transition:.1s;border:2px solid transparent;margin-left:-16px}
.my-hand .pcard:first-child{margin-left:0}
.my-hand .pcard.selected{transform:translateY(-10px);border-color:var(--gold-light);box-shadow:0 0 12px var(--gold-light)}
.action-bar{height:56px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;background:rgba(0,0,0,.55);flex-shrink:0;flex-wrap:wrap}
.act-btn{padding:8px 14px;border-radius:11px;border:none;font-family:'Baloo 2';font-size:13px;font-weight:700;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.3);transition:.1s;display:flex;flex-direction:column;align-items:center;gap:1px}
.act-btn:active{transform:translateY(2px)}
.act-btn .sub{font-size:8px;font-weight:600;opacity:.85}
.act-btn.fold{background:linear-gradient(135deg,#E8483B,#C62828)}
.act-btn.check,.act-btn.pass{background:linear-gradient(135deg,#666,#444)}
.act-btn.call{background:linear-gradient(135deg,var(--green),var(--green-deep))}
.act-btn.raise{background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.act-btn.allin{background:linear-gradient(135deg,#E8483B,#FF6B5E)}
.act-btn.play{background:linear-gradient(135deg,var(--green),var(--green-light))}
.act-btn.draw{background:linear-gradient(135deg,var(--teal),var(--teal-light))}
.act-btn:disabled{opacity:.45;cursor:not-allowed}

/* score / ranking panels */
.info-panel{position:absolute;top:46px;right:8px;background:rgba(0,0,0,.55);border-radius:10px;padding:7px 10px;color:#fff;font-size:10px;z-index:6}
.info-panel h5{font-size:11px;margin-bottom:3px;color:var(--gold-light)}.info-panel .row{display:flex;justify-content:space-between;gap:12px;font-weight:600}

/* Modals */
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:200;display:none;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal{background:#fff;border-radius:18px;padding:16px;width:90%;max-width:420px;max-height:90%;overflow-y:auto}
.modal h3{text-align:center;font-size:17px;margin-bottom:12px}
.modal .handle{width:36px;height:4px;background:var(--cream-deep);border-radius:2px;margin:0 auto 12px}
.form-row{margin-bottom:10px}
.form-row label{font-size:12px;font-weight:800;color:var(--brown);display:block;margin-bottom:4px}
.opt-row{display:flex;gap:6px;flex-wrap:wrap}
.opt{padding:6px 12px;border-radius:9px;border:1.5px solid var(--cream-deep);font-size:12px;font-weight:700;color:var(--brown-light);background:#fff;cursor:pointer}
.opt.active{background:var(--green);color:#fff;border-color:var(--green)}
.form-row input{width:100%;padding:9px 12px;border-radius:10px;border:1.5px solid var(--cream-deep);font-size:13px;font-weight:600;background:var(--cream);outline:none}
.game-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px}
.gp-item{border:1.5px solid var(--cream-deep);border-radius:10px;padding:8px 4px;text-align:center;cursor:pointer;background:#fff}
.gp-item.active{border-color:var(--green);background:var(--green-mint)}
.gp-item .gp-nm{font-size:10px;font-weight:700;color:var(--brown)}
.modal-actions{display:flex;gap:8px;margin-top:14px}
.modal-actions button{flex:1;padding:11px;border-radius:11px;border:none;font-family:'Baloo 2';font-size:14px;font-weight:700}
.ma-cancel{background:var(--cream);color:var(--brown-light)}.ma-confirm{background:var(--green);color:#fff;box-shadow:0 3px 0 var(--green-deep)}
.result-card{text-align:center;padding:16px}
.result-card h2{font-size:20px;color:var(--gold-deep)}
.result-card .r-list{margin:12px 0;text-align:left;font-size:12px;font-weight:600;color:var(--brown-light)}
.result-card .r-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--cream-deep)}
.result-card .r-row.win{color:var(--green)}.result-card .r-row.lose{color:var(--red)}
.toast{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:8px 16px;border-radius:10px;font-size:12px;font-weight:600;z-index:300;opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1}

/* profile */
.profile-grid{display:flex;flex-direction:column;gap:12px}
.asset-box{background:#fff;border-radius:14px;padding:14px;box-shadow:var(--shadow-soft)}
.asset-row{display:flex;gap:10px;margin-bottom:12px}
.asset-chip{flex:1;background:var(--cream);border-radius:10px;padding:10px;text-align:center}
.asset-chip .al{font-size:11px;color:var(--brown-light);font-weight:700}.asset-chip .av{font-family:'Baloo 2';font-size:20px;font-weight:800;color:var(--brown)}
.asset-chip.gold .av{color:var(--gold-deep)}
.recharge-grid{display:flex;gap:6px;margin-bottom:8px}
.rc-item{flex:1;border:1.5px solid var(--cream-deep);border-radius:9px;padding:8px 4px;text-align:center;cursor:pointer;position:relative}
.rc-item.active{border-color:var(--green);background:var(--green-mint)}
.rc-item .coins{font-family:'Baloo 2';font-weight:800;color:var(--brown);font-size:14px}
.rc-item .price{font-size:11px;color:var(--red);font-weight:700}
.rc-item .bonus{position:absolute;top:-6px;right:-4px;background:var(--red);color:#fff;font-size:8px;padding:1px 5px;border-radius:5px}
.menu-list{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-soft)}
.menu-row{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--cream-deep);cursor:pointer}
.menu-row:last-child{border:none}
.mr-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center}.mr-icon svg{width:16px;height:16px;color:#fff}
.mr-text{flex:1;font-size:13px;font-weight:700;color:var(--brown)}
.mr-val{font-size:11px;color:var(--silver-deep);font-weight:600}
.checkin-grid{display:flex;gap:5px;margin-top:8px}
.checkin-grid .day{flex:1;text-align:center;padding:6px 0;border-radius:7px;background:var(--cream);font-size:11px;font-weight:700;color:var(--brown-light)}
.checkin-grid .day.done{background:var(--green);color:#fff}.checkin-grid .day.today{background:var(--gold);color:#fff}

/* ============ 跨平台自适应布局系统（纯 CSS，无 JS） ============
   四层策略：①布局差异 ②交互兼容 ③动态缩放 ④资源优化
   tier 断点基于宽度+方向，适配横屏为主 */
:root{
  /* 基准单位 = phone 横屏；tablet/desktop 由媒体查询覆盖 */
  --tile-w:150px; --tile-h:90px;
  --card-w:34px;  --card-h:48px;
  --nav-w:64px;   --nav-btn:50px;
  --seat:60px;    --av:40px;
  --pad:12px;     --title-fs:18px;
  --act-fs:13px;  --act-pad:8px 14px;
  --hit:44px;                       /* 触摸最小点击区（iOS HIG 44 / Material 48） */
}

/* —— ④ 资源优化：动态视口高度，避免移动端地址栏抖动 —— */
@supports (height:100dvh){html,body{height:100dvh}.app{height:100%}}
html,body{height:100vh;height:100dvh}

/* —— ① 布局差异：竖屏锁定提示，隐藏 App —— */
.rotate-hint{display:none;position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#0F6630,#1FA85A);align-items:center;justify-content:center;flex-direction:column;gap:14px;color:#fff;text-align:center;padding:30px}
.rotate-hint .rh-icon{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;animation:rh-rot 2.4s ease-in-out infinite}
.rotate-hint .rh-icon svg{width:36px;height:36px}
.rotate-hint .rh-text{font-family:'Baloo 2',sans-serif;font-size:22px;font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.rotate-hint .rh-sub{font-size:13px;font-weight:600;opacity:.92;max-width:280px;line-height:1.5}
@keyframes rh-rot{0%,40%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}
@media (orientation:portrait) and (max-width:1100px){
  .app{display:none!important}
  .rotate-hint{display:flex}
}

/* —— ① 布局差异：tier 框架（全屏 vs 居中卡片） —— */
@media (max-width:899px),(orientation:landscape) and (max-height:520px){
  .app{max-width:100%;max-height:100%;border-radius:0;height:100%;box-shadow:none}
}
@media (min-width:900px) and (min-height:560px) and (orientation:landscape){
  .app{max-width:900px;height:min(100dvh,560px);border-radius:24px}
}

/* —— ③ 动态缩放：tablet/desktop 覆盖尺寸变量 —— */
@media (min-width:1024px) and (orientation:landscape){
  :root{--tile-w:185px;--tile-h:112px;--card-w:42px;--card-h:60px;--nav-w:78px;--nav-btn:60px;--seat:74px;--av:48px;--pad:18px;--title-fs:22px;--act-fs:15px;--act-pad:10px 18px}
  .app{max-width:1100px;height:min(100dvh,700px);border-radius:24px}
  .room-seats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .wait-seat{min-height:160px}
  .pcard .r{font-size:16px}.pcard .s{font-size:14px}
  .left-nav .nav-btn svg{width:24px;height:24px}
  .action-bar{height:64px}
}
@media (min-width:1440px) and (orientation:landscape){
  :root{--tile-w:200px;--tile-h:120px;--card-w:46px;--card-h:66px;--title-fs:24px}
  .app{max-width:1200px;height:min(100dvh,760px)}
}

/* —— ③ 动态缩放：关键元素引用变量（后声明覆盖原 px） —— */
.game-tile{min-width:var(--tile-w);height:var(--tile-h)}
.pcard{width:var(--card-w);height:var(--card-h)}
.left-nav{width:var(--nav-w)}
.left-nav .nav-btn{width:var(--nav-btn);height:var(--nav-btn)}
.seat{width:var(--seat)}
.seat .av{width:var(--av);height:var(--av)}
.content-scroll{padding:var(--pad)}
.page-title{font-size:var(--title-fs)}
.act-btn{font-size:var(--act-fs);padding:var(--act-pad)}

/* —— ② 交互兼容：触摸设备加大点击区、去 hover 依赖 —— */
@media (hover:none) and (pointer:coarse){
  .act-btn,.nav-btn,.btn-primary,.rt-join,.gp-item,.opt,.rc-item,.menu-row,.game-tile{min-height:var(--hit)}
  .pcard{cursor:default}
  .my-hand .pcard:active{transform:translateY(-10px)}
  .game-tile:active{transform:scale(.97)}
  .btn-primary:active,.act-btn:active{transform:translateY(2px)}
}
/* —— ② 交互兼容：鼠标设备启用 hover 反馈 —— */
@media (hover:hover) and (pointer:fine){
  .game-tile{transition:transform .15s,box-shadow .15s}
  .game-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .btn-primary:hover,.act-btn:hover,.rt-join:hover,.btn-ready:hover,.btn-start:hover{filter:brightness(1.08)}
  .my-hand .pcard{cursor:pointer}
  .my-hand .pcard:hover{transform:translateY(-5px)}
  .menu-row:hover{background:var(--cream)}
  .opt:hover,.rc-item:hover,.gp-item:hover{border-color:var(--green)}
}