/* ============================================================
   FONTS
   ============================================================ */

@font-face {
  font-family: 'YekanBakh';
  src: url('fonts/YekanBakh-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'YekanBakh';
  src: url('fonts/YekanBakh-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'YekanBakh';
  src: url('fonts/YekanBakh-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'YekanBakh';
  src: url('fonts/YekanBakh-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* ============================================================
   ASSET LOADING OVERLAY
   ============================================================ */

#asset-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #0F1419;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'YekanBakh', sans-serif;
  opacity: 1;
  transition: opacity 0.55s ease;
}

#asset-loading-overlay.asset-loading-done {
  opacity: 0;
  pointer-events: none;
}

#asset-loading-overlay h2 {
  color: #3B82F6;
  font-size: 30px;
  font-weight: 400;
  margin: 0 0 6px;
  letter-spacing: 1px;
}

#asset-loading-overlay .asset-loading-subtitle {
  color: #9CA3AF;
  font-size: 14px;
  margin: 0 0 36px;
}

.asset-loading-bar-track {
  width: 220px;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

#asset-loading-bar {
  height: 100%;
  width: 0%;
  background: #3B82F6;
  border-radius: 3px;
  transition: width 0.18s ease;
}

#asset-loading-pct {
  color: #3B82F6;
  font-size: 13px;
  font-weight: 400;
}

/* Reset & compatibility */
.cf:before,
.cf:after {
  content:"";
  display:table;
}

.cf:after {
  clear:both;
}

.cf {
  *zoom:1;
}

/* ============================================================
   LAYOUT
   ============================================================ */

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

#backgammon {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8vh;
  padding-bottom: 50px;
  box-sizing: border-box;
}

/* Board wrapper — flat container sized to match board.png.
   width: min(100%, calc(availableHeight * 7/4)) ensures the board fills the
   viewport width but never grows taller than the available height (100vh minus
   the margin-top).  When the height constraint wins the board is centred.
   Update the aspect-ratio and the calc() constants if board.png changes. */
.board-3d-wrapper {
  position: relative;
  /* Never taller than the space below the HUD margin minus 50px bottom gap. */
  width: min(100%, calc((92vh - 50px) * (7 / 4)));
  aspect-ratio: 7 / 4;
  margin: 0;
}

/* Board.png is 1981×1141 vs the 1920×1080 reference the wrapper aspect-ratio
   is based on.  Both dimensions grew by 61px; negative inset compensates so
   the board content stays centred and fills the wrapper without stretching:
     horizontal: (1981-1920)/2 / 1920  ≈ -1.59%
     vertical:   (1141-1080)/2 / 1080  ≈ -2.82% */
.board-3d-wrapper::before {
  content: '';
  position: absolute;
  inset: -0.2% -1.59% -5.44% -1.59%;
  background-image: url('../images/Board.png');
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}

.board {
  position: absolute;
  inset: 0;
}

/* Panes and fields are transparent containers for JS point assignment.
   They all cover the full board so point % coordinates = board % coordinates.
   pointer-events: none prevents these full-board overlays from blocking clicks
   on points in lower panes/fields; .point children keep pointer-events: auto. */
.pane {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Bar: placeholder left/width — update after measuring board.png */
#bar {
  position: absolute;
  top: 0;
  height: 100%;
  left: 46%;
  width: 8%;
}

.field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.space {
  height: 7%;
}

.frame {
  height: 1%;
}

.bar {
  width: 8%;
  height: 100%;
}

.bar td {
  position: relative;
}

/* All 24 points are absolutely positioned on the board.
   --slant is set per-point below; .piece inherits it to counter-rotate. */
.point {
  --slant: 0deg;
  position: absolute;
  text-align: center;
  transform: rotate(var(--slant));
  pointer-events: auto;
  z-index: 1;
}

/* Rotate around the triangle base so stacking follows the slant direction.
   Both rows use the same transform-origin (50% 0%) so Firefox resolves `left`
   identically for top and bottom points.  Row1 shifts down by 100% of its own
   height before rotating so the effective pivot is its bottom-centre — the same
   visual result as transform-origin:50% 100% but without the Firefox quirk. */
.row0 .point { transform-origin: 50% 0%; }
.row1 .point {
  transform-origin: 50% 0%;
  transform: translateY(100%) rotate(var(--slant)) translateY(-100%);
}

