:root {
  --board-max-width: 650px;
  --board-margin: 5px;

  --board-width: min(var(--board-max-width), calc(100vw - (var(--board-margin) * 2)));
  --cell-width: calc(var(--board-width) / 15);

  --board-bg: white;
  --red: red;
  --green: #07c107;
  --yellow: rgb(255 209 0);
  --blue: #2311db;
  --cell-border-color: rgb(216, 216, 216);

  --dash-gap: 14px;

  /* timings */
  --roll-ms: 820ms;
  --step-ms: 120ms;
  --kill-step-ms: 115ms;
  --pawn-ease: cubic-bezier(.2, .9, .2, 1);

  /* timer + border */
  --turn-ms: 15000ms;
  --dash-border: 4px;
  --dash-radius: 14px;

  /* topbar */
  --topbar-h: 52px;
  --glass: rgba(10, 15, 40, .55);

  /* ✅ board rotate (ME color অনুযায়ী সেট হবে) */
  --board-rot: 0deg;
}

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

html,
body {
  width: 100%;
  height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  background: url("../assets/img/bg.jpg") no-repeat center center fixed;
  background-size: cover;
  font-family: 'Bangers', cursive;
  color: white;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

main {
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--board-margin);
  padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 12px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* ✅ TOP BAR */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.topbar .topbar-inner {
  pointer-events: auto;
  width: min(920px, calc(100vw - 16px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 16px;
  background: var(--glass);
  border: 2px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .30);
}

.top-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .10);
  border: 2px solid rgba(255, 255, 255, .18);
  min-width: 0;
}

.top-chip .label {
  font-size: 13px;
  letter-spacing: 1px;
  opacity: .95;
  white-space: nowrap;
}

.top-chip .value {
  font-size: 17px;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-mid {
  flex: 1;
  justify-content: center;
}

.tk {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 209, 0, .22);
  border: 2px solid rgba(255, 209, 0, .35);
  color: #ffd500;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.top-right {
  justify-content: flex-end;
  gap: 10px;
}

.timebox {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.timebox .t1 {
  font-size: 12px;
  letter-spacing: 1px;
  opacity: .9;
}

.timebox .t2 {
  font-size: 17px;
  letter-spacing: 1px;
}

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

.dot-live {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #00ff66;
  box-shadow: 0 0 18px rgba(0, 255, 102, .85);
  animation: livePulse 1.1s ease-in-out infinite;
}

@keyframes livePulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.45);
    opacity: .7;
  }
}

.board-wrap {
  position: relative;
  width: var(--board-width);
  margin: 0 auto;
  padding-top: 118px;
  padding-bottom: 118px;
}

/* ✅ EXIT TAB (left-mid) */
.exit-tab {
  position: absolute;
  left: -10px;
  top: calc(118px + 18px);
  z-index: 25;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, .88);
  background: rgba(10, 15, 40, .78);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}

.exit-tab:active {
  transform: translateY(1px);
}

.exit-tab svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25));
}

.exit-tab .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 80, 80, .95);
  border: 2px solid rgba(255, 255, 255, .85);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
}

.exit-tab.has-selection .badge {
  display: flex;
}

/* ✅ MESSAGE TAB (left-bottom) */
.msg-tab {
  position: absolute;
  left: -10px;
  bottom: calc(118px + 14px);
  z-index: 25;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, .88);
  background: rgba(10, 15, 40, .78);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}

.msg-tab:active {
  transform: translateY(1px);
}

.msg-tab svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25));
}

.msg-tab .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 255, 102, .95);
  border: 2px solid rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
}

.board {
  width: var(--board-width);
  height: var(--board-width);
  background: var(--board-bg);
  border-radius: 10px;
  outline: 4px solid white;
  position: relative;
  z-index: 2;
  margin: 10px auto;
  transform: rotate(var(--board-rot));
  transform-origin: 50% 50%;
  transition: transform .25s ease;
}

.red {
  background: var(--red);
}

.green {
  background: var(--green);
}

.blue {
  background: var(--blue);
}

.yellow {
  background: var(--yellow);
}

.section {
  display: flex;
  width: 100%;
}

