@import url('../global.css');

:root {
  --title-color: #f4ce72;
  --tsuro-ink: #123d42;
  --tsuro-ink-light: #287173;
  --tsuro-paper: #ead9a4;
  --tsuro-paper-shadow: #ba9253;
  --tsuro-gold: #e6b84e;
  --tsuro-lacquer: #3a2621;
}

.tsuro-board[data-visual-theme='arcade'] {
  --tsuro-ink: #ff4fd8;
  --tsuro-ink-light: #ff9fe6;
  --tsuro-paper: #3a1030;
  --tsuro-paper-shadow: #240a1f;
  --tsuro-gold: #ff8fe0;
  --tsuro-lacquer: #1c0818;
  background:
    radial-gradient(circle at 18% 16%, rgb(255 79 216 / 16%), transparent 20%),
    repeating-linear-gradient(0deg, rgb(255 79 216 / 5%) 0 1px, transparent 1px 1.1rem),
    linear-gradient(135deg, #3a1030, #240a1f 65%, #150610);
}

.tsuro-board[data-visual-theme='midnight'] {
  --tsuro-ink: #38bdf8;
  --tsuro-ink-light: #9fd3f5;
  --tsuro-paper: #14202e;
  --tsuro-paper-shadow: #0c1520;
  --tsuro-gold: #7dd3fc;
  --tsuro-lacquer: #0a121a;
  background:
    radial-gradient(circle at 18% 16%, rgb(56 189 248 / 16%), transparent 20%),
    repeating-linear-gradient(0deg, rgb(56 189 248 / 5%) 0 1px, transparent 1px 1.1rem),
    linear-gradient(135deg, #14202e, #0c1520 65%, #070d13);
}

.tsuro-board[data-visual-theme='daylight'] {
  --tsuro-ink: #4c2a86;
  --tsuro-ink-light: #7c3aed;
  --tsuro-paper: #ece3fb;
  --tsuro-paper-shadow: #c9b3f0;
  --tsuro-gold: #a985e8;
  --tsuro-lacquer: #2a1a47;
  background:
    radial-gradient(circle at 18% 16%, rgb(124 58 237 / 16%), transparent 20%),
    repeating-linear-gradient(0deg, rgb(124 58 237 / 6%) 0 1px, transparent 1px 1.1rem),
    linear-gradient(135deg, #4c3a63, #382a4a 65%, #2a1e38);
}

.tsuro-board[data-visual-theme='amber'] {
  --tsuro-ink: #8a5a1a;
  --tsuro-ink-light: #fbbf24;
  --tsuro-paper: #4a2f0c;
  --tsuro-paper-shadow: #331f07;
  --tsuro-gold: #fbbf24;
  --tsuro-lacquer: #1f1305;
  background:
    radial-gradient(circle at 18% 16%, rgb(251 191 36 / 16%), transparent 20%),
    repeating-linear-gradient(0deg, rgb(251 191 36 / 5%) 0 1px, transparent 1px 1.1rem),
    linear-gradient(135deg, #4a2f0c, #331f07 65%, #1f1305);
}

/* A quiet garden tray: the paths are the focal point, not an abstract grid. */
.tsuro-board {
  gap: clamp(0.24rem, 0.7vw, 0.6rem);
  padding: clamp(0.34rem, 0.8vw, 0.7rem);
  background:
    radial-gradient(circle at 18% 16%, rgb(245 225 143 / 16%), transparent 20%),
    repeating-linear-gradient(0deg, rgb(255 239 183 / 5%) 0 1px, transparent 1px 1.1rem),
    linear-gradient(135deg, #213a35, #102925 65%, #0b1d1c);
  border: 0.18rem solid #a27a40;
  border-radius: 1rem;
  box-shadow:
    0 1rem 2rem rgb(0 0 0 / 42%),
    inset 0 0 0 0.12rem rgb(255 232 150 / 15%);
}

.tsuro-board .game-stack-main {
  min-height: 0;
}

.tsuro-svg {
  display: block;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 248 207 / 28%), transparent 62%),
    repeating-linear-gradient(0deg, rgb(91 59 30 / 7%) 0 1px, transparent 1px 0.52rem), #ddc98e;
  border: 0.22rem solid #68492d;
  border-radius: 0.55rem;
  box-shadow:
    0 0 0 0.12rem #c39b57,
    0 0.45rem 0.8rem rgb(0 0 0 / 28%),
    inset 0 0 0 0.1rem rgb(255 246 200 / 40%);
}

.tsuro-grid line {
  stroke: #765332;
  stroke-opacity: 0.72;
  stroke-width: 1.45;
}

.tsuro-tile-bg {
  fill: #eadba9;
  stroke: #b3874e;
  stroke-width: 1;
}

.tsuro-path {
  fill: none;
  stroke: var(--tsuro-ink);
  stroke-width: 5.7;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 0 rgb(255 247 202 / 48%));
}

.tsuro-tile {
  filter: drop-shadow(0 1.5px 1px rgb(61 35 18 / 30%));
}

.tsuro-cell-target {
  cursor: default;
}

.tsuro-cell-target--active {
  fill: #e6b84e;
  fill-opacity: 0.24;
  cursor: pointer;
  animation: tsuro-open-cell 1.25s ease-in-out infinite alternate;
}

.tsuro-cell-target--active:hover {
  fill-opacity: 0.42;
}

#tsuro-stones circle {
  stroke: #fff5c9;
  stroke-width: 2.5;
  filter: drop-shadow(0 1.5px 1px rgb(35 20 12 / 48%));
}

.tsuro-hand {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  width: 100%;
  padding: 0.25rem 0.35rem 0.32rem;
  border: 1px solid rgb(222 184 82 / 36%);
  border-radius: 0.55rem;
  background: rgb(11 32 30 / 58%);
}

.tsuro-hand-label {
  margin: 0;
  color: #f4db8a;
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tsuro-hand-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.28rem, 0.7vw, 0.55rem);
  justify-content: center;
}

