:root {
  --felt: #12704a;
  --felt-dark: #0b4a31;
  --gold: #f6c343;
  --gold-dark: #c8901a;
  --red: #d42a2a;
  --ink: #1d1d1d;
  --card-h: 30vh;
  --card-w: calc(var(--card-h) * 0.7);
  --small-h: 19vh;
  --small-w: calc(var(--small-h) * 0.7);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%);
  color: #fff;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

.screen { display: none; position: absolute; inset: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen.active { display: block; }

#rotate-tip { display: none; }
@media (orientation: portrait) {
  #rotate-tip { display: flex; position: fixed; inset: 0; z-index: 99; align-items: center; justify-content: center; background: var(--felt-dark); font-size: 28px; }
}

/* 按钮 */
.btn {
  border: 0; border-radius: 1.4vh; padding: 1.6vh 3.2vh; font-size: max(16px, 5vh); font-weight: 700;
  color: #fff; background: linear-gradient(#3a8fd8, #1f63a8); box-shadow: 0 0.6vh 0 #153f6b; font-family: inherit;
}
.btn:active { transform: translateY(0.5vh); box-shadow: 0 0.1vh 0 #153f6b; }
.btn.gold { background: linear-gradient(#ffd75e, var(--gold-dark)); color: #5a3300; box-shadow: 0 0.6vh 0 #8a5c00; }
.btn.red { background: linear-gradient(#f35b4f, #b82218); box-shadow: 0 0.6vh 0 #7a140d; }
.btn.gray { background: linear-gradient(#9aa3ab, #646d75); box-shadow: 0 0.6vh 0 #3f454b; }
.btn.small { padding: 1vh 2.2vh; font-size: max(14px, 4vh); }
.btn:disabled { opacity: 0.45; }

/* 大厅 */
.lobby-top { display: flex; align-items: center; justify-content: space-between; padding: 3vh 4vh; }
.me-card { display: flex; align-items: center; gap: 2vh; }
.me-name { font-size: 5.5vh; font-weight: 700; }
.title-tag:empty { display: none; }
.title-tag { font-size: 3.6vh; background: var(--gold); color: #5a3300; border-radius: 1vh; padding: 0.3vh 1.2vh; vertical-align: middle; }
.coins { font-size: 5vh; display: flex; align-items: center; gap: 1vh; }
.coins b { color: var(--gold); }
.bean { display: inline-block; width: 4.5vh; height: 4.5vh; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 45%, var(--gold-dark)); }
.logo { margin: 0; font-size: 9vh; letter-spacing: 1vh; color: var(--gold); text-shadow: 0 0.6vh 0 #7a4a00, 0 0 3vh rgba(0,0,0,0.4); }
.lobby-btns { display: flex; gap: 2vh; }
.rooms { display: flex; justify-content: center; gap: 4vh; margin-top: 4vh; }
.room {
  width: 30vw; max-width: 46vh; padding: 4vh 3vh; border-radius: 3vh; text-align: center; color: #3a2400;
  background: linear-gradient(#fff4cf, #f2c75c); box-shadow: 0 1.2vh 0 #9a6a10;
}
.room:active { transform: translateY(1vh); box-shadow: 0 0.2vh 0 #9a6a10; }
.room h2 { margin: 0 0 1.5vh; font-size: 8vh; }
.room .base { font-size: 5vh; font-weight: 700; color: var(--red); }
.room .desc { font-size: 4vh; margin-top: 1.2vh; }
.room .min { font-size: 3.6vh; margin-top: 1vh; color: #7a5a20; }
.room.locked { filter: grayscale(0.8); opacity: 0.7; }
.loading { text-align: center; font-size: 4.5vh; margin-top: 4vh; opacity: 0.85; }

/* 牌桌顶部 */
.topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 3vh; padding: 1.5vh 2.5vh; background: rgba(0,0,0,0.22); height: 13vh; }
.topbar .info { font-size: 4.5vh; flex: 1; }
.topbar .small-coins { flex: 1; justify-content: flex-end; }
.topbar .info b { color: var(--gold); }
.small-coins { font-size: 4.5vh; }
.bottom-cards { display: flex; gap: 0.6vh; }
.bottom-cards .card { --card-h: 11vh; }

.tracker { position: absolute; top: 14vh; left: 50%; transform: translateX(-50%); display: flex; gap: 0.3vh; background: rgba(0,0,0,0.3); border-radius: 1vh; padding: 0.6vh 1vh; font-size: 3.4vh; }
.tracker div { width: 4.6vh; text-align: center; line-height: 1.15; }
.tracker .n { color: var(--gold); font-weight: 700; }
.tracker .n.zero { color: #888; }

/* 座位 */
.seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0.8vh; }
.seat-left { left: 2.5vh; top: 17vh; }
.seat-right { right: 2.5vh; top: 17vh; }
/* 自己的地主/农民标签放在左边座位那一列的右侧，免得叠在上家下面看着像上家的 */
.seat-me { left: 18vh; bottom: 33vh; }
.seat-me .tag { display: none !important; }
.avatar { width: 13vh; height: 13vh; border-radius: 50%; background: linear-gradient(#ffe7b0, #d79b3b); color: #6a3d00; display: flex; align-items: center; justify-content: center; font-size: 7vh; font-weight: 700; border: 0.6vh solid #fff6; }
.avatar.big { width: 15vh; height: 15vh; font-size: 8vh; }
.seat-name { font-size: 4.2vh; }
.role { font-size: 4vh; font-weight: 700; min-height: 5vh; }
.role.landlord { background: var(--gold); color: #5a3300; padding: 0.2vh 1.5vh; border-radius: 1vh; }
.role.farmer { background: #5fb3ff; color: #08305a; padding: 0.2vh 1.5vh; border-radius: 1vh; }
.count { font-size: 6vh; font-weight: 800; color: var(--gold); min-width: 9vh; text-align: center; background: rgba(0,0,0,0.3); border-radius: 1.2vh; }
.count.warn { color: #ff6b5b; animation: blink 0.8s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
.seat.thinking .avatar { box-shadow: 0 0 0 0.8vh var(--gold); }

/* 出过的牌 */
.played { position: absolute; display: flex; align-items: center; min-height: var(--small-h); }
.played .card { --card-h: var(--small-h); }
.played-left { left: 19vh; top: 22vh; }
.played-right { right: 19vh; top: 22vh; flex-direction: row-reverse; }
.played-right .card { margin-left: 0 !important; }
.played-me { left: 50%; transform: translateX(-50%); bottom: 35vh; }
.say { font-size: 7vh; font-weight: 800; color: #ffe27a; text-shadow: 0 0.4vh 0 #0006; }
.reveal { position: absolute; display: flex; top: 44vh; }
.reveal .card { --card-h: 14vh; }
.reveal-left { left: 19vh; }
.reveal-right { right: 19vh; flex-direction: row-reverse; }

/* 我的手牌 */
.hand { touch-action: none; position: absolute; left: 0; right: 0; bottom: 1.5vh; height: calc(var(--card-h) + 5vh); display: flex; justify-content: center; align-items: flex-end; }
.hand .card { transition: transform 0.08s; }
.hand .card.sel { transform: translateY(-5vh); }
.hand .card.sel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 220, 80, 0.28); }

.actions { position: absolute; left: 0; right: 0; bottom: calc(var(--card-h) + 8vh); display: flex; justify-content: center; gap: 3vh; }
.actions .btn { min-width: 22vh; }

/* 扑克牌 */
.card {
  position: relative; flex: none; width: var(--card-w); height: var(--card-h);
  width: calc(var(--card-h) * 0.7);
  background: #fff; color: var(--ink); border-radius: calc(var(--card-h) * 0.08); border: 1px solid #999;
  box-shadow: -0.4vh 0 0.8vh rgba(0,0,0,0.25);
  font-weight: 800;
}
.card.red { color: var(--red); }
.card .r { position: absolute; left: 6%; top: 3%; font-size: calc(var(--card-h) * 0.3); line-height: 1; letter-spacing: -0.05em; }
.card .s { position: absolute; left: 8%; top: 32%; font-size: calc(var(--card-h) * 0.22); line-height: 1; }
.card .big-s { position: absolute; right: 8%; bottom: 5%; font-size: calc(var(--card-h) * 0.36); line-height: 1; opacity: 0.9; }
.card.joker .r { writing-mode: vertical-rl; font-size: calc(var(--card-h) * 0.17); letter-spacing: 0; }
.card.joker .big-s { font-size: calc(var(--card-h) * 0.3); }
.card.laizi { background: linear-gradient(#fff8dc, #ffe9a8); border: 0.5vh solid var(--gold-dark); }
.card .lz { position: absolute; right: 4%; top: 3%; font-size: calc(var(--card-h) * 0.13); background: var(--red); color: #fff; border-radius: 0.6vh; padding: 0 0.4vh; line-height: 1.2; }
.laizi-chip { display: none; background: var(--gold); color: #5a3300; border-radius: 1vh; padding: 0 1.2vh; margin-left: 1vh; font-weight: 700; }
.card.back { background: repeating-linear-gradient(45deg, #b8322a 0 1vh, #9a241d 1vh 2vh); border: 0.4vh solid #fff; }

/* 提示条 */
.toast { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); padding: 2vh 5vh; border-radius: 2vh; font-size: 6vh; display: none; z-index: 20; white-space: nowrap; }
.toast.show { display: block; }

/* 弹窗 */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 50; }
.mask.show { display: flex; }
.dialog { min-width: 60vw; max-width: 92vw; max-height: 90vh; overflow: auto; background: linear-gradient(#fffaf0, #f3e2b8); color: #3a2400; border-radius: 3vh; padding: 4vh 5vh; text-align: center; box-shadow: 0 2vh 6vh rgba(0,0,0,0.5); }
.dialog h2 { margin: 0 0 2vh; font-size: 8vh; }
.dialog h2.win { color: var(--red); }
.dialog h2.lose { color: #555; }
.dialog p { font-size: 5vh; margin: 1.2vh 0; }
.dialog .delta { font-size: 9vh; font-weight: 800; }
.dialog .delta.plus { color: var(--red); }
.dialog .delta.minus { color: #2b6e2b; }
.dialog .row { display: flex; gap: 3vh; justify-content: center; margin-top: 3vh; }
.dialog table { margin: 0 auto; font-size: 4.6vh; border-collapse: collapse; }
.dialog td { padding: 0.8vh 3vh; text-align: left; }
.dialog td:last-child { text-align: right; font-weight: 700; color: var(--red); }
.dialog .setting { display: flex; justify-content: space-between; align-items: center; font-size: 5vh; padding: 1.5vh 0; gap: 6vh; }
.dialog .breakdown { font-size: 4.2vh; color: #6a4a10; }
/* 启动页和玩法切换 */
.home-logo { text-align: center; font-size: 13vh; margin-top: 8vh; }
.home-choices { display: flex; justify-content: center; gap: 6vh; margin-top: 8vh; }
.home-choices .room { width: 34vw; padding: 7vh 3vh; }
.home-choices .room h2 { font-size: 10vh; }
.room.net { background: linear-gradient(#ffe0d8, #f08a6e); box-shadow: 0 1.2vh 0 #9a3a20; }
.mode-switch { display: flex; justify-content: center; gap: 0; margin-top: 1vh; }
.mode-switch button { font-size: max(16px, 5.5vh); font-weight: 700; padding: 1.4vh 6vh; border: 0.5vh solid var(--gold); background: transparent; color: #fff; font-family: inherit; }
.mode-switch button:first-child { border-radius: 2vh 0 0 2vh; }
.mode-switch button:last-child { border-radius: 0 2vh 2vh 0; }
.mode-switch button.on { background: var(--gold); color: #5a3300; }
#lobby .rooms { margin-top: 3vh; }

/* 联网 */
.online-entry { text-align: center; margin-top: 4vh; }
.btn.wide { min-width: 60vw; font-size: max(18px, 6vh); padding: 2vh 4vh; }
.online-body { display: flex; justify-content: center; align-items: center; height: 70vh; }
.online-body .center { font-size: 5vh; }
.big-actions { display: flex; gap: 6vh; }
.big-actions .room { width: 34vw; padding: 7vh 3vh; }
.form { background: rgba(0,0,0,0.25); padding: 3vh 6vh; border-radius: 3vh; text-align: center; }
.form h2 { margin: 0 0 2vh; font-size: 6vh; }
.form label { display: flex; align-items: center; gap: 2vh; font-size: 5vh; margin: 1.5vh 0; justify-content: space-between; }
.form input { font-size: 5.5vh; width: 30vw; padding: 1vh 2vh; border-radius: 1.2vh; border: 0; font-family: inherit; user-select: text; -webkit-user-select: text; }
.form .row { margin-top: 2vh; }
.link { font-size: 4vh; text-decoration: underline; opacity: 0.85; margin: 2vh 0 0; }
.net-status { display: none; position: absolute; left: 50%; top: 14vh; transform: translateX(-50%); background: #b8322a; padding: 1vh 3vh; border-radius: 1vh; font-size: 4.2vh; z-index: 30; }
#online .net-status { top: 22vh; }

.seat .tag { font-size: 3.4vh; color: #ffd2a0; min-height: 0; }
.seat .tag:empty { display: none; }
.seat .timer { position: absolute; top: -1vh; right: -3vh; font-size: 4.6vh; font-weight: 800; color: #fff; background: #1f63a8; border-radius: 50%; width: 7.5vh; height: 7.5vh; display: flex; align-items: center; justify-content: center; border: 0.4vh solid #fff; }
.seat-right .timer { right: auto; left: -3vh; }
.seat .timer:empty { display: none; }
.seat .timer.urgent { background: var(--red); animation: blink 0.8s infinite; }
.seat-me .timer { left: 0; right: auto; top: -9vh; width: 9vh; height: 9vh; font-size: 5.5vh; }
.seat.offline .avatar { filter: grayscale(1); opacity: 0.6; }
.seat.empty .avatar { opacity: 0.35; }
body:not(.online) .seat .tag, body:not(.online) .chat-btn, body:not(.online) .wait-panel, body:not(.online) .trustee-bar { display: none !important; }

.wait-panel { display: none; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 15; flex-direction: column; align-items: center; background: rgba(0,0,0,0.6); border-radius: 3vh; padding: 3vh 6vh; min-width: 50vw; }
.wait-panel .code-title { font-size: 4.5vh; }
.code-big { font-size: 13vh; font-weight: 800; color: var(--gold); letter-spacing: 2vh; line-height: 1.1; }
.wait-panel ul { list-style: none; padding: 0; margin: 1vh 0; font-size: 5vh; text-align: center; }
.wait-panel .row { display: flex; gap: 3vh; margin-top: 1vh; }
.wait-panel p { margin: 0.5vh 0; }

.trustee-bar { display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--card-h) + 8vh); z-index: 12; align-items: center; gap: 3vh; background: rgba(0,0,0,0.7); padding: 1.2vh 3vh; border-radius: 2vh; font-size: 5vh; }

.chat-btn { position: absolute; right: 2.5vh; bottom: calc(var(--card-h) + 8vh); z-index: 12; }
.chat-box { display: none; position: absolute; right: 2.5vh; bottom: calc(var(--card-h) + 19vh); z-index: 25; flex-direction: column; gap: 1vh; background: rgba(0,0,0,0.75); padding: 2vh; border-radius: 2vh; }
.chat-box.show { display: flex; }
.bubble { display: none; position: absolute; z-index: 18; background: #fff; color: #333; font-size: 4.6vh; padding: 1.2vh 2.4vh; border-radius: 2vh; max-width: 40vw; box-shadow: 0 0.6vh 1.6vh rgba(0,0,0,0.3); }
.bubble.show { display: block; }
.bubble-left { left: 18vh; top: 15vh; }
.bubble-right { right: 18vh; top: 15vh; }
.bubble-me { left: 18vh; bottom: 40vh; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5vh; margin: 2vh auto 0; width: 60vh; }
.keypad .btn { font-size: 7vh; padding: 1.2vh 0; }
.code-show { font-size: 10vh; letter-spacing: 3vh; font-weight: 800; color: var(--red); }
.dialog .code-big { color: var(--red); font-size: 8vh; letter-spacing: 1vh; }
.share-text { font-size: 4vh !important; background: #fff; padding: 2vh; border-radius: 1.5vh; user-select: text; -webkit-user-select: text; word-break: break-all; }
.dialog table.result td { font-size: 5.5vh; }
.dialog table.result td.plus { color: var(--red); }
.dialog table.result td.minus { color: #2b6e2b; }
.dialog table.rank td { padding: 0.6vh 2vh; }

.switch { width: 14vh; height: 7vh; border-radius: 4vh; background: #aaa; position: relative; border: 0; }
.switch::after { content: ""; position: absolute; top: 0.6vh; left: 0.6vh; width: 5.8vh; height: 5.8vh; border-radius: 50%; background: #fff; transition: left 0.15s; }
.switch.on { background: #2fa35a; }
.switch.on::after { left: 7.6vh; }