:root{
  --bg:#06121a; --bg2:#0a1e28; --felt:#0d3b34; --felt2:#092a25;
  --cream:#f6e7c8; --cream2:#efd9ae; --ink:#20262b;
  --red:#c8402f; --red2:#a93022; --gold:#e8b45a; --gold2:#c9923a;
  --blue:#6fc7d8; --blue2:#3f9cae; --text:#e9f5f6; --muted:#8fa9ad;
  --line:rgba(255,255,255,.09); --panel:rgba(11,31,39,.88);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --radius:18px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; color:var(--text); font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(63,156,174,.18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(232,180,90,.10), transparent 55%),
    linear-gradient(160deg,#06121a 0%,#081a22 45%,#06141b 100%);
  min-height:100vh; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle at 20% 30%, rgba(255,255,255,.035) 0 1px, transparent 1.5px),
                   radial-gradient(circle at 70% 60%, rgba(255,255,255,.03) 0 1px, transparent 1.5px);
  background-size:140px 140px, 210px 210px;
}
button,input{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--muted)}

#app{min-height:100vh; display:flex; flex-direction:column; position:relative; z-index:1}

/* ---------- top ---------- */
#topbar{
  height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(6,18,26,.92),rgba(6,18,26,.6)); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand-fish{font-size:26px; filter:drop-shadow(0 4px 10px rgba(111,199,216,.35))}
