:root {
  --bg: #100d0d;
  --panel: #1b1716;
  --panel2: #29201d;
  --ink: #fee8c5;
  --muted: #bba993;
  --lime: #e3b568;
  --teal: #d7a85a;
  --line: #44342e;
  --danger: #e53a48;
  --burgundy: #a00118;
  --cream: #fee2b1;
}

.logo,
.hero-mark {
  display: block;
  object-fit: cover;
  background: #050708;
  border: 1px solid #d9a354;
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  box-shadow: 0 4px 14px #0008;
}

.login {
  padding-top: 22px;
}

.hero-mark {
  width: 142px;
  height: 142px;
  margin: 2px auto 22px;
  border-radius: 28px;
  box-shadow: 0 14px 38px #a0011845, 0 0 0 1px #e7b96c55;
}

.splash-die {
  --die: #a00118;
  --pip: #fee2b1;
  --edge: #e52a3c;
}

.splash-die.second {
  --die: #fee2b1;
  --pip: #a00118;
  --edge: #fff0d0;
}

.splash-die .face {
  border-color: var(--edge);
  background-color: var(--die);
  box-shadow: inset 7px 7px 14px #fff4, inset -8px -8px 15px #19000655,
    0 5px 14px #0007;
}

.splash-die .p1 {
  background-image: radial-gradient(circle at 50% 50%, var(--pip) 0 6px, transparent 6.7px);
}

.splash-die .p2 {
  background-image: radial-gradient(circle at 27% 27%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 73% 73%, var(--pip) 0 5px, transparent 5.7px);
}

.splash-die .p3 {
  background-image: radial-gradient(circle at 25% 25%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 50% 50%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 75% 75%, var(--pip) 0 5px, transparent 5.7px);
}

.splash-die .p4 {
  background-image: radial-gradient(circle at 27% 27%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 73% 27%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 27% 73%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 73% 73%, var(--pip) 0 5px, transparent 5.7px);
}

.splash-die .p5 {
  background-image: radial-gradient(circle at 25% 25%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 75% 25%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 50% 50%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 25% 75%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 75% 75%, var(--pip) 0 5px, transparent 5.7px);
}

.splash-die .p6 {
  background-image: radial-gradient(circle at 27% 22%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 73% 22%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 27% 50%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 73% 50%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 27% 78%, var(--pip) 0 5px, transparent 5.7px), radial-gradient(circle at 73% 78%, var(--pip) 0 5px, transparent 5.7px);
}