.tsuro-hand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 3px;
  border: 0.14rem solid #9b7541;
  border-radius: 0.45rem;
  background: #442d25;
  box-shadow:
    0 0.16rem 0.25rem rgb(0 0 0 / 32%),
    inset 0 0 0 1px rgb(255 228 150 / 16%);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.tsuro-hand-tile:hover {
  border-color: #f4d172;
  box-shadow:
    0 0.28rem 0.42rem rgb(0 0 0 / 38%),
    0 0 0 0.12rem rgb(244 209 114 / 36%);
  transform: translateY(-0.12rem);
}

.tsuro-hand-tile.is-selected {
  border-color: #fff0a4;
  box-shadow:
    0 0 0 0.14rem #e6b84e,
    0 0.25rem 0.45rem rgb(0 0 0 / 38%);
  transform: translateY(-0.14rem);
}

.tsuro-hand-svg {
  display: block;
  width: clamp(3.15rem, 6vw, 4.5rem);
  height: clamp(3.15rem, 6vw, 4.5rem);
}

.tsuro-rotate-btn {
  min-height: 2.75rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid #d8b45f;
  border-radius: 999px;
  background: linear-gradient(180deg, #f4d87a, #bb8337);
  color: #352313;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0.15rem 0.25rem rgb(0 0 0 / 26%);
}

.tsuro-rotate-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@keyframes tsuro-open-cell {
  from {
    fill-opacity: 0.16;
  }

  to {
    fill-opacity: 0.31;
  }
}

@media (min-width: 768px) and (max-height: 520px) {
  .tsuro-board {
    gap: 0.2rem;
    padding: 0.26rem;
  }

  .tsuro-hand {
    gap: 0.12rem;
    padding: 0.14rem 0.28rem 0.18rem;
  }

  .tsuro-hand-label {
    font-size: 0.66rem;
  }

  .tsuro-hand-tiles {
    gap: 0.25rem;
  }

  .tsuro-hand-tile {
    min-width: 44px;
    min-height: 44px;
    padding: 2px;
  }

  .tsuro-hand-svg {
    width: 2.7rem;
    height: 2.7rem;
  }

  .tsuro-rotate-btn {
    min-height: 2.75rem;
    padding: 0.22rem 0.65rem;
    font-size: 0.7rem;
  }
}