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

:root {
  --title-color: var(--color-relicmatch);
  --relicmatch-frame: #704329;
  --relicmatch-frame-light: #d1a45c;
  --relicmatch-stone-a: #43281d;
  --relicmatch-stone-b: #9a6338;
  --relicmatch-stone-c: #4a2c20;
  --relicmatch-sand-a: #be8951;
  --relicmatch-sand-b: #c99559;
  --relicmatch-sand-c: #b77e47;
}

.relicmatch-board[data-visual-theme='arcade'] {
  --relicmatch-frame: #4a1a3a;
  --relicmatch-frame-light: #e660b2;
  --relicmatch-stone-a: #2c1240;
  --relicmatch-stone-b: #6a2a70;
  --relicmatch-stone-c: #24123a;
  --relicmatch-sand-a: #7a3f7e;
  --relicmatch-sand-b: #934f96;
  --relicmatch-sand-c: #6c3773;
}

.relicmatch-board[data-visual-theme='midnight'] {
  --relicmatch-frame: #253750;
  --relicmatch-frame-light: #91a9c4;
  --relicmatch-stone-a: #16233a;
  --relicmatch-stone-b: #385473;
  --relicmatch-stone-c: #17263c;
  --relicmatch-sand-a: #3d5977;
  --relicmatch-sand-b: #4c6c8c;
  --relicmatch-sand-c: #34506d;
}

.relicmatch-board[data-visual-theme='daylight'] {
  --relicmatch-frame: #4a3970;
  --relicmatch-frame-light: #a78bfa;
  --relicmatch-stone-a: #2c2150;
  --relicmatch-stone-b: #6650a0;
  --relicmatch-stone-c: #2e2354;
  --relicmatch-sand-a: #6a58a3;
  --relicmatch-sand-b: #7e6bb8;
  --relicmatch-sand-c: #5d4c93;
}

.relicmatch-board[data-visual-theme='amber'] {
  --relicmatch-frame: #5c3410;
  --relicmatch-frame-light: #e5a836;
  --relicmatch-stone-a: #331d09;
  --relicmatch-stone-b: #8a5a1e;
  --relicmatch-stone-c: #351f0b;
  --relicmatch-sand-a: #a06a2a;
  --relicmatch-sand-b: #bf8536;
  --relicmatch-sand-c: #92601f;
}

