* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0f1923; 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; }
.back-hub:hover { text-decoration: underline; }
.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; }
.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;
}
input:focus { border-color: #4d9fd6; }

.btn {
  display: inline-block; padding: 10px 16px; border-radius: 8px;
  border: 1px solid #3c5268; background: #24364a; color: #e8eef4; font-size: 15px; cursor: pointer; margin-top: 10px;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: #1f7a4d; border-color: #2a9e65; }
.btn.danger { background: #6b2530; border-color: #8d3441; }
.btn.big { width: 100%; padding: 14px; font-size: 17px; }
.btn.small { padding: 5px 10px; font-size: 13px; margin-top: 0; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.row { display: flex; gap: 10px; align-items: center; }
.row select { flex: 1; }

.room-list { max-height: 220px; 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: none; width: 100vw; height: 100vh; padding: 0; margin: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #0a121a;
}
#felt {
  position: relative; width: 100%; height: 100%; max-width: 1180px; max-height: 680px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 80% 62% at 50% 40%, #2a7a52 0%, #1d6342 55%, #134a30 100%),
    #0f1923;
  overflow: hidden;
}

/* 手机竖握:整个牌桌旋转成横屏铺满(宽高由 JS 按像素设定,避免 vw/vh 换算问题) */
body.landscape-rotate .screen-game {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
body.landscape-rotate { --cw: 42px; --hb: 14px; }
#felt::before { /* 桌沿光晕 */
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 120px rgba(0,0,0,.5); pointer-events: none;
}

/* 卡牌固定大小(不随窗口连续缩放,只在小屏分档);--hb 手牌离底距离 */
:root { --cw: 48px; --hb: 26px; }
@media (max-width: 860px) { :root { --cw: 40px; } }
@media (max-width: 640px) { :root { --cw: 34px; --hb: 16px; } }

#g-topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 8;
  display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
}
#ddz-info { color: #e7f3ec; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.g-pill {
  border: none; border-radius: 16px; padding: 6px 14px; font-size: 13px; cursor: pointer;
  background: rgba(0,0,0,.35); color: #fff; border: 1px solid rgba(255,255,255,.25);
}
.g-pill.danger { background: rgba(140,40,52,.7); }
.g-pill:active { transform: scale(.96); }

/* 扑克牌(2026-07-29 美化版):左上角「点数+花色」+ 右下角大花色水印,
   象牙白渐变底 + 细内框,王牌带🃏。高度按自身宽度算(修复 mini 牌被拉长) */
.card {
  width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .13);
  background: linear-gradient(160deg, #ffffff 0%, #fbfaf4 55%, #f0eee2 100%);
  color: #1c1c22;
  box-shadow: 0 1px 4px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.8);
  position: relative; flex: 0 0 auto;
  overflow: hidden; user-select: none; font-weight: 800;
}
.card::after { /* 细内框,一点"印刷感" */
  content: ""; position: absolute; inset: calc(var(--cw) * .05);
  border: 1px solid rgba(60, 70, 90, .12); border-radius: calc(var(--cw) * .09);
  pointer-events: none;
}
.card .idx {
  position: absolute; top: calc(var(--cw) * .04); left: calc(var(--cw) * .07);
  display: flex; flex-direction: column; align-items: center; line-height: .82; z-index: 1;
}
.card .idx .r { font-size: calc(var(--cw) * .5); }
.card .idx .s { font-size: calc(var(--cw) * .44); }
.card .pip { /* 右下角大花色水印 */
  position: absolute; right: calc(var(--cw) * .07); bottom: calc(var(--cw) * .03);
  font-size: calc(var(--cw) * .58); line-height: 1; opacity: .85; pointer-events: none;
}
.card.red { color: #d8252f; }
.card.red .pip { text-shadow: 0 1px 2px rgba(216,37,47,.18); }
.card .jk {
  position: absolute; top: calc(var(--cw) * .06); left: 0; right: 0;
  margin: 0 auto; width: 1em;
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: calc(var(--cw) * .3); letter-spacing: 0; font-weight: 800;
}
.card.joker-s, .card.joker-b { background: linear-gradient(160deg, #fffef7 0%, #fdf6df 60%, #f4e9c8 100%); }
.card.joker-s { color: #232330; }
.card.joker-b { color: #d8252f; }
.card.joker-s .pip, .card.joker-b .pip { font-size: calc(var(--cw) * .5); opacity: 1; }
.card.mini { --cw: 34px; }
@media (max-width: 640px) { .card.mini { --cw: 28px; } }
.role-landlord { color: #ffd34d; font-weight: 700; }
.role-farmer { color: #8fe6b4; font-weight: 700; }

/* 地主底牌 */
#bottom-cards { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 6; }

/* 对手座位:头像信息 + 牌背叠放 */
.oppseat { position: absolute; top: 58px; width: 180px; z-index: 5; }
#seat-left { left: 14px; }
#seat-right { right: 14px; }
.oppseat .ohead { display: flex; align-items: center; gap: 8px; }
#seat-right .ohead { flex-direction: row-reverse; text-align: right; }
.oppseat .avatar {
  width: 48px; height: 48px; border-radius: 50%; font-size: 26px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3a5570, #24384a);
  border: 2px solid #cdd9e6; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.oppseat .pinfo { overflow: hidden; }
.oppseat .pname { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oppseat .pcoins { font-size: 12px; color: #ffd97a; }
.oppseat .prole { font-size: 15px; }
.oppseat.turn .avatar { border-color: #ffd34d; box-shadow: 0 0 14px #ffd34d; }
/* 牌背叠放 + 张数 */
.cardstack { display: flex; align-items: center; margin-top: 6px; height: calc(var(--cw) * .82); }
#seat-right .cardstack { flex-direction: row-reverse; }
.cardstack .cb {
  width: calc(var(--cw) * .5); height: calc(var(--cw) * .82); border-radius: 3px; flex: 0 0 auto;
  margin-left: calc(var(--cw) * -0.34);
  background: repeating-linear-gradient(45deg, #2f63a6, #2f63a6 3px, #244f86 3px, #244f86 6px);
  border: 1px solid #d3dbe6; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.cardstack .cb:first-child { margin-left: 0; }
#seat-right .cardstack .cb { margin-left: 0; margin-right: calc(var(--cw) * -0.34); }
#seat-right .cardstack .cb:first-child { margin-right: 0; }
.cardstack .cnt {
  margin: 0 6px; background: rgba(0,0,0,.6); border-radius: 12px; padding: 2px 11px;
  font-size: 18px; color: #ffe08a; font-weight: 800; flex: 0 0 auto;
}

/* 出牌展示区:左 / 右 / 我自己,各在各的位置
   z-index 高于对手座位(5):无论如何,出的牌永远显示在最上面,不被头像/牌背遮挡 */
.playzone { position: absolute; z-index: 6; display: flex; gap: 3px; align-items: center; min-height: calc(var(--cw) * 1.0); }
#play-left { left: 11%; top: 150px; }
#play-right { right: 11%; top: 150px; justify-content: flex-end; }
/* 手机端:出牌区放到座位旁边的空地上,和座位完全错开 */
@media (max-width: 640px) {
  #play-left { left: 148px; top: 112px; }
  #play-right { right: 148px; top: 112px; }
}
#play-me { left: 50%; transform: translateX(-50%); bottom: calc(var(--hb) + var(--cw) * 1.4 + 78px); }
.playzone .pass-bubble {
  background: rgba(245,248,255,.92); color: #3a5570; font-weight: 700; font-size: 15px;
  padding: 5px 16px; border-radius: 16px; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* 我(左侧空白区,不再压住手牌) */
#me-corner {
  position: absolute; left: 12px; bottom: calc(var(--hb) + var(--cw) * 1.4 + 62px); z-index: 7; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.18);
  border-radius: 30px; padding: 4px 14px 4px 4px;
}
#me-corner .avatar {
  width: 46px; height: 46px; border-radius: 50%; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#5a3a70,#3a2450); border: 2px solid #d6b8ff; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
#me-corner .pname { font-size: 14px; font-weight: 600; color: #fff; }
#me-corner .pcoins { font-size: 12px; color: #ffd97a; }
#me-corner .prole { font-size: 15px; }
#me-corner.turn .avatar { border-color: #ffd34d; box-shadow: 0 0 14px #ffd34d; }

/* 我的手牌 */
#my-hand {
  position: absolute; left: 0; right: 0; bottom: var(--hb); z-index: 6;
  display: flex; justify-content: center; align-items: flex-end;
  padding: 0 12px; touch-action: none; min-height: calc(var(--cw) * 1.4);
}
#my-hand .card { margin-left: calc(var(--cw) * -0.4); cursor: pointer; transition: transform .08s; }
#my-hand .card:first-child { margin-left: 0; }
/* 选中只上移,不抬层级,避免盖住相邻未选牌的角标;加金色描边更醒目 */
#my-hand .card.sel {
  transform: translateY(-20px);
  box-shadow: 0 0 0 2px #ffd34d, 0 6px 14px rgba(0,0,0,.45);
}

/* 操作区(不出 / 倒计时 / 提示 / 出牌)— 按钮固定大小,只调间距 */
#ddz-actions {
  position: absolute; left: 50%; bottom: calc(var(--hb) + var(--cw) * 1.4 + 14px); transform: translateX(-50%);
  display: flex; gap: 16px; align-items: center; z-index: 7;
}
.act-btn {
  border: none; cursor: pointer; color: #fff; font-size: 16px; font-weight: 700;
  width: 92px; padding: 11px 0; text-align: center; border-radius: 24px;
  box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.3);
  background: linear-gradient(#5b8def, #3a63c8); flex: 0 0 auto;
}
.act-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.act-btn.play { background: linear-gradient(#ffb24d, #f08a1e); }
.act-btn.pass { background: linear-gradient(#9aa6b4, #6f7d8c); }
.act-btn.bid3 { background: linear-gradient(#ff7a7a, #e23d3d); }
.act-btn:disabled { opacity: .45; cursor: not-allowed; }
.timer-badge {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 50% 40%, #ffcf5a, #e8961f); border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.bid-label { color: #fff; font-size: 15px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
#ddz-actions .waiting { color: #e7f3ec; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* 信息框(右下角小内容框,置于底层;靠右,避开居中的手牌与中间出牌区) */
#info-box {
  position: absolute; right: 6px; bottom: var(--hb); z-index: 3; width: 152px; height: calc(var(--cw) * 1.4);
  background: rgba(8,16,24,.5); border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  padding: 4px 8px; overflow: hidden;
}
#info-lines { height: 100%; overflow-y: auto; font-size: 11px; line-height: 1.45; color: #e0ecdf; word-break: break-all; }

#ddz-banner {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  background: rgba(8,14,20,.95); border: 1px solid #ffd34d; border-radius: 14px;
  padding: 18px 26px; text-align: center; font-size: 20px; z-index: 20; box-shadow: 0 6px 36px rgba(0,0,0,.7);
  max-width: 92vw;
}
#ddz-banner .sub { font-size: 14px; color: #ffd97a; margin-top: 8px; }
#ddz-banner .reveal { margin-top: 12px; font-size: 12px; color: #b8cadb; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; align-items: center; }
#ddz-banner .reveal .row { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; justify-content: center; }
#ddz-banner .reveal .nm { color: #cfe0ee; margin-right: 4px; }

#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; }
/* 手机竖握旋转模式:提示气泡/结算横幅跟着牌桌一起转 90°,
   否则它们按"未旋转的世界"定位,会歪着出现在玩家视角的左右两侧(2026-07-29 用户反馈) */
body.landscape-rotate #toast {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
body.landscape-rotate #ddz-banner {
  transform: translate(-50%, -50%) rotate(90deg);
}
#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: 640px) {
  .oppseat { width: 130px; }
  .oppseat .avatar, #me-corner .avatar { width: 40px; height: 40px; font-size: 20px; }
  .act-btn { padding: 9px 16px; font-size: 14px; }
  #info-box { width: 150px; }
}