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

:root {
  --title-color: var(--color-mahjong);
  --mahjong-ivory: #f2e7c9;
  --mahjong-jade: #2f7d68;
  --mahjong-lacquer: #401d20;
  --mahjong-gold: #d7a94d;
  --mahjong-felt-glow: rgb(226 176 76 / 16%);
  --mahjong-felt-a: #183e34;
  --mahjong-felt-b: #0b261f;
  --mahjong-felt-c: #071814;
  --mahjong-rail: #2b1316;
  --mahjong-rail-inset: #8f6336;
}

.mahjong-board[data-visual-theme='arcade'] {
  --mahjong-felt-glow: rgb(230 96 178 / 18%);
  --mahjong-felt-a: #2c1240;
  --mahjong-felt-b: #170a2b;
  --mahjong-felt-c: #0e0619;
  --mahjong-rail: #2b1030;
  --mahjong-rail-inset: #e660b2;
}

.mahjong-board[data-visual-theme='midnight'] {
  --mahjong-felt-glow: rgb(145 169 196 / 16%);
  --mahjong-felt-a: #17293d;
  --mahjong-felt-b: #0c1826;
  --mahjong-felt-c: #070f19;
  --mahjong-rail: #16222f;
  --mahjong-rail-inset: #91a9c4;
}

.mahjong-board[data-visual-theme='daylight'] {
  --mahjong-felt-glow: rgb(167 139 250 / 18%);
  --mahjong-felt-a: #372a56;
  --mahjong-felt-b: #241b3e;
  --mahjong-felt-c: #171029;
  --mahjong-rail: #2c2247;
  --mahjong-rail-inset: #a78bfa;
}

.mahjong-board[data-visual-theme='amber'] {
  --mahjong-felt-glow: rgb(251 191 36 / 18%);
  --mahjong-felt-a: #3a2308;
  --mahjong-felt-b: #241505;
  --mahjong-felt-c: #150c02;
  --mahjong-rail: #2c1a08;
  --mahjong-rail-inset: #e5a836;
}

.mahjong-board {
  --mahjong-rows: 3;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(var(--mahjong-rows), minmax(0, 1fr));
  gap: clamp(8px, 1.3vw, 18px);
  place-content: center;
  overflow: hidden;
  padding: clamp(42px, 7vw, 92px);
  isolation: isolate;
  perspective: 900px;
  background:
    radial-gradient(circle at 50% 42%, var(--mahjong-felt-glow), transparent 36%),
    linear-gradient(135deg, transparent 48%, rgb(255 255 255 / 3%) 49% 51%, transparent 52%),
    linear-gradient(165deg, var(--mahjong-felt-a), var(--mahjong-felt-b) 64%, var(--mahjong-felt-c));
  border: 12px solid var(--mahjong-rail);
  box-shadow:
    inset 0 0 0 3px var(--mahjong-rail-inset),
    inset 0 0 0 7px #160b0c,
    inset 0 0 80px rgb(0 0 0 / 68%),
    0 22px 45px rgb(0 0 0 / 35%);
}

.mahjong-board::before,
.mahjong-board::after {
  position: absolute;
  z-index: -1;
  content: '';
  pointer-events: none;
}

.mahjong-board::before {
  inset: 16px;
  border: 1px solid rgb(215 169 77 / 45%);
  border-radius: 22px;
  background:
    radial-gradient(circle, rgb(215 169 77 / 48%) 0 2px, transparent 3px) 18px 18px / 28px 28px,
    linear-gradient(90deg, transparent, rgb(255 255 255 / 4%), transparent);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  padding: 12px;
  mask-composite: exclude;
}

.mahjong-board::after {
  width: min(45%, 420px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border: 1px solid rgb(215 169 77 / 12%);
  border-radius: 50%;
  box-shadow:
    0 0 0 24px rgb(215 169 77 / 3%),
    0 0 0 48px rgb(215 169 77 / 3%);
}

.mahjong-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  color: #28382e;
  border: 1px solid #fff9de;
  border-radius: 9px 9px 11px 11px;
  background:
    linear-gradient(100deg, rgb(255 255 255 / 72%), transparent 28%),
    linear-gradient(145deg, #fff8dc, var(--mahjong-ivory) 72%);
  box-shadow:
    0 5px 0 #b89b6f,
    0 8px 0 #173e32,
    0 12px 16px rgb(0 0 0 / 42%);
  transform: translateY(-5px) rotateX(3deg);
  transition:
    transform 150ms ease,
    filter 150ms ease,
    opacity 180ms ease;
}

.mahjong-tile::before {
  position: absolute;
  inset: 5px;
  content: '';
  border: 1px solid rgb(88 69 37 / 34%);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 45%);
}

.mahjong-tile__frame {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.mahjong-tile__glyph {
  font-family: 'Noto Serif CJK SC', 'Microsoft YaHei', serif;
  font-size: clamp(1.45rem, 4.1vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px #fff;
}

.mahjong-tile__seal {
  position: absolute;
  right: 12%;
  bottom: 10%;
  width: clamp(7px, 1vw, 12px);
  aspect-ratio: 1;
  border: 1px solid currentColor;
  opacity: 0.55;
  rotate: 45deg;
}

.mahjong-tile--red,
.mahjong-tile--spring,
.mahjong-tile--autumn {
  color: #a22c2c;
}

.mahjong-tile--green,
.mahjong-tile--summer {
  color: #287052;
}

.mahjong-tile--east,
.mahjong-tile--south,
.mahjong-tile--west,
.mahjong-tile--north {
  color: #253f69;
}

.mahjong-tile:hover:not(:disabled),
.mahjong-tile:focus-visible {
  z-index: 2;
  filter: brightness(1.08);
  transform: translateY(-10px) rotateX(0);
  outline: 3px solid var(--mahjong-gold);
  outline-offset: 3px;
}

.mahjong-tile.is-selected {
  z-index: 3;
  color: var(--mahjong-lacquer);
  background: linear-gradient(145deg, #fffbe8, #f7cf72);
  box-shadow:
    0 5px 0 #9c6b33,
    0 8px 0 var(--mahjong-jade),
    0 0 24px rgb(247 207 114 / 70%);
  transform: translateY(-12px) scale(1.035);
}

.mahjong-tile.is-blocked {
  cursor: not-allowed;
  filter: brightness(0.66) saturate(0.65);
}

.mahjong-tile.is-removed {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-30px) scale(0.72);
}

@media (max-width: 767px) and (orientation: landscape) {
  .mahjong-board {
    gap: 7px;
    padding: 22px 34px;
    border-width: 7px;
  }

  .mahjong-tile {
    border-radius: 6px;
    box-shadow:
      0 3px 0 #b89b6f,
      0 5px 0 #173e32,
      0 7px 10px rgb(0 0 0 / 38%);
  }

  .mahjong-tile__glyph {
    font-size: clamp(1.1rem, 4.1vh, 1.75rem);
  }
}