/* =========================================================
   510K · four-player team table
   ========================================================= */
.wsk-screen { background: #041a15; }
.wsk-body { overflow: hidden; }
.wsk-arena { position: absolute; inset: 0; z-index: 2; isolation: isolate; }
.wsk-arena::before {
  content: "";
  position: absolute;
  inset: 12px 19px 0;
  border-radius: 44% 44% 14% 14% / 30% 30% 8% 8%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(42, 143, 107, .3), transparent 65%),
    radial-gradient(ellipse at 50% 96%, rgba(0, 13, 9, .55), transparent 55%),
    linear-gradient(158deg, #0d4133 0%, #0a382b 46%, #07271f 100%);
  border: 7px solid #462b1a;
  box-shadow:
    0 0 0 2px rgba(157, 118, 60, .55),
    0 0 0 3px rgba(57, 33, 14, .8),
    inset 0 0 130px rgba(0, 0, 0, .4);
}
.wsk-arena::after {
  content: "";
  position: absolute;
  inset: 29px 34px 10px;
  border-radius: inherit;
  border: 1px solid rgba(232, 199, 130, .13);
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .18);
}
.wsk-arena .table-center-mark { display: none; }

/* faint 5 10 K watermark */
.wsk-watermark {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 28px);
  z-index: 1;
  pointer-events: none;
  opacity: .07;
}
.wsk-watermark span {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(70px, 12vw, 160px);
  line-height: 1;
  color: #efe0b4;
  letter-spacing: -3px;
}
.wsk-watermark i { width: clamp(3px, .6vw, 8px); height: clamp(34px, 4.5vw, 66px); border-radius: 6px; background: #efe0b4; transform: rotate(22deg); }

/* =========================================================
   Team score plate
   ========================================================= */
.wsk-scoreboard {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 38;
  width: min(478px, 48vw);
  min-width: 360px;
  height: 58px;
  padding: 5px 17px 10px;
  display: flex;
  align-items: center;
  border-radius: 14px;
  border: 1px solid rgba(233, 198, 127, .25);
  background:
    radial-gradient(ellipse at 50% -60%, rgba(90, 153, 118, .24), transparent 65%),
    linear-gradient(180deg, rgba(11, 52, 41, .94), rgba(4, 27, 21, .95));
  box-shadow: 0 10px 25px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 246, 212, .06);
  backdrop-filter: blur(7px);
  overflow: hidden;
}
.wsk-scoreboard::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 9px;
  border: 1px solid rgba(234, 199, 127, .07);
  pointer-events: none;
}
.wsk-team { display: flex; align-items: center; gap: 7px; flex: 1; position: relative; z-index: 2; }
.wsk-team.red { justify-content: flex-end; }
.team-label {
  font-family: var(--font-kai);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 9px;
  color: #a6d9ee;
  border: 1px solid rgba(114, 187, 220, .25);
  background: rgba(51, 112, 143, .13);
}
.wsk-team.red .team-label { color: #f1bdb0; border-color: rgba(225, 145, 120, .25); background: rgba(137, 63, 48, .13); }
.team-score { display: flex; align-items: baseline; gap: 2px; }
.team-score b {
  font-family: "Georgia", serif;
  font-size: 26px;
  line-height: 1;
  color: #a9dff4;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 15px rgba(109, 191, 224, .2);
}
.wsk-team.red .team-score b { color: #f1b6a6; text-shadow: 0 0 15px rgba(220, 134, 111, .16); }
.team-score small { font-size: 8px; color: rgba(193, 198, 177, .42); }
.wsk-score-mid { width: 126px; flex: 0 0 auto; text-align: center; position: relative; z-index: 2; }
.score-kicker { display: block; font-size: 6.5px; letter-spacing: 2.5px; color: rgba(222, 199, 148, .42); white-space: nowrap; }
.score-pot { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 8px; color: rgba(194, 184, 159, .52); white-space: nowrap; }
.score-pot i { width: 4px; height: 4px; background: #e0be72; border-radius: 50%; box-shadow: 0 0 5px rgba(224, 190, 114, .5); }
.score-pot b { color: #f1d291; font-weight: 600; font-size: 10px; font-family: "Georgia", serif; }
.wsk-scorebar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .065);
  overflow: hidden;
  z-index: 2;
}
.wsk-scorebar .blue, .wsk-scorebar .red {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 3px;
  transition: width .5s var(--ease-out);
}
.wsk-scorebar .blue { left: 0; background: linear-gradient(90deg, #4386a8, #8dd5ed); box-shadow: 0 0 7px rgba(105, 193, 224, .35); }
.wsk-scorebar .red { right: 0; background: linear-gradient(90deg, #e19b84, #a74f42); box-shadow: 0 0 7px rgba(216, 129, 105, .3); }
.wsk-scorebar .mid-mark { position: absolute; left: 51%; top: -2px; width: 1px; height: 7px; background: rgba(247, 219, 152, .5); z-index: 3; }
.wsk-team.score-gain .team-score b { animation: scoreGain .7s var(--ease-spring); }
@keyframes scoreGain { 0%,100% { transform: scale(1); } 35% { transform: scale(1.26); filter: brightness(1.35); } }

/* =========================================================
   Seats
   ========================================================= */
.wsk-seat {
  position: absolute;
  z-index: 32;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 8px 5px 5px;
  border-radius: 38px 12px 12px 38px;
  transition: background .25s;
  min-width: 0;
}
.wsk-seat::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 198, 127, .12), transparent);
}
.wsk-seat-top { top: 76px; left: 50%; transform: translateX(-50%); align-items: center; padding: 3px 11px 3px 6px; border-radius: 34px; background: rgba(3, 26, 20, .22); }
.wsk-seat-left { left: 2.4%; top: 27.5%; }
.wsk-seat-right { right: 2.4%; top: 27.5%; flex-direction: row-reverse; padding: 5px 5px 5px 8px; border-radius: 12px 38px 38px 12px; text-align: right; }
.wsk-seat-right .seat-info { align-items: flex-end; }
.wsk-seat-top .seat-avatar-wrap { width: 48px; height: 48px; }
.wsk-seat-top .seat-info { padding-top: 1px; }
.wsk-seat-top .seat-name { font-size: 11px; }
.wsk-seat-top .seat-meta { font-size: 7.5px; }
.wsk-seat-left .seat-avatar-wrap, .wsk-seat-right .seat-avatar-wrap { width: 60px; height: 60px; }
.wsk-seat .seat-avatar { border-width: 2px; }
.wsk-seat .seat-name { font-size: 11px; max-width: 100px; }
.wsk-seat .seat-name-row { gap: 4px; }
.wsk-seat .seat-meta { font-size: 7.5px; gap: 4px; }
.wsk-seat .seat-badge { font-size: 6.5px; padding: 2px 4px; }
.seat-badge.rival { color: #f0b5a7; border-color: rgba(224, 151, 128, .25); background: rgba(122, 51, 41, .2); }
.wsk-seat-right .seat-meta { justify-content: flex-end; flex-wrap: wrap; }
.wsk-seat .wsk-cap { color: rgba(230, 200, 134, .68); }
.wsk-seat .wsk-opp-count { color: rgba(203, 193, 166, .4); }
.wsk-seat.team-blue .seat-avatar { border-color: rgba(112, 189, 222, .58); box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 0 2px rgba(81, 163, 197, .08); }
.wsk-seat.team-red .seat-avatar { border-color: rgba(224, 137, 112, .58); box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 0 2px rgba(198, 103, 83, .07); }
.wsk-seat.is-turn { background: linear-gradient(90deg, rgba(66, 82, 39, .32), rgba(3, 26, 20, 0)); }
.wsk-seat-right.is-turn { background: linear-gradient(270deg, rgba(66, 82, 39, .32), rgba(3, 26, 20, 0)); }
.wsk-seat-top.is-turn { background: rgba(59, 76, 38, .26); }
.wsk-seat.is-finished { opacity: .62; filter: saturate(.55); }
.wsk-finish-badge {
  position: absolute;
  top: -6px;
  right: 3px;
  z-index: 4;
  height: 17px;
  padding: 0 6px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 7px;
  color: #4b2c08;
  background: linear-gradient(180deg, #f8e2a5, #d7a64e);
  border: 1px solid rgba(255, 243, 199, .7);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  font-weight: 700;
  white-space: nowrap;
}
.wsk-seat-right .wsk-finish-badge { right: auto; left: 3px; }
.wsk-user-seat .wsk-finish-badge { right: -5px; left: auto; top: -5px; }

.wsk-opp-stack {
  width: 42px;
  height: 66px;
  margin-left: 0;
  opacity: .9;
  transform: scale(.76);
  transform-origin: left top;
  flex: 0 0 auto;
}
.wsk-seat-right .wsk-opp-stack { transform-origin: right top; }
.wsk-seat-top .wsk-opp-stack { width: 38px; margin-left: -2px; }
.wsk-opp-stack .back-stack { top: 2px; }
.wsk-opp-stack .back-stack .pcard { --cw: 28px; }
.wsk-opp-stack .back-stack .pcard:nth-child(1) { left: -4px; }
.wsk-opp-stack .back-stack .pcard:nth-child(2) { left: 7px; }
.wsk-opp-stack .back-stack .pcard:nth-child(3) { left: 18px; }
.wsk-opp-stack .back-stack .pcard:nth-child(4) { left: 28px; }
.wsk-seat .seat-bubble-slot { position: absolute; z-index: 60; width: 182px; pointer-events: none; }
.wsk-seat-top .seat-bubble-slot { top: 56px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; }
.wsk-seat-left .seat-bubble-slot { top: 59px; left: 77px; }
.wsk-seat-right .seat-bubble-slot { top: 59px; right: 77px; display: flex; justify-content: flex-end; }
.wsk-seat .wsk-speech { display: inline-block; position: relative; }
.wsk-seat-right .wsk-speech { text-align: right; border-radius: 10px 10px 2px 10px; }
.wsk-seat-right .wsk-speech::after { left: auto; right: 0; border-width: 0 0 7px 8px; border-color: transparent transparent transparent #e9dbb9; }
.wsk-seat-top .wsk-speech { border-radius: 10px 10px 10px 2px; }

/* user seat */
.wsk-user-seat {
  position: absolute;
  left: 17px;
  bottom: 15px;
  z-index: 44;
  min-width: 165px;
  padding: 2px 9px 2px 2px;
  border-radius: 38px 12px 12px 38px;
  transition: background .25s;
}
.wsk-user-seat .seat-avatar-wrap { width: 58px; height: 58px; }
.wsk-user-seat .seat-info { padding-top: 4px; }
.wsk-user-seat .seat-name { font-size: 10px; max-width: 100px; }
.wsk-user-seat .seat-meta { font-size: 7px; }
.wsk-user-seat .wsk-user-cap { color: rgba(229, 200, 135, .6); }
.wsk-user-seat .seat-badge { font-size: 6px; }
.wsk-user-seat.is-turn { background: linear-gradient(90deg, rgba(69, 79, 38, .24), transparent); }
.wsk-user-seat .seat-bubble-slot { position: absolute; z-index: 70; left: 4px; bottom: 70px; width: 195px; pointer-events: none; }
.wsk-user-seat .wsk-speech { display: inline-block; }

/* =========================================================
   Played hands
   ========================================================= */
.wsk-play-slot {
  position: absolute;
  z-index: 29;
  min-width: 100px;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.wsk-play-slot.top { left: 50%; top: 29.5%; transform: translate(-50%, -50%); }
.wsk-play-slot.left { left: 23%; top: 45%; transform: translate(-50%, -50%); }
.wsk-play-slot.right { right: 23%; top: 45%; transform: translate(50%, -50%); }
.wsk-play-slot.bottom { left: 50%; bottom: 214px; transform: translateX(-50%); }
.wsk-slot-label {
  margin-bottom: 4px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(3, 24, 19, .4);
  font-size: 8px;
  letter-spacing: .4px;
  color: rgba(235, 219, 183, .6);
  white-space: nowrap;
}
.wsk-slot-cards { display: flex; align-items: center; justify-content: center; }
.wsk-play-slot .played-cards { --cw: 54px; }
.wsk-play-slot .played-cards .pcard { --cw: 54px; }
.wsk-play-slot .played-cards.small { --cw: 43px; }
.wsk-play-slot .played-cards.small .pcard { --cw: 43px; }
.wsk-play-slot .played-cards .pcard .court { display: none; }
.wsk-play-slot .played-cards .pcard .ace-center .ace-suit { font-size: calc(var(--cw) * .47); }
.wsk-play-slot .played-cards .pcard .card-corner .rank { font-size: calc(var(--cw) * .23); }
.wsk-play-slot .played-cards .pcard .card-field { inset: calc(var(--cw) * .22) calc(var(--cw) * .14); }
.wsk-play-slot.bomb-slot .wsk-slot-label { color: #f4d085; }
.wsk-pass-stamp {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(202, 158, 85, .28);
  display: grid;
  place-items: center;
  font-family: var(--font-kai);
  font-size: 13px;
  letter-spacing: 2px;
  text-indent: 2px;
  color: rgba(235, 209, 158, .45);
  background: rgba(1, 18, 13, .2);
  transform: rotate(-8deg);
  animation: passStamp .25s var(--ease-out) both;
}
@keyframes passStamp { from { opacity: 0; transform: scale(1.3) rotate(-15deg); } to { opacity: 1; transform: scale(1) rotate(-8deg); } }

/* status */
.wsk-status { top: 143px; z-index: 37; font-size: 8px; }
.wsk-status.start { color: #f0d191; }

/* start banner */
.wsk-start-banner {
  position: absolute;
  z-index: 92;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  animation: wskStart 1.9s var(--ease-out) both;
}
.wsk-start-banner span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 70px);
  letter-spacing: 8px;
  color: #f8e1ac;
  text-shadow: 0 0 28px rgba(240, 194, 103, .4), 0 3px 0 rgba(80, 48, 14, .65);
}
.wsk-start-banner small { display: block; margin-top: 7px; font-size: 9px; letter-spacing: 3px; color: rgba(231, 207, 157, .58); }
@keyframes wskStart {
  0% { opacity: 0; transform: translate(-50%, -44%) scale(.88); }
  16%, 68% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1.03); }
}

/* =========================================================
   Hand / actions
   ========================================================= */
.wsk-hand-wrap {
  position: absolute;
  z-index: 40;
  left: 176px;
  right: 148px;
  bottom: 0;
  height: calc(var(--cw, 88px) * 1.4 + 34px);
  --cw: clamp(63px, 6.2vw, 91px);
}
.wsk-hand { height: 100%; --cw: clamp(63px, 6.2vw, 91px); }
.wsk-hand.is-locked .pcard { pointer-events: none; }
.wsk-hand.is-locked .pcard:hover { --hover-lift: 0px; }
.wsk-hand .hand-inner { bottom: 0; }
.wsk-hand-tools {
  position: absolute;
  right: 19px;
  bottom: 11px;
  z-index: 43;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.wsk-hand-count { font-size: 7px; color: rgba(203, 190, 157, .35); padding-right: 3px; }
.wsk-actions {
  position: absolute;
  z-index: 55;
  left: 50%;
  bottom: 165px;
  transform: translateX(-50%);
  display: none;
}
.wsk-actions.visible { display: block; }
.wsk-actions .game-actionbar { position: static; transform: none; gap: 8px; }
.wsk-actions .action-btn { min-width: 82px; height: 38px; }
.wsk-actions .action-btn.primary { min-width: 100px; }
.wsk-actions .action-timer { display: grid; }
.wsk-screen .icon-sound-off { display: none; }
body.is-muted .wsk-screen .icon-sound-on { display: none; }
body.is-muted .wsk-screen .icon-sound-off { display: block; }

/* =========================================================
   Effects
   ========================================================= */
.wsk-point-fly {
  position: absolute;
  z-index: 95;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  align-items: baseline;
  gap: 2px;
  animation: pointFly 1.5s var(--ease-out) both;
}
.wsk-point-fly span {
  font-family: "Georgia", serif;
  font-size: 25px;
  font-weight: 600;
  color: #aee2f5;
  text-shadow: 0 0 17px rgba(109, 196, 229, .55), 0 2px 4px rgba(0, 0, 0, .4);
}
.wsk-point-fly small { font-size: 8px; color: rgba(177, 213, 228, .7); }
.wsk-point-fly.team-1 span { color: #f4b5a5; text-shadow: 0 0 17px rgba(223, 135, 110, .5), 0 2px 4px rgba(0, 0, 0, .4); }
@keyframes pointFly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.65); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  28% { transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -145%) scale(.9); }
}
.wsk-cap.gain { animation: capGain .8s var(--ease-spring); }
@keyframes capGain { 0%,100% { color: rgba(229, 200, 135, .6); } 30% { color: #ffe6a6; transform: scale(1.12); } }

.wsk-bomb-fx {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: bombFade 1.45s ease both;
}
.wsk-bomb-rays {
  position: absolute;
  width: min(730px, 76vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(248, 211, 120, .13) 0deg 6deg, transparent 6deg 19deg);
  mask-image: radial-gradient(circle, #000 5%, transparent 67%);
  animation: wskBombRays 1.3s var(--ease-out);
}
.wsk-bomb-fx.suit .wsk-bomb-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 216, 122, .18) 0deg 8deg, transparent 8deg 22deg); }
.wsk-bomb-fx.mixed .wsk-bomb-rays { background: repeating-conic-gradient(from 0deg, rgba(239, 160, 114, .16) 0deg 7deg, transparent 7deg 20deg); }
.wsk-bomb-fx span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 102px);
  letter-spacing: 6px;
  color: #ffe9ae;
  text-shadow: 0 0 34px rgba(255, 178, 76, .72), 0 4px 0 #8e4b15, 0 10px 30px rgba(0, 0, 0, .52);
  animation: bombTitle 1.3s var(--ease-spring) both;
}
.wsk-bomb-fx.suit span { color: #fff4c5; }
.wsk-bomb-fx b {
  position: relative;
  z-index: 1;
  margin-top: 3px;
  padding: 4px 13px;
  border-radius: 11px;
  border: 1px solid rgba(246, 205, 117, .3);
  background: rgba(66, 30, 10, .52);
  color: #ffe2a0;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1.5px;
}
@keyframes wskBombRays { from { transform: scale(.35) rotate(0); opacity: 0; } 24% { opacity: 1; } to { transform: scale(1.2) rotate(22deg); opacity: 0; } }

.wsk-team-banner {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 96;
  min-width: 220px;
  padding: 10px 26px;
  text-align: center;
  border-top: 1px solid rgba(242, 207, 137, .32);
  border-bottom: 1px solid rgba(242, 207, 137, .32);
  background: linear-gradient(90deg, transparent, rgba(3, 24, 18, .8) 20%, rgba(3, 24, 18, .8) 80%, transparent);
  animation: teamBanner 2s var(--ease-out) both;
  pointer-events: none;
}
.wsk-team-banner strong { display: block; font-family: var(--font-kai); font-size: 26px; letter-spacing: 3px; color: #f4dba4; text-shadow: 0 0 20px rgba(237, 193, 105, .3); }
.wsk-team-banner small { display: block; margin-top: 4px; font-size: 8px; letter-spacing: 2px; color: rgba(219, 197, 154, .5); }
@keyframes teamBanner { 0% { opacity: 0; transform: translate(-50%, 6px) scaleX(.85); } 14%, 78% { opacity: 1; transform: translate(-50%, 0) scaleX(1); } 100% { opacity: 0; transform: translate(-50%, -5px); } }

/* =========================================================
   Result
   ========================================================= */
.wsk-final-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 16px 0 4px;
  position: relative;
  z-index: 1;
}
.wsk-final-score > div { display: flex; align-items: flex-end; gap: 7px; }
.wsk-final-score > div span { font-family: var(--font-kai); font-size: 11px; color: rgba(208, 197, 171, .5); padding-bottom: 5px; }
.wsk-final-score > div b { font-family: "Georgia", serif; font-size: 44px; line-height: 1; color: #addff2; text-shadow: 0 0 22px rgba(116, 195, 226, .18); }
.wsk-final-score > div.red b { color: #efb6a7; text-shadow: 0 0 22px rgba(221, 139, 118, .15); }
.wsk-final-score > i { font-family: "Georgia", serif; font-style: normal; font-size: 23px; color: rgba(225, 205, 162, .3); }
.wsk-final-caption { text-align: center; font-size: 8px; color: rgba(190, 181, 158, .4); letter-spacing: .4px; margin-bottom: 2px; position: relative; z-index: 1; }
.wsk-result-host .result-score { margin-top: 10px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .wsk-hand-wrap { left: 150px; right: 112px; }
  .wsk-user-seat { left: 10px; min-width: 142px; }
  .wsk-user-seat .seat-avatar-wrap { width: 50px; height: 50px; }
  .wsk-opp-stack { display: none; }
  .wsk-scoreboard { width: min(430px, 52vw); min-width: 330px; }
  .wsk-seat-left { left: 1.5%; }
  .wsk-seat-right { right: 1.5%; }
  .wsk-play-slot.left { left: 20%; }
  .wsk-play-slot.right { right: 20%; }
  .wsk-hand-tools { right: 12px; }
}
@media (max-width: 900px) {
  .wsk-arena::before { inset: 8px 10px 0; border-width: 5px; }
  .wsk-arena::after { inset: 19px 20px 8px; }
  .wsk-scoreboard { top: 7px; width: min(410px, 64vw); min-width: 300px; height: 51px; padding: 4px 11px 8px; }
  .team-score b { font-size: 21px; }
  .team-label { font-size: 8px; padding: 1px 5px; }
  .wsk-score-mid { width: 96px; }
  .score-kicker { font-size: 5.5px; letter-spacing: 1.5px; }
  .score-pot { font-size: 7px; }
  .wsk-seat-top { top: 64px; }
  .wsk-seat-top .seat-avatar-wrap { width: 40px; height: 40px; }
  .wsk-seat-left, .wsk-seat-right { top: 26%; }
  .wsk-seat-left .seat-avatar-wrap, .wsk-seat-right .seat-avatar-wrap { width: 50px; height: 50px; }
  .wsk-seat .seat-name { font-size: 9.5px; max-width: 76px; }
  .wsk-seat .seat-meta { font-size: 6.5px; }
  .wsk-seat-left .seat-bubble-slot { left: 62px; top: 50px; width: 138px; }
  .wsk-seat-right .seat-bubble-slot { right: 62px; top: 50px; width: 138px; }
  .wsk-seat-top .seat-bubble-slot { top: 44px; width: 150px; }
  .wsk-status { top: 114px; font-size: 7.5px; }
  .wsk-play-slot.top { top: 28%; }
  .wsk-play-slot.left { left: 18%; top: 43%; }
  .wsk-play-slot.right { right: 18%; top: 43%; }
  .wsk-play-slot.bottom { bottom: 168px; }
  .wsk-play-slot .played-cards { --cw: 45px; }
  .wsk-play-slot .played-cards .pcard { --cw: 45px; }
  .wsk-play-slot .played-cards.small { --cw: 37px; }
  .wsk-play-slot .played-cards.small .pcard { --cw: 37px; }
  .wsk-hand-wrap { left: 112px; right: 65px; --cw: clamp(54px, 7.4vw, 76px); }
  .wsk-hand { --cw: clamp(54px, 7.4vw, 76px); }
  .wsk-user-seat { left: 6px; bottom: 7px; min-width: 0; padding: 2px; background: none !important; }
  .wsk-user-seat .seat-avatar-wrap { width: 47px; height: 47px; }
  .wsk-user-seat .seat-info { display: none; }
  .wsk-user-seat .seat-bubble-slot { left: 0; bottom: 56px; width: 155px; }
  .wsk-actions { bottom: 140px; }
  .wsk-actions .action-timer { display: grid; }
  .wsk-actions .action-btn { min-width: 67px; height: 33px; padding: 0 13px; font-size: 9.5px; }
  .wsk-actions .action-btn.primary { min-width: 82px; }
  .wsk-hand-tools { right: 7px; bottom: 6px; }
  .wsk-hand-count { display: none; }
  .wsk-screen .game-bean-pill { display: none; }
}
@media (max-width: 680px) {
  .wsk-scoreboard { width: 55vw; min-width: 220px; height: 46px; padding: 3px 8px 7px; }
  .team-score b { font-size: 18px; }
  .team-label { display: none; }
  .wsk-score-mid { width: 72px; }
  .score-kicker { display: none; }
  .score-pot { font-size: 6px; }
  .wsk-seat-top { top: 56px; }
  .wsk-seat-top .seat-avatar-wrap { width: 34px; height: 34px; }
  .wsk-seat-top .seat-name { font-size: 8.5px; }
  .wsk-seat-top .seat-meta { display: none; }
  .wsk-seat-left, .wsk-seat-right { top: 24%; }
  .wsk-seat-left .seat-avatar-wrap, .wsk-seat-right .seat-avatar-wrap { width: 42px; height: 42px; }
  .wsk-seat .level-pill { display: none; }
  .wsk-seat .seat-name { font-size: 8.5px; max-width: 62px; }
  .wsk-seat .seat-meta { display: none; }
  .wsk-seat .seat-badge { font-size: 5.5px; }
  .wsk-seat-left .seat-bubble-slot { left: 49px; top: 42px; width: 125px; }
  .wsk-seat-right .seat-bubble-slot { right: 49px; top: 42px; width: 125px; }
  .wsk-speech { font-size: 8px; padding: 5px 8px; max-width: 130px; }
  .wsk-status { top: 96px; font-size: 7px; }
  .wsk-play-slot.top { top: 26%; }
  .wsk-play-slot.left { left: 15%; top: 43%; }
  .wsk-play-slot.right { right: 15%; top: 43%; }
  .wsk-play-slot.bottom { bottom: 137px; }
  .wsk-slot-label { font-size: 6.5px; }
  .wsk-hand-wrap { left: 57px; right: 30px; --cw: clamp(43px, 10vw, 60px); }
  .wsk-hand { --cw: clamp(43px, 10vw, 60px); }
  .wsk-user-seat .seat-avatar-wrap { width: 38px; height: 38px; }
  .wsk-user-seat .seat-bubble-slot { bottom: 46px; }
  .wsk-actions { bottom: 112px; }
  .wsk-actions .action-btn { min-width: 55px; height: 29px; padding: 0 9px; font-size: 9px; }
  .wsk-actions .action-btn.primary { min-width: 65px; }
  .wsk-actions .kbd { display: none; }
  .wsk-start-banner span { font-size: 37px; letter-spacing: 4px; }
  .wsk-pass-stamp { width: 39px; height: 39px; font-size: 11px; }
  .wsk-watermark span { font-size: 70px; }
  .wsk-final-score > div b { font-size: 32px; }
  .wsk-final-score { gap: 10px; margin-top: 10px; }
}
@media (max-height: 720px) {
  .wsk-seat-left, .wsk-seat-right { top: 24%; }
  .wsk-status { top: 120px; }
  .wsk-play-slot.top { top: 27%; }
  .wsk-play-slot.bottom { bottom: 190px; }
  .wsk-actions { bottom: 148px; }
  .wsk-hand-wrap { --cw: clamp(56px, 5.8vw, 80px); }
  .wsk-hand { --cw: clamp(56px, 5.8vw, 80px); }
}
@media (max-height: 520px) {
  .wsk-screen .game-topbar { height: 46px; flex-basis: 46px; }
  .wsk-screen .game-brand-mini p { display: none; }
  .wsk-scoreboard { top: 4px; height: 42px; width: 330px; min-width: 280px; transform: translateX(-50%) scale(.9); transform-origin: top center; padding: 3px 10px 8px; }
  .wsk-team .team-label { font-size: 7px; padding: 1px 4px; }
  .wsk-team .team-score b { font-size: 18px; }
  .wsk-score-mid { width: 86px; }
  .wsk-score-mid .score-kicker { font-size: 5px; }
  .wsk-seat-top { top: 47px; transform: translateX(-50%) scale(.83); transform-origin: top center; }
  .wsk-seat-top .seat-avatar-wrap { width: 34px; height: 34px; }
  .wsk-seat-top .seat-meta { display: none; }
  .wsk-seat-top .seat-name { font-size: 8.5px; }
  .wsk-seat-left, .wsk-seat-right { top: 24%; }
  .wsk-seat-left .seat-avatar-wrap, .wsk-seat-right .seat-avatar-wrap { width: 40px; height: 40px; }
  .wsk-seat-left .seat-name, .wsk-seat-right .seat-name { font-size: 8.5px; max-width: 58px; }
  .wsk-seat-left .seat-meta, .wsk-seat-right .seat-meta { display: none; }
  .wsk-seat-left .level-pill, .wsk-seat-right .level-pill { display: none; }
  .wsk-seat-left .seat-bubble-slot { left: 46px; top: 38px; width: 120px; }
  .wsk-seat-right .seat-bubble-slot { right: 46px; top: 38px; width: 120px; }
  .wsk-status { top: 100px; font-size: 6.5px; height: 20px; }
  .wsk-play-slot.top { top: 31%; transform: translate(-50%, -50%) scale(.8); }
  .wsk-play-slot.left { left: 24%; top: 45%; transform: translate(-50%, -50%) scale(.82); }
  .wsk-play-slot.right { right: 24%; top: 45%; transform: translate(50%, -50%) scale(.82); }
  .wsk-play-slot.bottom { bottom: 132px; }
  .wsk-play-slot .played-cards { --cw: 31px; }
  .wsk-play-slot .played-cards .pcard { --cw: 31px; }
  .wsk-slot-label { font-size: 6.5px; }
  .wsk-user-seat { left: 5px; bottom: 2px; min-width: 0; padding: 2px; background: none !important; }
  .wsk-user-seat .seat-avatar-wrap { width: 37px; height: 37px; }
  .wsk-user-seat .seat-info { display: none; }
  .wsk-user-seat .seat-bubble-slot { left: 38px; bottom: 45px; width: 130px; }
  .wsk-actions { bottom: 102px; }
  .wsk-actions .action-btn { min-width: 57px; height: 29px; padding: 0 10px; font-size: 9px; }
  .wsk-actions .action-btn.primary { min-width: 72px; }
  .wsk-actions .action-timer { display: grid; }
  .wsk-actions .kbd { display: none; }
  .wsk-hand-wrap { left: 80px; right: 60px; height: 98px; --cw: 56px; }
  .wsk-hand { height: 98px; --cw: 56px; }
  .wsk-hand-tools { display: none; }
  .wsk-watermark { display: none; }
  .wsk-bomb-fx span { font-size: 46px; }
}

/* =========================================================
   510K · 手机竖屏
   ========================================================= */
@media (max-width: 560px) and (orientation: portrait) {
  .wsk-screen .game-topbar {
    height: calc(48px + env(safe-area-inset-top));
    flex-basis: calc(48px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    gap: 5px;
  }
  .wsk-screen .game-back { width: 29px; height: 29px; }
  .wsk-screen .game-back svg { width: 15px; height: 15px; }
  .wsk-screen .game-brand-mini { gap: 5px; }
  .wsk-screen .game-brand-mini .brand-coin { width: 27px; height: 27px; }
  .wsk-screen .game-brand-mini .brand-coin::before { inset: 8px; }
  .wsk-screen .game-brand-mini .brand-coin span { font-size: 9px; }
  .wsk-screen .game-brand-mini .brand-coin i { top: 5px; left: 8px; width: 7px; height: 4px; }
  .wsk-screen .game-brand-mini h2 { font-size: 13.5px; letter-spacing: .4px; }
  .wsk-screen .game-brand-mini p, .wsk-screen .game-divider-v { display: none; }
  .wsk-screen .game-room-info { display: none; }
  .wsk-screen .game-top-center { flex: 0 0 auto; margin-left: 2px; gap: 2px; }
  .wsk-screen .game-top-stat { min-width: 43px; min-height: 28px; padding: 2px 5px; }
  .wsk-screen .game-top-stat:nth-child(2) { display: none; }
  .wsk-screen .game-top-stat span { font-size: 5.5px; letter-spacing: 0; }
  .wsk-screen .game-top-stat b { font-size: 10px; }
  .wsk-screen .game-top-actions { gap: 0; }
  .wsk-screen .game-top-actions .icon-btn { width: 27px; height: 27px; }
  .wsk-screen .game-top-actions .icon-btn svg { width: 16px; height: 16px; }
  .wsk-screen .game-top-actions .icon-btn[data-wsk-chat] { display: none; }
  .wsk-screen .game-top-actions .game-bean-pill { display: none; }

  .wsk-arena::before {
    inset: 2px 6px 0;
    border-width: 3px;
    border-radius: 46% 46% 2% 2% / 18% 18% 2% 2%;
    box-shadow: 0 0 0 1px rgba(162, 119, 59, .6), inset 0 0 80px rgba(0, 0, 0, .32);
  }
  .wsk-arena::after { inset: 10px 11px 4px; border-radius: 46% 46% 3% 3%; }
  .wsk-watermark { top: 47%; opacity: .045; }

  .wsk-scoreboard {
    top: 4px;
    width: calc(100vw - 16px);
    min-width: 0;
    height: 49px;
    padding: 4px 10px 8px;
    border-radius: 11px;
  }
  .wsk-team { gap: 4px; }
  .wsk-team .team-label { font-size: 7.5px; padding: 1px 5px; }
  .wsk-team .team-score b { font-size: 21px; }
  .wsk-team .team-score small { font-size: 6.5px; }
  .wsk-score-mid { width: 86px; }
  .score-kicker { font-size: 5px; letter-spacing: 1.3px; }
  .score-pot { font-size: 7px; margin-top: 3px; }
  .score-pot b { font-size: 9px; }
  .wsk-scorebar { left: 9px; right: 9px; bottom: 3px; }

  .wsk-seat-top { top: 59px; }
  .wsk-seat-top .seat-avatar-wrap { width: 36px; height: 36px; }
  .wsk-seat-top .seat-name { font-size: 8.5px; }
  .wsk-seat-top .seat-meta { display: none; }
  .wsk-seat-left { left: 4px; top: 23%; }
  .wsk-seat-right { right: 4px; top: 23%; }
  .wsk-seat-left .seat-avatar-wrap, .wsk-seat-right .seat-avatar-wrap { width: 43px; height: 43px; }
  .wsk-seat-left .seat-name, .wsk-seat-right .seat-name { font-size: 9px; max-width: 62px; }
  .wsk-seat-left .seat-meta, .wsk-seat-right .seat-meta { display: none; }
  .wsk-seat-left .level-pill, .wsk-seat-right .level-pill { display: none; }
  .wsk-seat-left .seat-bubble-slot { left: 45px; top: 38px; width: 126px; }
  .wsk-seat-right .seat-bubble-slot { right: 45px; top: 38px; width: 126px; }
  .wsk-speech { font-size: 8px; padding: 5px 8px; max-width: 126px; }
  .wsk-status { top: 103px; height: 21px; font-size: 7px; padding: 3px 10px; }

  .wsk-play-slot.top { top: 27.5%; }
  .wsk-play-slot.left { left: 22%; top: 43%; }
  .wsk-play-slot.right { right: 22%; top: 43%; }
  .wsk-play-slot.bottom { bottom: calc(174px + env(safe-area-inset-bottom)); }
  .wsk-play-slot .played-cards { --cw: 34px; }
  .wsk-play-slot .played-cards .pcard { --cw: 34px; }
  .wsk-play-slot .played-cards.small { --cw: 30px; }
  .wsk-play-slot .played-cards.small .pcard { --cw: 30px; }
  .wsk-slot-label { font-size: 6.5px; padding: 1px 5px; margin-bottom: 2px; }
  .wsk-play-slot .played-cards .pcard .card-corner .rank { font-size: 9px; }
  .wsk-pass-stamp { width: 38px; height: 38px; font-size: 11px; }

  .wsk-user-seat {
    left: 7px;
    bottom: calc(150px + env(safe-area-inset-bottom));
    padding: 2px;
    min-width: 0;
    background: none !important;
  }
  .wsk-user-seat .seat-avatar-wrap { width: 34px; height: 34px; }
  .wsk-user-seat .level-pill { display: none; }
  .wsk-user-seat .seat-info { display: none; }
  .wsk-user-seat .seat-bubble-slot { left: 36px; bottom: 35px; width: 140px; }

  .wsk-hand-wrap {
    left: max(4px, env(safe-area-inset-left));
    right: max(4px, env(safe-area-inset-right));
    bottom: max(4px, env(safe-area-inset-bottom));
    height: 104px;
    --cw: clamp(47px, 14vw, 58px);
  }
  .wsk-hand { height: 104px; --cw: clamp(47px, 14vw, 58px); }
  .wsk-hand .hand-inner { bottom: 0; }
  .wsk-hand .hand-inner .pcard { bottom: 15px; }
  .wsk-hand .pcard .card-corner .rank { font-size: calc(var(--cw) * .23); }
  .wsk-hand-tools { display: none; }

  .wsk-actions {
    bottom: calc(112px + env(safe-area-inset-bottom));
    width: 100%;
    left: 0;
    transform: none;
    display: none;
    justify-content: center;
  }
  .wsk-actions.visible { display: flex; }
  .wsk-actions .game-actionbar {
    width: 100%;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
  }
  .wsk-actions .action-timer { display: grid; width: 32px; height: 32px; font-size: 12px; }
  .wsk-actions .action-btn {
    min-width: 64px;
    height: 36px;
    padding: 0 12px;
    font-size: 10px;
    border-radius: 18px;
  }
  .wsk-actions .action-btn.primary { min-width: 82px; }
  .wsk-actions .kbd { display: none; }
  .wsk-mult-pop b { font-size: 32px; }
  .wsk-point-fly span { font-size: 22px; }
  .wsk-team-banner { top: 30%; min-width: 220px; padding: 9px 18px; }
  .wsk-team-banner strong { font-size: 20px; }
  .wsk-bomb-fx span { font-size: 52px; letter-spacing: 4px; }
  .wsk-bomb-fx b { font-size: 8px; }
  .wsk-screen .chat-drawer {
    left: 8px;
    right: 8px;
    bottom: calc(112px + env(safe-area-inset-bottom));
    width: auto;
  }
  .wsk-result-host .result-screen { padding: 14px; }
  .wsk-result-host .result-card { width: calc(100vw - 28px); padding: 20px 17px 17px; }
  .wsk-result-host .result-title { font-size: 30px; letter-spacing: 3px; }
  .wsk-result-host .wsk-final-score > div b { font-size: 37px; }
  .wsk-result-host .result-score b { font-size: 28px; }
  .wsk-result-host .result-stat b { font-size: 11px; }
  .wsk-result-host .result-actions .gold-btn,
  .wsk-result-host .result-actions .ghost-btn { min-height: 37px; padding: 0 14px; font-size: 10px; }
}

/* compact opponent hand / captured-point counts on phone */
@media (max-width: 950px) {
  .wsk-seat .seat-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    margin-top: 2px;
    font-size: 6px;
    white-space: nowrap;
  }
  .wsk-seat .seat-meta .coin-icon,
  .wsk-seat .seat-meta > span:nth-child(2) { display: none; }
  .wsk-seat .seat-meta .wsk-cap,
  .wsk-seat .seat-meta .wsk-opp-count { display: inline; font-size: 6.5px; }
  .wsk-seat-right .seat-meta { justify-content: flex-end; }
  .wsk-seat-top .seat-meta { justify-content: center; }
}