* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 58% 45%, rgba(113,54,211,0.16), transparent 34%),
    #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.site-header {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 1840px;
  height: 70px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
  background: rgba(35, 36, 52, 0.94);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.32);
  backdrop-filter: blur(10px);
}

.brand-link {
  width: 134px;
  min-width: 134px;
  height: 70px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.brand-link img {
  height: 44px;
  width: auto;
  max-width: 128px;
  object-fit: contain;
  display: block;
}

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

.main-nav a {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 18px;
  border-radius: 9px;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
}

.main-nav a:hover,
.main-nav a:focus {
  background: rgba(255,255,255,0.09);
  outline: none;
}

/* Games dropdown */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
}

.nav-dropbtn {
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255,255,255,0.92);
  font-size: 18px;
  font-weight: 800;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.nav-dropbtn:hover,
.nav-dropbtn:focus {
  background: rgba(255,255,255,0.09);
  color: #ffffff;
  outline: none;
}

.nav-dropdown-menu {
  position: absolute;
  top: 54px;
  left: 0;
  min-width: 148px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(28,29,42,0.96);
  box-shadow: 0 14px 34px rgba(0,0,0,0.34);
  backdrop-filter: blur(10px);
  display: none;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block !important;
  height: auto !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
  background: rgba(255,255,255,0.09) !important;
  color: #ffffff !important;
}

/* Responsive game layout */
.carrom-page {
  --side-w: clamp(245px, 21vw, 350px);
  --page-gap: clamp(14px, 2.4vw, 54px);
  --top-safe: 94px;
  --bottom-safe: 16px;
  --board-size: min(
    calc(100vw - var(--side-w) - var(--page-gap) - 56px),
    calc(100vh - var(--top-safe) - var(--bottom-safe))
  );

  width: 100vw;
  height: 100vh;
  padding: var(--top-safe) 28px var(--bottom-safe);
  display: grid;
  grid-template-columns: var(--side-w) var(--board-size);
  gap: var(--page-gap);
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.side-panel {
  width: 100%;
  max-width: 360px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  background: rgba(0,0,0,0.58);
  box-shadow: 0 0 34px rgba(113,54,211,0.16);
}

.eyebrow {
  margin: 0 0 14px;
  color: rgba(255,255,255,0.70);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  line-height: 1.7;
}

h1 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 3.2vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  text-shadow:
    0 0 8px rgba(255,255,255,0.22),
    0 0 24px rgba(113,54,211,0.45);
}

.subtext {
  margin: 0 0 24px;
  color: rgba(255,255,255,0.76);
  line-height: 1.6;
}

.score-box {
  margin: 0 0 22px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
}

.score-box p {
  margin: 7px 0;
  color: rgba(255,255,255,0.86);
  font-weight: 800;
}

#message {
  color: rgba(214,205,255,0.95);
}
.difficulty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 12px;
  color: rgba(255,255,255,0.86);
  font-weight: 800;
}

#difficultySelect {
  min-width: 120px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  background: rgba(0,0,0,0.52);
  color: #fff;
  padding: 8px 12px;
  font-weight: 800;
  outline: none;
}

#difficultySelect option {
  background: #17171f;
  color: #fff;
}


button {
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 11px 18px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}

button:hover,
button:focus {
  background: rgba(113,54,211,0.24);
  outline: none;
}

.board-wrap {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  min-width: 0;
  min-height: 0;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#carromCanvas {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: clamp(12px, 2.8%, 22px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10),
    0 0 44px rgba(113,54,211,0.20);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}


@media (max-width: 1200px), (max-height: 720px) {
  .site-header {
    top: 8px;
    height: 58px;
    padding: 0 16px;
    gap: 16px;
    border-radius: 9px;
  }

  .brand-link {
    width: 112px;
    min-width: 112px;
    height: 58px;
  }

  .brand-link img {
    height: 36px;
    max-width: 108px;
  }

  .main-nav a,
  .nav-dropbtn {
    height: 40px;
    padding: 0 12px;
    font-size: 15px;
  }

  .nav-dropdown {
    height: 40px;
  }

  .nav-dropdown-menu {
    top: 44px;
  }

  .carrom-page {
    --side-w: clamp(185px, 24vw, 265px);
    --page-gap: clamp(8px, 1.4vw, 22px);
    --top-safe: 74px;
    --bottom-safe: 8px;
    --board-size: min(
      calc(100vw - var(--side-w) - var(--page-gap) - 20px),
      calc(100vh - var(--top-safe) - var(--bottom-safe))
    );
    padding: var(--top-safe) 10px var(--bottom-safe);
    align-items: start;
    align-content: start;
  }

  .side-panel {
    max-height: calc(100vh - var(--top-safe) - var(--bottom-safe));
    overflow: hidden;
    padding: 14px;
    border-radius: 16px;
  }

  .eyebrow {
    margin-bottom: 8px;
    font-size: 0.58rem;
    letter-spacing: 0.20em;
  }

  h1 {
    margin-bottom: 10px;
    font-size: clamp(1.65rem, 3.6vw, 2.6rem);
  }

  .subtext {
    margin-bottom: 14px;
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .score-box {
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 14px;
  }

  .score-box p {
    margin: 5px 0;
    font-size: 0.88rem;
  }

  .difficulty-row {
    gap: 8px;
    margin: 8px 0 10px;
    font-size: 0.86rem;
  }

  #difficultySelect {
    min-width: 96px;
    padding: 7px 10px;
    font-size: 0.82rem;
  }

  .action-row {
    gap: 7px;
  }

  button {
    padding: 9px 13px;
    font-size: 0.76rem;
  }
}

@media (max-height: 560px) and (min-width: 761px) {
  .site-header {
    height: 50px;
  }

  .brand-link {
    height: 50px;
    width: 98px;
    min-width: 98px;
  }

  .brand-link img {
    height: 31px;
    max-width: 94px;
  }

  .main-nav a,
  .nav-dropbtn {
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
  }

  .nav-dropdown {
    height: 34px;
  }

  .carrom-page {
    --top-safe: 62px;
    --side-w: clamp(170px, 23vw, 225px);
  }

  .side-panel {
    padding: 10px;
  }

  .eyebrow,
  .subtext {
    display: none;
  }

  h1 {
    margin-bottom: 8px;
    font-size: clamp(1.35rem, 3vw, 2rem);
  }

  .score-box {
    padding: 9px;
    margin-bottom: 9px;
  }

  .score-box p,
  .difficulty-row {
    font-size: 0.78rem;
    margin: 4px 0;
  }

  #difficultySelect {
    min-width: 82px;
    padding: 6px 8px;
    font-size: 0.74rem;
  }

  button {
    padding: 7px 9px;
    font-size: 0.66rem;
  }
}

@media (max-width: 900px) {
  html,
  body {
    overflow: hidden;
  }

  .carrom-page {
    --top-safe: 76px;
    --bottom-safe: 10px;
    --board-size: min(calc(100vw - 18px), calc(100vh - var(--top-safe) - 136px));

    height: 100vh;
    padding: var(--top-safe) 9px var(--bottom-safe);
    grid-template-columns: 1fr;
    grid-template-rows: auto var(--board-size);
    gap: 8px;
    align-content: start;
    justify-items: center;
    overflow: hidden;
  }

  .side-panel {
    width: min(94vw, 680px);
    max-width: none;
    text-align: center;
    margin: 0 auto;
    padding: 10px 12px;
    border-radius: 14px;
  }

  .eyebrow,
  .subtext {
    display: none;
  }

  h1 {
    margin-bottom: 8px;
    font-size: clamp(1.45rem, 6vw, 2.15rem);
  }

  .score-box {
    margin: 0;
    padding: 8px 10px;
  }

  .score-box p {
    margin: 3px 0;
    font-size: 0.92rem;
  }

  .action-row {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .site-header {
    top: 8px;
    width: calc(100% - 16px);
    height: 58px;
    padding: 0 12px;
    gap: 10px;
  }

  .brand-link {
    width: 104px;
    min-width: 104px;
    height: 58px;
  }

  .brand-link img {
    height: 34px;
    max-width: 100px;
  }

  .main-nav {
    gap: 4px;
  }

  .main-nav a,
  .nav-dropbtn {
    height: 40px;
    padding: 0 9px;
    font-size: 13px;
  }

  .nav-dropdown {
    height: 40px;
  }

  .nav-dropdown-menu {
    top: 44px;
    min-width: 120px;
  }

  .nav-dropdown-menu a {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }

  .side-panel {
    padding: 10px 12px;
  }
}

.action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.placement-controls {
  position: absolute;
  left: 50%;
  bottom: 2.2%;
  transform: translateX(-50%);
  width: 70%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  z-index: 3;
}

.placement-controls.is-hidden {
  display: none;
}

.placement-controls span {
  pointer-events: none;
  display: block;
  margin-bottom: clamp(2px, calc(var(--board-size) * 0.007), 7px);
  color: rgba(255,255,255,0.95);
  font-size: clamp(12px, calc(var(--board-size) * 0.026), 22px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
  line-height: 1;
}

.placement-slider-row {
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr clamp(30px, calc(var(--board-size) * 0.055), 44px);
  align-items: center;
  gap: clamp(5px, calc(var(--board-size) * 0.012), 10px);
}

#strikerSlider {
  pointer-events: auto;
  width: 100%;
  height: clamp(30px, calc(var(--board-size) * 0.060), 46px);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

#strikerSlider::-webkit-slider-runnable-track {
  height: clamp(5px, calc(var(--board-size) * 0.011), 8px);
  border-radius: 999px;
  background: #109ee8;
  border: 0;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.20),
    0 0 10px rgba(20,170,255,0.55);
}

#strikerSlider::-moz-range-track {
  height: clamp(5px, calc(var(--board-size) * 0.011), 8px);
  border-radius: 999px;
  background: #109ee8;
  border: 0;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.20),
    0 0 10px rgba(20,170,255,0.55);
}

#strikerSlider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: clamp(32px, calc(var(--board-size) * 0.064), 49px);
  height: clamp(32px, calc(var(--board-size) * 0.064), 49px);
  margin-top: calc((clamp(5px, calc(var(--board-size) * 0.011), 8px) - clamp(32px, calc(var(--board-size) * 0.064), 49px)) / 2);
  border-radius: 50%;
  border: clamp(2px, calc(var(--board-size) * 0.004), 3px) solid rgba(36,68,150,0.95);
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.70) 0 10%, transparent 11%),
    linear-gradient(#9cc3ff, #6594ee 48%, #4b73d6);
  box-shadow:
    inset 0 0 0 4px rgba(235,243,255,0.35),
    0 4px 12px rgba(0,0,0,0.45),
    0 0 12px rgba(125,175,255,0.55);
}

#strikerSlider::-moz-range-thumb {
  width: clamp(32px, calc(var(--board-size) * 0.064), 49px);
  height: clamp(32px, calc(var(--board-size) * 0.064), 49px);
  border-radius: 50%;
  border: clamp(2px, calc(var(--board-size) * 0.004), 3px) solid rgba(36,68,150,0.95);
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.70) 0 10%, transparent 11%),
    linear-gradient(#9cc3ff, #6594ee 48%, #4b73d6);
  box-shadow:
    inset 0 0 0 4px rgba(235,243,255,0.35),
    0 4px 12px rgba(0,0,0,0.45),
    0 0 12px rgba(125,175,255,0.55);
}


.placement-back-btn {
  pointer-events: auto;
  width: clamp(30px, calc(var(--board-size) * 0.055), 44px);
  height: clamp(30px, calc(var(--board-size) * 0.055), 44px);
  min-width: clamp(30px, calc(var(--board-size) * 0.055), 44px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #cf00b9;
  color: #ffffff;
  font-size: clamp(19px, calc(var(--board-size) * 0.035), 28px);
  line-height: 1;
  display: grid;
  place-items: center;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 0 12px rgba(207,0,185,0.45);
}

.placement-back-btn:hover,
.placement-back-btn:focus {
  background: #e315cd;
}

.placement-back-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#strikerSlider:disabled {
  opacity: 0.65;
}

@media (max-width: 900px) {
  .side-panel {
    padding: 10px 12px;
  }

  .action-row {
    display: flex;
    justify-content: center;
    margin-top: 8px;
  }

  #resetBtn {
    padding: 8px 14px;
    font-size: 0.72rem;
  }
}


/* Keep slider hidden during aim/power, but preserve the original control layout.
   This keeps the ↩ button on the right side and away from the centered power selector. */
.placement-controls.hide-slider {
  pointer-events: none;
}

.placement-controls.hide-slider > span {
  visibility: hidden;
}

.placement-controls.hide-slider #strikerSlider {
  pointer-events: auto;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.placement-controls.hide-slider .placement-slider-row {
  pointer-events: none;
  display: grid !important;
  grid-template-columns: 1fr clamp(30px, calc(var(--board-size) * 0.055), 44px) !important;
  align-items: center;
  gap: clamp(5px, calc(var(--board-size) * 0.012), 10px);
  width: 100%;
  pointer-events: none;
}

.placement-controls.hide-slider .placement-back-btn {
  pointer-events: auto;
  grid-column: 2;
  justify-self: end;
  display: inline-grid !important;
  pointer-events: auto;
}


#carromCanvas,
.board-wrap {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.test-3d-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06);
}


.board-wrap {
  position: relative;
}

#carrom3DCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 18px;
  pointer-events: none;
}

#carromCanvas {
  position: relative;
  z-index: 2;
  background: transparent !important;
}


.carrom-3d-controls {
  position: absolute;
  top: 76px;
  right: 14px;
  z-index: 8;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

#toggle3DControls,
#reset3DAlign {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.26);
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,0.62);
  font-weight: 900;
  cursor: pointer;
}

.carrom-3d-panel {
  margin-top: 8px;
  width: min(340px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.35);
}

.carrom-3d-panel label {
  display: grid;
  grid-template-columns: 88px 1fr 52px;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  font-size: 12px;
  font-weight: 800;
}

.carrom-3d-panel input[type="range"] {
  width: 100%;
}

#reset3DAlign {
  width: 100%;
  margin-top: 8px;
  border-radius: 10px;
}


.carrom-3d-inline-panel {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
}

.carrom-3d-inline-title {
  margin: 0 0 10px;
  color: rgba(255,255,255,0.92);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.inline-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  color: rgba(255,255,255,0.86);
  font-size: 0.78rem;
  font-weight: 850;
}

.inline-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #7f6cff;
}

.inline-3d-row {
  display: grid;
  grid-template-columns: 82px 1fr 48px;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
  color: rgba(255,255,255,0.80);
  font-size: 0.72rem;
  font-weight: 850;
}

.inline-3d-row input[type="range"] {
  width: 100%;
}

.inline-3d-row span {
  text-align: right;
  color: rgba(220,213,255,0.95);
  font-size: 0.70rem;
  font-weight: 900;
}

.inline-reset-3d {
  width: 100%;
  margin-top: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.68rem;
}

body.carrom-3d-disabled #carrom3DCanvas {
  display: none !important;
}

body.carrom-2d-overlay #carromCanvas {
  background: transparent !important;
}

.carrom-3d-controls {
  display: none !important;
}


.piece-3d-readout {
  margin: 8px 0 0;
  color: rgba(255,255,255,0.62);
  font-size: 0.66rem;
  line-height: 1.35;
  word-break: break-word;
}


.carrom-3d-inline-panel {
  max-height: 44px;
  overflow: visible;
  padding: 0;
  background: transparent;
  border: 0;
  margin: 0 0 12px;
}

.carrom-3d-inline-panel[open] {
  max-height: 70vh;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(0,0,0,0.50);
}

.carrom-3d-inline-panel > summary.carrom-3d-inline-title {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.carrom-3d-inline-panel > summary.carrom-3d-inline-title::-webkit-details-marker {
  display: none;
}

.carrom-3d-inline-panel > summary.carrom-3d-inline-title::after {
  content: "▾";
  margin-left: 8px;
  opacity: 0.8;
}

.carrom-3d-inline-panel[open] > summary.carrom-3d-inline-title {
  margin-bottom: 10px;
  border-radius: 12px;
}

.carrom-3d-inline-panel[open] > summary.carrom-3d-inline-title::after {
  content: "▴";
}

@media (max-height: 820px) {
  .carrom-3d-inline-panel[open] {
    max-height: 48vh;
  }
}


body:not(.carrom-2d-overlay) #carromCanvas {
  pointer-events: auto;
}

#carrom3DCanvas {
  pointer-events: none;
}


body.carrom-3d-active #carromCanvas {
  opacity: 0 !important;
}

body.carrom-3d-disabled #carromCanvas {
  opacity: 1 !important;
}

body.carrom-3d-active .placement-controls {
  z-index: 4;
}


body.carrom-3d-active.carrom-player-view #carromCanvas {
  opacity: 0 !important;
}

body.carrom-3d-active:not(.carrom-player-view) #carromCanvas,
body.carrom-3d-disabled #carromCanvas {
  opacity: 1 !important;
}

body.carrom-3d-active.carrom-player-view #carromCanvas {
  pointer-events: auto;
}

body.carrom-3d-active.carrom-player-view .placement-controls {
  z-index: 4;
}


@keyframes placementPulse {
  0% { opacity: 0.50; filter: drop-shadow(0 0 0 rgba(44,170,255,0)); }
  50% { opacity: 1.00; filter: drop-shadow(0 0 14px rgba(44,170,255,0.62)); }
  100% { opacity: 0.50; filter: drop-shadow(0 0 0 rgba(44,170,255,0)); }
}

.placement-controls.is-active-place {
  animation: placementPulse 1.45s ease-in-out infinite;
}

.placement-controls.is-active-place #strikerSlider::-webkit-slider-runnable-track {
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.20),
    0 0 16px rgba(20,170,255,0.82);
}

.placement-controls.is-active-place #strikerSlider::-moz-range-track {
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.20),
    0 0 16px rgba(20,170,255,0.82);
}


.calibration-disabled {
  display: none !important;
}

.camera-dpad {
  position: absolute;
  right: clamp(10px, calc(var(--board-size) * 0.025), 20px);
  bottom: clamp(10px, calc(var(--board-size) * 0.025), 20px);
  width: clamp(112px, calc(var(--board-size) * 0.18), 150px);
  height: clamp(112px, calc(var(--board-size) * 0.18), 150px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(4px, calc(var(--board-size) * 0.008), 7px);
  z-index: 8;
  pointer-events: none;
  opacity: 0.88;
}

.camera-btn {
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 12px;
  background: rgba(0,0,0,0.48);
  color: rgba(255,255,255,0.92);
  font-weight: 950;
  font-size: clamp(14px, calc(var(--board-size) * 0.027), 22px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.32);
  backdrop-filter: blur(8px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.camera-btn:active,
.camera-btn.is-pressed {
  background: rgba(63,147,255,0.62);
  transform: translateY(1px);
}

.camera-btn-w { grid-column: 2; grid-row: 1; }
.camera-btn-a { grid-column: 1; grid-row: 2; }
.camera-btn-s { grid-column: 2; grid-row: 3; }
.camera-btn-d { grid-column: 3; grid-row: 2; }

body:not(.carrom-player-view) .camera-dpad,
body.carrom-3d-disabled .camera-dpad {
  display: none;
}


/* Optimized mode: no projected canvas texture. The 2D canvas is only a transparent HUD overlay. */
.calibration-disabled {
  display: none !important;
}

body.carrom-3d-active.carrom-player-view #carromCanvas,
body.carrom-3d-active:not(.carrom-player-view) #carromCanvas,
body.carrom-3d-disabled #carromCanvas {
  opacity: 1 !important;
  pointer-events: auto;
}

body.carrom-3d-active.carrom-player-view .placement-controls {
  z-index: 9;
}


/* Optimized HUD: power meter replaces the placement slider during power selection. */
.power-hud {
  pointer-events: none;
  display: none;
  grid-column: 1;
  align-self: center;
  width: 100%;
  padding: clamp(4px, calc(var(--board-size) * 0.009), 8px) clamp(6px, calc(var(--board-size) * 0.014), 12px);
  border-radius: 999px;
  background: rgba(0,0,0,0.46);
  box-shadow: 0 0 14px rgba(0,0,0,0.32);
}

.power-hud-track {
  width: 100%;
  height: clamp(9px, calc(var(--board-size) * 0.018), 15px);
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
}

.power-hud-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #68e16b, #ffe25c 55%, #ff4c4c);
  box-shadow: 0 0 12px rgba(255,220,80,0.55);
}

.power-hud-text {
  margin-top: clamp(2px, calc(var(--board-size) * 0.004), 4px);
  color: rgba(255,255,255,0.94);
  text-align: center;
  font-size: clamp(10px, calc(var(--board-size) * 0.018), 15px);
  font-weight: 950;
  letter-spacing: 0.10em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}

.placement-controls.is-power > span {
  visibility: hidden;
}

.placement-controls.is-power #strikerSlider {
  display: none !important;
}

.placement-controls.is-power .power-hud {
  display: block;
}

.placement-controls.is-power .placement-slider-row {
  display: grid !important;
  grid-template-columns: 1fr clamp(30px, calc(var(--board-size) * 0.055), 44px) !important;
}

.placement-controls.is-aim .power-hud,
.placement-controls.is-place .power-hud {
  display: none !important;
}

body.carrom-3d-active #carromCanvas {
  background: transparent !important;
}


/* Force no flat 2D coins/striker overlay in active 3D mode. */
body.carrom-3d-active #carromCanvas.no-2d-pieces {
  opacity: 1;
}


.carrom-tune-panel {
  width: min(100%, var(--board-size));
  margin: 0 auto 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(0,0,0,0.26);
  color: rgba(255,255,255,0.88);
  padding: 10px 12px;
  box-sizing: border-box;
}

.carrom-tune-panel summary {
  cursor: pointer;
  font-weight: 850;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tune-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 10px;
}

.tune-grid label {
  display: grid;
  grid-template-columns: 1fr minmax(90px, 45%) 52px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.tune-grid input[type="range"] {
  width: 100%;
}

.tune-grid span {
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.82;
}

@media (max-width: 720px) {
  .tune-grid {
    grid-template-columns: 1fr;
  }
}


/* Side tuning dropdown: active only for light + texture calibration. */
.carrom-tune-panel {
  position: fixed !important;
  right: 12px !important;
  top: 86px !important;
  width: min(330px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 110px) !important;
  overflow-y: auto !important;
  z-index: 80 !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
  background: rgba(6, 7, 12, 0.82) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(10px);
}

.carrom-tune-panel:not([open]) {
  width: auto !important;
  overflow: visible !important;
}

.carrom-tune-panel summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
}

.carrom-tune-panel summary::-webkit-details-marker {
  display: none;
}

.carrom-tune-panel summary::before {
  content: "⚙ ";
}

.carrom-tune-panel[open] summary {
  margin-bottom: 10px;
}

.carrom-tune-panel .tune-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  padding-right: 2px;
}

.carrom-tune-panel .tune-grid label {
  display: grid !important;
  grid-template-columns: 92px minmax(110px, 1fr) 54px !important;
  align-items: center;
  gap: 8px;
  font-size: 11px !important;
  line-height: 1.15;
}