.private {
  width: calc(var(--cell-width) * 6);
  height: calc(var(--cell-width) * 6);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.private .cells {
  background: white;
  width: calc(var(--cell-width) * 4);
  height: calc(var(--cell-width) * 4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

.private .cell {
  width: var(--cell-width);
  height: var(--cell-width);
  border-radius: 50%;
  margin: 10px;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}

.cells {
  display: flex;
  flex-wrap: wrap;
}

.cells .cell {
  width: var(--cell-width);
  height: var(--cell-width);
  border: 1px solid var(--cell-border-color);
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}

.cells .cell.star {
  background: url("../assets/img/star.png") center/80% no-repeat;
}

/* center */
.section.section-2 .homes {
  width: calc(var(--cell-width) * 3);
  height: calc(var(--cell-width) * 3);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: conic-gradient(from -45deg,
      var(--green) 0deg 90deg,
      var(--yellow) 90deg 180deg,
      var(--blue) 180deg 270deg,
      var(--red) 270deg 360deg);
  box-shadow: none;
  pointer-events: none;
}

.section.section-2 .homes::after {
  content: none;
}

.homes .home-slot {
  position: absolute;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  padding: 2px;
  width: 33.333%;
  height: 33.333%;
  visibility: hidden;
}

.homes .home-slot .pawn {
  visibility: visible;
}

.homes .home-slot.red {
  left: 0;
  top: 33.333%;
}

.homes .home-slot.green {
  left: 33.333%;
  top: 0;
}

.homes .home-slot.yellow {
  left: 66.666%;
  top: 33.333%;
}

.homes .home-slot.blue {
  left: 33.333%;
  top: 66.666%;
}

.homes .home-slot .cell {
  width: 100%;
  height: 100%;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  position: relative;
  overflow: visible;
}

/* pawn */
.pawn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  z-index: 10;
  will-change: transform;
  pointer-events: auto;
  transition: transform var(--step-ms) var(--pawn-ease);
}

.pawn img {
  width: 90%;
  height: auto;
  display: block;
}

.pawn img {
  transform: rotate(calc(0deg - var(--board-rot)));
}


.pawn.highlight {
  cursor: pointer;
  z-index: 999;
}

/* ✅ UPDATED: pawn highlight ring => dice highlight মতোই */
.pawn.highlight::after {
  content: '';
  position: absolute;
  inset: 6%;
  border: 5px dashed #000;
  border-radius: 999px;
  animation: highlightDice .5s ease-out infinite alternate-reverse;
  pointer-events: none;
  z-index: 999;
  box-shadow: 0px 0px 26px 5px #ffd500;
}

/* dashboards */
.dashboards {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
}

.dashboards.top {
  top: 0;
}

.dashboards.bottom {
  bottom: 0;
}

.dash-row {
  display: flex;
  justify-content: space-between;
  gap: 0;
  padding: var(--dash-gap);
  pointer-events: auto;
}

.dashboard {
  max-width: calc((var(--board-width) - (var(--dash-gap) * 2) - 14px) / 2);
  height: 96px;
  min-height: 96px;
  overflow: hidden;
  border: none;
  border-radius: var(--dash-radius);
  background: rgba(35, 17, 219, .92);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  position: relative;
  pointer-events: auto;
}

.dashboard[data-player="red"] {
  background: rgba(255, 0, 0, .88) !important;
}

.dashboard[data-player="green"] {
  background: rgba(7, 193, 7, .88) !important;
}

.dashboard[data-player="blue"] {
  background: rgba(35, 17, 219, .92) !important;
}

.dashboard[data-player="yellow"] {
  background: rgba(255, 209, 0, .92) !important;
  color: #111 !important;
}

.dashboard[data-player="yellow"] .dice-section {
  background: rgba(0, 0, 0, .18) !important;
}

.dash-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  position: relative;
  z-index: 6;
}

.player {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.player-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  flex-shrink: 0;
}

.avatar {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, .95);
  overflow: hidden;
  background: rgba(255, 255, 255, .15);
}

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