.brand b{display:block; font-size:16px; letter-spacing:.08em}
.brand small{display:block; color:var(--muted); font-size:11px; margin-top:3px; letter-spacing:.12em}
.top-mid{display:flex; gap:8px; align-items:center}
.top-right{display:flex; align-items:center; gap:10px}
.me{font-size:13px; color:var(--muted); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pill{
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; border-radius:999px;
  background:rgba(111,199,216,.10); border:1px solid rgba(111,199,216,.25); color:var(--blue);
  font-size:12px; letter-spacing:.05em; white-space:nowrap;
}
.pill.ghost{background:rgba(255,255,255,.04); border-color:var(--line); color:var(--muted)}
.scorepill{cursor:pointer; font-family:inherit}
.scorepill b{color:var(--gold); margin:0 2px}
.scorebox{width:min(560px,100%)}
.scorelist{display:flex; flex-direction:column; gap:5px; max-height:52vh; overflow-y:auto}
.scorerow{display:grid; grid-template-columns:28px 1fr auto auto; gap:8px; align-items:center; padding:7px 9px; border:1px solid var(--line); border-radius:9px; font-size:12px}
.scorerow .rk{color:var(--gold); font-weight:700; text-align:right}
.scorerow .nm{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.scorerow .tier{font-size:10px; color:var(--blue)}
.scorerow .coin{color:var(--gold); font-family:ui-monospace,Consolas,monospace}
.scorerow.me{border-color:rgba(232,180,90,.5); background:rgba(232,180,90,.07)}
.dot{width:7px;height:7px;border-radius:50%;background:#7ad39a;box-shadow:0 0 0 4px rgba(122,211,154,.12)}
.pill.off .dot{background:#d97a6c; box-shadow:0 0 0 4px rgba(217,122,108,.12)}

/* ---------- generic ---------- */
main{flex:1; width:100%; max-width:1180px; margin:0 auto; padding:26px 22px 40px}
.btn{
  border:1px solid var(--line); background:rgba(255,255,255,.055); color:var(--text);
  padding:10px 16px; border-radius:12px; transition:.15s ease; font-size:14px;
}
.btn:hover{background:rgba(255,255,255,.1); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,#e8b45a,#cf963c); color:#2a1c07; border-color:#f0c878; font-weight:700}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.btn.tiny{padding:6px 10px; font-size:12px; border-radius:9px}
.btn.big{width:100%; padding:14px; font-size:16px; border-radius:14px; margin-top:14px}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
input{
  background:rgba(0,0,0,.25); border:1px solid var(--line); color:var(--text);
  border-radius:11px; padding:11px 13px; outline:none; transition:.15s; width:100%;
}
input:focus{border-color:rgba(111,199,216,.55); box-shadow:0 0 0 3px rgba(111,199,216,.12)}
h1,h2,h3{margin:0; letter-spacing:.04em}

/* ---------- lobby ---------- */
.hero{text-align:center; padding:26px 0 22px}
.hero-fish{position:relative; width:110px; height:90px; margin:0 auto 6px}
.fish-body{font-size:64px; display:inline-block; animation:swim 4.5s ease-in-out infinite; filter:drop-shadow(0 12px 24px rgba(111,199,216,.35))}
@keyframes swim{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(6px,-8px) rotate(3deg)}}
.bubble{position:absolute; border:1px solid rgba(111,199,216,.55); border-radius:50%; opacity:0; animation:bub 3.6s infinite}
.b1{width:9px;height:9px; left:78px; top:14px; animation-delay:.2s}
.b2{width:6px;height:6px; left:88px; top:2px; animation-delay:1.1s}
.b3{width:12px;height:12px; left:70px; top:-4px; animation-delay:2s}
@keyframes bub{0%{transform:translateY(8px);opacity:0}20%{opacity:.9}100%{transform:translateY(-34px);opacity:0}}
.hero h1{font-size:38px; letter-spacing:.16em; background:linear-gradient(180deg,#fff,#b9dfe6); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .sub{color:#a8c4c9; font-size:15px; line-height:1.9; margin:12px 0 0}
.hero-tags{display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap}
.hero-tags span{font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 10px}

.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); margin-bottom:16px; backdrop-filter:blur(10px);
}
.panel-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap}
.panel h2{font-size:15px; letter-spacing:.12em; color:#cfe6e9}
.namefield{display:flex; flex-direction:column; gap:6px; font-size:11px; color:var(--muted); letter-spacing:.1em; min-width:190px}
.namefield input{padding:8px 11px}

.games{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.gamecard{
  position:relative; text-align:left; padding:16px 15px 14px; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015)); color:var(--text);
  transition:.18s ease; min-height:118px; overflow:hidden;
}
.gamecard:hover{transform:translateY(-3px); border-color:rgba(111,199,216,.38); background:linear-gradient(160deg,rgba(111,199,216,.12),rgba(255,255,255,.02))}
.gamecard.active{border-color:var(--gold); box-shadow:0 0 0 1px rgba(232,180,90,.4), 0 10px 26px rgba(232,180,90,.12)}
.gamecard.disabled{opacity:.48; cursor:not-allowed}
.gamecard .gc-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.gamecard .gc-name{font-size:18px; font-weight:700; letter-spacing:.06em}
.gamecard .gc-tag{font-size:10px; color:var(--gold); border:1px solid rgba(232,180,90,.35); border-radius:999px; padding:3px 8px; white-space:nowrap}
.gamecard .gc-players{font-size:11px; color:var(--blue); margin-top:4px; letter-spacing:.08em}
.gamecard .gc-desc{font-size:12px; color:var(--muted); line-height:1.6; margin-top:10px}
.gamecard .gc-check{position:absolute; right:12px; bottom:12px; width:20px;height:20px;border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:12px; color:transparent}
.gamecard.active .gc-check{background:var(--gold); border-color:var(--gold); color:#2a1c07}

.options{display:flex; gap:18px; flex-wrap:wrap; margin-top:16px}
.check{display:flex; align-items:center; gap:8px; font-size:13px; color:#c7dadd; cursor:pointer}
.check input{width:17px; height:17px; accent-color:#e8b45a}
.check em{font-style:normal; color:var(--muted); font-size:11px}
.seatcount{gap:8px}
.seatcount select{background:rgba(0,0,0,.25);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:6px 8px;font:inherit;font-size:12px}

.joinpanel{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.joinpanel p{margin:6px 0 0; font-size:12px}
.joinrow{display:flex; gap:10px; min-width:300px; flex:1; max-width:380px}
.joinrow input{text-transform:uppercase; letter-spacing:.28em; font-weight:700; text-align:center}
.joinrow .btn{white-space:nowrap; min-width:76px}

.lobby-foot{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.note{border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:rgba(255,255,255,.025)}
.note b{display:block; font-size:12px; color:var(--gold); letter-spacing:.1em; margin-bottom:6px}
.note span{font-size:12px; color:var(--muted); line-height:1.7}

/* ---------- room ---------- */
#room{display:flex; flex-direction:column; gap:12px}
.roomhead{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.roomid{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
#roomGame{font-weight:700; letter-spacing:.1em}
#roomCode{font-family:ui-monospace,Consolas,monospace; font-size:19px; letter-spacing:.22em; color:var(--gold); background:rgba(232,180,90,.08); border:1px dashed rgba(232,180,90,.3); padding:5px 10px; border-radius:9px}
.roomactions{display:flex; gap:8px}
#sideToggle{display:none}

.roomgrid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:14px; align-items:stretch; min-height:calc(100vh - 250px)}
.tablewrap{position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow); min-height:520px}
.table{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 42%, #145247 0%, #0d3b34 45%, #082823 100%);
}
.table::before{
  content:""; position:absolute; inset:14px; border-radius:16px;
  border:1px solid rgba(232,180,90,.16); box-shadow:inset 0 0 80px rgba(0,0,0,.32);
  pointer-events:none;
}
.table::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 2px,transparent 2px 4px);
}

.petbubble{
  position:absolute; left:50%; top:16px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; max-width:min(92%,560px);
  background:linear-gradient(180deg,rgba(8,24,30,.96),rgba(8,24,30,.88));
  border:1px solid rgba(111,199,216,.4); border-radius:16px; padding:10px 14px;
  box-shadow:0 12px 30px rgba(0,0,0,.4); z-index:8;
  animation:pop .22s ease-out;
}
.petbubble::after{content:""; position:absolute; left:50%; bottom:-7px; width:12px;height:12px; background:#08181e; border-right:1px solid rgba(111,199,216,.4); border-bottom:1px solid rgba(111,199,216,.4); transform:translateX(-50%) rotate(45deg)}
.pb-avatar{font-size:20px}
#petText{font-size:14px; line-height:1.5; color:#dff2f5}
@keyframes pop{from{opacity:0; transform:translate(-50%,-6px) scale(.96)}to{opacity:1; transform:translate(-50%,0) scale(1)}}

.subtitles{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:7; display:flex; flex-direction:column; gap:6px; width:min(92%,620px); pointer-events:none}
.subtitles .sub{display:flex; gap:8px; align-items:baseline; background:rgba(3,12,16,.76); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:6px 10px; font-size:12px; color:#d6e8ea; animation:fadein .2s}
.subtitles .sub b{color:var(--blue); font-weight:600; white-space:nowrap}
.subtitles .sub .t{color:var(--gold); font-size:10px; margin-left:auto}

@keyframes fadein{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:translateY(0)}}

/* seats in table */
.seatrow{position:absolute; display:flex; gap:12px; z-index:4}
.seatrow.top{top:18px; left:50%; transform:translateX(-50%); flex-direction:row}
.seatrow.mid{top:50%; width:100%; justify-content:space-between; padding:0 18px; transform:translateY(-50%)}
.seatcard{
  min-width:104px; border-radius:14px; padding:9px 11px; background:rgba(3,14,18,.55);
  border:1px solid rgba(255,255,255,.09); text-align:center; transition:.2s; position:relative;
}
.seatcard.turn{border-color:var(--gold); box-shadow:0 0 0 1px rgba(232,180,90,.45),0 0 26px rgba(232,180,90,.17)}
.seatcard.speaking{border-color:var(--blue); box-shadow:0 0 0 1px rgba(111,199,216,.6),0 0 30px rgba(111,199,216,.22)}
.seatcard .sc-avatar{width:36px;height:36px;border-radius:50%; margin:0 auto 5px; display:grid;place-items:center; background:linear-gradient(160deg,#20484f,#122e34); font-size:18px; border:1px solid rgba(255,255,255,.12)}
.seatcard.pet .sc-avatar{background:linear-gradient(160deg,#245c66,#12343b); box-shadow:0 0 18px rgba(111,199,216,.25)}
.seatcard .sc-name{font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.seatcard .sc-sub{font-size:10px; color:var(--muted); margin-top:3px}
.seatcard .sc-badge{position:absolute; top:-7px; right:-4px; font-size:9px; padding:2px 6px; border-radius:999px; background:var(--gold); color:#2a1c07; font-weight:700}
.seatcard .sc-badge.landlord{background:var(--red); color:#fff}
.seatcard .sc-badge.off{background:#3a4a4e; color:#b9c8cb}
.seatcard .sc-cards{display:flex; justify-content:center; margin-top:6px; height:14px}
.minicard{width:9px;height:13px;border-radius:2px;background:linear-gradient(160deg,#f6e7c8,#d8c39a); border:1px solid #b9a67f; margin-left:-4px; box-shadow:0 1px 2px rgba(0,0,0,.3)}
.minicard:first-child{margin-left:0}

/* doudizhu */
.ddz{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:14px 14px 12px}
.ddz-top{display:flex; justify-content:center; gap:26px; padding-top:2px}
.ddz-mid{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; position:relative}
.ddz-bottom{display:flex; flex-direction:column; align-items:center; gap:10px}
.ddz-opp{min-width:96px; text-align:center}
.ddz-opp .name{font-size:11px; color:#bfd6d9}
.ddz-opp .count{font-size:11px; color:var(--gold); margin-top:2px}
.ddz-opp .backs{display:flex; justify-content:center; margin-top:6px; height:16px}
.ddz-center-tag{font-size:11px; color:var(--muted); letter-spacing:.12em}
.landlord-bottom{display:flex; gap:4px; align-items:center; padding-left:34px; position:relative}
.landlord-bottom .lb-label{font-size:10px; color:var(--muted); margin-right:2px; position:absolute; transform:translateX(-34px); white-space:nowrap}
.lastplay{display:flex; gap:6px; align-items:center; min-height:70px}
.lastplay .lp-label{font-size:11px; color:var(--muted); margin-right:6px}
.handrow{display:flex; justify-content:center; align-items:flex-end; padding:6px 10px 0; min-height:92px; flex-wrap:nowrap}
.card{
  width:52px; height:74px; border-radius:8px; background:linear-gradient(160deg,#fffaf0,#f0dfbc);
  color:var(--ink); border:1px solid #c9b58a; box-shadow:0 4px 10px rgba(0,0,0,.28);
  display:flex; flex-direction:column; justify-content:space-between; padding:5px 6px; margin-left:-16px;
  transition:transform .12s ease, box-shadow .12s; position:relative; user-select:none; flex:0 0 auto;
}
.card:first-child{margin-left:0}
.card .c-rank{font-size:17px; font-weight:800; line-height:1; letter-spacing:-.02em}
.card .c-suit{font-size:14px; align-self:flex-end; line-height:1}
.card.red{color:var(--red)}
.card.big{font-size:11px; align-items:center; justify-content:center; text-align:center}
.card.big .c-rank{font-size:15px; writing-mode:vertical-rl; letter-spacing:.1em}
.card:hover{transform:translateY(-9px)}
.card.selected{transform:translateY(-16px); box-shadow:0 10px 22px rgba(232,180,90,.35); border-color:var(--gold)}
.card.disabled{filter:grayscale(.2) brightness(.9)}
.card.small{width:42px; height:60px; margin-left:-14px; border-radius:7px}
.card.small .c-rank{font-size:14px}
.card.small .c-suit{font-size:11px}
.card.back{background:
  radial-gradient(circle at 50% 35%,rgba(111,199,216,.22),transparent 60%),
  repeating-linear-gradient(45deg,#123b44 0 4px,#0d2f37 4px 8px);
  border:1px solid #2b626d;
}
.card.back::after{content:"🐟"; position:absolute; inset:0; display:grid; place-items:center; font-size:16px; opacity:.55}
.card.small.back::after{font-size:11px}

.actionbar{display:flex; gap:9px; align-items:center; flex-wrap:wrap; justify-content:center; padding-bottom:2px}
.actionbar .spacer{width:8px}
.bidbar{display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; background:rgba(0,0,0,.22); border:1px solid var(--line); padding:8px 12px; border-radius:12px}
.bidbar span{font-size:12px; color:var(--muted); margin-right:4px}
.btn.play{background:linear-gradient(180deg,#e8b45a,#cf963c); color:#2a1c07; border-color:#f0c878; font-weight:700; min-width:86px}
.btn.pass{background:rgba(255,255,255,.05)}
.btn.hint{background:rgba(111,199,216,.1); border-color:rgba(111,199,216,.25); color:var(--blue)}

/* shuangkou 2v2 */
.sk{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px}
.sk-top{display:flex;align-items:center;justify-content:center;gap:12px}
.sk-teamtag{font-size:10px;color:var(--blue);letter-spacing:.12em}
.sk-mid{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sk-side{width:124px;display:flex;justify-content:center}
.sk-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.sk-center .lastplay{min-height:62px}
.sk-score{font-size:12px;color:var(--gold);letter-spacing:.08em}
.sk-bottom{width:100%;display:flex;justify-content:center;padding-bottom:2px}
.sk-bottom .handrow{min-height:72px}
.sk .handrow .card{width:44px;height:66px;margin-left:-20px}
.sk .handrow .card .c-rank{font-size:15px}

/* mahjong */
.mj{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:12px}
.mj-top{display:flex;justify-content:center}
.mj-mid{flex:1;display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:0}
.mj-side{width:118px;display:flex;justify-content:center}
.mj-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.mj-last{font-size:12px;color:var(--muted)}
.mj-claim{display:flex;gap:6px;align-items:center;background:rgba(0,0,0,.3);border:1px solid var(--line);padding:6px 9px;border-radius:10px;font-size:12px;flex-wrap:wrap;justify-content:center}
.mj-melds{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;font-size:11px;min-height:20px}
.mj-meld{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:6px;padding:3px 6px;color:#d8e8ea}
.mj-discards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:5px 4px;border-top:1px solid rgba(255,255,255,.06);min-height:54px}
.mj-pile{display:flex;gap:4px;align-items:flex-start;overflow:hidden}
.mj-pile b{font-size:9px;color:var(--muted);white-space:nowrap;padding-top:6px}
.mj-pile>div{display:flex;flex-wrap:wrap;gap:1px}
.mj-bottom{display:flex;justify-content:center;padding-top:2px}
.mj-hand{display:flex;justify-content:center;align-items:flex-end;gap:2px;flex-wrap:nowrap}
.mj-tile{
  width:40px;height:54px;border-radius:5px;background:linear-gradient(160deg,#fffaf0,#e9d8b4);
  border:1px solid #c9b58a;border-bottom-width:3px;color:#242424;display:grid;place-items:center;
  font-size:15px;font-weight:700;box-shadow:0 2px 5px rgba(0,0,0,.25);cursor:pointer;user-select:none;flex:0 0 auto;
  font-family:"PingFang SC","Microsoft YaHei",serif;
}
.mj-tile.m{color:#b23120}.mj-tile.s{color:#1f6f8f}.mj-tile.p{color:#2d6b3b}.mj-tile.z{color:#5a3b8a}
.mj-tile.small{width:25px;height:34px;font-size:10px;border-bottom-width:2px;cursor:default}
.mj-tile.sel{transform:translateY(-8px);box-shadow:0 8px 16px rgba(232,180,90,.35);border-color:var(--gold)}
.mj-tile:hover{transform:translateY(-4px)}

/* guanchuntian 4-5p */
.gc{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:12px}
.gc-top{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.gc-mid{flex:1;display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:0}
.gc-side{width:118px;display:flex;justify-content:center}
.gc-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.gc-scores{text-align:center;font-size:11px;color:var(--gold);letter-spacing:.04em;padding:3px 0}
.gc-bottom{display:flex;justify-content:center}
.gc .handrow{min-height:76px}
.gc .handrow .card{margin-left:-20px}

/* floating mic in game */
.tablemic{
  position:absolute; right:14px; bottom:14px; z-index:12;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(111,199,216,.35);
  background:rgba(6,20,26,.86); color:var(--blue);
  font-size:18px; display:grid; place-items:center; padding:0;
  box-shadow:0 6px 18px rgba(0,0,0,.35); backdrop-filter:blur(6px);
}
.tablemic:hover{background:rgba(111,199,216,.18)}
.tablemic.on{background:linear-gradient(180deg,#6fc7d8,#3f9cae); color:#062126; border-color:#8bd8e6}

/* xiangqi / gomoku */
.boardwrap{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px}
canvas.board{display:block; border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.35); touch-action:manipulation; max-width:100%; max-height:100%}
.boardhint{position:absolute; bottom:12px; left:50%; transform:translateX(-50%); font-size:11px; color:rgba(255,255,255,.6); background:rgba(0,0,0,.28); padding:5px 10px; border-radius:999px; white-space:nowrap}

/* side */
.side{display:flex; flex-direction:column; gap:10px; min-height:0}
.seats{display:flex; flex-direction:column; gap:7px}
.seatitem{display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.028); transition:.15s}
.seatitem .si-avatar{width:32px;height:32px;border-radius:50%; display:grid; place-items:center; background:linear-gradient(160deg,#20484f,#122e34); font-size:16px; flex:0 0 auto; border:1px solid rgba(255,255,255,.1)}
.seatitem.pet .si-avatar{box-shadow:0 0 14px rgba(111,199,216,.3)}
.seatitem .si-main{flex:1; min-width:0}
.seatitem .si-name{font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px}
.seatitem .si-sub{font-size:10.5px; color:var(--muted); margin-top:2px}
.seatitem .si-tag{font-size:9px; padding:2px 6px; border-radius:999px; background:rgba(232,180,90,.16); color:var(--gold)}
.seatitem .si-tag.bot{background:rgba(111,199,216,.12); color:var(--blue)}
.seatitem.speaking{box-shadow:inset 0 0 0 1px rgba(111,199,216,.45)}
.si-wave{display:flex; gap:2px; align-items:flex-end; height:14px; width:18px}
.si-wave i{width:3px; background:var(--blue); border-radius:2px; height:4px; animation:wave .8s infinite ease-in-out}
.si-wave i:nth-child(2){animation-delay:.15s}.si-wave i:nth-child(3){animation-delay:.3s}
@keyframes wave{0%,100%{height:4px}50%{height:13px}}

.voicebox{border:1px solid var(--line); border-radius:14px; padding:11px 12px; background:rgba(255,255,255,.025)}
.voicehead{display:flex; justify-content:space-between; font-size:11.5px; color:#cfe3e6; margin-bottom:9px}
.voicebtns{display:flex; gap:8px}
.btn.mic{flex:1; background:rgba(111,199,216,.1); border-color:rgba(111,199,216,.3); color:var(--blue); padding:9px 8px; font-size:12.5px}
.btn.mic.on{background:linear-gradient(180deg,#6fc7d8,#3f9cae); color:#062126; border-color:#8bd8e6; font-weight:700}
.btn.ptt{flex:1; padding:9px 8px; font-size:12.5px; background:rgba(232,180,90,.08); border-color:rgba(232,180,90,.25); color:var(--gold)}
.btn.ptt.holding{background:linear-gradient(180deg,#e8b45a,#cf963c); color:#2a1c07}
.meter{height:4px; background:rgba(255,255,255,.06); border-radius:99px; margin-top:9px; overflow:hidden}
.meter i{display:block; height:100%; width:0; background:linear-gradient(90deg,#6fc7d8,#e8b45a); transition:width .08s linear}
.hint{font-size:10.5px; color:var(--muted); margin:8px 0 0; line-height:1.5}

.chathead{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:#cfe3e6; padding:2px 2px 0}
.chatlog{
  flex:1; min-height:150px; max-height:44vh; overflow-y:auto; border:1px solid var(--line); border-radius:14px;
  background:rgba(0,0,0,.18); padding:10px; display:flex; flex-direction:column; gap:7px; scrollbar-width:thin;
}
.msg{font-size:12.5px; line-height:1.55; color:#d9e9eb; word-break:break-word}
.msg .who{color:var(--blue); font-weight:600; margin-right:6px}
.msg.pet .who{color:var(--gold)}
.msg.voice{color:#b9d6da; font-style:italic}
.msg.voice .who{color:#8fc7cf}
.msg.sys{align-self:center; color:var(--muted); font-size:11px; background:rgba(255,255,255,.04); padding:3px 9px; border-radius:999px}
.chatform{display:flex; gap:7px}
.chatform input{padding:9px 11px; font-size:12.5px}
.chatform .btn{padding:9px 13px; font-size:12.5px}

/* footer */
#costbar{
  border-top:1px solid var(--line); padding:10px 22px; display:flex; justify-content:space-between; gap:12px;
  font-size:11px; color:var(--muted); background:rgba(4,13,18,.7); flex-wrap:wrap;
}
.costleft,.costright{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.live{display:inline-flex; align-items:center; gap:6px; color:#9fd3b0}
.live i{width:6px;height:6px;border-radius:50%;background:#7ad39a;box-shadow:0 0 0 4px rgba(122,211,154,.1)}

/* toast + modal */
.toast{
  position:fixed; left:50%; bottom:64px; transform:translate(-50%,10px); z-index:60;
  background:rgba(6,20,26,.96); border:1px solid rgba(111,199,216,.32); color:#e6f4f6;
  padding:10px 16px; border-radius:12px; font-size:13px; opacity:0; pointer-events:none; transition:.2s; max-width:86vw; text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.modal{position:fixed; inset:0; background:rgba(2,8,11,.72); z-index:70; display:grid; place-items:center; padding:20px; backdrop-filter:blur(4px)}
.modalbox{width:min(460px,100%); background:#0a1d25; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow)}
.modalbox h3{font-size:16px; margin-bottom:8px}
.modalbox p{font-size:12px; line-height:1.7; margin:0 0 14px}
.copyrow{display:flex; gap:8px}
.copyrow input{font-size:12px}
.modalbtns{display:flex; justify-content:flex-end; margin-top:14px}

/* responsive */
@media (max-width: 960px){
  main{padding:18px 14px 30px}
  .roomgrid{grid-template-columns:1fr; min-height:0}
  .tablewrap{min-height:56vh}
  .games{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lobby-foot{grid-template-columns:1fr}
  .side{max-height:none}
  .chatlog{max-height:30vh}
}
@media (max-width: 620px){
  #topbar{padding:0 12px; height:56px}
  .brand small{display:none}
  .top-mid .pill{display:none}
  .hero h1{font-size:30px}
  .hero .sub{font-size:13px}
  .panel{padding:16px}
  .games{grid-template-columns:1fr}
  .gamecard{min-height:0}
  .joinrow{min-width:0}
  .tablewrap{min-height:700px}
  .ddz{padding:10px 8px 8px}
  .ddz-top{gap:8px}
  .ddz-mid{gap:5px}
  .ddz-center-tag{font-size:10px}
  .bidbar{flex-wrap:nowrap; gap:5px; padding:6px 8px; width:100%; justify-content:center}
  .bidbar span{display:none}
  .bidbar .btn{padding:8px 10px; font-size:12px; min-width:0}
  .actionbar{gap:6px}
  .actionbar .btn{padding:8px 12px; font-size:12px}
  .card{width:37px;height:56px;margin-left:-21px;border-radius:7px}
  .card .c-rank{font-size:13px}
  .card .c-suit{font-size:11px}
  .sk{padding:8px}
  .sk-side{width:84px}
  .sk .handrow .card{width:31px;height:48px;margin-left:-20px}
  .sk .handrow .card .c-rank{font-size:11px}
  .seatcard{min-width:78px; padding:6px 6px;}
  .mj{padding:7px}
  .mj-side{width:72px}
  .mj-tile{width:30px;height:42px;font-size:12px}
  .mj-tile.small{width:18px;height:25px;font-size:8px}
  .mj-discards{min-height:40px}
  .mj-pile b{display:none}
  .gc{padding:7px}
  .gc-side{width:74px}
  .gc-top{gap:6px}
  .gc .handrow .card{margin-left:-22px;width:34px;height:52px}
  .card.small{width:30px;height:46px;margin-left:-15px}
  .card.small .c-rank{font-size:11px}
  .handrow{min-height:66px; overflow-x:auto; justify-content:flex-start; width:100%; padding:2px 4px 6px}
  .ddz-bottom{width:100%}
  .ddz-top{gap:12px}
  .seatcard{min-width:86px; padding:7px 8px}
  .seatrow.mid{padding:0 8px}
  .roomhead{gap:8px}
  #roomCode{font-size:16px}
  .voicebtns{flex-direction:column}
  /* 小屏：左右座位收窄，手牌缩小，避免被裁掉 */
  .sk-side,.mj-side,.gc-side{width:60px}
  .sk-mid,.mj-mid,.gc-mid{position:relative;display:block}
  .sk-side,.mj-side,.gc-side{position:absolute;top:50%;transform:translateY(-50%);z-index:3}
  .sk-side:first-child,.mj-side:first-child,.gc-side:first-child{left:0}
  .sk-side:last-child,.mj-side:last-child,.gc-side:last-child{right:0}
  .sk-center,.mj-center,.gc-center{margin:0 62px}
  .sk-side .seatcard,.mj-side .seatcard,.gc-side .seatcard{min-width:54px;padding:4px 3px}
  .sk-side .seatcard .sc-avatar,.mj-side .seatcard .sc-avatar,.gc-side .seatcard .sc-avatar{width:26px;height:26px;font-size:13px;margin-bottom:3px}
  .sk-side .seatcard .sc-name,.mj-side .seatcard .sc-name,.gc-side .seatcard .sc-name{font-size:9.5px}
  .sk-side .seatcard .sc-sub,.mj-side .seatcard .sc-sub,.gc-side .seatcard .sc-sub{font-size:8.5px}
  .sc-sub{white-space:nowrap;overflow:hidden}
  .petbubble{top:auto;bottom:116px;max-width:calc(100% - 24px)}
  .petbubble::after{top:-7px;bottom:auto;transform:translateX(-50%) rotate(225deg)}
  .sk-side .seatcard .sc-cards,.mj-side .seatcard .sc-cards,.gc-side .seatcard .sc-cards{display:none}
  .mj-side .seatcard .sc-sub,.gc-side .seatcard .sc-sub{display:none}
  .sk-mid,.mj-mid,.gc-mid{gap:2px}
  .sk .handrow .card{width:31px;height:48px;margin-left:-20px}
  .gc .handrow .card{width:34px;height:52px;margin-left:-20px}
  .mj-hand{gap:0}
  .mj-tile{width:25px;height:36px;font-size:10px;border-bottom-width:2px}
  .mj-tile.small{width:16px;height:22px;font-size:7px}
  .gc-scores{font-size:9px;line-height:1.5}
}

/* phone landscape: table full screen, side becomes drawer */
@media (orientation: landscape) and (max-height: 560px){
  #topbar{height:46px;padding:0 12px}
  .brand small{display:none}
  .brand b{font-size:14px}
  main{padding:6px;max-width:none}
  #room{gap:6px}
  .roomhead{gap:6px}
  .roomactions{gap:5px}
  .roomactions .btn{padding:5px 9px;font-size:11px}
  .roomid{gap:7px}
  #roomGame{font-size:13px}
  #roomCode{font-size:14px;padding:3px 7px}
  .roomgrid{display:block;min-height:0}
  .tablewrap{height:calc(100vh - 96px);min-height:0;border-radius:14px}
  #costbar{display:none}
  #sideToggle{display:inline-flex}
  .side{
    position:fixed; top:50px; right:0; bottom:0; width:300px; max-width:82vw;
    z-index:45; background:#081a22; border-left:1px solid var(--line);
    padding:10px; overflow-y:auto; transform:translateX(105%);
    transition:transform .2s ease; box-shadow:-10px 0 30px rgba(0,0,0,.45);
  }
  .side.open{transform:none}
  .seatcard{min-width:72px;padding:5px 7px}
  .seatcard .sc-avatar{width:28px;height:28px;font-size:14px;margin-bottom:3px}
  .seatcard .sc-name{font-size:10px}
  .seatcard .sc-sub{font-size:9px}
  .seatcard .sc-cards{display:none}
  .tablemic{width:38px;height:38px;font-size:16px;right:10px;bottom:10px}
  .ddz-top{gap:10px}
  .ddz-center-tag{font-size:10px}
  .handrow{min-height:64px}
  .petbubble{bottom:82px;top:auto}
}


/* ==================================================================
   2026-11-11 界面优化：横屏 / 头像积分 / 方块大厅 / 房间空位 / 出牌位
   ================================================================== */

/* ---- 1. 横屏骨架：整个 App 固定在一个舞台里，只有桌面区滚动 ---- */
html,body{height:100%;overflow:hidden}
#stage{position:fixed; inset:0; overflow:hidden; display:flex}
#app{height:100%; width:100%; min-height:0; overflow:hidden}
#topbar{position:relative; flex:0 0 auto; height:56px}
main{
  flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column;
  width:100%; max-width:1440px; padding:10px 16px 8px;
}
#lobby{flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; overflow:hidden}
#room{flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; overflow:hidden}
#lobby,#room{width:100%; margin:0 auto}

/* ---- 2. 左上角：头像 + 名字 + 鱼币 + 段位 ---- */
.profile{
  display:flex; align-items:center; gap:9px; min-width:0;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:999px; padding:4px 13px 4px 4px;
  color:var(--text); font:inherit; cursor:pointer; transition:.15s;
}
.profile:hover{border-color:rgba(111,199,216,.4); background:linear-gradient(160deg,rgba(111,199,216,.13),rgba(255,255,255,.04))}
.pf-avatar{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-size:17px; font-weight:800; color:#dff4f7;
  background:linear-gradient(160deg,#245c66,#12343b);
  border:1px solid rgba(111,199,216,.4); box-shadow:0 0 16px rgba(111,199,216,.22);
}
.pf-name{font-size:13px; font-weight:700; max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pf-coins{display:flex; align-items:center; gap:3px; font-size:12px; color:var(--gold); font-family:ui-monospace,Consolas,monospace; white-space:nowrap}
.pf-coins b{font-weight:800}
.pf-tier{font-size:10px; padding:2px 8px; border-radius:999px; white-space:nowrap; color:var(--blue); background:rgba(111,199,216,.12); border:1px solid rgba(111,199,216,.28)}

/* ---- 3. 大厅：一栏操作 + 3x2 方块铺满 ---- */
.lobby-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:0 0 auto}
.lobby-title{flex:1 1 150px; min-width:120px}
.lobby-title h1{
  font-size:20px; letter-spacing:.14em; line-height:1.2;
  background:linear-gradient(180deg,#fff,#b9dfe6); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lobby-title p{font-size:11px; color:var(--muted); margin:3px 0 0}
.namefield{flex:0 0 auto; flex-direction:row; align-items:center; gap:7px; font-size:11px; color:var(--muted); letter-spacing:.08em; min-width:0}
.namefield input{width:122px; padding:7px 10px; border-radius:9px; font-size:12.5px}
.joinrow{flex:0 0 auto; width:auto; max-width:none; min-width:0; gap:6px}
.joinrow input{width:148px; padding:7px 9px; font-size:12.5px; letter-spacing:.16em; border-radius:9px}
.joinrow .btn{padding:8px 14px; font-size:12.5px; min-width:0}
.seatcount{font-size:11px; color:var(--muted)}
.seatcount select{padding:6px 8px}
.seatcount[hidden]{display:none!important}

.games{
  flex:1 1 auto; min-height:0; max-height:100%;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr));
  gap:10px;
}
.gamecard{
  position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  min-height:0; padding:12px 16px; border-radius:16px; overflow:hidden; text-align:left;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  border:1px solid var(--line); color:var(--text); transition:.16s ease;
}
.gamecard::after{
  content:""; position:absolute; right:-30px; bottom:-42px; width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle,rgba(111,199,216,.16),transparent 68%); pointer-events:none;
}
.gamecard:hover{transform:translateY(-3px); border-color:rgba(111,199,216,.4); background:linear-gradient(160deg,rgba(111,199,216,.14),rgba(255,255,255,.02))}
.gamecard:active{transform:translateY(0) scale(.995)}
.gamecard .gc-icon{font-size:clamp(20px,2.4vw,30px); line-height:1; margin-bottom:6px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.gamecard .gc-top{display:flex; align-items:center; gap:8px; width:100%; flex-wrap:wrap}
.gamecard .gc-name{font-size:clamp(15px,1.5vw,21px); font-weight:800; letter-spacing:.07em}
.gamecard .gc-tag{font-size:9.5px; color:var(--gold); border:1px solid rgba(232,180,90,.35); border-radius:999px; padding:2px 7px; white-space:nowrap}
.gamecard .gc-players{font-size:10.5px; color:var(--blue); margin-top:3px; letter-spacing:.1em}
.gamecard .gc-desc{font-size:11.5px; color:var(--muted); line-height:1.5; margin-top:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.gamecard .gc-check{position:absolute; right:12px; top:12px; width:18px; height:18px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:11px; color:transparent}
.gamecard.active .gc-check{background:var(--gold); border-color:var(--gold); color:#2a1c07}
.lobby-foot{flex:0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.lobby-foot .note{padding:8px 12px}
.lobby-foot .note b{font-size:10.5px; margin-bottom:2px}
.lobby-foot .note span{font-size:10.5px; line-height:1.45}

/* ---- 4. 房间/牌桌：占满剩余高度 ---- */
.roomhead{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:nowrap; min-height:34px}
.roomid{display:flex; align-items:center; gap:8px; min-width:0; flex:1; overflow:hidden; white-space:nowrap}
.roomid #roomGame{font-size:14px}
#roomCode{font-size:15px; padding:4px 8px}
.roomactions{flex:0 0 auto; display:flex; align-items:center; gap:6px; flex-wrap:nowrap}
.roomactions .btn{padding:6px 10px; font-size:11.5px; white-space:nowrap}
.btn.iconbtn{min-width:34px; padding:6px 8px; font-size:14px; line-height:1}
.btn.iconbtn.off{opacity:.45}
.roomgrid{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:10px; align-items:stretch}
.tablewrap{min-height:0; height:100%; border-radius:16px}
#table{position:absolute; inset:0}
.side{min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:8px}
.side .seats{flex:0 0 auto; overflow-y:auto; max-height:38%}
.side .chatlog{flex:1 1 auto; min-height:0; max-height:none}
.side .voicebox{flex:0 0 auto; padding:9px 10px}
.side .voicebox .hint{display:none}
#costbar{flex:0 0 auto}

/* ---- 5. 座位卡（带积分/分身标签/轮次高亮） ---- */
.seatcard{
  position:relative; min-width:88px; padding:6px 8px; border-radius:12px; text-align:center;
  background:linear-gradient(170deg,rgba(14,40,48,.92),rgba(8,26,32,.92));
  border:1px solid var(--line); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.seatcard .sc-avatar{width:30px; height:30px; margin:0 auto 3px; font-size:15px}
.seatcard .sc-name{font-size:11px; font-weight:700; max-width:104px; margin:0 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.seatcard .sc-sub{font-size:9px; margin-top:1px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.seatcard .sc-score{font-size:9px; color:var(--gold); margin-top:1px; font-family:ui-monospace,Consolas,monospace; white-space:nowrap}
.seatcard .sc-badge.clone{background:linear-gradient(180deg,#6fc7d8,#3f9cae); color:#062126}
.seatcard .sc-badge.real{background:linear-gradient(180deg,#f0c878,#cf963c); color:#2a1c07}
.seatcard.pet{border-color:rgba(111,199,216,.45); box-shadow:0 0 0 1px rgba(111,199,216,.22), 0 0 22px rgba(111,199,216,.12)}
.seatcard.pet .sc-avatar{background:linear-gradient(160deg,#2b7a86,#123f47); box-shadow:0 0 18px rgba(111,199,216,.35)}
.seatcard.turn{
  border-color:var(--gold); z-index:6;
  box-shadow:0 0 0 2px rgba(232,180,90,.55), 0 0 30px rgba(232,180,90,.32);
  transform:translateY(-2px) scale(1.05);
  animation:turnpulse 1.35s ease-in-out infinite;
}
@keyframes turnpulse{0%,100%{box-shadow:0 0 0 2px rgba(232,180,90,.5),0 0 22px rgba(232,180,90,.25)}50%{box-shadow:0 0 0 3px rgba(232,180,90,.8),0 0 40px rgba(232,180,90,.45)}}
.seatcard.turn::after{
  content:"出牌中"; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  font-size:8.5px; font-weight:800; letter-spacing:.08em; padding:1.5px 7px; border-radius:999px;
  background:var(--gold); color:#2a1c07; white-space:nowrap;
}
.seatcard.speaking{border-color:var(--blue); box-shadow:0 0 0 1px rgba(111,199,216,.6), 0 0 26px rgba(111,199,216,.25)}
.seatcard .sc-cards{margin-top:4px; height:12px}

/* ---- 6. 每个座位面前的出牌区 ---- */
.pzone{display:flex; align-items:flex-start; gap:6px; min-width:0; position:relative}
.pzone.v{flex-direction:column; align-items:center; gap:2px}
.pzone.me{flex-direction:column; align-items:center; gap:2px; width:100%}
.playarea{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  min-height:64px; min-width:62px; padding:2px 4px 1px; border-radius:10px;
  border:1px solid transparent; transition:.18s ease;
}
.playarea.compact{min-height:56px; padding:1px 2px}
.playarea .pa-cards{display:flex; align-items:center; justify-content:center; min-height:50px; position:relative}
.playarea .pa-cards .card.small{width:32px; height:45px; margin-left:-17px; border-radius:6px}
.playarea .pa-cards .card.small:first-child{margin-left:0}
.playarea .pa-cards .card.small .c-rank{font-size:11.5px}
.playarea .pa-cards .card.small .c-suit{font-size:9px}
.playarea .pa-text{font-size:9.5px; color:var(--muted); white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis}
.playarea.lead{border-color:rgba(111,199,216,.32); background:rgba(63,156,174,.08)}
.playarea.turn{border-color:rgba(232,180,90,.45); background:rgba(232,180,90,.08); box-shadow:0 0 16px rgba(232,180,90,.16)}
.playarea .upa{font-size:9px; color:var(--gold); letter-spacing:.1em}
.pa-pass{
  font-size:10px; color:var(--gold); border:1px solid rgba(232,180,90,.35);
  background:rgba(232,180,90,.1); padding:1px 8px; border-radius:999px; white-space:nowrap;
}
.playarea .pa-cards .card{animation:none}
.playarea.pa-new .pa-cards .card{animation:carddrop .2s ease-out both}
@keyframes carddrop{from{opacity:0; transform:translateY(-12px) scale(.92)}to{opacity:1; transform:none}}

/* 轮到时更醒目：操作条 */
.actionbar.myturn,.bidbar.myturn{border-color:rgba(232,180,90,.45); box-shadow:0 0 0 1px rgba(232,180,90,.28), 0 0 22px rgba(232,180,90,.18)}
.myturn-tag{font-size:11px; color:#2a1c07; background:var(--gold); border-radius:999px; padding:2px 9px; font-weight:800; letter-spacing:.06em; animation:turnpulse2 1.2s infinite}
@keyframes turnpulse2{0%,100%{opacity:1}50%{opacity:.6}}

/* ---- 7. 斗地主：左右上家 + 我的出牌位 ---- */
.ddz{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:8px 10px 6px; gap:2px}
.ddz-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px; flex:0 0 auto}
.ddz-mid{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; position:relative}
.ddz-bottom{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px}
.ddz-bottom .handrow{min-height:68px; padding:2px 8px 0}
.ddz .handrow .card{width:46px; height:66px; margin-left:-20px}
.ddz .handrow .card .c-rank{font-size:15px}
.ddz .landlord-bottom{padding-left:38px}
.ddz .lastplay{min-height:0; display:none}

/* ---- 8. 双扣/关春天/麻将：上家出牌位 ---- */
.sk{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:8px 10px 6px; gap:2px}
.sk-top{display:flex; align-items:flex-start; justify-content:center; gap:10px; flex:0 0 auto}
.sk-mid{flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:space-between; gap:4px}
.sk-side{width:132px; display:flex; justify-content:center}
.sk-center{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px}
.sk-center .lastplay{display:none}
.sk-bottom{flex:0 0 auto; width:100%; display:flex; flex-direction:column; align-items:center; gap:2px}
.sk-bottom .handrow{min-height:62px}
.sk .handrow .card{width:42px; height:62px; margin-left:-20px}
.sk-teamtag{font-size:10px; color:var(--blue); letter-spacing:.12em; align-self:center}

.gc{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:7px 9px 5px; gap:1px}
.gc-top{display:flex; justify-content:center; align-items:flex-start; gap:8px; flex:0 0 auto; flex-wrap:nowrap}
.gc-mid{flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:space-between; gap:2px}
.gc-side{width:126px; display:flex; justify-content:center}
.gc-center{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px}
.gc-scores{flex:0 0 auto; padding:1px 0; font-size:10px}
.gc-bottom{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:1px}
.gc .handrow{min-height:60px}
.gc .handrow .card{width:40px; height:60px; margin-left:-20px}

.mj{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:7px 9px 5px; gap:1px}
.mj-top{display:flex; justify-content:center; flex:0 0 auto}
.mj-mid{flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:space-between; gap:2px}
.mj-side{width:128px; display:flex; justify-content:center}
.mj-center{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center}
.mj-discards{flex:0 0 auto; min-height:46px; padding:3px 4px}
.mj-bottom{flex:0 0 auto; display:flex; justify-content:center}
.mj-hand .mj-tile{width:30px; height:40px; font-size:12px}
.mj-last{padding:2px 0}

/* ---- 9. 房间大厅：空位 + 号 ---- */
.lobbyroom{position:absolute; inset:0; overflow:hidden}
.lr-stage{position:absolute; inset:0}
.lr-seat{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:150px; min-height:96px; padding:9px 10px; border-radius:16px; text-align:center;
  background:linear-gradient(170deg,rgba(14,40,48,.94),rgba(8,26,32,.94));
  border:1px solid var(--line); box-shadow:0 10px 26px rgba(0,0,0,.35);
  transition:.16s ease; z-index:2;
}
.lr-seat.me{border-color:rgba(232,180,90,.5); box-shadow:0 0 0 1px rgba(232,180,90,.28), 0 10px 26px rgba(0,0,0,.35)}
.lr-seat.pet{border-color:rgba(111,199,216,.5); box-shadow:0 0 0 1px rgba(111,199,216,.3), 0 0 30px rgba(111,199,216,.14)}
.lr-seat.empty{
  cursor:pointer; border:1.5px dashed rgba(111,199,216,.35); background:rgba(6,24,30,.45); box-shadow:none;
}
.lr-seat.empty:hover{border-color:var(--gold); background:rgba(232,180,90,.08); transform:translate(-50%,-50%) scale(1.03)}
.lr-seat.empty.nohost{cursor:default; opacity:.72}
.lr-seat .lrs-plus{
  width:38px; height:38px; margin:0 auto 4px; border-radius:50%; display:grid; place-items:center;
  font-size:24px; font-weight:300; color:var(--blue); border:1px dashed rgba(111,199,216,.5); line-height:1;
}
.lr-seat.empty:hover .lrs-plus{color:var(--gold); border-color:rgba(232,180,90,.6)}
.lrs-avatar{width:42px; height:42px; margin:0 auto 5px; border-radius:50%; display:grid; place-items:center; font-size:20px; background:linear-gradient(160deg,#20484f,#122e34); border:1px solid rgba(255,255,255,.12)}
.lr-seat.pet .lrs-avatar{background:linear-gradient(160deg,#2b7a86,#123f47); box-shadow:0 0 18px rgba(111,199,216,.3)}
.lrs-name{font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lrs-sub{font-size:10px; color:var(--muted); margin-top:2px}
.lrs-score{font-size:10px; color:var(--gold); margin-top:2px; font-family:ui-monospace,Consolas,monospace}
.lrs-tag{font-size:8.5px; padding:1px 6px; border-radius:999px; background:rgba(232,180,90,.16); color:var(--gold); display:inline-block; margin:3px 2px 0}
.lrs-tag.clone{background:rgba(111,199,216,.16); color:var(--blue)}
.lrs-tag.bot{background:rgba(255,255,255,.08); color:var(--muted)}
.lrs-remove{
  position:absolute; right:-7px; top:-7px; width:20px; height:20px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); background:#12262c; color:#c9dadd; font-size:12px; line-height:1;
  display:grid; place-items:center; padding:0;
}
.lrs-remove:hover{background:#a93022; border-color:#a93022; color:#fff}
.lr-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(340px,52%);
  text-align:center; padding:12px 14px; border-radius:16px;
  background:radial-gradient(120% 120% at 50% 0%,rgba(63,156,174,.16),rgba(1,8,12,.55));
  border:1px solid rgba(255,255,255,.07);
}
.lr-center .lrc-code{font-family:ui-monospace,Consolas,monospace; font-size:24px; letter-spacing:.26em; color:var(--gold); font-weight:800}
.lr-center .lrc-tip{font-size:11.5px; color:#b6d0d4; margin-top:5px; line-height:1.6}
.lr-center .lrc-tip b{color:var(--gold)}
.lr-center .lrc-actions{display:flex; gap:6px; justify-content:center; margin-top:9px; flex-wrap:wrap}
.lr-center .lrc-actions .btn{padding:6px 11px; font-size:11.5px}

/* ---- 10. 空位菜单 / 分享 ---- */
.seatbox{width:min(420px,100%)}
.seatoptlist{display:flex; flex-direction:column; gap:7px; margin-top:2px}
.seatopt{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 12px;
  border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.035); color:var(--text);
  font:inherit; cursor:pointer; transition:.15s;
}
.seatopt:hover{border-color:rgba(111,199,216,.4); background:rgba(111,199,216,.1)}
.seatopt .so-icon{font-size:22px; width:30px; text-align:center; flex:0 0 auto}
.seatopt .so-main{display:flex; flex-direction:column; gap:2px; min-width:0}
.seatopt .so-main b{font-size:13px}
.seatopt .so-main em{font-style:normal; font-size:10.5px; color:var(--muted); line-height:1.4}

/* ---- 11. 矮屏/手机横屏：压缩但保留出牌位 ---- */
@media (orientation: landscape) and (max-height: 560px){
  #topbar{height:42px; padding:0 10px; gap:8px}
  .brand{display:none}
  .brand-fish{display:none}
  .profile{padding:3px 10px 3px 3px; gap:7px}
  .pf-avatar{width:28px; height:28px; font-size:14px}
  .pf-name{font-size:11.5px; max-width:88px}
  .pf-coins{font-size:10.5px}
  .pf-tier{font-size:9px; padding:1px 6px}
  main{padding:5px 8px 5px}
  #lobby{gap:6px}
  .lobby-title h1{font-size:16px}
  .lobby-title p{display:none}
  .namefield{font-size:0; gap:5px}
  .namefield input{width:104px; padding:5px 8px; font-size:11.5px}
  .joinrow input{width:126px; padding:5px 8px; font-size:11.5px}
  .joinrow .btn{padding:6px 11px; font-size:11.5px}
  .games{gap:7px}
  .gamecard{padding:7px 11px; border-radius:12px}
  .gamecard .gc-icon{font-size:18px; margin-bottom:2px}
  .gamecard .gc-name{font-size:15px}
  .gamecard .gc-tag{font-size:8.5px; padding:1px 6px}
  .gamecard .gc-players{font-size:9.5px; margin-top:1px}
  .gamecard .gc-desc{display:none}
  .lobby-foot{display:none}
  .roomhead{min-height:28px}
  .roomid{gap:6px}
  .roomid #roomGame{font-size:12.5px}
  #roomCode{font-size:13px; padding:3px 6px}
  .roomactions{gap:4px}
  .roomactions .btn{padding:4px 8px; font-size:10.5px}
  .btn.iconbtn{min-width:28px; padding:4px 6px; font-size:12px}
  .roomgrid{display:block; min-height:0; position:relative}
  .tablewrap{height:calc(100% - 0px); min-height:0; border-radius:12px}
  #costbar{display:none}
  #sideToggle{display:inline-flex}
  .side{
    position:fixed; top:44px; right:0; bottom:0; width:min(320px,86vw);
    z-index:45; background:#081a22; border-left:1px solid var(--line);
    padding:9px; overflow-y:auto; transform:translateX(105%);
    transition:transform .2s ease; box-shadow:-10px 0 30px rgba(0,0,0,.45); border-radius:12px 0 0 12px;
  }
  .side.open{transform:none}
  .side .seats{max-height:none}
  .seatcard{min-width:66px; padding:4px 6px; border-radius:10px}
  .seatcard .sc-avatar{width:24px; height:24px; font-size:12px; margin-bottom:2px}
  .seatcard .sc-name{font-size:9.5px; max-width:80px}
  .seatcard .sc-sub{font-size:8px}
  .seatcard .sc-score{font-size:8px}
  .seatcard .sc-cards{display:none}
  .seatcard.turn::after{bottom:-8px; font-size:7.5px; padding:1px 5px}
  .tablemic{width:34px; height:34px; font-size:14px; right:8px; bottom:8px}
  .ddz{padding:5px 7px 4px}
  .ddz-top{gap:5px}
  .ddz-bottom .handrow{min-height:54px}
  .ddz .handrow .card{width:38px; height:55px; margin-left:-18px}
  .ddz .handrow .card .c-rank{font-size:12.5px}
  .ddz-center-tag{font-size:9.5px}
  .bidbar{padding:4px 7px; gap:5px}
  .bidbar span{font-size:10px}
  .bidbar .btn{padding:5px 9px; font-size:11px; min-width:0}
  .actionbar{gap:6px}
  .actionbar .btn{padding:5px 11px; font-size:11.5px; min-width:0}
  .playarea{min-height:50px; min-width:52px}
  .playarea.compact{min-height:44px}
  .playarea .pa-cards{min-height:40px}
  .playarea .pa-cards .card.small{width:26px; height:37px; margin-left:-14px}
  .playarea .pa-cards .card.small .c-rank{font-size:9.5px}
  .playarea .pa-cards .card.small .c-suit{font-size:7.5px}
  .playarea .pa-text{display:none}
  .sk-bottom .handrow{min-height:50px}
  .sk .handrow .card{width:34px; height:50px; margin-left:-17px}
  .gc .handrow{min-height:50px}
  .gc .handrow .card{width:32px; height:47px; margin-left:-17px}
  .sk-side,.gc-side,.mj-side{width:104px}
  .gc .seatcard,.sk .seatcard{min-width:60px}
  .mj-hand .mj-tile{width:24px; height:33px; font-size:10px}
  .mj-discards{min-height:34px}
  .mj-tile.small{width:16px; height:22px; font-size:8px}
  .gc-scores{font-size:9px}
  .petbubble{bottom:70px; max-width:70%}
  .lr-seat{width:118px; min-height:80px; padding:6px 7px}
  .lrs-avatar{width:32px; height:32px; font-size:16px; margin-bottom:2px}
  .lrs-name{font-size:11px}
  .lrs-sub{font-size:9px}
  .lr-center{width:min(280px,46%); padding:8px 10px}
  .lr-center .lrc-code{font-size:19px}
  .lr-center .lrc-tip{font-size:10px; margin-top:3px}
  .lr-center .lrc-actions{margin-top:5px}
  .lr-center .lrc-actions .btn{padding:4px 9px; font-size:10px}
}

/* ---- 12. 平板/窄屏：侧栏改抽屉，牌桌占满 ---- */
@media (max-width: 980px){
  .roomgrid{display:block; position:relative; min-height:0}
  .tablewrap{height:100%; min-height:0}
  #sideToggle{display:inline-flex}
  .side{
    position:fixed; top:58px; right:0; bottom:0; width:min(330px,88vw);
    z-index:45; background:#081a22; border-left:1px solid var(--line);
    padding:10px; overflow-y:auto; transform:translateX(105%);
    transition:transform .2s ease; box-shadow:-10px 0 30px rgba(0,0,0,.45); border-radius:12px 0 0 12px;
  }
  .side.open{transform:none}
  .side .seats{max-height:none; overflow:visible}
  .side .chatlog{min-height:180px}
  .lobby-foot{display:none}
}
@media (max-width: 720px) and (orientation: portrait){
  #topbar{padding:0 10px; height:52px}
  .pf-name{max-width:78px; font-size:12px}
  .lobby-title{flex:1 1 100%}
  .lobby-title h1{font-size:17px}
  .lobby-title p{display:none}
  .joinrow{flex:1 1 100%}
  .joinrow input{width:auto; flex:1}
  .games{gap:7px}
  .gamecard .gc-desc{display:none}
  .gamecard{padding:9px 10px}
  .tablewrap{height:62vh}
  .roomgrid{display:flex; flex-direction:column; gap:8px; overflow-y:auto}
  .roomgrid .tablewrap{flex:0 0 auto}
  .side{position:static; transform:none; border:1px solid var(--line); border-radius:14px; width:auto; box-shadow:none; padding:10px; display:flex}
  .side .chatlog{min-height:150px}
  #lobby{overflow-y:auto}
  .lr-center{width:44%}
  .lr-seat{width:106px; min-height:78px; padding:6px}
  .lrs-avatar{width:30px;height:30px;font-size:15px}
  .lrs-name{font-size:10.5px}
  .lrs-sub{font-size:9px}
  .lrs-score{display:none}
}

/* ---- 13. 竖屏提示 ---- */
.rotatehint{
  position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:28px; background:radial-gradient(80% 60% at 50% 30%,rgba(10,40,50,.94),rgba(3,10,14,.97));
  backdrop-filter:blur(6px);
}
.rotatehint .rh-phone{font-size:64px; animation:rot 2.2s ease-in-out infinite}
@keyframes rot{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}
.rotatehint b{font-size:20px; letter-spacing:.1em}
.rotatehint span{font-size:12.5px; color:var(--muted); line-height:1.7; max-width:260px}
.rotatehint .btn{margin-top:10px}

/* ---- 14. 小补充 ---- */
.ddz-bids{font-size:10px; color:var(--muted); max-width:96%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gc-hint{font-size:10.5px; color:var(--muted); text-align:center; max-width:96%; line-height:1.5}
#roomStatus.turnpill{
  color:#2a1c07; background:linear-gradient(180deg,#f0c878,#e8b45a); border-color:#f0c878; font-weight:800;
  animation:turnpulse2 1.2s infinite;
}
.seatitem.turn{border-color:rgba(232,180,90,.55); box-shadow:inset 0 0 0 1px rgba(232,180,90,.35), 0 0 18px rgba(232,180,90,.14)}
.seatitem.turn .si-name{color:var(--gold)}
.seatitem.empty .si-avatar{color:var(--blue); border-style:dashed}
.si-tag.clone{background:rgba(111,199,216,.16); color:var(--blue)}

/* ---- 15. 截图回看后的修正 ---- */
/* 大厅方块：大图标水印，别空一大片 */
.gamecard::before{
  content:attr(data-icon); position:absolute; right:4px; bottom:-16px; line-height:1;
  font-size:clamp(64px,8.5vw,124px); opacity:.07; pointer-events:none; filter:saturate(.6);
}
.gamecard .gc-icon{font-size:clamp(22px,2.1vw,34px)}
.gamecard .gc-name{font-size:clamp(16px,1.45vw,24px)}

/* 房间大厅：我的座位别顶到底，中间信息块上移 */
.lr-center{top:36%}
.lr-seat{min-height:0}

/* 报牌气泡：横屏放到桌面顶部中间，别压叫分按钮 */
@media (orientation: landscape) and (max-height: 560px){
  .petbubble{
    top:4px; bottom:auto; left:50%; right:auto; transform:translateX(-50%);
    max-width:min(52%,420px); padding:4px 10px; border-radius:10px;
  }
  .petbubble::after{display:none}
  .pb-avatar{font-size:14px}
  #petText{font-size:11.5px; line-height:1.4}
  .lr-center{width:min(300px,44%); padding:7px 9px; top:32%}
  .lr-seat{width:112px; min-height:0; padding:5px 6px}
  .lrs-avatar{width:30px; height:30px; font-size:14px; margin-bottom:1px}
  .lrs-name{font-size:10.5px}
  .lrs-sub{font-size:8.5px; margin-top:1px}
  .lrs-score{display:none}
  .lrs-tag{font-size:7.5px; padding:1px 5px; margin-top:2px}
  .lr-seat .lrs-plus{width:30px; height:30px; font-size:20px; margin-bottom:2px}
}

/* 竖屏手机：方块不要拉成细长条 */
@media (max-width: 720px) and (orientation: portrait){
  .games{flex:0 0 auto; grid-template-rows:repeat(2, minmax(112px, 18vh))}
  .gamecard .gc-icon{font-size:22px}
  .gamecard .gc-name{font-size:16px}
  .lobby-foot{display:grid; grid-template-columns:1fr; gap:7px}
  .lobby-foot .note{display:none}
  .lobby-foot .note:first-child{display:block}
  .lr-center{top:30%}
  .lr-seat{width:104px}
}

/* ---- 16. 去掉水印、横屏小方块补一行简介 ---- */
.gamecard::before{content:none}
@media (orientation: landscape) and (max-height: 560px){
  .gamecard .gc-desc{
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
    font-size:9.5px; line-height:1.4; margin-top:2px; color:rgba(143,169,173,.9);
  }
}

/* ---- 17. 提示条位置 + 不可用菜单项 ---- */
@media (orientation: landscape) and (max-height: 560px){
  .toast{left:auto; right:54px; bottom:10px; transform:none; max-width:46vw; text-align:left; font-size:11.5px; padding:7px 11px}
  .toast.show{transform:none}
}
.seatopt:disabled{opacity:.45; cursor:not-allowed}
@media (orientation: landscape) and (max-height: 560px){
  .mj-side .playarea{min-height:38px}
  .mj-discards{min-height:30px}
  .mj-last{display:none}
}

/* ---- 18. 麻将底部改成竖排；空出牌位不画框 ---- */
.mj-bottom{flex-direction:column; align-items:center; gap:2px}

/* ---- 19. 本尊（双轨）---- */
.lr-seat.pending{
  border:1.5px solid rgba(232,180,90,.55); background:rgba(232,180,90,.07); cursor:default;
  box-shadow:0 0 0 1px rgba(232,180,90,.22), 0 0 30px rgba(232,180,90,.12);
}
.lr-seat.pending .lrs-avatar{background:linear-gradient(160deg,#7a5a1e,#3a2a0c); box-shadow:0 0 18px rgba(232,180,90,.35); animation:turnpulse 1.6s infinite}
.lr-seat.pending .lrs-sub b{color:var(--gold)}
.lr-seat.real{border-color:rgba(232,180,90,.7); box-shadow:0 0 0 1px rgba(232,180,90,.35), 0 0 30px rgba(232,180,90,.18)}
.lr-seat.real .lrs-avatar{background:linear-gradient(160deg,#8a6420,#4a3410); box-shadow:0 0 18px rgba(232,180,90,.4)}
.lrs-tag.real{background:rgba(232,180,90,.18); color:var(--gold)}
.seatcard.real{border-color:rgba(232,180,90,.55); box-shadow:0 0 0 1px rgba(232,180,90,.3), 0 0 26px rgba(232,180,90,.16)}
.seatcard.real .sc-avatar{background:linear-gradient(160deg,#8a6420,#4a3410); box-shadow:0 0 18px rgba(232,180,90,.35)}
.seatcard.real.turn{border-color:var(--gold); box-shadow:0 0 0 2px rgba(232,180,90,.7), 0 0 34px rgba(232,180,90,.35)}

/* ---- 20. 站内账号 ---- */
.accbox{width:min(430px,100%)}
.field{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted);margin-bottom:10px;letter-spacing:.06em}
.field input{padding:9px 11px;font-size:13px}
.acc-error{color:#e58a7a;font-size:11.5px;min-height:16px;margin:6px 0 0;line-height:1.5}
.acc-code{
  font-family:ui-monospace,Consolas,monospace;font-size:25px;letter-spacing:.12em;color:var(--gold);
  text-align:center;padding:12px;border:1px dashed rgba(232,180,90,.5);border-radius:12px;
  background:rgba(232,180,90,.06);margin:10px 0 14px;user-select:all;
}
.acc-card{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.acc-avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:24px;flex:0 0 auto;background:linear-gradient(160deg,#245c66,#12343b);border:1px solid rgba(111,199,216,.35);box-shadow:0 0 16px rgba(111,199,216,.2)}
.acc-main{min-width:0}
.acc-name{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-code-line{font-size:11px;color:var(--muted);margin-top:3px}
.acc-code-line code{color:var(--gold);letter-spacing:.06em}
.acc-money{font-size:11px;color:var(--gold);margin-top:3px}
.acc-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.acc-actions .btn{padding:6px 10px;font-size:11.5px;border-radius:9px}
.btn.small{margin-top:10px;width:100%;font-size:12px;padding:8px}
.accbox .copyrow{margin-top:0}
.accbox .copyrow .btn{flex:1}
@media (orientation: landscape) and (max-height: 560px){
  .accbox{width:min(430px,72vw);padding:14px 16px}
  .acc-code{font-size:20px;padding:8px;margin:6px 0 10px}
  .field{margin-bottom:7px}
  .acc-card{padding:9px}
  .acc-avatar{width:42px;height:42px;font-size:20px}
}

/* ---- 21. 鱼位动态立绘 ---- */
.seatcard .fish-slot{width:66px;height:84px;margin:0 auto 2px;display:grid;place-items:center;position:relative;z-index:1}
.seatcard.pet .fish-slot{width:70px;height:88px}
.fish-anim{
  width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
.seatcard.real .fish-anim{filter:drop-shadow(0 0 10px rgba(232,180,90,.45)) drop-shadow(0 6px 12px rgba(0,0,0,.45))}
.seatcard.pet.turn .fish-anim{animation:fishbob 1.2s ease-in-out infinite}
@keyframes fishbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.lr-seat .fish-slot{width:58px;height:74px;margin:0 auto 3px}
.lr-seat.pet .fish-slot{width:62px;height:78px}
.lr-seat.pending .fish-slot{width:46px;height:58px}
@media (orientation: landscape) and (max-height: 560px){
  .seatcard .fish-slot{width:50px;height:64px}
  .seatcard.pet .fish-slot{width:54px;height:68px}
  .lr-seat .fish-slot{width:46px;height:58px}
  .lr-seat.pet .fish-slot{width:48px;height:60px}
}