/* ============================================================
   POINT POSITIONS — PLACEHOLDER VALUES
   All coordinates are % of the board wrapper (width × height).
   Replace every value after measuring board.png (see guide below).

   For each point you need:
     left    – left edge of the column (% of board width)
     top     – top edge of the div (% of board height)
     width   – column width (% of board width)
     height  – stacking depth toward center (% of board height)
     --slant – degrees the triangle leans from vertical
               positive = leans right, negative = leans left
   ============================================================ */

/* — top-left field  (visual slots 12 → 17, left to right) — */
.point[data-vs="12"] { left:  17%;   top: 4%; width: 4.8%; height: 34%; --slant: 7deg;   --hl-x: -45%; --hl-y: 1%; --hl-w: 170%; --hl-h: 114.5%;}
.point[data-vs="13"] { left:  21.8%; top: 4%; width: 4.8%; height: 34%; --slant: 5.5deg; --hl-x: -43%; --hl-y: 1%; --hl-w: 152%; --hl-h: 114.5%;}
.point[data-vs="14"] { left: 26.8%;  top: 4%; width: 4.8%; height: 34%; --slant: 4.5deg; --hl-x: -36%; --hl-y: 1%; --hl-w: 150%; --hl-h: 114.5%;}
.point[data-vs="15"] { left: 31.8%;  top: 4%; width: 4.8%; height: 34%; --slant: 3deg;   --hl-x: -42%; --hl-y: 1%; --hl-w: 155%; --hl-h: 114.5%;}
.point[data-vs="16"] { left: 36.7%;  top: 4%; width: 4.8%; height: 34%; --slant: 1.5deg; --hl-x: -38.5%; --hl-y: 1%; --hl-w: 165%; --hl-h: 114.5%;}
.point[data-vs="17"] { left: 41.7%;  top: 4%; width: 4.8%; height: 34%; --slant: 0.8deg; --hl-x: -42%; --hl-y: 1%; --hl-w: 168%; --hl-h: 114.5%;}

/* — top-right field (visual slots 18 → 23, left to right) — */
.point[data-vs="18"] { left: 53.7%;  top: 4%; width: 4.8%; height: 34%; --slant: -0.5deg; --hl-x: -25%; --hl-y: 1%; --hl-w: 150%; --hl-h: 114.5%;}
.point[data-vs="19"] { left: 58.45%; top: 4%; width: 4.8%; height: 34%; --slant: -2deg;   --hl-x: -23%; --hl-y: 1%; --hl-w: 160%; --hl-h: 114.5%;}
.point[data-vs="20"] { left: 63.5%;  top: 4%; width: 4.8%; height: 34%; --slant: -3deg;   --hl-x: -25%; --hl-y: 1%; --hl-w: 150%; --hl-h: 114.5%;}
.point[data-vs="21"] { left: 68.6%;  top: 4%; width: 4.8%; height: 34%; --slant: -4.5deg; --hl-x: -28%; --hl-y: 1%; --hl-w: 160%; --hl-h: 114.5%;}
.point[data-vs="22"] { left: 73.5%;  top: 4%; width: 4.8%; height: 34%; --slant: -5deg;   --hl-x: -18%; --hl-y: 1%; --hl-w: 150%; --hl-h: 114.5%;}
.point[data-vs="23"] { left: 78.4%;  top: 4%; width: 4.8%; height: 34%; --slant: -6.5deg; --hl-x: -14%; --hl-y: 1%; --hl-w: 165%; --hl-h: 114.5%;}

/* — bottom-left field  (visual slots 11 → 6, left to right) — */
/* top = 100% - bottom(5%) - height(41%) = 54%  — avoids Firefox transform-origin anchor bug */
.point[data-vs="11"] { left:  9.7%;  top: 57.5%; width: 5.2%; height: 37%; --slant: 8deg;   --hl-x: 1%;   --hl-y: -15.5%; --hl-w: 148%; --hl-h: 119.5%;}
.point[data-vs="10"] { left:  16%;   top: 57.5%; width: 5.2%; height: 37%; --slant: 6.5deg; --hl-x: -17%; --hl-y: -15.5%; --hl-w: 158%; --hl-h: 119.5%;}
.point[data-vs="9"]  { left: 22.25%; top: 57.5%; width: 5.2%; height: 37%; --slant: 4.5deg; --hl-x: -12%; --hl-y: -15.5%; --hl-w: 150%; --hl-h: 119.5%;}
.point[data-vs="8"]  { left: 28.6%;  top: 57.5%; width: 5.2%; height: 37%; --slant: 3deg;   --hl-x: -27%; --hl-y: -15.5%; --hl-w: 155%; --hl-h: 119.5%;}
.point[data-vs="7"]  { left: 34.4%;  top: 57.5%; width: 5.2%; height: 37%; --slant: 2.2deg; --hl-x: -23.5%; --hl-y: -15.5%; --hl-w: 160%; --hl-h: 119.5%;}
.point[data-vs="6"]  { left: 40.5%;  top: 57.5%; width: 5.2%; height: 37%; --slant: 1.4deg; --hl-x: -32%; --hl-y: -15.5%; --hl-w: 162%; --hl-h: 119.5%;}

