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

:root {
  --title-color: var(--color-perudo);
}

.perudo-table {
  --perudo-night: #17120e;
  --perudo-sand: #f0d39c;
  --perudo-border: #402315;
  --perudo-outline: rgb(240 211 156 / 56%);
  --perudo-glow: rgb(173 67 40 / 29%);
  --perudo-grain: rgb(255 220 151 / 4%);
  --perudo-bg-hi: #38221a;
  --perudo-bg-lo: #2b1710;
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1.1vw, 0.9rem);
  padding: clamp(0.55rem, 1.3vw, 1rem);
  border: 0.32rem solid var(--perudo-border);
  outline: 1px solid var(--perudo-outline);
  outline-offset: -0.65rem;
  background:
    radial-gradient(ellipse at 50% 54%, var(--perudo-glow), transparent 44%),
    repeating-linear-gradient(90deg, var(--perudo-grain) 0 1px, transparent 1px 3.6rem),
    linear-gradient(135deg, var(--perudo-bg-hi), var(--perudo-night) 60%, var(--perudo-bg-lo));
  box-shadow:
    inset 0 0 0 0.16rem rgb(0 0 0 / 46%),
    inset 0 0 3rem rgb(0 0 0 / 45%),
    0 1rem 2rem rgb(0 0 0 / 30%);
}

.perudo-table[data-visual-theme='arcade'] {
  --perudo-night: #1a0a19;
  --perudo-sand: #ffd9f2;
  --perudo-border: #7a1f5e;
  --perudo-outline: rgb(255 79 216 / 56%);
  --perudo-glow: rgb(255 79 216 / 32%);
  --perudo-grain: rgb(255 79 216 / 5%);
  --perudo-bg-hi: #3a1330;
  --perudo-bg-lo: #22091d;
}

.perudo-table[data-visual-theme='midnight'] {
  --perudo-night: #0a121c;
  --perudo-sand: #d7ecfc;
  --perudo-border: #234a68;
  --perudo-outline: rgb(56 189 248 / 50%);
  --perudo-glow: rgb(56 189 248 / 26%);
  --perudo-grain: rgb(148 210 250 / 5%);
  --perudo-bg-hi: #1b3348;
  --perudo-bg-lo: #0c1723;
}

.perudo-table[data-visual-theme='daylight'] {
  --perudo-night: #241a3a;
  --perudo-sand: #f3ecff;
  --perudo-border: #5a3d94;
  --perudo-outline: rgb(124 58 237 / 50%);
  --perudo-glow: rgb(124 58 237 / 28%);
  --perudo-grain: rgb(216 197 255 / 6%);
  --perudo-bg-hi: #3c2a63;
  --perudo-bg-lo: #1c1330;
}

.perudo-table[data-visual-theme='amber'] {
  --perudo-night: #1c1206;
  --perudo-sand: #ffe6ad;
  --perudo-border: #6b4210;
  --perudo-outline: rgb(251 191 36 / 52%);
  --perudo-glow: rgb(251 191 36 / 28%);
  --perudo-grain: rgb(255 220 151 / 5%);
  --perudo-bg-hi: #402a10;
  --perudo-bg-lo: #241705;
}

.perudo-players {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: clamp(0.38rem, 0.8vw, 0.65rem);
  flex: 0 0 auto;
}

.perudo-player {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  padding: clamp(0.4rem, 0.8vw, 0.65rem);
  border: 1px solid rgb(240 211 156 / 34%);
  border-radius: 0.3rem;
  background: linear-gradient(145deg, rgb(78 42 29 / 96%), rgb(35 21 16 / 97%));
  box-shadow:
    inset 0 0 0 0.12rem rgb(0 0 0 / 36%),
    0 0.3rem 0.65rem rgb(0 0 0 / 30%);
  text-align: center;
}

.perudo-player.is-current {
  border-color: var(--perudo-sand);
  box-shadow:
    inset 0 0 0 0.12rem rgb(255 226 164 / 14%),
    0 0 0 1px rgb(240 211 156 / 44%),
    0 0.35rem 0.72rem rgb(0 0 0 / 32%);
}

