/*
 * 牛牛牌桌（2026-10-24 参考用户发的截图布局，样子是自己的）：
 *   上面一排座位：头像名字条在上，下面是 5 张牌；左右两边贴边：竖的头像框在外侧，牌朝中间摆；自己 5 张大牌在正下方，头像在左下角。
 *   牌型是压在牌下沿的一条横幅（带倍数），下注 / 庄几倍是牌旁边的小筹码条，抢庄时「不抢 / 抢N倍」是盖在头像上的印章。
 *   --hc 自己手牌的宽度，--mini 别人那 5 张牌的宽度（手机横屏 390 高时约 46px / 35px，8 人以上 32px）
 */
.nntable {
  --hc: clamp(30px, calc(var(--gh, 352px) * .118), 56px);
  --mini: clamp(20px, calc(var(--gh, 352px) * .09), 40px);
  position: relative; flex: 1; min-height: 0; margin: 2px 4px 4px;
}
.nntable.n8, .nntable.n9, .nntable.n10 { --mini: clamp(18px, calc(var(--gh, 352px) * .082), 36px); }
/* 桌子中间淡淡的玩法字 */
.nnmark { position: absolute; left: 50%; top: 36%; transform: translateX(-50%); z-index: 0; pointer-events: none; text-align: center; white-space: nowrap;
  font: 900 clamp(18px, calc(var(--gh, 352px) * .075), 32px)/1.1 'TitleBrush', system-ui, sans-serif; color: rgba(255, 255, 255, .1); letter-spacing: 4px; }