/* — bottom-right field (visual slots 5 → 0, left to right) — */
.point[data-vs="5"]  { left: 54.25%; top: 57.5%; width: 5.2%; height: 37%; --slant: -1.4deg; --hl-x: -11.8%;   --hl-y: -15.5%; --hl-w: 115%; --hl-h: 119.5%;}
.point[data-vs="4"]  { left: 60.1%;  top: 57.5%; width: 5.2%; height: 37%; --slant: -2.3deg; --hl-x: -10%;  --hl-y: -15.5%; --hl-w: 120%; --hl-h: 119.5%;}
.point[data-vs="3"]  { left: 66.3%;  top: 57.5%; width: 5.2%; height: 37%; --slant: -3.5deg; --hl-x: -18%; --hl-y: -15.5%; --hl-w: 120%; --hl-h: 119.5%;}
.point[data-vs="2"]  { left: 72.5%;  top: 57.5%; width: 5.2%; height: 37%; --slant: -4.8deg; --hl-x: -20%; --hl-y: -15.5%; --hl-w: 120%; --hl-h: 119.5%;}
.point[data-vs="1"]  { left: 78.6%;  top: 57.5%; width: 5.2%; height: 37%; --slant: -6deg;   --hl-x: -38%; --hl-y: -15.5%; --hl-w: 150%; --hl-h: 119.5%;}
.point[data-vs="0"]  { left: 84.7%;  top: 57.5%; width: 5.2%; height: 37%; --slant: -7.4deg; --hl-x: -48%; --hl-y: -15.5%; --hl-w: 165%; --hl-h: 119.5%;}

/* ============================================================
   PIECES
   ============================================================ */

.piece {
  display: inline-block;
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  aspect-ratio: 1 / 1;
  /* Counter-rotate to cancel the parent point's slant, keeping pieces upright. */
  transform: rotate(calc(-1 * var(--slant)));
}

/* Bar pieces: constrain to the same visual size as board-point pieces.
   The bar cell is 8% of board width; point columns are 4.4–5.2%.
   60% of bar ≈ 4.8% of board → matches the average point column width.
   right: auto + left: 50% + translateX(-50%) centres the piece in the cell. */
#top-bar .piece,
#bottom-bar .piece {
  width: 60%;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.piece .image {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}

/* Piece text */
.piece {
  vertical-align: middle;
}

.piece .image:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.piece span {
  vertical-align: middle;
}


/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
  min-height: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  border: none;
  z-index: 1100;
}

/* ============================================================
   ACTION PANEL (Roll / Confirm buttons)
   ============================================================ */

div.action-panel {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 2100;            /* above dice overlay (2000) */
  width: 12%;
  min-width: 72px;
  height: 128px;
  pointer-events: none;
}

div.action-panel button.action {
  pointer-events: auto;
  width: 100%;
  min-width: 72px;
  margin-bottom: 10px;

  /* Reset Bootstrap */
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 16px;
  padding: 10px 0;
  font-family: 'YekanBakh', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

#btn-roll {
  background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45);
}

#btn-roll:hover {
  background: linear-gradient(135deg, #60A5FA 0%, #818CF8 100%);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
  transform: translateY(-1px);
}

#btn-roll:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

#btn-confirm {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

#btn-confirm:hover {
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.55);
  transform: translateY(-1px);
}

#btn-confirm:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

/* ============================================================
   DICE PANEL
   ============================================================ */

div.dice-panel {
  margin: auto;
  position: absolute;
  top: 0; bottom: 0;
  z-index: 1000;
  width: 50%;
  min-width: 128px;
  height: 64px;
}

div.dice-panel.left {
  left: 0;
}