.pname {
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.lives {
  display: flex;
  gap: 3px;
  margin-top: 1px;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.life-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .25);
  border: 2px solid rgba(255, 255, 255, .6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.life-dot.on {
  background: #00ff66;
  border-color: rgba(255, 255, 255, .85);
}

.life-dot.off {
  background: rgba(255, 60, 60, .9);
  border-color: rgba(255, 255, 255, .55);
  opacity: .85;
}

.turn-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.turn-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ring-base {
  fill: none;
  stroke: #fff;
  stroke-width: var(--dash-border);
  stroke-linejoin: round;
  stroke-linecap: butt;
}

.ring-progress {
  fill: none;
  stroke: #00ff66;
  stroke-width: var(--dash-border);
  stroke-linejoin: round;
  stroke-linecap: butt;
  opacity: 0;
}

.dashboard.is-turn .ring-progress {
  opacity: 1;
}

/* Dice Section */
.dice-section {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  border: 4px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .12);
  position: relative;
  touch-action: manipulation;
  flex-shrink: 0;
  cursor: pointer;
  overflow: visible;
}

/* ✅ Added: dice-section can-move glow (script toggles this) */
.dice-section.can-move {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .20), 0 0 26px 10px rgba(255, 213, 0, .45);
  transform: translateZ(0);
}

.dice {
  width: 80%;
  height: 80%;
  background-image: url("../assets/img/diceValues.png");
  background-size: 600% 100%;
  background-position: 0% 0%;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .18s ease, transform .18s ease;
  will-change: transform, background-position;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25));
  position: relative;
  z-index: 5;
}

.dashboard.is-turn .dice {
  opacity: 1;
  transform: scale(1);
}

.dashboard:not(.is-turn) .dice-section {
  pointer-events: none;
  opacity: .95;
}

.dashboard.is-turn .dice-section {
  pointer-events: auto;
}

.dice.rolling {
  animation: ludoRoll var(--roll-ms) cubic-bezier(.14, .92, .22, 1) 1;
}

@keyframes ludoRoll {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  20% {
    transform: translate3d(0, -12px, 0) rotate(200deg) scale(1.08);
  }

  45% {
    transform: translate3d(0, -24px, 0) rotate(420deg) scale(1.12);
  }

  70% {
    transform: translate3d(0, -10px, 0) rotate(620deg) scale(1.05);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(820deg) scale(1);
  }
}

.dice.face-1 {
  background-position: 0% 0%;
}

.dice.face-2 {
  background-position: 20% 0%;
}

.dice.face-3 {
  background-position: 40% 0%;
}

.dice.face-4 {
  background-position: 60% 0%;
}

.dice.face-5 {
  background-position: 80% 0%;
}

.dice.face-6 {
  background-position: 100% 0%;
}

.dice-section.highlight::before {
  content: '';
  position: absolute;
  inset: 6%;
  border: 5px dashed #000;
  border-radius: 999px;
  animation: highlightDice .5s ease-out infinite alternate-reverse;
  pointer-events: none;
  z-index: 2;
}

@keyframes highlightDice {
  to {
    transform: scale(1.12);
    box-shadow: 0px 0px 30px 6px #ffd500;
  }
}

.winner-badge {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  object-fit: contain;
  display: none;
  z-index: 6;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .25));
  pointer-events: none;
}

.dice-section.is-winner .dice {
  display: none !important;
}

.dice-section.is-winner .winner-badge {
  display: block !important;
}

.dice-section.is-autoexit .dice {
  display: none !important;
}

.dice-section.is-autoexit .winner-badge {
  display: block !important;
}

.dashboard.is-autoexit .dice-section {
  pointer-events: none !important;
  opacity: .9;
}

