@import url('../global.css');
:root {
  --title-color: var(--color-skull);
}
.skull-board {
  --skull-ink: #160b11;
  --skull-wine: #681d32;
  --skull-bone: #f3dfbf;
  --skull-brass: #d8a44f;
  --skull-frame: #2f171b;
  --skull-edge-a: #35131f;
  --skull-edge-b: #2a1019;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-content: center;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  padding: clamp(0.8rem, 2.8vw, 2.25rem);
  border: 0.35rem solid var(--skull-frame);
  outline: 1px solid color-mix(in srgb, var(--skull-brass), transparent 35%);
  outline-offset: -0.68rem;
  background:
    radial-gradient(circle at 50% 49%, rgb(116 27 48 / 32%), transparent 34%),
    repeating-radial-gradient(circle at 50% 50%, rgb(255 220 174 / 8%) 0 1px, transparent 1px 8px),
    linear-gradient(135deg, var(--skull-edge-a), var(--skull-ink) 48%, var(--skull-edge-b));
  box-shadow:
    inset 0 0 0 0.2rem rgb(0 0 0 / 45%),
    inset 0 0 4rem #070305,
    0 1rem 2rem rgb(7 2 5 / 35%);
}
.skull-board[data-visual-theme='arcade'] {
  --skull-ink: #2a0a1f;
  --skull-wine: #a6157e;
  --skull-brass: #ff8fe0;
  --skull-frame: #3a0f2e;
  --skull-edge-a: #4a1739;
  --skull-edge-b: #1a0714;
}
.skull-board[data-visual-theme='midnight'] {
  --skull-ink: #0a1622;
  --skull-wine: #1c4d73;
  --skull-brass: #6fb8e8;
  --skull-frame: #0c1a2c;
  --skull-edge-a: #16283a;
  --skull-edge-b: #0a1219;
}
.skull-board[data-visual-theme='daylight'] {
  --skull-ink: #241934;
  --skull-wine: #7c3aed;
  --skull-brass: #c9a8f2;
  --skull-frame: #4c2c73;
  --skull-edge-a: #3c2a54;
  --skull-edge-b: #160f20;
}
.skull-board[data-visual-theme='amber'] {
  --skull-ink: #241708;
  --skull-wine: #8c5a12;
  --skull-brass: #f0b94a;
  --skull-frame: #3a2306;
  --skull-edge-a: #3d2a12;
  --skull-edge-b: #170f05;
}
.skull-player {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(5.4rem, 1fr) auto;
  min-height: 11rem;
  padding: clamp(0.55rem, 1.5vw, 1rem);
  overflow: hidden;
  border: 1px solid rgb(237 187 102 / 52%);
  border-radius: 0.4rem;
  background: linear-gradient(145deg, rgb(114 31 50 / 94%), rgb(47 13 25 / 96%));
  box-shadow:
    inset 0 0 0 0.18rem rgb(16 5 10 / 48%),
    inset 0 0 1.5rem rgb(0 0 0 / 42%),
    0 0.5rem 1rem rgb(0 0 0 / 30%);
  text-align: center;
}
.skull-player::before {
  position: absolute;
  inset: 0.35rem;
  border: 1px solid rgb(243 223 191 / 18%);
  content: '';
  pointer-events: none;
}
.skull-player h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--skull-bone);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.75rem, 1.3vw, 1rem);
  letter-spacing: 0.08em;
  text-shadow: 0 1px #19070d;
}
.skull-stack {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 5.4rem;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  padding: 0.4rem 0;
  gap: 0;
}
.skull-disc {
  width: clamp(3.25rem, 6vw, 4.45rem);
  margin-top: -0.8rem;
  aspect-ratio: 1;
  border: 0.18rem solid #10060b;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgb(255 227 179 / 26%) 0 5%, transparent 6%),
    radial-gradient(circle at 50% 45%, #421020 0 45%, #16070e 47% 61%, #7d263a 63% 67%, #12060a 69%);
  box-shadow:
    inset 0 0 0 0.16rem #a13a51,
    inset 0 -0.42rem 0.45rem rgb(0 0 0 / 55%),
    0 0.35rem 0.45rem rgb(0 0 0 / 48%);
  color: var(--skull-bone);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  cursor: pointer;
  transition:
    translate 140ms ease,
    filter 140ms ease;
}
.skull-disc:first-child {
  margin-top: 0;
}
.skull-disc:not(:disabled):hover,
.skull-disc:not(:disabled):focus-visible {
  translate: 0 -0.3rem;
  filter: brightness(1.2);
}
.skull-disc:disabled {
  cursor: default;
}
.skull-player small {
  position: relative;
  z-index: 1;
  color: rgb(243 223 191 / 72%);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}
.skull-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: min(100%, 48rem);
  gap: 0.55rem;
  margin: 0.8rem auto 0;
}
.skull-action {
  min-width: 5.5rem;
  min-height: 2.75rem;
  border: 1px solid rgb(235 199 129 / 58%);
  border-radius: 0.32rem;
  background: linear-gradient(#572035, #2c0e1a);
  box-shadow:
    inset 0 1px rgb(255 235 196 / 18%),
    0 0.2rem 0.45rem rgb(0 0 0 / 28%);
  color: var(--skull-bone);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.skull-action:not(:disabled):hover,
.skull-action:not(:disabled):focus-visible {
  filter: brightness(1.22);
  translate: 0 -1px;
}
.skull-action--flower {
  background: linear-gradient(135deg, #b76a69, #62243e);
}
.skull-action--skull {
  background: linear-gradient(135deg, #382a35, #160d17);
}
.skull-action--bid {
  border-color: rgb(216 164 79 / 78%);
  color: #ffe3ab;
}
.skull-action--pass {
  color: rgb(243 223 191 / 72%);
}

@media (max-height: 500px) and (orientation: landscape) {
  .skull-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
    padding: 0.55rem;
    border-width: 0.24rem;
  }
  .skull-player {
    min-height: 0;
    padding: 0.38rem;
  }
  .skull-stack {
    min-height: 3.85rem;
  }
  .skull-disc {
    width: 2.55rem;
    margin-top: -0.72rem;
  }
  .skull-player h3 {
    font-size: 0.68rem;
  }
  .skull-player small {
    font-size: 0.6rem;
  }
  .skull-actions {
    gap: 0.35rem;
    margin-top: 0.45rem;
  }
  .skull-action {
    min-width: 4.4rem;
    min-height: 2.45rem;
    font-size: 0.72rem;
  }
}