div.dice-panel.right {
  right: 0;
}

/* ============================================================
   BEHAVIOUR
   ============================================================ */

#backgammon div, #backgammon span {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.piece, .piece .image .die {
  cursor: pointer;
}

/* ============================================================
   3D DICE OVERLAY
   ============================================================ */

#dice-3d-overlay {
  display: none;            /* shown via JS when dice are rolled */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;            /* above board (1000) and action panel (1000) */
  background: transparent;
  pointer-events: none;     /* clicks pass through to board pieces below */
}

/* The Three.js canvas is appended here programmatically */
#dice-3d-overlay canvas {
  display: block;
}


/* Small dismiss hint shown in the bottom-centre */
.dice-3d-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-family: 'YekanBakh', sans-serif;
  letter-spacing: 0.06em;
  pointer-events: none;
  z-index: 1;
}

.collapsing {
  -webkit-transition: none;
  transition: none;
}

/* ============================================================
   GLOBAL STYLE
   ============================================================ */

body {
  background-color: #0F1419;
  background-image: url('../images/BG.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.glyphicon {
  top: 3px;
  padding-right: 5px;
}

/* ============================================================
   INDEX PAGE — LANDING
   ============================================================ */

/* jQuery controls #index-view visibility (display: none / block).
   The inner .landing-fullscreen uses position: fixed to cover the
   viewport regardless of the parent's block layout. */

.landing-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0F1419;
  z-index: 500;
}

.landing-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  max-width: 420px;
  width: 100%;
}

/* Icon block */
.landing-icon {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  overflow: hidden;
}

.landing-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Badge pill */
.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #3B82F6;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: 'YekanBakh', sans-serif;
}

.landing-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3B82F6;
  animation: badge-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* Title */
.landing-title {
  font-size: 56px;
  font-weight: 400;
  margin: 0 0 14px;
  padding: 0;
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  letter-spacing: -1.5px;
  font-family: 'YekanBakh', sans-serif;
}

/* Subtitle */
.landing-subtitle {
  font-size: 15px;
  color: #9CA3AF;
  margin: 0 0 36px;
  line-height: 1.65;
  font-family: 'YekanBakh', sans-serif;
}

/* Card container */
.landing-card {
  width: 100%;
  background: #1A1F2E;
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Primary play button */
#btn-play-bot {
  width: 100%;
  padding: 16px 24px;
  background: #3B82F6;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 400;
  font-family: 'YekanBakh', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.45);
  letter-spacing: 0.01em;
  line-height: 1;
  position: relative;
  overflow: hidden;
}

#btn-play-bot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.09), transparent);
  pointer-events: none;
}

#btn-play-bot:hover {
  background: #2563EB;
  box-shadow: 0 4px 28px rgba(59, 130, 246, 0.65);
  transform: translateY(-1px);
}

#btn-play-bot:active {
  background: #1D4ED8;
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
}

/* Footer note */
.landing-footer {
  margin-top: 20px;
  font-size: 12px;
  color: #4B5563;
  font-family: 'YekanBakh', sans-serif;
  letter-spacing: 0.04em;
}

/* ============================================================
   TOURNAMENT LOBBY
   ============================================================ */

.lobby-countdown-section {
  margin-bottom: 28px;
  text-align: center;
}

.lobby-label {
  font-size: 13px;
  color: #9CA3AF;
  margin: 0 0 8px;
  font-family: 'YekanBakh', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lobby-countdown {
  font-size: 72px;
  font-weight: 400;
  color: #3B82F6;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: 'YekanBakh', sans-serif;
  letter-spacing: -2px;
}

.lobby-status-card {
  padding: 16px 24px;
}

.lobby-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.lobby-loader-img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.lobby-status-text {
  font-size: 15px;
  color: #9CA3AF;
  font-family: 'YekanBakh', sans-serif;
}

.lobby-side {
  margin-top: 20px;
  text-align: center;
}

.lobby-side-label {
  font-size: 24px;
  font-weight: 400;
  color: #F9FAFB;
  font-family: 'YekanBakh', sans-serif;
}

/* ============================================================
   OVERLAYS
   ============================================================ */

#game-result-overlay,
#waiting-overlay {
  background-color: rgba(15, 20, 25, 0.95);
  position:fixed;
  width: 100%;
  height: 100%;
  z-index: 9000;
  top: 0px;
  left: 0px;
}