.relicmatch-board {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.7rem, 2vmin, 1.4rem);
  border: clamp(5px, 1vmin, 10px) solid var(--relicmatch-frame);
  border-radius: 1.5rem 1.5rem 0.9rem 0.9rem;
  background:
    radial-gradient(circle at 12% 18%, #e8ba6b22 0 1px, transparent 2px),
    radial-gradient(circle at 82% 72%, #f0cc8120 0 1px, transparent 2px),
    linear-gradient(
      145deg,
      var(--relicmatch-stone-a),
      var(--relicmatch-stone-b) 46%,
      var(--relicmatch-stone-c)
    );
  box-shadow:
    inset 0 0 0 3px var(--relicmatch-frame-light),
    inset 0 0 28px #1b0c07,
    0 18px 38px #10080588;
}

.relicmatch-board::before,
.relicmatch-board::after {
  position: absolute;
  content: '';
  pointer-events: none;
}
.relicmatch-board::before {
  inset: 3%;
  border: 1px solid #f5d99555;
  border-radius: 1rem;
}
.relicmatch-board::after {
  width: 20%;
  height: 8%;
  right: 2%;
  top: 3%;
  opacity: 0.5;
  background: repeating-linear-gradient(90deg, #e7ca8b 0 2px, transparent 2px 12px);
  transform: rotate(8deg);
}

.relicmatch-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: clamp(2px, 0.6vmin, 6px);
  width: auto;
  max-width: 100%;
  height: 100%;
  aspect-ratio: 1;
  padding: clamp(0.45rem, 1.4vmin, 0.9rem);
  border: 3px solid #3a2117;
  border-radius: 1rem;
  background:
    linear-gradient(#0002, transparent 12% 88%, #0003),
    repeating-linear-gradient(
      18deg,
      var(--relicmatch-sand-a) 0 9px,
      var(--relicmatch-sand-b) 9px 18px,
      var(--relicmatch-sand-c) 18px 27px
    );
  box-shadow:
    inset 0 0 22px #3a1c10aa,
    0 8px 20px #1f0f09aa;
}

.relicmatch-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid #6f4529;
  border-radius: 22% 14% 20% 12%;
  background: linear-gradient(145deg, #d4a763, #9c6538);
  box-shadow:
    inset 2px 2px 4px #f3d28b66,
    inset -3px -4px 5px #4b2819aa;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform 130ms ease,
    filter 130ms ease,
    box-shadow 130ms ease;
}
.relicmatch-cell:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.relicmatch-cell.is-selected {
  z-index: 2;
  transform: scale(1.09) rotate(-2deg);
  box-shadow:
    0 0 0 3px #ffe7a0,
    0 0 18px #f6c762,
    inset 2px 2px 4px #fff8;
}
.relicmatch-cell--depth-2 {
  filter: saturate(0.72) brightness(0.72);
}
.relicmatch-cell--depth-1 {
  filter: saturate(0.9) brightness(0.9);
}
.relicmatch-cell--depth-0 {
  background: linear-gradient(145deg, #756354, #43372f);
}
.relicmatch-dust {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 25%, #f8db9c66 0 3%, transparent 4%),
    radial-gradient(circle at 70% 72%, #5d341e55 0 5%, transparent 6%);
}
.relicmatch-relic {
  position: absolute;
  inset: 18%;
  filter: drop-shadow(1px 2px 1px #29140faa);
}

.relicmatch-cell[data-relic='0'] .relicmatch-relic {
  border: clamp(2px, 0.45vmin, 5px) solid #f4c84f;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #9e571d;
}
.relicmatch-cell[data-relic='1'] .relicmatch-relic {
  border-radius: 50% 50% 42% 42%;
  background: #1d7365;
  box-shadow: inset 0 -0.5em #0e443f;
}
.relicmatch-cell[data-relic='1'] .relicmatch-relic::after {
  content: '';
  position: absolute;
  inset: 42% -22%;
  height: 12%;
  background: #163e38;
  box-shadow:
    0 -0.7em #163e38,
    0 0.7em #163e38;
}
.relicmatch-cell[data-relic='2'] .relicmatch-relic {
  border-radius: 42% 42% 28% 28%;
  background: #b74e32;
  clip-path: polygon(24% 0, 76% 0, 70% 20%, 92% 100%, 8% 100%, 30% 20%);
}
.relicmatch-cell[data-relic='3'] .relicmatch-relic {
  border-radius: 8%;
  background: #567b8e;
  box-shadow: inset 0 0 0 3px #9fc4c8;
}
.relicmatch-cell[data-relic='3'] .relicmatch-relic::after {
  content: 'III';
  position: absolute;
  inset: 20% 0;
  color: #d8e7dc;
  font: 800 clamp(0.35rem, 1.3vmin, 0.8rem)/1 serif;
  text-align: center;
}
.relicmatch-cell[data-relic='4'] .relicmatch-relic {
  border-radius: 48% 48% 35% 35%;
  background: #895e9d;
  clip-path: polygon(50% 0, 90% 24%, 82% 100%, 18% 100%, 10% 24%);
}
.relicmatch-cell[data-relic='5'] .relicmatch-relic {
  border: clamp(2px, 0.4vmin, 4px) solid #d9d1bd;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #376d78;
}
.relicmatch-cell[data-relic='5'] .relicmatch-relic::after {
  content: '';
  position: absolute;
  inset: 16%;
  background: linear-gradient(180deg, #c0392b 50%, #d9d1bd 50%);
  clip-path: polygon(50% 0%, 68% 50%, 50% 100%, 32% 50%);
}

.relicmatch-plaque {
  position: absolute;
  z-index: 2;
  left: clamp(0.3rem, 2%, 1rem);
  bottom: clamp(0.3rem, 2%, 1rem);
  display: grid;
  gap: 0.08rem;
  padding: 0.32rem 0.55rem;
  border: 1px solid #f1d18b;
  border-radius: 0.25rem;
  color: #2a1710;
  background: linear-gradient(135deg, #d9b66d, #99703f);
  font:
    700 clamp(0.42rem, 1vmin, 0.65rem)/1.1 Georgia,
    serif;
  letter-spacing: 0.12em;
  box-shadow: 0 3px 8px #1d0d08aa;
  transform: rotate(1deg);
}
.relicmatch-plaque strong {
  font-size: 1.25em;
}

@media (max-height: 500px) and (orientation: landscape) {
  .relicmatch-board {
    padding: 0.35rem;
    border-width: 4px;
  }
  .relicmatch-grid {
    padding: 0.3rem;
    gap: 2px;
    border-radius: 0.6rem;
  }
  .relicmatch-plaque {
    left: 0.25rem;
    bottom: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .relicmatch-cell {
    transition: none;
  }
}