/* ================= 欢乐斗地主 · 横屏 UI ================= */
:root{
  --felt1:#12684a; --felt2:#0a3c2c; --felt3:#072a20;
  --gold:#eecb72; --gold2:#c99a3c; --ink:#12251e;
  --panel:rgba(6,32,24,.72); --line:rgba(238,203,114,.22);
  --txt:#eaf6ef; --muted:#9dc2b2; --red:#d8443c; --win:#7fe0a6; --lose:#ff9b8b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:clamp(9px,1.9vh,16px)}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#072a20;color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  user-select:none;-webkit-user-select:none}
button,input{font-family:inherit}
button{cursor:pointer;border:0;outline:0}
.hidden{display:none !important}
#app{position:relative;width:100vw;height:100dvh;display:flex;flex-direction:column;overflow:hidden}

/* ---------- 顶栏 ---------- */
#topbar{height:4.2rem;min-height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 1.4rem;background:linear-gradient(180deg,rgba(4,28,20,.96),rgba(6,38,27,.86));
  border-bottom:1px solid var(--line);z-index:30;box-shadow:0 .2rem 1.4rem rgba(0,0,0,.35)}
.tb-left,.tb-right{display:flex;align-items:center;gap:.8rem;min-width:20rem}
.tb-right{justify-content:flex-end}
.tb-center{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}
.avatar-btn{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:2rem;padding:.3rem .9rem .3rem .3rem;color:var(--txt);transition:.18s}
.avatar-btn:hover{background:rgba(255,255,255,.13);border-color:var(--line)}
.avatar-emoji{width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(150deg,#f8e3a8,#d7a44c);font-size:1.55rem;line-height:1;box-shadow:0 .15rem .5rem rgba(0,0,0,.3)}
.tb-name{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.tb-name b{font-size:1rem;max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-name small{font-size:.72rem;color:var(--muted);letter-spacing:.04rem}
.brand{display:flex;align-items:center;gap:.5rem;font-size:1.24rem;font-weight:800;letter-spacing:.16rem;
  color:var(--gold);text-shadow:0 .15rem .7rem rgba(0,0,0,.5)}
.brand-suit{font-size:1.7rem}
.coin-box{display:flex;align-items:center;gap:.42rem;background:rgba(0,0,0,.28);border:1px solid var(--line);
  border-radius:2rem;padding:.34rem 1rem;min-width:8rem}
.coin-icon{width:1.45rem;height:1.45rem;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(150deg,#f7dd9a,#cf9c38);color:#4a3008;font-size:.82rem;font-weight:900;box-shadow:0 .1rem .35rem rgba(0,0,0,.35)}
.coin-box b{font-size:1.12rem;color:var(--gold);font-variant-numeric:tabular-nums}
.icon-btn{position:relative;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);font-size:1.2rem;color:var(--txt);display:grid;place-items:center;transition:.18s}
.icon-btn svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{background:rgba(255,255,255,.16)}
.dot{position:absolute;top:.28rem;right:.3rem;width:.48rem;height:.48rem;border-radius:50%;background:#ff6b5b;box-shadow:0 0 .5rem #ff6b5b}
.net-badge{font-size:.8rem;color:#5c7a6d;margin-left:.2rem}
.net-badge.online{color:#66dda0;text-shadow:0 0 .5rem #4fd396}
.net-badge.offline{color:#88938e}

/* ---------- 通用屏幕 ---------- */
.screen{position:relative;flex:1;display:none;overflow:hidden}
.screen.active{display:block}

/* ---------- 大厅 ---------- */
.lobby-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 42%,rgba(31,120,84,.55),transparent 62%),
  radial-gradient(ellipse at 12% 90%,rgba(9,68,48,.8),transparent 55%),
  linear-gradient(160deg,#0a3d2d,#062319 70%);}
.lobby-bg:after{content:"";position:absolute;inset:0;opacity:.08;
  background-image:repeating-linear-gradient(45deg,transparent 0 1.2rem,rgba(255,255,255,.09) 1.2rem 1.25rem)}
.lobby-inner{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4rem;padding:1rem 2rem}
.lobby-title{display:flex;align-items:center;gap:1.6rem}
.lt-card{position:relative;width:4.4rem;height:6rem;border-radius:.5rem;background:linear-gradient(155deg,#fffefb,#eee6d3);
  border:1px solid #d8cfb6;box-shadow:0 .6rem 1.6rem rgba(0,0,0,.5),inset 0 0 0 .18rem rgba(255,255,255,.75);
  color:#1b2c25;display:flex;flex-direction:column;align-items:flex-start;padding:.45rem .6rem;transform:rotate(-14deg)}
.lt-card b{font-size:1.9rem;line-height:1;font-weight:800}
.lt-card i{font-style:normal;font-size:1.5rem;line-height:1}
.lt-card-2{transform:rotate(14deg);color:#c8382e}
.lt-text{text-align:center}
.lt-text h1{margin:0;font-size:3.1rem;letter-spacing:.4rem;color:#fff5da;text-shadow:0 .35rem 1.6rem rgba(0,0,0,.6),0 0 2rem rgba(238,203,114,.35)}
.lt-text p{margin:.5rem 0 0;font-size:1rem;letter-spacing:.24rem;color:var(--muted)}
.mode-row{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}
.mode-card{width:24rem;min-height:9.4rem;display:flex;align-items:center;gap:1.1rem;padding:1.4rem 1.5rem;
  border-radius:1.3rem;border:1px solid rgba(255,255,255,.14);color:var(--txt);text-align:left;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  box-shadow:0 1.1rem 2.6rem rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .18s,box-shadow .18s,border-color .18s}
.mode-card:hover{transform:translateY(-.4rem);border-color:var(--gold);box-shadow:0 1.5rem 3.2rem rgba(0,0,0,.45),0 0 1.6rem rgba(238,203,114,.2)}
.mode-card:active{transform:translateY(0)}
.mode-card.pve{background:linear-gradient(135deg,rgba(32,116,86,.85),rgba(9,54,39,.9))}
.mode-card.pvp{background:linear-gradient(135deg,rgba(150,103,36,.75),rgba(72,46,15,.9))}
.mc-icon{width:3.4rem;height:3.4rem;display:grid;place-items:center;flex:0 0 auto}
.mc-icon svg{width:3.2rem;height:3.2rem;fill:none;stroke:rgba(255,241,205,.95);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 .2rem .5rem rgba(0,0,0,.35))}
.mc-body{flex:1;display:flex;flex-direction:column;gap:.28rem}
.mc-body h2{margin:0;font-size:1.6rem;letter-spacing:.1rem}
.mc-body p{margin:0;font-size:.9rem;color:rgba(255,255,255,.72)}
.mc-tag{align-self:flex-start;margin-top:.35rem;font-size:.76rem;padding:.18rem .7rem;border-radius:1rem;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.15);color:var(--gold)}
.mc-arrow{font-size:2.2rem;color:rgba(255,255,255,.45)}
.notice-bar{width:min(52rem,90vw);display:flex;align-items:center;gap:1rem;padding:.72rem 1.2rem;border-radius:2rem;
  background:rgba(0,0,0,.3);border:1px solid var(--line);cursor:pointer;transition:.18s}
.notice-bar:hover{background:rgba(0,0,0,.45)}
.nb-label{color:var(--gold);font-size:.9rem;white-space:nowrap;font-weight:700}
.nb-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;color:#d8eade}
.nb-more{color:var(--muted);font-size:.84rem;white-space:nowrap}
.lobby-foot{position:absolute;bottom:.9rem;width:100%;text-align:center;font-size:.8rem;color:rgba(255,255,255,.38)}
.offline-tip{color:#ffc59b;margin-left:1rem}

/* ---------- 牌桌 ---------- */
.table-felt{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 44%,rgba(32,132,94,.62),transparent 60%),
  radial-gradient(ellipse at 50% 120%,rgba(4,32,23,.9),transparent 70%),
  linear-gradient(170deg,#0f563d,#072a20 72%)}
.table-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 12rem 4rem rgba(0,0,0,.55)}
.table-top{position:absolute;top:.8rem;left:0;right:0;display:flex;align-items:flex-start;justify-content:center;gap:2.4rem;z-index:5}
.bottom-cards{display:flex;align-items:center;gap:.7rem}
.bc-label{font-size:.85rem;color:var(--muted);writing-mode:vertical-rl;letter-spacing:.2rem}
.bc-list{display:flex;gap:.3rem}
.rate-panel{min-width:9.4rem;background:rgba(0,0,0,.32);border:1px solid var(--line);border-radius:.8rem;padding:.55rem .9rem;
  display:flex;flex-direction:column;gap:.22rem}
.rate-line{display:flex;justify-content:space-between;gap:1.2rem;font-size:.83rem;color:var(--muted)}
.rate-line b{color:var(--txt);font-variant-numeric:tabular-nums}
.rate-line b.gold{color:var(--gold);font-size:1.05rem}
.room-chip{display:flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.32);border:1px solid var(--line);
  border-radius:2rem;padding:.35rem .8rem;font-size:.82rem;color:var(--muted)}
.room-chip b{font-size:1.15rem;letter-spacing:.22rem;color:var(--gold)}
.mini-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:var(--txt);
  border-radius:1rem;padding:.2rem .7rem;font-size:.76rem}
.mini-btn:hover{background:rgba(255,255,255,.2)}

/* 对手 */
.opponent{position:absolute;top:22%;width:19rem;z-index:6;display:flex;flex-direction:column;gap:.6rem}
.opponent.left{left:2.2rem;align-items:flex-start}
.opponent.right{right:2.2rem;align-items:flex-end}
.opp-card{display:flex;align-items:center;gap:.7rem;padding:.5rem .8rem;border-radius:1rem;
  background:var(--panel);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px);min-width:12rem}
.opponent.right .opp-card{flex-direction:row-reverse;text-align:right}
.opp-avatar{width:3rem;height:3rem;display:grid;place-items:center;border-radius:50%;font-size:1.7rem;
  background:linear-gradient(150deg,#f8e3a8,#d7a44c);box-shadow:0 .2rem .6rem rgba(0,0,0,.4);flex:0 0 auto}
.opp-card.active .opp-avatar{box-shadow:0 0 0 .2rem var(--gold),0 0 1.2rem var(--gold)}
.opp-info{display:flex;flex-direction:column;line-height:1.35;flex:1;min-width:0}
.opp-info b{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp-info span{font-size:.75rem;color:var(--muted)}
.opp-info span.landlord{color:var(--gold)}
.opp-count{display:flex;align-items:baseline;gap:.15rem;color:var(--gold)}
.opp-count b{font-size:1.35rem;font-variant-numeric:tabular-nums}
.opp-count small{font-size:.7rem;color:var(--muted)}
.opp-play{min-height:5rem;display:flex;flex-wrap:wrap;gap:0;padding:.3rem .5rem;max-width:19rem}
.bubble{min-height:1.8rem;font-size:1rem;font-weight:700;color:#fff;
  background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:1rem;padding:.2rem .9rem;opacity:0;transition:opacity .2s}
.bubble.show{opacity:1}
.bubble.pass{color:var(--muted)}

/* 中央 */
.table-center{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(46rem,54vw);min-height:9rem;
  display:grid;place-items:center;z-index:4}
.center-play{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;min-height:6rem}
.center-play .card{margin-left:-.9rem}
.center-play .card:first-child{margin-left:0}
.fx-layer{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.fx-text{font-size:2.6rem;font-weight:900;letter-spacing:.3rem;color:var(--gold);
  text-shadow:0 0 1.6rem rgba(238,203,114,.9),0 .4rem 1rem rgba(0,0,0,.7);animation:fxPop 1.4s ease-out forwards;white-space:nowrap}
@keyframes fxPop{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.15)}40%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.1)}}

/* 我的区域 */
.my-zone{position:absolute;left:0;right:0;bottom:0;z-index:8;display:flex;flex-direction:column;align-items:center;
  padding-bottom:.7rem;background:linear-gradient(0deg,rgba(3,24,17,.82),transparent)}
.my-bar{width:100%;display:flex;align-items:flex-end;justify-content:center;gap:1.2rem;padding:0 1rem}
.my-info{display:flex;align-items:center;gap:.5rem;padding:.35rem .7rem;border-radius:1rem;background:var(--panel);border:1px solid rgba(255,255,255,.1);flex:0 0 auto}
.my-avatar{width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:50%;font-size:1.5rem;background:linear-gradient(150deg,#f8e3a8,#d7a44c)}
.my-info>div:last-child{display:flex;flex-direction:column;line-height:1.3}
.my-info b{font-size:.9rem}
.my-info span{font-size:.72rem;color:var(--muted)}
.my-info span.landlord{color:var(--gold)}
.my-hand{display:flex;justify-content:center;align-items:flex-end;min-height:6.6rem;padding-top:1.7rem;max-width:76vw;flex-wrap:nowrap}
.my-count{display:flex;align-items:baseline;gap:.15rem;color:var(--gold);flex:0 0 auto}
.my-count b{font-size:1.4rem}
.my-count small{font-size:.72rem;color:var(--muted)}
.action-bar{display:flex;justify-content:center;align-items:center;gap:.7rem;min-height:3.6rem;margin-top:.3rem;flex-wrap:wrap}
.act-btn{min-width:6.4rem;padding:.62rem 1.5rem;border-radius:2rem;font-size:1.05rem;font-weight:800;letter-spacing:.1rem;
  background:linear-gradient(160deg,#f5d787,#d3a044);color:#3b2708;box-shadow:0 .3rem .9rem rgba(0,0,0,.4);transition:.15s}
.act-btn:hover{filter:brightness(1.08);transform:translateY(-.12rem)}
.act-btn:disabled{opacity:.38;filter:grayscale(.6);cursor:not-allowed;transform:none}
.act-btn.ghost{background:rgba(255,255,255,.1);color:var(--txt);border:1px solid rgba(255,255,255,.22);box-shadow:none}
.act-btn.green{background:linear-gradient(160deg,#6fd6a0,#2c9a6a);color:#06301f}
.act-btn.red{background:linear-gradient(160deg,#f0a68f,#c85a45);color:#3b130b}
.turn-hint{position:absolute;bottom:9.4rem;left:50%;transform:translateX(-50%);font-size:.86rem;color:var(--gold);
  background:rgba(0,0,0,.4);border-radius:1rem;padding:.28rem 1rem;opacity:0;transition:opacity .2s;z-index:9;white-space:nowrap}
.turn-hint.show{opacity:1}

/* ---------- 扑克牌 ---------- */
.card{position:relative;width:3.7rem;height:5.3rem;border-radius:.42rem;flex:0 0 auto;
  background:linear-gradient(160deg,#fffefb,#f0eadb);border:1px solid #c9c0aa;
  box-shadow:0 .2rem .55rem rgba(0,0,0,.45),inset 0 0 0 .1rem rgba(255,255,255,.7);
  color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:.28rem .32rem;
  transition:transform .13s,box-shadow .13s;cursor:pointer;overflow:hidden}
.card.red{color:#c8382e}
.card .c-top{font-size:1rem;font-weight:800;line-height:1;display:flex;flex-direction:column;align-items:center;align-self:flex-start}
.card .c-top i{font-style:normal;font-size:.82rem;line-height:1}
.card .c-mid{position:absolute;right:.22rem;bottom:.12rem;font-size:1.85rem;font-weight:800;opacity:.9;line-height:1}
.card .c-joker{font-size:1.55rem;line-height:1.1;text-align:center;writing-mode:vertical-rl;align-self:center;letter-spacing:.1rem}
.card.back{background:repeating-linear-gradient(45deg,#1d5c8a 0 .4rem,#2c73a4 .4rem .8rem);
  border:1px solid #d8d0b8;box-shadow:0 .2rem .55rem rgba(0,0,0,.45),inset 0 0 0 .16rem #f6efdc}
.card.back:after{content:"";position:absolute;inset:20%;border-radius:.15rem;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45)}
.card.small{width:2.7rem;height:3.9rem;border-radius:.32rem;padding:.18rem .22rem}
.card.small .c-top{font-size:.76rem}
.card.small .c-top i{font-size:.62rem}
.card.small .c-mid{font-size:1.3rem}
.card.small .c-joker{font-size:1.05rem}
.card.tiny{width:2.05rem;height:2.95rem;border-radius:.25rem;padding:.12rem .16rem}
.card.tiny .c-top{font-size:.62rem}
.card.tiny .c-top i{font-size:.5rem}
.card.tiny .c-mid{font-size:.95rem}
.card.tiny .c-joker{font-size:.8rem}
.my-hand .card:not(:first-child){margin-left:-1.48rem}
.my-hand .card:hover{transform:translateY(-.5rem)}
.my-hand .card.selected{transform:translateY(-1.5rem);box-shadow:0 .5rem 1.1rem rgba(0,0,0,.5),0 0 0 .16rem var(--gold)}
.my-hand .card.selected:hover{transform:translateY(-1.7rem)}
.opp-play .card:not(:first-child){margin-left:-1.15rem}
.opp-play .card{pointer-events:none;cursor:default}
.center-play .card{pointer-events:none;cursor:default}
.bc-list .card{pointer-events:none;cursor:default}

/* ---------- 弹窗 ---------- */
.modal-mask{position:absolute;inset:0;background:rgba(0,12,8,.68);backdrop-filter:blur(4px);z-index:40}
.modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:41;
  width:min(34rem,88vw);max-height:88vh;overflow:auto;background:linear-gradient(160deg,#164635,#0c2b21);
  border:1px solid rgba(238,203,114,.3);border-radius:1.2rem;padding:1.3rem 1.5rem 1.4rem;
  box-shadow:0 1.8rem 5rem rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);animation:modalIn .22s ease-out}
@keyframes modalIn{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.modal-head h3{margin:0;font-size:1.3rem;color:var(--gold);letter-spacing:.1rem}
.close-x{width:2rem;height:2rem;border-radius:50%;background:rgba(255,255,255,.08);color:var(--txt);font-size:.9rem}
.close-x:hover{background:rgba(255,255,255,.2)}
.modal-foot{display:flex;gap:.8rem;justify-content:center;margin-top:1.3rem}
.primary-btn,.second-btn,.danger-btn{padding:.7rem 1.8rem;border-radius:2rem;font-size:1rem;font-weight:800;letter-spacing:.08rem;transition:.15s}
.primary-btn{background:linear-gradient(160deg,#f5d787,#d3a044);color:#3b2708;box-shadow:0 .3rem .8rem rgba(0,0,0,.35)}
.second-btn{background:rgba(255,255,255,.1);color:var(--txt);border:1px solid rgba(255,255,255,.2)}
.danger-btn{background:rgba(190,70,55,.22);color:#ffb6a6;border:1px solid rgba(220,100,80,.4)}
.primary-btn:hover,.second-btn:hover,.danger-btn:hover{filter:brightness(1.12)}
.primary-btn:disabled,.second-btn:disabled{opacity:.4;cursor:not-allowed}
.profile-top{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.2rem;padding:.8rem 1rem;border-radius:.9rem;background:rgba(0,0,0,.22)}
.pf-avatar{width:4.6rem;height:4.6rem;border-radius:50%;display:grid;place-items:center;font-size:2.8rem;
  background:linear-gradient(150deg,#f8e3a8,#d7a44c);box-shadow:0 .3rem .9rem rgba(0,0,0,.4)}
.pf-id{display:flex;flex-direction:column;gap:.2rem;align-items:flex-start}
.pf-id span{font-size:.78rem;color:var(--muted)}
.pf-id b{font-size:1.35rem;letter-spacing:.16rem;color:var(--gold)}
.pf-id .mini-btn{margin-top:.25rem}
.form-row{display:flex;gap:.8rem;margin-bottom:1rem;align-items:flex-start}
.form-row>label{width:3.2rem;flex:0 0 auto;font-size:.92rem;color:var(--muted);padding-top:.6rem}
.form-row input{flex:1;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18);border-radius:.6rem;
  padding:.62rem .8rem;color:var(--txt);font-size:1rem;outline:none}
.form-row input:focus{border-color:var(--gold)}
.avatar-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.35rem;flex:1}
.av-item{aspect-ratio:1;display:grid;place-items:center;font-size:1.5rem;border-radius:.55rem;
  background:rgba(255,255,255,.07);border:1px solid transparent;transition:.15s}
.av-item:hover{background:rgba(255,255,255,.16)}
.av-item.sel{background:rgba(238,203,114,.22);border-color:var(--gold);box-shadow:0 0 .6rem rgba(238,203,114,.4)}
.notice-full{white-space:pre-wrap;line-height:1.9;font-size:.98rem;color:#dcefe4;
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.1);border-radius:.8rem;padding:1rem 1.1rem;min-height:7rem;max-height:26vh;overflow:auto}
.room-code-input{display:flex;flex-direction:column;gap:.6rem;align-items:center;margin:.4rem 0 1.2rem}
.room-code-input label{font-size:.9rem;color:var(--muted)}
#joinCode{width:14rem;text-align:center;font-size:2.1rem;letter-spacing:.6rem;text-transform:uppercase;font-weight:800;
  padding:.55rem;border-radius:.8rem;background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--gold);outline:none}
#joinCode:focus{border-color:var(--gold)}
.room-entry-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.room-tip{text-align:center;font-size:.82rem;color:var(--muted);line-height:1.7;margin:1.1rem 0 0}
.code-display{display:flex;align-items:center;justify-content:center;gap:1rem;margin:.3rem 0 1.1rem}
.code-display span{font-size:.9rem;color:var(--muted)}
.code-display b{font-size:2.7rem;letter-spacing:.5rem;color:var(--gold);text-shadow:0 0 1.4rem rgba(238,203,114,.45);font-variant-numeric:tabular-nums}
.seat-list{display:flex;flex-direction:column;gap:.5rem}
.seat-row{display:flex;align-items:center;gap:.8rem;padding:.6rem .9rem;border-radius:.7rem;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08)}
.seat-row .s-av{width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;background:rgba(255,255,255,.1)}
.seat-row .s-name{flex:1;font-size:.98rem}
.seat-row .s-tag{font-size:.78rem;padding:.18rem .7rem;border-radius:1rem;background:rgba(255,255,255,.1);color:var(--muted)}
.seat-row .s-tag.ready{background:rgba(110,220,160,.2);color:#8de6b4}
.seat-row .s-tag.owner{background:rgba(238,203,114,.2);color:var(--gold)}
.result-modal{text-align:center;width:min(30rem,86vw)}
.result-head{margin-bottom:.8rem}
.result-icon{width:4.4rem;height:4.4rem;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  font-size:2.2rem;font-weight:900;color:#3b2708;background:linear-gradient(150deg,#f7dd9a,#cf9c38);
  box-shadow:0 .4rem 1.4rem rgba(0,0,0,.45),0 0 1.6rem rgba(238,203,114,.35)}
.result-head h3{margin:.3rem 0 .2rem;font-size:2rem;color:var(--gold)}
.result-head p{margin:0;color:var(--muted);font-size:.95rem}
.result-details{display:flex;flex-direction:column;gap:.35rem;background:rgba(0,0,0,.24);border-radius:.8rem;padding:.9rem 1.1rem;font-size:.9rem}
.result-details .rd{display:flex;justify-content:space-between;color:var(--muted)}
.result-details .rd b{color:var(--txt);font-variant-numeric:tabular-nums}
.result-delta{margin-top:.9rem;font-size:2.3rem;font-weight:900;font-variant-numeric:tabular-nums}
.result-delta.plus{color:var(--win);text-shadow:0 0 1.4rem rgba(127,224,166,.5)}
.result-delta.minus{color:var(--lose)}

/* Toast & 横屏提示 */
.toast{position:absolute;left:50%;top:16%;transform:translate(-50%,-1rem);z-index:60;opacity:0;pointer-events:none;
  background:rgba(0,0,0,.82);border:1px solid var(--line);color:#fff;padding:.6rem 1.4rem;border-radius:2rem;
  font-size:.95rem;transition:.22s;white-space:nowrap;max-width:80vw;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0)}
.rotate-mask{display:none;position:fixed;inset:0;z-index:99;background:#072a20;color:var(--gold);
  place-items:center;text-align:center;font-size:4rem}
.rotate-mask p{font-size:1.1rem;color:var(--muted)}
@media (orientation:portrait) and (max-width:900px){.rotate-mask{display:grid}}
@media (max-height:420px){
  .lobby-inner{gap:1.2rem}.lt-text h1{font-size:2.3rem}.lt-card{font-size:3rem}
  .mode-card{min-height:7rem;padding:.8rem 1.1rem}.mc-icon{font-size:2.2rem}.mc-body h2{font-size:1.3rem}
  .opponent{top:19%}.my-hand{padding-top:1.2rem}
}