.splash-logo {
  display: block;
  width: 104px;
  height: 104px;
  object-fit: cover;
  margin: 8px auto 4px;
  border-radius: 24px;
  filter: drop-shadow(0 8px 18px #0008);
}

.splash-sub {
  color: #d8b98b;
}

.primary,
nav .center span {
  background: linear-gradient(135deg, #fee2b1, #d7a04f);
  color: #2b1011;
}

.action-card {
  background: linear-gradient(135deg, #6d0013, #240e12);
}

.balance {
  background: linear-gradient(135deg, #fee2b1, #d39a45);
  color: #321214;
}

@media (max-height: 680px) {
  .splash-logo {
    width: 84px;
    height: 84px;
  }
}

.camera-file {
  display: block;
  margin: 16px 0;
  padding: 16px;
  border: 1px dashed #d6a04c;
  border-radius: 16px;
  color: var(--cream);
  cursor: pointer;
}

.camera-file input {
  display: none;
}

.photo-preview {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 16px;
  background: #090707;
}

.vision-state {
  margin: 12px 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: #342419;
  color: #e7c790;
  font-size: 10px;
}

.brushes,
.editor-actions,
.game-actions,
.join-card > div {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.brushes button,
.editor-actions button,
.move-choice {
  flex: 1;
  padding: 10px;
  border-radius: 11px;
  background: var(--panel2);
  color: var(--ink);
}

.live-dot {
  margin-inline-start: auto;
  color: #7bd5a4;
  font-size: 9px;
}

.live-dot::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 5px;
  border-radius: 50%;
  background: #48c982;
  box-shadow: 0 0 9px #48c982;
}

.brushes button.active {
  outline: 2px solid var(--gold, #d6a04c);
  color: var(--cream);
}

.board-editor,
.mini-board {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(12, minmax(22px, 1fr));
  gap: 3px;
  padding: 9px;
  border: 2px solid #b98238;
  border-radius: 13px;
  background: #120d0c;
  overflow-x: auto;
}

.board-point,
.mini-board span {
  min-width: 25px;
  height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 1px;
  border-radius: 4px 4px 14px 14px;
  background: #3b2920;
  color: #baa78f;
}

.board-point:nth-child(n + 13),
.mini-board span:nth-child(n + 13) {
  flex-direction: column-reverse;
  border-radius: 14px 14px 4px 4px;
}

.board-point.white,
.mini-board .white {
  background: linear-gradient(#fee8c5, #d9a558);
  color: #5a191b;
}

.board-point.black,
.mini-board .black {
  background: linear-gradient(#bd0b27, #680010);
  color: #fee2b1;
}

.board-point small,
.mini-board small {
  font-size: 8px;
}

.board-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
  text-align: right;
}

.board-meta label {
  color: var(--muted);
  font-size: 10px;
}

.board-meta input,
.board-meta select {
  margin-top: 5px;
  width: 100%;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
  color: var(--ink);
}

.board-totals {
  margin: 12px 0;
  color: #84d6aa;
}

.board-totals.invalid {
  color: #ff8790;
}

.game-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 12px;
}

.game-stats span,
.game-stats button {
  padding: 10px 5px;
  border-radius: 13px;
  background: var(--panel);
  color: var(--ink);
  text-align: center;
}

.game-stats b,
.game-stats small {
  display: block;
}

.game-stats small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
}

.game-row {
  width: 100%;
  color: var(--ink);
  text-align: right;
}

.join-card input {
  flex: 1;
  text-transform: uppercase;
}

.danger.compact {
  width: auto;
  margin: 0;
}

.move-choice {
  display: block;
  width: 100%;
  margin: 7px 0;
  text-align: right;
}

@media (max-width: 420px) {
  .board-editor,
  .mini-board {
    grid-template-columns: repeat(12, 28px);
  }
  .game-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .game-stats button {
    grid-column: 1 / -1;
  }
}

.play-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0 14px;
}

.play-modes button {
  min-height: 108px;
  padding: 13px 7px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: var(--ink);
}

.play-modes button.active {
  border-color: #d6a04c;
  background: linear-gradient(145deg, #6d0013, #2c1114);
  box-shadow: 0 8px 22px #70001833;
}

.play-modes span,
.play-modes b,
.play-modes small {
  display: block;
}

.play-modes span {
  font-size: 24px;
}

.play-modes b {
  margin-top: 8px;
  font-size: 11px;
}

.play-modes small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5;
}

.room-builder {
  border-color: #664736;
  background: linear-gradient(160deg, #211917, #171212);
}

.room-builder label {
  display: block;
  margin: 15px 0;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.room-builder select {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel2);
  color: var(--ink);
}

.point-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.point-options button {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
  color: var(--ink);
}

.point-options button.active {
  border-color: #fee2b1;
  background: var(--burgundy);
}

.room-builder .primary,
.room-secondary {
  width: 100%;
  margin-top: 9px;
  padding: 14px;
  border-radius: 13px;
}

.room-secondary {
  background: transparent;
  color: var(--cream);
  border: 1px solid #765544;
}

.room-builder p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.9;
}

.analysis-hero {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid #58392e;
  border-radius: 22px;
  background: linear-gradient(135deg, #43000d, #171111);
}

.analysis-hero img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 20px;
}

.analysis-hero h2 {
  margin: 5px 0;
  font-size: 18px;
}

.analysis-hero p {
  margin: 0;
  color: #ccb79d;
  font-size: 10px;
  line-height: 1.8;
}

.engine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.engine-grid article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.engine-grid span,
.engine-grid b,
.engine-grid small {
  display: block;
}

.engine-grid span {
  color: #d6a04c;
  font-size: 9px;
}

.engine-grid b {
  margin-top: 7px;
}

.engine-grid small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

.primary-link {
  border: 1px solid #a9763b;
  background: linear-gradient(135deg, #fee2b1, #d6a04c);
  color: #311012;
}

.primary-link small {
  color: #634029;
}

.compact-upload {
  padding: 18px;
}

@media (max-width: 360px) {
  .play-modes {
    grid-template-columns: 1fr;
  }
  .play-modes button {
    min-height: 82px;
  }
}

.waiting-room {
  position: fixed;
  z-index: 40;
  inset: 0;
  width: min(760px, 100%);
  margin: auto;
  padding: max(90px, env(safe-area-inset-top)) 28px 110px;
  background: radial-gradient(circle at 50% 34%, #4f0715, #160f10 48%, #090707);
  text-align: center;
}

.waiting-room h2 {
  margin: 10px 0 7px;
  font-size: 26px;
}

.waiting-room p,
.wait-note {
  display: block;
  color: #cbb59a;
  line-height: 1.8;
}

.waiting-room > button {
  margin-top: 30px;
  padding: 13px 28px;
  border: 1px solid #79574a;
  border-radius: 14px;
  background: transparent;
  color: var(--cream);
}

.search-orbit {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 10px auto 28px;
  border: 1px solid #d6a04c55;
  border-radius: 50%;
  animation: orbit-pulse 1.8s ease-in-out infinite;
}

.search-orbit::before,
.search-orbit::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px dashed #fee2b166;
  border-radius: 50%;
  animation: orbit-spin 4s linear infinite;
}

.search-orbit::after {
  inset: 30px;
  animation-direction: reverse;
}

.search-orbit i {
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 16px #fee2b1;
}

.search-orbit i:first-child {
  top: 9px;
  left: 16px;
}

.search-orbit i:nth-child(2) {
  right: 11px;
  bottom: 21px;
  background: var(--burgundy);
  box-shadow: 0 0 16px #e51c3a;
}

.search-orbit span {
  position: absolute;
  inset: 35px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #fee2b1, #c88c38);
  color: #7c0718;
  font-size: 25px;
}

.search-bars {
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 6px;
  margin: 24px 0;
}

.search-bars i {
  width: 5px;
  height: 12px;
  border-radius: 4px;
  background: #e6b665;
  animation: search-wave 1s ease-in-out infinite alternate;
}

.search-bars i:nth-child(2) { animation-delay: .16s; }
.search-bars i:nth-child(3) { animation-delay: .32s; }
.search-bars i:nth-child(4) { animation-delay: .48s; }

.invite-ticket {
  width: 210px;
  margin: 22px auto;
  padding: 13px;
  border: 1px dashed #e7b967;
  border-radius: 16px;
  background: #120b0caa;
}

.invite-ticket small,
.invite-ticket b {
  display: block;
}

.invite-ticket b {
  margin-top: 7px;
  color: var(--cream);
  font-size: 25px;
  letter-spacing: 5px;
}

@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-pulse { 50% { transform: scale(1.06); } }
@keyframes search-wave { to { height: 31px; background: var(--burgundy); } }

.history-title {
  margin: 24px 2px 8px;
}

.history-title h3 {
  margin: 0;
}

.history-title small {
  color: var(--muted);
  font-size: 9px;
}

.game-table {
  margin: 12px -10px 20px;
  padding: 12px;
  border: 1px solid #51382e;
  border-radius: 22px;
  background: #0c0909;
  box-shadow: 0 20px 48px #0008;
}

.game-table-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 4px 11px;
}

.game-table-head div {
  flex: 1;
}

.game-table-head small {
  color: var(--muted);
}

.game-table-head h3 {
  margin: 3px 0 0;
}

.game-table-head > button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--panel2);
  color: var(--ink);
  font-size: 20px;
}

.pro-board {
  direction: ltr;
  display: grid;
  grid-template-columns: 1fr 25px;
  gap: 5px;
  aspect-ratio: 1.27 / 1;
  max-height: 550px;
  padding: 7px;
  border: 5px solid #7a3d20;
  border-radius: 10px;
  background: linear-gradient(135deg, #a65b2c, #5e2d19);
  box-shadow: inset 0 0 0 2px #d89b59, inset 0 0 22px #210b05, 0 10px 25px #0008;
}

.board-surface {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr) 13px repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
  background: #e1b875;
  box-shadow: inset 0 0 25px #6d371c66;
  overflow: hidden;
}

.game-point {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.game-point::before {
  content: "";
  position: absolute;
  inset-inline: 1px;
  height: 87%;
  filter: drop-shadow(0 2px 1px #3a140855);
}

.game-point.point-upper::before {
  top: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.game-point.point-lower::before {
  bottom: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.game-point.triangle-wine::before { background: linear-gradient(90deg, #89001a, #bb1733, #6d0013); }
.game-point.triangle-cream::before { background: linear-gradient(90deg, #f9dfae, #fff0ce, #d8a85d); }

.game-point > small {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  color: #29120d99;
  font-size: 7px;
}

.game-point.point-upper > small { top: 2px; }
.game-point.point-lower > small { bottom: 2px; }

.checker-stack {
  position: absolute;
  z-index: 4;
  inset-inline: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-point.point-upper .checker-stack { top: 6px; }
.game-point.point-lower .checker-stack { bottom: 6px; flex-direction: column-reverse; }

.checker {
  display: block;
  width: min(100%, 30px);
  aspect-ratio: 1;
  margin-top: -3px;
  border-radius: 50%;
  box-shadow: inset 2px 2px 4px #fff7, inset -2px -3px 4px #21060988, 0 2px 3px #0008;
}

.checker-stack.cream .checker {
  border: 1px solid #bf8e47;
  background: radial-gradient(circle at 35% 30%, #fff3d5, #e3b66f 68%, #a66b30);
}

.checker-stack.wine .checker {
  border: 1px solid #4c000d;
  background: radial-gradient(circle at 35% 30%, #e62946, #920019 68%, #3f000a);
}

/* High-contrast tournament cloth: ivory checkers must never disappear into the board. */
.board-surface {
  background:
    radial-gradient(circle at 50% 46%, #416b65 0%, #2b514d 52%, #173431 100%);
  box-shadow: inset 0 0 38px #061a18cc, inset 0 0 0 1px #d7ad6840;
}
.game-point.triangle-wine::before {
  background: linear-gradient(90deg, #710018, #c0183a 48%, #650013);
}
.game-point.triangle-cream::before {
  background: linear-gradient(90deg, #c38a3f, #f2c878 48%, #b8782f);
}
.game-point > small { color:#fff1d6aa; text-shadow:0 1px 2px #001; }
.checker-stack.cream .checker {
  border: 2px solid #74461f;
  background: radial-gradient(circle at 32% 26%, #fffdf4 0%, #f8dfae 52%, #d39a4e 82%, #7e4b22 100%);
  box-shadow: inset 2px 2px 4px #fff, inset -3px -4px 5px #7c481e88, 0 3px 5px #001b18cc;
}
.checker-stack.wine .checker {
  border: 2px solid #ffd69a99;
  background: radial-gradient(circle at 32% 26%, #f3415c 0%, #a50025 57%, #520012 100%);
  box-shadow: inset 2px 2px 4px #ff8292aa, inset -3px -4px 5px #280008aa, 0 3px 5px #001b18cc;
}

.match-report { margin:14px 0 4px; padding:14px; border:1px solid #d6a65a55; border-radius:18px; background:#120e0de8; color:#f9e5bd; }
.match-report[hidden] { display:none; }
.match-report-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; }
.match-report-head h3 { margin:2px 0; font-size:18px; }
.match-report-head small { color:#bda98a; }
.match-result-badge { min-width:76px; padding:8px 12px; border-radius:14px; text-align:center; background:#1c5b4c; color:#e9fff7; font-weight:800; }
.match-result-badge.lost { background:#651426; color:#ffe5ea; }
.report-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:12px; }
.report-metrics span { padding:9px 5px; border-radius:12px; text-align:center; background:#211a17; }
.report-metrics b,.report-metrics small { display:block; }
.report-metrics small { margin-top:3px; color:#aa987d; font-size:10px; }
.event-timeline { display:grid; gap:6px; max-height:300px; overflow:auto; padding-left:3px; }
.event-row { display:grid; grid-template-columns:34px 1fr auto; gap:8px; align-items:center; padding:8px; border-radius:10px; background:#1d1715; }
.event-row>i { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#3a2820; color:#f4c875; font-style:normal; }
.event-row small { color:#a89578; direction:ltr; }
.analysis-pending { padding:10px; border-radius:10px; background:#2b211c; color:#d9c6a4; text-align:center; }
@media (max-width:600px) {
  .match-report { margin-inline:6px; padding:11px; }
  .report-metrics { grid-template-columns:repeat(2,1fr); }
  .event-row { grid-template-columns:30px 1fr; }
  .event-row small { display:none; }
}

.checker-count {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 10px;
  background: #100b0bdd;
  color: #fff1d6;
  font-size: 9px;
  text-align: center;
}

.board-bar-slot {
  grid-column: 7;
  position: relative;
  z-index: 3;
  background: linear-gradient(90deg, #4d2517, #8b4a2a, #472015);
  border-inline: 1px solid #d09a5c;
}

.board-bar-slot.bar-upper { grid-row: 1; }
.board-bar-slot.bar-lower { grid-row: 2; }

.board-bar-slot span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fee2b1;
  font-size: 9px;
}
.board-bar-slot .bar-checkers { position:absolute; z-index:5; inset:4px 1px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transform:none; }
.bar-checkers .checker { flex:0 0 auto; width:22px; height:22px; margin:0; }
.bar-checkers.cream .checker { border:1px solid #bf8e47; background:radial-gradient(circle at 35% 30%,#fff3d5,#e3b66f 68%,#a66b30); }
.bar-checkers.wine .checker { border:1px solid #4c000d; background:radial-gradient(circle at 35% 30%,#e62946,#920019 68%,#3f000a); }
.bar-checkers b { position:absolute; min-width:18px; padding:2px; border-radius:50%; background:#0b0808e8; color:#ffe1ae; font-size:9px; text-align:center; }
.board-bar-slot.legal-source { outline:2px solid #69ffc4; outline-offset:-2px; background:linear-gradient(90deg,#285b48,#8b4a2a,#285b48); }

.board-center {
  position: absolute;
  z-index: 6;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 7px;
}
.board-center { left:auto; right:7px; top:50%; transform:translateY(-50%); flex-direction:column; }
.board-center.cube-offered { left:50%; right:auto; transform:translate(-50%,-50%); }
.cube-response { display:grid; gap:4px; margin-top:4px; }
.cube-response button { width:46px; min-height:27px; padding:3px; border-radius:8px; font-size:8px; }
.cube-response #acceptDouble { background:#16714e;color:#fff; }.cube-response #rejectDouble { background:#7d1024;color:#fff; }

.cube-value,
.board-dice > i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: #fff0cf;
  color: #720014;
  box-shadow: 0 4px 8px #0008;
  font-style: normal;
  font-weight: 800;
}

.board-dice {
  display: flex;
  gap: 4px;
}

.board-dice > i {
  background: #a00118;
  color: #fee2b1;
}

.bearoff {
  grid-column: 2;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #35170f;
  color: #fee2b1;
}

.bearoff.bearoff-upper { grid-row: 1; align-self: start; height: 48%; }
.bearoff.bearoff-lower { grid-row: 1; align-self: end; height: 48%; }

.turn-strip {
  display: flex;
  justify-content: space-between;
  padding: 10px 4px 2px;
  color: var(--muted);
  font-size: 10px;
}

.turn-strip b {
  color: var(--cream);
}

.game-room-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 10px; padding: 4px; border-radius: 12px; background: #170d0b; }
.game-room-tabs button { padding: 10px; border-radius: 9px; background: transparent; color: var(--muted); }
.game-room-tabs button.active { background: #6f0015; color: #ffe6b8; }
.game-room-tabs button:disabled { opacity: .35; cursor: not-allowed; }
.engine-room { margin-top: 12px; padding: 14px; border: 1px solid #6f3c27; border-radius: 16px; background: linear-gradient(145deg,#160d0c,#24120f); }
.engine-room-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.engine-room-head h3 { margin: 4px 0; color: #ffe0aa; }
.engine-room-head small,.engine-room>p { color: var(--muted); font-size: 10px; line-height: 1.8; }
#engineHealth { padding: 6px 9px; border-radius: 12px; background: #42151b; color: #ff9f9f; font-size: 9px; }
#engineHealth.ready { background: #153829; color: #83e0ae; }
.engine-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.engine-actions button { padding: 11px 8px; border-radius: 11px; }
.engine-result { display: grid; gap: 8px; margin-top: 10px; }
.engine-result article { padding: 11px; border-radius: 12px; background: #0d1111; }
.engine-result header { display: flex; justify-content: space-between; color: #f7d59d; }
.engine-result header small,.engine-move small { color: var(--muted); }
.engine-move { display: grid; grid-template-columns: 22px 1fr auto; gap: 7px; align-items: center; padding-top: 8px; font-size: 10px; }
.engine-error { color: #ff9d9d; }

.player-hud { direction: rtl; display: flex; align-items: center; gap: 9px; padding: 7px 4px; }
.player-hud div { flex: 1; }
.player-hud b,.player-hud small { display: block; }
.player-hud small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.player-hud strong { direction: ltr; color: #edc982; font-size: 10px; }
.score-badge { display:grid; min-width:38px; padding:4px 7px; border:1px solid #8c6744; border-radius:10px; background:#1b100d; text-align:center; }
.score-badge b{font-size:15px;color:#ffe0a7}.score-badge small{font-size:7px!important;color:#a9957b!important}
.player-hud em { direction:ltr; min-width:82px; padding:7px 10px; border:1px solid #49372b; border-radius:10px; background:#080a0a; color:#f8e4bc; font-size:16px; font-style:normal; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:.5px; text-align:center; box-shadow:inset 0 1px #ffffff12; }
.player-hud em.clock-active { border-color:#d5a856; box-shadow:0 0 0 2px #d5a85622,inset 0 1px #ffffff20; }
.player-hud em.clock-danger { background: #830018; color: #fff; animation: clock-warning .75s ease-in-out infinite alternate; }
@keyframes clock-warning { to { box-shadow: 0 0 13px #e60036; } }
.hud-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.hud-avatar.wine { background: #9e071f; color: #ffe6bc; }
.hud-avatar.cream { background: #f4d69e; color: #790018; }
.cube-action { cursor:pointer; outline:2px solid #f0c26aaa; transition:transform .18s,box-shadow .18s; }
.cube-action:hover,.cube-action:focus-visible { transform:translateY(-2px) rotate(3deg); box-shadow:0 7px 15px #000b,0 0 0 3px #f0c26a33; }
.cube-caption { max-width:48px; color:#f4d397; font-size:7px; line-height:1.25; text-align:center; text-shadow:0 1px 2px #000; }
.game-point.legal-source .checker,.board-bar-slot.legal-source { cursor: pointer; filter: drop-shadow(0 0 7px #6fffc9); }
.game-point.legal-target::after,.bearoff.legal-target::after {
  content: ""; position: absolute; z-index: 9; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%,-50%); border: 3px solid #69ffc4; border-radius: 50%; background: #69ffc433; box-shadow: 0 0 12px #69ffc4;
}
.game-point.picked-point { background: #fff2a51f; }
.board-move-toolbar { display:grid; grid-template-columns:42px minmax(90px,auto) 42px; gap:7px; align-items:center; justify-content:center; pointer-events:none; }
.board-move-toolbar button { pointer-events:auto; width:42px; height:42px; padding:0; border:1px solid #d6a65c; border-radius:50%; background:linear-gradient(145deg,#40251e,#1b100e); color:#ffe4b5; font-size:21px; box-shadow:0 7px 18px #000b,inset 0 1px #fff2; }
.board-move-toolbar button.primary { background: #a40823; }
.board-move-toolbar button:disabled { opacity: .35; }
.board-move-toolbar span { padding:6px 10px; border:1px solid #8c684499; border-radius:999px; background:#100b0bd9; color:#f2d7a9; font-size:9px; text-align:center; box-shadow:0 4px 12px #0008; }
.move-placeholder { width:42px; }
.board-surface #legalMoves { position:absolute; z-index:18; left:7px; right:7px; bottom:10px; pointer-events:none; }
.moving-checker { position:fixed; z-index:1000; width:30px; height:30px; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); will-change:transform,filter; border:2px solid #f3c77d; box-shadow:0 12px 26px #000e,inset 3px 3px 5px #fff6; }
.moving-checker.cream { background:radial-gradient(circle at 35% 30%,#fff8e4,#e2b66f 70%,#9e632b); }
.moving-checker.wine { background:radial-gradient(circle at 35% 30%,#ef3852,#9f001a 70%,#3e0009); }
.moving-checker.captured { z-index:1001; box-shadow:0 0 0 3px #ffdc8a,0 8px 22px #000d,inset 3px 3px 5px #fff5; }
.board-dice.previous-roll { opacity:.7; transform:translate(-50%,-50%) scale(.86); }
.board-dice.previous-roll .cube-die { animation:none; }

.board-roll {
  position: absolute;
  z-index: 12;
  left: 50%;
  transform: translate(-50%,-50%);
  min-width: 112px;
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid #ffe4b0;
  border-radius: 999px;
  background: linear-gradient(145deg,#b40b2a,#730015);
  color: #fff0cf;
  font-weight: 900;
  box-shadow: 0 7px 18px #240007aa,inset 0 1px 0 #ffffff55;
  touch-action: manipulation;
  animation: roll-call 1.25s ease-in-out infinite;
}
.board-roll.roll-upper { top: 50%; left: 23%; }
.board-roll.roll-lower { top: 50%; left: 77%; }
.board-roll.rolling { opacity: .72; animation: none; }
@keyframes roll-call { 50% { transform: translate(-50%,-50%) scale(1.055); box-shadow: 0 9px 25px #5f0015cc,inset 0 1px 0 #ffffff77; } }

.board-dice {
  position: absolute;
  z-index: 14;
  left: 50%;
  display: flex;
  gap: 16px;
  perspective: 520px;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.board-dice.dice-upper { top: 50%; left: 23%; }
.board-dice.dice-lower { top: 50%; left: 77%; }
.board-dice .cube-die {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform-style: preserve-3d;
  animation: board-die-roll 1.8s cubic-bezier(.2,.72,.18,1) both;
}
.board-dice .cube-die:nth-child(2) { animation-delay: .08s; }
.board-dice.roll-preview { z-index:30; }
.board-dice.roll-preview .cube-die { animation-duration:2s; }
.die-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid #eac781;
  border-radius: 9px;
  background: linear-gradient(145deg,#b70d2d,#6f0014);
  color: #ffedc7;
  box-shadow: inset 4px 4px 8px #ffffff42,inset -4px -4px 9px #25000699,0 2px 4px #0008;
  backface-visibility: hidden;
}
.die-wine .die-face { background: linear-gradient(145deg,#c51a36,#780014); }
.die-cream .die-face { border-color: #fff0c9; background: linear-gradient(145deg,#fff0c9,#d9ae68); box-shadow: inset 4px 4px 8px #fff,inset -4px -4px 9px #95662f88,0 2px 4px #0008; }
.die-front { transform: translateZ(19px); }
.die-back { transform: rotateY(180deg) translateZ(19px); }
.die-right { transform: rotateY(90deg) translateZ(19px); }
.die-left { transform: rotateY(-90deg) translateZ(19px); }
.die-top { transform: rotateX(90deg) translateZ(19px); }
.die-bottom { transform: rotateX(-90deg) translateZ(19px); }
.pip-face { position:relative; display:block; width:100%; height:100%; }
.pip-face i { position:absolute; width:7px; height:7px; border-radius:50%; background:#ffe8bc; box-shadow:inset 1px 1px 2px #fff5,0 1px 1px #30000888; transform:translate(-50%,-50%); }
.die-cream .pip-face i { background:#8b0019; box-shadow:inset 1px 1px 2px #ff789055,0 1px 1px #4b0010aa; }
.pip-1 i:nth-child(1),.pip-3 i:nth-child(2),.pip-5 i:nth-child(3){left:50%;top:50%}
.pip-2 i:nth-child(1),.pip-3 i:nth-child(1),.pip-4 i:nth-child(1),.pip-5 i:nth-child(1),.pip-6 i:nth-child(1){left:27%;top:27%}
.pip-2 i:nth-child(2),.pip-3 i:nth-child(3),.pip-4 i:nth-child(4),.pip-5 i:nth-child(5),.pip-6 i:nth-child(6){left:73%;top:73%}
.pip-4 i:nth-child(2),.pip-5 i:nth-child(2),.pip-6 i:nth-child(2){left:73%;top:27%}
.pip-4 i:nth-child(3),.pip-5 i:nth-child(4),.pip-6 i:nth-child(5){left:27%;top:73%}
.pip-6 i:nth-child(3){left:27%;top:50%}.pip-6 i:nth-child(4){left:73%;top:50%}
@keyframes board-die-roll {
  0% { opacity:.2; transform:translate3d(-18px,-46px,0) rotateX(0) rotateY(0) rotateZ(-7deg) scale(.82); }
  38% { opacity:1; transform:translate3d(10px,3px,0) rotateX(210deg) rotateY(170deg) rotateZ(5deg) scale(1.04); }
  55% { transform:translate3d(5px,-15px,0) rotateX(275deg) rotateY(250deg) rotateZ(-3deg) scale(.98); }
  76% { transform:translate3d(-3px,1px,0) rotateX(338deg) rotateY(326deg) rotateZ(2deg) scale(1.015); }
  88% { transform:translate3d(1px,-4px,0) rotateX(352deg) rotateY(350deg) rotateZ(-1deg) scale(.995); }
  100% { opacity:1; transform:translate3d(0,0,0) rotateX(360deg) rotateY(360deg) rotateZ(0) scale(1); }
}

.direct-move-help { padding: 8px; color: #9fe9c8; font-size: 10px; text-align: center; }
.legal-sequence-fallback { display: flex; gap: 6px; padding: 4px 2px 8px; overflow-x: auto; scrollbar-width: none; }
.legal-sequence-fallback::-webkit-scrollbar { display: none; }
.legal-sequence-fallback button { flex: 0 0 auto; min-height: 42px; padding: 8px 11px; border: 1px solid #6c4939; border-radius: 11px; background: #241513; color: #ffe1ad; font-size: 10px; }

body.game-focus { overflow: hidden; overscroll-behavior: none; }
.game-intro {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: #080c15;
  opacity: 1;
  transition: opacity .35s ease;
}
.game-intro.leaving { opacity: 0; pointer-events: none; }
.game-intro img {
  display: block;
  width: min(100vw, 960px);
  max-width: 100%;
  max-height: 100dvh;
  object-fit: contain;
}
body.game-focus .phone-shell > .top,body.game-focus #bottomNav { display: none !important; }
body.game-focus main { padding: 0; }
body.game-focus #games > :not(#activeGame) { display: none !important; }
body.game-focus #activeGame { position: fixed; z-index: 60; inset: 0; width: min(760px,100%); height: 100dvh; margin: auto; padding: max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); border: 0; border-radius: 0; overflow-y: auto; background: radial-gradient(circle at 50% 35%,#25120f,#080707 72%); }
body.game-focus .game-table-head { position: sticky; top: 0; z-index: 20; background: #0c0909e8; backdrop-filter: blur(10px); }
body.game-focus #legalMoves { z-index:18; }
body.game-focus .board-surface #legalMoves { position:absolute; left:7px; right:7px; bottom:10px; padding:0; background:transparent; }
.game-menu { position: absolute; z-index: 30; top: 48px; left: 8px; min-width: 145px; padding: 6px; border: 1px solid #654335; border-radius: 12px; background: #160d0df2; box-shadow: 0 12px 30px #000b; }
.game-menu button { width: 100%; padding: 11px; border-radius: 9px; background: #42151b; color: #ffb9b9; }
.disconnect-cover { position: absolute; z-index: 25; inset: 0; display: grid; place-content: center; justify-items: center; gap: 5px; background: #080808c9; color: #ffe8be; backdrop-filter: blur(3px); }
.disconnect-cover strong { font-size: 38px; color: #ffbd55; font-variant-numeric: tabular-nums; }
.disconnect-cover small { color: #c8bba7; }
.reconnect-orbit { width: 42px; height: 42px; margin-bottom: 8px; border: 3px solid #70422f; border-top-color: #ffca70; border-radius: 50%; animation: orbit-spin .9s linear infinite; }
body.game-focus .game-actions:empty,body.game-focus .game-actions[hidden] { display: none !important; }
body.game-focus .game-room-tabs[hidden] { display: none !important; }

@media (max-width: 380px) {
  .game-table { margin-inline: -13px; padding: 8px; }
  .pro-board { border-width: 4px; padding: 5px; }
  .checker { margin-top: -4px; }
}

@media (max-width: 760px) and (orientation: portrait) {
  body.game-focus { overflow: hidden; overscroll-behavior: none; }
  body.game-focus .phone-shell > .top,
  body.game-focus #bottomNav { display: none !important; }
  body.game-focus main { padding: 0; }
  body.game-focus #games > :not(#activeGame) { display: none !important; }
  body.game-focus #activeGame {
    position: fixed;
    z-index: 60;
    inset: 0;
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: radial-gradient(circle at 50% 35%, #25120f, #080707 72%);
  }
  body.game-focus .game-table-head { position: sticky; top: 0; z-index: 20; min-height: 48px; padding: 4px 4px 8px; background: #0c0909e8; backdrop-filter: blur(10px); }
  body.game-focus .game-table-head > button { min-width: 42px; min-height: 42px; }
  body.game-focus .pro-board { width: 100%; max-height: none; border-width: 4px; padding: 5px; }
  body.game-focus .board-surface { grid-template-columns:repeat(6,1fr) 30px repeat(6,1fr); }
  body.game-focus .checker { width: min(100%, 28px); }
  body.game-focus .game-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  body.game-focus .game-actions button,
  body.game-focus .move-choice { min-height: 48px; touch-action: manipulation; }
  body.game-focus .game-room-tabs { position: sticky; bottom: 0; z-index: 15; }
  body.game-focus .engine-room { margin-bottom: 12px; }
}

@media (min-width: 761px) {
  body.game-focus { padding:0; overflow:hidden; background:#070909; }
  body.game-focus .phone-shell { width:100%; max-width:none; min-height:100dvh; border-radius:0; overflow:visible; box-shadow:none; }
  body.game-focus #activeGame {
    width:min(1180px,calc(100vw - 32px));
    height:100dvh;
    padding:10px 18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  body.game-focus .game-table-head { flex:0 0 54px; width:min(1060px,100%); margin:0 auto; }
  body.game-focus .player-hud { flex:0 0 46px; width:min(1060px,100%); margin:0 auto; padding:4px 8px; }
  body.game-focus .pro-board {
    flex:0 1 auto;
    width:min(1060px,calc((100dvh - 160px) * 1.62));
    max-width:100%;
    max-height:calc(100dvh - 160px);
    aspect-ratio:1.62 / 1;
    margin:0 auto;
    grid-template-columns:1fr 38px;
    gap:7px;
    border-width:7px;
    border-radius:14px;
    padding:9px;
  }
  body.game-focus .board-surface { grid-template-columns:repeat(6,1fr) 42px repeat(6,1fr); }
  body.game-focus .checker { width:min(88%,44px); margin-top:-4px; }
  body.game-focus .bar-checkers .checker { width:30px; height:30px; }
  body.game-focus .game-point::before { height:82%; }
  body.game-focus .turn-strip { display:none; }
  body.game-focus .game-actions,body.game-focus .game-room-tabs,body.game-focus #engineRoom { display:none !important; }
  body.game-focus .board-move-toolbar { grid-template-columns:46px minmax(130px,auto) 46px; }
  body.game-focus .board-move-toolbar button { width:46px; height:46px; font-size:23px; }
  body.game-focus .board-move-toolbar span { font-size:11px; }
  body.game-focus .board-dice .cube-die { width:46px; height:46px; }
  body.game-focus .die-front { transform:translateZ(23px); }
  body.game-focus .die-back { transform:rotateY(180deg) translateZ(23px); }
  body.game-focus .die-right { transform:rotateY(90deg) translateZ(23px); }
  body.game-focus .die-left { transform:rotateY(-90deg) translateZ(23px); }
  body.game-focus .die-top { transform:rotateX(90deg) translateZ(23px); }
  body.game-focus .die-bottom { transform:rotateX(-90deg) translateZ(23px); }
}

@media (max-width: 390px) and (max-height: 700px) and (orientation: portrait) {
  body.game-focus .game-table-head h3 { font-size: 15px; }
  body.game-focus .game-table-head small,.turn-strip { font-size: 9px; }
  body.game-focus .pro-board { max-height: 48dvh; }
  body.game-focus .game-room-tabs button { padding: 8px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .board-roll,.player-hud em.clock-danger { animation: none; }
}

/* PIP Arena v2 — high-contrast modern match table inspired by tournament boards. */
body.game-focus { background:radial-gradient(circle at 50% 35%,#17105b 0,#08052d 52%,#03021a 100%); }
body.game-focus #activeGame { background:linear-gradient(180deg,#080527,#04031b); border-color:#3d4cff55; box-shadow:0 24px 70px #000b; }
body.game-focus .game-table-head { color:#f4f6ff; }
body.game-focus .live-dot { color:#6fffc8; }
.pro-board {
  border-color:#15124c;
  background:linear-gradient(145deg,#292384,#0b083d);
  box-shadow:inset 0 0 0 2px #637dff88,inset 0 0 28px #020118,0 14px 34px #000a;
}
.board-surface {
  background:linear-gradient(90deg,#3978df 0%,#4b8bed 48%,#3978df 100%);
  box-shadow:inset 0 0 30px #081a6b88,inset 0 0 0 1px #9fc6ff55;
}
.game-point.triangle-wine::before { background:linear-gradient(90deg,#182fa7,#293fc5 48%,#142486); }
.game-point.triangle-cream::before { background:linear-gradient(90deg,#74aaf5,#a9ceff 48%,#679be8); }
.game-point > small { color:#e7f2ffaa; }
.checker-stack.cream .checker,.bar-checkers.cream .checker {
  border:2px solid #dceaff;
  background:radial-gradient(circle at 32% 25%,#fff 0,#edf4ff 52%,#bfd1ee 82%,#7e96c0 100%);
  box-shadow:inset 2px 2px 4px #fff,inset -3px -4px 5px #6981ae88,0 3px 6px #05144dcc;
}
.checker-stack.wine .checker,.bar-checkers.wine .checker {
  border:2px solid #5269ed;
  background:radial-gradient(circle at 32% 25%,#5269e8 0,#2636b2 57%,#10146a 100%);
  box-shadow:inset 2px 2px 4px #8096ffaa,inset -3px -4px 5px #080b4aaa,0 3px 6px #061044cc;
}
.board-bar-slot { background:linear-gradient(180deg,#111055,#07052f,#111055); }
.bearoff { background:#0c0a3b; color:#e7efff; border:1px solid #5269e855; }
.player-hud { color:#eef2ff; background:linear-gradient(90deg,#0a0738cc,#171056cc); border-radius:12px; }
.player-hud strong { color:#a9caff; }
.player-hud em { border-color:#334cc9;background:#070522;color:#f5f7ff; }
.player-hud em.clock-active { border-color:#4f7cff;box-shadow:0 0 0 2px #4777ff33,0 0 18px #315dff44; }
.score-badge { background:#f3f6ff!important;color:#101452!important;border-color:#fff!important; }
.board-center { right:9px; transition:top .25s ease,transform .25s ease; }
.board-center.cube-black { top:27%; }
.board-center.cube-white { top:73%; }
.board-center.cube-center { top:50%; }
.board-center.cube-offered { top:50%;left:50%;right:auto;transform:translate(-50%,-50%); }
.cube-value { width:34px;height:34px;border:2px solid #dce8ff;border-radius:6px;background:#3154e8;color:#fff;box-shadow:0 4px 12px #02031aaa; }
.cube-caption { color:#e3ebff!important;text-shadow:0 1px 3px #000; }
.turn-delay { display:grid;place-items:center;width:28px;height:22px;border-radius:5px;background:#10103c;color:#fff;border:1px solid #7090ff;font-size:12px;font-variant-numeric:tabular-nums;box-shadow:0 0 12px #345fff55; }
.turn-delay.spent { opacity:.35; }
.board-roll { min-width:86px;border:1px solid #aec8ff;background:#252fb0;color:#fff;box-shadow:0 8px 22px #07104faa; }
.board-roll:not(.rolling) { animation:arena-roll-pulse 1.4s ease-in-out infinite alternate; }
@keyframes arena-roll-pulse { to { transform:translate(-50%,-50%) scale(1.055);box-shadow:0 9px 28px #4c72ff99; } }
.cube-die.die-wine { background:#2639bd!important;color:#fff!important;border-color:#7891ff!important; }
.cube-die.die-cream { background:#f6f8ff!important;color:#2438b5!important;border-color:#fff!important; }
.game-point.legal-source::after { background:#62ffd0;box-shadow:0 0 14px #42ffc0; }
.game-point.legal-target::after,.bearoff.legal-target::after { border-color:#5dffd1;box-shadow:inset 0 0 22px #3cffaa33,0 0 14px #3cffaa99; }
.board-move-toolbar { background:#070526e8!important;border-color:#496aff!important;color:#eef3ff!important; }
.match-report { border-color:#496aff66;background:#08062eea;color:#eef2ff; }
.match-report-overlay { position:absolute;z-index:80;inset:58px 18px 22px 222px;margin:0!important;padding:24px;border:1px solid #647cff;border-radius:16px;background:linear-gradient(155deg,#08052df5,#110c52f2);box-shadow:0 24px 70px #000d;overflow:auto;backdrop-filter:blur(12px); }
.report-close { position:sticky;z-index:3;top:0;float:left;width:38px;height:38px;padding:0;border:1px solid #6f83e7;border-radius:8px;background:#17206b;color:#fff;font-size:24px; }
.match-score { direction:rtl;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;max-width:620px;margin:4px auto 18px;text-align:center; }
.match-score strong { direction:ltr;font-size:38px;color:#fff;letter-spacing:8px; }
.match-score b,.match-score small { display:block; }.match-score b{font-size:18px}.match-score small{color:#9eafe8}
.verified-counts { display:flex;flex-wrap:wrap;gap:8px;margin:12px 0; }
.verified-counts span { padding:7px 10px;border:1px solid #374ba9;border-radius:8px;background:#0c1145;color:#cbd7ff;font-size:10px; }
.report-log { margin-top:12px;border-top:1px solid #344596;padding-top:10px; }.report-log summary{cursor:pointer;color:#dce5ff;font-weight:800}.report-log .event-timeline{max-height:280px;overflow:auto;margin-top:10px}

@media (max-width:700px) {
  body.game-focus #activeGame { border-radius:0; }
  body.game-focus .player-hud { border-radius:0;padding-inline:7px; }
  .player-hud em { min-width:70px;font-size:14px; }
  .score-badge { min-width:42px; }
  .cube-value { width:30px;height:30px; }
  .turn-delay { width:25px;height:20px;font-size:11px; }
  .match-report-overlay { position:fixed;inset:auto 0 0;max-height:82dvh;padding:18px 14px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0; }
  .match-score { gap:8px;margin-top:0; }.match-score strong{font-size:27px;letter-spacing:4px}.match-score b{font-size:14px}
  .report-metrics { grid-template-columns:repeat(4,1fr);gap:4px; }.report-metrics span{padding:8px 3px}.report-metrics b{font-size:16px}
}

/* Arena v3: structural match layout, persistent dice history and explicit cube rail. */
body.game-focus #activeGame { max-width:1180px; position:relative; }
.player-dice-zone .board-dice { display:flex; }
.dice-zone-black .board-dice { top:43%; left:25%; }
.dice-zone-white .board-dice { top:57%; left:75%; }
.board-dice.previous-roll { opacity:.72; }
.board-dice.current-roll { opacity:1; filter:drop-shadow(0 5px 9px #020526aa); }
.board-dice .cube-die,.board-dice .cube-die:nth-child(2) { animation:none!important; transform:rotateX(-8deg) rotateY(10deg); }
.board-dice .flat-die {
  position:relative;display:block;width:24px;height:24px;border:1px solid #c9d7ff;border-radius:4px;
  background:#f4f6ff;color:#2635b0;box-shadow:0 2px 5px #03062f88,inset 0 1px 0 #fff;
  overflow:hidden;transform:none!important;font-style:normal;
}
.board-dice .flat-die.die-dark { background:#2c38aa;border-color:#6478e8; }
.board-dice .flat-die.die-dark .pip-face i { background:#fff;box-shadow:none; }
.board-dice .flat-die.die-light .pip-face i { background:#2937a9;box-shadow:none; }
.board-dice .flat-die .pip-face i { width:4px;height:4px; }
.board-roll,.board-roll:not(.rolling) { animation:none!important; }
.board-dice .cube-die { width:26px!important;height:26px!important; }
.board-center { width:48px; min-height:84px; padding:6px 3px; border:1px solid #516ff2; border-radius:8px; background:#07052fdd; box-shadow:inset 0 0 16px #1d2d9a66,0 5px 16px #0008; }
.board-center::before { content:'کیوب'; color:#a9bbff; font-size:8px; letter-spacing:.3px; }
.cube-value { flex:0 0 auto; width:30px;height:30px;font-size:14px; font-weight:950; }
.cube-caption { max-width:54px!important; font-size:8px!important; }
.clock-box { position:relative;display:block; }
.clock-box em { display:block; }
.clock-box i { position:absolute;right:-5px;top:-7px;display:grid;place-items:center;min-width:24px;height:20px;padding:0 4px;border-radius:7px;background:#3154e8;color:#fff;border:1px solid #b8c8ff;font-style:normal;font-size:10px;font-weight:900;box-shadow:0 3px 8px #0007; }
.turn-actions { position:absolute;z-index:19;left:50%;display:flex;gap:7px;transform:translate(-50%,-50%); }
.turn-actions.actions-upper { top:43%;left:25%; }
.turn-actions.actions-lower { top:57%;left:75%; }
.turn-actions button { min-width:74px;min-height:38px;padding:7px 13px;border:1px solid #9bb2ff;border-radius:5px;background:#202da8;color:#fff;font-weight:850;box-shadow:0 5px 14px #03051c99; }
.turn-actions #offerDouble { background:#10144d;color:#dce5ff; }
.turn-actions .board-roll { position:static;left:auto;top:auto;transform:none!important;min-width:74px;min-height:38px;margin:0;padding:7px 13px;border-radius:5px;box-shadow:0 5px 14px #03051c99; }
.board-surface:has(.current-roll) .turn-actions { display:none; }
.turn-actions #rollDice { font-size:0; }
.turn-actions #rollDice::after { content:'Roll';font-size:12px; }
body.game-focus .turn-strip { display:none; }
body.game-focus .pro-board { margin-bottom:8px; }
body.game-focus #legalMoves { position:relative;z-index:18;height:44px;margin:6px 0 4px;pointer-events:none; }
body.game-focus .board-move-toolbar { grid-template-columns:40px minmax(120px,220px) 40px; }
body.game-focus .board-move-toolbar span { background:#0b0a32;border-color:#364bb6;color:#cbd6ff;box-shadow:none; }
body.game-focus .board-move-toolbar button { width:38px;height:38px;border-radius:7px;background:#11154e;border-color:#5067d8;color:#fff;box-shadow:0 3px 9px #0007; }
body.game-focus .board-move-toolbar button.primary { background:#304ee2; }

@media (min-width:900px) {
  body.game-focus #activeGame { min-height:650px; padding:14px 18px 24px 222px; }
  body.game-focus .pro-board { width:100%; margin:0; }
  body.game-focus .player-hud { position:absolute; left:18px; width:184px; min-height:176px; padding:16px 12px; display:grid; grid-template-columns:52px 1fr; align-content:center; gap:10px; border:1px solid #3d55d5; border-radius:16px; background:linear-gradient(160deg,#0d0a46,#050323); box-shadow:0 12px 30px #0008; }
  body.game-focus .player-hud:first-of-type { top:92px; }
  body.game-focus .pro-board + .player-hud { bottom:64px; }
  body.game-focus .player-hud .hud-avatar { width:52px;height:52px;font-size:18px; }
  body.game-focus .player-hud>div { min-width:0; }
  body.game-focus .player-hud .score-badge { grid-column:1;grid-row:2;min-height:48px; }
  body.game-focus .player-hud em { grid-column:2;grid-row:2;min-width:92px;font-size:18px; }
  body.game-focus .player-hud>strong { grid-column:1/-1;text-align:center; }
  body.game-focus .turn-strip,body.game-focus .game-actions,body.game-focus .game-room-tabs,body.game-focus #engineRoom,body.game-focus #matchReport { margin-left:204px; }
}

@media (max-width:899px) {
  body.game-focus #activeGame { padding-inline:0; }
  body.game-focus .player-hud { min-height:48px; display:grid;grid-template-columns:32px 1fr 43px 72px;gap:6px; }
  body.game-focus .player-hud>strong { display:none; }
  .board-center { width:40px;min-height:76px;padding:4px 2px; }
  .dice-zone-black .board-dice { top:44%;left:24%; }
  .dice-zone-white .board-dice { top:56%;left:76%; }
  .board-dice { gap:7px; }
  .board-dice .flat-die { width:22px;height:22px; }
  .board-dice .flat-die .pip-face i { width:3.5px;height:3.5px; }
  .turn-actions button { min-width:58px;min-height:34px;padding:5px 8px;font-size:11px; }
  .turn-actions .board-roll { min-width:58px;min-height:34px;padding:5px 8px; }
  body.game-focus .pro-board { margin-bottom:6px; }
  body.game-focus .board-move-toolbar { grid-template-columns:36px minmax(100px,1fr) 36px;gap:5px; }
  body.game-focus .board-move-toolbar button { width:34px;height:34px; }
  body.game-focus .board-move-toolbar span { padding:5px 7px;font-size:8px; }
}

/* Arena v5 checkers — compact cool-glass discs matching the analysis board. */
.checker-stack.cream .checker,.bar-checkers.cream .checker,.moving-checker.cream {
  border:2px solid #f7f9ff!important;
  background:radial-gradient(circle at 34% 27%,#ffffff 0 20%,#f4f6fc 42%,#dce4f2 72%,#aebed8 100%)!important;
  box-shadow:inset 2px 2px 3px #ffffff,inset -3px -3px 5px #8d9fbd66,0 2px 3px #020625aa,0 0 0 1px #9bb5ea88!important;
}
.checker-stack.wine .checker,.bar-checkers.wine .checker,.moving-checker.wine {
  border:2px solid #2947b5!important;
  background:radial-gradient(circle at 34% 27%,#26356f 0 17%,#151f50 45%,#080d2c 76%,#020516 100%)!important;
  box-shadow:inset 2px 2px 3px #536fd077,inset -3px -3px 5px #00081caa,0 2px 3px #020314cc,0 0 0 1px #5b79e0aa!important;
}
.checker-stack .checker,.bar-checkers .checker { filter:none!important; }
.moving-checker { border-width:2px!important;box-shadow:0 8px 18px #000a!important; }
.moving-checker.captured { box-shadow:0 0 0 2px #ffd84a,0 8px 18px #000b!important; }
.checker-stack .checker,.bar-checkers .checker{cursor:pointer;touch-action:manipulation}.checker.picked-checker{outline:3px solid #55ffd1;outline-offset:2px;filter:drop-shadow(0 0 8px #42ffc0)!important}.moving-checker{transition:none!important;filter:none!important}
.checker-count { background:#080c2eea!important;border:1px solid #6f87df!important;color:#fff!important;box-shadow:0 2px 6px #0008!important; }
.tournament-actions{display:flex;gap:10px;margin:14px 0}.tournament-actions>*{flex:1}.tournament-builder{margin-bottom:14px}.tournament-builder form{display:grid;gap:12px}.tournament-builder label{display:grid;gap:6px;color:var(--muted)}.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tournament-list{display:grid;gap:10px}.tournament-card{width:100%;display:grid;grid-template-columns:48px 1fr 18px;gap:12px;align-items:center;text-align:right;padding:14px;background:linear-gradient(145deg,#191813,#10120f);border:1px solid #3c3025;border-radius:17px;color:#f9edcf}.tournament-card div{display:grid;gap:4px}.tournament-card small{color:#aa9d84}.tournament-card em{color:#e9bd68;font-style:normal;font-size:.75rem}.tournament-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#85162c;color:#f7dfaa;font-weight:900}.tournament-detail{margin-top:16px}.tournament-head{display:flex;justify-content:space-between;gap:10px}.tournament-head h2{margin:4px 0}.tournament-head small,.tournament-head span{color:#aa9d84}.tournament-head>button{align-self:start;border:0;background:#2b211b;color:#f7dfaa;border-radius:50%;width:34px;height:34px}.tournament-controls{display:flex;gap:8px;margin:16px 0}.tournament-controls>*{flex:1}#offlinePlayer{display:grid;grid-template-columns:1fr 90px auto;gap:7px;margin:12px 0}.standings{margin:20px 0}.standing{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:9px;border-bottom:1px solid #302820}.standing>b{color:#e9bd68}.standing small{color:#a99d88}.standing.eliminated{opacity:.48}.bracket-scroll{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 12px;scroll-snap-type:x mandatory}.bracket-round{min-width:min(280px,84vw);display:grid;align-content:start;gap:9px;scroll-snap-align:start}.pairing{background:#12130f;border:1px solid #3a3026;border-radius:14px;padding:10px;display:grid;gap:6px}.pairing>small{color:#e9bd68}.pairing>button{padding:10px;border:1px solid #4b3a2a;border-radius:10px;background:#211d17;color:#f8e9ca;text-align:right}.pairing>button:disabled{opacity:.78}.pairing .watch-game{background:#7f162b;border-color:#aa3048;text-align:center}.empty-state{text-align:center;padding:28px;color:#a99d88;display:grid;gap:6px}@media(max-width:520px){.form-pair{grid-template-columns:1fr}.standing{grid-template-columns:25px 1fr}.standing small{grid-column:2}#offlinePlayer{grid-template-columns:1fr 82px}#offlinePlayer button{grid-column:1/-1}.tournament-detail{padding:14px}.quick{grid-template-columns:repeat(2,1fr)}}
/* Detailed post-match move and cube alternatives */
.report-decisions{display:grid;gap:10px;margin-top:14px}.report-decisions>h4{margin:0;color:#dce8ff}.report-decision{padding:10px;border:1px solid #263f87;border-radius:12px;background:#071334}.report-decision.blunder{border-color:#b62950}.report-decision.error{border-color:#bd6a25}.report-decision header,.report-decision li{display:flex;justify-content:space-between;gap:8px}.report-decision header span,.report-decision li span{direction:ltr;color:#75e5bd}.report-decision p{font-size:.78rem;color:#a9bce8}.report-decision ol{display:grid;gap:5px;margin:0;padding:0;list-style:none}.report-decision li{padding:6px 8px;border-radius:8px;background:#0b1b48;font-size:.72rem}
.live-referee{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;padding:7px 10px;margin:6px 0;border:1px solid #174c43;border-radius:10px;background:#071d26;color:#cfe8ff;font-size:.7rem}.live-referee b{color:#54efb2}.live-referee b i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#47efa9;box-shadow:0 0 8px #47efa9}.live-referee span{padding:3px 7px;border-radius:999px;background:#0d2b3e}.live-referee small{color:#8fb2d5}.live-referee.offline{border-color:#7b5327;color:#f1c782}