:root{
  --felt-1:#0b6b3a;
  --felt-2:#064d29;
  --gold:#f6c445;
  --ink:#eaf5ee;
  --card-w:60px;
  --card-h:84px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:radial-gradient(120% 90% at 50% 0%,var(--felt-1),var(--felt-2) 70%);
  min-height:100vh;
  overflow-x:hidden;
}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer;border:none;outline:none}

/* 顶栏 */
.topbar{
  height:52px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;background:rgba(0,0,0,.22);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:20;
}
.brand{font-weight:800;letter-spacing:1px;font-size:18px}
.top-right{display:flex;align-items:center;gap:12px;font-size:13px}
.room-tag{background:rgba(246,196,69,.16);border:1px solid rgba(246,196,69,.5);color:var(--gold);
  padding:3px 10px;border-radius:20px;font-weight:700;letter-spacing:1px}
.conn{display:inline-flex;align-items:center;gap:6px;opacity:.85}
.conn i{width:8px;height:8px;border-radius:50%;background:#ff5a5a;display:inline-block}
.conn.on i{background:#38d39f}
.conn.on{opacity:1}
.icon-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);
  width:30px;height:30px;border-radius:8px;font-size:15px;line-height:1;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.icon-btn:hover{background:rgba(255,255,255,.22)}
.icon-btn.muted{opacity:.5}

/* 通用屏幕 */
.screen{padding:24px 16px;display:flex;justify-content:center}
.hidden + .hidden{display:none}

/* 面板 */
.panel{
  width:100%;max-width:420px;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.1);border-radius:18px;
  padding:28px 24px;margin:auto;box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.panel h1{margin:0 0 4px;font-size:30px;text-align:center}
.panel h2{margin:0 0 6px;font-size:20px;text-align:center;font-weight:700}
.sub{margin:0 0 22px;text-align:center;opacity:.65;font-size:13px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;font-size:13px;opacity:.9}
.field input,input{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;border-radius:10px;padding:12px 14px;font-size:15px;outline:none;width:100%;
}
input::placeholder{color:rgba(255,255,255,.4)}
input:focus{border-color:var(--gold);background:rgba(255,255,255,.14)}

.btn{
  background:rgba(255,255,255,.12);color:#fff;border-radius:10px;
  padding:12px 16px;font-size:15px;font-weight:600;transition:.15s;border:1px solid rgba(255,255,255,.12);
}
.btn:hover{background:rgba(255,255,255,.2)}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(180deg,#ffd45e,#f0a81e);color:#3a2600;border:none;
  box-shadow:0 6px 18px rgba(240,168,30,.35)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.25);opacity:.85}
.btn.block{width:100%;display:block;margin-top:10px}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
.divider{display:flex;align-items:center;gap:10px;margin:18px 0;opacity:.5;font-size:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.2)}
.row{display:flex;gap:10px}
.join-row{margin-top:10px}
.join-row input{flex:1;letter-spacing:3px;font-weight:700;text-align:center}
.join-row .btn{white-space:nowrap}
.hint{font-size:12px;opacity:.55;margin-top:14px;line-height:1.6;text-align:center}

