/* ================= 任丘麻将 · 样式 ================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --felt-hi: #246b4f;
  --felt-mid: #143f2e;
  --felt-lo: #081d14;
  --wood: #4a3524;
  --wood-lo: #2a1d12;
  --cream: #fbf7ea;
  --gold: #d9b45a;
  --ink: #22302a;

  /* 牌尺寸 */
  --tw: 50px;
  --th: 70px;
  --tw-s: 28px;      /* 弃牌 / 对手牌 */
  --th-s: 39px;
  --tw-x: 32px;      /* 竖放手牌 */
  --th-x: 22px;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  background: #050f0b;
  color: #e8efe9;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

.app {
  height: 100dvh;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------------- HUD ---------------- */
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
}

.hud-group { display: flex; align-items: center; gap: 8px; }

.chip {
  font-size: 12px;
  letter-spacing: .04em;
  color: #a9c4b5;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.chip b { color: #f2f7f3; font-weight: 600; }
.chip-dealer { color: #e8cf8f; border-color: rgba(217, 180, 90, .35); background: rgba(217, 180, 90, .08); }
.chip-dealer b { color: var(--gold); }

.btn-ghost {
  font-family: inherit;
  font-size: 12px;
  color: #b6cbbf;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: all .15s;
}
.btn-ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); }
.btn-ghost:active { transform: scale(.96); }

/* ---------------- 桌面 ---------------- */
.table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  isolation: isolate;
}

.table::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 26px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, var(--felt-hi) 0%, var(--felt-mid) 46%, var(--felt-lo) 100%);
  box-shadow:
    inset 0 0 0 9px var(--wood),
    inset 0 0 0 10px #1a1208,
    inset 0 0 90px rgba(0, 0, 0, .75),
    0 18px 40px rgba(0, 0, 0, .65);
  z-index: -1;
}

/* 桌面丝绒质感 */
.table::after {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 18px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px);
  z-index: -1;
}

/* ---------------- 座位通用 ---------------- */
.seat { position: absolute; z-index: 3; }

