:root{--bg:#06130f;--panel:#09231a;--panel2:#0d3023;--line:#214638;--ink:#edf7ef;--muted:#8ba79b;--gold:#e8c36b;--lime:#b9ed54;--red:#ef766d;--felt:#075641;--shadow:0 24px 70px rgba(0,0,0,.34);font-family:Inter,"Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 45% 30%,#0b3023 0,transparent 34%),var(--bg)}button,input{font:inherit}button{border:1px solid var(--line);color:var(--ink);background:#102f25;min-height:40px;padding:0 16px;cursor:pointer}button:hover{border-color:#4e806b}.primary{background:var(--lime);color:#13250d;border-color:var(--lime);font-weight:800}.danger{background:#572721;border-color:#9b4941}.topbar{height:72px;padding:0 clamp(14px,4vw,56px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(4,18,13,.92);position:sticky;top:0;z-index:20}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none}.brand>span{width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-family:Georgia;font-style:italic}.brand b,.brand small{display:block;letter-spacing:.18em}.brand b{font-size:12px}.brand small{color:var(--gold);font-size:7px;margin-top:3px}.top-actions{display:flex;gap:18px;align-items:center;font-size:12px;color:var(--muted)}.top-actions a{color:var(--gold)}main{width:min(1500px,100%);margin:auto}.landing{min-height:calc(100vh - 72px);display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:8vw;padding:8vw}.hero p,.chat-panel header span,.room-head small,.result-card>span{font-size:9px;letter-spacing:.28em;color:var(--gold);font-weight:800}.hero h1{font:400 clamp(58px,9vw,128px)/.9 Georgia,"STKaiti";margin:18px 0}.hero>span{font-size:18px;color:var(--muted)}.lobby-card{padding:34px;border:1px solid var(--line);background:rgba(8,33,24,.92);box-shadow:var(--shadow);display:grid;gap:18px}.lobby-card>.primary{height:58px}.join-row{display:grid;grid-template-columns:1fr auto}.join-row input{height:48px;background:#061b14;border:1px solid var(--line);color:var(--ink);padding:0 15px;text-transform:uppercase;letter-spacing:.2em}.lobby-card p{color:var(--muted);line-height:1.8;font-size:12px}.room-shell{padding:20px clamp(10px,2vw,30px) 40px}.room-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.room-head>div{display:flex;align-items:center;gap:10px}.room-head strong{font:26px Georgia;color:var(--gold);letter-spacing:.18em}.room-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}.table-panel{min-height:calc(100vh - 135px);border:1px solid var(--line);background:#061d16;position:relative;overflow:hidden}.lobby-panel{width:min(720px,90%);margin:8vh auto;padding:36px;border:1px solid var(--line);background:var(--panel);text-align:center}.seat-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:30px 0}.seat{min-height:100px;border:1px solid var(--line);display:grid;place-items:center;padding:10px;color:var(--muted)}.seat.occupied{color:var(--ink);background:#102e24}.seat b,.seat small{display:block}.seat small{margin-top:5px;color:var(--gold)}.lobby-actions{display:flex;justify-content:center;gap:10px}.game-table{min-height:calc(100vh - 137px);padding:16px;background:radial-gradient(ellipse at center,#0b7055 0,#07513e 48%,#05241c 80%)}.status-line{min-height:38px;text-align:center;color:var(--gold);font-weight:700}.players{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;min-height:82px}.player{padding:10px;border:1px solid rgba(255,255,255,.16);background:rgba(2,24,17,.78);text-align:center;position:relative}.player.turn{outline:2px solid var(--lime);box-shadow:0 0 24px rgba(185,237,84,.25)}.player.me::after{content:"你";position:absolute;right:6px;top:6px;background:var(--lime);color:#14290c;padding:2px 5px;font-size:9px}.player b,.player span{display:block}.player span{color:var(--muted);font-size:11px;margin-top:4px}.center-board{min-height:280px;margin:14px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:1px solid rgba(255,255,255,.10);border-radius:45%;padding:25px;background:rgba(2,39,29,.22)}.board-label{color:var(--gold);font-size:12px}.card-row,.tile-row,.meld-row,.discard-row{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.card{width:54px;height:76px;border-radius:6px;background:#f7f4e9;color:#162018;border:2px solid transparent;padding:5px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;font-weight:900;box-shadow:0 5px 12px rgba(0,0,0,.22)}.card.red{color:#b72c2c}.card.selected,.tile.selected{transform:translateY(-12px);border-color:var(--lime);box-shadow:0 0 18px rgba(185,237,84,.6)}.card small{font-size:17px}.card.joker{justify-content:center;align-items:center;font-size:12px}.hand-area{padding:10px 8px 0;border-top:1px solid rgba(255,255,255,.12)}.hand-title{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.hand{min-height:90px;display:flex;align-items:flex-end;justify-content:center;overflow-x:auto;padding:16px 8px 4px}.hand .card{margin-left:-18px;flex:0 0 54px}.hand .card:first-child{margin-left:0}.tile{width:43px;height:58px;padding:4px;border-radius:4px;background:#f1ead0;color:#18241c;border:2px solid #d9caa3;display:grid;place-items:center;font:700 18px Georgia,"STKaiti";box-shadow:0 4px 8px rgba(0,0,0,.25)}.hand .tile{flex:0 0 43px}.tile.honor{color:#a42e2c}.controls{min-height:54px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;padding-top:8px}.controls button{min-width:90px}.chat-panel{border:1px solid var(--line);background:rgba(5,25,18,.96);display:grid;grid-template-rows:auto 1fr auto auto;min-height:calc(100vh - 135px);padding:20px}.chat-panel h2{font:26px Georgia;margin:8px 0 14px}.chat-list{overflow-y:auto;max-height:calc(100vh - 330px)}.chat-item{margin:9px 0;padding:10px;background:#102c22;border-radius:0 8px 8px 8px;font-size:12px}.chat-item b{color:var(--lime);display:block;margin-bottom:5px}.emoji-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.emoji-row button{padding:0}.chat-panel form{display:grid;grid-template-columns:1fr auto;margin-top:8px}.chat-panel input{min-width:0;background:#061812;border:1px solid var(--line);color:var(--ink);padding:0 10px}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);opacity:0;background:#172f26;border:1px solid var(--line);padding:12px 20px;transition:.2s;z-index:50}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid var(--line);background:#071d15;color:var(--ink);padding:0;box-shadow:var(--shadow);width:min(560px,calc(100% - 24px))}dialog::backdrop{background:rgba(0,0,0,.7)}.result-card{padding:34px}.result-card h2{font:40px Georgia;margin:10px 0}.result-card>div:last-child{display:flex;justify-content:flex-end;gap:8px;margin-top:25px}.result-list{display:grid;gap:8px}.result-row{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid var(--line)}
.bot-picker{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}.bot-picker span{color:var(--muted);font-size:12px}.bot-picker .expert{border-color:var(--gold);color:var(--gold);box-shadow:0 0 18px rgba(232,195,107,.12)}.remove-bot{display:block;min-height:28px;margin:8px auto 0;padding:0 9px;font-size:10px;color:var(--red);border-color:#663a35;background:transparent}
@media(max-width:900px){.landing{grid-template-columns:1fr;padding:50px 20px}.room-grid{grid-template-columns:1fr}.chat-panel{min-height:420px}.chat-list{max-height:260px}.table-panel,.game-table{min-height:680px}.players{grid-template-columns:repeat(2,1fr)}.seat-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.topbar{height:58px;padding:0 10px}.brand>span{width:32px;height:32px}.top-actions{gap:8px}.top-actions #connectionState{display:none}.room-shell{padding:8px}.room-head{align-items:flex-start}.room-head>div{gap:5px;flex-wrap:wrap}.room-head strong{font-size:20px}.table-panel,.game-table{min-height:620px}.game-table{padding:8px}.center-board{min-height:210px;border-radius:28%;padding:12px}.card{width:46px;height:66px}.hand .card{flex-basis:46px;margin-left:-20px}.tile{width:36px;height:50px;font-size:15px}.hand .tile{flex-basis:36px;margin-left:-4px}.controls{position:sticky;bottom:0;background:rgba(4,25,18,.94);padding:8px;z-index:5}.controls button{min-width:72px;padding:0 9px}.chat-panel{padding:14px}.hero h1{font-size:62px}}

/* ------------------------------------------------------------------
   Per-game art directions. Mechanics stay shared; identity does not.
   ------------------------------------------------------------------ */

/* 斗地主：热闹、轻快、带一点游园会和街机感。 */
body[data-game="doudizhu"]{
  --bg:#211126;--panel:#35183d;--panel2:#4a2050;--line:rgba(255,222,174,.2);
  --ink:#fff8e9;--muted:#d8bfcf;--gold:#ffd45b;--lime:#64e1c1;--red:#ff6b4a;--felt:#d64a38;
  color:var(--ink);background:
    radial-gradient(circle at 12% 18%,rgba(255,202,67,.28) 0 3px,transparent 4px),
    radial-gradient(circle at 86% 28%,rgba(86,224,193,.2) 0 4px,transparent 5px),
    radial-gradient(circle at 50% 15%,#66304f 0,transparent 42%),#211126;
  background-size:54px 54px,78px 78px,auto,auto;
  font-family:"Trebuchet MS","Microsoft YaHei",sans-serif;
}
body[data-game="doudizhu"] button{border-radius:12px;border-color:rgba(255,222,174,.22);background:#56244d;font-weight:700}
body[data-game="doudizhu"] button:hover{border-color:#ffd45b;transform:translateY(-1px)}
body[data-game="doudizhu"] .primary{background:linear-gradient(135deg,#ffe16f,#ffb42f);color:#3c1b25;border-color:#ffe16f;box-shadow:0 8px 24px rgba(255,180,47,.22)}
body[data-game="doudizhu"] .danger{background:#a93643;border-color:#ea6b69}
body[data-game="doudizhu"] .topbar{background:rgba(44,17,45,.94);border-bottom-color:rgba(255,212,91,.28);box-shadow:0 10px 35px rgba(23,4,25,.35)}
body[data-game="doudizhu"] .brand>span{border:0;border-radius:11px;background:#ffce43;color:#502034;font-family:inherit;font-style:normal;font-weight:900;transform:rotate(-4deg);box-shadow:4px 4px 0 #f06845}
body[data-game="doudizhu"] .brand small{color:#64e1c1}
body[data-game="doudizhu"] .landing{position:relative;overflow:hidden}
body[data-game="doudizhu"] .landing::before{content:"♠  ♥  ♣  ♦";position:absolute;left:5vw;top:9%;color:rgba(255,255,255,.055);font-size:clamp(70px,12vw,170px);letter-spacing:.08em;white-space:nowrap;transform:rotate(-7deg);pointer-events:none}
body[data-game="doudizhu"] .hero{position:relative}
body[data-game="doudizhu"] .hero p{display:inline-block;padding:7px 12px;border-radius:999px;background:#64e1c1;color:#2a1631;letter-spacing:.14em}
body[data-game="doudizhu"] .hero h1{font-family:"Microsoft YaHei",sans-serif;font-weight:950;letter-spacing:-.08em;color:#fff7dd;text-shadow:6px 7px 0 #b83e4e,11px 12px 0 rgba(0,0,0,.18);transform:rotate(-2deg)}
body[data-game="doudizhu"] .lobby-card{border-radius:26px;border:2px solid rgba(255,212,91,.34);background:linear-gradient(145deg,rgba(86,32,75,.97),rgba(48,23,60,.98));box-shadow:14px 16px 0 rgba(19,4,24,.28)}
body[data-game="doudizhu"] .join-row{gap:7px}
body[data-game="doudizhu"] .join-row input{border-radius:12px;background:#2e1838;border-color:rgba(255,222,174,.22)}
body[data-game="doudizhu"] .table-panel{border-radius:22px;border:2px solid rgba(255,212,91,.22);background:#341840;box-shadow:0 24px 70px rgba(19,4,24,.38)}
body[data-game="doudizhu"] .lobby-panel{border-radius:24px;background:#43204b}
body[data-game="doudizhu"] .seat{border-radius:16px;border-style:dashed}
body[data-game="doudizhu"] .seat.occupied{background:#5b2853;border-style:solid}
body[data-game="doudizhu"] .game-table{background:
  radial-gradient(circle at 50% 48%,rgba(255,198,70,.2) 0 6%,transparent 6.5%),
  radial-gradient(ellipse at center,#ef6a3f 0,#cf443e 52%,#632440 100%)}
body[data-game="doudizhu"] .status-line{display:grid;place-items:center;width:fit-content;min-width:260px;margin:0 auto 8px;padding:7px 20px;border-radius:999px;background:#421b3e;color:#ffe16f;box-shadow:0 8px 20px rgba(58,12,45,.28)}
body[data-game="doudizhu"] .player{border-radius:15px;border-color:rgba(255,255,255,.2);background:rgba(57,19,55,.8)}
body[data-game="doudizhu"] .player.turn{outline-color:#ffe16f;box-shadow:0 0 0 5px rgba(255,225,111,.13),0 12px 25px rgba(53,7,42,.24)}
body[data-game="doudizhu"] .player.me::after{border-radius:8px;background:#64e1c1;color:#27152c}
body[data-game="doudizhu"] .center-board{border:2px dashed rgba(255,244,213,.24);border-radius:32px;background:rgba(91,24,51,.2)}
body[data-game="doudizhu"] .board-label{color:#fff0b9;font-weight:800}
body[data-game="doudizhu"] .card{border-radius:11px;border:0;background:linear-gradient(145deg,#fffdf5,#f5e7c9);color:#241525;box-shadow:0 7px 0 #d9b981,0 11px 18px rgba(43,9,31,.28);font-size:17px}
body[data-game="doudizhu"] .card.red{color:#e33e3e}
body[data-game="doudizhu"] .card.selected{border:3px solid #64e1c1;box-shadow:0 4px 0 #55bba2,0 0 25px rgba(100,225,193,.55)}
body[data-game="doudizhu"] .hand-area{border-top:2px dashed rgba(255,255,255,.16);background:rgba(53,16,51,.34);border-radius:18px 18px 0 0}
body[data-game="doudizhu"] .chat-panel{border-radius:22px;border:2px solid rgba(255,212,91,.18);background:rgba(47,19,54,.96)}
body[data-game="doudizhu"] .chat-panel h2{font-family:"Microsoft YaHei",sans-serif;font-weight:900}
body[data-game="doudizhu"] .chat-item{border-radius:14px 14px 14px 3px;background:#55254f}
body[data-game="doudizhu"] .chat-item b{color:#64e1c1}
body[data-game="doudizhu"] .chat-panel input{border-radius:12px;background:#2a1532}
body[data-game="doudizhu"] dialog{border-radius:24px;background:#3a1b42;border:2px solid rgba(255,212,91,.3)}

/* 掼蛋：克制、理性、像会员制商务牌局。 */
body[data-game="guandan"]{
  --bg:#07101b;--panel:#0e1a29;--panel2:#142438;--line:#2b3d52;
  --ink:#edf2f7;--muted:#8495a8;--gold:#c49a66;--lime:#7ea5c9;--red:#b75d59;--felt:#162f42;
  color:var(--ink);background:
    linear-gradient(115deg,rgba(126,165,201,.045) 1px,transparent 1px),
    linear-gradient(25deg,rgba(126,165,201,.025) 1px,transparent 1px),#07101b;
  background-size:34px 34px,34px 34px,auto;
  font-family:Inter,"Microsoft YaHei",sans-serif;
}
body[data-game="guandan"] button{border-radius:3px;background:#142438;border-color:#30465e;letter-spacing:.04em}
body[data-game="guandan"] button:hover{border-color:#7ea5c9}
body[data-game="guandan"] .primary{background:#c49a66;color:#14202d;border-color:#d4ad7b;box-shadow:none}
body[data-game="guandan"] .danger{background:#3b2025;border-color:#764149}
body[data-game="guandan"] .topbar{height:76px;background:rgba(7,16,27,.95);border-bottom:1px solid #26394e}
body[data-game="guandan"] .brand>span{border-radius:2px;border:1px solid #c49a66;color:#c49a66;font-style:normal;font-family:Georgia;font-weight:700}
body[data-game="guandan"] .brand b{letter-spacing:.24em}
body[data-game="guandan"] .brand small{color:#7ea5c9;letter-spacing:.2em}
body[data-game="guandan"] .landing{background:linear-gradient(90deg,rgba(13,30,47,.52),transparent 55%)}
body[data-game="guandan"] .hero p{color:#7ea5c9;border-left:3px solid #c49a66;padding-left:13px}
body[data-game="guandan"] .hero h1{font-family:Georgia,"Noto Serif SC",serif;font-size:clamp(64px,9vw,118px);letter-spacing:.04em;color:#edf2f7}
body[data-game="guandan"] .hero>span{display:block;max-width:480px;padding-top:18px;border-top:1px solid #2b3d52}
body[data-game="guandan"] .lobby-card{border:1px solid #2b3d52;background:rgba(14,26,41,.96);box-shadow:0 36px 90px rgba(0,0,0,.38)}
body[data-game="guandan"] .join-row{gap:8px}
body[data-game="guandan"] .join-row input{background:#091521;border-color:#30465e}
body[data-game="guandan"] .table-panel{border-color:#2b3d52;background:#0d1927;box-shadow:0 28px 80px rgba(0,0,0,.34)}
body[data-game="guandan"] .lobby-panel{background:#101e2e}
body[data-game="guandan"] .seat{border-color:#30465e;text-transform:uppercase}
body[data-game="guandan"] .seat.occupied{background:#17283b;border-left:3px solid #c49a66}
body[data-game="guandan"] .game-table{background:
  linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
  radial-gradient(ellipse at center,#1b3c4d 0,#132b3d 54%,#0b1826 100%);background-size:46px 46px,46px 46px,auto}
body[data-game="guandan"] .status-line{padding:10px;border-bottom:1px solid rgba(196,154,102,.35);color:#d8b686;text-transform:uppercase;letter-spacing:.08em}
body[data-game="guandan"] .player{border-color:#365069;background:rgba(9,22,35,.86);text-align:left;padding-left:15px}
body[data-game="guandan"] .player.turn{outline:1px solid #c49a66;box-shadow:inset 3px 0 #c49a66,0 12px 30px rgba(0,0,0,.22)}
body[data-game="guandan"] .player.me::after{background:#7ea5c9;color:#09121d}
body[data-game="guandan"] .center-board{border:1px solid rgba(196,154,102,.28);border-radius:10px;background:rgba(8,21,33,.3);box-shadow:inset 0 0 0 8px rgba(255,255,255,.014)}
body[data-game="guandan"] .board-label{color:#c4a478;letter-spacing:.08em}
body[data-game="guandan"] .card{border-radius:4px;border:1px solid #d6d8d8;background:#f7f7f3;color:#111a23;box-shadow:0 5px 12px rgba(0,0,0,.25)}
body[data-game="guandan"] .card.selected{border-color:#c49a66;box-shadow:0 0 0 3px rgba(196,154,102,.25),0 10px 22px rgba(0,0,0,.28)}
body[data-game="guandan"] .hand-area{background:rgba(7,17,27,.5);border-top-color:#30465e}
body[data-game="guandan"] .chat-panel{border-color:#2b3d52;background:rgba(9,20,32,.97)}
body[data-game="guandan"] .chat-panel h2{font-family:Georgia,"Noto Serif SC",serif;font-weight:400}
body[data-game="guandan"] .chat-item{border:1px solid #2b3d52;border-radius:2px;background:#111f2f}
body[data-game="guandan"] .chat-item b{color:#c49a66}
body[data-game="guandan"] .chat-panel input{background:#07121d;border-color:#30465e}
body[data-game="guandan"] dialog{background:#0e1a29;border-color:#c49a66}

/* 麻将：纸、墨、象牙牌。少装饰，强调秩序和留白。 */
body[data-game="mahjong"]{
  color-scheme:light;
  --bg:#e9e5dc;--panel:#f7f4ed;--panel2:#ece7dc;--line:#c9c2b4;
  --ink:#29312b;--muted:#747970;--gold:#7a6b4e;--lime:#4c735c;--red:#a44737;--felt:#d7ddd3;
  color:#29312b;
  background:
    linear-gradient(rgba(54,70,59,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(54,70,59,.035) 1px,transparent 1px),#e9e5dc;
  background-size:28px 28px,28px 28px,auto;
  font-family:"Noto Serif SC","Songti SC","STSong",serif;
}
body[data-game="mahjong"] button{border-radius:1px;color:#29312b;background:#f5f1e8;border-color:#bbb3a5}
body[data-game="mahjong"] button:hover{border-color:#4c735c}
body[data-game="mahjong"] .primary{background:#3e674f;color:#fff;border-color:#3e674f}
body[data-game="mahjong"] .danger{background:#8f493d;color:#fff;border-color:#8f493d}
body[data-game="mahjong"] .topbar{background:rgba(241,238,230,.96);border-bottom:1px solid #c9c2b4;box-shadow:0 8px 28px rgba(45,53,47,.08)}
body[data-game="mahjong"] .brand>span{border-radius:0;border-color:#3e674f;color:#3e674f;font-style:normal;font-family:inherit}
body[data-game="mahjong"] .brand small{color:#7a6b4e}
body[data-game="mahjong"] .top-actions{color:#747970}
body[data-game="mahjong"] .top-actions a{color:#3e674f}
body[data-game="mahjong"] .landing{position:relative}
body[data-game="mahjong"] .landing::after{content:"東\A南\A西\A北";white-space:pre;position:absolute;left:50%;top:12%;color:rgba(62,103,79,.08);font:700 clamp(38px,6vw,78px)/1.3 inherit;letter-spacing:.4em;pointer-events:none}
body[data-game="mahjong"] .hero{z-index:1}
body[data-game="mahjong"] .hero p{color:#7a6b4e}
body[data-game="mahjong"] .hero h1{font-family:inherit;font-weight:500;letter-spacing:.16em;color:#26352b}
body[data-game="mahjong"] .hero>span{color:#747970}
body[data-game="mahjong"] .lobby-card{border:1px solid #c9c2b4;background:rgba(247,244,237,.96);box-shadow:0 28px 80px rgba(55,62,56,.12)}
body[data-game="mahjong"] .join-row{gap:8px}
body[data-game="mahjong"] .join-row input{background:#fbf9f4;border-color:#bbb3a5;color:#29312b}
body[data-game="mahjong"] .table-panel{border-color:#bbb3a5;background:#f1eee7;box-shadow:0 20px 55px rgba(55,62,56,.11)}
body[data-game="mahjong"] .lobby-panel{background:#f7f4ed}
body[data-game="mahjong"] .seat{border-color:#c9c2b4;color:#8a8d86}
body[data-game="mahjong"] .seat.occupied{background:#ece9e1;color:#29312b;border-bottom:3px solid #4c735c}
body[data-game="mahjong"] .game-table{background:#d8ddd4}
body[data-game="mahjong"] .status-line{width:fit-content;margin:0 auto 8px;padding:8px 24px;border-bottom:1px solid #7f9587;color:#425d4b}
body[data-game="mahjong"] .player{border:0;border-bottom:1px solid #aeb9af;background:rgba(247,246,240,.68);color:#29312b}
body[data-game="mahjong"] .player.turn{outline:0;border-bottom:3px solid #3e674f;box-shadow:none;background:#f5f2e9}
body[data-game="mahjong"] .player span{color:#747970}
body[data-game="mahjong"] .player.me::after{background:#3e674f;color:#fff}
body[data-game="mahjong"] .center-board{border:0;border-radius:2px;background:rgba(241,239,232,.55);box-shadow:inset 0 0 0 1px rgba(62,103,79,.17)}
body[data-game="mahjong"] .board-label{color:#5e695f}
body[data-game="mahjong"] .tile{border:1px solid #c8bea8;border-bottom:5px solid #768f7b;border-radius:3px;background:#fffdf5;color:#24322a;box-shadow:0 3px 5px rgba(54,60,55,.16);font-family:inherit}
body[data-game="mahjong"] .tile.honor{color:#9b3e34}
body[data-game="mahjong"] .tile.selected{border-color:#3e674f;box-shadow:0 0 0 3px rgba(62,103,79,.18),0 5px 8px rgba(54,60,55,.18)}
body[data-game="mahjong"] .hand-area{border-top:1px solid #aeb9af;background:rgba(244,241,234,.7)}
body[data-game="mahjong"] .hand-title{color:#666e67}
body[data-game="mahjong"] .controls{color:#5d655e}
body[data-game="mahjong"] .chat-panel{border-color:#bbb3a5;background:rgba(247,244,237,.96);color:#29312b}
body[data-game="mahjong"] .chat-panel header span{color:#7a6b4e}
body[data-game="mahjong"] .chat-panel h2{font-family:inherit;font-weight:500}
body[data-game="mahjong"] .chat-item{border-left:2px solid #94a396;border-radius:0;background:#eeebe4;color:#29312b}
body[data-game="mahjong"] .chat-item b{color:#3e674f}
body[data-game="mahjong"] .emoji-row button{background:#eeebe4}
body[data-game="mahjong"] .chat-panel input{background:#fbf9f4;border-color:#bbb3a5;color:#29312b}
body[data-game="mahjong"] dialog{background:#f7f4ed;color:#29312b;border-color:#7a6b4e}
body[data-game="mahjong"] dialog::backdrop{background:rgba(42,48,43,.48)}
body[data-game="mahjong"] .result-row{border-bottom-color:#c9c2b4}
body[data-game="mahjong"] .toast{background:#f7f4ed;color:#29312b;border-color:#7a6b4e}

@media(max-width:720px){
  body[data-game="doudizhu"] .hero h1{font-size:66px;text-shadow:4px 5px 0 #b83e4e,7px 8px 0 rgba(0,0,0,.18)}
  body[data-game="doudizhu"] .table-panel,body[data-game="doudizhu"] .chat-panel{border-radius:15px}
  body[data-game="guandan"] .topbar{height:64px}
  body[data-game="mahjong"] .landing::after{display:none}
}
@media(max-width:560px){
  .join-row input{min-width:0}
  body[data-game="doudizhu"] .controls{background:rgba(58,20,54,.94)}
  body[data-game="guandan"] .controls{background:rgba(7,17,27,.95)}
  body[data-game="mahjong"] .controls{background:rgba(241,238,230,.96);border-top:1px solid #aeb9af}
  body[data-game="mahjong"] .center-board{border-radius:2px}
}

/* ==================================================================
   TABLE EXPERIENCE V2 — spatial layouts, transitions and settlement
   ================================================================== */
::view-transition-old(root){animation:.18s ease both view-away}
::view-transition-new(root){animation:.32s cubic-bezier(.2,.8,.2,1) both view-arrive}
@keyframes view-away{to{opacity:0;transform:scale(.985)}}
@keyframes view-arrive{from{opacity:0;transform:scale(1.015)}}
@keyframes room-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes seat-arrive{from{opacity:0;transform:translate(-50%,-50%) scale(.72)}to{opacity:1}}
@keyframes turn-breathe{0%,100%{filter:brightness(1);transform:var(--seat-transform) scale(1)}50%{filter:brightness(1.18);transform:var(--seat-transform) scale(1.035)}}
@keyframes status-pop{0%{opacity:.2;transform:translate(-50%,-12px) scale(.9)}70%{transform:translate(-50%,2px) scale(1.025)}100%{opacity:1;transform:translateX(-50%)}}
@keyframes deal-in{0%{opacity:0;transform:translateY(-40px) rotate(-7deg) scale(.72)}75%{opacity:1;transform:translateY(3px) rotate(1deg) scale(1.02)}100%{transform:none}}
@keyframes play-in{0%{opacity:0;transform:translateY(52px) scale(.65)}70%{opacity:1;transform:translateY(-4px) scale(1.04)}100%{transform:none}}
@keyframes control-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes result-in{0%{opacity:0;transform:translateY(38px) scale(.88)}65%{transform:translateY(-5px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes emblem-in{0%{opacity:0;transform:rotate(-18deg) scale(1.7)}100%{opacity:1;transform:none}}

body.in-room{overflow-x:hidden}
.room-shell:not([hidden]){animation:room-rise .36s cubic-bezier(.2,.8,.2,1) both}
.room-head{min-height:54px;margin-bottom:14px}
.room-head>div:first-child{padding:7px 10px 7px 14px;border-left:3px solid var(--gold)}
.room-head button{transition:transform .18s ease,border-color .18s ease,background .18s ease}
.room-head button:hover{transform:translateY(-2px)}

.lobby-panel{min-height:620px;margin:0 auto;padding:38px 34px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;position:relative}
.lobby-panel::before{content:"";position:absolute;inset:22% 12% 22%;border:1px solid var(--line);border-radius:50%;opacity:.45;pointer-events:none}
.lobby-kicker{position:relative;z-index:2;color:var(--gold);font-size:9px;font-weight:900;letter-spacing:.32em}
.lobby-panel h2{position:relative;z-index:2;margin:8px 0 5px;font:400 34px/1.2 Georgia,"Noto Serif SC",serif}
.lobby-guide{position:relative;z-index:2;margin:0;color:var(--muted);font-size:12px}
.seat-list{position:relative;z-index:2;display:block;width:min(660px,100%);height:340px;margin:16px auto 0}
.seat{position:absolute;width:178px;min-height:82px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:11px;text-align:left;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.seat .seat-avatar{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-weight:900}
.seat b,.seat small{display:block}
.seat small{margin-top:4px;font-size:9px}
.empty-seat-icon{width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px;border:1px dashed currentColor;border-radius:50%;font-size:20px;opacity:.55}
.seat:not(.occupied){justify-content:center;color:var(--muted);border-style:dashed}
.seat.occupied{box-shadow:0 12px 30px rgba(0,0,0,.16)}
.seat:hover{z-index:4;filter:brightness(1.1)}
.lobby-seat-0{left:50%;bottom:4px;transform:translateX(-50%)}
.lobby-seat-1{right:0;top:50%;transform:translateY(-50%)}
.lobby-seat-2{left:50%;top:4px;transform:translateX(-50%)}
.lobby-seat-3{left:0;top:50%;transform:translateY(-50%)}
body[data-game="doudizhu"] .lobby-seat-1{right:4%;top:29%}
body[data-game="doudizhu"] .lobby-seat-2{left:4%;top:29%;transform:none}
body[data-game="doudizhu"] .lobby-panel::before{inset:23% 9% 18%;border:2px dashed rgba(255,225,111,.2)}
.bot-picker,.lobby-actions{position:relative;z-index:3}
.bot-picker{margin:2px 0 12px}
.lobby-actions .primary{min-width:210px;height:52px;transition:transform .18s ease,box-shadow .18s ease}
.lobby-actions .primary:hover{transform:translateY(-3px);box-shadow:0 13px 34px rgba(0,0,0,.24)}

.table-panel{min-height:720px}
.game-table{position:relative;isolation:isolate;min-height:720px;height:calc(100vh - 142px);max-height:940px;padding:0;overflow:hidden}
.table-aura{position:absolute;z-index:-1;left:50%;top:48%;width:74%;height:66%;transform:translate(-50%,-50%);border:12px solid rgba(0,0,0,.22);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 35px 80px rgba(0,0,0,.28)}
.status-line{position:absolute;z-index:8;left:50%;top:18px;min-width:280px;max-width:70%;min-height:36px;display:grid;place-items:center;margin:0;padding:7px 20px;transform:translateX(-50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-line.status-pop{animation:status-pop .38s cubic-bezier(.2,.8,.2,1) both}
.players{position:absolute;z-index:6;inset:0;display:block;min-height:0;pointer-events:none}
.player{--seat-transform:translate(-50%,-50%);position:absolute;width:190px;min-height:64px;display:flex;align-items:center;gap:10px;padding:9px 11px;text-align:left;pointer-events:auto;box-shadow:0 14px 34px rgba(0,0,0,.18);transition:filter .2s ease,box-shadow .2s ease}
.player.seat-top{left:50%;top:13%;transform:translate(-50%,-50%)}
.player.seat-right{--seat-transform:translate(50%,-50%);right:10%;top:48%;transform:translate(50%,-50%)}
.player.seat-bottom{--seat-transform:translate(-50%,50%);left:50%;bottom:205px;transform:translate(-50%,50%)}
.player.seat-left{--seat-transform:translate(-50%,-50%);left:10%;top:48%;transform:translate(-50%,-50%)}
.player-avatar{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-weight:900}
.player-copy{min-width:0;flex:1}
.player-copy b,.player-copy span,.player-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-copy span{margin-top:2px;color:var(--muted);font-size:10px}
.player-copy small{margin-top:3px;color:var(--gold);font-size:9px}
.player.me::after{right:auto;left:-5px;top:-7px;border-radius:10px}
.player.turn{outline-width:2px;animation:turn-breathe 1.35s ease-in-out infinite}
.turn-chip{position:absolute;right:8px;top:-12px;display:none;padding:4px 8px;border-radius:999px;background:var(--lime);color:#172016;font-size:9px;font-weight:900;box-shadow:0 5px 16px rgba(0,0,0,.22)}
.player.turn .turn-chip{display:block}
.opponent-rack{position:absolute;left:50%;bottom:-12px;display:flex;transform:translateX(-50%)}
.opponent-rack i{width:13px;height:20px;margin-left:-4px;border:1px solid rgba(255,255,255,.28);border-radius:2px;background:var(--panel2);transform:rotate(calc((var(--n, 0) - 2) * 3deg))}
.opponent-rack i:nth-child(1){--n:0}.opponent-rack i:nth-child(2){--n:1}.opponent-rack i:nth-child(3){--n:2}.opponent-rack i:nth-child(4){--n:3}.opponent-rack i:nth-child(5){--n:4}
.player.me .opponent-rack{display:none}

.center-board{position:absolute;z-index:3;left:50%;top:47%;width:48%;height:300px;min-height:0;margin:0;padding:22px;transform:translate(-50%,-50%);overflow:auto}
.center-board .played-cards .card{animation:play-in .34s cubic-bezier(.2,.8,.2,1) calc(var(--deal) * 28ms) both}
.play-caption{padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.14)}
.table-waiting{color:var(--muted);font-size:12px}
.hand-area{position:absolute;z-index:7;left:5%;right:5%;bottom:54px;height:112px;padding:8px 8px 0;overflow:visible}
.hand-title{height:20px;padding:0 8px}
.hand{height:88px;min-height:0;padding:14px 8px 3px;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
.hand .card,.hand .tile{animation:deal-in .32s cubic-bezier(.2,.8,.2,1) calc(var(--deal) * 18ms) both;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.hand .card:hover,.hand .tile:hover{filter:brightness(1.05);transform:translateY(-8px)}
.hand .card.selected,.hand .tile.selected{animation:none;transform:translateY(-15px)}
.controls{position:absolute;z-index:9;left:50%;bottom:9px;min-height:42px;width:max-content;max-width:90%;padding:0;transform:translateX(-50%)}
.controls button{animation:control-in .25s ease both;box-shadow:0 7px 18px rgba(0,0,0,.16);transition:transform .15s ease,filter .15s ease}
.controls button:hover{transform:translateY(-3px);filter:brightness(1.08)}

.team-axis{display:none;position:absolute;z-index:1;left:50%;top:15%;bottom:19%;width:1px;background:linear-gradient(transparent,var(--gold),transparent);opacity:.45}
.team-axis span{position:absolute;left:50%;top:50%;padding:4px 8px;transform:translate(-50%,-50%) rotate(-90deg);border:1px solid var(--gold);background:var(--bg);color:var(--gold);font-size:8px;letter-spacing:.2em}
body[data-game="guandan"] .team-axis{display:block}

body[data-game="doudizhu"] .table-aura{border-radius:50%;background:radial-gradient(ellipse,#d9533d,#a72f3c 70%);border-color:#5a2337;box-shadow:inset 0 0 0 3px rgba(255,225,111,.32),inset 0 0 70px rgba(87,17,50,.36),0 35px 80px rgba(34,4,25,.38)}
body[data-game="doudizhu"] .player.seat-left{left:12%;top:25%;transform:translate(-50%,-50%)}
body[data-game="doudizhu"] .player.seat-right{right:12%;top:25%;transform:translate(50%,-50%)}
body[data-game="doudizhu"] .player.seat-bottom{bottom:205px}
body[data-game="doudizhu"] .center-board{top:45%;height:250px;border:0;background:rgba(79,17,45,.22)}

body[data-game="guandan"] .table-aura{border-radius:32px;background:linear-gradient(145deg,#1c4154,#102a3d);border-color:#071725;box-shadow:inset 0 0 0 2px rgba(196,154,102,.32),inset 0 0 65px rgba(4,15,25,.35),0 35px 80px rgba(0,0,0,.38)}
body[data-game="guandan"] .center-board{border-color:rgba(196,154,102,.35);background:rgba(7,20,31,.3)}

body[data-game="mahjong"] .game-table{background:#cabda6}
body[data-game="mahjong"] .table-aura{width:70%;height:69%;border-radius:9px;background:#d9ded5;border:20px solid #766957;box-shadow:inset 0 0 0 2px #9aa99c,inset 0 0 55px rgba(56,78,63,.15),0 28px 55px rgba(44,41,35,.2)}
body[data-game="mahjong"] .center-board{width:48%;height:330px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;align-content:center;gap:9px;border:0;background:rgba(246,243,234,.42);box-shadow:inset 0 0 0 1px rgba(62,103,79,.2)}
body[data-game="mahjong"] .center-board>.board-label:first-child,body[data-game="mahjong"] .meld-zone{grid-column:1/-1}
body[data-game="mahjong"] .discard-zone{min-width:0;padding:5px;border:1px solid rgba(62,103,79,.12);background:rgba(255,255,255,.2)}
body[data-game="mahjong"] .discard-row{gap:1px;justify-content:flex-start}
body[data-game="mahjong"] .discard-row .tile{width:25px;height:32px;border-bottom-width:3px;padding:1px;font-size:9px}

#resultDialog{width:min(700px,calc(100% - 24px));max-width:none;border:0;background:transparent;overflow:visible}
#resultDialog::backdrop{background:rgba(1,5,9,.82);backdrop-filter:blur(12px)}
#resultDialog[open] .result-card{animation:result-in .48s cubic-bezier(.16,.85,.25,1) both}
.result-card{position:relative;overflow:hidden;min-height:450px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px clamp(28px,7vw,72px) 42px;border:1px solid var(--gold);background:linear-gradient(150deg,var(--panel2),var(--bg));text-align:center;box-shadow:0 45px 120px rgba(0,0,0,.55)}
.result-card::before,.result-card::after{content:"";position:absolute;width:220px;height:220px;border:1px solid var(--gold);border-radius:50%;opacity:.08}
.result-card::before{left:-110px;top:-110px}.result-card::after{right:-110px;bottom:-110px}
.settlement-emblem{width:86px;height:86px;display:grid;place-items:center;margin-bottom:18px;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font:700 40px/1 Georgia,"Noto Serif SC",serif;box-shadow:0 0 0 8px color-mix(in srgb,var(--gold) 10%,transparent);animation:emblem-in .55s .18s both}
.result-card>span{letter-spacing:.35em}
.result-card h2{margin:9px 0 22px;font-size:clamp(36px,7vw,58px)}
#resultBody{width:100%}
.settlement-summary{display:grid;gap:8px;margin:0 auto 18px;padding:17px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.settlement-summary span{color:var(--muted);font-size:10px;letter-spacing:.18em}
.settlement-summary strong{color:var(--gold);font:400 25px Georgia,"Noto Serif SC",serif}
.settlement-detail{display:flex;justify-content:space-between;gap:20px;margin:10px 0;padding:12px 15px;background:rgba(255,255,255,.035);color:var(--muted)}
.settlement-detail b{color:var(--gold)}
.settlement-actions{position:relative;z-index:2;width:100%;justify-content:center!important}
.settlement-actions button{min-width:130px}
body[data-game="doudizhu"] .result-card{border-radius:30px;border-width:2px;background:linear-gradient(145deg,#6b2853,#2d1638)}
body[data-game="doudizhu"] .settlement-emblem{background:#ffcf4b;color:#4e2037;border-color:#fff0a9;box-shadow:0 0 0 9px rgba(255,207,75,.14)}
body[data-game="guandan"] .result-card{background:linear-gradient(145deg,#172b40,#081522)}
body[data-game="mahjong"] .result-card{background:#f5f1e8;color:#29312b;border-color:#7a6b4e}

@media(max-width:900px){
  .room-shell{padding-top:10px}
  .room-grid{gap:10px}
  .table-panel,.game-table{min-height:700px}
  .game-table{height:700px}
  .table-aura{width:82%;height:61%}
  .player{width:158px}
  .player.seat-left{left:12%}.player.seat-right{right:12%}
  .center-board{width:53%}
  body[data-game="doudizhu"] .player.seat-left{left:15%}
  body[data-game="doudizhu"] .player.seat-right{right:15%}
  body[data-game="mahjong"] .table-aura{width:78%}
  body[data-game="mahjong"] .center-board{width:55%}
}

@media(max-width:560px){
  .room-shell{padding:6px 6px 26px}
  .room-head{min-height:78px;align-items:flex-start;gap:8px}
  .room-head>div:last-child{justify-content:flex-end}
  .table-panel,.game-table{min-height:680px}
  .game-table{height:680px;padding:0}
  .lobby-panel{min-height:680px;padding:26px 12px}
  .lobby-panel h2{font-size:28px}
  .lobby-panel::before{inset:24% 4% 24%}
  .seat-list{height:400px;margin-top:5px}
  .seat{width:132px;min-height:72px;padding:8px;gap:6px}
  .seat .seat-avatar{width:32px;height:32px;flex-basis:32px}
  .seat small{font-size:8px}
  .lobby-seat-1{right:-2px}.lobby-seat-3{left:-2px}
  body[data-game="doudizhu"] .lobby-seat-1{right:0;top:24%}
  body[data-game="doudizhu"] .lobby-seat-2{left:0;top:24%}
  .bot-picker{max-width:330px}
  .table-aura{top:46%;width:84%;height:58%;border-width:8px}
  .status-line{top:7px;min-width:0;width:calc(100% - 24px);max-width:none;font-size:11px}
  .player{width:126px;min-height:55px;padding:6px;gap:6px;border-radius:8px}
  .player-avatar{width:28px;height:28px;flex-basis:28px;font-size:11px}
  .player-copy b{font-size:11px}.player-copy span{font-size:8px}.player-copy small{font-size:8px}
  .opponent-rack{bottom:-9px}.opponent-rack i{width:10px;height:15px}
  .turn-chip{right:3px;top:-10px;padding:3px 5px;font-size:7px}
  .player.seat-top{top:11%}
  .player.seat-left{--seat-transform:translate(-22%,-50%);left:8%;top:37%;transform:translate(-22%,-50%)}
  .player.seat-right{--seat-transform:translate(22%,-50%);right:8%;top:37%;transform:translate(22%,-50%)}
  .player.seat-bottom{bottom:188px}
  .center-board{top:43%;width:62%;height:270px;padding:10px;border-radius:18px}
  .hand-area{left:0;right:0;bottom:48px;height:110px;padding-left:3px;padding-right:3px}
  .hand{justify-content:flex-start;padding-left:18px;padding-right:18px}
  .controls{bottom:5px;max-width:calc(100% - 10px)}
  .controls button{min-width:66px;min-height:38px;padding:0 8px;font-size:11px}
  body[data-game="doudizhu"] .player.seat-left{--seat-transform:none;left:7%;top:20%;transform:none}
  body[data-game="doudizhu"] .player.seat-right{--seat-transform:none;right:7%;top:20%;transform:none}
  body[data-game="doudizhu"] .player.seat-bottom{bottom:202px}
  body[data-game="doudizhu"] .center-board{top:42%;width:68%;height:230px}
  body[data-game="guandan"] .table-aura{border-radius:20px}
  body[data-game="mahjong"] .game-table{background:#c4b69f}
  body[data-game="mahjong"] .table-aura{top:45%;width:86%;height:60%;border-width:10px}
  body[data-game="mahjong"] .center-board{top:44%;width:64%;height:300px;padding:6px;gap:4px}
  body[data-game="mahjong"] .discard-zone{padding:2px}
  body[data-game="mahjong"] .discard-row .tile{width:18px;height:24px;font-size:7px;border-bottom-width:2px}
  #resultDialog{width:calc(100% - 18px)}
  .result-card{min-height:520px;padding:46px 18px 30px}
  .settlement-emblem{width:72px;height:72px;font-size:32px}
  .settlement-actions{display:grid!important;grid-template-columns:1fr 1fr}
  .settlement-actions button{min-width:0}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}