@media (max-width:420px) {
  :root {
    --topbar-h: 48px;
  }

  main {
    padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 10px);
  }

  .topbar .topbar-inner {
    padding: 7px 9px;
    border-radius: 14px;
    gap: 7px;
  }

  .top-chip {
    padding: 6px 8px;
    border-radius: 12px;
  }

  .top-chip .label {
    font-size: 12px;
  }

  .top-chip .value {
    font-size: 16px;
  }

  .timebox .t2 {
    font-size: 16px;
  }

  .board-wrap {
    padding-top: 112px;
    padding-bottom: 112px;
  }

  .dashboard {
    height: 82px;
    min-height: 82px;
  }

  .dash-inner {
    padding: 5px 7px;
  }

  .dice-section {
    width: 70px;
    height: 70px;
  }

  .avatar {
    width: 50px;
    height: 50px;
  }

  .life-dot {
    width: 6px;
    height: 6px;
  }

  .player-left {
    gap: 2px;
    padding: 3px;
  }

  .pname {
    font-size: 14px;
  }

  .exit-tab {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    left: -8px;
    top: calc(112px + 16px);
  }

  .exit-tab svg {
    width: 20px;
    height: 20px;
  }

  .msg-tab {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    left: -8px;
    bottom: calc(112px + 12px);
  }

  .msg-tab svg {
    width: 20px;
    height: 20px;
  }
}

/* overlays */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
}

.overlay.show {
  display: flex;
}
/* ✅ FIX: CONNECTING overlay show থাকলেও যেন board/dice touch ব্লক না করে */
.overlay { pointer-events: auto; }
.overlay.connecting { pointer-events: none; }
.overlay.connecting .connecting-panel { pointer-events: auto; }


.waiting-panel {
  width: min(520px, 92vw);
  background: rgba(10, 15, 40, .92);
  border: 4px solid rgba(255, 255, 255, .85);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  padding: 16px;
}

.waiting-title {
  font-size: 28px;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 12px;
}

.ready-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

.ready-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
}

.ready-row .r-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .85);
  flex-shrink: 0;
}

.ready-row .r-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ready-row .r-name {
  font-size: 18px;
  letter-spacing: 1px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill {
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .18);
  letter-spacing: 1px;
}

.pill.on {
  background: rgba(0, 255, 120, .18);
  border-color: rgba(0, 255, 120, .45);
}

.pill.off {
  background: rgba(255, 80, 80, .16);
  border-color: rgba(255, 80, 80, .45);
}

.btn {
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  color: #111;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .22);
  flex-shrink: 0;
}

.btn:active {
  transform: translateY(1px);
}

.btn.secondary {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .45);
}

.start-banner {
  width: min(560px, 92vw);
  text-align: center;
  font-size: 44px;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 10px 25px rgba(0, 0, 0, .45);
  animation: popIn .25s ease-out both;
}

@keyframes popIn {
  from {
    transform: scale(.85);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.overlay.result {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, .58);
}

.result-sheet {
  width: 100%;
  max-width: 680px;
  background: rgba(10, 15, 40, .96);
  border: 4px solid rgba(255, 255, 255, .82);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  padding: 16px 14px 18px;
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .45);
  transform: translateY(8px);
  animation: sheetUp .26s ease-out both;
}

@keyframes sheetUp {
  from {
    transform: translateY(22px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.result-title {
  font-size: 28px;
  letter-spacing: 2px;
}

.result-sub {
  font-size: 14px;
  opacity: .9;
  letter-spacing: 1px;
}

.result-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07);
}

.result-rank {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .15);
  border: 2px solid rgba(255, 255, 255, .22);
  font-size: 18px;
  flex-shrink: 0;
}

.result-item .r-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .85);
  flex-shrink: 0;
}

.result-item .r-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-name {
  flex: 1;
  font-size: 18px;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-coin {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  letter-spacing: 1px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .22);
  background: rgba(0, 0, 0, .15);
  flex-shrink: 0;
}

.result-meta {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 2px solid rgba(255, 255, 255, .14);
  font-size: 16px;
  letter-spacing: 1px;
  opacity: .95;
}

.result-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ✅ SHEETS */
.overlay.sheet {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, .55);
}

.sheet-panel {
  width: 100%;
  max-width: 680px;
  background: rgba(10, 15, 40, .96);
  border: 4px solid rgba(255, 255, 255, .82);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  padding: 14px 14px 16px;
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .45);
  transform: translateY(12px);
  animation: sheetUp .22s ease-out both;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.sheet-title {
  font-size: 24px;
  letter-spacing: 2px;
}

