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

:root {
  --title-color: var(--color-go);
  --go-kaya: #d6a866;
  --go-kaya-light: #edcb88;
  --go-ink: #563a20;
  --go-frame: #6e4928;
  --go-focus: #e8d5a1;
}

.go-scoreboard {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin: var(--spacing-sm) auto;
  font-variant-numeric: tabular-nums;
}
.go-score {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
}
.go-score--black::before,
.go-score--white::before {
  content: '';
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  box-shadow: 0 1px 2px #0006;
}
.go-score--black::before {
  background: #111;
}
.go-score--white::before {
  background: #fafaf9;
  border: 1px solid #78716c;
}

.go-board {
  --board-padding: clamp(1rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  aspect-ratio: 1;
  padding: var(--board-padding);
  background:
    radial-gradient(circle at 18% 12%, rgb(255 245 197 / 25%), transparent 28%),
    repeating-linear-gradient(0deg, rgb(93 57 23 / 7%) 0 1px, transparent 1px 0.52rem),
    linear-gradient(135deg, var(--go-kaya-light), var(--go-kaya));
  border: 0.55rem solid var(--go-frame);
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 2px rgb(250 218 153 / 72%),
    0 1rem 2rem rgb(30 17 7 / 34%);
  gap: 0;
}
.go-board[data-visual-theme='arcade'] {
  --go-kaya: #a6157e;
  --go-kaya-light: #e660b2;
  --go-frame: #3a0f2e;
  --go-focus: #ffd4f4;
}
.go-board[data-visual-theme='midnight'] {
  --go-kaya: #1c4d73;
  --go-kaya-light: #6fb8e8;
  --go-frame: #0c1a2c;
  --go-focus: #cfe9fb;
}
.go-board[data-visual-theme='daylight'] {
  --go-kaya: #7c3aed;
  --go-kaya-light: #c9a8f2;
  --go-frame: #4c2c73;
  --go-focus: #f2e9fd;
}
.go-board[data-visual-theme='amber'] {
  --go-kaya: #8c5a12;
  --go-kaya-light: #f0b94a;
  --go-frame: #3a2306;
  --go-focus: #fbe2ab;
}
.go-point {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.go-point::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  border-top: 1px solid rgb(86 58 32 / 74%);
}
.go-point::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  border-left: 1px solid rgb(86 58 32 / 74%);
}
.go-point:first-child::after,
.go-point:nth-child(9n + 1)::after {
  left: 50%;
}
.go-point.is-hoshi:disabled::after {
  z-index: 1;
}
.go-point.is-hoshi:not(.is-black):not(.is-white)::marker {
  display: none;
}
.go-point.is-hoshi:not(.is-black):not(.is-white) {
  background: radial-gradient(circle, var(--go-ink) 0 0.22rem, transparent 0.25rem);
}
.go-point.is-black,
.go-point.is-white {
  color: transparent;
}
.go-point.is-black::marker,
.go-point.is-white::marker {
  display: none;
}
.go-point.is-black::after,
.go-point.is-white::after {
  display: block;
}
.go-point.is-black {
  background:
    radial-gradient(circle at 34% 27%, rgb(182 198 195 / 38%) 0 8%, transparent 9%),
    radial-gradient(circle, #273135 0 38%, #0b1012 44% 48%, transparent 50%);
  filter: drop-shadow(0 0.16rem 0.16rem rgb(0 0 0 / 48%));
}
.go-point.is-white {
  background:
    radial-gradient(circle at 34% 27%, #fff 0 9%, transparent 10%),
    radial-gradient(circle, #f8f3e7 0 38%, #aa9e89 44% 48%, transparent 50%);
  filter: drop-shadow(0 0.16rem 0.16rem rgb(35 23 15 / 36%));
}
.go-point.is-territory-black:not(.is-black):not(.is-white) {
  background: radial-gradient(circle, #171310 0 0.18rem, transparent 0.22rem);
}
.go-point.is-territory-white:not(.is-black):not(.is-white) {
  background: radial-gradient(circle, #fafaf9 0 0.18rem, transparent 0.22rem);
}
.go-point:disabled {
  cursor: default;
}

.go-point:not(:disabled):hover,
.go-point:not(:disabled):focus-visible {
  background:
    radial-gradient(circle, rgb(245 229 184 / 88%) 0 0.23rem, transparent 0.26rem), transparent;
  outline: 0.1rem solid rgb(89 57 29 / 74%);
  outline-offset: -0.1rem;
}
.go-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-sm);
}
.go-actions .button-secondary {
  background: color-mix(in srgb, var(--color-go) 84%, #111827);
  border-color: color-mix(in srgb, var(--color-go) 55%, #f8fafc);
  color: #fff;
}
@media (max-width: 480px) {
  .go-board {
    border-width: 0.35rem;
    --board-padding: 0.65rem;
  }
  .go-scoreboard {
    gap: var(--spacing-md);
    font-size: 0.9rem;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .go-scoreboard {
    gap: 0;
    padding-inline: 0.25rem;
    font-size: 0.75rem;
  }

  .go-scoreboard .game-stat {
    gap: 0.25rem;
    padding-inline: 0.25rem;
  }

  .go-scoreboard .go-score {
    gap: 0.2rem;
  }

  .go-scoreboard .go-score > span {
    font-size: 0;
  }

  .go-scoreboard .go-score > strong {
    font-size: 0.75rem;
  }
}