/* ---------- 各家 ---------- */
.nnseat { position: absolute; z-index: 2; display: flex; gap: 2px; }
.nnseat.k-T { top: .5%; transform: translateX(-50%); flex-direction: column; align-items: center; }
.nnseat.k-L { left: .5%; transform: translateY(-50%); flex-direction: row; align-items: center; gap: 5px; }
.nnseat.k-R { right: .5%; transform: translateY(-50%); flex-direction: row-reverse; align-items: center; gap: 5px; }
.nnseat.k-B { left: 50%; bottom: 1%; transform: translateX(-50%); flex-direction: row; align-items: flex-end; gap: 6px; }
.nnwho { position: relative; display: flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 20px; cursor: pointer;
  background: rgba(4, 12, 28, .78); border: 1px solid rgba(242, 193, 78, .45); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.nnwho .avatar { width: 32px; height: 32px; font-size: 14px; flex: none; }
.nnname { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.nnname b { font-size: 11.5px; color: #fff8e1; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nnname span { font-size: 11px; font-weight: 800; color: #fff8e1; }
.nnname span.pos { color: #ffd76a; }
.nnname span.neg { color: #a8f0c8; }
/* 左右两边：竖的头像框（头像在上，名字、分数在下） */
.nnseat.k-L .nnwho, .nnseat.k-R .nnwho { flex-direction: column; gap: 1px; width: 64px; padding: 4px 2px 3px; border-radius: 12px; }
.nnseat.k-L .nnwho .avatar, .nnseat.k-R .nnwho .avatar { width: 36px; height: 36px; }
.nnseat.k-L .nnname, .nnseat.k-R .nnname { align-items: center; }
.nnseat.k-L .nnname b, .nnseat.k-R .nnname b { max-width: 60px; }
/* 庄：头像角上一个红底金字的「庄」，头像那块金边发光 */
.nncrown { position: absolute; right: -6px; top: -6px; z-index: 3; width: 18px; height: 18px; border-radius: 50%; font: 900 11px/18px system-ui, sans-serif; font-style: normal; text-align: center;
  color: #ffe48a; background: radial-gradient(circle at 35% 30%, #ff6a4a, #b3180c 70%); border: 1.5px solid #ffe48a; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); animation: nnPop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.nnseat.banker .nnwho, .nnme.banker .nnwho { border-color: #f2c14e; box-shadow: 0 0 0 1px #f2c14e, 0 0 12px rgba(255, 200, 80, .6); }
.nnseat.pend .nnwho, .nnme.pend .nnwho { animation: nnPend 1.2s ease-in-out infinite; }
@keyframes nnPend { 50% { box-shadow: 0 0 0 2px rgba(242, 193, 78, .5), 0 0 10px rgba(255, 200, 80, .5); } }
/* 定庄：抢一样多的几个人轮流亮 */
.nnseat.spinon .nnwho, .nnme.spinon .nnwho { animation: none; border-color: #fff3c4; box-shadow: 0 0 0 3px #f2c14e, 0 0 24px rgba(255, 210, 90, 1); transform: scale(1.08); }
.nnseat.winner .nnwho { border-color: #f2c14e; box-shadow: 0 0 0 2px #f2c14e, 0 0 16px rgba(255, 200, 80, .8); }
/* 抢庄印章：斜着盖在头像上 */
.nnstamp { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%) rotate(-18deg); padding: 0 5px; border-radius: 4px; white-space: nowrap;
  font: 900 11px/16px system-ui, sans-serif; font-style: normal; color: #eef1f6; background: linear-gradient(#7d8594, #4a515e); border: 1px solid #c9ced8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5); animation: nnStamp .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.nnstamp.on { color: #fff3c4; background: linear-gradient(#e8473a, #a51a0e); border-color: #ffe48a; }
@keyframes nnStamp { 0% { transform: translate(-50%, -50%) rotate(-18deg) scale(2); opacity: 0; } 100% { transform: translate(-50%, -50%) rotate(-18deg) scale(1); opacity: 1; } }

/* 牌 + 筹码条：上面一排筹码条在牌上面靠右，左右两边在牌下面 */
.nnbody { display: flex; flex-direction: column; gap: 2px; }
.nnchips { display: flex; gap: 3px; min-height: 16px; align-items: center; justify-content: flex-end; }
.nnseat.k-L .nnchips, .nnseat.k-R .nnchips { order: 2; }
.nnseat.k-L .nnchips { justify-content: flex-start; }
.nnchip { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px 0 3px; border-radius: 8px; font-size: 11px; font-weight: 800; line-height: 16px; color: #fff8e1;
  background: rgba(0, 0, 0, .5); white-space: nowrap; }
.nnchip.wait { padding-left: 7px; color: rgba(255, 248, 225, .6); font-weight: 600; }
.nnchip.gold { padding-left: 7px; color: #4a2800; background: linear-gradient(#ffe48a, #f2b705); }
.nncoin0 { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #f2c14e 45%, #b07a10 80%); border: 1px solid #8a5a00; }

.nncards { position: relative; display: flex; --cw: var(--mini); padding-bottom: 4px; }
.nncards .card { margin-left: calc(var(--mini) * -.58); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.nncards .card:first-child { margin-left: 0; }
.nncards.split .card:nth-child(4) { margin-left: calc(var(--mini) * -.3); }
.card.mini.nnbk { border-width: 1px; border-radius: 3px; }

/* 牌型横幅：压在牌下沿，两头剪成燕尾；没牛灰、牛一到牛六蓝、牛七到牛九蓝底金字、牛牛金底、特殊牌型红金 */
.nnribbon { position: absolute; left: 50%; bottom: -3px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: baseline; gap: 2px; padding: 0 14px;
  white-space: nowrap; font-size: 13px; font-weight: 900; line-height: 20px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%, 7px 50%);
  background: linear-gradient(#6f7888, #434a57); animation: nnRib .35s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes nnRib { 0% { transform: translateX(-50%) scale(.3); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
.nnribbon small { font-size: .8em; }
.nnribbon.lo { background: linear-gradient(#3f86e0, #1d4f9c); }
.nnribbon.hi { color: #ffe08a; background: linear-gradient(#3f86e0, #1d4f9c); }
.nnribbon.nn { color: #4a2800; text-shadow: none; background: linear-gradient(#fff0a8, #f2b705 60%, #c98a00); }
.nnribbon.sp { color: #fff3c4; background: linear-gradient(#ff6a4a, #b3180c); }
.nnribbon.big { font-size: 20px; line-height: 30px; padding: 0 22px; bottom: 2px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%); }

/* 牌型小标签（本局详情、搓牌框） */
.nntype { display: inline-flex; align-items: baseline; gap: 2px; padding: 0 7px; border-radius: 9px; font-size: 12px; font-weight: 900; line-height: 18px; white-space: nowrap;
  color: #fff8e1; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .2); }
.nntype small { font-size: .82em; opacity: .9; }
.nntype.none { color: rgba(255, 248, 225, .65); }
.nntype.hi { color: #ffd76a; border-color: rgba(242, 193, 78, .6); }
.nntype.nn { color: #4a2800; background: linear-gradient(#ffe48a, #f2b705); border-color: #fff3c4; }
.nntype.sp { color: #fff3c4; background: linear-gradient(#ff6a4a, #b3180c); border-color: #ffe48a; box-shadow: 0 0 8px rgba(255, 120, 60, .7); }
.nntype.mine { font-size: 15px; line-height: 24px; padding: 0 10px; border-radius: 12px; animation: nnPop .45s cubic-bezier(.2, 1.6, .4, 1) both; }

/* 输赢飘字：压在头像上（放头像上面会盖住上一家的牌型倍数，最上面一排还会被顶栏挡住） */
.nndelta { position: absolute; left: 18px; top: 50%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; white-space: nowrap;
  font-size: 17px; font-weight: 900; -webkit-text-stroke: 1px #3a2000; text-shadow: 0 0 4px #000, 0 2px 0 rgba(0, 0, 0, .7); color: #fff8e1; }
.nnseat.k-L .nndelta, .nnseat.k-R .nndelta { left: 50%; top: 22px; }
.nndelta.pos { color: #ffe08a; }
.nndelta.neg { color: #a8f0c8; }
@keyframes nnScore { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* ---------- 自己：5 张大牌在正下方，头像在左下角，筹码条在头像上面 ---------- */
.nnme { position: absolute; z-index: 3; left: 0; right: 0; bottom: 3px; height: calc(var(--hc) * 1.4 + 4px); pointer-events: none; }
.nnme > * { pointer-events: auto; }
.nnme .nnwho { position: absolute; left: 1.5%; bottom: 2px; }
.nnme .nnchips { position: absolute; left: 1.5%; bottom: 44px; justify-content: flex-start; }
.nnme .nnhand { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.nnhand { display: flex; gap: calc(var(--hc) * .06); --cw: var(--hc); }
.nnhand.split .nnh:nth-child(4) { margin-left: calc(var(--hc) * .3); }
.nnhand.split.soft .nnh:nth-child(4) { margin-left: calc(var(--hc) * .14); }
.nnh { transition: margin .25s; }
.nnh .card { cursor: default; }
.nnh.q .card { opacity: .9; }

/* ---------- 中间：现在在干什么 + 倒计时 + 按钮 ---------- */
.nnmid { position: absolute; z-index: 4; left: 50%; top: 47%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nnmsg { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: 16px; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: #fff8e1;
  background: rgba(4, 12, 28, .82); border: 1px solid rgba(242, 193, 78, .45); }
.nnmsg b { color: #ffd76a; }
.nnmsg.big { padding: 6px 18px; font-size: 18px; font-weight: 900; color: #ffe08a; animation: nnPop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.nnstep { padding: 1px 9px; border-radius: 11px; font-size: 12px; font-weight: 900; color: #4a2800; background: linear-gradient(#ffe48a, #f2b705); }
.nncount { min-width: 30px; padding: 0 6px; border-radius: 10px; text-align: center; font-weight: 900; color: #ffe08a; background: rgba(0, 0, 0, .45); }
.nncount b { color: inherit; }
.nnbtns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.nnbtns .btn { min-width: 52px; padding: 6px 12px; font-size: 14px; font-weight: 900; }
.nnbtns .nnshow { min-width: 120px; font-size: 17px; letter-spacing: 4px; }

/* ---------- 结算 ---------- */
/* 自己这局的输赢：一块牌子，左边圆印章写「赢 / 输 / 平」（毛笔字），右边是分数。赢是金牌子红印章，输是深蓝灰牌子 */
.nnbanner { position: absolute; z-index: 6; left: 50%; top: 67%; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px; padding: 4px 22px 4px 4px; border-radius: 30px;
  background: linear-gradient(#fff0a8, #f2c14e 45%, #c98a00); border: 2px solid #fff6cf;
  box-shadow: 0 0 0 2px #7a4a00, 0 6px 16px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 200, 80, .65); }
.nnbanner i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font: 400 30px/1 'TitleBrush', system-ui, sans-serif; font-style: normal;
  color: #fff6cf; background: radial-gradient(circle at 35% 30%, #ff6a4a, #c41d10 65%, #8a1208); border: 2px solid #ffe48a; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .35); }
.nnbanner b { font: 900 30px/1 system-ui, "PingFang SC", sans-serif; color: #5a2a00; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.nnbanner.lose { background: linear-gradient(#6b7896, #3a4560 50%, #262e44); border-color: #b9c4dc; box-shadow: 0 0 0 2px #151a28, 0 6px 16px rgba(0, 0, 0, .55); }
.nnbanner.lose i { color: #e9eef8; background: radial-gradient(circle at 35% 30%, #8d98b0, #4c566c 65%, #333b4d); border-color: #d6dded; }
.nnbanner.lose b { color: #eef2fa; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.nnbanner:not(.win):not(.lose) { background: linear-gradient(#5a6478, #343c4e); border-color: #c9d0dd; box-shadow: 0 6px 16px rgba(0, 0, 0, .55); }
.nnbanner:not(.win):not(.lose) i { background: radial-gradient(circle at 35% 30%, #8d98b0, #4c566c 65%, #333b4d); }
.nnbanner:not(.win):not(.lose) b { color: #eef2fa; text-shadow: none; }
@keyframes nnBanner { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 70% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.nnrbar { position: absolute; z-index: 5; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 6px 10px; border-radius: 16px; background: rgba(4, 12, 28, .82); border: 1px solid rgba(242, 193, 78, .45); max-width: 70%; }
.nnrbar .hint { white-space: nowrap; }
@keyframes nnBar { 0% { opacity: 0; transform: translate(-50%, -30%); } 100% { opacity: 1; transform: translate(-50%, -50%); } }

/* 动画：亮牌翻开、第 5 张落下、弹出 */
@keyframes nnFlip { 0% { transform: scaleX(0); filter: brightness(1.6); } 60% { transform: scaleX(1.06); } 100% { transform: scaleX(1); filter: none; } }
@keyframes nnDrop { 0% { transform: translateY(-40px) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes nnPop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* 筹码飞：#stage 上单独一层 */
#nnflylayer { position: absolute; inset: 0; z-index: 47; pointer-events: none; overflow: visible; }
.nncoin { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #f2c14e 45%, #b07a10 80%); border: 1.5px solid #8a5a00; box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 0 8px rgba(255, 200, 80, .7); }

/* ---------- 每局详情（记录 / 本局详情） ---------- */
.nnrhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.nnrlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nnrlist li { display: grid; grid-template-columns: minmax(120px, 1.3fr) auto minmax(80px, .7fr) 64px; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.nnrlist li.me { background: linear-gradient(90deg, rgba(242, 193, 78, .22), rgba(0, 0, 0, .25)); }
.nnrwho { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.nnrwho .avatar { width: 28px; height: 28px; font-size: 13px; }
.nnrwho b { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nnrtag { padding: 0 6px; border-radius: 8px; font-size: 10.5px; line-height: 16px; background: rgba(0, 0, 0, .4); color: #fff8e1; white-space: nowrap; }
.nnrtag.gold { color: #4a2800; background: linear-gradient(#ffe48a, #f2b705); font-weight: 900; }
.nnrcards { display: flex; gap: 2px; --mini: 24px; }
.nnrtotal { text-align: right; font-size: 16px; font-weight: 900; }

/* ---------- 大厅海报：一手牛牛摊成扇形 ---------- */
.lgart.g-niuniu > .nnfan { display: flex; transform: none; margin-top: 4%; }
.lgart .nnfan .card { margin: 0 calc(var(--cw) * -.3); }
.lgart .nnfan .card:nth-child(1) { transform: rotate(-20deg) translateY(14%); }
.lgart .nnfan .card:nth-child(2) { transform: rotate(-10deg) translateY(4%); }
.lgart .nnfan .card:nth-child(4) { transform: rotate(10deg) translateY(4%); }
.lgart .nnfan .card:nth-child(5) { transform: rotate(20deg) translateY(14%); }

/* 聊天按钮：右下角，躲开自己的手牌（手牌在正中） */
.chatfab.g-nn { right: 8px; bottom: 8px; }

/* 窄屏（手机横屏高度小）：名字更短、按钮更小 */
@media (max-height: 380px) {
  .nnwho .avatar { width: 26px; height: 26px; }
  .nnname b { max-width: 52px; font-size: 10.5px; }
  .nnbtns .btn { min-width: 44px; padding: 4px 9px; font-size: 13px; }
}

/* ---------- 搓牌：最后一张扣着，按住往外搓（#stage 上单独一层，整页重画冲不掉） ---------- */
.nnh.rubme { position: relative; cursor: pointer; }
.nnh.rubme .card { cursor: pointer; box-shadow: 0 0 0 2px #f2c14e, 0 0 14px rgba(255, 200, 80, .8); animation: dyCatch 1s ease-in-out infinite; }
.nnh.rubme i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 1px 7px; border-radius: 9px; font-style: normal; font-size: 12px; font-weight: 900; white-space: nowrap;
  color: #4a2800; background: linear-gradient(#ffe48a, #f2b705); pointer-events: none; }
#nnrub { position: absolute; inset: 0; z-index: 48; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); animation: nnPop .25s ease-out both; }
.nnrubbox { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nnrubrow { display: flex; gap: 4px; --cw: clamp(26px, calc(var(--gh, 352px) * .085), 40px); }
.nnrubrow .card { cursor: default; }
.nnrubcard { --cw: clamp(84px, calc(var(--gh, 352px) * .34), 150px); position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); touch-action: none; cursor: grab; }
.nnrubface, .nnrubcover { position: absolute; inset: 0; }
.nnrubface .card { box-shadow: 0 0 0 2px #f2c14e, 0 6px 18px rgba(0, 0, 0, .6); }
.nnrubcover { z-index: 2; will-change: transform; }
.nnrubcover .card { width: 100%; height: 100%; border-width: 2px; border-radius: calc(var(--cw) * .1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .55), inset 0 -10px 16px rgba(0, 0, 0, .25); }
.nnrubtip { margin: 0; font-size: 12px; color: rgba(255, 248, 225, .8); }
.nnrubbtns { display: flex; gap: 10px; }
.nnrubtype { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 3; }
#nnrub.flipping .nnrubtip, #nnrub.flipping .nnrubbtns { visibility: hidden; }
.nnrubtype .nntype.mine { font-size: 22px; line-height: 34px; padding: 0 16px; border-radius: 17px; }
#nnrub.flipping .nnrubface .card { animation: nnRubGlow .9s ease-out both; }
@keyframes nnRubGlow { 0% { box-shadow: 0 0 0 2px #f2c14e, 0 6px 18px rgba(0, 0, 0, .6); } 40% { box-shadow: 0 0 0 4px #fff3c4, 0 0 36px rgba(255, 210, 90, 1); } 100% { box-shadow: 0 0 0 2px #f2c14e, 0 6px 18px rgba(0, 0, 0, .6); } }