/* 《大革命》v1 — 标准扑克牌面 Web 版 */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#1a472a;--felt:#1e5631;--gold:#d4af37;--red:#c0392b;--black:#222;
  --card-w:64px;--card-h:90px;--card-r:6px;
  font-family:'Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:#eee;display:flex;flex-direction:column}

/* === 顶栏 === */
#topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 16px;background:rgba(0,0,0,.35);font-size:13px;z-index:10;
}
#topbar .round-info{font-weight:700;color:var(--gold)}
#topbar .wins-row span{margin-left:12px}
.weight-badge{background:var(--red);color:#fff;padding:1px 6px;border-radius:3px;font-size:11px;margin-left:4px}

/* === 对手区 === */
#opponents{display:flex;justify-content:center;gap:40px;padding:8px 0 4px}
.opp-zone{text-align:center;min-width:180px}
.opp-zone .name{font-weight:700;font-size:14px}
.opp-zone .meta{font-size:12px;color:#bbb}
.opp-zone .throne-badge{font-size:12px;padding:1px 6px;border-radius:3px;margin-left:4px}
.throne-red{background:#c0392b;color:#fff}
.throne-black{background:#333;color:#fff;border:1px solid #777}
.alliance-badge{font-size:11px;color:var(--gold);margin-left:2px}
.opp-cards{display:flex;justify-content:center;gap:2px;margin-top:4px}
.card-back{width:36px;height:50px;background:linear-gradient(135deg,#1a3a6e,#0d1f3c);border:1px solid #555;border-radius:3px}

/* === 桌面中央（墩区） === */
#table{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;min-height:200px;
}
#trick-area{
  display:flex;gap:24px;align-items:flex-end;min-height:120px;
}
.trick-slot{text-align:center}
.trick-slot .slot-label{font-size:11px;color:#aaa;margin-bottom:2px}
.trick-slot .slot-cards{display:flex;gap:3px;justify-content:center}

#trick-info{
  margin-top:8px;font-size:13px;text-align:center;min-height:20px;color:var(--gold);
}

/* === 信息条 === */
#status-bar{
  text-align:center;padding:4px;font-size:13px;background:rgba(0,0,0,.25);
  min-height:24px;
}

/* === 玩家手牌区 === */
#player-area{
  padding:4px 16px 10px;background:rgba(0,0,0,.2);
}
#player-meta{display:flex;justify-content:space-between;align-items:center;padding:2px 0 4px;font-size:13px}
#player-score{display:flex;align-items:center;gap:6px}
#hand{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
  min-height:calc(var(--card-h) + 16px);padding:8px 0;
}

/* === 扑克牌（标准牌面） === */
.card{
  width:var(--card-w);height:var(--card-h);
  background:#fff;border:1px solid #999;border-radius:var(--card-r);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:3px 5px;cursor:pointer;user-select:none;
  position:relative;transition:transform .12s,box-shadow .12s;flex-shrink:0;
}
.card:hover{transform:translateY(-6px);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.card.selected{transform:translateY(-14px);box-shadow:0 6px 16px rgba(0,0,0,.5);border-color:var(--gold)}
.card.disabled{opacity:.5;pointer-events:none}
.card .top{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.card .bot{display:flex;flex-direction:column;align-items:flex-end;transform:rotate(180deg);line-height:1.1}
.card .rank-text{font-size:15px;font-weight:700}
.card .suit-text{font-size:14px}
.card.red .rank-text,.card.red .suit-text{color:var(--red)}
.card.black .rank-text,.card.black .suit-text{color:var(--black)}
.card .center-suit{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:26px;opacity:.25;
}
.card.joker-card{background:linear-gradient(135deg,#fff8e1,#fff);text-align:center}
.card.joker-card .joker-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:32px;line-height:1;
}
.card.joker-card .joker-label{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-size:8px;font-weight:700;letter-spacing:1px;white-space:nowrap;
}
.card.joker-big .joker-center,.card.joker-big .joker-label{color:var(--red)}
.card.joker-small .joker-center,.card.joker-small .joker-label{color:var(--black)}
.card.sm .joker-center{font-size:20px}
.card.sm .joker-label{font-size:6px;bottom:10px}
.card .person-tip{
  position:absolute;bottom:1px;left:50%;transform:translateX(-50%);
  font-size:7px;color:#999;white-space:nowrap;pointer-events:none;
}
/* 分牌标记 */
.card .pts-badge{
  position:absolute;top:2px;right:2px;background:var(--gold);color:#000;
  font-size:8px;font-weight:700;padding:0 3px;border-radius:2px;
}
/* 级牌高亮 */
.card.level-card{border-color:var(--gold);box-shadow:0 0 4px var(--gold)}
/* 小尺寸（对手/墩区） */
.card.sm{width:46px;height:64px;padding:2px 3px;cursor:default}
.card.sm:hover{transform:none;box-shadow:none}
.card.sm .rank-text{font-size:12px}
.card.sm .suit-text{font-size:11px}
.card.sm .center-suit{font-size:18px}
.card.sm .person-tip{display:none}
.card.sm .pts-badge{font-size:7px}

/* === 行动按钮区 === */
#actions{
  display:flex;justify-content:center;gap:10px;padding:6px 0;min-height:40px;
}
#actions button{
  padding:6px 18px;border:none;border-radius:4px;font-size:14px;cursor:pointer;
  font-family:inherit;transition:background .15s;
}
.btn-primary{background:var(--gold);color:#000;font-weight:700}
.btn-primary:hover{background:#e6c34a}
.btn-primary:disabled{background:#888;color:#555;cursor:not-allowed}
.btn-secondary{background:#555;color:#ddd}
.btn-secondary:hover{background:#777}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#e74c3c}

/* === 全屏弹层（称王/停顿点/结算/终局） === */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;z-index:100;
  animation:fadeIn .25s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.overlay-box{
  background:#2a2a2a;border:2px solid var(--gold);border-radius:10px;
  padding:24px 32px;max-width:520px;width:90%;text-align:center;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
}
.overlay-box h2{color:var(--gold);margin-bottom:12px;font-size:20px}
.overlay-box h3{color:#ccc;margin:10px 0 6px;font-size:15px}
.overlay-box p,.overlay-box li{font-size:14px;line-height:1.6;color:#ddd}
.overlay-box ul{list-style:none;padding:0}
.overlay-box .btn-row{margin-top:16px;display:flex;justify-content:center;gap:10px}
.overlay-box table{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.overlay-box th,.overlay-box td{padding:4px 8px;border-bottom:1px solid #444;text-align:center}
.overlay-box th{color:var(--gold)}
.winner-row{color:var(--gold);font-weight:700}
.combo-banner{
  font-size:22px;font-weight:700;color:var(--red);
  text-shadow:0 0 12px rgba(192,57,43,.6);margin:8px 0;
}

/* === 摸牌阶段 === */
#draw-phase{display:flex;flex-direction:column;align-items:center}
#draw-pile{font-size:14px;color:#ccc;margin-bottom:4px;transition:color .2s}
.draw-card-anim{animation:drawPop .3s}
@keyframes drawPop{from{opacity:0;transform:scale(.7) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
#hand .card{animation:drawPop .2s ease-out}

/* === 事件日志 === */
#log{
  position:fixed;right:0;top:40px;width:260px;max-height:calc(100vh - 80px);
  overflow-y:auto;background:rgba(0,0,0,.5);padding:6px 10px;font-size:11px;
  color:#aaa;z-index:5;border-left:1px solid #333;
}
#log .log-entry{border-bottom:1px solid #333;padding:2px 0}
#log .log-combo{color:var(--red);font-weight:700}
#log .log-skill{color:#8ecae6}

/* 响应式 */
@media(max-width:700px){
  :root{--card-w:52px;--card-h:74px}
  .card.sm{width:38px;height:54px}
  #opponents{gap:16px}
  #log{width:180px;font-size:10px}
}