@import url('../global.css');
:root {
  --title-color: var(--color-onitama);
  --onitama-ink: #1c2932;
  --onitama-indigo: #173c5a;
  --onitama-tatami: #b7aa78;
  --onitama-vermilion: #b74a32;
  --onitama-gold: #d7b967;
}

.onitama-area[data-visual-theme='arcade'] {
  --onitama-ink: #22102a;
  --onitama-indigo: #7a2a9c;
  --onitama-tatami: #d38fc4;
  --onitama-vermilion: #ff4fd8;
  --onitama-gold: #ffb3ec;
}

.onitama-area[data-visual-theme='midnight'] {
  --onitama-ink: #0b1220;
  --onitama-indigo: #1c5b82;
  --onitama-tatami: #6f93ab;
  --onitama-vermilion: #38bdf8;
  --onitama-gold: #93d9fb;
}

.onitama-area[data-visual-theme='daylight'] {
  --onitama-ink: #2b1f4a;
  --onitama-indigo: #6b3fa0;
  --onitama-tatami: #b09fd6;
  --onitama-vermilion: #7c3aed;
  --onitama-gold: #c3aeea;
}

.onitama-area[data-visual-theme='amber'] {
  --onitama-ink: #1f1305;
  --onitama-indigo: #8a5a12;
  --onitama-tatami: #c9a565;
  --onitama-vermilion: #fbbf24;
  --onitama-gold: #fde3a0;
}

.onitama-area {
  height: 100%;
  min-height: 0;
  padding: clamp(0.35rem, 1vw, 0.75rem);
  gap: clamp(0.3rem, 0.8vw, 0.65rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgb(224 181 99 / 20%), transparent 32%),
    linear-gradient(145deg, #253b39, var(--onitama-ink) 62%, #101b23);
  border: 0.18rem solid var(--onitama-gold);
  border-radius: 1rem;
  box-shadow:
    0 1rem 2rem rgb(3 9 13 / 48%),
    inset 0 0 0 0.13rem rgb(247 224 157 / 30%);
}

.onitama-area .game-stack-main {
  min-height: 0;
}

.onitama-card-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(0.6rem, 2vw, 1.5rem);
  flex: 0 0 auto;
  width: min(100%, 38rem);
  padding: 0.25rem 0.45rem 0.35rem;
  border-block: 1px solid rgb(232 210 143 / 20%);
}
.onitama-card-row h2 {
  font-size: 0.68rem;
  text-transform: uppercase;
  margin: 0.2rem 0 0.4rem;
  color: #e7d7a5;
  letter-spacing: 0.08em;
}
.onitama-hands {
  display: flex;
  gap: 0.4rem;
}
.onitama-card {
  color: #283238;
  background:
    linear-gradient(135deg, rgb(255 251 221 / 38%), transparent 36%),
    repeating-linear-gradient(0deg, #dbd1a4 0 0.14rem, #c8bd8e 0.14rem 0.22rem);
  border: 0.12rem solid #6d5734;
  border-radius: 0.4rem;
  padding: 0.28rem;
  box-shadow: 0 0.2rem 0.38rem rgb(0 0 0 / 35%);
  cursor: pointer;
}
.onitama-card.is-selected {
  border-color: #fff1a7;
  box-shadow:
    0 0 0 0.16rem rgb(212 178 83 / 88%),
    0 0.2rem 0.38rem rgb(0 0 0 / 35%);
}
.onitama-card-content {
  display: grid;
  gap: 0.16rem;
  justify-items: center;
  font-size: 0.65rem;
}
.card-pattern {
  display: grid;
  grid-template-columns: repeat(5, 0.6rem);
  gap: 0.12rem;
}
.card-pattern i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 0.15rem;
  background: rgb(45 61 57 / 32%);
}
.card-pattern i.is-origin {
  background: var(--onitama-vermilion);
}
.card-pattern i.is-move {
  background: var(--onitama-indigo);
}
.onitama-center {
  min-width: 4rem;
  min-height: 4rem;
  display: grid;
  place-items: center;
}
.onitama-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, minmax(0, 1fr));
  aspect-ratio: 1;
  width: auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  gap: 0.2rem;
  padding: clamp(0.3rem, 0.8vw, 0.6rem);
  background:
    repeating-linear-gradient(90deg, transparent 0 19%, rgb(75 59 29 / 23%) 19.2% 20%),
    repeating-linear-gradient(0deg, #bfb47d 0 19%, #a99b65 19.2% 20%);
  border: 0.28rem solid #4a3822;
  border-radius: 0.75rem;
  box-shadow:
    0 0.4rem 0.9rem rgb(0 0 0 / 42%),
    inset 0 0 0 0.12rem rgb(255 237 168 / 38%);
}
.onitama-cell {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(77 61 32 / 48%);
  background: rgb(241 228 167 / 24%);
  color: var(--onitama-vermilion);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.25rem, 6vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.onitama-cell:nth-child(even) {
  background: rgb(94 78 39 / 16%);
}
.onitama-cell.is-temple {
  box-shadow: inset 0 0 0 0.16rem rgb(217 185 103 / 76%);
}
.onitama-cell.is-red {
  color: var(--onitama-vermilion);
}
.onitama-cell.is-blue {
  color: var(--onitama-indigo);
}
.onitama-cell.is-master {
  text-shadow:
    0 0.12rem 0 #f9dea3,
    0 0.22rem 0.22rem rgb(25 20 13 / 45%);
}
.onitama-cell.is-selected {
  outline: 0.18rem solid #fff0a4;
  outline-offset: -0.18rem;
}
.onitama-cell.is-target::after {
  content: '';
  position: absolute;
  inset: 35%;
  border-radius: 50%;
  background: #f6d46f;
  box-shadow: 0 0 0.55rem rgb(255 216 105 / 75%);
  opacity: 0.9;
}
.onitama-cell:disabled {
  cursor: default;
}
@media (max-width: 480px) {
  .onitama-card-row {
    gap: 0.4rem;
  }
  .card-pattern {
    grid-template-columns: repeat(5, 0.48rem);
  }
  .card-pattern i {
    width: 0.48rem;
    height: 0.48rem;
  }
}

@media (min-width: 768px) and (max-height: 520px) {
  .onitama-area {
    padding: 0.3rem;
    gap: 0.25rem;
  }

  .onitama-card-row {
    width: 100%;
    gap: 0.55rem;
    padding: 0.1rem 0.25rem 0.2rem;
  }

  .onitama-card-row h2 {
    margin: 0 0 0.12rem;
    font-size: 0.58rem;
  }

  .onitama-hands {
    gap: 0.25rem;
  }

  .onitama-card {
    padding: 0.16rem;
  }

  .onitama-card-content {
    gap: 0.08rem;
    font-size: 0.54rem;
  }

  .card-pattern {
    grid-template-columns: repeat(5, 0.43rem);
    gap: 0.08rem;
  }

  .card-pattern i {
    width: 0.43rem;
    height: 0.43rem;
  }

  .onitama-center {
    min-width: 3rem;
    min-height: 3rem;
  }
}