.carrom-tune-panel .tune-grid input[type="range"] {
  width: 100%;
}

.carrom-tune-panel .tune-grid span {
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
  font-size: 11px;
}

@media (max-width: 780px) {
  .carrom-tune-panel {
    top: 8px !important;
    right: 8px !important;
    max-height: 46vh !important;
    width: min(320px, calc(100vw - 16px)) !important;
  }

  .carrom-tune-panel:not([open]) {
    width: auto !important;
  }
}


.tuning-backup-disabled {
  display: none !important;
}


/* Live game UI cleanup */
.hidden-debug-row,
.debug-row {
  display: none !important;
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}

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

.mode-select-overlay {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, calc(var(--board-size) * 0.045), 42px);
  pointer-events: auto;
  background: radial-gradient(circle at 50% 45%, rgba(18,14,30,0.40), rgba(0,0,0,0.60));
  border-radius: 18px;
  box-sizing: border-box;
}

.mode-select-overlay[hidden] {
  display: none !important;
}

.mode-select-card {
  width: min(92%, 560px);
  padding: clamp(18px, calc(var(--board-size) * 0.04), 34px);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 22px;
  background: rgba(8,8,14,0.72);
  box-shadow: 0 18px 60px rgba(0,0,0,0.48);
  backdrop-filter: blur(10px);
  text-align: center;
}

.mode-eyebrow {
  margin: 0 0 8px;
  color: rgba(255,255,255,0.72);
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: clamp(10px, calc(var(--board-size) * 0.016), 14px);
}

.mode-select-card h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(34px, calc(var(--board-size) * 0.075), 68px);
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(140,110,255,0.45);
}

.mode-button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, calc(var(--board-size) * 0.024), 18px);
}

.mode-ui-btn {
  min-height: clamp(70px, calc(var(--board-size) * 0.13), 112px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.10);
  color: #fff;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 12px 30px rgba(0,0,0,0.28);
}

.mode-ui-btn strong,
.mode-ui-btn span {
  display: block;
}

.mode-ui-btn strong {
  font-size: clamp(18px, calc(var(--board-size) * 0.035), 30px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mode-ui-btn span {
  margin-top: 6px;
  color: rgba(255,255,255,0.70);
  font-size: clamp(11px, calc(var(--board-size) * 0.018), 15px);
}

.mode-ui-btn:active {
  transform: translateY(1px);
  background: rgba(90,150,255,0.26);
}

/* Camera buttons: lower-left in 3D player view only. */
.camera-dpad {
  left: clamp(10px, calc(var(--board-size) * 0.025), 20px) !important;
  right: auto !important;
  bottom: clamp(10px, calc(var(--board-size) * 0.025), 20px) !important;
  z-index: 12 !important;
  width: clamp(118px, calc(var(--board-size) * 0.18), 155px) !important;
  height: clamp(92px, calc(var(--board-size) * 0.145), 128px) !important;
  opacity: 0.90;
}

.camera-btn-w { grid-column: 2 !important; grid-row: 1 !important; }
.camera-btn-a { grid-column: 1 !important; grid-row: 2 !important; }
.camera-btn-s { grid-column: 2 !important; grid-row: 2 !important; }
.camera-btn-d { grid-column: 3 !important; grid-row: 2 !important; }

body:not(.carrom-player-view) .camera-dpad,
body.carrom-3d-disabled .camera-dpad {
  display: none !important;
}

@media (hover: none), (max-width: 760px) {
  .camera-dpad {
    width: clamp(92px, calc(var(--board-size) * 0.18), 132px) !important;
    height: clamp(44px, calc(var(--board-size) * 0.09), 64px) !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: 1fr !important;
  }

  .camera-btn-w,
  .camera-btn-s {
    display: none !important;
  }

  .camera-btn-a { grid-column: 1 !important; grid-row: 1 !important; }
  .camera-btn-d { grid-column: 2 !important; grid-row: 1 !important; }
}

@media (max-width: 560px) {
  .mode-button-row {
    grid-template-columns: 1fr;
  }
}


/* D-pad moved out of the game frame into the info panel. */
.info-camera-dpad-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

.side-panel .camera-dpad.info-camera-dpad {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 154px !important;
  height: 104px !important;
  display: grid;
  grid-template-columns: repeat(3, 46px) !important;
  grid-template-rows: repeat(2, 46px) !important;
  gap: 6px !important;
  z-index: 1 !important;
  pointer-events: none;
  opacity: 0.95;
}

.side-panel .camera-dpad.info-camera-dpad .camera-btn {
  font-size: 17px;
  border-radius: 12px;
}

.side-panel .camera-dpad.info-camera-dpad .camera-btn-w { grid-column: 2 !important; grid-row: 1 !important; }
.side-panel .camera-dpad.info-camera-dpad .camera-btn-a { grid-column: 1 !important; grid-row: 2 !important; }
.side-panel .camera-dpad.info-camera-dpad .camera-btn-s { grid-column: 2 !important; grid-row: 2 !important; }
.side-panel .camera-dpad.info-camera-dpad .camera-btn-d { grid-column: 3 !important; grid-row: 2 !important; }

body:not(.carrom-player-view) .side-panel .camera-dpad.info-camera-dpad,
body.carrom-3d-disabled .side-panel .camera-dpad.info-camera-dpad {
  display: none !important;
}

@media (hover: none), (max-width: 760px) {
  .side-panel .camera-dpad.info-camera-dpad {
    width: 100px !important;
    height: 46px !important;
    grid-template-columns: repeat(2, 46px) !important;
    grid-template-rows: 46px !important;
  }

  .side-panel .camera-dpad.info-camera-dpad .camera-btn-w,
  .side-panel .camera-dpad.info-camera-dpad .camera-btn-s {
    display: none !important;
  }

  .side-panel .camera-dpad.info-camera-dpad .camera-btn-a { grid-column: 1 !important; grid-row: 1 !important; }
  .side-panel .camera-dpad.info-camera-dpad .camera-btn-d { grid-column: 2 !important; grid-row: 1 !important; }
}


/* Keep keyboard/mouse camera controls from showing ugly focus boxes over the slider UI. */
#strikerSlider:focus,
.camera-btn:focus,
.camera-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.32);
}

.camera-btn {
  -webkit-tap-highlight-color: transparent;
}


/* Dramatic/polished pass */
.carrom-page {
  background:
    radial-gradient(circle at 56% 38%, rgba(255,190,95,0.16), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.48) 100%),
    linear-gradient(135deg, #120806 0%, #060709 55%, #020204 100%);
}

.board-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 calc(var(--board-size) * 0.14) rgba(0,0,0,0.52),
    0 20px 70px rgba(0,0,0,0.46);
  z-index: 12;
}

.side-panel,
.score-box,
.mode-select-card,
.placement-controls {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)),
    rgba(7,8,12,0.72) !important;
  border: 1px solid rgba(255,219,160,0.16) !important;
  box-shadow:
    0 14px 40px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
}

.side-panel h1,
.mode-select-card h2 {
  text-shadow: 0 0 18px rgba(255,190,100,0.24);
}

.score-box p,
#message {
  color: rgba(255,246,230,0.88);
}

.mode-select-overlay {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,210,130,0.14), transparent 35%),
    rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(3px);
}

.mode-ui-btn {
  background:
    linear-gradient(180deg, rgba(255,216,150,0.18), rgba(105,46,20,0.22)),
    rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,225,170,0.22) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}

.mode-ui-btn:hover,
.mode-ui-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 14px 36px rgba(0,0,0,0.38),
    0 0 20px rgba(255,202,120,0.22);
}

.power-hud {
  min-width: min(300px, 54vw);
}

.power-hud-track {
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.65),
    0 0 16px rgba(255,185,80,0.12);
  border: 1px solid rgba(255,235,190,0.16);
}

.power-hud-fill {
  box-shadow:
    0 0 12px rgba(255,218,100,0.45),
    0 0 24px rgba(255,80,50,0.20);
}

.placement-back-btn,
.view-toggle-btn,
#resetBtn {
  box-shadow: 0 8px 20px rgba(0,0,0,0.36);
}

.side-panel .camera-dpad.info-camera-dpad .camera-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)),
    rgba(5,6,10,0.58) !important;
  border-color: rgba(255,220,160,0.16) !important;
}

.power-hud.power-glow-strong .power-hud-fill {
  box-shadow:
    0 0 16px rgba(255,235,120,0.72),
    0 0 34px rgba(255,74,38,0.36);
}


/* Compact side/info UI + music controls */
.side-panel {
  gap: 8px !important;
  padding: 14px 14px !important;
}

.side-panel .eyebrow {
  margin-bottom: 2px !important;
  font-size: 10px !important;
}

.side-panel h1 {
  margin: 0 0 4px !important;
  font-size: clamp(1.55rem, 3vw, 2.25rem) !important;
  line-height: 1 !important;
}

.side-panel .subtext {
  font-size: 12px !important;
  line-height: 1.35 !important;
  margin: 0 0 8px !important;
}

.score-box {
  padding: 9px 10px !important;
  gap: 4px !important;
}

.score-box p {
  margin: 3px 0 !important;
  font-size: 12px !important;
}

#message {
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin-top: 5px !important;
}

.difficulty-row {
  margin-top: 5px !important;
  font-size: 12px !important;
}

.difficulty-row select {
  min-height: 26px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
}

.action-row {
  gap: 7px !important;
  margin-top: 7px !important;
}

.action-row button,
.view-toggle-btn,
#resetBtn {
  min-height: 30px !important;
  padding: 6px 9px !important;
  font-size: 12px !important;
}

.music-box {
  margin-top: 8px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(4,5,8,0.46);
  border: 1px solid rgba(255,220,160,0.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.music-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.music-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.78;
}

.music-track-label {
  min-width: 0;
  flex: 1;
  text-align: right;
  font-size: 11px;
  opacity: 0.86;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-controls {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  gap: 6px;
}

.music-controls button {
  min-height: 28px;
  border-radius: 9px;
  border: 1px solid rgba(255,220,160,0.16);
  background: rgba(255,255,255,0.075);
  color: rgba(255,246,230,0.92);
  font-weight: 850;
  cursor: pointer;
}

.music-controls button:disabled {
  opacity: 0.38;
  cursor: default;
}

.info-camera-dpad-wrap {
  margin-top: 8px !important;
}

.side-panel .camera-dpad.info-camera-dpad {
  transform: scale(0.86);
  transform-origin: top left;
  margin-bottom: -12px;
}

@media (max-width: 860px) {
  .side-panel {
    padding: 10px !important;
  }

  .music-box {
    padding: 7px;
  }
}


/* Wide layout pass: info panel far-left, wide 3D screen, centered square 2D screen. */
.rotate-notice {
  display: none;
}

.carrom-page {
  --left-gap: clamp(8px, 1vw, 18px);
  --right-gap: clamp(8px, 1vw, 18px);
  --side-w: clamp(235px, 20vw, 330px);
  --game-max-h: calc(100vh - var(--top-safe) - var(--bottom-safe));
  --wide-game-w: min(
    calc(100vw - var(--side-w) - var(--page-gap) - var(--left-gap) - var(--right-gap)),
    calc(var(--game-max-h) * 1.70)
  );
  --wide-game-h: min(
    var(--game-max-h),
    calc((100vw - var(--side-w) - var(--page-gap) - var(--left-gap) - var(--right-gap)) / 1.70)
  );

  grid-template-columns: var(--side-w) minmax(0, 1fr) !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  padding-left: var(--left-gap) !important;
  padding-right: var(--right-gap) !important;
}

.side-panel {
  justify-self: start !important;
  align-self: center !important;
  width: var(--side-w) !important;
  max-width: var(--side-w) !important;
}

.board-wrap {
  justify-self: center !important;
  align-self: center !important;
}

/* 3D player view: use a wider viewport like a table-camera shot. */
body.carrom-3d-active.carrom-player-view .board-wrap {
  width: var(--wide-game-w) !important;
  height: var(--wide-game-h) !important;
  aspect-ratio: 1.70 / 1 !important;
}

/* 2D view: stay square and centered in the remaining screen space. */
body.carrom-3d-disabled .board-wrap,
body:not(.carrom-3d-active) .board-wrap {
  width: min(
    calc(100vw - var(--side-w) - var(--page-gap) - var(--left-gap) - var(--right-gap)),
    var(--game-max-h)
  ) !important;
  height: min(
    calc(100vw - var(--side-w) - var(--page-gap) - var(--left-gap) - var(--right-gap)),
    var(--game-max-h)
  ) !important;
  aspect-ratio: 1 / 1 !important;
}

body.carrom-3d-active.carrom-player-view #carrom3DCanvas,
body.carrom-3d-active.carrom-player-view #carromCanvas,
body.carrom-3d-disabled #carromCanvas {
  width: 100% !important;
  height: 100% !important;
}

/* PC: push the information panel to the left edge and give 3D the extra room. */
@media (min-width: 901px) {
  .carrom-page {
    --top-safe: 86px;
    --bottom-safe: 12px;
    align-items: center !important;
  }

  body.carrom-3d-active.carrom-player-view .side-panel {
    transform: translateX(0);
  }
}

/* Phone/tablet: keep the PC-like wide layout instead of stacking. */
@media (max-width: 900px) {
  html,
  body {
    overflow: hidden !important;
  }

  .site-header {
    height: 48px !important;
    top: 6px !important;
  }

  .brand-link {
    height: 48px !important;
    width: 92px !important;
    min-width: 92px !important;
  }

  .brand-link img {
    height: 28px !important;
    max-width: 88px !important;
  }

  .main-nav a,
  .nav-dropbtn {
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .carrom-page {
    --top-safe: 58px !important;
    --bottom-safe: 6px !important;
    --left-gap: 6px;
    --right-gap: 6px;
    --page-gap: 8px;
    --side-w: clamp(174px, 28vw, 220px);
    --game-max-h: calc(100vh - var(--top-safe) - var(--bottom-safe));
    --wide-game-w: min(
      calc(100vw - var(--side-w) - var(--page-gap) - var(--left-gap) - var(--right-gap)),
      calc(var(--game-max-h) * 1.70)
    );
    --wide-game-h: min(
      var(--game-max-h),
      calc((100vw - var(--side-w) - var(--page-gap) - var(--left-gap) - var(--right-gap)) / 1.70)
    );

    height: 100vh !important;
    width: 100vw !important;
    display: grid !important;
    grid-template-columns: var(--side-w) minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: var(--page-gap) !important;
    padding: var(--top-safe) var(--right-gap) var(--bottom-safe) var(--left-gap) !important;
    align-items: center !important;
    justify-items: stretch !important;
    align-content: center !important;
    overflow: hidden !important;
  }

  .side-panel {
    width: var(--side-w) !important;
    max-width: var(--side-w) !important;
    margin: 0 !important;
    text-align: left !important;
    border-radius: 14px !important;
    padding: 8px !important;
  }

  .side-panel h1 {
    font-size: clamp(1.25rem, 4.4vw, 1.85rem) !important;
    margin-bottom: 4px !important;
  }

  .score-box {
    padding: 7px !important;
  }

  .score-box p,
  #message,
  .difficulty-row {
    font-size: 11px !important;
  }

  .music-box {
    padding: 6px !important;
  }

  .music-controls {
    grid-template-columns: 30px 1fr 30px !important;
    gap: 5px !important;
  }

  .music-controls button {
    min-height: 26px !important;
    font-size: 11px !important;
  }

  body.carrom-3d-active.carrom-player-view .board-wrap {
    width: var(--wide-game-w) !important;
    height: var(--wide-game-h) !important;
  }

  body.carrom-3d-disabled .board-wrap,
  body:not(.carrom-3d-active) .board-wrap {
    width: min(
      calc(100vw - var(--side-w) - var(--page-gap) - var(--left-gap) - var(--right-gap)),
      var(--game-max-h)
    ) !important;
    height: min(
      calc(100vw - var(--side-w) - var(--page-gap) - var(--left-gap) - var(--right-gap)),
      var(--game-max-h)
    ) !important;
  }
}

/* Portrait phone fallback: browser orientation lock is not guaranteed, so show rotate instruction. */
@media (max-width: 900px) and (orientation: portrait) {
  .rotate-notice {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 24px;
    text-align: center;
    background:
      radial-gradient(circle at 50% 38%, rgba(255,185,90,0.16), transparent 34%),
      rgba(0,0,0,0.94);
    color: rgba(255,244,225,0.96);
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.35;
  }

  .carrom-page {
    filter: blur(2px);
    pointer-events: none;
  }
}


/* --- patch: transparent placement/power HUD in 3D, compact music visualizer, less flicker, visible 3D tuning --- */
.placement-controls,
body.carrom-3d-active .placement-controls {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.power-hud {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.power-hud-track {
  background: rgba(255,255,255,0.14) !important;
}

.mode-select-overlay,
.mode-select-card,
.board-wrap,
#carromCanvas,
#carrom3DCanvas {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mode-select-overlay,
.mode-select-card {
  backdrop-filter: none !important;
}

.music-controls {
  grid-template-columns: 34px minmax(0, 1fr) 34px;
}

.music-mute-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
  padding: 0 !important;
}

.music-viz-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  opacity: 0.95;
  pointer-events: none;
}

.music-mute-text {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 28px;
  padding: 0 10px;
  color: rgba(255,250,242,0.98);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 rgba(20,15,20,0.95),
     1px -1px 0 rgba(20,15,20,0.95),
    -1px  1px 0 rgba(20,15,20,0.95),
     1px  1px 0 rgba(20,15,20,0.95),
     0 0 9px rgba(255,255,255,0.16);
}

.music-mute-btn.is-muted .music-viz-canvas {
  opacity: 0.38;
}

.music-mute-btn.is-playing {
  box-shadow: 0 0 0 1px rgba(255,220,160,0.18), 0 0 12px rgba(110,220,255,0.16);
}

.carrom-3d-inline-panel {
  display: block !important;
}

.carrom-3d-inline-panel > summary.carrom-3d-inline-title {
  font-size: 0.68rem;
}


/* --- patch v3: precise board/frame boxes, darker gold visualizer, pending-3d anti-flicker --- */
.inline-3d-row.inline-3d-row-box {
  grid-template-columns: 68px 1fr 72px 48px;
}

.inline-3d-number {
  width: 100%;
  min-height: 28px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,220,160,0.18);
  background: rgba(10,10,14,0.72);
  color: rgba(255,245,228,0.96);
  font-size: 11px;
  font-weight: 850;
  text-align: right;
}

.inline-3d-number:focus {
  outline: none;
  border-color: rgba(255,210,120,0.42);
  box-shadow: 0 0 0 1px rgba(255,210,120,0.18);
}

.music-viz-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(10, 8, 5, 0.36);
}

.music-viz-canvas {
  z-index: 1;
  opacity: 0.88;
}

.music-mute-text {
  z-index: 3;
  color: rgba(255,239,208,0.98);
  text-shadow:
    -1px -1px 0 rgba(18,12,6,0.98),
     1px -1px 0 rgba(18,12,6,0.98),
    -1px  1px 0 rgba(18,12,6,0.98),
     1px  1px 0 rgba(18,12,6,0.98),
     0 0 8px rgba(120,84,24,0.32);
}

.music-mute-btn.is-playing {
  box-shadow: 0 0 0 1px rgba(255,214,142,0.18), 0 0 12px rgba(184,124,40,0.16);
}

.music-mute-btn.is-muted .music-viz-canvas {
  opacity: 0.24;
}

body.carrom-3d-pending #carromCanvas {
  opacity: 0 !important;
}

body.carrom-3d-pending .board-wrap::after {
  opacity: 0.92;
}

@media (max-width: 780px) {
  .inline-3d-row.inline-3d-row-box {
    grid-template-columns: 64px 1fr 64px 44px;
    gap: 6px;
  }

  .inline-3d-number {
    font-size: 10px;
    padding: 4px 5px;
  }
}


/* --- patch v7: stop 2D board first-load flicker before 3D is ready --- */
body.carrom-3d-pending #carromCanvas,
body.carrom-3d-pending #carromCanvas.no-2d-pieces {
  opacity: 0 !important;
  background: transparent !important;
  visibility: hidden !important;
}

body.carrom-3d-pending #carrom3DCanvas {
  opacity: 1 !important;
  visibility: visible !important;
}

body.carrom-3d-active #carromCanvas {
  background: transparent !important;
}

body.carrom-3d-active:not(.carrom-2d-overlay) #carromCanvas {
  /* keep the transparent HUD canvas available, but never let its 2D board background flash */
  background: transparent !important;
}


/* --- patch v8: lock first paint to 3D wide layout; no square/2D flash --- */
body.carrom-3d-pending .board-wrap,
body.carrom-3d-pending.carrom-player-view .board-wrap,
body.carrom-3d-pending:not(.carrom-3d-disabled) .board-wrap {
  width: var(--wide-game-w) !important;
  height: var(--wide-game-h) !important;
  aspect-ratio: 1.70 / 1 !important;
}

body.carrom-3d-pending #carromCanvas,
body.carrom-3d-pending #carromCanvas.no-2d-pieces {
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
}

body.carrom-3d-pending #carrom3DCanvas {
  opacity: 1 !important;
  visibility: visible !important;
}

#shotControlSelect {
  min-width: 112px;
}


/* --- patch v10: logo-only header, locked info panel, hidden 3D tuning --- */
.site-header.carrom-logo-header,
.site-header {
  top: 8px !important;
  left: 10px !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  height: 50px !important;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  z-index: 650 !important;
}

.main-nav,
.nav-dropdown,
.nav-dropdown-menu {
  display: none !important;
}

