/* ===================== 斗地主 样式：响应式横屏 + 皮肤 + 动画 ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --felt: radial-gradient(ellipse at 50% 38%, #2f7a4f 0%, #1f5d3b 60%, #16432b 100%);
  --rail: #6b4a2a; --rail2: #4e3419;
  --accent: #ffd66b; --accent2: #f0a93a; --text: #fff; --panel: rgba(12,28,20,.78);
  --card-face: #fdfdf7; --card-edge: #d8d2bf; --suit-red: #d8324a; --suit-black: #23262e;
  --card-back: linear-gradient(135deg,#c0303f,#8a1f2c); --back-art: rgba(255,255,255,.16);
}
html, body { width: 100%; height: 100%; overflow: hidden; background: #0c1410;
  font-family: "PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  color: var(--text); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#app { position: fixed; inset: 0; }

/* ---------- 牌桌皮肤 ---------- */
body[data-table="t-green"] { --felt: radial-gradient(ellipse at 50% 36%,#2f7a4f,#1f5d3b 60%,#143d28); --rail:#6b4a2a; --rail2:#3f2a14; --accent:#ffd66b; --accent2:#e9a23a; --panel:rgba(10,30,20,.78); }
body[data-table="t-blue"] { --felt: radial-gradient(ellipse at 50% 36%,#274a8a,#1b3261 60%,#101d3c); --rail:#243a66; --rail2:#16213d; --accent:#ffd884; --accent2:#d7b25a; --panel:rgba(12,22,46,.8); }
body[data-table="t-night"] { --felt: radial-gradient(ellipse at 50% 34%,#2a1f4d,#1b1436 60%,#0e0a1f); --rail:#3a2d63; --rail2:#1c1436; --accent:#5ef0d6; --accent2:#b06cff; --panel:rgba(20,14,40,.82); }
body[data-table="t-red"] { --felt: radial-gradient(ellipse at 50% 36%,#9a2230,#761722 60%,#4e0d15); --rail:#caa64e; --rail2:#8a6b22; --accent:#ffe08a; --accent2:#e7b53f; --panel:rgba(60,12,18,.8); }
body[data-table="t-wood"] { --felt: radial-gradient(ellipse at 50% 36%,#2f7d6a,#1f5b4d 60%,#133b32); --rail:#7a5230; --rail2:#523418; --accent:#ffe1a6; --accent2:#cf9a52; --panel:rgba(16,40,34,.8); }

/* ---------- 纸牌皮肤(背面/正面) ---------- */
body[data-card="c-red"]   { --card-back: linear-gradient(135deg,#c43442,#86202c); --back-art: rgba(255,255,255,.18); --suit-red:#d8324a; }
body[data-card="c-blue"]  { --card-back: linear-gradient(135deg,#3a6cc0,#22407e); --back-art: rgba(255,255,255,.2); --suit-red:#d8324a; }
body[data-card="c-gold"]  { --card-back: linear-gradient(135deg,#caa24e,#8a6a22); --back-art: rgba(255,255,255,.26); --suit-red:#c62f44; }
body[data-card="c-jade"]  { --card-back: linear-gradient(135deg,#2f9e84,#1c6b58); --back-art: rgba(255,255,255,.22); --suit-red:#cf3149; }
body[data-card="c-tech"]  { --card-back: linear-gradient(135deg,#2bb6c9,#1d3a73); --back-art: rgba(120,255,245,.4); --suit-red:#e0364f; --card-face:#f4f8ff; }

/* ===================== 屏幕容器 ===================== */
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; }

/* ===================== 菜单 ===================== */
#menu { background: var(--felt); display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 4vh 4vw; overflow-y: auto; }
#menu.active { display: flex; }
.logo { font-size: clamp(30px, 7vh, 60px); font-weight: 900; letter-spacing: .08em;
  background: linear-gradient(180deg,#fff5cf,var(--accent),var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); margin-bottom: .4vh; }
.sub { opacity: .85; font-size: clamp(12px, 2.1vh, 17px); margin-bottom: 3vh; letter-spacing: .25em; }
.mode-row { display: flex; gap: clamp(10px, 2.5vw, 26px); flex-wrap: wrap; justify-content: center; margin-bottom: 2.4vh; }
.mode-card { width: clamp(150px, 26vw, 230px); background: var(--panel); border: 2px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: clamp(12px,2.4vh,22px); cursor: pointer; transition: .18s; text-align: center; backdrop-filter: blur(3px); }
.mode-card:hover, .mode-card.sel { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.mode-card .mc-ic { font-size: clamp(28px,5vh,44px); margin-bottom: 6px; }
.mode-card .mc-t { font-size: clamp(16px,2.6vh,22px); font-weight: 800; }
.mode-card .mc-d { font-size: clamp(11px,1.7vh,13px); opacity: .72; margin-top: 5px; line-height: 1.5; }
.row-label { font-size: clamp(13px,2vh,16px); opacity: .8; margin: 1vh 0; letter-spacing: .2em; }
.diff-row, .skin-row { display: flex; gap: clamp(8px,1.6vw,16px); flex-wrap: wrap; justify-content: center; }
.diff-btn { padding: clamp(8px,1.5vh,12px) clamp(16px,3vw,30px); border-radius: 30px; cursor: pointer; font-weight: 800;
  font-size: clamp(14px,2.2vh,18px); border: 2px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); transition: .16s; }
.diff-btn:hover { border-color: var(--accent); }
.diff-btn.sel { background: linear-gradient(180deg,var(--accent),var(--accent2)); color: #3a2400; border-color: transparent; }
.diff-btn .dh { display:block; font-size: clamp(9px,1.4vh,11px); font-weight:600; opacity:.7; margin-top:2px; }
.start-btn { margin-top: 3vh; padding: clamp(12px,2.2vh,16px) clamp(40px,9vw,80px); font-size: clamp(18px,3vh,26px); font-weight: 900;
  border: none; border-radius: 40px; cursor: pointer; color: #4a2c00; letter-spacing: .1em;
  background: linear-gradient(180deg,#fff0c0,var(--accent),var(--accent2)); box-shadow: 0 8px 22px rgba(0,0,0,.4); transition: .16s; }
.start-btn:hover { transform: translateY(-3px) scale(1.03); }
.menu-tools { position: absolute; top: 2vh; right: 2vw; display: flex; gap: 10px; }
.tool-btn { width: clamp(38px,6vh,46px); height: clamp(38px,6vh,46px); border-radius: 50%; border: 2px solid rgba(255,255,255,.18);
  background: var(--panel); color: #fff; font-size: clamp(16px,3vh,22px); cursor: pointer; display: grid; place-items: center; }
.tool-btn:hover { border-color: var(--accent); }

/* 皮肤选择面板 */
.skin-section { margin-top: 1.6vh; width: min(720px, 94vw); }
.skin-swatches { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.swatch { width: clamp(48px,9vh,64px); height: clamp(48px,9vh,64px); border-radius: 12px; cursor: pointer; border: 3px solid transparent;
  position: relative; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.swatch.sel { border-color: var(--accent); transform: scale(1.06); }
.swatch .sw-name { position: absolute; bottom: 0; left: 0; right: 0; font-size: 9px; text-align: center; background: rgba(0,0,0,.45); padding: 1px 0; }

/* ===================== 牌桌 ===================== */
#game { background: var(--felt); }
#game::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 clamp(6px,1.4vh,12px) var(--rail), inset 0 0 0 clamp(8px,1.8vh,15px) var(--rail2),
  inset 0 0 120px rgba(0,0,0,.45); border-radius: 18px; pointer-events: none; }
.table { position: absolute; inset: 0; }

/* HUD */
.hud { position: absolute; top: 1.4vh; left: 1.4vw; display: flex; gap: 8px; align-items: center; z-index: 30; transform-origin: left center; }
.hud .chip { background: var(--panel); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 4px 12px;
  font-size: clamp(11px,1.9vh,14px); font-weight: 700; }
.hud .chip b { color: var(--accent); }
.menu-back { position: absolute; top: 1.4vh; right: 1.4vw; z-index: 30; display: flex; gap: 8px; }

/* 座位 */
.seat { position: absolute; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.seat-left { left: 1vw; top: 11vh; }
.seat-right { right: 1vw; top: 11vh; }
.seat-top { top: 4vh; left: 50%; transform: translateX(-50%); }
.avatar { width: clamp(54px,11vh,84px); height: clamp(54px,11vh,84px); border-radius: 50%; overflow: hidden; position: relative;
  border: 3px solid rgba(255,255,255,.25); background: radial-gradient(circle at 50% 30%, #5a6b7a, #2a3540); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.avatar .char-svg { width: 118%; height: 118%; position: absolute; left: -9%; top: 6%; }
.avatar.turn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent2), 0 0 18px var(--accent); animation: turnPulse 1.1s infinite; }
@keyframes turnPulse { 0%,100%{ box-shadow:0 0 0 3px var(--accent2),0 0 14px var(--accent);} 50%{ box-shadow:0 0 0 4px var(--accent2),0 0 26px var(--accent);} }
.seat .nm { font-size: clamp(11px,1.8vh,14px); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.role-badge { font-size: clamp(9px,1.5vh,11px); padding: 1px 7px; border-radius: 10px; font-weight: 800; }
.role-L { background: linear-gradient(180deg,#ffdf7a,#e0a32e); color: #5a3700; }
.role-F { background: rgba(255,255,255,.18); }
.cnt-stack { position: relative; height: clamp(20px,3.4vh,28px); display: flex; align-items: center; gap: 4px; }
.mini-back { width: clamp(14px,2.4vh,18px); height: clamp(20px,3.4vh,26px); border-radius: 3px; background: var(--card-back);
  border: 1px solid rgba(255,255,255,.25); box-shadow: 1px 0 0 rgba(0,0,0,.2); }
.cnt-num { font-weight: 800; font-size: clamp(12px,2vh,15px); color: var(--accent); }
.timer-ring { position:absolute; inset:-5px; border-radius:50%; }

/* 出牌区(每个玩家最近一手停在桌面) */
.played { position: absolute; z-index: 8; display: flex; min-height: clamp(40px,9vh,76px); align-items: center; }
.played-self { bottom: 30vh; left: 50%; transform: translateX(-50%); }
.played-left { left: 19vw; top: 42vh; }
.played-right { right: 19vw; top: 42vh; }
.played-top { top: 29vh; left: 50%; transform: translateX(-50%); }
.played .pc { --ch: clamp(42px,8.4vh,64px); width: clamp(30px,6vh,46px); height: clamp(42px,8.4vh,64px); margin-left: clamp(-16px,-3vh,-22px); }
.played .pc:first-child { margin-left: 0; }
.played.pass-tip { font-weight: 900; color: var(--accent); font-size: clamp(16px,3vh,24px); text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.bubble { background: rgba(255,255,255,.95); color: #333; padding: 4px 12px; border-radius: 14px; font-weight: 800; font-size: clamp(12px,2vh,16px);
  position: relative; box-shadow: 0 3px 8px rgba(0,0,0,.3); animation: pop .2s; }

/* 底牌 */
.bottom-cards { position: absolute; top: 1.2vh; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 25; }
.bottom-cards .pc { --ch: clamp(37px,7vh,56px); width: clamp(26px,5vh,40px); height: clamp(37px,7vh,56px); }

/* ===================== 卡牌通用 ===================== */
.pc, .card { border-radius: clamp(4px,0.9vh,7px); position: relative; background: var(--card-face);
  border: 1px solid var(--card-edge); box-shadow: 0 2px 5px rgba(0,0,0,.3); display: inline-block; flex: 0 0 auto; }
.pc.back, .card.back { background: var(--card-back); border-color: rgba(255,255,255,.3); }
.pc.back::after, .card.back::after { content: ""; position: absolute; inset: 3px; border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, var(--back-art) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(-45deg, var(--back-art) 0 4px, transparent 4px 8px);
  border: 1px solid var(--back-art); }
/* 只在左上角标注：点数在上、花色(或“王”)在下，纵向堆叠。无中央大花色，简洁不臃肿 */
.cface { position: absolute; top: 2px; left: 3px; display: flex; flex-direction: column; align-items: center;
  line-height: 0.88; font-weight: 900; }
.cface .cn { font-size: calc(var(--ch,70px) * 0.33); }
.cface .cs { font-size: calc(var(--ch,70px) * 0.3); margin-top: 1px; }
.pc.red .cface, .card.red .cface { color: var(--suit-red); }
.pc.black .cface, .card.black .cface { color: var(--suit-black); }
/* 大王=红色, 小王=黑色 */
.pc.jr .cface, .card.jr .cface { color: var(--suit-red); }
.pc.jb .cface, .card.jb .cface { color: var(--suit-black); }
.pc.joker .cface, .card.joker .cface { line-height: 0.82; }
.pc.jr .ctr { color: var(--suit-red); } .pc.jb .ctr { color: var(--suit-black); }
.card.jr .ctr, .card.jr .cface { color: var(--suit-red);} .card.jb .ctr, .card.jb .cface { color: var(--suit-black);}

/* ===================== 自己(底部) ===================== */
.self { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; }
.self-info { position: absolute; left: 1.2vw; bottom: 9vh; display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 21; }
/* 手牌左右留出空档：左给“你”的头像，右给操作按钮，避免互相遮挡 */
.hand-zone { position: absolute; bottom: 0.6vh; left: 12vw; right: 12vw; height: 28vh; display: flex; justify-content: center; align-items: flex-end; }
.hand { display: flex; align-items: flex-end; height: 100%; padding-bottom: 2vh; }
.card { --ch: clamp(70px, 23vh, 132px); height: var(--ch); width: calc(var(--ch) * 0.69);
  cursor: pointer; transition: transform .13s ease, margin .13s; }
.card.sel { transform: translateY(-22%); box-shadow: 0 -2px 10px var(--accent); z-index: 5; }
.card.hint { animation: hintBlink .5s 2; }
@keyframes hintBlink { 50% { transform: translateY(-12%); box-shadow: 0 0 12px var(--accent); } }
.card.playable { } .card.dim { opacity: .55; }

.controls { position: absolute; right: 1.6vw; bottom: 29.5vh; display: flex; gap: clamp(8px,1.6vw,16px); z-index: 22; }
.ctrl-btn { padding: clamp(8px,1.6vh,13px) clamp(14px,3vw,28px); border-radius: 28px; font-weight: 800; font-size: clamp(13px,2.2vh,18px);
  border: 2px solid rgba(255,255,255,.2); background: var(--panel); color: #fff; cursor: pointer; transition: .14s; }
.ctrl-btn:hover { transform: translateY(-2px); }
.ctrl-btn.primary { background: linear-gradient(180deg,var(--accent),var(--accent2)); color: #4a2c00; border-color: transparent; }
.ctrl-btn:disabled { opacity: .4; cursor: default; transform: none; }
.ctrl-btn.pass { background: linear-gradient(180deg,#e98,#c65); color:#3a1000; border-color:transparent; }

/* 叫分按钮 */
.bid-panel { position: absolute; bottom: 13vh; left: 50%; transform: translateX(-50%); display: flex; gap: clamp(8px,2vw,18px); z-index: 28; align-items:center; }
.bid-btn { padding: clamp(9px,1.8vh,14px) clamp(16px,3.4vw,30px); border-radius: 30px; font-weight: 900; font-size: clamp(14px,2.4vh,20px);
  border: none; cursor: pointer; background: linear-gradient(180deg,var(--accent),var(--accent2)); color: #4a2c00; box-shadow: 0 5px 14px rgba(0,0,0,.35); }
.bid-btn.nobid { background: rgba(255,255,255,.16); color: #fff; }
.bid-btn:hover { transform: translateY(-2px); }
.bid-label { position:absolute; bottom: 22vh; left:50%; transform:translateX(-50%); font-weight:800; font-size:clamp(13px,2.2vh,17px); background:var(--panel); padding:5px 14px; border-radius:16px; z-index:28;}

/* ===================== 动画 ===================== */
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes flyUp { from { transform: translateY(40px) scale(.8); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
/* 出牌：从该玩家方向“甩”到桌面中央，带轻微旋转+落地回弹，逐张错峰，不僵硬 */
.played-self .pc { animation: tossUp .4s cubic-bezier(.25,1.4,.5,1) both; }
.played-top .pc { animation: tossDown .4s cubic-bezier(.25,1.4,.5,1) both; }
.played-left .pc { animation: tossRight .4s cubic-bezier(.25,1.4,.5,1) both; }
.played-right .pc { animation: tossLeft .4s cubic-bezier(.25,1.4,.5,1) both; }
@keyframes tossUp { 0% { transform: translateY(110px) scale(.7) rotate(-9deg); opacity: 0; } 35% { opacity: 1; } 70% { transform: translateY(-6px) scale(1.04) rotate(2deg); } 100% { transform: none; opacity: 1; } }
@keyframes tossDown { 0% { transform: translateY(-110px) scale(.7) rotate(9deg); opacity: 0; } 35% { opacity: 1; } 70% { transform: translateY(6px) scale(1.04) rotate(-2deg); } 100% { transform: none; opacity: 1; } }
@keyframes tossRight { 0% { transform: translateX(-130px) scale(.7) rotate(-11deg); opacity: 0; } 35% { opacity: 1; } 70% { transform: translateX(7px) scale(1.04) rotate(3deg); } 100% { transform: none; opacity: 1; } }
@keyframes tossLeft { 0% { transform: translateX(130px) scale(.7) rotate(11deg); opacity: 0; } 35% { opacity: 1; } 70% { transform: translateX(-7px) scale(1.04) rotate(-3deg); } 100% { transform: none; opacity: 1; } }
.shake { animation: shake .3s; }
@keyframes shake { 0%,100%{ transform: translateX(0);} 25%{ transform: translateX(-7px);} 75%{ transform: translateX(7px);} }
.boom { position: absolute; inset: 0; pointer-events: none; z-index: 40; display: grid; place-items: center; }
.boom .flash { font-size: clamp(40px,12vh,110px); font-weight: 900; color: #ffd34d; text-shadow: 0 0 24px #ff7a1a, 0 4px 0 #a33; animation: boomZ .8s ease forwards; }
@keyframes boomZ { 0%{ transform: scale(.2) rotate(-12deg); opacity: 0;} 30%{ transform: scale(1.25) rotate(4deg); opacity: 1;} 70%{ transform: scale(1) rotate(0);} 100%{ transform: scale(1.4); opacity: 0;} }

/* 结算 */
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.62); z-index: 60; display: none; align-items: center; justify-content: center; }
.overlay.show { display: flex; animation: pop .25s; }
.result-card { background: linear-gradient(180deg,#1f3a2c,#15281e); border: 2px solid var(--accent); border-radius: 20px;
  padding: clamp(18px,4vh,34px) clamp(24px,6vw,54px); text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,.6); min-width: min(420px,86vw); }
.result-card h2 { font-size: clamp(26px,6vh,46px); margin-bottom: 1vh; }
.result-card.win h2 { color: #ffd34d; } .result-card.lose h2 { color: #ff8a8a; }
.result-row { display: flex; justify-content: space-between; gap: 18px; font-size: clamp(13px,2.2vh,17px); padding: 4px 0; opacity: .92; }
.result-row b { color: var(--accent); }
.result-score { font-size: clamp(22px,4.6vh,38px); font-weight: 900; margin: 1.4vh 0; }
.result-card .btns { display: flex; gap: 12px; justify-content: center; margin-top: 1.6vh; }

/* 旋转提示(竖屏) */
#rotate-tip { position: fixed; inset: 0; background: #0c1410; z-index: 999; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 8vw; }
#rotate-tip .rot-ic { font-size: 64px; animation: rotSpin 2s infinite; }
@keyframes rotSpin { 0%,40%{ transform: rotate(0);} 60%,100%{ transform: rotate(90deg);} }
@media (orientation: portrait) and (max-width: 920px) { #rotate-tip { display: flex; } }

/* 桌面/平板加宽时限制牌桌最大区域，避免过度拉伸 */
@media (min-aspect-ratio: 21/9) { .table { left: 50%; width: min(100%, 230vh); transform: translateX(-50%); } }
.toast { position: absolute; top: 7vh; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.78); padding: 8px 18px; border-radius: 20px;
  font-weight: 700; z-index: 50; font-size: clamp(12px,2vh,15px); opacity: 0; transition: opacity .2s; }
.toast.show { opacity: 1; }