:root{
  color-scheme:dark;
  font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --bg:#07111f;--panel:#0d1c2d;--line:rgba(255,255,255,.08);
  --gold:#f0ce6d;--blue:#6da9ff;--good:#70e49a;--bad:#ff7a7f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:#f7f2e4}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.38}
.hidden{display:none!important}
.sg-bg{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(circle at 20% 8%,rgba(32,91,170,.28),transparent 34%),
    radial-gradient(circle at 84% 22%,rgba(176,123,30,.14),transparent 30%),
    linear-gradient(160deg,#09182a,#040a12 72%);
}
.sg-app{width:min(1500px,100%);margin:auto;padding:10px}
.sg-topbar{
  min-height:72px;display:flex;align-items:center;gap:12px;
  padding:9px 12px;border:1px solid var(--line);border-radius:15px;
  background:rgba(7,16,28,.90);box-shadow:0 12px 35px rgba(0,0,0,.24);
  position:relative;z-index:20
}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.game-nav{display:flex;gap:4px;flex-wrap:wrap}
.game-nav a{
  text-decoration:none;color:#cbd5e4;font-size:8px;font-weight:900;
  padding:5px 7px;border-radius:7px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07)
}
.brand h1{margin:0;font-size:25px}
.brand p{margin:3px 0 0;color:#8191a6;font-size:9px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill{
  min-width:72px;padding:5px 8px;border-radius:9px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06)
}
.pill small{display:block;font-size:7px;color:#738398}
.pill strong{display:block;margin-top:2px;font-size:10px;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-btn{
  min-height:34px;padding:0 9px;border-radius:8px;color:#e7edf6;
  border:1px solid rgba(255,255,255,.09);background:#10243a;font-size:9px;font-weight:900
}

.table-shell{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:10px;margin-top:10px;align-items:start
}
.sg-table{
  position:relative;min-height:760px;border-radius:47% / 20%;
  border:8px solid #3a2815;outline:2px solid #a77d38;
  background:
    radial-gradient(circle at 50% 47%,rgba(44,109,170,.18),transparent 35%),
    linear-gradient(155deg,#0f3c62,#082844 66%,#071e34);
  box-shadow:inset 0 0 65px rgba(0,0,0,.40),0 24px 65px rgba(0,0,0,.38);
  overflow:visible
}
.sg-table::before{
  content:"";position:absolute;inset:8%;border-radius:48% / 22%;
  border:1px solid rgba(240,206,109,.13);pointer-events:none
}
.table-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;text-align:center;width:min(300px,35%)
}
.banker-badge{
  width:46px;height:46px;margin:0 auto 6px;display:grid;place-items:center;
  border-radius:50%;border:2px solid #f2d578;background:#6d4917;color:#ffe9a4;
  font-size:20px;font-weight:1000;box-shadow:0 0 18px rgba(244,201,83,.18)
}
.logo-text{font-size:14px;font-weight:1000;letter-spacing:.35em;color:#e9d693}
.phase{margin-top:9px;font-size:15px;font-weight:1000}
.timer{font-size:39px;font-weight:1000;color:#f3d778;font-variant-numeric:tabular-nums}
.hint{font-size:9px;color:#a7b5c5;line-height:1.45}
.limit{margin-top:7px;font-size:8px;color:#81b9f2}

.seats{position:absolute;inset:0;z-index:5;pointer-events:none}
.seat{
  position:absolute;transform:translate(-50%,-50%);
  width:165px;min-height:122px;padding:7px;border-radius:12px;
  border:1px solid rgba(255,255,255,.11);background:rgba(5,16,29,.93);
  box-shadow:0 10px 26px rgba(0,0,0,.33);pointer-events:auto
}
.seat.banker{border-color:rgba(244,204,81,.60);box-shadow:0 0 0 2px rgba(244,204,81,.12),0 10px 28px rgba(0,0,0,.34)}
.seat.offline{opacity:.58}
.seat-head{display:flex;align-items:center;gap:6px}
.avatar{
  width:29px;height:29px;flex:0 0 29px;border-radius:50%;display:grid;place-items:center;
  background:#153556;border:1px solid rgba(255,255,255,.09);font-size:10px;font-weight:1000
}
.seat-name{min-width:0;flex:1}
.seat-name b{display:block;font-size:10px;white-space:normal;word-break:break-all;line-height:1.15}
.seat-name small{display:block;margin-top:2px;font-size:7.5px;color:#93a6ba}
.role-badge{
  flex:0 0 auto;padding:2px 5px;border-radius:999px;background:#6b4815;color:#ffe493;
  border:1px solid rgba(244,210,99,.28);font-size:7px;font-weight:1000
}
.seat-status{display:flex;justify-content:space-between;gap:6px;margin-top:5px;font-size:7.5px;color:#a6b4c3}
.seat-status span,.seat-status strong{white-space:normal;word-break:break-word}
.seat-cards{height:37px;margin-top:5px;display:flex;gap:3px;align-items:center;justify-content:center}
.card{
  width:34px;height:47px;padding:3px;border-radius:5px;background:#fff;color:#111;
  box-shadow:0 3px 8px rgba(0,0,0,.22);font-size:9px;font-weight:1000;line-height:1.05
}
.card.red{color:#d1282f}
.card.back{
  background:repeating-linear-gradient(45deg,#133963,#133963 4px,#0b2748 4px,#0b2748 8px);
  border:1px solid #5c86b2;color:transparent
}
.seat-result{margin-top:4px;text-align:center;font-size:8px;font-weight:900}
.seat-result.win{color:var(--good)}
.seat-result.lose{color:var(--bad)}
.seat-result.tie{color:#d7d7d7}

.side-panel{display:flex;flex-direction:column;gap:8px}
.me-card,.rules-card,.players-card,.history-card{
  padding:11px;border-radius:14px;border:1px solid var(--line);background:rgba(9,23,38,.91);
  box-shadow:0 12px 34px rgba(0,0,0,.20)
}
.me-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.me-head small{display:block;color:#79899c;font-size:8px}
.me-head strong{display:block;margin-top:2px;font-size:16px;word-break:break-all}
.owner-badge{padding:4px 7px;border-radius:999px;background:rgba(237,196,70,.10);color:#f0cf72;font-size:8px}
.balance-row{margin-top:9px;display:flex;justify-content:space-between;align-items:end}
.balance-row span{font-size:9px;color:#899aad}
.balance-row strong{font-size:23px;color:#f4d978}
.my-role{
  margin-top:8px;padding:7px 8px;border-radius:8px;text-align:center;
  border:1px solid rgba(110,169,255,.13);background:rgba(110,169,255,.05);
  color:#a8cdfc;font-size:10px;font-weight:900
}
.my-cards{display:flex;justify-content:center;gap:7px;min-height:73px;margin-top:8px}
.my-cards .card{width:50px;height:70px;font-size:13px;padding:5px}
.my-hand-label{text-align:center;color:#e9d48f;font-size:11px;min-height:18px}
.ready-btn,.primary-btn{
  width:100%;min-height:45px;border-radius:9px;border:1px solid #e8c860;
  background:linear-gradient(180deg,#eed574,#ad7d23);color:#251700;font-size:13px;font-weight:1000
}
.ready-btn{margin-top:7px}
.bet-panel{margin-top:8px}
.bet-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.bet-title b{font-size:11px;color:#efdc9d}
.bet-title span{font-size:9px;color:#89a6c4}
.bet-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.bet-btn{
  min-height:42px;border-radius:8px;border:1px solid rgba(109,169,255,.22);
  background:#102b49;color:#dbeaff;font-size:10px;font-weight:1000
}
.bet-btn.active{
  border-color:#efcd67;background:linear-gradient(180deg,#876020,#4c3514);color:#fff0b0;
  box-shadow:0 0 13px rgba(236,198,83,.12)
}
.banker-wait,.next-wait{
  margin-top:8px;padding:8px;border-radius:8px;font-size:9px;line-height:1.5;text-align:center
}
.banker-wait{background:rgba(234,193,66,.07);color:#e8d18b;border:1px solid rgba(234,193,66,.13)}
.next-wait{background:rgba(84,163,235,.06);color:#a4caee;border:1px solid rgba(84,163,235,.12)}

.rules-card b{display:block;font-size:11px;color:#f0d67f}
.rules-card span{display:block;margin-top:5px;font-size:9px;line-height:1.55;color:#d8dee6}
.rules-card small{display:block;margin-top:4px;font-size:8px;line-height:1.55;color:#8394a6}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.section-title b{font-size:11px}
.section-title span{font-size:8px;color:#8999ab}
.player-list,.history-list{display:flex;flex-direction:column;gap:5px}
.player-row{
  padding:7px;border-radius:8px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.025)
}
.player-row-main{display:grid;grid-template-columns:25px minmax(0,1fr) auto;gap:6px;align-items:center}
.player-seat{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#122c48;font-size:8px}
.player-row b{font-size:10px;word-break:break-all}
.player-row small{display:block;margin-top:2px;color:#8193a5;font-size:7.5px;line-height:1.35}
.player-money{font-size:9px;color:#f0d579;white-space:nowrap}
.owner-actions{display:flex;gap:4px;margin-top:5px}
.owner-actions button{
  flex:1;min-height:23px;border-radius:6px;font-size:7px;font-weight:900;
  border:1px solid rgba(255,255,255,.08);background:#13263a;color:#dfeaf5
}
.history-item{padding:7px;border-radius:8px;background:rgba(255,255,255,.024);border:1px solid rgba(255,255,255,.05)}
.history-item b{display:block;font-size:9px;color:#e7d18a}
.history-item span{display:block;margin-top:2px;font-size:7.5px;color:#8797a8}

.modal{
  position:fixed;inset:0;z-index:110;display:none;place-items:center;padding:14px;
  background:rgba(2,7,13,.80);backdrop-filter:blur(7px)
}
.modal.open{display:grid}
.entry-card,.dialog-card{
  width:min(440px,96vw);padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,#0e2136,#071421);box-shadow:0 24px 70px rgba(0,0,0,.55)
}
.entry-logo{text-align:center;font-size:45px}
.entry-card h2{margin:7px 0 4px;text-align:center;font-size:20px}
.entry-card>p{margin:0 0 12px;text-align:center;color:#8899ac;font-size:9px;line-height:1.5}
.game-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px}
.game-tabs a,.game-tabs button{
  min-height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.08);
  background:#10263e;color:#c9d7e6;text-decoration:none;display:grid;place-items:center;font-size:8px;font-weight:900
}
.game-tabs .active{border-color:#e2c15e;color:#ffe79b;background:#5b4218}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:9px}
.mode-switch button{
  min-height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.08);
  background:#10253b;color:#b8c8d8;font-size:9px;font-weight:900
}
.mode-switch .active{border-color:#679dde;background:#15375c;color:#dcecff}
.entry-card label,.dialog-card label{display:block;margin-top:8px}
.entry-card label span,.dialog-card label span{display:block;margin-bottom:5px;color:#adbdcd;font-size:9px}
.entry-card input,.dialog-card input{
  width:100%;height:44px;border-radius:8px;border:1px solid rgba(255,255,255,.10);
  background:#06111d;color:#f4f8fb;padding:0 10px;outline:none;font-size:12px
}
.entry-btn{width:100%;min-height:46px;margin-top:11px;border-radius:9px;border:1px solid #e7c75f;background:linear-gradient(180deg,#eed574,#ad7b22);color:#251700;font-size:12px;font-weight:1000}
.entry-card>small,.dialog-card>small{display:block;margin-top:8px;text-align:center;color:#708294;font-size:8px}
.dialog-head{display:flex;align-items:start;justify-content:space-between;gap:10px}
.dialog-head small{display:block;color:#7d90a4;font-size:8px}
.dialog-head h3{margin:2px 0 0;font-size:17px}
.dialog-head button{width:31px;height:31px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:#13283e;color:#dbe5ef;font-size:18px}
.dialog-card>p{font-size:9px;color:#8fa0b3;line-height:1.5}
.primary-btn{margin-top:9px}
.adjust-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}
.adjust-presets button{min-height:35px;border-radius:7px;border:1px solid rgba(255,255,255,.08);background:#10263e;color:#d8e4ef;font-size:8px;font-weight:900}

.direct-overlay{
  position:fixed;inset:0;z-index:140;display:grid;place-items:center;background:rgba(3,9,16,.97)
}
.direct-overlay.hidden{display:none}
.direct-card{width:min(330px,90vw);padding:23px;text-align:center;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:#0c1e31}
.direct-card>div{font-size:42px}.direct-card b{display:block;font-size:15px;color:#f0d276}.direct-card span{display:block;margin-top:6px;font-size:9px;color:#8da0b4}
.direct-card i{display:block;width:27px;height:27px;margin:14px auto 0;border-radius:50%;border:3px solid rgba(255,255,255,.10);border-top-color:#e9ca66;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:180;
  transform:translate(-50%,18px);opacity:0;pointer-events:none;
  max-width:min(420px,90vw);padding:9px 12px;border-radius:9px;background:#13263a;border:1px solid rgba(255,255,255,.10);
  color:#edf4fb;font-size:10px;transition:.18s
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.success{border-color:rgba(94,222,135,.34);color:#b8ffd0}
.toast.warn{border-color:rgba(255,119,124,.34);color:#ffc6c8}

@media(max-width:1050px){
  .table-shell{grid-template-columns:1fr}
  .side-panel{display:grid;grid-template-columns:1fr 1fr}
  .me-card{grid-row:span 2}
}
@media(max-width:720px){
  .sg-app{padding:6px}
  .sg-topbar{padding:7px;align-items:flex-start}
  .brand{display:block}
  .game-nav{margin-bottom:5px}
  .brand h1{font-size:19px}.brand p{font-size:7.5px}
  .top-actions{gap:4px}.pill{display:none}.top-btn{font-size:7.5px;min-height:30px;padding:0 6px}
  .table-shell{margin-top:7px}
  .sg-table{min-height:650px;border-width:5px;border-radius:40% / 12%}
  .table-center{width:30%}
  .banker-badge{width:38px;height:38px;font-size:16px}
  .phase{font-size:11px}.timer{font-size:29px}.hint{font-size:7px}.limit{font-size:6.8px}

  .seat{width:98px;min-height:91px;padding:4px;border-radius:8px}
  .avatar{width:22px;height:22px;flex-basis:22px;font-size:8px}
  .seat-name b{font-size:8px}.seat-name small{font-size:6.5px}.role-badge{font-size:6px}
  .seat-status{font-size:6.5px;margin-top:3px}.seat-cards{height:28px;margin-top:3px}
  .card{width:22px;height:30px;font-size:6px;padding:2px}.seat-result{font-size:6.8px}

  .side-panel{display:flex}
  .me-head strong{font-size:15px}.balance-row strong{font-size:21px}
  .my-cards .card{width:48px;height:67px;font-size:13px}
  .bet-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bet-btn{font-size:9px;min-height:40px}
  .player-row b{font-size:11px}.player-row small{font-size:8.5px}.player-money{font-size:10px}
  .rules-card span{font-size:10px}.rules-card small{font-size:9px}
}
@media(max-width:390px){
  .sg-table{min-height:620px}
  .seat{width:91px;min-height:87px}
  .bet-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}
}