.brand-link {
  width: 128px !important;
  min-width: 128px !important;
  height: 50px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.brand-link img {
  height: 40px !important;
  max-width: 126px !important;
}

.carrom-3d-inline-panel,
.carrom-3d-inline-panel[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.carrom-page {
  --top-safe: 8px !important;
  --bottom-safe: 8px !important;
  --left-gap: 8px !important;
  --right-gap: 8px !important;
  --side-w: clamp(214px, 18vw, 292px) !important;
  --page-gap: 10px !important;
  --game-max-h: calc(100vh - var(--top-safe) - var(--bottom-safe)) !important;
  --wide-game-w: min(
    calc(100vw - var(--side-w) - var(--page-gap) - var(--left-gap) - var(--right-gap)),
    calc(var(--game-max-h) * 1.70)
  ) !important;
  --wide-game-h: min(
    var(--game-max-h),
    calc((100vw - var(--side-w) - var(--page-gap) - var(--left-gap) - var(--right-gap)) / 1.70)
  ) !important;
  grid-template-columns: var(--side-w) minmax(0, 1fr) !important;
  gap: var(--page-gap) !important;
  padding: var(--top-safe) var(--right-gap) var(--bottom-safe) var(--left-gap) !important;
  justify-content: stretch !important;
  align-items: center !important;
}

.side-panel {
  position: fixed !important;
  left: var(--left-gap) !important;
  top: 62px !important;
  bottom: var(--bottom-safe) !important;
  width: var(--side-w) !important;
  max-width: var(--side-w) !important;
  max-height: calc(100vh - 62px - var(--bottom-safe)) !important;
  overflow: hidden !important;
  z-index: 120 !important;
  transform: none !important;
}

.board-wrap {
  grid-column: 2 !important;
  justify-self: center !important;
  align-self: center !important;
}

body.carrom-3d-active.carrom-player-view .board-wrap,
body.carrom-3d-pending .board-wrap,
body.carrom-3d-pending.carrom-player-view .board-wrap {
  width: var(--wide-game-w) !important;
  height: var(--wide-game-h) !important;
  aspect-ratio: 1.70 / 1 !important;
}

@media (max-width: 900px) {
  .site-header,
  .site-header.carrom-logo-header {
    top: 4px !important;
    left: 6px !important;
    height: 38px !important;
  }

  .brand-link {
    width: 92px !important;
    min-width: 92px !important;
    height: 38px !important;
  }

  .brand-link img {
    height: 30px !important;
    max-width: 90px !important;
  }

  .carrom-page {
    --top-safe: 4px !important;
    --bottom-safe: 4px !important;
    --left-gap: 4px !important;
    --right-gap: 4px !important;
    --side-w: clamp(168px, 28vw, 220px) !important;
    --page-gap: 6px !important;
  }

  .side-panel {
    top: 44px !important;
    max-height: calc(100vh - 44px - var(--bottom-safe)) !important;
    padding: 7px !important;
  }
}


/* --- patch v11: wider 3D screen + no WASD buttons on PC --- */
@media (min-width: 901px) {
  .info-camera-dpad-wrap,
  .side-panel .camera-dpad.info-camera-dpad {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* --- patch v12: top VS HUD, dramatic round UI, wider table, middle-mouse camera --- */
.match-hud {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 640;
  width: min(720px, calc(100vw - 330px));
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(150px, 0.9fr) minmax(120px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid rgba(255,220,160,0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,211,130,0.18), transparent 58%),
    linear-gradient(180deg, rgba(20,13,8,0.78), rgba(3,4,8,0.72));
  box-shadow: 0 12px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.hud-player {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 8px;
}

.hud-player-right {
  grid-template-columns: 1fr auto;
  text-align: right;
}

.hud-name {
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,239,210,0.82);
}

.hud-player strong {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 0.92;
  color: #fff4d8;
  text-shadow: 0 0 14px rgba(255,192,92,0.32);
}

.hud-player-left strong { grid-column: 1; grid-row: 2; }
.hud-player-left .hud-coins { grid-column: 2; grid-row: 2; }
.hud-player-right strong { grid-column: 2; grid-row: 2; }
.hud-player-right .hud-coins { grid-column: 1; grid-row: 2; justify-content: flex-end; }
.hud-player-right .hud-name { grid-column: 2; }

.hud-coins {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.coin-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,230,185,0.18);
  background: rgba(255,255,255,0.08);
}

.coin-dot.filled {
  background: radial-gradient(circle at 35% 30%, #fff5cf, #b98430 62%, #4f2d0c);
  box-shadow: 0 0 9px rgba(255,192,92,0.26);
}

.hud-center {
  text-align: center;
  display: grid;
  gap: 2px;
  justify-items: center;
}

.round-label,
.mode-hud-label {
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(255,232,190,0.66);
}

.turn-center {
  min-width: 128px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,218,150,0.20);
  background: rgba(255,255,255,0.07);
  color: rgba(255,250,240,0.98);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dramatic-announce {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 240ms ease;
  background: radial-gradient(circle at 50% 48%, rgba(255,196,90,0.14), transparent 34%);
}

.dramatic-announce.show {
  opacity: 1;
  visibility: visible;
}

.dramatic-card {
  min-width: min(520px, 82vw);
  padding: 30px 36px;
  text-align: center;
  border-radius: 28px;
  border: 1px solid rgba(255,225,170,0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,219,142,0.20), transparent 58%),
    linear-gradient(180deg, rgba(22,12,7,0.92), rgba(4,4,8,0.90));
  box-shadow: 0 30px 90px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.14);
  transform: scale(0.94);
  animation: announce-pop 520ms ease forwards;
}

.dramatic-kicker,
.dramatic-sub {
  display: block;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255,229,185,0.72);
}

.dramatic-title {
  display: block;
  margin: 8px 0 10px;
  font-size: clamp(34px, 6vw, 76px);
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff1ca;
  text-shadow: 0 0 26px rgba(255,187,80,0.36), 0 6px 18px rgba(0,0,0,0.55);
}

@keyframes announce-pop {
  from { transform: scale(0.90) translateY(18px); filter: blur(3px); }
  to { transform: scale(1) translateY(0); filter: blur(0); }
}

.score-box > p:first-child,
.score-box > p:nth-child(2),
.score-box > p:nth-child(3) {
  display: none !important;
}

@media (min-width: 901px) {
  .carrom-page {
    --side-w: clamp(198px, 16vw, 260px) !important;
    --page-gap: 6px !important;
    --wide-game-w: min(
      calc(100vw - var(--side-w) - var(--page-gap) - var(--left-gap) - var(--right-gap)),
      calc(var(--game-max-h) * 1.82)
    ) !important;
    --wide-game-h: min(
      var(--game-max-h),
      calc((100vw - var(--side-w) - var(--page-gap) - var(--left-gap) - var(--right-gap)) / 1.82)
    ) !important;
  }

  body.carrom-3d-active.carrom-player-view .board-wrap,
  body.carrom-3d-pending .board-wrap,
  body.carrom-3d-pending.carrom-player-view .board-wrap {
    aspect-ratio: 1.82 / 1 !important;
  }
}

@media (max-width: 900px) {
  .match-hud {
    top: 4px;
    left: calc(var(--side-w, 180px) + 8px);
    right: 4px;
    transform: none;
    width: auto;
    min-height: 42px;
    grid-template-columns: 1fr 0.85fr 1fr;
    padding: 5px 7px;
    border-radius: 14px;
  }

  .hud-player strong { font-size: 24px; }
  .hud-name, .round-label, .mode-hud-label { font-size: 8px; }
  .turn-center { min-width: 84px; font-size: 10px; padding: 3px 7px; }
  .coin-dot { width: 6px; height: 6px; }
}


/* --- patch v13: compact centered board HUD, clean top frame, compact side controls --- */
.board-wrap {
  position: relative !important;
  overflow: hidden !important;
}

.board-wrap .match-hud {
  position: absolute !important;
  top: clamp(5px, 1.2%, 10px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(430px, 58%) !important;
  min-height: 34px !important;
  max-height: 48px !important;
  display: grid !important;
  grid-template-columns: minmax(72px, 1fr) minmax(96px, 0.78fr) minmax(72px, 1fr) !important;
  gap: 5px !important;
  padding: 4px 8px !important;
  border-radius: 13px !important;
  z-index: 52 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,214,142,0.16), transparent 64%),
    linear-gradient(180deg, rgba(19,10,5,0.58), rgba(2,3,7,0.44)) !important;
  border: 1px solid rgba(255,219,150,0.16) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(5px) !important;
}

.board-wrap .hud-player {
  grid-template-columns: auto 1fr !important;
  gap: 0 5px !important;
  min-width: 0 !important;
}

.board-wrap .hud-player-right {
  grid-template-columns: 1fr auto !important;
}

.board-wrap .hud-name {
  font-size: 8px !important;
  letter-spacing: 0.08em !important;
  opacity: 0.82 !important;
}

.board-wrap .hud-player strong {
  font-size: clamp(18px, 2.2vw, 26px) !important;
  line-height: 0.88 !important;
}

.board-wrap .hud-coins {
  gap: 2px !important;
  max-width: 68px !important;
  overflow: hidden !important;
}

.board-wrap .coin-dot {
  width: 5px !important;
  height: 5px !important;
  border-width: 0 !important;
}

.board-wrap .hud-center {
  gap: 0 !important;
  min-width: 0 !important;
}

.board-wrap .round-label,
.board-wrap .mode-hud-label {
  font-size: 7px !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
}

.board-wrap .turn-center {
  min-width: 76px !important;
  max-width: 112px !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
}

.board-wrap .dramatic-announce {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 80 !important;
  background: radial-gradient(circle at 50% 50%, rgba(255,196,90,0.16), transparent 35%) !important;
}

.board-wrap .dramatic-card {
  min-width: min(390px, 62%) !important;
  max-width: 70% !important;
  padding: 18px 24px !important;
  border-radius: 22px !important;
}

.board-wrap .dramatic-title {
  font-size: clamp(26px, 4.8vw, 54px) !important;
  margin: 5px 0 7px !important;
}

.board-wrap .dramatic-kicker,
.board-wrap .dramatic-sub {
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
}

/* hide old 2D top shot/power detail area; HTML power remains only when needed */
body.carrom-3d-active.carrom-player-view .placement-controls > span,
body.carrom-3d-active.carrom-player-view .power-hud-text {
  display: none !important;
}

body.carrom-3d-active.carrom-player-view .placement-controls {
  top: auto !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: min(430px, 48%) !important;
  z-index: 58 !important;
}

.side-panel .difficulty-row {
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  align-items: stretch !important;
  font-size: 10px !important;
}

.side-panel select,
#shotControlSelect,
#difficultySelect {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: 10px !important;
  padding: 5px 6px !important;
  border-radius: 8px !important;
}

.side-panel .score-box {
  padding: 8px !important;
  gap: 6px !important;
  overflow: hidden !important;
}

.side-panel #message {
  font-size: 10px !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
}

@media (max-width: 900px) {
  .board-wrap .match-hud {
    width: min(360px, 70%) !important;
    top: 4px !important;
    min-height: 30px !important;
    grid-template-columns: 1fr 0.82fr 1fr !important;
    padding: 3px 6px !important;
  }
  .board-wrap .hud-player strong { font-size: 18px !important; }
  .board-wrap .hud-name,
  .board-wrap .round-label,
  .board-wrap .mode-hud-label { font-size: 6.8px !important; }
  .board-wrap .turn-center { min-width: 64px !important; font-size: 8px !important; padding: 2px 5px !important; }
  .board-wrap .coin-dot { width: 4px !important; height: 4px !important; }
  .board-wrap .dramatic-card { min-width: min(320px, 74%) !important; max-width: 78% !important; padding: 14px 18px !important; }
}


/* --- patch v14: board-locked HUD, compact control toggle, no bleed outside side panel --- */
.match-hud {
  position: fixed !important;
  top: calc(var(--carrom-board-top, 0px) + 8px) !important;
  left: calc(var(--carrom-board-left, 0px) + (var(--carrom-board-width, 760px) / 2)) !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(390px, calc(var(--carrom-board-width, 760px) - 28px)) !important;
  min-height: 30px !important;
  max-height: 42px !important;
  grid-template-columns: minmax(62px, 1fr) minmax(86px, .72fr) minmax(62px, 1fr) !important;
  gap: 4px !important;
  padding: 3px 7px !important;
  border-radius: 12px !important;
  z-index: 660 !important;
}

.dramatic-announce {
  position: fixed !important;
  top: var(--carrom-board-top, 0px) !important;
  left: var(--carrom-board-left, 0px) !important;
  width: var(--carrom-board-width, 760px) !important;
  height: var(--carrom-board-height, 760px) !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  z-index: 880 !important;
}

.board-wrap .match-hud,
.board-wrap .dramatic-announce {
  position: fixed !important;
}

.match-hud .hud-player { gap: 0 4px !important; }
.match-hud .hud-player strong { font-size: clamp(17px, 1.8vw, 24px) !important; }
.match-hud .hud-name { font-size: 7.5px !important; letter-spacing: .07em !important; }
.match-hud .hud-coins { gap: 2px !important; max-width: 54px !important; }
.match-hud .coin-dot { width: 4.5px !important; height: 4.5px !important; }
.match-hud .round-label,
.match-hud .mode-hud-label { font-size: 6.8px !important; letter-spacing: .07em !important; }
.match-hud .turn-center {
  min-width: 64px !important;
  max-width: 96px !important;
  font-size: 8px !important;
  padding: 2px 5px !important;
}

.shot-control-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.shot-control-toggle {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,230,180,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)) !important;
  color: rgba(255,245,225,.96) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.shot-control-toggle.is-control-2 {
  border-color: rgba(255,198,104,.35) !important;
  box-shadow: inset 0 0 0 1px rgba(255,198,104,.08), 0 0 18px rgba(255,170,70,.08) !important;
}

#shotControlSelect { display: none !important; }

.side-panel .score-box,
.side-panel { min-width: 0 !important; }

@media (max-width: 900px) {
  .match-hud {
    top: calc(var(--carrom-board-top, 0px) + 5px) !important;
    width: min(330px, calc(var(--carrom-board-width, 760px) - 18px)) !important;
  }
}

/* --- patch v15: dramatic music volume hover + compact color labels --- */
.music-controls {
  position: relative !important;
  overflow: visible !important;
}

.music-mute-btn {
  position: relative !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 130, .16),
    0 0 18px rgba(185, 120, 35, .12) !important;
}

.music-volume-popover {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 8px) !important;
  transform: translateX(-50%) translateY(6px) scale(.96) !important;
  width: 154px !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 220, 145, .22) !important;
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 205, 98, .18), transparent 44%),
    rgba(8, 7, 10, .92) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.36), 0 0 22px rgba(183,114,38,.14) !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 8px !important;
  align-items: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease, transform .14s ease !important;
  z-index: 50 !important;
}

.music-volume-popover span {
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .14em !important;
  color: rgba(255, 229, 169, .95) !important;
}