/* 等待房间 */
.room-code{color:var(--gold);letter-spacing:3px}
.wait-list{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:8px}
.wait-list li{
  display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-size:14px;
}
.wait-list li .dot{width:9px;height:9px;border-radius:50%;background:#38d39f}
.wait-list li.empty{opacity:.45;font-style:italic}
.wait-list li .tag{margin-left:auto;font-size:11px;background:rgba(246,196,69,.2);color:var(--gold);
  padding:2px 8px;border-radius:10px}

/* 牌桌 */
.table{width:100%;max-width:960px;position:relative;display:flex;flex-direction:column;gap:10px;min-height:calc(100vh - 100px)}
.table-top{display:flex;align-items:center;justify-content:space-between;
  background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 14px}
.bottom-cards{display:flex;align-items:center;gap:10px}
.bottom-cards .label{font-size:12px;opacity:.7;writing-mode:vertical-lr;letter-spacing:2px}
.mini-cards{display:flex;gap:4px}
.table-meta{display:flex;align-items:center;gap:10px}
.phase-tag{background:rgba(255,255,255,.12);padding:4px 12px;border-radius:20px;font-size:13px;font-weight:700}
.multi-tag{color:var(--gold);font-weight:800;font-size:16px}

.opponents{display:flex;justify-content:space-between;gap:10px}
.pbox{
  flex:1;max-width:270px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.09);
  border-radius:14px;padding:10px 12px;min-height:64px;position:relative;transition:.2s;
}
.pbox.active{border-color:var(--gold);box-shadow:0 0 0 2px rgba(246,196,69,.3)}
.pbox .head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.pbox .avatar{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:16px}
.pbox .badge{font-size:10px;background:linear-gradient(180deg,#ff6a4d,#d63a1f);color:#fff;
  padding:1px 7px;border-radius:9px;font-weight:800}
.pbox .badge.farmer{background:rgba(255,255,255,.16);color:#cfe}
.pbox .badge.offline{background:rgba(120,120,130,.5);color:#fff;animation:activePulse 1.4s ease-in-out infinite}
.pbox .meta{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;opacity:.85}
.pbox .remain{display:inline-flex;align-items:center;gap:5px}
.pbox .remain b{font-size:16px;color:var(--gold)}
.pbox .stamp{position:absolute;top:6px;right:10px;font-size:12px;font-weight:800;color:#ffd45e;
  background:rgba(0,0,0,.35);padding:2px 8px;border-radius:8px}
.pbox .stamp.pass{color:#ff9a9a}

.play-area{display:flex;justify-content:space-between;gap:10px;min-height:70px;padding:0 4px}
.play-slot{flex:1;display:flex;gap:20px}
.play-slot#playLeft{justify-content:flex-start}
.play-slot#playRight{justify-content:flex-end}
.play-slot.mine{justify-content:center;min-height:74px;align-items:center}

.my-area{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:auto}
.hand{display:flex;justify-content:center;padding:26px 10px 8px;min-height:calc(var(--card-h) + 34px);
  width:100%;overflow:visible}
.hand .card{margin-left:calc(var(--card-w) * -0.42);cursor:pointer;transition:transform .12s ease}
.hand .card:first-child{margin-left:0}
.hand .card.sel{transform:translateY(-22px)}
.hand .card.dim{filter:brightness(.72)}

.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;min-height:0}
.actions .btn{min-width:96px}

/* 单张牌 */
.card{
  width:var(--card-w);height:var(--card-h);border-radius:8px;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.3);flex:none;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:#1b1b1b;user-select:none;
}
.card .r{font-size:22px;font-weight:800;line-height:1;letter-spacing:-1px}
.card .s{font-size:18px;line-height:1;margin-top:2px}
.card.red{color:#e3342f}
.card.joker .r{font-size:15px;font-weight:800;letter-spacing:0}
.card.joker .s{font-size:22px}
.card.small{--card-w:34px;--card-h:48px;width:34px;height:48px}
.card.small .r{font-size:13px}
.card.small .s{font-size:11px}
.card.small.joker .r{font-size:9px}
.card.small.joker .s{font-size:13px}
.card.dead{filter:grayscale(.2) brightness(.95)}
.play-slot .card{margin-left:-18px}
.play-slot .card:first-child{margin-left:0}

/* 日志 */
.log-panel{
  position:fixed;right:14px;bottom:120px;width:216px;max-height:34vh;
  background:rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:10px;font-size:12px;overflow:auto;opacity:.9;z-index:5;
}
.log-title{font-weight:700;opacity:.7;margin-bottom:6px;font-size:11px;letter-spacing:1px}
.log-list{display:flex;flex-direction:column;gap:4px;line-height:1.5}
.log-list div{opacity:.85}
.log-list div:last-child{color:var(--gold);opacity:1}

/* 结算 */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(3px)}
.overlay-box{width:min(92vw,380px);background:linear-gradient(180deg,#0e7a44,#075a30);
  border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:26px 22px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.overlay-box h2{margin:0 0 8px;font-size:24px}
.over-detail{font-size:14px;opacity:.85;margin-bottom:14px}
.over-scores{display:flex;justify-content:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.over-scores .sc{background:rgba(0,0,0,.25);border-radius:10px;padding:8px 12px;min-width:76px}
.over-scores .sc b{display:block;font-size:18px;margin-top:3px}
.over-scores .sc .up{color:#7ef0b5}
.over-scores .sc .down{color:#ff9a9a}

/* Toast */
.toast{position:fixed;left:50%;top:74px;transform:translateX(-50%);
  background:rgba(20,20,20,.9);border:1px solid rgba(255,255,255,.15);color:#fff;
  padding:10px 18px;border-radius:24px;font-size:14px;z-index:80;box-shadow:0 8px 24px rgba(0,0,0,.4);
  animation:fadein .18s ease}
@keyframes fadein{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

@media (max-width:720px){
  :root{--card-w:46px;--card-h:66px}
  .hand .card{margin-left:calc(var(--card-w) * -0.5)}
  .card .r{font-size:17px}
  .card .s{font-size:14px}
  .pbox{max-width:none}
  .log-panel{width:150px;bottom:150px;font-size:11px}
  .actions .btn{min-width:78px;padding:10px 12px;font-size:14px}
}

/* ---------- 动画 ---------- */
@keyframes cardEnter{
  0%{opacity:0;transform:translateY(-46px) rotate(-10deg) scale(.9)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
}
@keyframes dealIn{
  0%{opacity:0;transform:translate(90px,120px) rotate(24deg) scale(.7)}
  100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
}
@keyframes stampIn{
  0%{opacity:0;transform:scale(1.7) rotate(-8deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes overlayIn{
  0%{opacity:0;transform:scale(.82) translateY(14px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes activePulse{
  0%,100%{box-shadow:0 0 0 2px rgba(246,196,69,.35)}
  50%{box-shadow:0 0 0 5px rgba(246,196,69,.12)}
}
@keyframes tableShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-6px,3px)}
  40%{transform:translate(6px,-3px)}
  60%{transform:translate(-4px,-2px)}
  80%{transform:translate(4px,2px)}
}
@keyframes bombFlash{
  0%{opacity:0}
  30%{opacity:.55}
  100%{opacity:0}
}

/* 出牌飞入 */
.play-slot .card.enter{animation:cardEnter .3s cubic-bezier(.2,.85,.3,1) both}
/* 发牌 */
.hand .card.dealing{animation:dealIn .36s cubic-bezier(.2,.8,.3,1) both}
/* 手牌悬停 */
.hand .card:hover{transform:translateY(-10px)}
.hand .card.sel:hover{transform:translateY(-26px)}
/* 印记弹出 */
.pbox .stamp.enter{animation:stampIn .24s cubic-bezier(.2,.9,.3,1.3) both}
/* 轮到谁就脉动 */
.pbox.active{animation:activePulse 1.6s ease-in-out infinite}
/* 炸弹抖动 */
.table.shake{animation:tableShake .42s ease}
/* 结算弹层 */
.overlay-box{animation:overlayIn .3s cubic-bezier(.2,.9,.3,1.15) both}
/* 炸弹白光 */
#bombFlash{position:fixed;inset:0;background:radial-gradient(circle at 50% 45%,#fff,transparent 62%);
  pointer-events:none;opacity:0;z-index:40}
#bombFlash.on{animation:bombFlash .45s ease}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}