@import "../cats/style.css?v=20260615-181704";

:root {
  --page-bg: linear-gradient(145deg, #dceff4 0%, #f5ead8 48%, #d8e7df 100%);
  --panel-bg: rgba(255, 252, 244, 0.9);
  --panel-border: rgba(87, 111, 108, 0.16);
  --board-bg: #8fa7a2;
  --cell-bg: rgba(255, 255, 255, 0.25);
  --text-main: #344543;
  --text-muted: #657774;
  --button-main: #c48a45;
  --button-main-hover: #a97234;
  --button-secondary: rgba(255, 252, 244, 0.96);
  --shadow-soft: 0 20px 45px rgba(65, 89, 86, 0.16);
  --shadow-card: 0 10px 24px rgba(65, 89, 86, 0.16);
}

body {
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.7), transparent 42%),
    radial-gradient(circle at 20% 18%, rgba(255, 211, 110, 0.32), transparent 21%),
    radial-gradient(circle at 80% 78%, rgba(86, 151, 163, 0.18), transparent 24%),
    var(--page-bg);
}

.theme-label {
  color: #9f6b31;
}

.site-nav-link.is-active {
  box-shadow: none;
}

.board-frame {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 248, 233, 0.48)),
    rgba(255, 252, 244, 0.62);
}

.board {
  box-shadow:
    inset 0 4px 18px rgba(47, 71, 68, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

.tile {
  background: transparent;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}