/* ==========================================================================
   TEEN PATTI DESIGN — 1:1 PIXEL-ACCURATE REPLICA OF MitLive_App
   ========================================================================== */

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: transparent;
  color: #fff;
  overflow: hidden;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ── Viewport & Table Background ─────────────────────────────────────────── */
.game-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('../assets/teen_patti/bg.png?v=20261027_green_felt_sunset') no-repeat center center / cover;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header Bar (top: 8px, left: 12px, right: 8px) ──────────────────────── */
.game-header {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  z-index: 20;
  pointer-events: none;
}

/* User Profile Capsule */
.user-capsule {
  pointer-events: auto;
  position: relative;
  background: url('../assets/teen_patti/profile_bar.png') no-repeat center center / 100% 100%;
  border: none;
  border-radius: 0;
  height: clamp(61px, 16.0vw, 71px);
  width: clamp(185px, 48vw, 222px);
  padding: 0;
  margin-right: 6px;
  box-sizing: border-box;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65));
}

.avatar-img {
  position: absolute;
  left: 16.0%;
  top: 54.5%;
  transform: translate(-50%, -50%);
  width: clamp(30px, 7.8vw, 36px);
  height: clamp(30px, 7.8vw, 36px);
  border-radius: 50%;
  object-fit: cover;
  background: #111;
  border: 1.5px solid #ffd700;
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
  flex-shrink: 0;
}