.sheet-sub {
  font-size: 13px;
  letter-spacing: 1px;
  opacity: .9;
  margin-top: 2px;
}

.sheet-close {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
}

.sheet-close:active {
  transform: translateY(1px);
}

.kick-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  max-height: 52vh;
  overflow: auto;
  padding-right: 4px;
}

.kick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07);
}

.kick-item .k-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .85);
  flex-shrink: 0;
}

.kick-item .k-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kick-item .k-name {
  flex: 1;
  font-size: 18px;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kick-item .k-tag {
  font-size: 13px;
  letter-spacing: 1px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .20);
  background: rgba(0, 0, 0, .14);
  opacity: .95;
  flex-shrink: 0;
}

.kick-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: #00ff66;
  cursor: pointer;
}

.sheet-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 2px solid rgba(255, 255, 255, .14);
  padding-top: 12px;
}

.confirm-box {
  width: min(520px, 92vw);
  background: rgba(10, 15, 40, .95);
  border: 4px solid rgba(255, 255, 255, .85);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  padding: 16px;
}

.confirm-title {
  font-size: 26px;
  letter-spacing: 2px;
  text-align: center;
}

.confirm-text {
  font-size: 15px;
  letter-spacing: 1px;
  opacity: .92;
  text-align: center;
  margin-top: 10px;
}

.confirm-list {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.chip {
  padding: 7px 10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .10);
  font-size: 14px;
  letter-spacing: 1px;
}

.confirm-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ✅ MESSAGE LIST ITEM */
.msg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
  user-select: none;
}

.msg-item:active {
  transform: translateY(1px);
}

.msg-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .22);
  background: rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.msg-text {
  flex: 1;
  font-size: 18px;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-hint {
  font-size: 12px;
  letter-spacing: 1px;
  opacity: .85;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .14);
  flex-shrink: 0;
}

.dot-live {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #00ff66;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(0, 255, 102, .55);
  animation: dotPulse 1.2s infinite;
  margin-right: 8px;
}

@keyframes dotPulse {
  0% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(0, 255, 102, .55)
  }

  70% {
    transform: scale(1.2);
    box-shadow: 0 0 0 12px rgba(0, 255, 102, 0)
  }

  100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(0, 255, 102, 0)
  }
}

/* ✅ Highlight ME in Result List */
.result-item.is-me {
  border: 2px solid #ffd500;
  background: rgba(255, 213, 0, 0.2);
}

.result-item.is-me .result-name {
  color: #ffd500;
  font-weight: bold;
}

/* ✅ Result sheet theme by state */
.result-sheet.state-win {
  border: 2px solid rgba(0, 255, 102, .8);
  box-shadow: 0 0 0 2px rgba(0, 255, 102, .25), 0 16px 60px rgba(0, 255, 102, .18);
}

.result-sheet.state-left {
  border: 2px solid rgba(255, 42, 42, .85);
  box-shadow: 0 0 0 2px rgba(255, 42, 42, .25), 0 16px 60px rgba(255, 42, 42, .18);
}

.result-sheet.state-lose {
  border: 2px solid rgba(160, 160, 160, .55);
  box-shadow: 0 0 0 2px rgba(160, 160, 160, .18), 0 16px 60px rgba(0, 0, 0, .18);
}

/* ✅✅ FIX: dashboard hide করলে layout collapse হবে না */
.dashboard.dash-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ===============================
   AWESOME COUNTDOWN PILL (WAITING)
================================= */

.countdown-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin: 10px auto 0;
  padding: 10px 16px;

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);

  background: linear-gradient(135deg,
      rgba(10, 20, 35, .65),
      rgba(10, 20, 35, .30));

  color: rgba(255, 255, 255, .92);
  font-weight: 700;
  letter-spacing: .4px;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 18px 45px rgba(0, 0, 0, .35),
    0 0 25px rgba(0, 255, 102, .12);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transform: translateZ(0);
  overflow: hidden;
  isolation: isolate;
}