.perudo-player h3 {
  margin: 0;
  color: var(--perudo-sand);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.72rem, 1.1vw, 0.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.perudo-dice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: clamp(0.18rem, 0.45vw, 0.35rem);
  margin: 0.38rem 0;
}

.perudo-die {
  display: grid;
  place-items: center;
  width: clamp(2rem, 3.25vw, 2.75rem);
  aspect-ratio: 1;
  border: 1px solid #6b4830;
  border-radius: 0.28rem;
  background: linear-gradient(135deg, #fff1c9, #d7a864);
  box-shadow:
    inset 0 0 0 0.12rem rgb(120 61 30 / 17%),
    inset 0 -0.18rem rgb(107 72 48 / 30%),
    0 0.18rem 0.32rem rgb(0 0 0 / 33%);
  color: #2a1a16;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.85rem, 1.5vw, 1.15rem);
  font-weight: 800;
}

.perudo-player:not(.is-current) .perudo-die {
  border-color: #4d241e;
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 22%,
      rgb(255 222 158 / 32%) 23% 27%,
      transparent 28%
    ),
    linear-gradient(45deg, transparent 45%, rgb(255 222 158 / 14%) 46% 54%, transparent 55%),
    linear-gradient(135deg, #813629, #3e1a1a);
  color: rgb(255 226 164 / 68%);
}

.perudo-player small {
  color: rgb(240 211 156 / 72%);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.perudo-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
  align-content: start;
  gap: 0.34rem;
  min-height: 0;
  padding: 0.42rem;
  overflow: auto;
  border: 1px solid rgb(240 211 156 / 16%);
  background: linear-gradient(90deg, rgb(0 0 0 / 20%), transparent 20% 80%, rgb(0 0 0 / 20%));
}

.perudo-action {
  min-height: 2.75rem;
  padding: 0.35rem;
  border: 1px solid rgb(240 211 156 / 52%);
  border-radius: 0.23rem;
  background: linear-gradient(#4d3427, #2a1d1a);
  box-shadow:
    inset 0 1px rgb(255 237 194 / 11%),
    0 0.18rem 0.3rem rgb(0 0 0 / 30%);
  color: var(--perudo-sand);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.67rem, 1vw, 0.82rem);
  font-weight: 700;
  cursor: pointer;
  transition:
    filter var(--ease-ui),
    translate var(--ease-ui);
}

.perudo-action:not(:disabled):hover,
.perudo-action:not(:disabled):focus-visible {
  filter: brightness(1.2);
  translate: 0 -1px;
}
.perudo-action--face-1 {
  border-color: rgb(240 211 156 / 82%);
}
.perudo-action--face-2 {
  border-color: rgb(81 160 152 / 78%);
}
.perudo-action--face-3 {
  border-color: rgb(185 93 56 / 78%);
}
.perudo-action--face-4 {
  border-color: rgb(220 174 69 / 78%);
}
.perudo-action--face-5 {
  border-color: rgb(147 104 174 / 78%);
}
.perudo-action--face-6 {
  border-color: rgb(194 88 78 / 78%);
}
.perudo-action--calza {
  border-color: rgb(78 151 119 / 82%);
  color: #cff3d8;
}
.perudo-action.is-danger {
  border-color: #db7761;
  background: linear-gradient(#963d2f, #501c1b);
  color: #fff0d2;
}

@media (max-height: 500px) and (orientation: landscape) {
  .perudo-table {
    gap: 0.36rem;
    padding: 0.42rem;
    border-width: 0.22rem;
  }
  .perudo-players {
    grid-template-columns: repeat(auto-fit, minmax(8.6rem, 1fr));
    gap: 0.34rem;
  }
  .perudo-player {
    padding: 0.32rem;
  }
  .perudo-player h3 {
    font-size: 0.65rem;
  }
  .perudo-dice {
    gap: 0.16rem;
    margin: 0.2rem 0;
  }
  .perudo-die {
    width: 1.72rem;
    font-size: 0.72rem;
  }
  .perudo-player small {
    font-size: 0.61rem;
  }
  .perudo-actions {
    grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr));
    gap: 0.25rem;
    padding: 0.28rem;
  }
  .perudo-action {
    min-height: 2.75rem;
    padding: 0.22rem;
    font-size: 0.62rem;
  }
}