/* static/css/ludo.css — Ludo board page.
   Colors route through site tokens only; no brand/background custom properties are
   declared here (see the theming rules in CLAUDE.md). Text on a brand-gradient fill
   uses a literal #fff, never a theme-flipping token. */

.ld-stage {
  /* Capped by the viewport height so the die stays on screen, and by the canvas's own
     720px drawing buffer, past which it would only be upscaled and go soft. */
  width: 100%;
  max-width: min(100%, 720px, calc(100dvh - 22rem));
  margin-inline: auto;
  margin-top: 0.75rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
}
.ld-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

.ld-banner {
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--bg-card);
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
  color: var(--text-secondary);
}
.ld-banner.ld-yours {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
}

.ld-clock { line-height: 1; }
.ld-clock.ld-urgent { color: #f87171; }

.ld-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-block;
}
.ld-dot-a { background: var(--brand-primary); }
.ld-dot-b { background: var(--brand-secondary); }

/* The die is the one button on the board, so it gets the only real emphasis. */
.ld-die {
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  font-size: 2rem;
  color: #fff;
  background: var(--grad-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 100ms ease-out, opacity 120ms ease-out;
}
.ld-die:hover:not(:disabled) { transform: translateY(-2px); }
.ld-die:active:not(:disabled) { transform: translateY(0) scale(0.96); }
.ld-die:disabled {
  cursor: default;
  opacity: 0.5;
  background: var(--bg-card);
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
  color: var(--text-muted);
}
.ld-die.ld-rolling { animation: ld-shake 420ms ease-in-out; }

@keyframes ld-shake {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-14deg); }
  75%      { transform: rotate(14deg); }
}

/* The lobby/arena/result panels are static containers, not clickable cards, so the
   sitewide .card-border:hover lift is neutralized. */
#ld-app > .card-border:hover,
#ld-app .card-border:not(button):hover {
  transform: none;
  box-shadow: none;
}

@media (max-width: 767px) {
  .ld-banner { font-size: 0.9rem; }
  .ld-die { width: 4.25rem; height: 4.25rem; font-size: 1.6rem; }
  /* On a phone the board is the page: give it the width the card padding was using,
     and let it take the height the desktop reserves for the side copy. */
  .ld-stage { max-width: min(100%, calc(100dvh - 19rem)); margin-top: 0.5rem; }
  #ld-arena > .card-border { padding: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-die.ld-rolling { animation: none; }
}