/* glowing ring */
.countdown-pill::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: conic-gradient(from 180deg,
      rgba(0, 255, 102, .0),
      rgba(0, 255, 102, .55),
      rgba(255, 213, 0, .40),
      rgba(255, 42, 42, .55),
      rgba(0, 255, 102, .0));
  filter: blur(10px);
  opacity: .55;
  z-index: -2;
  animation: spinGlow 3.2s linear infinite;
}

@keyframes spinGlow {
  to {
    transform: rotate(360deg);
  }
}

/* shimmer sweep */
.countdown-pill::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 60%;
  height: 220%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .22),
      transparent);
  transform: rotate(18deg);
  z-index: -1;
  animation: shimmer 2.6s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-120%) rotate(18deg);
    opacity: .0;
  }

  25% {
    opacity: .25;
  }

  50% {
    opacity: .20;
  }

  100% {
    transform: translateX(260%) rotate(18deg);
    opacity: 0;
  }
}

/* tiny live dot */
.countdown-pill .live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00ff66;
  box-shadow: 0 0 0 4px rgba(0, 255, 102, .18), 0 0 14px rgba(0, 255, 102, .65);
  animation: pulseDot 1.2s ease-in-out infinite;
}

@keyframes pulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: .85;
  }

  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

/* time text look */
.countdown-pill .time {
  font-family: "Bangers", system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  text-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* urgent state (last 30 sec) */
.countdown-pill.is-urgent {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 18px 45px rgba(0, 0, 0, .35),
    0 0 34px rgba(255, 42, 42, .22);
}

.countdown-pill.is-urgent .live-dot {
  background: #ff2a2a;
  box-shadow: 0 0 0 4px rgba(255, 42, 42, .18), 0 0 16px rgba(255, 42, 42, .75);
}

/* expired state */
.countdown-pill.is-expired {
  opacity: .75;
  filter: grayscale(.25);
}

#waitingCountdownText {
  display: inline-flex;
}

.waiting-panel {
  text-align: center;
}
 /* ✅ Highlight ME in Result List */
    .result-item.is-me {
      border: 2px solid #ffd500;
      background: rgba(255, 213, 0, 0.2);
    }

    .result-item.is-me .result-name {
      color: #ffd500;
      font-weight: bold;
    }

    /* ✅ Result sheet theme by state */
    .result-sheet.state-win {
      border: 2px solid rgba(0, 255, 102, .8);
      box-shadow: 0 0 0 2px rgba(0, 255, 102, .25), 0 16px 60px rgba(0, 255, 102, .18);
    }

    .result-sheet.state-left {
      border: 2px solid rgba(255, 42, 42, .85);
      box-shadow: 0 0 0 2px rgba(255, 42, 42, .25), 0 16px 60px rgba(255, 42, 42, .18);
    }

    .result-sheet.state-lose {
      border: 2px solid rgba(160, 160, 160, .55);
      box-shadow: 0 0 0 2px rgba(160, 160, 160, .18), 0 16px 60px rgba(0, 0, 0, .18);
    }

    /* ✅✅ FIX: dashboard hide করলে layout collapse হবে না */
    .dashboard.dash-hidden {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }
    
    /* ===========================
   ✅ TOP REFRESH BADGE
=========================== */
.refresh-badge{
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  cursor: pointer;
  padding: 0;
}
.refresh-badge svg{
  width: 22px;
  height: 22px;
}

/* ===========================
   ✅ CONNECTING OVERLAY
=========================== */
.overlay.connecting{
  z-index: 9999; /* above everything */
}
.connecting-panel{
  width: min(360px, 92vw);
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  text-align: center;
}
.connecting-title{
  font-family: 'Bangers', system-ui, sans-serif;
  font-size: 34px;
  letter-spacing: 1px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.connecting-sub{
  margin-top: 8px;
  color: rgba(255,255,255,.85);
  font-size: 14px;
}

/* dots animation */
.dots{
  display: inline-flex;
  gap: 6px;
  transform: translateY(4px);
}
.dots i{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  display: inline-block;
  animation: dotPulse 1.1s infinite ease-in-out;
}
.dots i:nth-child(2){ animation-delay: .15s; }
.dots i:nth-child(3){ animation-delay: .30s; }

@keyframes dotPulse{
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-6px); opacity: 1; }
}