/*
 * 钓鱼一吃九牌桌（皇家金绿风格）：绿呢台面 + 金边木框；对家在上、左右两家在两边，中间是底牌和鱼池，自己的手牌贴底。
 *   --hc 自己手牌的宽度，--pc 鱼池牌的宽度（都按屏幕宽高算，手机横屏 844×390 上手牌约 46px、鱼池约 38px）
 */
.dytable {
  --hc: clamp(28px, min(calc((var(--gw, 844px) - 250px) / 12.8), calc((var(--gh, 352px) - 120px) / 3.9)), 58px);
  --pc: clamp(24px, min(calc(var(--gh, 352px) * .105), calc((var(--gw, 844px) - 420px) / 10)), 46px);
  --side: 132px;
  position: relative; flex: 1; min-height: 0; margin: 2px 4px 4px; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(255, 255, 255, .07), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 50% 45%, var(--felt-hi, #2a9a66) 0%, #136b45 50%, var(--felt-lo, #11603e) 100%);
  box-shadow: inset 0 0 0 2px #d8a440, inset 0 0 0 5px #5a3410, inset 0 0 0 6px rgba(216, 164, 64, .55), inset 0 0 30px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .4);
}
.dytable.n2 { --side: 0px; }
.dytable.frozen .dyhand, .dytable.frozen .dymid { filter: brightness(.82); }

/* ---------- 各家 ---------- */
.dyseat { position: absolute; z-index: 2; display: flex; gap: 6px; align-items: center; }
.dyseat.top { top: 8px; left: 50%; transform: translateX(-50%); }
.dyseat.left, .dyseat.right { top: 42%; transform: translateY(-50%); flex-direction: column; align-items: flex-start; width: 124px; }
.dyseat.left { left: 10px; }
.dyseat.right { right: 10px; align-items: flex-end; }
.dywho { position: relative; display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 22px; cursor: pointer;
  background: rgba(4, 34, 20, .78); border: 1px solid rgba(242, 193, 78, .45); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.dywho .avatar { width: 34px; height: 34px; font-size: 15px; flex: none; }
.dyname { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.dyname b { font-size: 12px; color: #fff8e1; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dyname .dyid { font-style: normal; font-size: 9.5px; color: rgba(255, 248, 225, .6); }
.dyname span { font-size: 11px; font-weight: 800; color: #fff8e1; }
.dyname span.pos { color: #ffd76a; }
.dyname span.neg { color: #a8f0c8; }
.dystat { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #fff8e1; }
.dyleft { margin-left: 2px; display: inline-flex; font-size: 11px; color: #fff8e1; align-items: center; gap: 2px; padding: 1px 6px 1px 3px; border-radius: 9px; background: rgba(0, 0, 0, .3); font-weight: 800; }
.dyfish { padding: 1px 7px; border-radius: 9px; background: linear-gradient(var(--wood-hi, #7a4614), var(--wood-lo, #3e2306)); border: 1px solid #d8a440; white-space: nowrap; }
.dyfish b { color: #ffd76a; font-size: 12px; }
/* 牌背：红漆金边（和十三水的牌背一样） */
.dyback { display: inline-block; width: 11px; height: 15px; border-radius: 2px; border: 1px solid #f2c14e;
  background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent 60%), repeating-linear-gradient(45deg, var(--cb-1, #2a6fd6) 0 2px, var(--cb-2, #1a4fa8) 2px 4px); }
.dyback.big { width: var(--pc); height: calc(var(--pc) * 1.4); border-radius: calc(var(--pc) * .1); border-width: 1.5px; box-shadow: 2px 2px 0 var(--cb-3, #0c2a66), 4px 4px 0 rgba(0, 0, 0, .3); }
/* 轮到谁：头像那块金边发光 + 小标签 */
.dyseat.turn .dywho, .dyme.turn .dywho { border-color: #f2c14e; animation: dyTurn 1.2s ease-in-out infinite; }
@keyframes dyTurn { 50% { box-shadow: 0 0 0 2px rgba(242, 193, 78, .7), 0 0 16px rgba(255, 200, 80, .8); } }
.dyturn { position: absolute; top: -9px; left: 30px; padding: 0 6px; border-radius: 7px; font-style: normal; font-size: 9.5px; font-weight: 900;
  color: #4a2800; background: linear-gradient(#ffe48a, #f2b705); white-space: nowrap; }
.dyseat.right .dyturn { left: auto; right: 30px; }
/* 飘字：钓到 +N */
.dyfx { position: absolute; left: 50%; top: -6px; width: 0; height: 0; pointer-events: none; z-index: 6; }
.dyfloat { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; font-size: 17px; font-weight: 900; color: #ffe08a;
  -webkit-text-stroke: .6px #5a3410; text-shadow: 0 2px 0 #5a3410, 0 0 10px rgba(255, 200, 80, .8); }
.dyfloat.big { font-size: 22px; color: #fff3c4; }
@keyframes dyFloat { 0% { transform: translate(-50%, -40%) scale(.6); opacity: 0; } 18% { transform: translate(-50%, -100%) scale(1.15); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -190%) scale(1); opacity: 0; } }

/* ---------- 中间：底牌 + 鱼池 ---------- */
.dymid { position: absolute; z-index: 1; left: calc(var(--side) + 14px); right: calc(var(--side) + 14px); top: 56px;
  bottom: calc(var(--hc) * 1.4 + 40px); display: flex; align-items: center; justify-content: center; gap: 14px; }
.dystock { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; font-size: 11px; color: rgba(255, 248, 225, .85); }
.dystock b { color: #ffd76a; }
.dystock.empty .dyback { opacity: .25; box-shadow: none; }
.dypond { --cw: var(--pc); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 5px; max-width: calc(var(--pc) * 10 + 50px);
  padding: 8px 10px; border-radius: 14px; min-height: calc(var(--pc) * 1.4 + 16px); min-width: calc(var(--pc) * 3);
  background: rgba(2, 30, 18, .35); border: 1.5px dashed rgba(242, 193, 78, .35); }
.dyp { position: relative; transition: transform .15s; }
.dyp .card { cursor: default; }
/* 能钓的鱼：金光 + 往上浮，点它就钓 */
.dyp.catch { transform: translateY(-4px); z-index: 2; }
.dyp.catch .card { cursor: pointer; box-shadow: 0 0 0 2px #f2c14e, 0 0 14px rgba(255, 200, 80, .9); animation: dyCatch 1s ease-in-out infinite; }
@keyframes dyCatch { 50% { box-shadow: 0 0 0 2px #fff3c4, 0 0 22px rgba(255, 210, 90, 1); } }
.dyp.just .card { animation: dyJust 1.3s ease-out both; }
@keyframes dyJust { 0% { transform: scale(1.5); box-shadow: 0 0 0 3px #f2c14e, 0 0 24px rgba(255, 200, 80, 1); } 40% { transform: scale(1); } 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, .35); } }

.dyhint { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(var(--hc) * 1.4 + 14px); white-space: nowrap;
  padding: 3px 14px; border-radius: 12px; font-size: 12px; font-weight: 800; color: #fff8e1;
  background: rgba(4, 34, 20, .82); border: 1px solid rgba(242, 193, 78, .45); }
.dyhint.my { color: #4a2800; background: linear-gradient(#ffe48a, #f2b705); border-color: #fff3c4; box-shadow: 0 0 12px rgba(255, 200, 80, .55); }

/* ---------- 自己：左下角头像，手牌贴底 ---------- */
.dyme { position: absolute; z-index: 3; left: 10px; bottom: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 132px; }
.dyme .dyfx { left: 40px; }
.dyhand { --cw: var(--hc); position: absolute; z-index: 2; left: 150px; right: 10px; bottom: 6px; display: flex; justify-content: center; gap: 3px; }
.dyh { position: relative; }
.dyh .card.selected { transform: translateY(-14px); box-shadow: 0 0 0 2px #f2c14e, 0 0 14px rgba(255, 200, 80, .8); }
/* 轮到自己时，能钓到鱼的牌上面一个小金点 */
.dyh.ok::after { content: ''; position: absolute; left: 50%; top: -6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: #ffd76a; box-shadow: 0 0 6px rgba(255, 210, 90, .9); pointer-events: none; }
@keyframes dyDraw { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.dytable.watching .dymid { bottom: 50px; }

/* ---------- 每局结算 ---------- */
.dytable.resultbg { display: flex; align-items: center; justify-content: center; padding: 10px; }
.dyrpanel { width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: linear-gradient(rgba(18, 88, 58, .97), rgba(8, 52, 32, .98)); border: 2px solid #d8a440; box-shadow: 0 0 0 4px rgba(90, 52, 16, .8), 0 12px 30px rgba(0, 0, 0, .5); }
.dyround { display: flex; flex-direction: column; min-height: 0; }
.dyrhead { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px 6px; border-bottom: 1px solid rgba(242, 193, 78, .3); }
.dyrhead b { font-size: 15px; color: #ffd76a; }
.dyrhead .hint { font-size: 11px; }
.dyrlist { list-style: none; margin: 0; padding: 6px 10px; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; min-height: 0; }
.dyrlist li { display: grid; grid-template-columns: 128px 1fr 108px 52px; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 10px;
  background: rgba(0, 0, 0, .2); border: 1px solid rgba(242, 193, 78, .18); }
.dyrlist li.me { background: rgba(242, 193, 78, .12); border-color: rgba(242, 193, 78, .55); }
.dyrwho { display: flex; align-items: center; gap: 5px; min-width: 0; }
.dyrwho .avatar { width: 28px; height: 28px; font-size: 13px; flex: none; }
.dyrwho b { font-size: 12px; color: #fff8e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dytag { flex: none; padding: 0 4px; border-radius: 5px; font-size: 9.5px; font-weight: 800; color: #fff8e1; background: rgba(0, 0, 0, .35); border: 1px solid rgba(242, 193, 78, .5); }
.dytag.gold { color: #4a2800; background: linear-gradient(#ffe48a, #f2b705); border-color: #fff3c4; }
.dyrcards { --mini: 22px; display: flex; flex-wrap: nowrap; align-items: center; min-width: 0; overflow: hidden; }
.dyrcards .card + .card { margin-left: -7px; }
.dysmall { margin-left: 4px; font-size: 10.5px; color: rgba(255, 248, 225, .65); white-space: nowrap; }
.dyrpts { font-size: 11px; color: rgba(255, 248, 225, .8); white-space: nowrap; }
.dyrpts b { font-size: 14px; color: #fff8e1; }
.dyrpts small { margin-left: 4px; font-size: 10px; color: rgba(255, 248, 225, .55); }
.dyrtotal { font-size: 19px; font-weight: 900; text-align: right; color: #fff8e1; }
.dyrtotal.pos { color: #ffd76a; text-shadow: 0 0 8px rgba(255, 200, 80, .5); }
.dyrtotal.neg { color: #a8f0c8; }
.dyrbar { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 8px; border-top: 1px solid rgba(242, 193, 78, .3); }
/* 记录弹窗里（不在牌桌上）也用这套 */
.sheet .dyround .dyrlist { padding: 0; }

/* ---------- 鱼篓：每家钓到的牌摊在桌上（用户要求：方便自己查看），大鱼排前面 ---------- */
.dypile { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dypl { align-self: flex-start; padding: 0 7px; border-radius: 8px; font-size: 10.5px; color: #fff8e1; white-space: nowrap;
  background: linear-gradient(var(--wood-hi, #7a4614), var(--wood-lo, #3e2306)); border: 1px solid #d8a440; }
.dypl b { margin: 0 1px; font-size: 12px; color: #ffd76a; }
.dypl small { margin-left: 4px; font-size: 9.5px; color: rgba(255, 248, 225, .7); }
.dypc { --mini: 18px; display: flex; align-items: center; min-height: calc(var(--mini) * 1.4); max-width: 100%; overflow: hidden; }
.dypc .card { cursor: default; }

.dynone { font-style: normal; font-size: 10px; color: rgba(255, 248, 225, .45); }
.dyseat.left .dypile, .dyseat.right .dypile { width: 124px; }
.dyseat.right .dypile { align-items: flex-end; }
.dyseat.right .dypl { align-self: flex-end; }
.dyseat.top .dypile { max-width: 200px; }
/* 自己的鱼篓：手牌左上方，大一点，点开看大图 */
.dypile.mine { position: absolute; z-index: 3; left: 10px; bottom: calc(var(--hc) * 1.4 + 12px); width: min(330px, calc(50% - 92px)); cursor: pointer; }
.dypile.mine.empty { cursor: default; }
.dypile.mine .dypc { --mini: 22px; padding: 3px 5px; border-radius: 8px; background: rgba(2, 30, 18, .45); border: 1px solid rgba(242, 193, 78, .3); }
.dypile.mine:not(.empty):active .dypc { border-color: #f2c14e; }
.dyme { bottom: 8px; }

/* 飞的牌：#stage 上单独一层，页面重绘冲不掉 */
#dyflylayer { position: absolute; inset: 0; z-index: 45; pointer-events: none; overflow: visible; }
.dyghost { position: absolute; transform-origin: 0 0; will-change: transform; }
.dyghost .card { cursor: default; }
.dyp.dyhide { visibility: hidden; }

/* 点开自己的鱼篓 */
.dysheet { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(2, 16, 9, .6); }
.dysheetbox { width: min(640px, 92%); max-height: 88%; overflow-y: auto; padding: 10px 14px; border-radius: 14px; text-align: left;
  background: linear-gradient(rgba(18, 88, 58, .97), rgba(8, 52, 32, .98)); border: 2px solid #d8a440; box-shadow: 0 0 0 4px rgba(90, 52, 16, .8), 0 12px 30px rgba(0, 0, 0, .5); }
.dysheetbox h3 { margin: 0 0 6px; font-size: 15px; color: #ffd76a; }
.dysheetbox p { margin: 6px 0 4px; font-size: 11.5px; color: rgba(255, 248, 225, .8); }
.dysheetbox p.hint { text-align: center; margin-top: 8px; }
.dysheetcards { --cw: 38px; display: flex; flex-wrap: wrap; gap: 4px; }
.dysheetcards .card { cursor: default; }

/* 鱼篓里最近一手钓到的：放最前面，金框 + 「最新」小牌子 */
.dypc { gap: 4px; }
.dynew { position: relative; flex: none; display: flex; gap: 1px; padding: 2px 3px 2px; border-radius: 5px;
  background: rgba(242, 193, 78, .18); box-shadow: 0 0 0 1.5px #f2c14e, 0 0 8px rgba(255, 200, 80, .55); animation: dyNew .5s ease-out; }
.dynew i { position: absolute; z-index: 2; top: -7px; left: 50%; transform: translateX(-50%); padding: 0 4px; border-radius: 5px; font-style: normal;
  font-size: 8.5px; font-weight: 900; line-height: 1.35; color: #4a2800; background: linear-gradient(#ffe48a, #f2b705); white-space: nowrap; }
@keyframes dyNew { from { box-shadow: 0 0 0 3px #fff3c4, 0 0 18px rgba(255, 210, 90, 1); } }
.dyrest { display: flex; min-width: 0; overflow: hidden; }
.dyrest .card + .card { margin-left: 1px; }
.dypile.mine .dypc { padding-top: 6px; }
.dyseat .dypc { padding-top: 5px; }
/* 翻底牌时飞的那张一开始是牌背 */
.dyghost .card.dygback { background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent 60%), repeating-linear-gradient(45deg, var(--cb-1, #2a6fd6) 0 3px, var(--cb-2, #1a4fa8) 3px 6px);
  border: 1.5px solid #f2c14e; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }

/* 钓到鱼时两张贴在一起发金光（tween 的时候加 .glow） */
.dyghost .card { transition: box-shadow .12s; }
.dyghost.glow .card { box-shadow: 0 0 0 2px #fff3c4, 0 0 22px rgba(255, 210, 90, 1); }