.music-controls:hover .music-volume-popover,
.music-volume-popover:hover {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

.music-volume-slider {
  width: 100% !important;
  height: 4px !important;
  accent-color: #d69b46 !important;
  cursor: pointer !important;
}

.match-hud .hud-name {
  max-width: 76px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* --- patch v16: compact board-safe score HUD, real coin slots, 2D no-overlap --- */
.match-hud {
  top: calc(var(--carrom-board-top, 0px) + 5px) !important;
  left: calc(var(--carrom-board-left, 0px) + (var(--carrom-board-width, 760px) / 2)) !important;
  width: min(560px, calc(var(--carrom-board-width, 760px) - 30px)) !important;
  max-width: calc(var(--carrom-board-width, 760px) - 30px) !important;
  min-height: 36px !important;
  max-height: 52px !important;
  grid-template-columns: minmax(128px, 1fr) minmax(114px, .62fr) minmax(128px, 1fr) !important;
  gap: 8px !important;
  padding: 5px 11px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.match-hud .hud-player {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 8px !important;
  row-gap: 1px !important;
  align-items: center !important;
}

.match-hud .hud-player-right {
  grid-template-columns: 1fr auto !important;
}

.match-hud .hud-player-right .hud-name,
.match-hud .hud-player-right .hud-coins {
  grid-column: 1 / 2 !important;
  text-align: right !important;
  justify-content: end !important;
}

.match-hud .hud-player-right strong {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3 !important;
}

.match-hud .hud-player-left strong {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
}

.match-hud .hud-name {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
}

.match-hud .hud-player strong {
  font-size: clamp(24px, 2.4vw, 36px) !important;
  line-height: .9 !important;
  min-width: 24px !important;
}

.match-hud .hud-coins {
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 3px !important;
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.match-hud .coin-dot { display: none !important; }
.match-hud .coin-slot {
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  opacity: .9 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.36) !important;
}
.match-hud .coin-slot.empty {
  background: transparent !important;
  opacity: .34 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
.match-hud .coin-white.filled { background: radial-gradient(circle at 35% 28%, #fff8e2, #d8c49f 70%, #79664a) !important; }
.match-hud .coin-black.filled { background: radial-gradient(circle at 35% 28%, #595959, #151515 70%, #050505) !important; }
.match-hud .coin-queen.filled { background: radial-gradient(circle at 35% 28%, #ff6a6a, #b5122e 70%, #4a0612) !important; }
.match-hud .coin-queen.empty { border-color: rgba(255,80,80,.30) !important; }

.match-hud .hud-center {
  min-width: 0 !important;
  overflow: hidden !important;
  align-self: center !important;
}
.match-hud .turn-center {
  min-width: 86px !important;
  max-width: 112px !important;
  font-size: 9px !important;
  padding: 2px 7px !important;
  white-space: nowrap !important;
}
.match-hud .round-label,
.match-hud .mode-hud-label {
  font-size: 7.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* In 2D fallback/view, don't cover the square 2D board with the cinematic board HUD. */
body:not(.carrom-3d-active) .match-hud,
body:not(.carrom-3d-active) .dramatic-announce {
  display: none !important;
}
body:not(.carrom-3d-active) .score-box > p:first-child,
body:not(.carrom-3d-active) .score-box > p:nth-child(2),
body:not(.carrom-3d-active) .score-box > p:nth-child(3) {
  display: block !important;
}

.shot-control-toggle {
  width: 100% !important;
  max-width: 100% !important;
  height: 30px !important;
  font-size: 11px !important;
  padding: 0 8px !important;
}
.side-panel .score-box { overflow: hidden !important; }

@media (max-width: 900px) {
  .match-hud {
    width: min(430px, calc(var(--carrom-board-width, 760px) - 16px)) !important;
    grid-template-columns: minmax(104px, 1fr) minmax(86px, .58fr) minmax(104px, 1fr) !important;
    gap: 5px !important;
    padding: 4px 7px !important;
  }
  .match-hud .hud-player strong { font-size: 22px !important; }
  .match-hud .hud-name { font-size: 8px !important; }
  .match-hud .coin-slot { width: 6px !important; height: 6px !important; flex-basis: 6px !important; }
  .match-hud .turn-center { min-width: 72px !important; font-size: 8px !important; }
}

/* --- patch v18: cleaner compact VS HUD, empty slots fill as coins scored --- */
.match-hud {
  width: min(640px, calc(var(--carrom-board-width, 760px) - 18px)) !important;
  max-width: calc(var(--carrom-board-width, 760px) - 18px) !important;
  min-height: 34px !important;
  max-height: 48px !important;
  grid-template-columns: minmax(178px, 1fr) minmax(86px, .46fr) minmax(178px, 1fr) !important;
  gap: 8px !important;
  padding: 4px 12px !important;
}

.match-hud .hud-player {
  grid-template-columns: auto minmax(0, 1fr) !important;
  column-gap: 8px !important;
}

.match-hud .hud-player-right {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.match-hud .hud-name {
  max-width: none !important;
  font-size: 9px !important;
  letter-spacing: .075em !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.match-hud .hud-player strong {
  font-size: clamp(21px, 2vw, 30px) !important;
  min-width: 22px !important;
}

.match-hud .hud-coins {
  gap: 3px !important;
  overflow: visible !important;
}

.match-hud .coin-slot {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
}

.match-hud .hud-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}

.match-hud .turn-center {
  min-width: 74px !important;
  max-width: 94px !important;
  font-size: 8px !important;
  padding: 2px 6px !important;
}

.match-hud .round-label {
  font-size: 7.5px !important;
  letter-spacing: .08em !important;
}

.match-hud .mode-hud-label {
  display: none !important;
}

@media (max-width: 900px) {
  .match-hud {
    width: min(520px, calc(var(--carrom-board-width, 760px) - 12px)) !important;
    grid-template-columns: minmax(132px, 1fr) minmax(74px, .42fr) minmax(132px, 1fr) !important;
    gap: 5px !important;
    padding: 3px 7px !important;
  }
  .match-hud .hud-name { font-size: 7.5px !important; }
  .match-hud .hud-player strong { font-size: 20px !important; }
  .match-hud .coin-slot { width: 5.5px !important; height: 5.5px !important; flex-basis: 5.5px !important; }
  .match-hud .turn-center { min-width: 62px !important; font-size: 7px !important; }
}


/* --- patch v20: fullscreen space fix --- */
.fullscreen-btn {
  min-width: 48px !important;
  width: 52px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 21px !important;
  line-height: 1 !important;
}

:fullscreen,
:-webkit-full-screen {
  background: #050304 !important;
}

body.carrom-fullscreen-active {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 25%, rgba(145,91,39,0.16), transparent 38%), #050304 !important;
}

body.carrom-fullscreen-active .carrom-page {
  --top-safe: max(4px, env(safe-area-inset-top)) !important;
  --bottom-safe: max(8px, env(safe-area-inset-bottom)) !important;
}

body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap,
body.carrom-fullscreen-active.carrom-3d-pending .board-wrap {
  width: min(calc(100vw - var(--side-w) - var(--page-gap) - 16px), calc((100vh - 14px) * 1.82)) !important;
  width: min(calc(100vw - var(--side-w) - var(--page-gap) - 16px), calc((100dvh - 14px) * 1.82)) !important;
  height: min(calc(100vh - 14px), calc((100vw - var(--side-w) - var(--page-gap) - 16px) / 1.82)) !important;
  height: min(calc(100dvh - 14px), calc((100vw - var(--side-w) - var(--page-gap) - 16px) / 1.82)) !important;
  max-height: calc(100vh - 14px) !important;
  max-height: calc(100dvh - 14px) !important;
}

body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls {
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px)) !important;
  max-width: min(520px, 54%) !important;
}

body.carrom-fullscreen-active .side-panel {
  top: max(6px, env(safe-area-inset-top)) !important;
  max-height: calc(100vh - max(6px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
  max-height: calc(100dvh - max(6px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
}

@media (max-width: 900px) {
  body.carrom-fullscreen-active .carrom-page {
    --side-w: clamp(154px, 24vw, 205px) !important;
    --page-gap: 4px !important;
  }

  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls {
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px)) !important;
    max-width: min(520px, 58%) !important;
  }

  body.carrom-fullscreen-active .brand-link {
    width: 78px !important;
    min-width: 78px !important;
  }
}

/* --- patch v21: phone slider bottom lock --- */
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls {
  bottom: max(6px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 900px) {
  body.carrom-3d-active.carrom-player-view .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls {
    position: fixed !important;
    left: calc(var(--side-w) + var(--page-gap) + ((100vw - var(--side-w) - var(--page-gap)) / 2)) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(520px, calc(100vw - var(--side-w) - var(--page-gap) - 86px)) !important;
    max-width: min(520px, calc(100vw - var(--side-w) - var(--page-gap) - 86px)) !important;
    z-index: 80 !important;
  }

  body.carrom-3d-active.carrom-player-view .placement-controls span,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls span {
    margin-bottom: 1px !important;
    font-size: clamp(10px, 2.5vw, 16px) !important;
  }

  body.carrom-3d-active.carrom-player-view #strikerSlider,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view #strikerSlider {
    height: clamp(26px, 7vh, 38px) !important;
  }

  body.carrom-3d-active.carrom-player-view #strikerSlider::-webkit-slider-thumb,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view #strikerSlider::-webkit-slider-thumb {
    width: clamp(30px, 8vh, 42px) !important;
    height: clamp(30px, 8vh, 42px) !important;
    margin-top: calc((clamp(5px, calc(var(--board-size) * 0.011), 8px) - clamp(30px, 8vh, 42px)) / 2) !important;
  }

  body.carrom-3d-active.carrom-player-view #strikerSlider::-moz-range-thumb,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view #strikerSlider::-moz-range-thumb {
    width: clamp(30px, 8vh, 42px) !important;
    height: clamp(30px, 8vh, 42px) !important;
  }

  body.carrom-3d-active.carrom-player-view .placement-back-btn,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-back-btn {
    width: clamp(28px, 7vh, 38px) !important;
    height: clamp(28px, 7vh, 38px) !important;
    min-width: clamp(28px, 7vh, 38px) !important;
  }
}


/* --- patch v24: full-width game HUD, stable music volume, keep match screen --- */
.side-panel > .eyebrow {
  display: none !important;
}

.match-hud {
  top: calc(var(--carrom-board-top, 0px) + 6px) !important;
  left: calc(var(--carrom-board-left, 0px) + (var(--carrom-board-width, 760px) / 2)) !important;
  width: min(calc(var(--carrom-board-width, 760px) - 14px), calc(100vw - 18px)) !important;
  max-width: calc(var(--carrom-board-width, 760px) - 14px) !important;
  min-height: 38px !important;
  max-height: 48px !important;
  grid-template-columns: minmax(190px, 1fr) minmax(116px, .42fr) minmax(190px, 1fr) !important;
  gap: 10px !important;
  padding: 4px 14px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.match-hud .hud-name {
  font-size: 9px !important;
  max-width: none !important;
  letter-spacing: .07em !important;
}

.match-hud .hud-player strong {
  font-size: clamp(22px, 2.2vw, 32px) !important;
}

.match-hud .hud-coins {
  gap: 3px !important;
  overflow: hidden !important;
}

.match-hud .coin-slot {
  width: 7px !important;
  height: 7px !important;
  flex-basis: 7px !important;
}

.match-hud .turn-center {
  min-width: 82px !important;
  max-width: 100px !important;
  font-size: 8px !important;
}

.match-hud .round-label {
  font-size: 7.5px !important;
}

/* Show the same top HUD in 2D too, but keep it on the top frame zone. */
body:not(.carrom-3d-active) .match-hud {
  display: grid !important;
}
body:not(.carrom-3d-active) .dramatic-announce {
  display: grid !important;
}
body:not(.carrom-3d-active) .score-box > p:first-child,
body:not(.carrom-3d-active) .score-box > p:nth-child(2),
body:not(.carrom-3d-active) .score-box > p:nth-child(3) {
  display: none !important;
}

/* Make volume popover easier to reach and keep open while moving to it. */
.music-box,
.music-controls {
  overflow: visible !important;
}
.music-controls::before {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 100%;
  height: 18px;
  pointer-events: auto;
}
.music-volume-popover {
  bottom: calc(100% + 2px) !important;
  z-index: 1000 !important;
  transition: opacity .10s ease, transform .10s ease !important;
}
.music-box:hover .music-volume-popover,
.music-box:focus-within .music-volume-popover,
.music-controls:hover .music-volume-popover,
.music-controls:focus-within .music-volume-popover,
.music-volume-popover:hover {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

@media (max-width: 900px) {
  .match-hud {
    width: min(calc(var(--carrom-board-width, 760px) - 10px), calc(100vw - 10px)) !important;
    max-width: calc(var(--carrom-board-width, 760px) - 10px) !important;
    grid-template-columns: minmax(138px, 1fr) minmax(74px, .34fr) minmax(138px, 1fr) !important;
    gap: 5px !important;
    padding: 3px 7px !important;
  }
  .match-hud .hud-name { font-size: 7px !important; }
  .match-hud .hud-player strong { font-size: 19px !important; }
  .match-hud .coin-slot { width: 5px !important; height: 5px !important; flex-basis: 5px !important; }
  .match-hud .turn-center { min-width: 60px !important; font-size: 6.8px !important; padding: 2px 4px !important; }
  .match-hud .round-label { font-size: 6.7px !important; }
}


/* --- patch v25: wider pocket-to-pocket HUD + wider bottom striker slider --- */
.match-hud {
  top: calc(var(--carrom-board-top, 0px) + 4px) !important;
  left: calc(var(--carrom-board-left, 0px) + (var(--carrom-board-width, 760px) / 2)) !important;
  width: min(calc(var(--carrom-board-width, 760px) * .84), calc(100vw - 16px)) !important;
  max-width: min(calc(var(--carrom-board-width, 760px) * .84), calc(100vw - 16px)) !important;
  min-height: clamp(48px, calc(var(--carrom-board-height, 760px) * .070), 66px) !important;
  max-height: clamp(52px, calc(var(--carrom-board-height, 760px) * .078), 72px) !important;
  grid-template-columns: minmax(235px, 1.18fr) minmax(128px, .42fr) minmax(235px, 1.18fr) !important;
  gap: clamp(10px, calc(var(--carrom-board-width, 760px) * .018), 18px) !important;
  padding: clamp(5px, calc(var(--carrom-board-height, 760px) * .009), 9px) clamp(16px, calc(var(--carrom-board-width, 760px) * .026), 26px) !important;
  border-radius: clamp(16px, calc(var(--carrom-board-height, 760px) * .026), 24px) !important;
  overflow: hidden !important;
}

body.carrom-3d-active.carrom-player-view .match-hud,
body.carrom-3d-pending .match-hud {
  width: min(calc(var(--carrom-board-width, 760px) * .94), calc(100vw - 18px)) !important;
  max-width: min(calc(var(--carrom-board-width, 760px) * .94), calc(100vw - 18px)) !important;
  min-height: clamp(48px, calc(var(--carrom-board-height, 760px) * .062), 62px) !important;
  max-height: clamp(52px, calc(var(--carrom-board-height, 760px) * .072), 68px) !important;
  grid-template-columns: minmax(265px, 1.24fr) minmax(132px, .38fr) minmax(265px, 1.24fr) !important;
}

body:not(.carrom-3d-active) .match-hud {
  width: min(calc(var(--carrom-board-width, 760px) * .80), calc(100vw - 18px)) !important;
  max-width: min(calc(var(--carrom-board-width, 760px) * .80), calc(100vw - 18px)) !important;
  top: calc(var(--carrom-board-top, 0px) + max(4px, calc(var(--carrom-board-height, 760px) * .008))) !important;
  min-height: clamp(50px, calc(var(--carrom-board-height, 760px) * .072), 70px) !important;
  max-height: clamp(54px, calc(var(--carrom-board-height, 760px) * .084), 76px) !important;
}

.match-hud .hud-name {
  font-size: clamp(9px, calc(var(--carrom-board-width, 760px) * .0125), 13px) !important;
  letter-spacing: .075em !important;
  line-height: 1 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.match-hud .hud-player strong {
  font-size: clamp(26px, calc(var(--carrom-board-width, 760px) * .036), 42px) !important;
  min-width: clamp(28px, calc(var(--carrom-board-width, 760px) * .043), 48px) !important;
}

.match-hud .hud-coins {
  gap: clamp(3px, calc(var(--carrom-board-width, 760px) * .006), 6px) !important;
  overflow: hidden !important;
}

.match-hud .coin-slot {
  width: clamp(7px, calc(var(--carrom-board-width, 760px) * .0105), 11px) !important;
  height: clamp(7px, calc(var(--carrom-board-width, 760px) * .0105), 11px) !important;
  flex: 0 0 clamp(7px, calc(var(--carrom-board-width, 760px) * .0105), 11px) !important;
}

.match-hud .hud-center {
  gap: 3px !important;
  min-width: 0 !important;
}

.match-hud .turn-center {
  min-width: clamp(82px, calc(var(--carrom-board-width, 760px) * .120), 128px) !important;
  max-width: clamp(92px, calc(var(--carrom-board-width, 760px) * .145), 150px) !important;
  font-size: clamp(8px, calc(var(--carrom-board-width, 760px) * .0115), 12px) !important;
  padding: 3px 8px !important;
}

.match-hud .round-label {
  font-size: clamp(7.5px, calc(var(--carrom-board-width, 760px) * .0105), 11px) !important;
}

/* Bottom striker placement: make it really wide, but keep it inside the bottom safe zone. */
.placement-controls,
body.carrom-3d-active.carrom-player-view .placement-controls,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls {
  position: fixed !important;
  left: calc(var(--carrom-board-left, 0px) + (var(--carrom-board-width, 760px) / 2)) !important;
  transform: translateX(-50%) !important;
  width: min(calc(var(--carrom-board-width, 760px) * .86), calc(100vw - 76px)) !important;
  max-width: min(calc(var(--carrom-board-width, 760px) * .86), calc(100vw - 76px)) !important;
  bottom: max(6px, env(safe-area-inset-bottom)) !important;
}

body.carrom-3d-active.carrom-player-view .placement-controls,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls {
  width: min(calc(var(--carrom-board-width, 760px) * .88), calc(100vw - 82px)) !important;
  max-width: min(calc(var(--carrom-board-width, 760px) * .88), calc(100vw - 82px)) !important;
}

.placement-slider-row {
  grid-template-columns: minmax(0, 1fr) clamp(34px, calc(var(--carrom-board-width, 760px) * .052), 50px) !important;
  gap: clamp(6px, calc(var(--carrom-board-width, 760px) * .012), 12px) !important;
}

body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap,
body.carrom-fullscreen-active.carrom-3d-pending .board-wrap {
  width: min(calc(100vw - var(--side-w) - var(--page-gap) - 4px), calc((100dvh - 4px) * 1.86)) !important;
  height: min(calc(100dvh - 4px), calc((100vw - var(--side-w) - var(--page-gap) - 4px) / 1.86)) !important;
  max-height: calc(100dvh - 4px) !important;
}

@media (max-width: 900px) {
  .match-hud,
  body.carrom-3d-active.carrom-player-view .match-hud,
  body.carrom-3d-pending .match-hud {
    width: min(calc(var(--carrom-board-width, 760px) * .88), calc(100vw - 10px)) !important;
    max-width: min(calc(var(--carrom-board-width, 760px) * .88), calc(100vw - 10px)) !important;
    min-height: clamp(42px, calc(var(--carrom-board-height, 760px) * .065), 58px) !important;
    max-height: clamp(46px, calc(var(--carrom-board-height, 760px) * .076), 64px) !important;
    grid-template-columns: minmax(142px, 1.2fr) minmax(76px, .36fr) minmax(142px, 1.2fr) !important;
    gap: 6px !important;
    padding: 4px 9px !important;
  }

  body:not(.carrom-3d-active) .match-hud {
    width: min(calc(var(--carrom-board-width, 760px) * .80), calc(100vw - 14px)) !important;
    max-width: min(calc(var(--carrom-board-width, 760px) * .80), calc(100vw - 14px)) !important;
  }

  .match-hud .hud-name { font-size: clamp(7.5px, 2.0vw, 10px) !important; }
  .match-hud .hud-player strong { font-size: clamp(20px, 5vw, 30px) !important; min-width: 24px !important; }
  .match-hud .coin-slot {
    width: clamp(5.5px, 1.55vw, 8px) !important;
    height: clamp(5.5px, 1.55vw, 8px) !important;
    flex-basis: clamp(5.5px, 1.55vw, 8px) !important;
  }
  .match-hud .turn-center { min-width: 66px !important; max-width: 92px !important; font-size: clamp(6.8px, 1.8vw, 8.8px) !important; padding: 2px 5px !important; }
  .match-hud .round-label { font-size: clamp(6.8px, 1.8vw, 8.6px) !important; }

  .placement-controls,
  body.carrom-3d-active.carrom-player-view .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls {
    left: calc(var(--carrom-board-left, 0px) + (var(--carrom-board-width, 760px) / 2)) !important;
    width: min(calc(var(--carrom-board-width, 760px) * .84), calc(100vw - 62px)) !important;
    max-width: min(calc(var(--carrom-board-width, 760px) * .84), calc(100vw - 62px)) !important;
  }
}



/* --- patch v26: fuller game-screen layout, detailed HUD/slider placement --- */
.carrom-page {
  --top-safe: max(4px, env(safe-area-inset-top)) !important;
  --bottom-safe: max(4px, env(safe-area-inset-bottom)) !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: var(--top-safe) 8px var(--bottom-safe) !important;
  gap: clamp(6px, 1vw, 16px) !important;
  align-items: stretch !important;
}

.side-panel {
  align-self: stretch !important;
  max-height: calc(100vh - var(--top-safe) - var(--bottom-safe)) !important;
  max-height: calc(100dvh - var(--top-safe) - var(--bottom-safe)) !important;
  overflow: auto !important;
}

.board-wrap {
  align-self: stretch !important;
  justify-self: center !important;
}

body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap,
body.carrom-fullscreen-active.carrom-3d-pending .board-wrap {
  width: min(calc(100vw - var(--side-w) - var(--page-gap) - 8px), calc((100dvh - 8px) * 1.84)) !important;
  height: min(calc(100dvh - 8px), calc((100vw - var(--side-w) - var(--page-gap) - 8px) / 1.84)) !important;
  max-height: calc(100dvh - 8px) !important;
}

.match-hud {
  top: calc(var(--carrom-board-top, 0px) + 10px) !important;
  left: calc(var(--carrom-board-left, 0px) + (var(--carrom-board-width, 760px) / 2)) !important;
  width: min(calc(var(--carrom-board-width, 760px) - 108px), calc(100vw - 20px)) !important;
  max-width: calc(var(--carrom-board-width, 760px) - 108px) !important;
  min-height: 56px !important;
  max-height: none !important;
  grid-template-columns: minmax(215px, 1fr) minmax(148px, 0.54fr) minmax(215px, 1fr) !important;
  gap: 12px !important;
  padding: 6px 18px !important;
  border-radius: 18px !important;
}

body.carrom-3d-active.carrom-player-view .match-hud,
body.carrom-3d-pending .match-hud,
body.carrom-3d-pending.carrom-player-view .match-hud {
  top: calc(var(--carrom-board-top, 0px) + 12px) !important;
  width: min(calc(var(--carrom-board-width, 1100px) - 152px), calc(100vw - 24px)) !important;
  max-width: calc(var(--carrom-board-width, 1100px) - 152px) !important;
  min-height: 62px !important;
  grid-template-columns: minmax(235px, 1fr) minmax(160px, 0.56fr) minmax(235px, 1fr) !important;
  padding: 7px 20px !important;
}

.match-hud .hud-player {
  gap: 2px 8px !important;
}

.match-hud .hud-name {
  font-size: 10px !important;
  line-height: 1 !important;
}

.match-hud .hud-player strong {
  font-size: clamp(24px, 2.4vw, 34px) !important;
  line-height: 0.95 !important;
}

.match-hud .hud-coins {
  gap: 4px !important;
  max-width: none !important;
}

.match-hud .coin-slot {
  width: 7.5px !important;
  height: 7.5px !important;
  flex-basis: 7.5px !important;
}

.match-hud .hud-center {
  gap: 2px !important;
}

.match-hud .turn-center {
  min-width: 92px !important;
  max-width: 120px !important;
  font-size: 9px !important;
  padding: 3px 10px !important;
}

.match-hud .round-label,
.match-hud .mode-hud-label {
  font-size: 8px !important;
}

.placement-controls {
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 16px !important;
  width: min(calc(100% - 120px), 860px) !important;
  max-width: min(calc(100% - 120px), 860px) !important;
  z-index: 82 !important;
}

body.carrom-3d-active.carrom-player-view .placement-controls,
body.carrom-3d-pending .placement-controls,
body.carrom-3d-pending.carrom-player-view .placement-controls {
  bottom: 18px !important;
  width: min(calc(100% - 150px), 980px) !important;
  max-width: min(calc(100% - 150px), 980px) !important;
}

.placement-controls span,
body.carrom-3d-active.carrom-player-view .placement-controls span {
  display: block !important;
  margin-bottom: 5px !important;
  font-size: clamp(13px, calc(var(--board-size) * 0.022), 20px) !important;
  letter-spacing: 0.04em !important;
}

.placement-slider-row {
  grid-template-columns: 1fr clamp(34px, calc(var(--board-size) * 0.058), 46px) !important;
  gap: 8px !important;
}

#strikerSlider {
  height: clamp(34px, calc(var(--board-size) * 0.064), 48px) !important;
}

@media (max-width: 900px) {
  .carrom-page {
    --top-safe: max(2px, env(safe-area-inset-top)) !important;
    --bottom-safe: max(2px, env(safe-area-inset-bottom)) !important;
    padding: var(--top-safe) 4px var(--bottom-safe) !important;
    gap: 4px !important;
  }

  .match-hud {
    width: min(calc(var(--carrom-board-width, 760px) - 88px), calc(100vw - 8px)) !important;
    max-width: calc(var(--carrom-board-width, 760px) - 88px) !important;
    min-height: 52px !important;
    padding: 6px 10px !important;
    grid-template-columns: minmax(148px, 1fr) minmax(100px, 0.52fr) minmax(148px, 1fr) !important;
  }

  .match-hud .hud-name { font-size: 8px !important; }
  .match-hud .hud-player strong { font-size: 22px !important; }
  .match-hud .coin-slot { width: 6px !important; height: 6px !important; flex-basis: 6px !important; }
  .match-hud .turn-center { min-width: 72px !important; font-size: 8px !important; }

  .placement-controls,
  body.carrom-3d-active.carrom-player-view .placement-controls,
  body.carrom-3d-pending .placement-controls,
  body.carrom-3d-pending.carrom-player-view .placement-controls {
    width: min(calc(100% - 86px), 92vw) !important;
    max-width: min(calc(100% - 86px), 92vw) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }
}


/* --- patch v27: keep 3D placement slider inside frame + fullscreen logo/title spacing --- */
body.carrom-3d-active.carrom-player-view .board-wrap .placement-controls,
body.carrom-3d-pending.carrom-player-view .board-wrap .placement-controls {
  position: absolute !important;
  left: clamp(70px, 9%, 120px) !important;
  right: clamp(70px, 9%, 120px) !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 88 !important;
}

body.carrom-3d-active.carrom-player-view .board-wrap .placement-slider-row,
body.carrom-3d-pending.carrom-player-view .board-wrap .placement-slider-row {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) clamp(34px, calc(var(--board-size) * 0.055), 46px) !important;
}

body.carrom-3d-active.carrom-player-view .board-wrap #strikerSlider,
body.carrom-3d-pending.carrom-player-view .board-wrap #strikerSlider {
  min-width: 0 !important;
}

/* In fullscreen the game should breathe; the home logo should not collide with the Carrom title. */
body.carrom-fullscreen-active .site-header.carrom-logo-header,
body.carrom-fullscreen-active .site-header {
  top: max(5px, env(safe-area-inset-top)) !important;
  left: 6px !important;
  transform: none !important;
  opacity: 0.82 !important;
}

body.carrom-fullscreen-active .brand-link {
  width: 74px !important;
  min-width: 74px !important;
  height: 34px !important;
}

body.carrom-fullscreen-active .brand-link img {
  height: 30px !important;
  max-width: 72px !important;
}

body.carrom-fullscreen-active .side-panel {
  padding-top: 42px !important;
}

body.carrom-fullscreen-active .side-panel h1 {
  font-size: clamp(1.55rem, 2.4vw, 2.55rem) !important;
  margin-bottom: 10px !important;
}

@media (max-width: 900px) {
  body.carrom-3d-active.carrom-player-view .board-wrap .placement-controls,
  body.carrom-3d-pending.carrom-player-view .board-wrap .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap .placement-controls {
    position: absolute !important;
    left: clamp(52px, 8%, 86px) !important;
    right: clamp(52px, 8%, 86px) !important;
    width: auto !important;
    max-width: none !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }

  body.carrom-fullscreen-active .site-header.carrom-logo-header,
  body.carrom-fullscreen-active .site-header {
    display: none !important;
  }

  body.carrom-fullscreen-active .side-panel {
    padding-top: 8px !important;
  }
}


/* --- patch v28: fullscreen logo sizing, clearer scoreboard coins, tighter pockets --- */
body.carrom-fullscreen-active .carrom-page {
  --top-safe: max(64px, env(safe-area-inset-top)) !important;
}

body.carrom-fullscreen-active .site-header.carrom-logo-header,
body.carrom-fullscreen-active .site-header {
  top: max(6px, env(safe-area-inset-top)) !important;
  left: 8px !important;
  height: 50px !important;
  z-index: 980 !important;
}

body.carrom-fullscreen-active .brand-link {
  width: 138px !important;
  min-width: 138px !important;
  height: 50px !important;
  padding: 6px 12px !important;
}

body.carrom-fullscreen-active .brand-link img {
  max-height: 34px !important;
}

body.carrom-fullscreen-active .side-panel h1 {
  margin-top: 14px !important;
}

.match-hud .coin-slot {
  width: 9px !important;
  height: 9px !important;
  flex-basis: 9px !important;
  border: 1px solid rgba(185, 127, 58, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(64, 36, 12, 0.82) inset,
    0 0 5px rgba(0, 0, 0, 0.32) !important;
}

.match-hud .coin-slot.empty {
  background: radial-gradient(circle at 34% 28%, rgba(112,82,40,0.22), rgba(42,23,9,0.14) 72%, rgba(18,10,4,0.10)) !important;
  border-color: rgba(149, 103, 48, 0.52) !important;
}

.match-hud .coin-white.filled {
  background: radial-gradient(circle at 34% 26%, #fffaf0, #e7d9bb 65%, #b59660) !important;
}

.match-hud .coin-black.filled {
  background: radial-gradient(circle at 34% 26%, #6b6b6b, #222 64%, #090909) !important;
  border-color: rgba(214, 166, 86, 0.92) !important;
  box-shadow:
    0 0 0 1px rgba(88, 58, 18, 0.92) inset,
    0 0 7px rgba(0,0,0,0.42) !important;
}

.match-hud .coin-queen.filled {
  background: radial-gradient(circle at 34% 26%, #ff9db1, #cf2949 60%, #730718) !important;
  border-color: rgba(226, 180, 108, 0.94) !important;
}

body.carrom-3d-active.carrom-player-view .placement-controls,
body.carrom-3d-pending .placement-controls,
body.carrom-3d-pending.carrom-player-view .placement-controls,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls,
body.carrom-fullscreen-active.carrom-3d-pending .placement-controls {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(calc(var(--carrom-board-width, 1100px) - 130px), 84%) !important;
  max-width: calc(var(--carrom-board-width, 1100px) - 130px) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 900px) {
  body.carrom-fullscreen-active .site-header.carrom-logo-header,
  body.carrom-fullscreen-active .site-header {
    height: 44px !important;
  }

  body.carrom-fullscreen-active .brand-link {
    width: 116px !important;
    min-width: 116px !important;
    height: 44px !important;
    padding: 5px 10px !important;
  }

  body.carrom-fullscreen-active .brand-link img {
    max-height: 28px !important;
  }

  .match-hud .coin-slot {
    width: 7px !important;
    height: 7px !important;
    flex-basis: 7px !important;
  }

  body.carrom-3d-active.carrom-player-view .placement-controls,
  body.carrom-3d-pending .placement-controls,
  body.carrom-3d-pending.carrom-player-view .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-pending .placement-controls {
    width: min(calc(var(--carrom-board-width, 760px) - 84px), 86vw) !important;
    max-width: calc(var(--carrom-board-width, 760px) - 84px) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }
}


/* --- patch v29: fullscreen HUD wider/higher, slider lower, camera balance follow-up --- */
body.carrom-fullscreen-active .carrom-page {
  --top-safe: max(56px, env(safe-area-inset-top)) !important;
}

body.carrom-fullscreen-active .match-hud,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .match-hud,
body.carrom-fullscreen-active.carrom-3d-pending .match-hud,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .match-hud {
  top: calc(var(--carrom-board-top, 0px) + 6px) !important;
  width: min(calc(var(--carrom-board-width, 1100px) - 74px), calc(100vw - 14px)) !important;
  max-width: calc(var(--carrom-board-width, 1100px) - 74px) !important;
  min-height: 66px !important;
  padding: 8px 22px !important;
  grid-template-columns: minmax(240px, 1fr) minmax(168px, 0.58fr) minmax(240px, 1fr) !important;
}

body.carrom-fullscreen-active .match-hud .hud-name {
  font-size: 10.5px !important;
}

body.carrom-fullscreen-active .match-hud .hud-player strong {
  font-size: clamp(26px, 2.4vw, 36px) !important;
}

body.carrom-fullscreen-active .match-hud .coin-slot {
  width: 9.5px !important;
  height: 9.5px !important;
  flex-basis: 9.5px !important;
}

body.carrom-fullscreen-active .match-hud .turn-center {
  min-width: 96px !important;
  max-width: 126px !important;
  padding: 4px 10px !important;
}

body.carrom-fullscreen-active .board-wrap .placement-controls,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap .placement-controls,
body.carrom-fullscreen-active.carrom-3d-pending .board-wrap .placement-controls,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap .placement-controls {
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: max(4px, env(safe-area-inset-bottom)) !important;
  width: min(calc(var(--carrom-board-width, 1100px) - 96px), 88%) !important;
  max-width: calc(var(--carrom-board-width, 1100px) - 96px) !important;
}

body.carrom-fullscreen-active .board-wrap .placement-controls span,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap .placement-controls span {
  margin-bottom: 3px !important;
}

@media (max-width: 900px) {
  body.carrom-fullscreen-active .carrom-page {
    --top-safe: max(46px, env(safe-area-inset-top)) !important;
  }

  body.carrom-fullscreen-active .match-hud,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .match-hud,
  body.carrom-fullscreen-active.carrom-3d-pending .match-hud,
  body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .match-hud {
    top: calc(var(--carrom-board-top, 0px) + 4px) !important;
    width: min(calc(var(--carrom-board-width, 760px) - 46px), calc(100vw - 8px)) !important;
    max-width: calc(var(--carrom-board-width, 760px) - 46px) !important;
    min-height: 54px !important;
    padding: 6px 10px !important;
  }

  body.carrom-fullscreen-active .match-hud .coin-slot {
    width: 7.2px !important;
    height: 7.2px !important;
    flex-basis: 7.2px !important;
  }

  body.carrom-fullscreen-active .board-wrap .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-pending .board-wrap .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap .placement-controls {
    bottom: max(2px, env(safe-area-inset-bottom)) !important;
    width: min(calc(var(--carrom-board-width, 760px) - 60px), 92vw) !important;
    max-width: calc(var(--carrom-board-width, 760px) - 60px) !important;
  }
}


/* --- patch v30: fullscreen HUD top anchoring fix --- */
body.carrom-fullscreen-active .carrom-page {
  --top-safe: max(10px, env(safe-area-inset-top)) !important;
}

body.carrom-fullscreen-active .board-wrap {
  margin-top: 0 !important;
}

body.carrom-fullscreen-active .match-hud,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .match-hud,
body.carrom-fullscreen-active.carrom-3d-pending .match-hud,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .match-hud,
body.carrom-fullscreen-active:not(.carrom-3d-active) .match-hud {
  top: calc(var(--carrom-board-top, 0px) + 2px) !important;
  width: min(calc(var(--carrom-board-width, 1100px) - 54px), calc(100vw - 14px)) !important;
  max-width: calc(var(--carrom-board-width, 1100px) - 54px) !important;
  min-height: 64px !important;
  padding: 7px 18px !important;
}

body.carrom-fullscreen-active:not(.carrom-3d-active) .match-hud {
  width: min(calc(var(--carrom-board-width, 760px) - 38px), calc(100vw - 10px)) !important;
  max-width: calc(var(--carrom-board-width, 760px) - 38px) !important;
}

body.carrom-fullscreen-active .match-hud .hud-name {
  font-size: 10px !important;
}

body.carrom-fullscreen-active .match-hud .hud-player strong {
  font-size: clamp(26px, 2.4vw, 35px) !important;
}

body.carrom-fullscreen-active .match-hud .coin-slot {
  width: 9px !important;
  height: 9px !important;
  flex-basis: 9px !important;
}

@media (max-width: 900px) {
  body.carrom-fullscreen-active .carrom-page {
    --top-safe: max(6px, env(safe-area-inset-top)) !important;
  }

  body.carrom-fullscreen-active .match-hud,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .match-hud,
  body.carrom-fullscreen-active.carrom-3d-pending .match-hud,
  body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .match-hud,
  body.carrom-fullscreen-active:not(.carrom-3d-active) .match-hud {
    top: calc(var(--carrom-board-top, 0px) + 1px) !important;
    width: min(calc(var(--carrom-board-width, 760px) - 24px), calc(100vw - 8px)) !important;
    max-width: calc(var(--carrom-board-width, 760px) - 24px) !important;
    min-height: 54px !important;
    padding: 6px 10px !important;
  }
}


/* --- patch v32: keep camera, lower 3D world; fullscreen slider to real bottom --- */
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap .placement-controls,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap .placement-controls,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls,
body.carrom-fullscreen-active.carrom-3d-pending .placement-controls {
  position: fixed !important;
  top: auto !important;
  bottom: max(0px, env(safe-area-inset-bottom)) !important;
  left: calc(var(--carrom-board-left, 0px) + (var(--carrom-board-width, 100vw) / 2)) !important;
  transform: translateX(-50%) !important;
  width: min(calc(var(--carrom-board-width, 100vw) - 82px), calc(100vw - 80px)) !important;
  max-width: min(calc(var(--carrom-board-width, 100vw) - 82px), calc(100vw - 80px)) !important;
  z-index: 980 !important;
}

body.carrom-fullscreen-active .board-wrap .placement-controls span,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap .placement-controls span {
  margin-bottom: 1px !important;
}

body.carrom-fullscreen-active .placement-slider-row {
  gap: 6px !important;
}

@media (max-width: 900px) {
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-pending .placement-controls {
    bottom: max(0px, env(safe-area-inset-bottom)) !important;
    left: calc(var(--carrom-board-left, 0px) + (var(--carrom-board-width, 100vw) / 2)) !important;
    width: min(calc(var(--carrom-board-width, 100vw) - 58px), calc(100vw - 56px)) !important;
    max-width: min(calc(var(--carrom-board-width, 100vw) - 58px), calc(100vw - 56px)) !important;
  }
}


/* --- patch v33: lock fullscreen 3D placement slider inside bottom-middle of board --- */
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap .placement-controls,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap .placement-controls,
body.carrom-fullscreen-active.carrom-3d-pending .board-wrap .placement-controls,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls,
body.carrom-fullscreen-active.carrom-3d-pending .placement-controls {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 76% !important;
  max-width: 76% !important;
  bottom: clamp(8px, 1.55vh, 14px) !important;
}

body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap .placement-controls > span,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap .placement-controls > span,
body.carrom-fullscreen-active.carrom-3d-pending .board-wrap .placement-controls > span {
  text-align: center !important;
  margin-bottom: 2px !important;
}

body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap .placement-slider-row,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap .placement-slider-row,
body.carrom-fullscreen-active.carrom-3d-pending .board-wrap .placement-slider-row {
  grid-template-columns: 1fr 40px !important;
  gap: 8px !important;
}

@media (max-width: 900px) {
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-pending .board-wrap .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-pending .placement-controls {
    width: 84% !important;
    max-width: 84% !important;
    bottom: clamp(6px, 1.2vh, 10px) !important;
  }
}


/* --- patch v34: hard lock fullscreen 3D placement controls to viewport bottom within board bounds --- */
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls,
body.carrom-fullscreen-active.carrom-3d-pending .placement-controls,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .placement-controls {
  position: fixed !important;
  left: calc(var(--carrom-board-left, 0px) + 18px) !important;
  right: calc(100vw - (var(--carrom-board-left, 0px) + var(--carrom-board-width, 100vw)) + 18px) !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  z-index: 120 !important;
}

body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls > span,
body.carrom-fullscreen-active.carrom-3d-pending .placement-controls > span,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .placement-controls > span {
  margin-bottom: 1px !important;
  text-align: center !important;
}

body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-slider-row,
body.carrom-fullscreen-active.carrom-3d-pending .placement-slider-row,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .placement-slider-row {
  grid-template-columns: minmax(0, 1fr) 42px !important;
  gap: 8px !important;
}

@media (max-width: 900px) {
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-pending .placement-controls,
  body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .placement-controls {
    left: calc(var(--carrom-board-left, 0px) + 10px) !important;
    right: calc(100vw - (var(--carrom-board-left, 0px) + var(--carrom-board-width, 100vw)) + 10px) !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
  }

  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .placement-slider-row,
  body.carrom-fullscreen-active.carrom-3d-pending .placement-slider-row,
  body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .placement-slider-row {
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 6px !important;
  }
}


/* --- patch v37: scoreboard-only fix, slider untouched --- */
.match-hud-layer {
  position: fixed !important;
  inset: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  z-index: 760 !important;
}

/* HUD now lives in its own parent, so board overflow cannot crop it. */
.match-hud,
body.carrom-3d-active.carrom-player-view .match-hud,
body.carrom-3d-pending .match-hud,
body.carrom-3d-pending.carrom-player-view .match-hud,
body:not(.carrom-3d-active) .match-hud,
body.carrom-fullscreen-active .match-hud,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .match-hud,
body.carrom-fullscreen-active.carrom-3d-pending .match-hud,
body.carrom-fullscreen-active:not(.carrom-3d-active) .match-hud {
  position: fixed !important;
  display: grid !important;
  left: calc(var(--carrom-board-left, 0px) + (var(--carrom-board-width, 760px) / 2)) !important;
  top: calc(var(--carrom-board-top, 0px) + clamp(2px, calc(var(--carrom-board-height, 760px) * 0.008), 8px)) !important;
  transform: translateX(-50%) !important;
  width: min(calc(var(--carrom-board-width, 760px) - clamp(24px, calc(var(--carrom-board-width, 760px) * 0.055), 72px)), calc(100vw - 12px)) !important;
  max-width: calc(100vw - 12px) !important;
  min-height: clamp(46px, calc(var(--carrom-board-height, 760px) * 0.070), 66px) !important;
  max-height: clamp(52px, calc(var(--carrom-board-height, 760px) * 0.086), 76px) !important;
  grid-template-columns: minmax(145px, 1fr) minmax(92px, 0.45fr) minmax(145px, 1fr) !important;
  gap: clamp(6px, calc(var(--carrom-board-width, 760px) * 0.012), 16px) !important;
  padding: clamp(5px, calc(var(--carrom-board-height, 760px) * 0.010), 8px) clamp(12px, calc(var(--carrom-board-width, 760px) * 0.022), 24px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 761 !important;
  pointer-events: none !important;
}

.match-hud .hud-name {
  font-size: clamp(8px, calc(var(--carrom-board-width, 760px) * 0.012), 11px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.match-hud .hud-player strong {
  font-size: clamp(22px, calc(var(--carrom-board-width, 760px) * 0.032), 36px) !important;
  line-height: .95 !important;
}

.match-hud .hud-coins {
  gap: clamp(2px, calc(var(--carrom-board-width, 760px) * 0.0045), 5px) !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.match-hud .coin-slot {
  width: clamp(6px, calc(var(--carrom-board-width, 760px) * 0.0095), 10px) !important;
  height: clamp(6px, calc(var(--carrom-board-width, 760px) * 0.0095), 10px) !important;
  flex: 0 0 clamp(6px, calc(var(--carrom-board-width, 760px) * 0.0095), 10px) !important;
}

.match-hud .turn-center {
  min-width: clamp(70px, calc(var(--carrom-board-width, 760px) * 0.10), 112px) !important;
  max-width: clamp(78px, calc(var(--carrom-board-width, 760px) * 0.13), 135px) !important;
  font-size: clamp(7px, calc(var(--carrom-board-width, 760px) * 0.0105), 10px) !important;
  padding: 2px 6px !important;
}

.match-hud .round-label,
.match-hud .mode-hud-label {
  font-size: clamp(6.8px, calc(var(--carrom-board-width, 760px) * 0.0095), 9px) !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .match-hud,
  body.carrom-3d-active.carrom-player-view .match-hud,
  body.carrom-3d-pending .match-hud,
  body.carrom-3d-pending.carrom-player-view .match-hud,
  body:not(.carrom-3d-active) .match-hud,
  body.carrom-fullscreen-active .match-hud,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .match-hud,
  body.carrom-fullscreen-active.carrom-3d-pending .match-hud,
  body.carrom-fullscreen-active:not(.carrom-3d-active) .match-hud {
    top: calc(var(--carrom-board-top, 0px) + 2px) !important;
    width: min(calc(var(--carrom-board-width, 760px) - 18px), calc(100vw - 8px)) !important;
    min-height: clamp(42px, calc(var(--carrom-board-height, 760px) * 0.062), 54px) !important;
    max-height: clamp(46px, calc(var(--carrom-board-height, 760px) * 0.075), 60px) !important;
    grid-template-columns: minmax(108px, 1fr) minmax(70px, 0.42fr) minmax(108px, 1fr) !important;
    gap: 5px !important;
    padding: 5px 8px !important;
  }
}


/* --- patch v38: scoreboard-only mobile 2D fullscreen fix + phone 3D A/D overlay --- */

/* 2D fullscreen phone/tablet: keep score HUD above the top carrom frame/pockets. */
@media (max-width: 900px) {
  body.carrom-fullscreen-active:not(.carrom-3d-active) .match-hud {
    top: max(2px, calc(var(--carrom-board-top, 0px) - clamp(42px, 7vh, 56px) - 4px)) !important;
    width: min(calc(var(--carrom-board-width, 760px) - 18px), calc(100vw - 8px)) !important;
    min-height: clamp(40px, 6vh, 52px) !important;
    max-height: clamp(44px, 7vh, 56px) !important;
    padding: 4px 8px !important;
    grid-template-columns: minmax(102px, 1fr) minmax(68px, 0.42fr) minmax(102px, 1fr) !important;
  }

  body.carrom-fullscreen-active:not(.carrom-3d-active) .match-hud .hud-player strong {
    font-size: clamp(20px, 4.8vw, 28px) !important;
  }

  body.carrom-fullscreen-active:not(.carrom-3d-active) .match-hud .hud-name {
    font-size: clamp(7px, 1.8vw, 9px) !important;
  }

  body.carrom-fullscreen-active:not(.carrom-3d-active) .match-hud .coin-slot {
    width: clamp(5px, 1.5vw, 7px) !important;
    height: clamp(5px, 1.5vw, 7px) !important;
    flex-basis: clamp(5px, 1.5vw, 7px) !important;
  }
}

/* Phone/tablet 3D camera side controls. These do not touch the striker slider. */
.mobile-camera-overlay {
  display: none;
  pointer-events: none;
}

@media (max-width: 900px), (pointer: coarse) {
  body.carrom-3d-active.carrom-player-view .mobile-camera-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    z-index: 74 !important;
    pointer-events: none !important;
  }

  body.carrom-3d-active.carrom-player-view .mobile-camera-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: clamp(42px, 7vw, 58px) !important;
    height: clamp(42px, 7vw, 58px) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,225,168,0.24) !important;
    background:
      radial-gradient(circle at 50% 20%, rgba(255,236,190,0.22), transparent 45%),
      linear-gradient(180deg, rgba(36,24,14,0.70), rgba(5,5,8,0.66)) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.12) !important;
    color: rgba(255,239,210,0.94) !important;
    font-size: clamp(28px, 5vw, 38px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    pointer-events: auto !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  body.carrom-3d-active.carrom-player-view .mobile-camera-left {
    left: clamp(8px, 2vw, 18px) !important;
  }

  body.carrom-3d-active.carrom-player-view .mobile-camera-right {
    right: clamp(8px, 2vw, 18px) !important;
  }

  body.carrom-3d-active.carrom-player-view .mobile-camera-btn.is-pressed {
    transform: translateY(-50%) scale(0.94) !important;
    background:
      radial-gradient(circle at 50% 20%, rgba(255,226,150,0.35), transparent 52%),
      linear-gradient(180deg, rgba(96,55,15,0.78), rgba(28,13,6,0.76)) !important;
  }
}

/* Hide the old side-panel camera dpad on phone because A/D now live over the 3D board. */
@media (max-width: 900px), (pointer: coarse) {
  body.carrom-3d-active.carrom-player-view .info-camera-dpad-wrap {
    display: none !important;
  }
}


/* --- patch v43: fullscreen 3D gets a taller stage; slider rules untouched --- */
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap,
body.carrom-fullscreen-active.carrom-3d-pending .board-wrap,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap {
  width: min(calc(100vw - var(--side-w) - var(--page-gap) - 8px), calc((100dvh - 8px) * 1.60)) !important;
  height: min(calc(100dvh - 8px), calc((100vw - var(--side-w) - var(--page-gap) - 8px) / 1.60)) !important;
  max-height: calc(100dvh - 8px) !important;
}

@media (max-width: 900px), (pointer: coarse) {
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap,
  body.carrom-fullscreen-active.carrom-3d-pending .board-wrap,
  body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap {
    width: min(calc(100vw - 4px), calc((100dvh - 4px) * 1.42)) !important;
    height: min(calc(100dvh - 4px), calc((100vw - 4px) / 1.42)) !important;
    max-height: calc(100dvh - 4px) !important;
  }
}


/* --- patch v44: safe 3D fullscreen stage, no vertical crop; slider rules untouched --- */
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap,
body.carrom-fullscreen-active.carrom-3d-pending .board-wrap,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap {
  width: min(calc(100vw - var(--side-w) - var(--page-gap) - 18px), calc((100dvh - 92px) * 1.68)) !important;
  height: min(calc(100dvh - 92px), calc((100vw - var(--side-w) - var(--page-gap) - 18px) / 1.68)) !important;
  max-height: calc(100dvh - 92px) !important;
  overflow: hidden !important;
}

@media (max-width: 900px), (pointer: coarse) {
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap,
  body.carrom-fullscreen-active.carrom-3d-pending .board-wrap,
  body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap {
    width: min(calc(100vw - 8px), calc((100dvh - 82px) * 1.54)) !important;
    height: min(calc(100dvh - 82px), calc((100vw - 8px) / 1.54)) !important;
    max-height: calc(100dvh - 82px) !important;
  }
}

/* v54 legality feedback */
.legality-hud {
  position: absolute;
  left: 50%;
  bottom: clamp(76px, 11vh, 118px);
  transform: translateX(-50%);
  z-index: 28;
  pointer-events: none;
  min-width: min(560px, 78%);
  max-width: min(680px, 86%);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(8, 14, 20, 0.70);
  border: 1px solid rgba(150, 235, 255, 0.28);
  color: rgba(220, 250, 255, 0.96);
  text-align: center;
  font-size: clamp(10px, 1.3vw, 13px);
  font-weight: 700;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity .14s ease, background .14s ease, border-color .14s ease;
}
.legality-hud.show { opacity: 1; }
.legality-hud.warn {
  background: rgba(50, 8, 8, 0.76);
  border-color: rgba(255, 100, 100, 0.62);
  color: rgba(255, 225, 225, 0.98);
}
body.carrom-3d-active .legality-hud { bottom: clamp(86px, 12vh, 130px); }


/* v55: no floating legality message box; timer lives inside scoreboard HUD */
.legality-hud {
  display: none !important;
}
.shot-clock-hud {
  display: none;
  margin-top: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(235,250,255,0.96);
  font-size: clamp(10px, 1.18vw, 13px);
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.15;
}
.shot-clock-hud.show {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shot-clock-hud.warn {
  background: rgba(90,26,12,0.48);
  border-color: rgba(255,165,90,0.55);
  color: #ffe2c0;
}
.shot-clock-hud.danger {
  background: rgba(95,10,10,0.58);
  border-color: rgba(255,90,90,0.70);
  color: #ffd2d2;
}


/* --- patch v61: flexible 3D stage + reorganized side-menu actions --- */
/* 3D is a camera viewport, so let it fill the entire available grid cell instead
   of forcing a widescreen ratio. The 2D board remains square. */
body.carrom-3d-active.carrom-player-view .board-wrap,
body.carrom-3d-pending .board-wrap,
body.carrom-3d-pending.carrom-player-view .board-wrap,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap,
body.carrom-fullscreen-active.carrom-3d-pending .board-wrap,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

body.carrom-3d-active.carrom-player-view #carrom3DCanvas,
body.carrom-3d-pending #carrom3DCanvas,
body.carrom-3d-active.carrom-player-view #carromCanvas,
body.carrom-3d-pending #carromCanvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

/* Keep HUD and placement sizing tied to the real viewport bounds calculated by JS. */
body.carrom-3d-active.carrom-player-view .match-hud,
body.carrom-3d-pending .match-hud {
  transform-origin: top center !important;
}

/* Side menu is a vertical layout: view/fullscreen stay together, reset sits last. */
.side-panel {
  display: flex !important;
  flex-direction: column !important;
}

.side-panel > * {
  flex-shrink: 0;
}

.view-action-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 7px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.view-action-row .view-toggle-btn,
.view-action-row .fullscreen-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

.reset-row {
  width: 100%;
  margin-top: auto;
  padding-top: 9px;
}

.reset-row #resetBtn {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#resetBtn:disabled,
#resetBtn[aria-disabled="true"] {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(0.65);
  box-shadow: none !important;
}

@media (max-width: 900px), (pointer: coarse) {
  body.carrom-3d-active.carrom-player-view .board-wrap,
  body.carrom-3d-pending .board-wrap,
  body.carrom-3d-pending.carrom-player-view .board-wrap,
  body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap,
  body.carrom-fullscreen-active.carrom-3d-pending .board-wrap,
  body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  .view-action-row {
    gap: 5px !important;
  }

  .reset-row {
    padding-top: 6px;
  }
}

/* v73: temporary 2D fallback only if the mobile WebGL context genuinely needs restoration. */
body.carrom-3d-recovering #carrom3DCanvas {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.carrom-3d-recovering #carromCanvas {
  opacity: 1 !important;
  visibility: visible !important;
}


/* v74: opponent selection and local two-player foundation. */
.opponent-select-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto 8px;
  max-width: 430px;
}

.opponent-ui-btn {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.72);
  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.opponent-ui-btn.selected {
  color: #fff;
  border-color: rgba(151,190,255,0.82);
  background: linear-gradient(180deg, rgba(86,137,255,0.44), rgba(70,82,177,0.32));
  box-shadow: 0 0 18px rgba(88,132,255,0.24), inset 0 1px 0 rgba(255,255,255,0.14);
}

.opponent-mode-hint {
  min-height: 34px;
  margin: 0 auto 12px;
  max-width: 460px;
  color: rgba(255,255,255,0.68);
  font-size: clamp(11px, calc(var(--board-size) * 0.017), 14px);
  line-height: 1.35;
}

@media (max-width: 560px) {
  .opponent-select-row {
    grid-template-columns: 1fr;
  }
}

.difficulty-row[hidden] { display: none !important; }


/* v75: local PvP polish, player names and match actions. */
.local-player-names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 430px;
  margin: 0 auto 12px;
}

.local-player-names[hidden] { display: none !important; }

.local-player-names label {
  display: grid;
  gap: 5px;
  text-align: left;
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.local-player-names input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  padding: 9px 10px;
  background: rgba(0,0,0,0.28);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: normal;
  outline: none;
}

.local-player-names input:focus {
  border-color: rgba(151,190,255,0.88);
  box-shadow: 0 0 0 2px rgba(88,132,255,0.18);
}

.match-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 7px;
}

.match-action-row:empty,
.match-action-row:has(> [hidden]:first-child + [hidden]:last-child) {
  display: none;
}

.match-action-row button {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.forfeit-btn {
  background: rgba(168,47,47,0.86) !important;
  border-color: rgba(255,145,145,0.54) !important;
}

.forfeit-btn.is-armed {
  background: rgba(212,49,49,0.96) !important;
  box-shadow: 0 0 14px rgba(255,64,64,0.34) !important;
}

.rematch-btn {
  background: rgba(60,118,191,0.92) !important;
  border-color: rgba(151,190,255,0.68) !important;
}


@media (max-width: 560px) {
  .local-player-names { grid-template-columns: 1fr; }
}


/* v76: local PvP orientation, explicit start and confirmation polish. */
.mode-ui-btn.selected {
  border-color: rgba(255, 214, 137, 0.92) !important;
  background:
    linear-gradient(180deg, rgba(255, 205, 105, 0.34), rgba(126, 54, 20, 0.42)),
    rgba(255,255,255,0.08) !important;
  box-shadow:
    0 0 0 2px rgba(255, 192, 83, 0.15),
    0 12px 34px rgba(0,0,0,0.38),
    0 0 24px rgba(255, 183, 77, 0.20) !important;
}

.start-game-btn {
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 220, 156, 0.58);
  background: linear-gradient(180deg, rgba(242, 153, 55, 0.98), rgba(153, 69, 23, 0.98));
  color: #fff8ea;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0,0,0,0.38), 0 0 22px rgba(255, 151, 52, 0.20);
  cursor: pointer;
}

.start-game-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.55);
  box-shadow: none;
}

.match-action-row {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
  gap: 8px;
}

.forfeit-btn,
.rematch-btn,
.reset-row #resetBtn {
  min-height: 42px;
  border-radius: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.forfeit-btn {
  background: linear-gradient(180deg, rgba(185, 62, 62, 0.96), rgba(105, 29, 35, 0.96)) !important;
  border-color: rgba(255, 155, 155, 0.58) !important;
  box-shadow: 0 8px 20px rgba(70, 5, 12, 0.30), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

.forfeit-btn:hover,
.forfeit-btn:focus-visible {
  background: linear-gradient(180deg, rgba(210, 72, 72, 0.98), rgba(126, 34, 42, 0.98)) !important;
  box-shadow: 0 10px 24px rgba(70, 5, 12, 0.38), 0 0 18px rgba(255, 80, 80, 0.18) !important;
}

/* Player 2 sees the complete 2D board from their own side. */
body.carrom-local-pvp[data-camera-seat="p2"] #carromCanvas {
  -webkit-transform: rotate(180deg) translateZ(0) !important;
  transform: rotate(180deg) translateZ(0) !important;
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}

.confirm-overlay[hidden] { display: none !important; }

.confirm-card {
  width: min(92vw, 430px);
  padding: 24px;
  border: 1px solid rgba(255, 215, 155, 0.28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 179, 83, 0.12), transparent 46%),
    rgba(13, 12, 17, 0.98);
  color: #fff;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.10);
}

.confirm-kicker {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 197, 116, 0.88);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.confirm-card h2 {
  margin: 0 0 9px;
  font-size: clamp(25px, 6vw, 34px);
  line-height: 1.05;
}

.confirm-card p {
  margin: 0 0 20px;
  color: rgba(255,255,255,0.72);
  line-height: 1.45;
}

.confirm-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.confirm-action-row button {
  min-height: 46px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.confirm-cancel-btn {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

.confirm-accept-btn {
  background: linear-gradient(180deg, rgba(194, 60, 60, 0.98), rgba(108, 29, 36, 0.98)) !important;
  border-color: rgba(255, 145, 145, 0.60) !important;
}

@media (max-width: 560px) {
  .confirm-card { padding: 20px; }
  .confirm-action-row { grid-template-columns: 1fr; }
}


/* v77: private online room interface (transport connects in the next step). */
.mode-select-card {
  max-height: calc(100% - 8px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.opponent-select-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 560px;
}

.online-room-panel {
  display: grid;
  gap: 10px;
  max-width: 500px;
  margin: 0 auto 12px;
  padding: 12px;
  border: 1px solid rgba(130, 179, 255, 0.22);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(45, 79, 141, 0.16), rgba(0, 0, 0, 0.22));
  text-align: left;
}

.online-room-panel[hidden],
.online-lobby-card[hidden],
.online-room-actions[hidden] { display: none !important; }

.online-name-field {
  display: grid;
  gap: 5px;
  color: rgba(255,255,255,0.72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.online-name-field input,
.online-join-row input {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  padding: 9px 10px;
  background: rgba(0,0,0,0.32);
  color: #fff;
  font-size: 14px;
  font-weight: 850;
  outline: none;
  box-sizing: border-box;
}

.online-name-field input:focus,
.online-join-row input:focus {
  border-color: rgba(140, 190, 255, 0.88);
  box-shadow: 0 0 0 2px rgba(70, 135, 255, 0.17);
}

.online-room-actions { display: grid; gap: 8px; }
.online-join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.online-join-row input { text-align: center; letter-spacing: 0.22em; text-transform: uppercase; }

.online-room-panel button {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(151,190,255,0.45);
  background: linear-gradient(180deg, rgba(69,123,220,0.94), rgba(45,67,142,0.96));
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  cursor: pointer;
}

.online-room-panel button:disabled { opacity: 0.42; cursor: not-allowed; }
.online-primary-btn { width: 100%; }

.online-lobby-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(0,0,0,0.25);
}

.online-lobby-kicker {
  color: rgba(160,205,255,0.9);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.online-room-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.online-room-code-row strong {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,0.08);
  color: #fff3d6;
  text-align: center;
  font-size: clamp(22px, 5vw, 30px);
  letter-spacing: 0.18em;
}

.online-room-code-row button { min-height: 38px; padding: 0 13px; }

.online-player-status-list { display: grid; gap: 6px; }
.online-player-status-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255,255,255,0.055);
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  font-weight: 800;
}
.online-player-status-list b { color: rgba(255,205,118,0.92); }
.online-player-status-list b.is-ready { color: #89e5ac; }

.online-lobby-message,
.online-server-note {
  margin: 0;
  color: rgba(255,255,255,0.66);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}
.online-server-note { color: rgba(255,194,109,0.78); }
.online-lobby-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.online-ready-btn.is-ready { background: linear-gradient(180deg, rgba(52,162,103,0.96), rgba(26,94,64,0.98)); }
.online-leave-btn { background: linear-gradient(180deg, rgba(143,60,67,0.92), rgba(88,33,42,0.96)) !important; border-color: rgba(255,145,145,0.40) !important; }

@media (max-width: 700px) {
  .opponent-select-row { grid-template-columns: 1fr; }
  .mode-select-card { padding: 14px; }
  .mode-select-card h2 { margin-bottom: 12px; font-size: clamp(28px, 8vw, 46px); }
  .mode-ui-btn { min-height: 62px; }
}

@media (max-width: 430px) {
  .online-join-row,
  .online-lobby-actions { grid-template-columns: 1fr; }
}

/* v78: live Cloudflare room-server connection status. */
.online-server-note[data-status="connected"] { color: #8ee9af; }
.online-server-note[data-status="connecting"] { color: rgba(255, 211, 128, 0.94); }
.online-server-note[data-status="error"] { color: #ffaaaa; }
.online-server-note[data-status="ready"] { color: rgba(164, 213, 255, 0.90); }


/* v79: keep the scoreboard out of the menu/lobby. */
#matchHudLayer[hidden],
body.carrom-mode-selecting #matchHudLayer {
  display: none !important;
}

/* v82: dedicated private-room lobby screen.
   Before joining, the original compact setup screen stays unchanged.
   After Create / Join, only the room lobby remains visible. */
.mode-select-overlay.online-lobby-screen {
  padding: clamp(10px, 2.4vw, 24px);
  overflow: hidden;
}

.mode-select-overlay.online-lobby-screen .mode-select-card,
.mode-select-card.online-lobby-screen-card {
  width: min(92vw, 540px);
  max-width: 540px;
  max-height: min(92dvh, 650px);
  overflow: hidden;
  padding: clamp(18px, 3.2vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mode-select-overlay.online-lobby-screen .mode-eyebrow,
.mode-select-overlay.online-lobby-screen .mode-select-card > h2,
.mode-select-overlay.online-lobby-screen .opponent-select-row,
.mode-select-overlay.online-lobby-screen .opponent-mode-hint,
.mode-select-overlay.online-lobby-screen .local-player-names,
.mode-select-overlay.online-lobby-screen .mode-button-row,
.mode-select-overlay.online-lobby-screen .online-name-field,
.mode-select-overlay.online-lobby-screen .online-room-actions,
.mode-select-overlay.online-lobby-screen .start-game-btn {
  display: none !important;
}

.mode-select-overlay.online-lobby-screen .online-room-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 12px;
}

.mode-select-overlay.online-lobby-screen .online-lobby-card {
  width: 100%;
  box-sizing: border-box;
  gap: clamp(10px, 2vh, 16px);
  padding: clamp(18px, 4vw, 28px);
  border-radius: 20px;
  border-color: rgba(151, 190, 255, 0.30);
  background:
    radial-gradient(circle at 50% 0%, rgba(76, 136, 255, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(20, 33, 62, 0.96), rgba(8, 12, 23, 0.98));
  box-shadow: 0 24px 80px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.08);
}

.mode-select-overlay.online-lobby-screen .online-lobby-kicker {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.24em;
}

.mode-select-overlay.online-lobby-screen .online-room-code-row strong {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(27px, 8vw, 38px);
  letter-spacing: 0.22em;
  border: 1px solid rgba(255,255,255,0.10);
}

.mode-select-overlay.online-lobby-screen .online-room-code-row button {
  min-height: 48px;
  padding-inline: 17px;
}

.mode-select-overlay.online-lobby-screen .online-player-status-list {
  gap: 9px;
}

.mode-select-overlay.online-lobby-screen .online-player-status-list > div {
  min-height: 45px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}

.mode-select-overlay.online-lobby-screen .online-lobby-message {
  min-height: 18px;
  font-size: 12px;
}

.mode-select-overlay.online-lobby-screen .online-lobby-actions button {
  min-height: 48px;
  border-radius: 12px;
}

.mode-select-overlay.online-lobby-screen .online-server-note {
  margin-top: 0;
  font-size: 10px;
}

@media (max-width: 520px), (max-height: 620px) {
  .mode-select-overlay.online-lobby-screen .mode-select-card,
  .mode-select-card.online-lobby-screen-card {
    width: min(96vw, 520px);
    max-height: calc(100dvh - 12px);
    padding: 8px;
  }

  .mode-select-overlay.online-lobby-screen .online-lobby-card {
    gap: 8px;
    padding: 13px;
    border-radius: 15px;
  }

  .mode-select-overlay.online-lobby-screen .online-room-code-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mode-select-overlay.online-lobby-screen .online-room-code-row strong,
  .mode-select-overlay.online-lobby-screen .online-room-code-row button,
  .mode-select-overlay.online-lobby-screen .online-lobby-actions button {
    min-height: 40px;
  }

  .mode-select-overlay.online-lobby-screen .online-player-status-list > div {
    min-height: 36px;
    padding: 7px 9px;
  }

  .mode-select-overlay.online-lobby-screen .online-lobby-actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* v84: server-confirmed online result, rematch and lobby flow. */
.online-lobby-btn {
  background: linear-gradient(180deg, rgba(74, 91, 126, 0.96), rgba(41, 50, 75, 0.98)) !important;
  border-color: rgba(168, 190, 235, 0.52) !important;
}

.online-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 5, 9, 0.78);
  backdrop-filter: blur(9px);
}
.online-result-overlay[hidden] { display: none !important; }
.online-result-card {
  width: min(92vw, 470px);
  padding: 28px;
  border: 1px solid rgba(255, 214, 143, 0.32);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 181, 76, 0.17), transparent 44%),
    linear-gradient(180deg, rgba(24, 23, 31, 0.99), rgba(10, 11, 17, 0.99));
  box-shadow: 0 30px 90px rgba(0,0,0,0.62), 0 0 36px rgba(255, 157, 53, 0.10);
  color: #fff;
  text-align: center;
}
.online-result-kicker {
  display: block;
  color: rgba(255, 202, 114, 0.88);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.online-result-card h2 {
  margin: 8px 0 8px;
  font-size: clamp(30px, 7vw, 48px);
  line-height: 1;
}
.online-result-message {
  margin: 0 auto 12px;
  color: rgba(244, 246, 255, 0.78);
  line-height: 1.45;
}
.online-result-score {
  display: block;
  min-height: 28px;
  margin: 8px 0;
  color: #ffd58c;
  font-size: 20px;
  letter-spacing: .04em;
}
.online-result-status {
  min-height: 24px;
  margin: 8px 0 18px;
  color: rgba(166, 215, 255, 0.88);
  font-size: 14px;
}
.online-result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.online-result-actions button {
  min-height: 46px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font: inherit;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
}
.online-result-rematch {
  background: linear-gradient(180deg, rgba(65, 145, 208, 0.98), rgba(34, 80, 137, 0.98));
  border-color: rgba(155, 210, 255, 0.56) !important;
}
.online-result-rematch.is-requested { opacity: .62; cursor: wait; }
.online-result-lobby {
  background: linear-gradient(180deg, rgba(83, 101, 139, 0.98), rgba(43, 51, 78, 0.98));
}
.online-result-leave {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, rgba(151, 62, 68, 0.96), rgba(87, 31, 40, 0.98));
  border-color: rgba(255, 147, 147, 0.38) !important;
}
@media (max-width: 520px) {
  .online-result-card { padding: 23px 18px; }
  .online-result-actions { grid-template-columns: 1fr; }
  .online-result-leave { grid-column: auto; }
}

/* v85A: the shared Agnibeena account owns the online display name. */
.online-name-field input[readonly] {
  cursor: default;
  color: #f1e4ff;
  border-color: rgba(177, 124, 255, 0.48);
  background: rgba(96, 52, 145, 0.18);
}

/* v86 FIX2: keep compact account controls inside every Carrom viewport. */
.site-header.carrom-logo-header .agn-account-root,
.site-header .agn-account-root {
  position: fixed !important;
  top: 8px !important;
  right: 10px !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 3000000 !important;
}

@media (max-width: 900px) {
  .site-header.carrom-logo-header .agn-account-root,
  .site-header .agn-account-root {
    top: 4px !important;
    right: 6px !important;
  }
}

/* v86 FIX6: account icon sits beside the logo before play, then locks into the scoreboard. */
.hud-account-slot {
  position: absolute;
  top: 50%;
  right: clamp(7px, 1.2vw, 13px);
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  pointer-events: none;
}

body.agn-account-ui-locked .match-hud {
  padding-right: clamp(46px, calc(var(--carrom-board-width, 760px) * 0.07), 58px) !important;
}

.hud-account-slot .agn-account-root,
.hud-account-slot .agn-profile-button,
.hud-account-slot .agn-account-button {
  margin: 0 !important;
}

.hud-account-slot .agn-profile-button,
.hud-account-slot .agn-account-button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
}

.hud-account-slot .agn-profile-avatar,
.hud-account-slot .agn-profile-avatar-fallback {
  width: 24px !important;
  height: 24px !important;
}

@media (max-width: 900px) {
  .carrom-logo-header > .agn-account-root {
    margin-right: 5px !important;
  }

  .hud-account-slot {
    right: 5px;
    width: 28px;
    height: 28px;
  }

  body.agn-account-ui-locked .match-hud {
    padding-right: 38px !important;
  }

  .hud-account-slot .agn-profile-button,
  .hud-account-slot .agn-account-button {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
  }

  .hud-account-slot .agn-profile-avatar,
  .hud-account-slot .agn-profile-avatar-fallback {
    width: 20px !important;
    height: 20px !important;
  }
}

/* v88 STEP1: profile stays beside the Agnibeena logo before play. During a
   match, each contestant has an avatar beside the scoreboard name and the
   signed-in player's real account avatar is moved there in locked mode. */
.site-header.carrom-logo-header .agn-account-root,
.site-header .agn-account-root {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 0 0 6px !important;
  transform: none !important;
  z-index: 1 !important;
}

.carrom-logo-header {
  display: flex !important;
  align-items: center !important;
}

.hud-account-slot {
  display: none !important;
}

body.agn-account-ui-locked .match-hud {
  padding-right: 12px !important;
}

.match-hud .hud-name {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.match-hud .hud-player-left .hud-name {
  justify-content: flex-start !important;
}

.match-hud .hud-player-right .hud-name {
  justify-content: flex-end !important;
}

.match-hud .hud-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-avatar-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  overflow: visible;
}

.hud-static-avatar,
.hud-static-avatar img,
.hud-static-avatar > span {
  width: 23px;
  height: 23px;
  border-radius: 50%;
}

.hud-static-avatar {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(145deg, rgba(122,68,198,.96), rgba(42,91,136,.96));
  box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.18);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.hud-static-avatar.is-ai {
  background: linear-gradient(145deg, #4b5666, #171b22);
}

.hud-static-avatar img {
  display: block;
  object-fit: cover;
}

.hud-static-avatar > span {
  display: grid;
  place-items: center;
}

.hud-avatar-slot > .agn-account-root {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  width: 25px !important;
  height: 25px !important;
  margin: 0 !important;
  z-index: 2 !important;
}

.hud-avatar-slot .agn-profile-button {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  padding: 1px !important;
  border-color: rgba(255,255,255,.28) !important;
  opacity: .92 !important;
}

.hud-avatar-slot .agn-profile-avatar,
.hud-avatar-slot .agn-profile-avatar-fallback {
  width: 21px !important;
  height: 21px !important;
  font-size: 8px !important;
}

.hud-avatar-slot .agn-profile-hover-name {
  display: none !important;
}

@media (max-width: 900px) {
  .site-header.carrom-logo-header .agn-account-root,
  .site-header .agn-account-root {
    margin-left: 4px !important;
  }

  body.agn-account-ui-locked .match-hud {
    padding-right: 7px !important;
  }

  .match-hud .hud-name {
    gap: 3px !important;
  }

  .hud-avatar-slot {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  .hud-static-avatar,
  .hud-static-avatar img,
  .hud-static-avatar > span {
    width: 18px;
    height: 18px;
  }

  .hud-static-avatar {
    font-size: 6.5px;
  }

  .hud-avatar-slot > .agn-account-root,
  .hud-avatar-slot .agn-profile-button {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .hud-avatar-slot .agn-profile-avatar,
  .hud-avatar-slot .agn-profile-avatar-fallback {
    width: 17px !important;
    height: 17px !important;
    font-size: 6.5px !important;
  }
}

.agn-account-root[hidden] {
  display: none !important;
}

/* v88 STEP1 FIX1: align the account control with the left information panel. */
.site-header.carrom-logo-header {
  left: 8px !important;
  gap: 4px !important;
}

.site-header.carrom-logo-header .agn-account-root {
  margin-left: 2px !important;
}

.site-header.carrom-logo-header .agn-account-button {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

.site-header.carrom-logo-header .agn-profile-button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

.site-header.carrom-logo-header .agn-profile-avatar,
.site-header.carrom-logo-header .agn-profile-avatar-fallback {
  width: 27px !important;
  height: 27px !important;
}

.site-header.carrom-logo-header .agn-profile-hover-name {
  left: 0 !important;
  right: auto !important;
}

@media (max-width: 900px) {
  .site-header.carrom-logo-header { left: 4px !important; }
  .site-header.carrom-logo-header .agn-account-button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }
  .site-header.carrom-logo-header .agn-profile-button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
  .site-header.carrom-logo-header .agn-profile-avatar,
  .site-header.carrom-logo-header .agn-profile-avatar-fallback {
    width: 24px !important;
    height: 24px !important;
  }
}

/* v88 STEP2: ranked selection, rating lobby details and leaderboard. */
.online-match-type {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 11px;
  background: rgba(0,0,0,.18);
}
.online-match-type[hidden] { display: none !important; }
.online-match-type > span {
  color: rgba(255,255,255,.68);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.online-match-type-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.online-match-type-buttons button {
  min-height: 36px;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.65);
}
.online-match-type-buttons button.selected {
  border-color: rgba(180,147,255,.65);
  background: linear-gradient(180deg,rgba(113,68,170,.88),rgba(60,50,130,.94));
  color: #fff;
}
.online-match-type small { color: rgba(255,255,255,.53); font-size: 10.5px; line-height: 1.35; }
.online-match-type small[data-status="warning"] { color: #ffd89b; }
.online-leaderboard-open {
  background: linear-gradient(180deg,rgba(103,72,153,.9),rgba(54,42,97,.96)) !important;
  border-color: rgba(195,161,255,.38) !important;
}
.online-lobby-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.online-match-badge {
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.7);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.online-match-badge.is-ranked {
  border-color: rgba(235,190,91,.45);
  background: rgba(130,85,20,.25);
  color: #ffe0a0;
}
.mode-select-overlay.online-lobby-screen .online-match-type { display: none !important; }
.mode-select-overlay.online-lobby-screen .online-lobby-heading { justify-content: center; flex-wrap: wrap; }

body.carrom-modal-open { overflow: hidden !important; }
.carrom-leaderboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000000;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(2,3,8,.78);
  backdrop-filter: blur(11px);
}
.carrom-leaderboard-overlay[hidden] { display: none !important; }
.carrom-leaderboard-card {
  width: min(620px, 100%);
  max-height: min(760px, calc(100dvh - 24px));
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid rgba(185,151,255,.28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 0%, rgba(121,69,182,.25), transparent 42%),
    linear-gradient(180deg,rgba(20,21,34,.99),rgba(8,9,17,.99));
  box-shadow: 0 30px 100px rgba(0,0,0,.7);
  color: #fff;
}
.carrom-leaderboard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.carrom-leaderboard-head span { color: #c8a9ff; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.carrom-leaderboard-head h2 { margin: 3px 0 0; font-size: 28px; }
#carromLeaderboardCloseBtn {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.carrom-leaderboard-note { margin: 8px 0 16px; color: rgba(255,255,255,.55); font-size: 12px; }
.carrom-leaderboard-me { margin-bottom: 10px; }
.carrom-leaderboard-me button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(229,190,93,.32);
  border-radius: 11px;
  background: rgba(112,76,20,.18);
  color: #fff0c5;
  cursor: pointer;
}
.carrom-leaderboard-me span { color: rgba(255,255,255,.58); }
.carrom-leaderboard-list { display: grid; gap: 7px; }
.carrom-leaderboard-row {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.carrom-leaderboard-row:hover,
.carrom-leaderboard-row:focus-visible { border-color: rgba(184,143,255,.55); background: rgba(95,58,145,.18); outline: none; }
.carrom-rank-number { color: #d8bdff; font-weight: 900; text-align: center; }
.carrom-leaderboard-avatar,
.carrom-public-profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(145deg,#7c43cf,#2c6ea3);
}
.carrom-leaderboard-avatar.is-fallback,
.carrom-public-profile-avatar.is-fallback { display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.carrom-leaderboard-player { min-width: 0; }
.carrom-leaderboard-player strong,
.carrom-leaderboard-player small,
.carrom-leaderboard-rating strong,
.carrom-leaderboard-rating small { display: block; }
.carrom-leaderboard-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.carrom-leaderboard-player small { margin-top: 3px; color: rgba(255,255,255,.5); font-size: 10px; }
.carrom-leaderboard-rating { text-align: right; }
.carrom-leaderboard-rating strong { color: #ffe1a1; font-size: 16px; }
.carrom-leaderboard-rating small { color: rgba(255,255,255,.42); font-size: 9px; text-transform: uppercase; }
.carrom-leaderboard-empty,
.carrom-leaderboard-error { padding: 20px; border-radius: 12px; background: rgba(255,255,255,.045); color: rgba(255,255,255,.65); text-align: center; }
.carrom-leaderboard-error { color: #ffb9b9; }
.carrom-public-profile { display: grid; gap: 14px; }
.carrom-public-profile-back {
  justify-self: start;
  border: 0;
  background: transparent;
  color: #cdb3ff;
  cursor: pointer;
  font-weight: 800;
}
.carrom-public-profile-identity {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}
.carrom-public-profile-avatar { width: 50px; height: 50px; }
.carrom-public-profile-identity strong,
.carrom-public-profile-identity small { display: block; }
.carrom-public-profile-identity small { margin-top: 4px; color: rgba(255,255,255,.5); }
.carrom-public-profile-rating { text-align: right; }
.carrom-public-profile-rating strong { color: #ffe1a1; font-size: 24px; }
.carrom-public-profile-rating small { color: rgba(255,255,255,.45); font-size: 9px; text-transform: uppercase; }
.carrom-public-profile-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.carrom-public-profile-stats > div { padding: 10px 6px; border-radius: 10px; background: rgba(255,255,255,.055); text-align: center; }
.carrom-public-profile-stats b,
.carrom-public-profile-stats span { display: block; }
.carrom-public-profile-stats b { font-size: 15px; }
.carrom-public-profile-stats span { margin-top: 3px; color: rgba(255,255,255,.47); font-size: 8.5px; text-transform: uppercase; }

@media (max-width: 560px) {
  .carrom-leaderboard-card { padding: 15px; border-radius: 16px; }
  .carrom-leaderboard-row { grid-template-columns: 32px 34px minmax(0,1fr) auto; gap: 7px; padding: 8px; }
  .carrom-rank-number { font-size: 11px; }
  .carrom-leaderboard-avatar { width: 32px; height: 32px; }
  .carrom-public-profile-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* v88 STEP3: saved replays, full-stat leaderboard refresh and playback controls. */
.carrom-leaderboard-head-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.carrom-leaderboard-head-actions button,
.carrom-replay-head button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.065);
  color: #fff;
  font: 800 19px/1 Arial, sans-serif;
  cursor: pointer;
}
.carrom-leaderboard-player small + small { margin-top: 1px; }
.agn-carrom-profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 8px;
}
.agn-carrom-profile-actions button {
  min-width: 0;
  padding: 9px 7px;
}
.carrom-replay-overlay {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4,3,8,.76);
  backdrop-filter: blur(8px);
}
.carrom-replay-overlay[hidden] { display: none !important; }
.carrom-replay-card {
  width: min(560px, calc(100vw - 24px));
  max-height: min(690px, calc(100vh - 24px));
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(184,143,255,.26);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(31,20,50,.98), rgba(12,9,20,.98));
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.carrom-replay-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.carrom-replay-head span {
  color: #c8a9ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.carrom-replay-head h2 { margin: 3px 0 0; font-size: 28px; }
.carrom-replay-note,
.carrom-replay-status {
  margin: 8px 0 12px;
  color: rgba(255,255,255,.56);
  font-size: 12px;
}
.carrom-replay-status { min-height: 16px; color: #d8c6ff; }
.carrom-replay-list { display: grid; gap: 9px; }
.carrom-replay-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
}
.carrom-replay-main strong,
.carrom-replay-main small { display: block; }
.carrom-replay-main strong { font-size: 14px; }
.carrom-replay-main small { margin-top: 4px; color: rgba(255,255,255,.52); font-size: 10px; }
.carrom-replay-actions { display: flex; gap: 6px; }
.carrom-replay-actions button,
.online-result-save-replay {
  border: 1px solid rgba(184,143,255,.36);
  border-radius: 9px;
  background: rgba(98,62,145,.22);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.carrom-replay-actions button { padding: 8px 10px; }
.carrom-replay-actions button:last-child { border-color: rgba(255,130,130,.28); background: rgba(120,35,44,.18); }
.carrom-replay-empty,
.carrom-replay-error {
  padding: 20px;
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.65);
  text-align: center;
}
.carrom-replay-error { color: #ffb9b9; }
.online-result-save-replay { padding: 10px 14px; }
.carrom-replay-playback {
  position: fixed;
  z-index: 10020;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto minmax(120px,1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(720px, calc(100vw - 20px));
  padding: 9px 10px 9px 14px;
  border: 1px solid rgba(184,143,255,.34);
  border-radius: 14px;
  background: rgba(16,10,27,.96);
  box-shadow: 0 -12px 34px rgba(0,0,0,.42);
}
.carrom-replay-playback[hidden] { display: none !important; }
.carrom-replay-playback strong { font-size: 12px; }
.carrom-replay-playback span { color: rgba(255,255,255,.62); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrom-replay-playback button {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 620px) {
  .carrom-replay-card { padding: 15px; border-radius: 16px; }
  .carrom-replay-row { grid-template-columns: 1fr; }
  .carrom-replay-actions { justify-content: stretch; }
  .carrom-replay-actions button { flex: 1; }
  .carrom-replay-playback {
    bottom: max(8px, env(safe-area-inset-bottom));
    grid-template-columns: minmax(0,1fr) auto;
  }
  .carrom-replay-playback strong { grid-column: 1 / -1; }
}


/* === v92: verified owner-only floating 3D/light/camera fine tuner === */
#carrom3DFineTunePanel,
#carrom3DFineTunePanel[hidden],
.carrom-3d-inline-panel,
.carrom-3d-inline-panel[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.agn-admin-3d-tuner #carrom3DFineTunePanel {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 9900 !important;
  width: min(380px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - 20px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 9px 11px 12px !important;
  border: 1px solid rgba(255, 219, 155, 0.30) !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,0.94) !important;
  background: rgba(6, 7, 11, 0.90) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(12px) !important;
}

body.agn-admin-3d-tuner #carrom3DFineTunePanel:not([open]) {
  width: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 6px !important;
}

#carrom3DFineTunePanel > summary {
  list-style: none !important;
  cursor: pointer !important;
  user-select: none !important;
  padding: 8px 11px !important;
  border-radius: 10px !important;
  background: rgba(255, 190, 94, 0.13) !important;
  color: #ffe4b3 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#carrom3DFineTunePanel > summary::-webkit-details-marker { display: none !important; }
#carrom3DFineTunePanel > summary::before { content: "⚙ "; }

#carrom3DFineTunePanel .inline-3d-row,
#carrom3DFineTunePanel .inline-toggle {
  display: grid !important;
  grid-template-columns: 104px minmax(120px, 1fr) 48px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

#carrom3DFineTunePanel .inline-toggle {
  grid-template-columns: auto 1fr !important;
}

#carrom3DFineTunePanel .inline-3d-row-box {
  grid-template-columns: 70px minmax(90px, 1fr) 68px 42px !important;
}

#carrom3DFineTunePanel input[type="range"] { width: 100% !important; }
#carrom3DFineTunePanel .inline-3d-number {
  width: 68px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#carrom3DFineTunePanel .piece-3d-readout {
  margin: 9px 0 !important;
  padding: 8px !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,0.055) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

#carrom3DFineTunePanel .fine-tune-divider {
  margin: 14px 0 7px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,0.13) !important;
  color: #ffd89a !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

#carrom3DFineTunePanel .fine-tune-light-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  margin: 0 !important;
}

#carrom3DFineTunePanel .fine-tune-light-grid label {
  display: grid !important;
  grid-template-columns: 104px minmax(120px, 1fr) 48px !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
}

#carrom3DFineTunePanel .fine-tune-light-grid span,
#carrom3DFineTunePanel .inline-3d-row span {
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

#carrom3DFineTunePanel .inline-reset-3d {
  width: 100% !important;
  margin-top: 12px !important;
}

@media (max-width: 780px) {
  body.agn-admin-3d-tuner #carrom3DFineTunePanel {
    top: 6px !important;
    right: 6px !important;
    width: min(350px, calc(100vw - 12px)) !important;
    max-height: calc(100vh - 12px) !important;
  }
}


/* --- v96: authoritative responsive 3D viewport ---
   Historical stage-ratio rules above remain for release history, but this final
   rule is the only 3D viewport sizing rule that wins. Camera JS performs the
   actual board fit, so the canvas simply occupies the real available grid cell. */
body.carrom-3d-active.carrom-player-view .board-wrap,
body.carrom-3d-pending .board-wrap,
body.carrom-3d-pending.carrom-player-view .board-wrap,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view .board-wrap,
body.carrom-fullscreen-active.carrom-3d-pending .board-wrap,
body.carrom-fullscreen-active.carrom-3d-pending.carrom-player-view .board-wrap {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

body.carrom-3d-active.carrom-player-view #carrom3DCanvas,
body.carrom-3d-pending #carrom3DCanvas,
body.carrom-fullscreen-active.carrom-3d-active.carrom-player-view #carrom3DCanvas,
body.carrom-fullscreen-active.carrom-3d-pending #carrom3DCanvas {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}


/* === v97: mobile-first controls, accessible touch targets and options drawer === */
.mobile-control-hint,
.mobile-match-toolbar,
.mobile-panel-close { display: none; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(145, 218, 255, 0.95) !important;
  outline-offset: 3px !important;
}

@media (max-width: 900px), (pointer: coarse) {
  .mobile-panel-close {
    display: grid;
    place-items: center;
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 0 8px auto;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 28px;
  }

  body.carrom-match-live .side-panel {
    display: none !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .side-panel {
    display: block !important;
    position: fixed !important;
    z-index: 10030 !important;
    inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) auto !important;
    width: min(360px, calc(100vw - 16px)) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow: auto !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 18px !important;
    background: rgba(10, 9, 17, .96) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.65) !important;
    backdrop-filter: blur(16px) !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open::after {
    content: "";
    position: fixed;
    z-index: 10020;
    inset: 0;
    background: rgba(0,0,0,.58);
    pointer-events: none;
  }

  body.carrom-match-live .mobile-match-toolbar:not([hidden]) {
    display: flex !important;
    position: fixed;
    z-index: 10010;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 15px;
    background: rgba(11,10,18,.84);
    box-shadow: 0 8px 24px rgba(0,0,0,.42);
    backdrop-filter: blur(12px);
  }

  .mobile-match-toolbar button {
    min-width: 48px;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 11px;
    background: rgba(255,255,255,.07);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    touch-action: manipulation;
  }

  .mobile-match-toolbar #mobileControlModeBtn[aria-pressed="true"] {
    border-color: rgba(109,224,255,.55);
    background: rgba(54,155,190,.28);
  }

  .mobile-control-hint {
    display: block;
    width: 100%;
    margin: 2px 0 4px;
    color: rgba(255,255,255,.72);
    font-size: clamp(9px, 1.7vw, 12px);
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
  }

  body.carrom-match-live .board-wrap .placement-controls,
  body.carrom-match-live .placement-controls {
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 60px) !important;
  }

  .placement-back-btn,
  .camera-btn,
  .mobile-camera-btn,
  .shot-control-toggle,
  .view-toggle-btn,
  .fullscreen-btn,
  .online-ready-btn,
  .online-leave-btn {
    min-width: 48px !important;
    min-height: 48px !important;
  }

  #strikerSlider::-webkit-slider-thumb {
    width: 48px !important;
    height: 48px !important;
  }
  #strikerSlider::-moz-range-thumb {
    width: 48px !important;
    height: 48px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}


/* === v100: Classic/Pull names + phone 3D full-stage layout === */
@media (max-width: 900px), (pointer: coarse) {
  .mobile-panel-close {
    display: none !important;
  }

  body.carrom-match-live {
    --carrom-mobile-menu-width: clamp(220px, 28vw, 360px);
  }

  /* 3D with the options closed: release the old sidebar column completely. */
  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .carrom-page,
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .carrom-page {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .board-wrap,
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .board-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    aspect-ratio: auto !important;
  }

  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .side-panel,
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .side-panel {
    display: none !important;
  }

  /* Open 3D options in the original left-side position and resize the stage. */
  body.carrom-match-live.carrom-mobile-menu-open.carrom-3d-active .carrom-page,
  body.carrom-match-live.carrom-mobile-menu-open.carrom-3d-pending .carrom-page {
    --side-w: var(--carrom-mobile-menu-width) !important;
    grid-template-columns: var(--carrom-mobile-menu-width) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 4px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open.carrom-3d-active .board-wrap,
  body.carrom-match-live.carrom-mobile-menu-open.carrom-3d-pending .board-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    aspect-ratio: auto !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .side-panel {
    display: flex !important;
    position: fixed !important;
    left: 4px !important;
    right: auto !important;
    top: 44px !important;
    bottom: 4px !important;
    inset: 44px auto 4px 4px !important;
    width: calc(var(--carrom-mobile-menu-width) - 4px) !important;
    max-width: calc(var(--carrom-mobile-menu-width) - 4px) !important;
    height: auto !important;
    max-height: none !important;
    padding: 62px 14px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    text-align: left !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 18px !important;
    background: rgba(10, 9, 17, .96) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.65) !important;
    backdrop-filter: blur(16px) !important;
    z-index: 10030 !important;
    animation: none !important;
    transition: none !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open::after {
    content: none !important;
    display: none !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .mobile-panel-close {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    margin: 0 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 0 4px !important;
    border-radius: 12px !important;
    font-size: 32px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .mobile-match-toolbar {
    display: none !important;
  }

  /* Compact bottom toolbar; reserve its width so it never covers the striker slider. */
  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .mobile-match-toolbar:not([hidden]),
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .mobile-match-toolbar:not([hidden]) {
    display: flex !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
    padding: 6px !important;
    max-width: min(390px, 45vw) !important;
  }

  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .mobile-match-toolbar button,
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .mobile-match-toolbar button {
    min-width: clamp(72px, 10vw, 116px) !important;
    min-height: 48px !important;
    padding: 0 10px !important;
    font-size: clamp(10px, 1.35vw, 13px) !important;
    white-space: nowrap !important;
  }

  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .board-wrap .placement-controls,
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .board-wrap .placement-controls {
    position: absolute !important;
    left: clamp(54px, 7vw, 108px) !important;
    right: clamp(260px, 34vw, 400px) !important;
    width: auto !important;
    max-width: none !important;
    bottom: max(9px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open.carrom-3d-active .board-wrap .placement-controls,
  body.carrom-match-live.carrom-mobile-menu-open.carrom-3d-pending .board-wrap .placement-controls {
    position: absolute !important;
    left: clamp(48px, 8%, 86px) !important;
    right: clamp(48px, 8%, 86px) !important;
    width: auto !important;
    max-width: none !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }

  /* 2D keeps the original always-visible left menu and old striker/back layout. */
  body.carrom-match-live.carrom-3d-disabled .carrom-page {
    --side-w: var(--carrom-mobile-menu-width) !important;
    grid-template-columns: var(--carrom-mobile-menu-width) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 4px !important;
    align-items: center !important;
    justify-items: stretch !important;
  }

  body.carrom-match-live.carrom-3d-disabled .side-panel {
    display: flex !important;
    position: fixed !important;
    left: 4px !important;
    right: auto !important;
    top: 44px !important;
    bottom: 4px !important;
    inset: 44px auto 4px 4px !important;
    width: calc(var(--carrom-mobile-menu-width) - 4px) !important;
    max-width: calc(var(--carrom-mobile-menu-width) - 4px) !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    text-align: left !important;
  }

  body.carrom-match-live.carrom-3d-disabled .mobile-panel-close,
  body.carrom-match-live.carrom-3d-disabled .mobile-match-toolbar,
  body.carrom-match-live.carrom-3d-disabled .mobile-control-hint {
    display: none !important;
  }

  body.carrom-match-live.carrom-3d-disabled .board-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
  }

  body.carrom-match-live.carrom-3d-disabled .board-wrap .placement-controls {
    position: absolute !important;
    left: 15% !important;
    right: 15% !important;
    width: auto !important;
    max-width: none !important;
    bottom: 2.2% !important;
    transform: none !important;
  }

  body.carrom-match-live.carrom-3d-disabled .placement-slider-row {
    grid-template-columns: minmax(0, 1fr) clamp(30px, calc(var(--carrom-board-width, 760px) * .055), 44px) !important;
    gap: clamp(5px, calc(var(--carrom-board-width, 760px) * .012), 10px) !important;
  }

  body.carrom-match-live.carrom-3d-disabled #strikerSlider::-webkit-slider-thumb {
    width: clamp(32px, calc(var(--carrom-board-width, 760px) * .064), 49px) !important;
    height: clamp(32px, calc(var(--carrom-board-width, 760px) * .064), 49px) !important;
  }

  body.carrom-match-live.carrom-3d-disabled #strikerSlider::-moz-range-thumb {
    width: clamp(32px, calc(var(--carrom-board-width, 760px) * .064), 49px) !important;
    height: clamp(32px, calc(var(--carrom-board-width, 760px) * .064), 49px) !important;
  }
}


/* === v101 Step 4: mobile accessibility and adaptive device hardening === */
.agn-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


@media (max-width: 900px), (pointer: coarse) {
  body.carrom-match-live { overscroll-behavior: none; }
  body.carrom-match-live .side-panel { padding-bottom: max(14px, env(safe-area-inset-bottom)) !important; }
  body.carrom-match-live.carrom-mobile-menu-open .side-panel {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
  }
  .mobile-match-toolbar button,
  .mobile-panel-close,
  .placement-back-btn,
  .online-room-actions button,
  .online-lobby-actions button,
  .mode-select-card button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-match-toolbar button { font-weight: 950; }
  .online-lobby-message,
  .online-server-note,
  #message { color: rgba(255,255,255,.86); }
}

/* Short landscape phones: retain all controls without covering the striker. */
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  body.carrom-match-live { --carrom-mobile-menu-width: clamp(205px, 27vw, 300px); }
  body.carrom-match-live.carrom-mobile-menu-open .side-panel {
    top: max(2px, env(safe-area-inset-top)) !important;
    bottom: max(2px, env(safe-area-inset-bottom)) !important;
    inset: max(2px, env(safe-area-inset-top)) auto max(2px, env(safe-area-inset-bottom)) max(2px, env(safe-area-inset-left)) !important;
    padding-top: 54px !important;
    border-radius: 12px !important;
  }
  body.carrom-match-live .mobile-match-toolbar:not([hidden]) {
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    padding: 4px !important;
  }
  body.carrom-match-live .mobile-match-toolbar button {
    min-height: 44px !important;
    min-width: 68px !important;
  }
}

/* Coarse-pointer tablets and foldables: use a stable rail instead of squeezing. */
@media (min-width: 901px) and (max-width: 1366px) and (pointer: coarse) {
  body.carrom-match-live { --carrom-mobile-menu-width: clamp(270px, 25vw, 350px); }
  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .carrom-page,
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .carrom-page {
    grid-template-columns: minmax(0,1fr) !important;
  }
}

@media (prefers-contrast: more) {
  .side-panel, .mode-select-card, .online-lobby-card, .mobile-match-toolbar {
    border-color: #fff !important;
    background: #09090d !important;
  }
  .subtext, .opponent-mode-hint, .online-server-note, .mobile-control-hint { color: #fff !important; }
}

@media (forced-colors: active) {
  .side-panel, .mode-select-card, .online-lobby-card, .mobile-match-toolbar,
  button, input, select { forced-color-adjust: auto; }
}


/* Legal footer is reachable from the pre-match screen; hidden once a match starts. */
body:not(.carrom-match-live) { overflow-y: auto !important; }
body:not(.carrom-match-live) .carrom-page { min-height: 100vh; }

/* === v105: recovered two-step menu, compact online UI and centered match controls === */
.mode-choice-stage[hidden],
.rules-choice-stage[hidden],
.ranked-matchmaking-panel[hidden],
.ranked-cancel-btn[hidden],
.wait-local-actions[hidden],
.background-match-prompt[hidden],
.online-match-type[hidden] {
  display: none !important;
}

.mode-choice-stage .mode-eyebrow {
  margin-bottom: 14px;
}

.mode-choice-stage .opponent-select-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 620px;
  gap: 12px;
  margin: 0 auto;
}

.mode-choice-stage .opponent-ui-btn {
  min-height: clamp(74px, calc(var(--board-size) * .12), 102px);
  padding: 11px 10px;
  text-align: center;
}

.mode-choice-stage .opponent-ui-btn strong,
.mode-choice-stage .opponent-ui-btn span {
  display: block;
}

.mode-choice-stage .opponent-ui-btn strong {
  color: #fff;
  font-size: clamp(13px, calc(var(--board-size) * .024), 19px);
  letter-spacing: .065em;
}

.mode-choice-stage .opponent-ui-btn span {
  margin-top: 5px;
  color: rgba(255,255,255,.62);
  font-size: clamp(10px, calc(var(--board-size) * .015), 13px);
  letter-spacing: .01em;
  text-transform: none;
}

.mode-choice-stage .ranked-choice-btn {
  border-color: rgba(255,198,92,.38);
  background: linear-gradient(180deg, rgba(141,92,24,.25), rgba(67,44,18,.30));
}

.rules-choice-stage {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.rules-choice-head {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-align: left;
}

.rules-choice-head > div { min-width: 0; }
.rules-choice-head .mode-eyebrow { margin: 0 0 3px; font-size: 9px; }
.rules-choice-head strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: clamp(17px, 3vw, 24px);
  letter-spacing: .07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mode-stage-back {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.mode-select-card.ranked-matchmaking-flow:not(.ranked-room-connected) #onlineRoomPanel,
.mode-select-card:not(.ranked-matchmaking-flow) #rankedMatchmakingPanel {
  display: none !important;
}

.ranked-matchmaking-panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 8px;
  max-width: 660px;
  margin: 0 auto;
  padding: 11px;
  border: 1px solid rgba(255,194,85,.30);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(118,73,16,.19), rgba(0,0,0,.26));
}

.ranked-player-card,
.ranked-search-status,
.ranked-wait-local-actions {
  grid-column: 1 / -1;
}

.ranked-player-card {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(255,255,255,.06);
  text-align: left;
}
.ranked-player-card span {
  color: rgba(255,255,255,.55);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.ranked-player-card strong { color: #fff3d0; font-size: 17px; }
.ranked-player-card small { color: rgba(255,255,255,.66); }

.ranked-matchmaking-panel > button {
  min-height: 42px;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
}
.ranked-find-btn {
  border: 1px solid rgba(255,210,112,.56);
  background: linear-gradient(180deg, rgba(184,117,31,.98), rgba(111,65,17,.98));
}
.ranked-cancel-btn {
  border: 1px solid rgba(255,145,145,.45);
  background: linear-gradient(180deg, rgba(147,57,63,.94), rgba(86,31,38,.98));
}
.ranked-matchmaking-panel > button:disabled { cursor: not-allowed; opacity: .45; }

.ranked-search-status {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}
.ranked-search-status[data-status="queued"],
.ranked-search-status[data-status="joining"],
.ranked-search-status[data-status="matched"],
.ranked-search-status[data-status="connected"],
.ranked-search-status[data-status="ready-required"] { color: #ffe0a2; }
.ranked-search-status[data-status="error"],
.ranked-search-status[data-status="expired"] { color: #ffb2b2; }

.wait-local-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.045);
}
.wait-local-actions span {
  color: rgba(255,255,255,.66);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wait-local-actions button {
  min-height: 36px !important;
  padding: 0 11px !important;
  font-size: 10px !important;
}

/* Private setup: side-by-side and compact on widescreen. */
@media (min-width: 760px) and (min-height: 520px) {
  .mode-select-card.private-room-flow:not(.online-lobby-screen-card) {
    width: min(94%, 880px);
    max-width: 880px;
    max-height: calc(100% - 12px);
    overflow: hidden;
    padding: 15px 18px;
  }

  .mode-select-card.private-room-flow:not(.online-lobby-screen-card) .rules-choice-stage {
    grid-template-columns: minmax(250px,.82fr) minmax(390px,1.18fr);
    grid-template-areas:
      "head head"
      "hint hint"
      "rules room";
    align-items: start;
    gap: 8px 14px;
  }

  .mode-select-card.private-room-flow .rules-choice-head { grid-area: head; }
  .mode-select-card.private-room-flow .opponent-mode-hint { grid-area: hint; margin: 0; }
  .mode-select-card.private-room-flow .mode-button-row { grid-area: rules; gap: 8px; }
  .mode-select-card.private-room-flow .mode-ui-btn { min-height: 70px; }
  .mode-select-card.private-room-flow .online-room-panel {
    grid-area: room;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 9px;
    gap: 7px;
  }
  .mode-select-card.private-room-flow .online-room-actions {
    display: grid;
    grid-template-columns: minmax(110px,.8fr) minmax(220px,1.5fr) minmax(105px,.7fr);
    gap: 7px;
  }
  .mode-select-card.private-room-flow .online-room-actions > button,
  .mode-select-card.private-room-flow .online-join-row,
  .mode-select-card.private-room-flow .online-join-row > * {
    min-height: 38px;
  }
  .mode-select-card.private-room-flow .online-server-note { font-size: 10px; }
}

/* Dedicated room lobby must always show its panel; prevents the collapsed empty bar. */
.mode-select-overlay.online-lobby-screen .rules-choice-stage {
  display: block !important;
  width: 100%;
}
.mode-select-overlay.online-lobby-screen .online-room-panel:not([hidden]) {
  display: grid !important;
}
.mode-select-overlay.online-lobby-screen .ranked-matchmaking-panel {
  display: none !important;
}
.mode-select-overlay.online-lobby-screen .rules-choice-head {
  display: none !important;
}
.mode-select-overlay.online-lobby-screen .wait-local-actions {
  margin-top: 2px;
}

/* Match-found prompt while a local game is running. */
.background-match-prompt {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(8px);
}
.background-match-card {
  width: min(92vw, 470px);
  padding: 24px;
  border: 1px solid rgba(255,205,105,.45);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(182,116,27,.26), transparent 48%),
    rgba(16,14,18,.98);
  box-shadow: 0 26px 90px rgba(0,0,0,.72);
  color: #fff;
  text-align: center;
}
.background-match-kicker {
  color: #ffd995;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.background-match-card h2 { margin: 9px 0 8px; font-size: clamp(24px, 5vw, 36px); }
.background-match-card p { margin: 0 0 17px; color: rgba(255,255,255,.7); line-height: 1.45; }
.background-match-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.background-match-actions button {
  min-height: 48px;
  border-radius: 12px;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}
#backgroundMatchJoinBtn {
  border: 1px solid rgba(255,213,119,.58);
  background: linear-gradient(180deg, rgba(184,117,31,.98), rgba(111,65,17,.98));
}
#backgroundMatchLeaveBtn {
  border: 1px solid rgba(255,145,145,.42);
  background: linear-gradient(180deg, rgba(137,55,63,.95), rgba(78,28,35,.98));
}

/* Phone/tablet landscape: stack quick buttons below the scoreboard in right-side negative space. */
@media (max-width: 900px), (pointer: coarse) {
  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .mobile-match-toolbar:not([hidden]),
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .mobile-match-toolbar:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    top: clamp(88px, 12vh, 116px) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    width: clamp(102px, 13vw, 142px) !important;
    max-width: none !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .mobile-match-toolbar button,
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .mobile-match-toolbar button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    font-size: clamp(10px, 1.25vw, 13px) !important;
  }

  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .board-wrap .placement-controls,
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .board-wrap .placement-controls {
    left: 50% !important;
    right: auto !important;
    width: min(76vw, 1080px) !important;
    max-width: calc(100% - 150px) !important;
    bottom: max(9px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 700px) {
  .mode-choice-stage .opponent-select-row { gap: 8px; }
  .mode-choice-stage .opponent-ui-btn { min-height: 66px; padding: 8px 6px; }
  .rules-choice-stage { gap: 8px; }
  .ranked-matchmaking-panel { grid-template-columns: 1fr; }
  .ranked-player-card,
  .ranked-search-status,
  .ranked-wait-local-actions { grid-column: 1; }
  .wait-local-actions { grid-template-columns: 1fr 1fr; }
  .wait-local-actions span { grid-column: 1 / -1; text-align: center; }
}

@media (max-width: 390px) {
  .mode-choice-stage .opponent-select-row { grid-template-columns: 1fr; }
  .background-match-actions { grid-template-columns: 1fr; }
}


/* === v107: safe UI recovery; original gameplay/slider mechanics remain authoritative === */

/* Keep the quick match buttons below the scoreboard in the right-side empty space.
   The placement rail stays absolutely positioned inside the board, as in v102. */
@media (max-width: 900px), (pointer: coarse) {
  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .mobile-match-toolbar:not([hidden]),
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .mobile-match-toolbar:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    top: clamp(82px, 12vh, 112px) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    width: clamp(102px, 13vw, 142px) !important;
    max-width: none !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .mobile-match-toolbar button,
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .mobile-match-toolbar button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    font-size: clamp(10px, 1.25vw, 13px) !important;
  }

  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .board-wrap .placement-controls,
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .board-wrap .placement-controls {
    position: absolute !important;
    left: clamp(54px, 7vw, 108px) !important;
    right: clamp(54px, 7vw, 108px) !important;
    width: auto !important;
    max-width: none !important;
    bottom: max(9px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }
}

/* Private-room setup: compact, side-by-side, and no internal scrolling in landscape. */
@media (min-width: 600px) {
  .mode-select-card.private-room-flow:not(.online-lobby-screen-card) {
    width: min(96%, 900px) !important;
    max-width: 900px !important;
    max-height: calc(100% - 10px) !important;
    overflow: hidden !important;
    padding: 12px 14px !important;
  }

  .mode-select-card.private-room-flow:not(.online-lobby-screen-card) .rules-choice-stage {
    display: grid !important;
    grid-template-columns: minmax(205px, .72fr) minmax(0, 1.28fr) !important;
    grid-template-areas:
      "head head"
      "hint hint"
      "rules room" !important;
    align-items: start !important;
    gap: 7px 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mode-select-card.private-room-flow .rules-choice-head { grid-area: head !important; }
  .mode-select-card.private-room-flow .opponent-mode-hint { grid-area: hint !important; margin: 0 !important; }
  .mode-select-card.private-room-flow .mode-button-row { grid-area: rules !important; gap: 7px !important; min-width: 0 !important; }
  .mode-select-card.private-room-flow .mode-ui-btn { min-height: 58px !important; padding: 8px !important; }
  .mode-select-card.private-room-flow .mode-ui-btn span { margin-top: 2px !important; }

  .mode-select-card.private-room-flow .online-room-panel {
    grid-area: room !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .mode-select-card.private-room-flow .online-name-field {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .mode-select-card.private-room-flow .online-name-field input,
  .mode-select-card.private-room-flow .online-join-row,
  .mode-select-card.private-room-flow .online-join-row input,
  .mode-select-card.private-room-flow .online-room-actions > * {
    min-width: 0 !important;
  }

  .mode-select-card.private-room-flow .online-room-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .mode-select-card.private-room-flow .online-join-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .mode-select-card.private-room-flow .online-room-actions > button,
  .mode-select-card.private-room-flow .online-join-row > * {
    min-height: 36px !important;
    height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .mode-select-card.private-room-flow .online-server-note {
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
}

@media (min-width: 600px) and (max-height: 560px) {
  .mode-select-card.private-room-flow:not(.online-lobby-screen-card) {
    padding: 8px 10px !important;
  }
  .mode-select-card.private-room-flow:not(.online-lobby-screen-card) .rules-choice-stage {
    grid-template-areas: "head head" "rules room" !important;
    gap: 5px 9px !important;
  }
  .mode-select-card.private-room-flow .opponent-mode-hint { display: none !important; }
  .mode-select-card.private-room-flow .rules-choice-head { min-height: 34px !important; }
  .mode-select-card.private-room-flow .mode-ui-btn { min-height: 48px !important; padding: 5px !important; }
  .mode-select-card.private-room-flow .mode-ui-btn span { display: none !important; }
  .mode-select-card.private-room-flow .online-room-panel { padding: 6px !important; gap: 4px !important; }
  .mode-select-card.private-room-flow .online-name-field span { font-size: 9px !important; }
  .mode-select-card.private-room-flow .online-name-field input { min-height: 32px !important; height: 32px !important; }
  .mode-select-card.private-room-flow .online-room-actions > button,
  .mode-select-card.private-room-flow .online-join-row > * { min-height: 32px !important; height: 32px !important; }
}

@media (min-width: 600px) and (max-width: 820px) {
  .mode-select-card.private-room-flow:not(.online-lobby-screen-card) .rules-choice-stage {
    grid-template-columns: minmax(175px, .65fr) minmax(0, 1.35fr) !important;
  }
  .mode-select-card.private-room-flow .online-name-field span { display: none !important; }
}

/* Private matchmaking type is selected by the outer mode card; do not show the old ranked/unranked row. */
.mode-select-card.private-room-flow .online-match-type {
  display: none !important;
}

@media (min-width: 600px) {
  .mode-select-card.private-room-flow .online-leaderboard-open {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .mode-select-card.private-room-flow .online-join-row {
    grid-row: 2 !important;
  }
}

@media (min-width: 600px) and (max-width: 700px) {
  .mode-select-card.private-room-flow .online-join-row {
    grid-template-columns: minmax(0, 1fr) 68px !important;
  }
  .mode-select-card.private-room-flow .online-join-row button {
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 8.5px !important;
  }
}
@media (min-width: 600px) and (max-width: 700px) {
  .mode-select-card.private-room-flow .online-room-actions > button {
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 8px !important;
    white-space: normal !important;
    line-height: 1.05 !important;
  }
}

/* v107 fix 2: connected private-room lobby must not inherit the setup form layout. */
.mode-select-overlay.online-lobby-screen .online-name-field,
.mode-select-overlay.online-lobby-screen .online-room-actions,
.mode-select-overlay.online-lobby-screen .online-match-type,
.mode-select-overlay.online-lobby-screen .opponent-mode-hint,
.mode-select-overlay.online-lobby-screen .mode-button-row,
.mode-select-overlay.online-lobby-screen .start-game-btn {
  display: none !important;
}

.mode-select-overlay.online-lobby-screen .mode-select-card.online-lobby-screen-card {
  box-sizing: border-box !important;
  max-height: calc(100dvh - 8px) !important;
}

.mode-select-overlay.online-lobby-screen .rules-choice-stage {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

.mode-select-overlay.online-lobby-screen .online-room-panel {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 6px !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.mode-select-overlay.online-lobby-screen .online-lobby-card {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Short landscape lobby: arrange the useful room controls side-by-side. */
@media (min-width: 440px) and (max-height: 560px) {
  .mode-select-overlay.online-lobby-screen {
    padding: 4px !important;
  }

  .mode-select-overlay.online-lobby-screen .mode-select-card.online-lobby-screen-card {
    width: min(98%, 720px) !important;
    max-width: 720px !important;
    padding: 5px 7px !important;
    justify-content: center !important;
  }

  .mode-select-overlay.online-lobby-screen .online-lobby-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "heading heading"
      "code players"
      "message players"
      "actions wait" !important;
    align-items: stretch !important;
    gap: 5px 7px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  .mode-select-overlay.online-lobby-screen .online-lobby-heading {
    grid-area: heading !important;
    min-height: 16px !important;
    gap: 6px !important;
  }

  .mode-select-overlay.online-lobby-screen .online-lobby-kicker {
    font-size: 8px !important;
    letter-spacing: .16em !important;
  }

  .mode-select-overlay.online-lobby-screen .online-match-badge {
    min-height: 18px !important;
    padding: 2px 7px !important;
    font-size: 8px !important;
  }

  .mode-select-overlay.online-lobby-screen .online-room-code-row {
    grid-area: code !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  .mode-select-overlay.online-lobby-screen .online-room-code-row strong {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 3px 6px !important;
    font-size: clamp(17px, 3.2vw, 23px) !important;
    letter-spacing: .13em !important;
  }

  .mode-select-overlay.online-lobby-screen .online-room-code-row button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 8px !important;
    font-size: 8px !important;
  }

  .mode-select-overlay.online-lobby-screen .online-player-status-list {
    grid-area: players !important;
    align-self: stretch !important;
    gap: 4px !important;
  }

  .mode-select-overlay.online-lobby-screen .online-player-status-list > div {
    min-height: 30px !important;
    padding: 4px 7px !important;
    gap: 5px !important;
    font-size: 9px !important;
  }

  .mode-select-overlay.online-lobby-screen .online-lobby-message {
    grid-area: message !important;
    min-height: 12px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }

  .mode-select-overlay.online-lobby-screen .online-lobby-actions {
    grid-area: actions !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
  }

  .mode-select-overlay.online-lobby-screen .online-lobby-actions button,
  .mode-select-overlay.online-lobby-screen .wait-local-actions button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
  }

  .mode-select-overlay.online-lobby-screen .wait-local-actions {
    grid-area: wait !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .mode-select-overlay.online-lobby-screen .wait-local-actions span {
    display: none !important;
  }

  .mode-select-overlay.online-lobby-screen .online-server-note {
    margin: 0 !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
  }
}

/* Short landscape: keep the right camera arrow clear of the vertical quick toolbar. */
@media (max-height: 560px) and ((max-width: 900px) or (pointer: coarse)) {
  body.carrom-3d-active.carrom-player-view .mobile-camera-right {
    top: 75% !important;
  }
}

/* === v108: logo + mobile-only layout polish; no gameplay/system changes === */
.carrom-title-logo {
  display: block;
  width: 100%;
  margin: 0 0 10px !important;
  line-height: 0 !important;
  overflow: visible !important;
  text-shadow: none !important;
}

.carrom-title-logo img {
  display: block;
  width: min(100%, 300px);
  height: auto;
  max-height: 92px;
  object-fit: contain;
  object-position: left center;
}

/* Remove footer spacing from game screens now that legal links remain on the main site/account pages. */
.carrom-page { margin-bottom: 0 !important; }

.match-hud .hud-player-left .hud-local-top {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 5px !important;
}

.match-hud .hud-player-left .hud-local-top .hud-name {
  grid-column: auto !important;
  grid-row: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.match-hud .hud-player-left .hud-local-top .shot-clock-hud {
  flex: 0 1 auto !important;
  max-width: 52% !important;
  margin: 0 !important;
  padding: 2px 6px !important;
  font-size: clamp(7px, calc(var(--carrom-board-width, 760px) * .009), 10px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 900px), (pointer: coarse) {
  /* Compact options drawer and align its close button beside the game logo. */
  body.carrom-match-live.carrom-mobile-menu-open .side-panel {
    padding: 10px 10px 10px !important;
    gap: 0 !important;
    overflow-x: hidden !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .carrom-title-logo {
    width: calc(100% - 52px) !important;
    min-height: 70px !important;
    margin: 0 0 5px !important;
    display: flex !important;
    align-items: center !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .carrom-title-logo img {
    width: auto !important;
    max-width: 160px !important;
    max-height: 70px !important;
    object-position: left center !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .mobile-panel-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 24px !important;
    right: 10px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 28px !important;
    line-height: 42px !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .subtext {
    display: none !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .score-box {
    margin: 0 0 8px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .difficulty-row {
    margin: 6px 0 8px !important;
    gap: 7px !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .view-action-row {
    margin-top: 2px !important;
    gap: 6px !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .view-action-row button {
    min-height: 44px !important;
  }

  body.carrom-match-live.carrom-mobile-menu-open .music-box {
    margin-top: 8px !important;
    padding: 8px !important;
  }

  /* Quick controls sit directly below the score HUD, but never overlap it. */
  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .mobile-match-toolbar:not([hidden]),
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .mobile-match-toolbar:not([hidden]) {
    top: calc(var(--carrom-board-top, 0px) + clamp(58px, 9vh, 68px)) !important;
    right: calc(max(6px, env(safe-area-inset-right)) + clamp(64px, 8vw, 82px)) !important;
    bottom: auto !important;
    width: clamp(92px, 12vw, 124px) !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 12px !important;
  }

  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .mobile-match-toolbar button,
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .mobile-match-toolbar button {
    min-height: clamp(36px, 7.5vh, 42px) !important;
    height: clamp(36px, 7.5vh, 42px) !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    font-size: clamp(8.5px, 1.18vw, 11px) !important;
    line-height: 1.05 !important;
  }

  /* Restore both side camera arrows to their original centred position. */
  body.carrom-3d-active.carrom-player-view .mobile-camera-left,
  body.carrom-3d-active.carrom-player-view .mobile-camera-right {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Timer and reconnect/disconnect status share the local-player name row,
     so they stay inside the score HUD and cannot be cropped below it. */
  .match-hud .hud-local-top {
    gap: 3px !important;
  }

  .match-hud .hud-local-top .shot-clock-hud {
    max-width: 48% !important;
    margin: 0 !important;
    padding: 1px 4px !important;
    min-height: 14px !important;
    border-radius: 999px !important;
    font-size: clamp(6.2px, 1.35vw, 8px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-height: 560px) and ((max-width: 900px) or (pointer: coarse)) {
  /* Final override: v107 temporarily moved the right arrow down; v108 restores it. */
  body.carrom-3d-active.carrom-player-view .mobile-camera-right {
    top: 50% !important;
  }

  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .mobile-match-toolbar:not([hidden]),
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .mobile-match-toolbar:not([hidden]) {
    top: calc(var(--carrom-board-top, 0px) + 58px) !important;
    width: clamp(88px, 11vw, 112px) !important;
    gap: 3px !important;
    padding: 3px !important;
  }

  body.carrom-match-live.carrom-3d-active:not(.carrom-mobile-menu-open) .mobile-match-toolbar button,
  body.carrom-match-live.carrom-3d-pending:not(.carrom-mobile-menu-open) .mobile-match-toolbar button {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 8.5px !important;
  }
}

/* v109: choose AI strength before the match; gameplay systems remain unchanged. */
.mode-ai-difficulty {
  display: grid;
  grid-template-columns: auto minmax(150px, 220px);
  align-items: center;
  gap: 8px 14px;
  width: min(100%, 520px);
  margin: 4px auto 14px;
  padding: 12px 14px;
  border: 1px solid rgba(231, 202, 146, 0.24);
  border-radius: 16px;
  background: rgba(22, 20, 22, 0.72);
  color: #f4ead8;
  font-weight: 800;
  box-sizing: border-box;
}
.mode-ai-difficulty[hidden] { display: none !important; }
.mode-ai-difficulty select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: rgba(8,8,10,.88);
  color: #fff;
  padding: 0 12px;
  font: inherit;
  font-weight: 800;
}
.mode-ai-difficulty small {
  grid-column: 1 / -1;
  color: rgba(255,255,255,.62);
  font-size: 12px;
  font-weight: 600;
}
.mode-ai-difficulty select:disabled { opacity: .7; cursor: not-allowed; }

.carrom-public-replays {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.carrom-public-replays h3 {
  margin: 0 0 10px;
  color: #fff3d8;
  font-size: 16px;
}
.carrom-public-replay-list {
  display: grid;
  gap: 8px;
}
.carrom-public-replay-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
}
.carrom-public-replay-row strong,
.carrom-public-replay-row small { min-width: 0; }
.carrom-public-replay-row small { color: rgba(255,255,255,.62); }
.carrom-public-replay-row button {
  grid-row: 1 / span 2;
  grid-column: 2;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(232, 190, 109, .45);
  border-radius: 10px;
  background: rgba(146, 91, 18, .55);
  color: #fff5de;
  font-weight: 900;
  cursor: pointer;
}
.carrom-public-replay-row button:disabled { opacity: .55; cursor: wait; }
.carrom-public-replay-empty,
.carrom-public-replay-error { margin: 8px 0 0; color: rgba(255,255,255,.62); }
.carrom-public-replay-error { color: #ffb2b2; }

@media (max-width: 700px) {
  .mode-ai-difficulty {
    grid-template-columns: 1fr;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .mode-ai-difficulty small { grid-column: 1; }
}


/* v191: JS-assisted dropdown open state, stable on mouse + touch. */
.site-header, .chess-header { overflow: visible !important; }
.nav-dropdown.is-open > .nav-dropdown-menu { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
.nav-dropdown.is-open > .nav-dropbtn { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
.nav-tools-menu { min-width: 220px; }
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .nav-dropdown:hover > .nav-dropdown-menu { display: none; }
  .nav-dropdown.is-open > .nav-dropdown-menu { display: block !important; }
}