#waiting-overlay .loader {
  width: 100%;
  height: 100%;
  opacity: 1;
  text-align: center;
}

#waiting-overlay .loader:before {
  content: '';
  display: inline-block;
  height: 90%;
  vertical-align: middle;
  margin-right: -0.25em;
}

#waiting-overlay span {
  font-family: 'YekanBakh', sans-serif;
  font-size: 22px;
  color: #F9FAFB;
}

#waiting-overlay div.inner {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
}

#waiting-overlay div.challenge {
  width: 60%;
  min-width: 250px;
  margin: 0 auto;
}

#waiting-overlay div.challenge span {
  font-size: 20px;
}

#game-result-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: #141920;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  padding: 52px 60px;
  text-align: center;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
}

.result-message {
  font-size: 40px;
  font-weight: 400;
  font-family: 'YekanBakh', sans-serif;
  margin: 0;
  line-height: 1.1;
  text-shadow: none;
}

.result-scores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.result-state {
  font-size: 11px;
  color: #6B7280;
  font-family: 'YekanBakh', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.result-score-nums {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 52px;
  font-weight: 400;
  font-family: 'YekanBakh', sans-serif;
  color: #F9FAFB;
  line-height: 1;
}

.result-score-sep {
  color: #374151;
  font-size: 36px;
}

.result-round-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  width: 100%;
}

.result-points-gained {
  font-size: 18px;
  font-weight: 500;
  font-family: 'YekanBakh', sans-serif;
  color: #F9FAFB;
}

.result-reason {
  font-size: 13px;
  font-family: 'YekanBakh', sans-serif;
  color: #F59E0B;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.result-auto-close {
  font-size: 12px;
  font-family: 'YekanBakh', sans-serif;
  color: #6B7280;
}

.result-countdown {
  font-weight: 600;
  color: #9CA3AF;
}

#btn-close-window {
  padding: 14px 40px;
  background: rgba(255, 255, 255, 0.06);
  color: #9CA3AF;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 400;
  font-family: 'YekanBakh', sans-serif;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

#btn-close-window:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #F9FAFB;
}

.navbar-toggle {
  width: 100%;
  height: 100%;
  max-width: 40px;
  max-height: 40px;
  display: block !important;
  position: inherit;
  float: none;
  margin: 0 auto;
  padding: 0;
  background-color: rgba(26, 31, 46, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
}

.navbar-toggle .glyphicon {
  padding-right: 0;
  color: #9CA3AF;
}

.navbar .badge {
  margin-left: 5px;
}

.navbar .badge.left {
  margin-right: 5px;
}

/* ============================================================
   BOARD SURFACE
   ============================================================ */

.board {
  background-color: transparent;
}

.frame {
  background: transparent;
}

/* Bar */
.bar {
  background: transparent;
}

/* Triangles are provided by board.png — no CSS pseudo-elements needed. */

/* ============================================================
   PIECE VISUAL STYLE – 3D sphere appearance
   ============================================================ */

/* Piece shadow: a separate DOM element rendered at z-index 0 inside the point's
   stacking context, so it stays below all z-index:1 piece elements. */
.piece-shadow {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 0;
  aspect-ratio: 1 / 1;
  background-image: url(../images/piece-shadow.png);
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0.7;
  transform: rotate(calc(-1 * var(--slant))) translateY(6%);
}

#top-bar .piece-shadow,
#bottom-bar .piece-shadow {
  width: 60%;
  left: 50%;
  transform: translateX(-50%) translateY(10%);
}

.piece.white .image {
  background-image: url(../images/piece-white.png);
  background-size: cover;
  background-position: center;
}

.piece.black .image {
  background-image: url(../images/piece-black.png);
  background-size: cover;
  background-position: center;
}

/* ============================================================
   DICE
   ============================================================ */

.dice {
  text-align: center;
}

.die {
  margin: 4px;
  display: inline-block;
  width: 56px;
  height: 56px;
  text-indent: -100px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.4);
}

.digit-1-white  { background-image: url(../images/digit-1-white.png); }
.digit-2-white  { background-image: url(../images/digit-2-white.png); }
.digit-3-white  { background-image: url(../images/digit-3-white.png); }
.digit-4-white  { background-image: url(../images/digit-4-white.png); }
.digit-5-white  { background-image: url(../images/digit-5-white.png); }
.digit-6-white  { background-image: url(../images/digit-6-white.png); }