.user-details {
  position: absolute;
  left: 28%;
  width: 42%;
  top: 54.0%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.user-name {
  font-size: clamp(8.5px, 2.2vw, 10.5px);
  font-weight: 900;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.user-id {
  font-size: clamp(7.5px, 2.0vw, 9.0px);
  font-weight: 800;
  color: #ffd700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
  margin-top: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

@keyframes topUpFlashAnim {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    filter: brightness(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  }
  50% {
    transform: translateY(-50%) scale(1.04);
    filter: brightness(1.25) drop-shadow(0 0 5px rgba(255, 215, 0, 0.85));
  }
}

.btn-topup {
  position: absolute;
  right: calc(5% + 4px);
  top: 54.5%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #fff176 0%, #ffb300 50%, #ff8f00 100%);
  border-radius: 4px;
  height: clamp(16px, 4.2vw, 19px);
  padding: 0 clamp(6px, 1.6vw, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  font-size: clamp(7.5px, 2.0vw, 9.0px);
  font-weight: 900;
  color: #210d00;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.6);
  animation: topUpFlashAnim 1.6s infinite ease-in-out;
  transition: transform 0.1s ease;
}

.btn-topup:active {
  transform: translateY(-50%) scale(0.92);
  filter: brightness(1.1);
}

/* Right Header Actions */
.header-right {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ranking Button */
.btn-ranking {
  background: linear-gradient(to right, #e040fb, #673ab7); /* purpleAccent, deepPurple */
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 5px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.26);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #ffffff;
}

.btn-ranking:active {
  transform: scale(0.95);
}

.ranking-icon {
  font-size: 14px;
  line-height: 1;
}

.ranking-text {
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  line-height: 1;
}

/* Close Button */
.btn-close {
  background: url('../assets/teen_patti/gold_red_close_button.png') no-repeat center center / contain;
  background-color: transparent;
  border-radius: 50%;
  width: clamp(28px, 7.5vw, 32px);
  height: clamp(28px, 7.5vw, 32px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  cursor: pointer;
  padding: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
  transition: transform 0.12s ease, filter 0.12s ease;
  flex-shrink: 0;
}

.btn-close:active {
  transform: scale(0.88);
  filter: brightness(1.2) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

/* ── Proportional Layout Content (12% / 28% / 8% / 35% / 17%) ─────────────── */
.game-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
}

/* Top Spacer (10%) */
.top-spacer {
  height: 10%;
  flex-shrink: 0;
}

/* ── Cards Row (28%) ─────────────────────────────────────────────────────── */
.cards-area {
  height: 28%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.cards-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.card-item {
  flex: 1;
  height: 88%;
  max-width: 28%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  perspective: 1000px;
  padding: 0 2px;
  box-sizing: border-box;
}

/* 3D Flip Card: 4:3 Aspect Ratio (1280x960 exact match between card-back and revealed cards) */
.card-flipper {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.card-flipper.flipped {
  transform: rotateY(180deg);
}

.flipper-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
}

.face-back {
  transform: rotateY(0deg);
}

.face-front {
  transform: rotateY(180deg);
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 8px;
  display: block;
}

/* Dim overlay on losing cards during result phase */
.card-dim-overlay {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.card-dim-overlay.dimmed {
  opacity: 1;
}

/* ── Timer Counter Row (7%) ──────────────────────────────────────────────── */
.counter-area {
  height: 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timer-circle {
  width: clamp(40px, 11vw, 48px);
  height: clamp(40px, 11vw, 48px);
  background: url('../assets/teen_patti/counter-image.png') no-repeat center center / contain;
  background-color: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 5px go more off (elevated by 5px) as requested */
  transform: translateY(-5px);
  /* The crown is at top, so inner disk center is slightly lower; padding-top optically centers the number */
  padding-top: 5px;
  box-sizing: border-box;
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 900;
  color: #ffffff;
  text-shadow: 
    -1.5px -1.5px 0 #000, 
     1.5px -1.5px 0 #000, 
    -1.5px  1.5px 0 #000, 
     1.5px  1.5px 0 #000,
     0 2px 4px rgba(0, 0, 0, 0.95);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
  letter-spacing: 0.5px;
}

.phase-label {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
}

/* ── Betting Blocks Row (35%) ────────────────────────────────────────────── */
.blocks-area {
  height: 35%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.blocks-row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100%;
  gap: 6px;
}

.block-col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.block-col:active .info-box {
  transform: scale(0.96);
}

.block-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.chair-container {
  height: 38%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  z-index: 1;
}

.chair-img {
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.10);
  transform-origin: center bottom;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

/* Bet Info Box (Royal Card Frame) */
.info-box {
  height: 60%;
  width: 100%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  box-sizing: border-box;
  padding-top: 30%;
  padding-bottom: 8%;
  padding-left: 6%;
  padding-right: 6%;
  position: relative;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  transition: transform 0.12s ease;
}

.info-box-a {
  background-image: url('../assets/teen_patti/box/first-card.png?v=20261023_v3');
}

.info-box-b {
  background-image: url('../assets/teen_patti/box/second-card.png?v=20261023_v3');
}

.info-box-c {
  background-image: url('../assets/teen_patti/box/third-card.png?v=20261023_v3');
}

.box-label {
  font-size: 26px;
  font-weight: 900;
  color: #ffc107;
  background: linear-gradient(180deg, #ffe082 0%, #ffb300 50%, #ff8f00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
  line-height: 1;
  letter-spacing: 0.5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0;
}

.box-pot {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  letter-spacing: 0.2px;
}

.box-divider {
  display: none;
}

.box-you-badge {
  margin: 0;
  background: rgba(10, 5, 15, 0.82);
  border: 1.5px solid #ffb300;
  border-radius: 999px;
  padding: 2.5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(255, 179, 0, 0.35);
  max-width: 92%;
  box-sizing: border-box;
}

.box-you {
  font-size: 11px;
  font-weight: 700;
  color: #ffd54f;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

/* Dim overlay on losing blocks during win animation */
.block-dim-overlay {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.block-dim-overlay.dimmed {
  opacity: 1;
}

/* ── Coin Selector Dock (22%) ────────────────────────────────────────────── */
.coin-area {
  height: 22%;
  min-height: clamp(141px, 37vw, 169px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 0 4px;
}

.coin-selector-container {
  margin: 0 4px;
  width: 100%;
  height: clamp(141px, 37vw, 169px);
  background: url('../assets/teen_patti/bottom_bar.png?v=20261024_newbar') no-repeat center center / 100% 100%;
  background-color: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 0 calc(4.0% + 5px) 0 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65));
}

.coin-balance {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3.5px;
  width: auto;
  margin-left: calc(4.8% + 5px);
  margin-right: auto;
  height: 48%;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  padding-right: 5px;
}

.balance-icon {
  width: clamp(15px, 4.0vw, 18px);
  height: clamp(15px, 4.0vw, 18px);
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.balance-text {
  font-size: clamp(11px, 2.9vw, 13.5px);
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 4px rgba(255, 215, 0, 0.4);
}

.chip-item {
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 clamp(2.5px, 0.75vw, 3.5px);
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.chip-item:first-of-type {
  margin-left: 5px;
}

.chip-item:active {
  transform: scale(0.92);
}

.chip-item.active {
  transform: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.chip-item.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 50%;
  border: 1.2px solid #ffd700;
  box-shadow: none;
  pointer-events: none;
  z-index: 10;
}

.chip-img {
  width: clamp(38px, 9.6vw, 43px);
  height: clamp(38px, 9.6vw, 43px);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

.chip-label {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(8.5px, 2.5vw, 11.5px);
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.3px;
  user-select: none;
  -webkit-user-select: none;
}

.history-btn {
  width: clamp(38px, 9.6vw, 43px);
  height: clamp(38px, 9.6vw, 43px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #42a5f5, #1565c0);
  border: 1.5px solid rgba(255, 255, 255, 0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: clamp(2.5px, 0.75vw, 3.5px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease;
}

.history-btn svg {
  width: clamp(19px, 5.0vw, 22px);
  height: clamp(19px, 5.0vw, 22px);
}

.history-btn:active {
  transform: scale(0.90);
}

/* ── Royal Winning Popup Modal (Exact wining-popup.png 1:1) ───────────────── */
.win-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  box-sizing: border-box;
  animation: winFadeIn 0.25s ease-out;
}

@keyframes winFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.win-popup-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1374 / 1145;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: winPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  -webkit-user-select: none;
}

@keyframes winPopIn {
  0%   { transform: scale(0.75); opacity: 0; }
  100% { transform: scale(1.0);  opacity: 1; }
}

.win-popup-frame {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 14px 35px rgba(0, 0, 0, 0.95));
}

/* ── Ribbon Header & Title (Built-in to wining-popup.png) ── */
.win-ribbon-text,
.win-title-text {
  display: none !important;
}

/* ── Inner Stats Box (Total Bet & You Won) ── */
.win-stats-container {
  position: absolute;
  top: 66.0%;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: 16%;
  background: rgba(3, 16, 54, 0.92);
  border: 1.5px solid rgba(255, 215, 0, 0.45);
  border-radius: 12px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 2px 16px;
  box-sizing: border-box;
  pointer-events: none;
}

.win-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.win-stat-label-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}

.win-stat-badge {
  width: 17px;
  height: 17px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.win-crown-icon {
  font-size: 15px;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.win-stat-label {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.win-stat-val-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}

.win-stat-coin {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.win-stat-val {
  font-size: 16px;
  font-weight: 800;
  color: #ffeb3b;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.win-val-gold {
  color: #ffd54f;
}

.win-stat-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.35) 50%, transparent 100%);
}

/* ── Green Glossy Oval OK Button ── */
.win-btn-ok {
  position: absolute;
  top: 83.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 9.2%;
  min-height: 32px;
  border-radius: 999px;
  border: 2.5px solid #ffeb3b;
  background: linear-gradient(180deg, #76ff03 0%, #00e676 22%, #00c853 55%, #1b5e20 100%);
  box-shadow: 
    0 0 14px rgba(255, 235, 59, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -3px 4px rgba(0, 0, 0, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, filter 0.1s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

.win-btn-ok:active {
  transform: translateX(-50%) scale(0.94);
  filter: brightness(1.15);
}

.win-btn-ok span {
  font-size: 19px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
  line-height: 1;
}

/* ── Royal Losing Popup Modal (Exact loosing-popup.png 1:1) ───────────────── */
.lose-popup-wrap {
  position: relative;
  width: 100%;
  max-width: 330px;
  aspect-ratio: 999 / 1574;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: losePopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  -webkit-user-select: none;
}

@keyframes losePopIn {
  0%   { transform: scale(0.75); opacity: 0; }
  100% { transform: scale(1.0);  opacity: 1; }
}

.lose-popup-frame {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 14px 35px rgba(0, 0, 0, 0.95));
}

/* ── Inner Stats Box (Total Bet, You Lost, Winner) ── */
.lose-stats-container {
  position: absolute;
  top: 61.2%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 20.5%;
  background: rgba(28, 4, 8, 0.82);
  border-radius: 14px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 6px 16px;
  box-sizing: border-box;
  pointer-events: none;
}

.lose-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.lose-stat-label-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}

.lose-stat-badge {
  width: 15px;
  height: 15px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.lose-crown-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.lose-trophy-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.lose-stat-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.lose-stat-val-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 50%;
}

.lose-stat-coin {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex-shrink: 0;
}

.lose-stat-val {
  font-size: 14px;
  font-weight: 800;
  color: #ffd54f;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.lose-val-red {
  color: #ff5252;
}

.lose-stat-winner-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #69f0ae;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.lose-stat-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.3) 50%, transparent 100%);
}

/* ── Red Glossy Oval OK Button ── */
.lose-btn-ok {
  position: absolute;
  top: 82.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 7.8%;
  min-height: 32px;
  border-radius: 999px;
  border: 2.5px solid #ffeb3b;
  background: linear-gradient(180deg, #ff5252 0%, #d50000 35%, #b71c1c 70%, #5d0000 100%);
  box-shadow: 
    0 0 14px rgba(255, 235, 59, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.7),
    inset 0 -3px 4px rgba(0, 0, 0, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, filter 0.1s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

.lose-btn-ok:active {
  transform: translateX(-50%) scale(0.94);
  filter: brightness(1.15);
}

.lose-btn-ok span {
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
  line-height: 1;
}

/* ── Viewer Winning Celebration Popup (Exact winning_viewer_overlay.png 1:1) ─ */
.viewer-popup-wrap {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1024 / 1536;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: viewerPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  -webkit-user-select: none;
}

@keyframes viewerPopIn {
  0%   { transform: scale(0.75); opacity: 0; }
  100% { transform: scale(1.0);  opacity: 1; }
}

.viewer-popup-frame {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 14px 35px rgba(0, 0, 0, 0.95));
}

/* 1. Winner Avatar inside Laurel Wreath */
.viewer-avatar-container {
  position: absolute;
  top: 43.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 25.5%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.75), inset 0 0 8px rgba(0, 0, 0, 0.6);
  border: 2px solid #ffd54f;
  background: #0d47a1;
}

.viewer-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2. Winner Name Banner inside Blue Capsule */
.viewer-name-banner {
  position: absolute;
  top: 63.8%;
  left: 50%;
  transform: translateX(-50%);
  width: 53%;
  height: 5.0%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
  box-sizing: border-box;
  pointer-events: none;
}

.viewer-name-text {
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(33, 150, 243, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 3. Winning Coins inside Bottom Red Blank Space */
.viewer-coins-container {
  position: absolute;
  top: 74.8%;
  left: 50%;
  transform: translateX(-50%);
  width: 76%;
  height: 12.0%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px;
  box-sizing: border-box;
  pointer-events: none;
}

.viewer-coins-label {
  font-size: 11.5px;
  font-weight: 800;
  color: #ffd54f;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.viewer-coins-amount-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.viewer-coin-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));
}

.viewer-coins-val {
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(180deg, #ffffff 0%, #fff9c4 25%, #ffca28 65%, #ff8f00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
  letter-spacing: 0.5px;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 4. Elegant Emerald OK Button */
.viewer-btn-ok {
  position: absolute;
  top: 88.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 6.8%;
  min-height: 32px;
  border-radius: 999px;
  border: 2px solid #ffeb3b;
  background: linear-gradient(180deg, #76ff03 0%, #00e676 25%, #00c853 60%, #1b5e20 100%);
  box-shadow: 
    0 0 14px rgba(255, 235, 59, 0.6),
    inset 0 2px 3px rgba(255, 255, 255, 0.8),
    inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    0 5px 12px rgba(0, 0, 0, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: transform 0.1s ease, filter 0.1s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

.viewer-btn-ok:active {
  transform: translateX(-50%) scale(0.94);
  filter: brightness(1.15);
}

.viewer-btn-ok span {
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  line-height: 1;
}


/* ── History Bottom Sheet (Exact MitLive_App 1:1) ────────────────────────── */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 50;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  padding: 16px 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.28s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.history-title {
  font-size: 18px;
  font-weight: bold;
  color: #f3a73f;
}

.ranking-title {
  font-size: 18px;
  font-weight: bold;
  color: #9c27b0; /* Colors.purple */
}

.sheet-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #9e9e9e;
  cursor: pointer;
  padding: 4px;
}

.sheet-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.12); /* black12 */
  width: 100%;
  margin: 12px 0;
}

.history-chair-headers {
  display: flex;
  padding: 0 16px;
}

.hist-chair-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hist-chair-img {
  height: 44px;
  object-fit: contain;
}

.hist-chair-label {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.54);
  font-size: 14px;
  margin-top: 4px;
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
}

.history-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.hist-badge-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hist-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
}

.hist-badge.win {
  background: #1b9d32; /* 0xFF1B9D32 */
}

.hist-badge.fail {
  background: #b0b0b0; /* 0xFFB0B0B0 */
}

/* ── ORNATE ROYAL RANKING LEADERBOARD MODAL ─────────────────────────────────── */
.ranking-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 110;
  animation: winFadeIn 0.25s ease-out;
}

.ranking-modal-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 111;
  pointer-events: auto;
  padding: 10px;
  box-sizing: border-box;
  animation: rbPopIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes rbPopIn {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}

.ranking-board-card {
  position: relative;
  width: min(92vw, 380px, calc(92vh * (1024 / 1536)));
  aspect-ratio: 1024 / 1536;
  max-height: 92vh;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 10px 32px rgba(0, 0, 0, 0.88));
}

.ranking-board-bg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
}

.ranking-board-close-btn {
  position: absolute;
  top: 1.6%;
  right: 2.2%;
  width: 9%;
  aspect-ratio: 1 / 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 30;
  transition: transform 0.12s ease;
}

.ranking-board-close-btn:active {
  transform: scale(0.88);
}

.ranking-close-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}

/* ── Top 3 Podium Slots (Rank 1 Center, Rank 2 Left, Rank 3 Right) ────────── */
.rb-podium-slot {
  position: absolute;
  pointer-events: none;
}

/* Rank 1 (Center Gold Wreath) */
.rb-rank-1 {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.rb-rank-1 .rb-avatar-circle {
  position: absolute;
  left: 50.0%;
  top: 27.7%;
  transform: translate(-50%, -50%);
  width: 14.8%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.rb-rank-1 .rb-name-plate {
  position: absolute;
  left: 50.0%;
  top: 35.5%;
  transform: translate(-50%, -50%);
  width: 22.0%;
  height: 2.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rb-rank-1 .rb-coin-plate {
  position: absolute;
  left: 50.0%;
  top: 39.2%;
  transform: translate(-50%, -50%);
  width: 20.0%;
  height: 2.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

/* Rank 2 (Left Silver Wreath) */
.rb-rank-2 {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.rb-rank-2 .rb-avatar-circle {
  position: absolute;
  left: 21.7%;
  top: 32.3%;
  transform: translate(-50%, -50%);
  width: 12.7%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(176, 190, 197, 0.5);
}

.rb-rank-2 .rb-name-plate {
  position: absolute;
  left: 21.7%;
  top: 39.2%;
  transform: translate(-50%, -50%);
  width: 20.0%;
  height: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rb-rank-2 .rb-coin-plate {
  position: absolute;
  left: 21.7%;
  top: 42.5%;
  transform: translate(-50%, -50%);
  width: 18.5%;
  height: 2.3%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

/* Rank 3 (Right Bronze Wreath) */
.rb-rank-3 {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.rb-rank-3 .rb-avatar-circle {
  position: absolute;
  left: 78.6%;
  top: 33.7%;
  transform: translate(-50%, -50%);
  width: 12.3%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(205, 127, 50, 0.5);
}

.rb-rank-3 .rb-name-plate {
  position: absolute;
  left: 78.6%;
  top: 39.8%;
  transform: translate(-50%, -50%);
  width: 20.0%;
  height: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rb-rank-3 .rb-coin-plate {
  position: absolute;
  left: 78.6%;
  top: 43.3%;
  transform: translate(-50%, -50%);
  width: 18.5%;
  height: 2.3%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.rb-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rb-name-text {
  font-size: clamp(9px, 2.6vw, 12px) !important;
  font-weight: 900 !important;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.9);
  max-width: 95%;
  text-align: center;
}

.rb-coin-text {
  font-size: clamp(9px, 2.6vw, 12px) !important;
  font-weight: 900 !important;
  color: #ffd700;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 5px rgba(255, 215, 0, 0.4);
}

/* ── Rows 4 to 8 ──────────────────────────────────────────────────────────── */
.rb-row {
  position: absolute;
  left: 0;
  width: 100%;
  height: 5.6%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.rb-row-4 { top: 56.8%; }
.rb-row-5 { top: 63.8%; }
.rb-row-6 { top: 70.8%; }
.rb-row-7 { top: 77.8%; }
.rb-row-8 { top: 84.8%; }

.rb-row-avatar-circle {
  position: absolute;
  left: 21.5%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7.6%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.rb-row-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rb-row-name-slot {
  position: absolute;
  left: 31.0%;
  width: 37.5%;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}

.rb-row-name-text {
  display: block;
  font-size: clamp(9px, 2.5vw, 12px) !important;
  font-weight: 900 !important;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.rb-row-coin-capsule {
  position: absolute;
  left: 79.4%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 19%;
  height: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.rb-row-coin-text {
  font-size: clamp(9px, 2.6vw, 12px) !important;
  font-weight: 900 !important;
  color: #ffd700;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

/* ── Bottom Row: My Rank ─────────────────────────────────────────────────── */
.rb-my-rank {
  position: absolute;
  left: 0;
  width: 100%;
  top: 94.08%;
  transform: translateY(-50%);
  height: 8.0%;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.rb-my-avatar-circle {
  position: absolute;
  left: 22.27%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8.0%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rb-my-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rb-my-info-slot {
  position: absolute;
  left: 31.0%;
  width: 37%;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  pointer-events: none;
}

.rb-my-name-box {
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  overflow: hidden;
  line-height: 1.1;
  display: flex;
  align-items: center;
}

.rb-my-name-text {
  font-size: clamp(9px, 2.5vw, 11.5px) !important;
  font-weight: 900 !important;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.rb-my-id-box {
  position: absolute;
  top: 63%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  overflow: hidden;
  line-height: 1.1;
  display: flex;
  align-items: center;
}

.rb-my-status-text {
  font-size: clamp(8px, 2.3vw, 10.5px) !important;
  font-weight: 900 !important;
  color: #ffd54f !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 5px rgba(255, 213, 79, 0.6);
}

.rb-my-coin-capsule {
  position: absolute;
  left: 80.0%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: 19.5%;
  height: 52%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.rb-my-coin-text {
  font-size: clamp(9.5px, 2.7vw, 12.5px) !important;
  font-weight: 900 !important;
  color: #ffd700;
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 4px rgba(255, 215, 0, 0.4);
}

.rb-coin-icon {
  width: clamp(10px, 2.8vw, 13px);
  height: clamp(10px, 2.8vw, 13px);
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

/* ── Participant Counter Pill & Modal Drawer ───────────────────────────────── */
.participant-counter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.54);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 15px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.participant-counter-pill:active {
  transform: scale(0.95);
}

.person-icon {
  width: 14px;
  height: 14px;
}

.participant-count-num {
  font-size: 11px;
  color: #FFFFFF;
  font-weight: bold;
}

/* ── Royal History Board Styles ────────────────────────────────────────────── */
.royal-history-content {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.history-row {
  position: absolute;
  left: 0;
  width: 100%;
  height: 5.6%;
  transform: translateY(-50%);
  pointer-events: none;
}

.history-row-1 { top: 34.50%; }
.history-row-2 { top: 40.69%; }
.history-row-3 { top: 46.88%; }
.history-row-4 { top: 53.00%; }
.history-row-5 { top: 59.18%; }
.history-row-6 { top: 65.40%; }
.history-row-7 { top: 71.58%; }
.history-row-8 { top: 77.77%; }
.history-row-9 { top: 84.08%; }

.hist-badge-slot {
  position: absolute;
  top: calc(50% + 2px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hist-badge-slot.col-a { left: 26.86%; }
.hist-badge-slot.col-b { left: 50.78%; }
.hist-badge-slot.col-c { left: 74.71%; }

.hist-badge {
  width: clamp(22px, 5.8vw, 28px);
  height: clamp(22px, 5.8vw, 28px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(8px, 2.2vw, 10px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-sizing: border-box;
}

.hist-badge.win {
  background: linear-gradient(135deg, #00e676 0%, #00897b 100%);
  border: 1.8px solid #b9f6ca;
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.95), inset 0 0 4px #ffffff;
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.hist-badge.fail {
  background: linear-gradient(135deg, #b71c1c 0%, #7f1d1d 100%);
  border: 1.8px solid #f87171;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ── Royal Round Participants Board Styles ─────────────────────────────────── */
.royal-participants-content {
  position: absolute;
  top: 33.0%;
  bottom: 12.0%;
  left: 8.5%;
  right: 8.5%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
}

.participants-scroll-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
}

.participants-scroll-list::-webkit-scrollbar {
  width: 4px;
}

.participants-scroll-list::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.4);
  border-radius: 2px;
}

.participant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(16, 26, 60, 0.88) 0%, rgba(8, 14, 34, 0.92) 100%);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.p-left {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  flex: 1;
}

.p-avatar {
  width: clamp(28px, 7.5vw, 34px);
  height: clamp(28px, 7.5vw, 34px);
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #ffd700;
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  flex-shrink: 0;
}

.p-name {
  font-size: clamp(10.5px, 2.8vw, 12.5px);
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: clamp(120px, 35vw, 180px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.p-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: clamp(8px, 2.2vw, 10px);
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 1;
}

.p-role-badge.role-participant {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.22) 0%, rgba(255, 143, 0, 0.32) 100%);
  border: 1px solid rgba(255, 215, 0, 0.8);
  color: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.p-role-badge.role-viewer {
  background: linear-gradient(135deg, rgba(66, 165, 245, 0.18) 0%, rgba(21, 101, 192, 0.28) 100%);
  border: 1px solid rgba(100, 181, 246, 0.65);
  color: #90caf9;
  box-shadow: 0 0 6px rgba(33, 150, 243, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}