.opp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #9db8aa;
  letter-spacing: .05em;
}
.pname { color: #cfe0d5; font-weight: 600; }
.score {
  font-variant-numeric: tabular-nums;
  color: #8fa79a;
  background: rgba(0, 0, 0, .25);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
}
.score.pos { color: #ff9c8a; }
.score.neg { color: #7fd8a8; }

.tag-you {
  font-size: 9px;
  color: #0b2318;
  background: var(--gold);
  border-radius: 3px;
  padding: 1px 4px;
  font-weight: 700;
  display: none;
}
.tag-you.on { display: inline-block; }

/* ---------------- 对家（上） ---------------- */
.seat-top {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.opp-hand {
  display: flex;
  gap: 2px;
}
.opp-hand .tile,
.opp-melds .tile {
  width: var(--tw-x);
  height: var(--th-x);
  border-radius: 4px;
}

/* ---------------- 左右两家 ---------------- */
.seat-left, .seat-right {
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.seat-left { left: 16px; }
.seat-right { right: 16px; }

.opp-hand.vert,
.opp-melds.vert {
  flex-direction: column;
  gap: 2px;
  align-items: center;
}

/* ---------------- 中央 ---------------- */
.center {
  position: absolute;
  inset: 104px 96px 140px 96px;
  display: grid;
  grid-template-areas:
    "top  top  top"
    "left mid  right"
    "bot  bot  bot";
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  z-index: 2;
}

.river-row {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
}
.river-top { grid-area: top; align-content: flex-end; padding-bottom: 6px; }
.river-bottom { grid-area: bot; align-content: flex-start; padding-top: 6px; }

.river-mid {
  grid-area: left / left / mid / right;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.river-col {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-content: center;
  justify-content: center;
}
.river-left { grid-column: 1; }
.river-right { grid-column: 3; }

.river-row .tile,
.river-col .tile {
  width: var(--tw-s);
  height: var(--th-s);
  border-radius: 4px;
  opacity: .96;
}
.river-col .tile { width: 34px; height: 26px; }

.tile.last {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  box-shadow: 0 0 12px rgba(217, 180, 90, .7);
  z-index: 2;
}

/* 中央信息 */
.info-card {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(4, 18, 12, .45);
  border: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(3px);
  min-width: 118px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .14em;
  color: #8fae9d;
}
.info-row.small { font-size: 10px; letter-spacing: .06em; color: #7f9b8c; }
.info-row b { color: #dff0e5; font-size: 12px; font-variant-numeric: tabular-nums; }

.hun-wrap { display: flex; align-items: center; }
.hun-wrap .tile {
  width: 30px;
  height: 42px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(217, 180, 90, .45);
}

.turn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3c5a4a;
  transition: background .2s, box-shadow .2s;
}
.turn-dot.active { background: var(--gold); box-shadow: 0 0 10px var(--gold); }

/* ---------------- 自己 ---------------- */
.seat-bottom {
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.self-top {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  min-height: 24px;
}

.opp-melds {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.meld-group {
  display: flex;
  gap: 1px;
  padding: 2px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .18);
}

.hand {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 4px 8px 2px;
  max-width: 100%;
}

.hand .tile {
  width: var(--tw);
  height: var(--th);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s;
}

.hand .tile.playable:hover {
  transform: translateY(-10px);
  box-shadow: 0 1px 0 #c9bfa4, 0 12px 16px rgba(0, 0, 0, .45);
  filter: brightness(1.04);
}

.hand .tile.drawn { margin-left: 10px; }
.hand .tile.dim { opacity: .35; filter: grayscale(.6); }

/* 混牌（万能牌）描边 */
.tile.is-hun {
  box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(217, 180, 90, .55), 0 3px 6px rgba(0, 0, 0, .38);
}
.tile.is-hun::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(217, 180, 90, .16), transparent 40%);
  pointer-events: none;
}

/* ---------------- 牌面 ---------------- */
.tile {
  position: relative;
  flex: 0 0 auto;
  background: linear-gradient(168deg, #ffffff 0%, #faf5e6 52%, #ece2c9 100%);
  border: 1px solid rgba(0, 0, 0, .13);
  border-radius: 6px;
  box-shadow: 0 1.5px 0 #c6bb9d, 0 3px 6px rgba(0, 0, 0, .38);
  overflow: hidden;
  user-select: none;
}

/* 牌背 */
.tile.back {
  background: linear-gradient(165deg, #2f7d5c 0%, #226148 45%, #17452f 100%);
  border-color: #0f3323;
  box-shadow: 0 1.5px 0 #0b2618, 0 3px 6px rgba(0, 0, 0, .4);
}
.tile.back::after {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .13);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px);
}

/* 牌面容器 */
.face {
  position: absolute;
  inset: 7% 8%;
}

/* --- 万 --- */
.f-wan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #1f2b3d;
}
.f-wan .num {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-weight: 700;
  font-size: calc(var(--th) * .30);
  letter-spacing: .02em;
}
.f-wan .ch {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-weight: 700;
  font-size: calc(var(--th) * .31);
  color: #b3202a;
  margin-top: calc(var(--th) * .02);
}
.tile.sm .f-wan .num, .tile.sm .f-wan .ch { font-size: calc(var(--th) * .34); }

/* --- 筒 --- */
.f-tong { color: #1d6fa5; }
.pip {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.pip-tong {
  background:
    radial-gradient(circle at 50% 50%, #fff 0 26%, currentColor 27% 62%, #fff 63% 68%, currentColor 69% 100%);
  border: 1px solid rgba(0, 0, 0, .18);
}

/* --- 条 --- */
.f-tiao { color: #1f8a52; }
.pip-tiao {
  border-radius: 999px;
  background: linear-gradient(180deg, #46b276 0%, #1d7a48 55%, #0f5b34 100%);
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35);
}
.pip-tiao.red { background: linear-gradient(180deg, #e2574f, #a71f1c); }

/* 1 条（鸟） */
.tiao-bird {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46%;
  height: 62%;
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background: linear-gradient(160deg, #3fae70 0%, #1c7a49 55%, #0e5530 100%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .35), inset 0 -3px 6px rgba(0, 0, 0, .3);
}
.tiao-bird::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 26%;
  width: 34%;
  height: 34%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #c8241f;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}

/* --- 字牌 --- */
.f-honor {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-weight: 700;
  font-size: calc(var(--th) * .46);
  line-height: 1;
  color: #1f2b3d;
}
.f-honor.h-4 { color: #b3202a; }   /* 中 */
.f-honor.h-5 { color: #16794a; }   /* 发 */
.f-honor.h-6 { color: #1d6fa5; }   /* 白 */
.tile.sm .f-honor { font-size: calc(var(--th) * .5); }

/* 白发牌加边框感 */
.f-honor.h-6::after {
  content: '';
  position: absolute;
  inset: 12% 20%;
  border: 2px solid #1d6fa5;
  border-radius: 2px;
  opacity: .85;
}
.f-honor.h-6 span { position: relative; z-index: 1; }

/* ---------------- 操作栏 ---------------- */
.action-bar {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
}
.action-bar.on { opacity: 1; pointer-events: auto; }

.action-tip {
  font-size: 11px;
  color: #93ad9f;
  letter-spacing: .1em;
}

.action-btns { display: flex; gap: 8px; }

.act {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  color: #0d2419;
  background: linear-gradient(180deg, #f6e7b8, #d9b45a);
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: 0 3px 0 #9a7c31, 0 6px 14px rgba(0, 0, 0, .35);
  transition: transform .1s, box-shadow .1s;
}
.act:hover { filter: brightness(1.06); }
.act:active { transform: translateY(2px); box-shadow: 0 1px 0 #9a7c31, 0 3px 8px rgba(0, 0, 0, .35); }

.act-ghost {
  color: #c7d8cd;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: none;
  font-weight: 500;
}
.act-ghost:hover { background: rgba(255, 255, 255, .12); }
.act-ghost:active { transform: scale(.97); box-shadow: none; }

.act-hu {
  background: linear-gradient(180deg, #ff8a7a, #d63d2c);
  color: #fff;
  box-shadow: 0 3px 0 #8e2418, 0 6px 16px rgba(214, 61, 44, .45);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.act small {
  display: block;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .04em;
  opacity: .7;
  margin-top: 1px;
}

/* ---------------- 弹层 ---------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 10, 7, .78);
  backdrop-filter: blur(4px);
}
.overlay.on { display: flex; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.dialog {
  width: min(560px, 100%);
  max-height: 86dvh;
  overflow: auto;
  background: linear-gradient(170deg, #14271e, #0b1811);
  border: 1px solid rgba(217, 180, 90, .28);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .7);
  animation: pop .22s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes pop { from { transform: scale(.94) translateY(10px); opacity: 0; } }

.dialog h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #f2ead5;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dialog h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 180, 90, .4), transparent);
}

.dlg-body { font-size: 13px; line-height: 1.75; color: #b9cabd; }
.dlg-body b { color: #e8d9ae; font-weight: 600; }
.dlg-body p { margin-bottom: 9px; }
.dlg-body ul { padding-left: 18px; margin-bottom: 10px; }
.dlg-body li { margin-bottom: 4px; }
.dlg-body h3 {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gold);
  margin: 16px 0 8px;
  font-weight: 600;
}
.dlg-body h3:first-child { margin-top: 0; }

.dlg-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 结算 */
.result-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  font-size: 13px;
  margin: 12px 0;
}
.result-grid .k { color: #8ba595; }
.result-grid .v { color: #ecdfb9; text-align: right; font-variant-numeric: tabular-nums; }

.fan-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.fan-tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(217, 180, 90, .12);
  border: 1px solid rgba(217, 180, 90, .35);
  color: #e2c98d;
}

.pay-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 6px;
}
.pay-table th, .pay-table td {
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.pay-table th { color: #7d9a89; font-weight: 500; font-size: 11px; letter-spacing: .08em; }
.pay-table td { color: #cdddcf; font-variant-numeric: tabular-nums; }
.pay-table td.plus { color: #ff9c8a; font-weight: 600; }
.pay-table td.minus { color: #7fd8a8; font-weight: 600; }

.dream-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 8px 0 10px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .25);
  min-height: 42px;
  align-items: center;
}
.dream-row .tile { width: 22px; height: 30px; border-radius: 3px; }
.dream-row .tile.hit { box-shadow: 0 0 0 2px #e2574f, 0 0 10px rgba(226, 87, 79, .6); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 900px) {
  :root {
    --tw: 42px; --th: 59px;
    --tw-s: 24px; --th-s: 33px;
    --tw-x: 26px; --th-x: 18px;
  }
  .center { inset: 86px 70px 118px 70px; }
  .river-col .tile { width: 26px; height: 20px; }
}

@media (max-width: 620px) {
  :root {
    --tw: min(38px, calc((100vw - 58px) / 14.6));
    --th: calc(var(--tw) * 1.42);
    --tw-s: 19px; --th-s: 26px;
    --tw-x: 20px; --th-x: 14px;
  }
  .app { padding: 6px 6px 4px; gap: 4px; }
  .center { inset: 66px 46px 92px 46px; }
  .seat-left { left: 4px; }
  .seat-right { right: 4px; }
  .river-col .tile { width: 20px; height: 16px; }
  .river-row .tile { width: 19px; height: 26px; }
  .info-card { padding: 6px 10px; min-width: 92px; gap: 4px; border-radius: 10px; }
  .hun-wrap .tile { width: 22px; height: 31px; }
  .action-bar { height: 48px; }
  .act { padding: 8px 14px; font-size: 13px; border-radius: 8px; }
  .chip { padding: 4px 8px; font-size: 11px; }
}

@media (max-width: 420px) {
  .hand { gap: 1px; padding: 2px 3px 0; }
  .hand .tile.drawn { margin-left: 5px; }
  .hud .chip:nth-child(2) { display: none; }
  .center { inset: 60px 38px 82px 38px; }
  .self-top { gap: 6px; }
}

@media (max-height: 620px) {
  .app { padding-top: 4px; gap: 4px; }
  .action-bar { height: 44px; }
}