.digit-1-black  { background-image: url(../images/digit-1-black.png); }
.digit-2-black  { background-image: url(../images/digit-2-black.png); }
.digit-3-black  { background-image: url(../images/digit-3-black.png); }
.digit-4-black  { background-image: url(../images/digit-4-black.png); }
.digit-5-black  { background-image: url(../images/digit-5-black.png); }
.digit-6-black  { background-image: url(../images/digit-6-black.png); }

.dice .played {
  opacity: 0.4;
  filter: grayscale(60%);
}

/* ============================================================
   SLOT BACKGROUND IMAGES
   ============================================================ */

/* .slot-bg is a non-rotating overlay that fills each point.
   It inherits --slant from the parent #pointN and counter-rotates
   to stay axis-aligned with the board, so background images always
   appear upright regardless of the point's CSS slant.

   Top row (row0): the parent pivots at its top-centre (50% 0%), so
   the child counter-rotates around the same axis.

   Bottom row (row1): the parent's compound transform
   (translateY(100%) rotate() translateY(-100%)) is equivalent to
   rotating around the bottom-centre.  The child uses transform-origin
   50% 100% so its counter-rotation cancels the same effective pivot. */

/* Per-point slot position/size overrides.
   Set any of these on an individual #pointN rule to shift or resize
   only that slot's background image.
   Example: #point7 { --slot-x: -5%; --slot-y: 2%; --slot-w: 110%; --slot-h: 95%; } */
.point {
  --slot-x: 0%;
  --slot-y: 0%;
  --slot-w: 100%;
  --slot-h: 100%;
  /* Highlight image position/size — override per #pointN to fine-tune.
     Example: #point12 { --hl-x: -5%; --hl-y: 0%; --hl-w: 110%; --hl-h: 100%; } */
  --hl-x: 0%;
  --hl-y: 0%;
  --hl-w: 100%;
  --hl-h: 100%;
}

.slot-bg {
  position: absolute;
  top: var(--slot-y);
  left: var(--slot-x);
  width: var(--slot-w);
  height: var(--slot-h);
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  transition: filter 0.15s ease;
}

.row0 .point .slot-bg {
  transform: rotate(calc(-1 * var(--slant)));
  transform-origin: 50% 0%;
}

.row1 .point .slot-bg {
  transform: rotate(calc(-1 * var(--slant)));
  transform-origin: 50% 100%;
}


/* ── Highlight state ──────────────────────────────────────────
   When a puck can move to this slot, add a green glow to the
   slot image without needing a separate highlight image asset. */
.point.highlight .slot-bg {
  filter: none;
}

/* ── .hl-overlay ──────────────────────────────────────────────
   Sibling of .point inside .field — no transform ancestor, so
   mix-blend-mode blends directly against the board image.
   JS reads --hl-x/y/w/h from the corresponding #pointN and
   applies them as inline left/top/width/height on this div. */
.hl-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: normal;
  display: none;
}

@keyframes hl-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}

.hl-overlay.hl-animate {
  animation: hl-pulse 1.2s ease-in-out infinite;
}

.hl-overlay.hl-odd {
  mix-blend-mode: normal;
}

.hl-overlay.hl-even {
}

/* ============================================================
   MOVE HIGHLIGHTING
   ============================================================ */

.point.highlight {
  cursor: pointer;
  z-index: 5;
}


/* Selected piece golden glow */
.piece.selected .image {
  box-shadow:
    0 0 0 3px #FFD700,
    0 0 16px rgba(255, 215, 0, 0.75),
    inset 0 0 8px rgba(255, 215, 0, 0.25);
}

/* Flying animation piece */
.piece.anim-fly {
  pointer-events: none;
}

.piece.anim-fly .image {
  border-radius: 50%;
}

/* ============================================================
   UNDO BUTTON OVERLAY
   Positioned in screen space (outside the perspective wrapper)
   ============================================================ */

