*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Microsoft YaHei",sans-serif;
  background:radial-gradient(circle at center,#1e7a42,#0d4a28);
  color:#fff;
  min-height:100vh;
}

/* 登录 */
#loginScreen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
}
.login-card{
  width:360px;max-width:95%;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,215,0,.45);
  border-radius:14px;padding:24px;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.login-card h1{font-size:30px;color:#f1c40f;text-align:center;margin-bottom:6px}
.login-card .sub{font-size:12px;opacity:.8;text-align:center;margin-bottom:16px}
.login-card label{font-size:13px;color:#ffd76a;display:block;margin:10px 0 6px}
.login-card input,.login-card select{
  width:100%;padding:10px;border-radius:8px;border:1px solid #876f16;background:#1c1c1c;color:#fff;
}
.btn-primary{
  width:100%;margin-top:14px;padding:10px 12px;border:none;border-radius:8px;
  background:linear-gradient(135deg,#f1c40f,#c79e10);color:#1b1b1b;font-weight:700;cursor:pointer;
}

/* 游戏 */
.top-bar{
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;background:rgba(0,0,0,.35);border-bottom:1px solid rgba(255,255,255,.1);
}
.left-info{display:flex;align-items:center;gap:10px}
.avatar{
  width:36px;height:36px;border-radius:50%;background:#243b55;display:flex;align-items:center;justify-content:center;
}
.name{font-weight:700}
.score{color:#f4d03f;font-size:14px}
.title{font-size:20px;color:#f1c40f;font-weight:700}
.right-actions{display:flex;gap:8px}

.btn-sm{
  border:1px solid rgba(255,215,0,.6);background:rgba(255,215,0,.14);color:#ffe08a;
  padding:6px 10px;border-radius:7px;cursor:pointer;
}

/* 桌面布局 */
.table-wrap{
  height:calc(100vh - 64px);
  display:grid;
  grid-template-columns:140px 1fr 140px;
  grid-template-rows:120px 1fr 190px;
  gap:8px;padding:8px;
}
.player{display:flex;flex-direction:column;align-items:center}
.player.top{grid-column:2;grid-row:1}
.player.left{grid-column:1;grid-row:2;justify-content:center}
.player.right{grid-column:3;grid-row:2;justify-content:center}
.player.bottom{grid-column:2;grid-row:3}

.tag{
  background:rgba(0,0,0,.45);border:1px solid rgba(255,215,0,.35);
  border-radius:8px;padding:4px 8px;font-size:12px;display:flex;align-items:center;gap:6px;
}
.tag.active{box-shadow:0 0 10px rgba(255,215,0,.45);border-color:#f1c40f}
.badge{padding:0 5px;border-radius:4px;font-size:11px}
.badge.dealer{background:#e74c3c}
.badge.tenpai{background:#3498db}

/* 手牌区 */
.robot-hand.h,.robot-hand.v,.self-hand{
  display:flex;gap:3px;flex-wrap:wrap;justify-content:center;align-items:flex-end;
}
.robot-hand.v{flex-direction:column;align-items:center}
.self-hand{
  min-height:88px;max-width:100%;
  background:rgba(0,0,0,.18);border-radius:8px;padding:6px;
}

/* 牌 */
.tile-wrapper{display:inline-block;transition:transform .12s ease}
.tile-wrapper:hover:not(.back){transform:translateY(-2px)}
.tile-wrapper.selected{transform:translateY(-8px)}
.tile-wrapper.back:hover{transform:none}

/* 关键：禁止反复动画，避免“牌一直动” */
.tile-deal-anim{animation:none!important}

/* 各家弃牌 */
.discards{
  margin-top:6px;display:flex;gap:3px;flex-wrap:wrap;justify-content:center;max-width:260px;
}

/* 中央 */
.center{
  grid-column:2;grid-row:2;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px;gap:8px;
}
.remain{font-size:14px;color:#ffd76a}
.center-discards{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.msg{height:18px;font-size:13px;color:#ffd76a}
.dice-area{display:flex;gap:6px}
.dice{
  width:34px;height:34px;border-radius:8px;background:#fff;color:#000;
  display:flex;align-items:center;justify-content:center;
}

/* 操作按钮 */
.actions{display:flex;gap:8px;margin-bottom:8px}
.btn-action{
  border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);
  color:#fff;padding:8px 14px;border-radius:8px;cursor:pointer;
}
.btn-action:disabled{opacity:.45;cursor:not-allowed}
.btn-action.draw{border-color:#2ecc71;color:#2ecc71}
.btn-action.discard{border-color:#e74c3c;color:#e74c3c}
.btn-action.sort{border-color:#3498db;color:#5dade2}

/* 听牌提示 */
.tenpai-hint{margin-top:4px;font-size:12px;color:#85c1e9}

/* 抢牌提示 */
.action-prompt{
  position:fixed;left:50%;bottom:110px;transform:translateX(-50%);
  z-index:1000;background:rgba(0,0,0,.85);padding:8px 10px;border-radius:10px;
  border:1px solid rgba(255,215,0,.45);display:flex;align-items:center;gap:8px;
}
.claim-info{font-size:12px;color:#ffd76a}

/* 遮罩/弹窗 */
.overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1100;
}
.overlay.show{display:block}

.panel{
  display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:1200;background:#121212;border:1px solid rgba(255,215,0,.45);
  border-radius:12px;padding:16px;min-width:320px;max-width:90vw;max-height:80vh;overflow:auto;
}
.panel.show{display:block}
.panel h2{color:#f1c40f;margin-bottom:10px}
.panel-actions{margin-top:12px;display:flex;gap:8px;justify-content:center}

.rank-table{width:100%;border-collapse:collapse}
.rank-table th,.rank-table td{
  border-bottom:1px solid rgba(255,255,255,.12);padding:8px;text-align:center;font-size:13px
}
.my-row{color:#f7dc6f}

/* 通知 */
.notification{
  position:fixed;right:14px;top:14px;z-index:1300;
  background:rgba(0,0,0,.88);padding:10px 12px;border-left:4px solid #f1c40f;border-radius:8px;
  transform:translateX(130%);transition:transform .25s;
}
.notification.show{transform:translateX(0)}
.notification.error{border-left-color:#e74c3c}
.notification.success{border-left-color:#2ecc71}
.notification.info{border-left-color:#3498db}

/* 小屏 */
@media (max-width: 900px){
  .table-wrap{
    grid-template-columns:90px 1fr 90px;
    grid-template-rows:100px 1fr 180px;
  }
  .title{font-size:16px}
  .btn-sm{padding:5px 8px;font-size:12px}
}