* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0e5b38;
  color: white;
  min-height: 100vh;
}
.wrap { max-width: 900px; margin: 0 auto; padding: 16px; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
h1 { margin: 8px 0 16px; font-size: clamp(24px, 7vw, 38px); }
h2 { margin: 0 0 12px; }
.panel {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.hidden { display:none !important; }
.row { display:flex; align-items:center; gap:12px; }
.between { justify-content:space-between; }
.rightstat { text-align:right; }
.label { opacity:.7; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.big { font-size:24px; font-weight:800; }
input {
  width: 100%;
  padding: 14px;
  font-size: 18px;
  border-radius: 12px;
  border: 0;
}
#joinPanel input { margin-bottom: 10px; }
button {
  border:0;
  border-radius:12px;
  padding:12px 16px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  background:#ffd54a;
  color:#111;
}
button.secondary { background:#fff; }
button.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
button:disabled { opacity:.45; cursor:not-allowed; }
.pill {
  background:rgba(255,255,255,.14);
  padding:7px 10px;
  border-radius:999px;
  font-size:13px;
}
.pill.ok { background:rgba(40,180,90,.35); }
.pill.bad { background:rgba(220,50,50,.35); }
.tableArea {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  padding:24px 0 8px;
}
.card {
  width:68px;
  height:96px;
  background:#fff;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111;
  font-weight:900;
  font-size:23px;
  border:2px solid rgba(0,0,0,.16);
  box-shadow:0 5px 10px rgba(0,0,0,.25);
  user-select:none;
}
.card.large { width:86px; height:122px; font-size:31px; }
.card.red { color:#d32f2f; }
.card.back { background:#1b2d4f; color:#fff; }
.card.playable { outline:3px solid #ffd54a; }
.hand {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  min-height:110px;
}
.hand .card { cursor:pointer; transition:transform .12s ease; }
.hand .card:active { transform:translateY(-8px); }
.players { display:flex; gap:8px; flex-wrap:wrap; }
.player {
  background:rgba(255,255,255,.12);
  padding:9px 11px;
  border-radius:12px;
}
.player.turn { outline:2px solid #ffd54a; }
.player.me::after { content:" (you)"; opacity:.7; }
.winner, .status {
  margin:12px 0;
  padding:12px;
  border-radius:12px;
  font-weight:900;
  text-align:center;
}
.winner { background:#ffd54a; color:#111; font-size:20px; }
.status { background:rgba(255,213,74,.18); border:1px solid rgba(255,213,74,.45); }
.hint { opacity:.75; }
.chatLog {
  height: 220px;
  overflow-y:auto;
  background:rgba(0,0,0,.18);
  border-radius:12px;
  padding:10px;
  margin-bottom:10px;
}
.chatMsg { margin-bottom:8px; }
.chatMsg .meta { opacity:.65; font-size:12px; margin-bottom:2px; }
.chatMsg.system { opacity:.8; font-style:italic; }
.chatRow { display:flex; gap:8px; }
.chatRow input { flex:1; }
.modal {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:50;
}
.modalCard {
  width:min(420px, 100%);
  background:#173d2d;
  border-radius:18px;
  padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.suitGrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:14px 0;
}
.suitGrid button { background:#fff; }
.suitGrid .redbtn { color:#c62828; }
.full { width:100%; }
.toast {
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  background:#111;
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  z-index:60;
}
@media (max-width:560px) {
  .wrap { padding:12px; }
  .panel { padding:13px; border-radius:15px; }
  .card { width:58px; height:82px; font-size:20px; }
  .tableArea { gap:18px; }
  .row.between { align-items:flex-start; }
  .big { font-size:20px; }
}

.humiliation {
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(0,0,0,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  animation:flashBg .35s ease-in-out 4 alternate;
}
.humiliationCard {
  width:min(520px, 94vw);
  text-align:center;
  background:#ffd54a;
  color:#111;
  border-radius:26px;
  padding:26px 18px;
  border:5px solid #fff;
  box-shadow:0 25px 80px rgba(0,0,0,.55);
  animation:humiliateShake .12s linear 10, popIn .35s ease-out;
}
.humiliationEmoji {
  font-size:48px;
  animation:bounce 0.45s ease-in-out infinite alternate;
}
.humiliationTitle {
  font-size:clamp(42px, 12vw, 78px);
  font-weight:1000;
  line-height:.95;
  margin:8px 0;
}
.humiliationSub {
  font-size:clamp(20px, 6vw, 32px);
  font-weight:900;
}
.flyingCards {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:18px;
}
.flyingCards span {
  display:inline-flex;
  width:54px;
  height:76px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:white;
  font-weight:900;
  font-size:20px;
  box-shadow:0 5px 12px rgba(0,0,0,.25);
  animation:cardHop .55s ease-in-out infinite alternate;
}
.flyingCards span:nth-child(2) { animation-delay:.1s; color:#c62828; }
.flyingCards span:nth-child(3) { animation-delay:.2s; color:#c62828; }
.flyingCards span:nth-child(4) { animation-delay:.3s; }

@keyframes humiliateShake {
  0% { transform:translateX(-6px) rotate(-1deg); }
  50% { transform:translateX(6px) rotate(1deg); }
  100% { transform:translateX(-6px) rotate(-1deg); }
}
@keyframes popIn {
  from { transform:scale(.4); opacity:0; }
  to { transform:scale(1); opacity:1; }
}
@keyframes bounce {
  from { transform:translateY(0) scale(1); }
  to { transform:translateY(-10px) scale(1.08); }
}
@keyframes cardHop {
  from { transform:translateY(0) rotate(-5deg); }
  to { transform:translateY(-16px) rotate(5deg); }
}
@keyframes flashBg {
  from { background:rgba(0,0,0,.72); }
  to { background:rgba(120,0,0,.82); }
}

.hostBadge {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  vertical-align: middle;
}
.kickBtn {
  margin-left: 10px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #8b0000;
  font-weight: 900;
  cursor: pointer;
}
.player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.suitChange {
  position: fixed;
  inset: 0;
  z-index: 115;
  background: rgba(0,0,0,.68);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: suitBackdrop .25s ease-out;
}
.suitChangeCard {
  width: min(520px, 92vw);
  background: #fff;
  color: #111;
  border-radius: 28px;
  padding: 24px 20px 30px;
  text-align: center;
  border: 5px solid rgba(255,255,255,.95);
  box-shadow: 0 25px 80px rgba(0,0,0,.55);
  animation: suitPop .35s cubic-bezier(.2,.9,.25,1.25);
}
.suitChangeSymbol {
  font-size: clamp(90px, 25vw, 160px);
  line-height: 1;
  font-weight: 900;
  animation: suitPulse .55s ease-in-out 2 alternate;
}
.suitChangeTitle {
  margin-top: 4px;
  font-size: clamp(24px, 7vw, 40px);
  font-weight: 1000;
  letter-spacing: .04em;
}
.suitChangeText {
  margin-top: 8px;
  font-size: clamp(32px, 10vw, 58px);
  font-weight: 1000;
}
@keyframes suitPop {
  from { transform: scale(.45) rotate(-4deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes suitPulse {
  from { transform: scale(1); }
  to { transform: scale(1.18); }
}
@keyframes suitBackdrop {
  from { background: rgba(0,0,0,0); }
  to { background: rgba(0,0,0,.68); }
}

.yourGoPopup {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0,0,0,.28);
  animation: yourGoFade .18s ease-out;
}

.yourGoCard {
  background: #fff;
  color: #111;
  border-radius: 24px;
  padding: 24px 34px;
  min-width: min(360px, 80vw);
  text-align: center;
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  border: 4px solid rgba(255,255,255,.95);
  animation: yourGoPop .28s cubic-bezier(.2,.9,.25,1.2);
}

.yourGoTitle {
  font-size: clamp(34px, 11vw, 64px);
  font-weight: 1000;
  letter-spacing: .04em;
}

@keyframes yourGoPop {
  from { transform: scale(.55); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes yourGoFade {
  from { background: rgba(0,0,0,0); }
  to { background: rgba(0,0,0,.28); }
}

button.danger {
  border-color: rgba(255, 90, 90, .65);
}

.leaveRow {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.leaveBtn {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
  padding: 11px 18px;
  border-radius: 14px;
  font-weight: 800;
}
.leaveBtn:active {
  transform: scale(.98);
}

.discardCount {
  margin-top: 8px;
  text-align: center;
  font-size: .95rem;
  opacity: .8;
  font-weight: 700;
}

/* Circular player table */
.playerCircle {
  position: relative;
  height: clamp(320px, 52vw, 470px);
  min-height: 320px;
  margin-top: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at center, rgba(255,255,255,.035) 0 34%, transparent 35%),
    radial-gradient(circle at center, rgba(255,255,255,.03) 0 58%, transparent 59%);
  overflow: visible;
}

.playerCircle .playerSeat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(112px, 20vw, 170px);
  min-height: 58px;
  transform: translate(-50%, -50%);
  transition: left .25s ease, top .25s ease, transform .2s ease, box-shadow .2s ease;
  border-radius: 18px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.08);
  box-sizing: border-box;
  z-index: 3;
}

.playerCircle .playerSeat.me {
  border-color: rgba(255,255,255,.45);
}

.playerCircle .playerSeat.turn {
  border-color: #ffd84a;
  box-shadow: 0 0 0 3px rgba(255,216,74,.18), 0 8px 25px rgba(0,0,0,.22);
  transform: translate(-50%, -50%) scale(1.06);
}

.playerCircle .playerSeatLabel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.15;
}

.playerCircle .playerSeatName {
  font-weight: 900;
  font-size: clamp(.85rem, 2.8vw, 1.05rem);
  overflow-wrap: anywhere;
}

.playerCircle .playerSeatMeta {
  font-size: .78rem;
  opacity: .82;
}

.playerCircle .hostBadge {
  display: inline-block;
  margin: 2px 0 0 0;
}

.playerCircle .kickBtn {
  margin-left: 0;
  padding: 5px 8px;
  font-size: .72rem;
  border-radius: 9px;
}

.directionRing {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(115px, 25vw, 180px);
  height: clamp(115px, 25vw, 180px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px dashed rgba(255,255,255,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.directionArrow {
  position: absolute;
  font-size: clamp(70px, 16vw, 125px);
  line-height: 1;
  font-weight: 900;
  opacity: .9;
  transform-origin: center;
}

.directionLabel {
  position: absolute;
  bottom: -30px;
  width: 180px;
  text-align: center;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  opacity: .8;
}

@media (max-width: 600px) {
  .playerCircle {
    height: 360px;
  }

  .playerCircle .playerSeat {
    width: 108px;
    min-height: 54px;
    padding: 7px 8px;
  }

  .directionRing {
    width: 108px;
    height: 108px;
  }

  .directionArrow {
    font-size: 72px;
  }

  .directionLabel {
    bottom: -26px;
    font-size: .68rem;
  }
}

/* v2.19 circular table fix */
.playerCircle {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: clamp(340px, 55vw, 500px) !important;
  min-height: 340px !important;
  margin-top: 12px !important;
  overflow: visible !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.06) !important;
}
.playerStage {
  position: absolute !important;
  inset: 0 !important;
}
.playerStage .playerSeat {
  position: absolute !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(105px, 22vw, 165px) !important;
  min-height: 62px !important;
  padding: 9px 10px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.12) !important;
  border: 2px solid rgba(255,255,255,.10) !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  z-index: 4 !important;
}
.playerStage .playerSeat.turn {
  border-color: #ffd84a !important;
  box-shadow: 0 0 0 3px rgba(255,216,74,.18), 0 8px 25px rgba(0,0,0,.22) !important;
}
.playerStage .playerSeat.me {
  background: rgba(255,255,255,.16) !important;
}
.playerStage .playerSeat .kickBtn {
  margin-top: 5px !important;
}
.playerStage .directionRing {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: clamp(110px, 24vw, 180px) !important;
  height: clamp(110px, 24vw, 180px) !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  border: 3px dashed rgba(255,255,255,.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}
@media (max-width: 600px) {
  .playerCircle { height: 390px !important; }
  .playerStage .playerSeat {
    width: 108px !important;
    min-height: 58px !important;
    padding: 7px 8px !important;
  }
}

/* v2.26 concept-matched table */
.gameBoardPanel {
  position: relative;
  overflow: hidden;
  padding-bottom: 12px;
}
.gameStats { margin-bottom: 4px; }
.boardActions {
  display:flex;
  justify-content:flex-end;
  margin:6px 0 4px;
}
.boardActions button+button { margin-left:6px; }

.compactTable {
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:clamp(500px, 78vw, 610px) !important;
  min-height:0 !important;
  margin:4px 0 0 !important;
  overflow:hidden !important;
  border-radius:32px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:radial-gradient(ellipse at center, rgba(9,75,47,.28) 0 50%, rgba(0,0,0,.08) 51% 100%) !important;
}
.playerStage { position:absolute !important; inset:0 !important; }
.playerStage::before {
  content:"";
  position:absolute;
  left:10%; right:10%; top:10%; bottom:10%;
  border:3px dashed rgba(255,255,255,.18);
  border-radius:50%;
  pointer-events:none;
}

.centreDiscard {
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  text-align:center;
}
.centreDiscard .label { font-size:12px; letter-spacing:.11em; }
.centreDiscard .card.large { width:82px; height:116px; font-size:31px; }
.discardCount { font-size:12px; opacity:.82; }

.compactTable .directionRing {
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:270px !important;
  height:270px !important;
  transform:translate(-50%,-50%) !important;
  border:0 !important;
  pointer-events:none;
  z-index:3 !important;
}
.compactTable .directionArrow {
  position:absolute;
  left:50%; top:-17px !important;
  transform:translateX(-50%);
  font-size:35px !important;
  line-height:1;
  background:#0b4e31;
  padding:0 8px;
}
.compactTable .directionLabel {
  position:absolute;
  left:50%; top:16px !important; bottom:auto !important;
  transform:translateX(-50%);
  width:auto !important;
  white-space:nowrap;
  font-size:10px !important;
  font-weight:900;
  letter-spacing:.09em;
  background:#0b4e31;
  padding:3px 9px;
  border-radius:999px;
}

.playerStage .playerSeat {
  position:absolute !important;
  transform:translate(-50%,-50%) !important;
  width:104px !important;
  min-height:54px !important;
  padding:6px 7px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.13) !important;
  border:2px solid rgba(255,255,255,.11) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  text-align:center !important;
  z-index:8 !important;
  box-shadow:0 5px 14px rgba(0,0,0,.18);
}
.playerStage .playerSeat.turn {
  border-color:#ffd54a !important;
  box-shadow:0 0 0 3px rgba(255,213,74,.18), 0 6px 18px rgba(0,0,0,.22) !important;
}
.playerStage .playerSeat.me { background:rgba(255,255,255,.18) !important; }
.playerCircle .playerSeatName { font-size:14px !important; font-weight:900; line-height:1.05; }
.playerCircle .playerSeatMeta { font-size:11px !important; opacity:.8; }
.playerCircle .hostBadge { font-size:10px; padding:2px 7px; margin-top:1px; }
.playerStage .playerSeat .kickBtn { padding:3px 7px !important; font-size:10px !important; margin-top:2px !important; }

.seatCardFan {
  height:30px;
  width:86px;
  position:relative;
  margin-top:1px;
}
.seatCardBack {
  position:absolute;
  top:1px;
  left:50%;
  width:22px;
  height:30px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.72);
  background:#1b3d72;
  box-shadow:0 2px 4px rgba(0,0,0,.24);
  transform-origin:50% 100%;
}

.handArea { margin-top:8px; }
.handTitle { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.handTitle h2 { margin:0 0 4px; }
.hand {
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:flex-end;
  overflow:hidden;
  width:100%;
  min-height:100px;
  padding:4px 4px 8px;
}
.hand .card { flex:0 0 auto; margin-left:4px; }
.hand .card:first-child { margin-left:0; }
.playControls { display:flex; justify-content:center; margin-top:2px; }
.playControls #drawBtn { min-width:170px; }
.leaveRow { display:flex; justify-content:flex-end; margin-top:8px; }
.versionFooter { text-align:center; opacity:.58; font-size:12px; padding:8px 0 16px; }

@media (max-width:600px) {
  .wrap { padding:7px !important; }
  .panel { padding:9px !important; margin-bottom:9px !important; }
  header { padding:0 4px; }
  header h1 { font-size:29px; margin:3px 0 8px !important; }
  .gameStats { padding:0 4px; }
  .big { font-size:20px; }
  .boardActions { margin:5px 0 2px; }
  .boardActions button { padding:7px 9px !important; font-size:12px !important; }
  .compactTable { height:455px !important; border-radius:26px !important; }
  .playerStage::before { left:9%; right:9%; top:10%; bottom:10%; }
  .compactTable .directionRing { width:230px !important; height:230px !important; }
  .compactTable .directionArrow { top:-15px !important; font-size:31px !important; }
  .compactTable .directionLabel { top:14px !important; font-size:9px !important; }
  .centreDiscard .card.large { width:68px !important; height:96px !important; font-size:27px !important; }
  .centreDiscard .label { font-size:11px; }
  .playerStage .playerSeat { width:92px !important; min-height:50px !important; padding:5px !important; }
  .playerCircle .playerSeatName { font-size:13px !important; }
  .playerCircle .playerSeatMeta { font-size:10px !important; }
  .seatCardFan { transform:scale(.9); margin-top:-1px; }
  .handArea { margin-top:6px; }
  .handTitle h2 { font-size:22px; }
  .handTitle .hint { font-size:11px; }
  .hand { min-height:88px !important; padding:2px 2px 7px !important; }
  .hand .card { width:54px !important; height:76px !important; font-size:18px !important; }
  .hand .card:first-child { margin-left:0 !important; }
  .playControls #drawBtn { padding:10px 16px; }
  .leaveBtn { padding:9px 12px; font-size:13px; }
}


/* v2.28: readable, horizontally scrollable local hand */
.hand {
  display:flex;
  flex-wrap:nowrap;
  gap:7px;
  overflow-x:auto;
  overflow-y:visible;
  min-height:104px;
  padding:8px 10px 12px;
  margin:0 -10px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hand::-webkit-scrollbar { display:none; }
.hand .card {
  flex:0 0 64px;
  width:64px;
  height:90px;
  font-size:22px;
  margin-left:0 !important;
  scroll-snap-align:start;
}
.handScrollHint {
  text-align:center;
  font-size:12px;
  opacity:.62;
  margin-top:-6px;
  margin-bottom:8px;
}
.headerActions { display:flex; align-items:center; gap:8px; }
.leaderboardBtn {
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:13px;
  white-space:nowrap;
}
.leaderboardCard { width:min(620px, 96vw); max-height:88vh; overflow:auto; }
.leaderboardHeader { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.leaderboardHeader h2 { margin:0; }
.closeBtn { padding:8px 11px; }
.leaderboardTableWrap { overflow-x:auto; margin-top:14px; }
.leaderboardTable { width:100%; border-collapse:collapse; min-width:420px; }
.leaderboardTable th, .leaderboardTable td { padding:9px 7px; border-bottom:1px solid rgba(255,255,255,.12); text-align:left; }
.leaderboardTable th:not(:nth-child(2)), .leaderboardTable td:not(:nth-child(2)) { text-align:center; }
.historyTitle { margin:18px 0 8px; }
.historyBody { display:flex; flex-direction:column; gap:7px; }
.historyItem { background:rgba(255,255,255,.08); border-radius:10px; padding:9px 10px; }
.historyItem span { display:block; opacity:.62; font-size:12px; margin-top:3px; }
.emptyCell { opacity:.65; text-align:center !important; padding:18px !important; }

@media (max-width:560px) {
  header { align-items:flex-start; }
  .headerActions { flex-direction:column-reverse; align-items:flex-end; gap:5px; }
  .leaderboardBtn { font-size:12px; padding:7px 9px; }
  .hand .card { flex-basis:62px; width:62px; height:88px; font-size:21px; }
}

/* v2.28: anchor the local hand at the left and allow full two-way swipe */
.hand {
  justify-content:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  box-sizing:border-box;
  width:calc(100% + 20px) !important;
  max-width:none !important;
  padding-left:10px !important;
  padding-right:24px !important;
  scroll-padding-left:10px;
  scroll-padding-right:24px;
  touch-action:pan-x pan-y;
}
.hand .card { flex-shrink:0 !important; }


/* v2.29 responsive table, real-card faces, top chat, panic mode */
body {
  transition: background .35s ease, box-shadow .35s ease;
  overflow-x: hidden;
}
body.panic-mode {
  background: #8f151b;
  box-shadow: inset 0 0 120px rgba(255,0,0,.22);
}
body.panic-mode .panel { background: rgba(70,0,0,.30); }
body.panic-mode .compactTable { background: radial-gradient(ellipse at center, rgba(115,18,22,.34) 0 50%, rgba(0,0,0,.10) 51% 100%) !important; }
body.panic-mode .compactTable .directionArrow,
body.panic-mode .compactTable .directionLabel { background:#721116; }

.gameBoardPanel { overflow: visible !important; }
.headerActions { flex-wrap:wrap; justify-content:flex-end; }
.headerLeaveBtn {
  background: rgba(255,255,255,.10);
  color:#fff;
  border:1px solid rgba(255,255,255,.30);
  padding:7px 10px;
  font-size:12px;
  border-radius:999px;
}

.chatDock { padding:10px 12px; }
.chatDockHead { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.chatDockHead h2 { margin:0 0 7px; font-size:18px; }
.chatLog {
  height:auto;
  max-height:128px;
  min-height:52px;
  overflow-y:auto;
  background:rgba(0,0,0,.13);
  border-radius:14px;
  padding:8px;
  margin-bottom:7px;
}
.chatBubbleRow { display:flex; justify-content:flex-start; margin:4px 0; }
.chatBubbleRow.mine { justify-content:flex-end; }
.chatBubble {
  max-width:82%;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.10);
  padding:6px 9px 7px;
  border-radius:14px 14px 14px 4px;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}
.chatBubbleRow.mine .chatBubble {
  background:#ffd54a;
  color:#161616;
  border-radius:14px 14px 4px 14px;
}
.chatBubbleMeta { font-size:9px; opacity:.62; margin-bottom:1px; }
.chatBubbleText { font-size:13px; line-height:1.2; }
.chatEmpty { opacity:.55; font-size:12px; text-align:center; padding:8px; }
.quickReplies {
  display:flex;
  gap:5px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:0 0 6px;
  -webkit-overflow-scrolling:touch;
}
.quickReplies::-webkit-scrollbar { display:none; }
.quickReplies button {
  flex:0 0 auto;
  padding:5px 8px;
  font-size:11px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
}
.chatRow input { padding:8px 10px; font-size:14px; }
.chatRow button { padding:8px 12px; font-size:13px; }

.card {
  position:relative;
  overflow:hidden;
  font-family: Georgia, "Times New Roman", serif;
  line-height:1;
}
.cardCorner {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
  font-weight:900;
  font-size:.34em;
  line-height:.88;
  z-index:3;
}
.cardCorner.topLeft { top:7%; left:8%; }
.cardCorner.bottomRight { bottom:7%; right:8%; transform:rotate(180deg); }
.cardCentre {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.05em;
  font-weight:900;
  font-size:.78em;
}
.cardCentre .centreSuit { font-size:.82em; }
.card.back .cardCorner, .card.back .cardCentre { display:none; }

.discardStack {
  position:relative;
  width:112px;
  height:145px;
  margin:2px 0 0;
}
.discardStack .discardLayer,
.discardStack > .card {
  position:absolute;
  left:50%; top:50%;
  transform:translate(calc(-50% - (var(--depth, 0) * 5px)), calc(-50% - (var(--depth, 0) * 5px))) rotate(calc(var(--depth, 0) * -1.6deg));
  transition:opacity .2s ease;
}
.discardStack #discard { transform:translate(-50%,-50%); }

.hand {
  justify-content:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  width:100% !important;
  margin:0 !important;
  padding:8px 12px 12px !important;
  scroll-padding-inline:12px;
}
.hand::after { content:""; flex:0 0 4px; }
.hand .card { flex:0 0 64px !important; }
.handScrollHint { margin-top:-5px; }
.playControls { margin-top:2px; }
.playControls #drawBtn { min-width:150px; padding:10px 18px; border-radius:999px; }

@media (max-width:600px) {
  header h1 { font-size:clamp(24px,7vw,29px); }
  .leaderboardBtn { font-size:11px; padding:7px 8px; }
  .pill { font-size:11px; padding:6px 8px; }
  .chatDock { padding:8px 9px !important; }
  .chatLog { max-height:100px; }
  .compactTable { min-height:300px !important; height:var(--table-h, 390px); }
  .centreDiscard .card.large { width:68px !important; height:96px !important; }
  .discardStack { width:98px; height:118px; }
  .playerStage .playerSeat { width:88px !important; min-height:47px !important; }
  .playerCircle .playerSeatName { font-size:12px !important; }
  .playerCircle .playerSeatMeta { font-size:9px !important; }
  .seatCardFan { transform:scale(.82); }
  .hand .card { flex-basis:62px !important; width:62px !important; height:88px !important; }
}
@media (max-height:720px) and (max-width:700px) {
  .chatLog { max-height:72px; }
  .quickReplies { padding-bottom:4px; }
  .gameStats .label { font-size:10px; }
  .gameStats .big { font-size:18px; }
  .boardActions { margin:2px 0; }
  .compactTable .directionRing { width:190px !important; height:190px !important; }
  .centreDiscard .card.large { width:60px !important; height:84px !important; }
  .discardStack { width:90px; height:104px; }
}

/* v2.30 — responsive table, clearer discard fan, host recovery, winner celebration */
.compactTable {
  height: var(--table-h, 390px) !important;
  min-height: 300px !important;
}

/* Keep direction status clearly above the discard pile. */
.compactTable .directionArrow {
  top: -38px !important;
}
.compactTable .directionLabel {
  top: -1px !important;
}
.centreDiscard {
  top: 54% !important;
}

/* Previous cards remain a stack, but fan just enough to expose corner values. */
.discardStack {
  width: 132px;
  height: 150px;
}
.discardStack .discardLayer {
  transform: translate(calc(-50% + var(--fan-x, 0px)), calc(-50% + var(--fan-y, 0px))) rotate(var(--fan-r, 0deg)) !important;
  transform-origin: 50% 75%;
}
.discardStack #discard {
  transform: translate(-50%, -50%) rotate(0deg) !important;
  opacity: 1 !important;
}

.hostRecovery {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0;
  padding:9px 11px;
  border-radius:13px;
  background:rgba(255,185,45,.16);
  border:1px solid rgba(255,205,90,.35);
}
.hostRecovery .hint { margin-top:2px; }
.dangerSmall {
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:#a62026;
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.dangerSmall:disabled { opacity:.55; }

.winnerCelebration {
  position:fixed;
  inset:0;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,239,140,.96) 0 12%, rgba(225,166,24,.94) 35%, rgba(79,50,0,.93) 100%);
  animation:winnerGlow .7s ease-out;
}
.winnerCelebrationCard {
  width:min(520px, 92vw);
  text-align:center;
  background:rgba(255,255,255,.96);
  color:#2d2100;
  border:5px solid #ffe47a;
  border-radius:30px;
  padding:25px 20px 27px;
  box-shadow:0 28px 90px rgba(0,0,0,.5), 0 0 55px rgba(255,221,68,.55);
  animation:winnerPop .45s cubic-bezier(.2,.9,.25,1.25);
}
.winnerTrophy { font-size:68px; line-height:1; }
.winnerCelebrationTitle { font-weight:1000; letter-spacing:.12em; font-size:18px; margin-top:4px; }
.winnerCelebrationName { font-size:clamp(38px,11vw,68px); font-weight:1000; line-height:1.02; margin:8px 0; }
.winnerCelebrationStats { font-size:16px; font-weight:800; opacity:.72; margin-bottom:16px; }
.winnerNextBtn {
  min-width:190px;
  padding:12px 20px;
  border-radius:999px;
  background:#8d6300;
  color:white;
  border:0;
  font-weight:1000;
  font-size:16px;
}
.winnerWaiting { font-weight:800; opacity:.7; margin-top:8px; }
body.winner-mode { background:#7a5a05; }
@keyframes winnerPop { from { transform:scale(.55) rotate(-3deg); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes winnerGlow { from { opacity:0; } to { opacity:1; } }

/* 2s-up: show exactly the final penalty count without overflowing small phones. */
.flyingCards {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:5px;
  max-width:min(92vw, 540px);
  margin:18px auto 0;
}
.flyingCards span {
  width:clamp(32px, 8vw, 48px);
  height:clamp(45px, 11vw, 68px);
  font-size:clamp(13px, 3.8vw, 18px);
}
.flyingCards span.red { color:#c62828; }

@media (max-width:600px) {
  .discardStack { width:116px; height:126px; }
  .compactTable .directionArrow { top:-30px !important; }
  .compactTable .directionLabel { top:3px !important; }
  .centreDiscard { top:55% !important; }
  .hostRecovery { align-items:flex-start; flex-direction:column; }
  .dangerSmall { align-self:flex-end; }
}


/* v2.31 — tidy discard fan and unobtrusive direction control */
/* Direction of play is shown as a small rotate symbol in the bottom-right
   of the table, keeping it away from player names and the discard pile. */
.compactTable .directionRing {
  left: auto !important;
  right: 16px !important;
  top: auto !important;
  bottom: 14px !important;
  width: 46px !important;
  height: 46px !important;
  transform: none !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 50% !important;
  background: rgba(6,54,34,.72) !important;
  z-index: 4 !important;
}
.compactTable .directionArrow {
  position: static !important;
  transform: none !important;
  font-size: 31px !important;
  line-height: 1 !important;
  background: transparent !important;
  padding: 0 !important;
  opacity: .9 !important;
}
.compactTable .directionLabel {
  display: none !important;
}
/* Slightly more room for the uniformly fanned previous cards. */
.discardStack {
  width: 142px !important;
}
@media (max-width: 600px) {
  .compactTable .directionRing {
    right: 10px !important;
    bottom: 10px !important;
    width: 42px !important;
    height: 42px !important;
  }
  .compactTable .directionArrow { font-size: 28px !important; }
  .discardStack { width: 132px !important; }
}


/* v2.32 — compact mobile header, centred suit stat, safer top player clearance */
.gameStats > div {
  flex: 1 1 0;
  min-width: 0;
}
.gameStats > div:first-child { text-align: left !important; }
.gameStats > div:nth-child(2) { text-align: center !important; }
.gameStats > div:nth-child(3) { text-align: right !important; }
#activeSuit {
  display: block;
  width: 100%;
  text-align: center;
}

@media (max-width: 600px) {
  header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 0 4px 4px !important;
  }
  header h1 {
    margin: 2px 0 3px !important;
  }
  .headerActions {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
  }
  .headerActions #connection { order: 1; }
  .headerActions #leaveBtn { order: 2; }
  .headerActions #leaderboardBtn { order: 3; }
  .headerActions .pill,
  .headerActions .headerLeaveBtn,
  .headerActions .leaderboardBtn {
    white-space: nowrap;
    flex: 0 1 auto;
    font-size: 10.5px !important;
    line-height: 1.1;
    padding: 6px 8px !important;
  }

  /* Keep the 12-o'clock seat fully inside the table on narrow phones. */
  .compactTable {
    padding-top: 2px;
  }
}