.btn-undo-overlay {
  position: absolute;
  top: 185px;   /* below the player HUD (progress ring ~110px + name + score + timer + gap) */
  left: 12px;
  z-index: 200;
  background: rgba(26, 31, 46, 0.9);
  color: #9CA3AF;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  padding: 5px 14px 5px 10px;
  font-size: 13px;
  font-family: 'YekanBakh', sans-serif;
  cursor: pointer;
  letter-spacing: 0.3px;
  backdrop-filter: blur(4px);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-undo-overlay:hover {
  background: rgba(37, 43, 59, 0.95);
  color: #ffffff;
  border-color: rgba(59, 130, 246, 0.5);
}

.btn-undo-overlay:active {
  background: rgba(59, 130, 246, 0.15);hidden;
}

/* ============================================================
   RESIGN BUTTON OVERLAY
   Mirrors the undo button; right side, below opponent HUD.
   ============================================================ */

.btn-resign-overlay {
  position: absolute;
  top: 228px;
  left: 12px;
  z-index: 200;
  background: rgba(26, 31, 46, 0.9);
  color: #9CA3AF;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: 'YekanBakh', sans-serif;
  font-weight: 400;
  cursor: pointer;
  letter-spacing: 0.3px;
  backdrop-filter: blur(4px);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-resign-overlay:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #F87171;
  border-color: rgba(239, 68, 68, 0.4);
}

.btn-resign-overlay:active {
  background: rgba(239, 68, 68, 0.25);
}

#resign-confirm {
  position: absolute;
  top: 270px;
  left: 12px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(26, 31, 46, 0.95);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  backdrop-filter: blur(4px);
}

.resign-confirm-text {
  font-size: 12px;
  color: #9CA3AF;
  font-family: 'YekanBakh', sans-serif;
  white-space: nowrap;
}

#resign-confirm-yes,
#resign-confirm-no {
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: 'YekanBakh', sans-serif;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s;
}

#resign-confirm-yes {
  background: rgba(239, 68, 68, 0.2);
  color: #F87171;
}

#resign-confirm-yes:hover {
  background: rgba(239, 68, 68, 0.35);
}

#resign-confirm-no {
  background: rgba(255, 255, 255, 0.06);
  color: #9CA3AF;
}

#resign-confirm-no:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #F9FAFB;
}

/* ============================================================
   FULLSCREEN BUTTON
   Positioned in screen space, bottom-right corner of the game view.
   ============================================================ */

.btn-fullscreen {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 1100;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(26, 31, 46, 0.9);
  color: #9CA3AF;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-fullscreen:hover {
  background: rgba(37, 43, 59, 0.95);
  color: #ffffff;
  border-color: rgba(59, 130, 246, 0.5);
}

.btn-fullscreen:active {
  background: rgba(59, 130, 246, 0.15);
}

/* ============================================================
   PLAYER HUD
   Positioned in screen space above the perspective board.
   Left player: top-left corner
   Right player: top-right corner
   Vertical layout: name → progress ring → score → timer
   ============================================================ */

.player-hud {
  position: absolute;
  top: 8px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.player-hud-left {
  left: 12px;
}

.player-hud-right {
  right: 12px;
}

/* Progress ring container — three layers stacked:
   1. Progress-BG.png  (static track ring background)
   2. SVG circle       (glowing stroke, driven by stroke-dashoffset)
   3. Avatar-BG.png + letter initial (centred inside)        */
.player-hud-progress-wrap {
  position: relative;
  width: 130px;
  height: 130px;
}

.player-hud-progress-bg,
.player-hud-progress-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.player-hud-progress-bg {
  object-fit: contain;
}

/* SVG progress ring — circumference = 2π×70 ≈ 440.
   dashoffset 0 = full ring, 440 = empty.
   rotate(-90deg) moves the start point to 12 o'clock. */
.player-hud-progress-svg {
  overflow: visible; /* allow glow to bleed outside SVG bounds */
}

.player-hud-progress-svg circle {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 440 440; /* full ring by default; JS sets this to shrink clockwise */
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: center;
}

.player-hud-ring-purple circle {
  stroke: #d946ef;
  filter: drop-shadow(0 0 8px #d946ef);
}

.player-hud-ring-orange circle {
  stroke: #f97316;
  filter: drop-shadow(0 0 8px #f97316);
}

/* Centre the avatar background + letter on top of both ring images */
.player-hud-avatar-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-hud-avatar-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player-hud-avatar {
  position: relative;
  z-index: 1;
  font-size: 40px;
  font-weight: 100;
  color: #ffffff;
  font-family: 'YekanBakh', sans-serif;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  line-height: 0;
  transform: translateY(0.08em);
}

.player-hud-name {
  font-size: 16px;
  font-weight: 400;
  color: #F9FAFB;
  font-family: 'YekanBakh', sans-serif;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}


.player-hud-timer {
  font-size: 15px;
  font-weight: 400;
  color: #F9FAFB;
  font-family: 'YekanBakh', sans-serif;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  min-height: 16px;
}

/* ============================================================
   CENTRAL SCOREBOARD
   ============================================================ */

#hud-scoreboard-wrap {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: none; /* shown by JS once a match starts */
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

#hud-scoreboard-label {
  font-family: 'YekanBakh', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #F9FAFB;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  letter-spacing: 1px;
  white-space: nowrap;
}

#hud-scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 60px;
  position: relative;
}

.hud-scoreboard-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#hud-scoreboard-text {
  position: relative;
  z-index: 1;
  font-family: 'YekanBakh', sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  letter-spacing: 2px;
  line-height: 1;
}

