@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

@layer base {
  :root {
    --background: 220 30% 8%;
    --foreground: 220 10% 95%;
    --card: 220 25% 12%;
    --card-foreground: 220 10% 95%;
    --popover: 220 25% 14%;
    --popover-foreground: 220 10% 95%;
    --primary: 45 90% 55%;
    --primary-foreground: 220 30% 8%;
    --secondary: 220 20% 18%;
    --secondary-foreground: 220 10% 85%;
    --muted: 220 15% 16%;
    --muted-foreground: 220 10% 55%;
    --accent: 155 75% 45%;
    --accent-foreground: 220 30% 8%;
    --destructive: 0 72% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 20% 18%;
    --input: 220 20% 20%;
    --ring: 45 90% 55%;
    --radius: 0.75rem;
    --gold: 45 90% 55%;
    --gold-dim: 45 60% 35%;
    --green: 155 75% 45%;
    --navy: 220 30% 8%;
    --navy-light: 220 25% 14%;
  }
}

* { border-color: hsl(var(--border)); }
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; }

.gold-gradient {
    background: linear-gradient(135deg, hsl(45 90% 55%), hsl(35 85% 45%));
  }
  .gold-text {
    background: linear-gradient(135deg, hsl(45 90% 60%), hsl(35 85% 45%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .green-gradient {
    background: linear-gradient(135deg, hsl(155 75% 45%), hsl(165 70% 40%));
  }
  .card-surface {
    background: linear-gradient(145deg, hsl(220 25% 14%), hsl(220 25% 10%));
  }
  .glow-gold {
    box-shadow: 0 0 20px hsl(45 90% 55% / 0.15), 0 0 60px hsl(45 90% 55% / 0.05);
  }
  .glow-green {
    box-shadow: 0 0 20px hsl(155 75% 45% / 0.15), 0 0 60px hsl(155 75% 45% / 0.05);
  }
  .choice-selected {
    box-shadow: inset 0 0 0 1px hsl(45 90% 55% / 0.55), 0 0 18px hsl(45 90% 55% / 0.12);
    background: hsl(45 90% 55% / 0.08);
  }
  .choice-unselected {
    background: hsl(220 25% 12% / 0.6);
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .choice-unselected:hover {
    background: hsl(220 25% 14%);
    border-color: hsl(220 20% 22%);
  }
.safe-area-pb { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Keep focused controls clear of bottom nav (~4.25rem) + Create sticky CTA (~5rem). */
html {
  scroll-padding-bottom: calc(10rem + env(safe-area-inset-bottom, 0px));
}

.create-game-variants > button,
.create-game-page [class*="choice-"],
.language-chip {
  scroll-margin-bottom: calc(10rem + env(safe-area-inset-bottom, 0px));
}

/* Live match actions sit above the home-indicator when the bottom nav is hidden. */
.abbia-board > button,
.domino-actions,
.game-play-primary-action {
  scroll-margin-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.animate-pulse-gold {
  animation: pulse-gold 2s ease-in-out infinite;
}

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 15px hsl(45 90% 55% / 0.2); }
  50% { box-shadow: 0 0 30px hsl(45 90% 55% / 0.4); }
}

/* Blazor defaults */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: red; }

#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* Boot loader: felt table + dealing cards + stake rail */
.boot {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse 70% 45% at 50% 38%, hsl(45 90% 55% / 0.07), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, hsl(220 40% 4% / 0.9), transparent 55%),
    linear-gradient(165deg, hsl(220 28% 10%), hsl(220 32% 6%) 45%, hsl(220 35% 5%));
  overflow: hidden;
}

.boot::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(hsl(45 90% 55% / 0.05) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.45;
  animation: boot-drift 18s linear infinite;
  pointer-events: none;
}

.boot__stage {
  position: relative;
  width: 11.5rem;
  height: 11.5rem;
  display: grid;
  place-items: center;
}

.boot__felt {
  position: absolute;
  width: 8.75rem;
  height: 8.75rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 30%, hsl(155 35% 28% / 0.55), transparent 50%),
    radial-gradient(circle at 50% 50%, hsl(155 40% 16%), hsl(155 45% 10%));
  border: 2px solid hsl(45 70% 40% / 0.35);
  box-shadow:
    inset 0 0 24px hsl(155 50% 8% / 0.65),
    0 12px 40px hsl(220 40% 2% / 0.55);
}

.boot__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.05rem;
  height: 2.85rem;
  margin: -1.425rem 0 0 -1.025rem;
  border-radius: 0.28rem;
  background: linear-gradient(165deg, #fffefb, #ece7df);
  box-shadow: 0 6px 14px hsl(220 40% 4% / 0.45);
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', Georgia, serif;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  animation: boot-deal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.boot__card--1 { color: #c0392b; animation-delay: 0.08s; --deal-rot: -28deg; --deal-x: -2.35rem; --deal-y: -0.35rem; }
.boot__card--2 { color: #1a1a1a; animation-delay: 0.18s; --deal-rot: -10deg; --deal-x: -0.85rem; --deal-y: -0.85rem; }
.boot__card--3 { color: #c0392b; animation-delay: 0.28s; --deal-rot: 10deg; --deal-x: 0.85rem; --deal-y: -0.85rem; }
.boot__card--4 { color: #1a1a1a; animation-delay: 0.38s; --deal-rot: 28deg; --deal-x: 2.35rem; --deal-y: -0.35rem; }

.boot__chip {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 1.55rem;
  height: 1.55rem;
  margin: -0.775rem 0 0 -0.775rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, hsl(45 95% 70%), hsl(45 90% 48%) 55%, hsl(35 80% 36%));
  border: 2px dashed hsl(45 40% 25% / 0.45);
  box-shadow: 0 4px 12px hsl(45 90% 40% / 0.35);
  animation: boot-chip 1.8s ease-in-out infinite;
}

.boot__ring {
  position: relative;
  width: 11.5rem;
  height: 11.5rem;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 10px hsl(45 90% 55% / 0.12));
}

.boot__ring-track,
.boot__ring-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}

.boot__ring-track {
  stroke: hsl(220 15% 22% / 0.85);
}

.boot__ring-fill {
  stroke: hsl(45 90% 55%);
  stroke-linecap: round;
  transition: stroke-dasharray 0.08s ease-out;
  /* circumference ≈ 2π·52 ≈ 326.7 */
  stroke-dasharray: calc(3.267 * var(--blazor-load-percentage, 0%)), 327;
}

.boot__brand {
  margin: 0.35rem 0 0;
  font-family: 'Space Grotesk', Georgia, serif;
  font-size: clamp(1.65rem, 5vw, 2.15rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  background: linear-gradient(135deg, hsl(45 95% 68%), hsl(40 90% 52%) 45%, hsl(35 85% 42%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: boot-brand 2.4s ease-in-out infinite;
}

.boot__tag {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: hsl(220 10% 62%);
}

.boot__rail {
  width: min(14rem, 62vw);
  height: 0.35rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: hsl(220 18% 18%);
  overflow: hidden;
  box-shadow: inset 0 1px 2px hsl(220 40% 4% / 0.5);
}

.boot__rail-fill {
  height: 100%;
  width: var(--blazor-load-percentage, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, hsl(35 85% 42%), hsl(45 95% 58%), hsl(45 90% 70%));
  box-shadow: 0 0 12px hsl(45 90% 55% / 0.35);
  transition: width 0.08s ease-out;
}

.boot__pct {
  margin: 0.15rem 0 0;
  min-height: 1.1rem;
  font-family: 'Space Grotesk', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: hsl(45 80% 62%);
  font-variant-numeric: tabular-nums;
}

.boot__pct::after {
  content: var(--blazor-load-percentage-text, "…");
}

@keyframes boot-deal {
  0% {
    opacity: 0;
    transform: translate(0, 1.5rem) rotate(0deg) scale(0.7);
  }
  100% {
    opacity: 1;
    transform: translate(var(--deal-x), var(--deal-y)) rotate(var(--deal-rot)) scale(1);
  }
}

@keyframes boot-chip {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-0.2rem) scale(1.06); }
}

@keyframes boot-brand {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

@keyframes boot-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-18px, -18px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .boot::before,
  .boot__card,
  .boot__chip,
  .boot__brand {
    animation: none !important;
  }
  .boot__card {
    opacity: 1;
    transform: translate(var(--deal-x), var(--deal-y)) rotate(var(--deal-rot));
  }
}

/* Legacy Blazor default class names kept inert if referenced elsewhere */
.loading-progress,
.loading-progress-text { display: none; }

code { color: #c02d76; }

/* Card animations for Makopa gameplay */
@keyframes card-flip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}

@keyframes card-slide {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(var(--slide-x, 0), var(--slide-y, -20px)) scale(1.05); }
  100% { transform: translate(var(--slide-x-end, 0), var(--slide-y-end, 0)) scale(1); }
}

@keyframes card-play {
  0% { transform: scale(0.95); opacity: 0.9; }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.card-flip {
  animation: card-flip 0.4s ease-in-out;
}

.card-slide {
  animation: card-slide 0.35s ease-out forwards;
}

.card-play-animation {
  animation: card-play 0.3s ease-out;
}

.card-draggable:active {
  cursor: grabbing;
}

.card-draggable[draggable="true"] {
  cursor: grab;
}

/* Playing cards (Makopa) — cream face, rank corners, Unicode suits; red hearts/diamonds */
.playing-card-face {
  position: relative;
  aspect-ratio: 5 / 7;
  width: 100%;
  min-height: 3.75rem;
  border-radius: 0.45rem;
  background: linear-gradient(165deg, #fdfcfa 0%, #f3eee6 42%, #e9e3da 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.12);
  font-family: Georgia, "Times New Roman", Times, serif;
  overflow: hidden;
}

.playing-card-face--lg {
  min-height: 5.5rem;
}

.playing-card-face--red .playing-card-face__rank,
.playing-card-face--red .playing-card-face__suit-sm,
.playing-card-face--red .playing-card-face__center {
  color: #b91c1c;
}

.playing-card-face--black .playing-card-face__rank,
.playing-card-face--black .playing-card-face__suit-sm,
.playing-card-face--black .playing-card-face__center {
  color: #0f172a;
}

.playing-card-face__corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  z-index: 2;
}

.playing-card-face__corner-tl {
  top: 0.2rem;
  left: 0.28rem;
}

.playing-card-face__corner-br {
  bottom: 0.2rem;
  right: 0.28rem;
  transform: rotate(180deg);
}

.playing-card-face__rank {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.playing-card-face__suit-sm {
  font-size: 0.52rem;
  margin-top: 0.06rem;
  line-height: 1;
}

.playing-card-face__center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  line-height: 1;
  z-index: 1;
  opacity: 0.92;
}

.playing-card-face--lg .playing-card-face__center {
  font-size: 2.15rem;
}

.playing-card-face--lg .playing-card-face__rank {
  font-size: 0.85rem;
}

.playing-card-face--lg .playing-card-face__suit-sm {
  font-size: 0.62rem;
}

button.playing-card.playing-card--btn {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  padding: 0.18rem;
  width: 3.5rem;
  min-width: 3.5rem;
  border-radius: 0.55rem;
  border: 1px solid hsl(var(--border));
  background: linear-gradient(180deg, hsl(var(--muted) / 0.55), hsl(var(--card)));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

button.playing-card.playing-card--btn:hover:not(:disabled) {
  border-color: hsl(var(--primary) / 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

button.playing-card.playing-card--btn:active:not(:disabled) {
  transform: scale(0.96);
}

.playing-card--board {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}

.playing-card-back {
  background:
    repeating-linear-gradient(
      125deg,
      hsl(var(--secondary)) 0px,
      hsl(var(--secondary)) 3px,
      hsl(var(--muted)) 3px,
      hsl(var(--muted)) 6px
    );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Win celebration */
@keyframes win-pulse {
  0%, 100% { box-shadow: 0 0 40px 20px hsl(45 90% 55% / 0.3); transform: scale(1); }
  50% { box-shadow: 0 0 80px 40px hsl(45 90% 55% / 0.5); transform: scale(1.1); }
}

@keyframes confetti-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--tx, 0), 80vh) rotate(720deg); }
}

.win-glow {
  background: radial-gradient(circle, hsl(45 90% 55% / 0.6), transparent 70%);
}

.confetti-piece {
  will-change: transform, opacity;
}

/* Compact game previews (Create Game choice cards) */
.game-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 0.75rem;
  overflow: hidden;
  pointer-events: none;
}

.game-preview--makopa {
  background:
    radial-gradient(ellipse at 50% 30%, hsl(45 90% 55% / 0.08), transparent 55%),
    linear-gradient(160deg, #1a120c, #0d0a08);
  border: 1px solid hsl(45 90% 55% / 0.22);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
}

.game-preview--kopo {
  background: linear-gradient(160deg, hsl(220 25% 14%), hsl(220 30% 8%));
  border: 1px solid hsl(220 20% 22%);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.game-preview--ngola {
  background: linear-gradient(160deg, #92400e, #451a03);
  border: 1px solid hsl(32 80% 40% / 0.45);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.4);
}

.game-preview--domino {
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid hsl(215 20% 35% / 0.5);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
}

.game-preview__domino {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.4rem;
}

.game-preview__domino-tile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  width: 1.85rem;
  height: 1.1rem;
  border-radius: 0.2rem;
  background: #f8fafc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.game-preview__domino-tile span {
  display: grid;
  place-items: center;
  font-size: 0.45rem;
  font-weight: 700;
  color: #0f172a;
  background: linear-gradient(165deg, #fff, #e2e8f0);
}

.game-preview--abbia {
  background: linear-gradient(160deg, #292524, #1c1917);
  border: 1px solid hsl(30 15% 35% / 0.5);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
}

.game-preview__abbia {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.45rem;
}

.game-preview__abbia-token {
  width: 0.7rem;
  height: 0.95rem;
  border-radius: 0.2rem;
  background: #78716c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.game-preview__abbia-token--carved {
  background: linear-gradient(165deg, #eab308, #a16207);
}

.game-preview--nzengue {
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid hsl(215 20% 35% / 0.5);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
}

.game-preview__nzengue {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 72%;
  padding: 0.45rem;
}

.game-preview__nzengue-point {
  width: 0.45rem;
  height: 0.45rem;
  margin: auto;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.5);
}

.game-preview__nzengue-point--mine {
  background: linear-gradient(165deg, #eab308, #a16207);
}

.game-preview--yote {
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid hsl(215 20% 35% / 0.5);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
}

.game-preview__yote {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  width: 82%;
  padding: 0.35rem;
}

.game-preview__yote-cell {
  aspect-ratio: 1;
  border-radius: 0.12rem;
  background: rgba(148, 163, 184, 0.18);
}

.game-preview__yote-cell--mine {
  background: linear-gradient(165deg, #eab308, #a16207);
}

.yote-board {
  display: grid;
  gap: 0.35rem;
  width: min(100%, 20rem);
  margin-inline: auto;
  padding: 0.75rem;
  border-radius: 1rem;
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid hsl(215 20% 35% / 0.45);
}

.yote-board__cell {
  aspect-ratio: 1;
  min-height: 2rem;
  border-radius: 0.45rem;
  border: 2px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.65);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.yote-board__cell--mine {
  background: linear-gradient(165deg, #eab308, #a16207);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.yote-board__cell--opponent {
  background: linear-gradient(165deg, #64748b, #475569);
}

.yote-board__cell--selected {
  border-color: #2dd48e;
  box-shadow: 0 0 0 2px rgba(45, 212, 142, 0.25);
}

.yote-board__cell--target,
.yote-board__cell--remove {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

.yote-board__cell--active:not(:disabled) {
  cursor: pointer;
}

.yote-board__cell:disabled {
  cursor: default;
  opacity: 0.85;
}

.game-preview--fanorona {
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid hsl(215 20% 35% / 0.5);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
}

.game-preview__fanorona {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  width: 78%;
  padding: 0.4rem;
}

.game-preview__fanorona-cell {
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

.game-preview__fanorona-cell--mine {
  background: linear-gradient(165deg, #eab308, #a16207);
}

.game-filter-icon--fanorona .game-filter-icon__fanorona {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  width: 1.35rem;
}

.game-filter-icon--fanorona .game-filter-icon__fanorona span {
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.85);
}

.fanorona-board {
  width: min(100%, 20rem);
  margin-inline: auto;
  padding: 0.75rem;
  border-radius: 1rem;
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid hsl(215 20% 35% / 0.45);
}

.fanorona-board__svg {
  display: block;
  width: 100%;
  height: auto;
}

.fanorona-board__line {
  stroke: rgba(148, 163, 184, 0.55);
  stroke-width: 0.7;
}

.fanorona-board__node {
  fill: rgba(148, 163, 184, 0.55);
}

.fanorona-board__piece--mine {
  fill: url(#none);
  fill: #eab308;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 0.4;
}

.fanorona-board__piece--opponent {
  fill: #64748b;
  stroke: rgba(15, 23, 42, 0.35);
  stroke-width: 0.4;
}

.fanorona-board__piece--selected {
  stroke: #2dd48e;
  stroke-width: 0.9;
}

.fanorona-board__target {
  fill: rgba(56, 189, 248, 0.35);
  stroke: #38bdf8;
  stroke-width: 0.5;
}

.fanorona-board__hit {
  fill: transparent;
  cursor: pointer;
}

.fanorona-mode-pick__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.fanorona-mode-pick__btn {
  border-radius: 0.65rem;
  border: 1px solid hsl(215 20% 35% / 0.55);
  background: rgba(15, 23, 42, 0.75);
  color: #e2e8f0;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
}

.fanorona-mode-pick__btn--cancel {
  opacity: 0.85;
}

.fanorona-mode-pick__count {
  opacity: 0.75;
  margin-left: 0.2rem;
}

.nzengue-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  width: min(100%, 18rem);
  margin-inline: auto;
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid hsl(215 20% 35% / 0.45);
}

.nzengue-board__point {
  width: 2.75rem;
  height: 2.75rem;
  margin: auto;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.65);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  /* Larger tap target on phones without changing the visible stone much. */
  touch-action: manipulation;
}

.nzengue-board__point--mine {
  background: linear-gradient(165deg, #facc15, #ca8a04);
  border-color: rgba(250, 204, 21, 0.55);
}

.nzengue-board__point--opponent {
  background: linear-gradient(165deg, #94a3b8, #64748b);
  border-color: rgba(148, 163, 184, 0.55);
}

.nzengue-board__point--selected {
  box-shadow: 0 0 0 3px hsl(45 90% 55% / 0.45);
  transform: scale(1.08);
}

.nzengue-board__point--target {
  box-shadow: 0 0 0 2px hsl(142 70% 45% / 0.7);
  background: rgba(34, 197, 94, 0.18);
}

.nzengue-board__point--active:not(:disabled) {
  cursor: pointer;
}

.nzengue-board__point--mine.nzengue-board__point--active:not(:disabled) {
  box-shadow: 0 0 0 2px hsl(45 90% 55% / 0.55);
}

.nzengue-board__point:disabled {
  cursor: default;
  opacity: 0.85;
}

.abbia-token {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.abbia-token--carved {
  color: #1c1917;
  background: linear-gradient(165deg, #facc15, #ca8a04);
}

.abbia-token--blank {
  color: #e7e5e4;
  background: linear-gradient(165deg, #78716c, #44403c);
}

.abbia-token--hidden,
.abbia-token--ready {
  color: #a8a29e;
  background: linear-gradient(165deg, #44403c, #292524);
}

.game-preview__ngola {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  width: 88%;
  padding: 0.45rem;
  border-radius: 0.55rem;
  background: rgba(0, 0, 0, 0.18);
}

.game-preview__ngola-pit {
  aspect-ratio: 1;
  border-radius: 999px;
  background: linear-gradient(160deg, #fde68a, #fbbf24);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
}

.game-preview__fan {
  position: relative;
  width: 5.75rem;
  height: 3.75rem;
}

.game-preview__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.55rem;
  height: 2.15rem;
  margin: -1.075rem 0 0 -0.775rem;
  border-radius: 0.22rem;
  background: linear-gradient(165deg, #fffefb, #ece7df);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', Georgia, serif;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-preview__card--red { color: #c41e1e; }
.game-preview__card--ink { color: #151515; }

.game-preview__card--1 { transform: translate(-1.35rem, 0.2rem) rotate(-18deg); }
.game-preview__card--2 { transform: translate(-0.45rem, -0.1rem) rotate(-6deg); }
.game-preview__card--3 { transform: translate(0.45rem, -0.1rem) rotate(6deg); }
.game-preview__card--4 { transform: translate(1.35rem, 0.2rem) rotate(18deg); }

.choice-selected .game-preview__card--1 { transform: translate(-1.55rem, 0.05rem) rotate(-24deg); }
.choice-selected .game-preview__card--2 { transform: translate(-0.55rem, -0.25rem) rotate(-9deg); }
.choice-selected .game-preview__card--3 { transform: translate(0.55rem, -0.25rem) rotate(9deg); }
.choice-selected .game-preview__card--4 { transform: translate(1.55rem, 0.05rem) rotate(24deg); }

.game-preview__board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
  width: 4.25rem;
  aspect-ratio: 1;
  padding: 3px;
  background: #2a2a2a;
  border-radius: 0.28rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.game-preview__cell {
  min-height: 0;
  display: grid;
  place-items: center;
}

.game-preview__cell--dark { background: #121212; }
.game-preview__cell--light { background: #1d1d1d; }

.game-preview__piece {
  width: 62%;
  height: 62%;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.game-preview__piece--gold {
  background: linear-gradient(135deg, hsl(45 90% 60%), hsl(35 85% 42%));
}

.game-preview__piece--white {
  background: linear-gradient(135deg, #f7f4ef, #cfc9bf);
}

.choice-selected .game-preview--makopa,
.choice-selected .game-preview--kopo,
.choice-selected .game-preview--ngola,
.choice-selected .game-preview--domino {
  border-color: hsl(45 90% 55% / 0.45);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45), 0 0 14px hsl(45 90% 55% / 0.12);
}

/* Compact filter icons (Join Game segment control) */
.game-filter-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 1.7rem;
  border-radius: 0.4rem;
  overflow: hidden;
  pointer-events: none;
}

.game-filter-icon--all {
  background: linear-gradient(160deg, hsl(220 25% 16%), hsl(220 30% 10%));
  border: 1px solid hsl(220 20% 24%);
  gap: 2px;
  grid-template-columns: repeat(2, 1fr);
  padding: 4px;
}

.game-filter-icon--all span {
  display: block;
  height: 100%;
  border-radius: 1px;
  background: hsl(220 15% 28%);
}

.game-filter-icon--makopa {
  background: linear-gradient(160deg, #1a120c, #0d0a08);
  border: 1px solid hsl(45 90% 55% / 0.28);
}

.game-filter-icon--kopo {
  background: linear-gradient(160deg, hsl(220 25% 14%), hsl(220 30% 8%));
  border: 1px solid hsl(220 20% 22%);
}

.game-filter-icon--ngola {
  background: linear-gradient(160deg, #92400e, #451a03);
  border: 1px solid hsl(32 80% 40% / 0.45);
}

.game-filter-icon--domino {
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid hsl(215 20% 35% / 0.5);
}

.game-filter-icon__domino {
  display: flex;
  gap: 2px;
  align-items: center;
}

.game-filter-icon__domino span {
  display: block;
  width: 0.7rem;
  height: 0.42rem;
  border-radius: 0.08rem;
  background: linear-gradient(165deg, #fff, #e2e8f0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.game-filter-icon--abbia {
  background: linear-gradient(160deg, #292524, #1c1917);
  border: 1px solid hsl(30 15% 35% / 0.5);
}

.game-filter-icon__abbia {
  display: flex;
  gap: 2px;
  align-items: center;
}

.game-filter-icon__abbia span {
  display: block;
  width: 0.35rem;
  height: 0.5rem;
  border-radius: 0.08rem;
  background: linear-gradient(165deg, #facc15, #a16207);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.game-filter-icon--nzengue {
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid hsl(215 20% 35% / 0.5);
}

.game-filter-icon__nzengue {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 1.1rem;
  padding: 2px;
}

.game-filter-icon__nzengue span {
  display: block;
  width: 0.22rem;
  height: 0.22rem;
  margin: auto;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.65);
}

.game-filter-icon--yote {
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid hsl(215 20% 35% / 0.5);
}

.game-filter-icon__yote {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  width: 1.1rem;
  padding: 2px;
}

.game-filter-icon__yote span {
  display: block;
  aspect-ratio: 1;
  border-radius: 0.06rem;
  background: rgba(148, 163, 184, 0.35);
}

.game-filter-icon__ngola {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  width: 1.35rem;
  padding: 2px;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.18);
}

.game-filter-icon__ngola span {
  display: block;
  aspect-ratio: 1;
  border-radius: 999px;
  background: linear-gradient(160deg, #fde68a, #fbbf24);
}

.game-filter-icon__fan {
  position: relative;
  width: 1.65rem;
  height: 1.1rem;
}

.game-filter-icon__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 0.78rem;
  margin: -0.39rem 0 0 -0.275rem;
  border-radius: 0.1rem;
  background: linear-gradient(165deg, #fffefb, #ece7df);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  font-size: 0.28rem;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
}

.game-filter-icon__card--red { color: #c41e1e; }
.game-filter-icon__card--ink { color: #151515; }
.game-filter-icon__card--1 { transform: translate(-0.38rem, 0.08rem) rotate(-16deg); }
.game-filter-icon__card--2 { transform: translate(-0.12rem, -0.04rem) rotate(-5deg); }
.game-filter-icon__card--3 { transform: translate(0.12rem, -0.04rem) rotate(5deg); }
.game-filter-icon__card--4 { transform: translate(0.38rem, 0.08rem) rotate(16deg); }

.game-filter-icon__board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  width: 1.25rem;
  aspect-ratio: 1;
  padding: 1px;
  background: #2a2a2a;
  border-radius: 0.15rem;
}

.game-filter-icon__cell {
  display: grid;
  place-items: center;
  min-height: 0;
}

.game-filter-icon__cell--dark { background: #121212; }
.game-filter-icon__cell--light { background: #1d1d1d; }

.game-filter-icon__piece {
  width: 70%;
  height: 70%;
  margin: auto;
  border-radius: 50%;
}

.game-filter-icon__piece--gold {
  background: linear-gradient(135deg, hsl(45 90% 60%), hsl(35 85% 42%));
}

.game-filter-icon__piece--white {
  background: linear-gradient(135deg, #f7f4ef, #cfc9bf);
}

button:has(.game-filter-icon).filter-selected .game-filter-icon--makopa,
button:has(.game-filter-icon).filter-selected .game-filter-icon--kopo,
button:has(.game-filter-icon).filter-selected .game-filter-icon--ngola,
button:has(.game-filter-icon).filter-selected .game-filter-icon--domino,
button:has(.game-filter-icon).filter-selected .game-filter-icon--abbia,
button:has(.game-filter-icon).filter-selected .game-filter-icon--nzengue,
button:has(.game-filter-icon).filter-selected .game-filter-icon--yote,
button:has(.game-filter-icon).filter-selected .game-filter-icon--all {
  border-color: hsl(45 90% 55% / 0.45);
}

.history-scroll {
  scrollbar-width: none;
}

.history-scroll::-webkit-scrollbar {
  display: none;
}