* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(circle at 50% 30%, #1f6b3a, #0d3d22);
  color: #fff; height: 100vh; overflow: hidden;
}
.hidden { display: none !important; }

/* 通用居中屏 */
.screen {
  height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 20px;
}
.screen h1 { font-size: 34px; letter-spacing: 4px; }
.screen h2 { font-size: 24px; }
.screen .card {
  background: rgba(0,0,0,.35); padding: 26px 30px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 14px; width: 320px;
}
.screen .card input {
  padding: 11px 14px; border-radius: 8px; border: none; font-size: 15px;
}
/* 头像选择 */
.avatar-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.avatar-opt {
  font-size: 24px; text-align: center; padding: 4px 0; border-radius: 8px;
  cursor: pointer; background: rgba(255,255,255,.08);
}
.avatar-opt.on { background: #f0a500; outline: 2px solid #fff; }
/* 大厅 */
.lobby-list { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.lobby-slot {
  width: 130px; background: rgba(0,0,0,.35); border-radius: 14px; padding: 16px 10px;
  text-align: center;
}
.lobby-slot .av { font-size: 44px; }
.lobby-slot .nm { font-weight: 600; margin-top: 6px; }
.lobby-slot .rd { font-size: 12px; opacity: .8; margin-top: 4px; }
.lobby-actions { display: flex; gap: 12px; }
/* 抽签 */
.draw-board { display: flex; gap: 28px; }
.draw-team { background: rgba(0,0,0,.35); border-radius: 14px; padding: 16px 22px; min-width: 180px; }
.draw-team.team-A h3 { color: #7ec8ff; } .draw-team.team-B h3 { color: #ff9f9f; }
.draw-row { display: flex; align-items: center; gap: 8px; font-size: 16px; padding: 6px 0; }
.draw-row .av { font-size: 28px; }
.draw-row.me { font-weight: 700; color: #ffe08a; }
button {
  cursor: pointer; border: none; border-radius: 8px; font-size: 15px;
  padding: 10px 18px; background: #f0a500; color: #222; font-weight: 600;
  transition: transform .05s;
}
button:hover { filter: brightness(1.07); }
button:active { transform: scale(.97); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.danger { background: #d94b4b; color: #fff; }
.msg { color: #ffd5d5; min-height: 18px; font-size: 14px; }

/* 牌桌 */
#game { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; padding: 8px 12px; }
#topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: rgba(0,0,0,.3); padding: 8px 14px; border-radius: 10px; font-size: 14px;
}
#topbar .tag { background: rgba(255,255,255,.12); padding: 3px 10px; border-radius: 20px; }
#topbar .lvl { font-weight: 700; color: #ffe08a; }

/* 牌桌用网格布局，三行三列，互不重叠 */
#table {
  display: grid; min-height: 0;
  grid-template-columns: minmax(120px, 1fr) 2fr minmax(120px, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    ".    top    ."
    "left center right"
    ".    bottom .";
  align-items: center; justify-items: center; gap: 4px;
}
.seat {
  background: rgba(0,0,0,.32); border-radius: 12px;
  padding: 6px 12px; min-width: 120px; text-align: center; border: 2px solid transparent;
}
.seat.top { grid-area: top; } .seat.bottom { grid-area: bottom; }
.seat.left { grid-area: left; } .seat.right { grid-area: right; }
.seat.turn { border-color: #ffd54a; box-shadow: 0 0 14px #ffd54a88; }
.seat.me { background: rgba(240,165,0,.22); }
.seat .seat-av { font-size: 28px; line-height: 1; }
.seat .nm { font-weight: 600; }
.seat .sub { font-size: 12px; opacity: .85; margin-top: 2px; }
.seat .teamA { color: #7ec8ff; } .seat .teamB { color: #ff9f9f; }
.seat .rank { color: #ffe08a; font-weight: 700; }

/* 摆在座位前的出牌 */
.seat .played { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; margin-top: 6px; }
.seat .played:empty { display: none; }
.seat .played .played-card { width: 30px; height: 42px; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.seat.topplay .played { background: rgba(74,208,106,.20); border-radius: 8px; padding: 3px; box-shadow: 0 0 10px rgba(74,208,106,.55); }
.pass-badge { align-self: center; font-size: 12px; color: #ffd5d5; background: rgba(0,0,0,.35); padding: 2px 8px; border-radius: 10px; }

#center { grid-area: center; text-align: center; min-width: 240px; align-self: center; }
#center .cur-desc { font-size: 14px; opacity: .9; margin-bottom: 6px; min-height: 18px; }
#playArea { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; min-height: 64px; }

/* 牌 */
.cardtile {
  position: relative;
  width: 46px; height: 64px; background: #fff; color: #222; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  font-weight: 700; box-shadow: 0 2px 5px rgba(0,0,0,.4); user-select: none;
}
.cardtile .mid { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.cardtile .corner { display: none; position: absolute; top: 3px; left: 5px; line-height: .95;
  flex-direction: column; align-items: center; text-align: center; }
.cardtile.sm { width: 34px; height: 48px; font-size: 13px; }
/* 四色牌 */
.cardtile.suit-S { color: #1a1a1a; }   /* 黑桃 黑 */
.cardtile.suit-H { color: #e0142b; }   /* 红桃 红 */
.cardtile.suit-D { color: #e6a100; }   /* 方片 黄 */
.cardtile.suit-C { color: #1769d1; }   /* 梅花 蓝 */
.cardtile.joker { color: #b8860b; font-size: 12px; flex-direction: column; }
.cardtile.wild { outline: 3px solid #f0a500; }

/* 我的手牌 */
#bottombar { display: flex; flex-direction: column; gap: 8px; }
/* 一行排开、像真实牌局一样略微叠压 */
#hand {
  display: flex; flex-wrap: nowrap; justify-content: center;
  min-height: 100px; padding: 14px 4px 4px; overflow-x: auto; overflow-y: visible;
}
#hand .cardtile {
  width: 64px; height: 90px; font-size: 24px; border-radius: 8px;
  cursor: grab; transition: transform .08s; touch-action: none;
  flex: 0 0 auto; margin-left: -34px;            /* 叠压，露出左侧约 30px */
  box-shadow: -2px 0 4px rgba(0,0,0,.35);
}
#hand .cardtile:first-child { margin-left: 0; }
/* 发牌动画：牌从上方飞入 */
@keyframes dealIn {
  from { opacity: 0; transform: translateY(-200px) rotate(-10deg) scale(.8); }
  to   { opacity: 1; transform: none; }
}
#hand .cardtile.deal-in { animation: dealIn .4s ease both; }
#hand .cardtile .mid { display: none; }          /* 叠牌时只看牌角 */
#hand .cardtile .corner { display: flex; font-size: 22px; }
#hand .cardtile.joker .corner { font-size: 14px; top: 5px; left: 4px; }
#hand .cardtile.sel { transform: translateY(-20px); outline: 3px solid #4ad06a; z-index: 50; }
/* 拿起的牌：显示完整正面、跟随指针 */
#hand .cardtile.dragging { cursor: grabbing; z-index: 1000; box-shadow: 0 10px 22px rgba(0,0,0,.55); transform: scale(1.06); }
#hand .cardtile.dragging .mid { display: flex; }
#hand .cardtile.dragging .corner { display: none; }
/* 落点空档提示 */
#hand .cardtile.placeholder { background: rgba(255,255,255,.12); box-shadow: none; outline: 2px dashed rgba(255,255,255,.45); }
#controls { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
#controls .hint { font-size: 14px; opacity: .9; }

/* 日志：放到右上角（topbar 下方），不再遮挡底部出牌按钮 */
#logs {
  position: fixed; right: 10px; top: 56px; width: 230px; max-height: 30vh;
  overflow-y: auto; background: rgba(0,0,0,.45); border-radius: 10px;
  padding: 8px 10px; font-size: 12px; line-height: 1.5; z-index: 5;
}
#bottombar { position: relative; z-index: 20; }
#controls { position: relative; z-index: 20; }
#logs h4 { font-size: 12px; margin-bottom: 4px; opacity: .8; }
.tribute-box { background: rgba(0,0,0,.4); padding: 10px; border-radius: 10px; margin-top: 6px; font-size: 14px; }
.banner { font-size: 18px; color: #ffe08a; font-weight: 700; margin: 6px 0; }

/* 记录开关按钮：仅手机显示 */
#logsBtn { display: none; }

/* ===================== H5 / 手机适配 ===================== */
@media (max-width: 640px) {
  body { height: 100dvh; }

  /* 登录/设置/大厅/抽签 */
  .screen { height: 100dvh; padding: 14px; gap: 12px; }
  .screen h1 { font-size: 28px; }
  .screen h2 { font-size: 20px; }
  .screen .card { width: min(340px, 92vw); padding: 20px; }
  .avatar-grid { gap: 5px; }
  .avatar-opt { font-size: 20px; }
  .lobby-list { gap: 10px; }
  .lobby-slot { width: 44%; padding: 12px 6px; }
  .lobby-slot .av { font-size: 36px; }
  .lobby-actions { flex-wrap: wrap; justify-content: center; }
  .draw-board { flex-direction: column; gap: 10px; width: 100%; }
  .draw-team { min-width: 0; width: 100%; }

  /* 牌桌整体 */
  #game { height: 100dvh; padding: 4px 6px; gap: 4px; }

  /* 顶栏：单行横向滚动，省纵向空间 */
  #topbar { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 6px 8px; font-size: 12px; -webkit-overflow-scrolling: touch; }
  #topbar .tag { white-space: nowrap; padding: 2px 7px; }
  #topbar button { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
  #topbar #meTag { display: none; }
  #topbar > span[style] { flex: 0 0 2px !important; }

  /* 三行三列缩小 */
  #table { grid-template-columns: minmax(60px,1fr) auto minmax(60px,1fr); gap: 2px; }
  .seat { min-width: 60px; padding: 4px 6px; border-radius: 8px; }
  .seat .seat-av { font-size: 22px; }
  .seat .nm { font-size: 12px; }
  .seat .sub { font-size: 10px; }
  #center { min-width: 0; }
  #center .cur-desc { font-size: 12px; }
  #playArea { min-height: 0; }
  .banner { font-size: 15px; }
  /* 座位前的出牌：手机上更小 */
  .seat .played { gap: 1px; margin-top: 4px; }
  .seat .played .played-card { width: 22px; height: 31px; font-size: 10px; }
  .pass-badge { font-size: 10px; padding: 1px 6px; }

  /* 手牌：换行平铺、显示完整小牌，便于点选 */
  #hand { flex-wrap: wrap; overflow: visible; min-height: 0; gap: 3px; padding: 6px 2px 2px; }
  #hand .cardtile { width: 42px; height: 60px; margin-left: 0; font-size: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
  #hand .cardtile .mid { display: flex; }
  #hand .cardtile .corner { display: none; }
  #hand .cardtile.sel { transform: translateY(-12px); }
  #hand .cardtile.dragging { transform: scale(1.1); }

  /* 控制按钮紧凑 */
  #controls { gap: 6px; }
  #controls button { padding: 9px 11px; font-size: 14px; }
  #controls .hint { width: 100%; text-align: center; font-size: 12px; }

  /* 记录：默认收起，点“记录”展开为底部浮层 */
  #logsBtn { display: inline-block; }
  #logs { display: none; top: auto; bottom: 64px; left: 6px; right: 6px; width: auto; max-height: 34vh; z-index: 60; }
  body.show-logs #logs { display: block; }
}