/* ============================================================
   GAME RESULT — CLOSE BUTTON
   ============================================================ */

.result-actions {
  position: absolute;
  bottom: 48px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
}

#btn-close-window {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: rgba(26, 31, 46, 0.9);
  color: #F9FAFB;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 400;
  font-family: 'YekanBakh', sans-serif;
  cursor: pointer;
  letter-spacing: 0.01em;
  backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

#btn-close-window:hover {
  background: rgba(37, 43, 59, 0.95);
  border-color: rgba(59, 130, 246, 0.6);
  transform: translateY(-1px);
}

#btn-close-window:active {
  transform: translateY(0);
  background: rgba(59, 130, 246, 0.15);
}

/* ============================================================
   ALERT NOTIFICATIONS (ohSnap)
   ============================================================ */

.alert {
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  position: absolute;
  bottom: 0px;
  right: 21px;
  float: right;
  clear: right;
  background-color: rgba(26, 31, 46, 0.95);
  backdrop-filter: blur(6px);
  color: #F9FAFB;
}

.alert-red    { background-color: rgba(180, 40, 50, 0.88); color: #fff; }
.alert-green  { background-color: rgba(35, 160, 100, 0.88); color: #fff; }
.alert-blue   { background-color: rgba(59, 130, 246, 0.88); color: #fff; }
.alert-yellow { background-color: rgba(200, 160, 30, 0.88); color: #fff; }
.alert-orange { background-color: rgba(139, 92, 246, 0.88); color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 768px) {
  .landing-title { font-size: 44px; }

  .board-3d-wrapper {
    width: min(100%, calc(93vh * (7 / 4)));
  }
}

@media screen and (max-width: 544px) {
  .landing-title { font-size: 38px; }
  .landing-icon { width: 68px; height: 68px; border-radius: 20px; }
}

@media screen and (max-width: 480px) {
  .landing-title { font-size: 32px; letter-spacing: -1px; }
  .landing-wrap { padding: 28px 16px; }
  .landing-card { padding: 20px 16px; }

  #btn-play-bot {
    padding: 14px 20px;
    font-size: 15px;
  }

  .col-ts-12 {
    width: 100%;
    float: none;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .hidden-ts {
    display: none;
  }

  div.action-panel {
    min-width: 64px;
    height: 64px;
  }

  div.action-panel button.action {
    min-width: 64px;
    margin-bottom: 4px;
    font-size: 12px;
    padding: 7px 0;
    border-radius: 12px;
  }

  #btn-roll {
    margin-top: 25%;
  }

  div.dice-panel {
    min-width: 64px;
    height: 32px;
  }

  .dice .die {
    width: 32px;
    height: 32px;
  }

  .player-hud-progress-wrap {
    width: 88px;
    height: 88px;
  }

  .player-hud-avatar {
    font-size: 18px;
  }

  .player-hud-name {
    font-size: 13px;
  }

  .player-hud-timer {
    font-size: 12px;
  }

  .board-3d-wrapper {
    width: min(100%, calc(94vh * (7 / 4)));
  }
}

@media screen and (max-width: 380px) {
  .landing-title { font-size: 26px; }

  .h1, .h2, .h3, h1, h2, h3 {
    margin-top: 8px;
    margin-bottom: 4px;
  }
}

  /* Point positions are now handled entirely by [data-vs="N"] selectors above.
   For BLACK players, the JS sets data-vs to the visual slot (same as WHITE's
   point number at that position), so no CSS overrides are needed here. */






/* DEBUG — remove when done
  .point { background: rgba(255, 0, 0, 0.25); border: 1px solid red; }
  .point::after { content: attr(id); color: white; font-size: 10px; position: absolute; top: 0; left: 0; }*/