* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(1400px 900px at 50% 12%, #17293c 0%, #0e1822 55%, #0a111a 100%) fixed;
  color: #e8eef4; -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }
.muted { color: #8aa0b4; font-size: 13px; }

.screen { max-width: 860px; margin: 0 auto; padding: 24px 16px; }
.back-hub { display: inline-block; color: #6fc2ff; text-decoration: none; font-size: 14px; margin-bottom: 6px; }
.screen h1 { text-align: center; margin-bottom: 20px; font-size: 26px; }
.screen h2 { font-size: 16px; margin-bottom: 10px; color: #cfe0ee; }

.panel { background: #18242f; border: 1px solid #263845; border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.panel.rules .muted { line-height: 1.8; }
.home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .home-cols { grid-template-columns: 1fr; } }

label { display: block; font-size: 13px; color: #8aa0b4; margin: 8px 0 4px; }
input, select {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid #34495c; background: #0f1923; color: #e8eef4; font-size: 15px; outline: none;
}
.btn {
  display: inline-block; padding: 10px 16px; border-radius: 10px;
  border: 1px solid #3c5268; background: #24364a; color: #e8eef4; font-size: 15px; cursor: pointer; margin-top: 10px;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(#35ad6c, #1e7a4b); border: none; }
.btn.danger { background: linear-gradient(#d95463, #a92f3e); border: none; }
.btn.big { width: 100%; padding: 14px; font-size: 17px; }
.btn.small { padding: 5px 10px; font-size: 13px; margin-top: 0; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.row { display: flex; gap: 10px; align-items: center; }
.row select { flex: 1; }

.room-list { max-height: 200px; overflow-y: auto; }
.room-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #263845; gap: 8px; }
.room-item .btn { margin-top: 0; padding: 6px 14px; }
.join-code { display: flex; gap: 8px; margin-top: 12px; }
.join-code .btn { margin-top: 0; }
.footer { text-align: center; margin-top: 10px; }
.share { font-size: 15px; word-break: break-all; margin-bottom: 6px; }
.share b { color: #6fc2ff; }

.player-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 1px solid #263845; font-size: 15px; }
.player-row:last-child { border-bottom: none; }
.tag { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: #2c3f53; color: #9fc1dd; margin-left: 6px; }
.tag.host { background: #6b5424; color: #ffd97a; }
.tag.easy { background: #1f4d33; color: #8fe6b4; }
.tag.medium { background: #54481f; color: #f0d77c; }
.tag.hard { background: #5c2730; color: #ff9aa8; }

/* ===== 牌桌 ===== */
.screen-game {
  max-width: 900px; margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column; padding: 8px 12px 12px;
}
#g-topbar { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px; color: #8aa0b4; font-size: 13px; }

/* 玩家一排 */
#players-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 6px 0; }
.pcard {
  background: linear-gradient(180deg, rgba(24,37,52,.96), rgba(12,20,30,.94));
  border: 1.5px solid #3d5266; border-radius: 12px;
  padding: 7px 10px; width: 128px; text-align: center; position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(255,211,77,.3), 0 0 10px rgba(255,211,77,.4); }
  50%     { box-shadow: 0 0 0 2px rgba(255,211,77,.55), 0 0 20px rgba(255,211,77,.8); }
}
.pcard.turn { border-color: #ffd34d; animation: pulse 1.6s ease-in-out infinite; }
.pcard.me { border-color: #5aa7e0; }
.pcard.out { opacity: .4; filter: saturate(.4); }
.pcard .pname { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .pchips { font-size: 12px; color: #ffd97a; }
.pcard .pcup { font-size: 17px; margin-top: 2px; letter-spacing: 1px; }
.pcard .bid-bubble {
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  background: linear-gradient(#ffcf5a, #eda92c); color: #4a3200; font-weight: 800; font-size: 12px;
  padding: 2px 10px; border-radius: 12px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* 中央舞台 */
#stage {
  flex: none; min-height: 130px; margin: 16px 0 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: radial-gradient(ellipse at center, #2d3542 0%, #222833 62%, #181d25 100%);
  border: 4px solid #4a3826; border-radius: 24px;
  box-shadow: inset 0 0 40px rgba(0,0,0,.45), 0 0 0 1px rgba(201,154,80,.2);
  padding: 16px;
}
#bid-display { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; color: #ffe08a; }
#bid-display .die { width: 40px; height: 40px; }
#bid-display .who { font-size: 14px; font-weight: 600; color: #cfe0ee; }
#stage-sub { font-size: 13px; color: #9db4c8; display: flex; gap: 14px; align-items: center; }
.timer-badge {
  display: inline-flex; width: 38px; height: 38px; border-radius: 50%;
  align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 50% 40%, #ffcf5a, #e8961f); border: 2px solid #fff;
}

/* 骰子(CSS 点数;1、4 红点) */
.die {
  position: relative; width: 52px; height: 52px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(160deg, #ffffff, #e9ebe2);
  box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.06);
}
.die .pip {
  position: absolute; width: 18%; height: 18%; border-radius: 50%;
  background: #26292e; transform: translate(-50%, -50%);
}
.die.red-pips .pip { background: #d8252f; }
.die.hit { outline: 3px solid #ffd34d; outline-offset: 1px; }
.die.mini { width: 30px; height: 30px; border-radius: 6px; }

/* 我的区域 */
#me-zone {
  background: rgba(13,22,32,.72); border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px; padding: 12px; margin-top: 8px;
}
.zone-label { font-size: 12px; color: #8aa0b4; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.btn.tiny { padding: 3px 10px; font-size: 12px; margin-top: 0; border-radius: 12px; }
.btn.tiny.on { background: linear-gradient(#35ad6c, #1e7a4b); border-color: transparent; }
#my-dice { display: flex; gap: 10px; justify-content: center; align-items: flex-end; min-height: 96px; }

/* ===== 骰盅 ===== */
.cup-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; user-select: none; touch-action: none;
}
#cup {
  position: relative; width: 104px; height: 92px;
  transform-origin: 50% 90%;
  transition: transform .4s ease, opacity .4s ease;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.5));
}
#cup .body {
  position: absolute; inset: 0 12px 12px;
  background: linear-gradient(160deg, #9a6a3e 0%, #6b4526 55%, #462c15 100%);
  border-radius: 48% 48% 14px 14px / 70% 70% 12px 12px;
  box-shadow: inset -10px -6px 18px rgba(0,0,0,.4), inset 8px 6px 14px rgba(255,220,170,.16);
}
#cup .band {
  position: absolute; left: 8px; right: 8px; bottom: 18px; height: 12px;
  background: linear-gradient(#c99a50, #8a6428); border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
#cup .rim {
  position: absolute; left: 4px; right: 4px; bottom: 6px; height: 14px;
  background: linear-gradient(#7a5029, #4a2f16); border-radius: 10px;
}
.cup-hint { font-size: 12px; color: #9db4c8; }
.cup-wrap.myturn .cup-hint { color: #ffd34d; font-weight: 700; }

@keyframes cupShake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  12%  { transform: translate(-8px, -6px) rotate(-8deg); }
  28%  { transform: translate(8px, -10px) rotate(7deg); }
  44%  { transform: translate(-7px, -4px) rotate(-6deg); }
  60%  { transform: translate(7px, -9px) rotate(6deg); }
  76%  { transform: translate(-5px, -3px) rotate(-4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.cup-wrap.shaking #cup { animation: cupShake .45s ease-in-out infinite; }
.cup-wrap.shaking .cup-hint { visibility: hidden; }
#cup.lift { transform: translateY(-84px) rotate(-16deg) scale(.86); opacity: 0; }

/* 骰子揭晓动画 */
@keyframes dieIn {
  0% { transform: scale(.4) rotate(-14deg); opacity: 0; }
  70% { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.die.rolling { animation: dieIn .3s ease both; }
@keyframes dieSettle {
  0% { transform: scale(1.22); }
  55% { transform: scale(.94); }
  100% { transform: scale(1); }
}
.die.settle { animation: dieSettle .28s ease both; }

/* 操作区 */
#act-area { margin-top: 12px; min-height: 108px; }
#act-area .waiting { display: block; text-align: center; color: #9db4c8; font-size: 14px; padding: 30px 0; }
.bid-controls { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.count-row { display: flex; gap: 10px; align-items: center; }
.count-row .step {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: #24364a; color: #fff; font-size: 22px; font-weight: 800;
}
.count-row .cnt { font-size: 26px; font-weight: 800; color: #ffe08a; min-width: 66px; text-align: center; }
.face-row { display: flex; gap: 8px; }
.face-row .fbtn {
  padding: 3px; border-radius: 12px; border: 2px solid transparent; background: none; cursor: pointer;
}
.face-row .fbtn.sel { border-color: #ffd34d; background: rgba(255,211,77,.12); }
.face-row .die { width: 44px; height: 44px; }
.quick-row { display: flex; gap: 10px; }
.dslot { display: inline-flex; }
.go-row { display: flex; gap: 14px; }
.go-row .btn { margin-top: 0; min-width: 120px; padding: 12px 0; font-size: 17px; font-weight: 700; border: none; border-radius: 24px; text-align: center; }
.go-row .btn.call { background: linear-gradient(#35ad6c, #1e7a4b); }
.go-row .btn.open { background: linear-gradient(#ff8b5a, #e05a2b); }

/* 记录 */
#log-panel {
  margin-top: 10px; background: rgba(15,25,36,.8); border: 1px solid #2a3d50;
  border-radius: 12px; padding: 8px 12px; height: 110px; overflow: hidden;
}
#log-lines { height: 100%; overflow-y: auto; font-size: 12px; line-height: 1.7; color: #b8cadb; }

/* 开骰结果 */
#reveal-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(4,8,12,.72);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#reveal-box {
  background: rgba(10,17,26,.97); border: 1px solid #ffd34d; border-radius: 16px;
  padding: 18px 22px; max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto;
  box-shadow: 0 0 0 4px rgba(255,211,77,.1), 0 12px 44px rgba(0,0,0,.7);
}
#reveal-box h3 { text-align: center; font-size: 19px; margin-bottom: 4px; }
#reveal-box .verdict { text-align: center; font-size: 14px; color: #ffd97a; margin-bottom: 12px; }
.rv-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.rv-row:last-child { border-bottom: none; }
.rv-row .nm { width: 92px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-row .dice { display: flex; gap: 5px; }
.rv-sum { text-align: center; margin-top: 12px; font-size: 15px; font-weight: 700; color: #8fe6b4; }

#toast {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  background: #6b2530; border: 1px solid #8d3441; color: #fff; padding: 9px 18px; border-radius: 9px;
  font-size: 14px; z-index: 100; opacity: 0; pointer-events: none; transition: opacity .25s;
}
#toast.show { opacity: 1; }
#disconnected { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 200; display: flex; align-items: center; justify-content: center; }

@media (max-width: 560px) {
  .pcard { width: 104px; padding: 6px 6px; }
  .die { width: 44px; height: 44px; }
  #bid-display { font-size: 20px; }
  #bid-display .die { width: 34px; height: 34px; }
  .go-row .btn { min-width: 104px; }
}

/* ===== 牛牛专属 ===== */
.niu-badge {
  display: inline-block; font-size: 15px; font-weight: 800;
  background: linear-gradient(#ffcf5a, #eda92c); color: #4a3200;
  padding: 2px 12px; border-radius: 12px;
}
.niu-badge.none { background: #2c3f53; color: #9fc1dd; }
.rv-row .niu-badge { margin-left: auto; }