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

:root {
  --title-color: #f3cf74;
  --spl-velvet: #192c35;
  --spl-velvet-deep: #0e1d25;
  --spl-gold: #d7a94f;
  --spl-ivory: #f3e6bd;
  --spl-ink: #21313c;
  --spl-velvet-light: #27434a;
  --spl-frame: #a87b3c;
}

.spl-board {
  display: flex;
  flex-direction: column;
  gap: clamp(0.28rem, 0.7vw, 0.6rem);
  min-height: 0;
  padding: clamp(0.35rem, 0.9vw, 0.75rem);
  overflow: auto;
  background:
    radial-gradient(circle at 14% 8%, rgb(255 219 125 / 16%), transparent 19%),
    repeating-linear-gradient(135deg, rgb(255 238 178 / 3%) 0 1px, transparent 1px 0.65rem),
    linear-gradient(135deg, var(--spl-velvet-light), var(--spl-velvet) 52%, var(--spl-velvet-deep));
  border: 0.18rem solid var(--spl-frame);
  border-radius: 1rem;
  box-shadow:
    0 1rem 2rem rgb(0 0 0 / 42%),
    inset 0 0 0 0.12rem rgb(255 232 151 / 13%);
}

.spl-board[data-visual-theme='arcade'] {
  --spl-velvet: #2e1229;
  --spl-velvet-deep: #180a15;
  --spl-velvet-light: #4a1f42;
  --spl-frame: #ff8fe0;
  --spl-gold: #ff8fe0;
}

.spl-board[data-visual-theme='midnight'] {
  --spl-velvet: #0e2130;
  --spl-velvet-deep: #071119;
  --spl-velvet-light: #163a4d;
  --spl-frame: #7dd3fc;
  --spl-gold: #7dd3fc;
}

.spl-board[data-visual-theme='daylight'] {
  --spl-velvet: #2c1f42;
  --spl-velvet-deep: #180f26;
  --spl-velvet-light: #47326e;
  --spl-frame: #c4a4f7;
  --spl-gold: #c4a4f7;
}

.spl-board[data-visual-theme='amber'] {
  --spl-velvet: #2e1c04;
  --spl-velvet-deep: #180f02;
  --spl-velvet-light: #4a3008;
  --spl-frame: #f2c96b;
  --spl-gold: #f2c96b;
}

/* Nobles are small framed commissions above the jeweller's counter. */
.spl-nobles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.spl-noble {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 3.15rem;
  padding: 0.28rem;
  border: 0.14rem solid #b78235;
  border-radius: 0.42rem;
  background:
    radial-gradient(circle at 30% 24%, rgb(255 255 231 / 72%) 0 9%, transparent 10%),
    linear-gradient(135deg, #fff4cc, #d8ae58);
  color: #2c342d;
  box-shadow:
    0 0.14rem 0.25rem rgb(0 0 0 / 26%),
    inset 0 0 0 1px rgb(255 255 236 / 56%);
}

.spl-noble.is-reachable {
  box-shadow:
    0 0 0 0.14rem #ffe994,
    0 0 0.75rem rgb(248 201 94 / 54%);
}

.spl-noble-pts,
.spl-card-pts {
  font-family: Georgia, serif;
  font-weight: 800;
}

.spl-market {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.spl-row {
  display: flex;
  align-items: stretch;
  gap: 0.32rem;
}

.spl-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 3rem;
  border: 0.13rem solid #d1ad5d;
  border-radius: 0.42rem;
  background:
    repeating-linear-gradient(
      135deg,
      rgb(255 236 159 / 15%) 0 0.26rem,
      transparent 0.26rem 0.52rem
    ),
    #3d273f;
  color: #f7df9b;
  box-shadow: inset 0 0 0 1px rgb(255 235 163 / 14%);
}

.spl-deck-count {
  font-weight: 800;
}

.spl-card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 4.5rem;
  min-height: 6rem;
  padding: 0.34rem;
  border: 0.13rem solid #bb9250;
  border-top: 0.38rem solid var(--gem, #b99050);
  border-radius: 0.42rem;
  background:
    linear-gradient(135deg, rgb(255 255 235 / 72%), transparent 38%),
    repeating-linear-gradient(0deg, rgb(67 48 28 / 5%) 0 1px, transparent 1px 0.45rem),
    var(--spl-ivory);
  color: var(--spl-ink);
  box-shadow:
    0 0.18rem 0.3rem rgb(0 0 0 / 26%),
    inset 0 0 0 1px rgb(255 255 234 / 55%);
}

.spl-card.is-empty {
  border-style: dashed;
  border-top-style: solid;
  background: rgb(241 220 165 / 8%);
  box-shadow: none;
}

.spl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spl-card-pts {
  font-size: 1.25rem;
}

.spl-card-bonus {
  width: 1rem;
  height: 1rem;
  border: 0.13rem solid rgb(255 255 230 / 74%);
  border-radius: 30% 60% 40% 60%;
  background:
    radial-gradient(circle at 30% 22%, rgb(255 255 255 / 68%) 0 12%, transparent 13%), var(--gem);
  box-shadow: 0 0.1rem 0.18rem rgb(0 0 0 / 30%);
  transform: rotate(20deg);
}

.spl-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: auto;
}

.spl-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.12rem;
  height: 1.12rem;
  border: 1px solid rgb(255 255 230 / 56%);
  border-radius: 50%;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-shadow: 0 1px 1px rgb(0 0 0 / 64%);
  box-shadow: inset 0.1rem 0.1rem 0.16rem rgb(255 255 255 / 26%);
}

.spl-bank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 0.13rem solid #8d693b;
  border-radius: 0.5rem;
  background: rgb(9 25 31 / 47%);
}

.spl-token {
  position: relative;
  width: 2.7rem;
  height: 2.7rem;
  border: 0.16rem solid rgb(255 255 230 / 56%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 25%, rgb(255 255 255 / 64%) 0 10%, transparent 11%),
    linear-gradient(145deg, color-mix(in srgb, var(--gem) 70%, white), var(--gem));
  color: #fff;
  font-size: 0.96rem;
  font-weight: 800;
  text-shadow: 0 1px 2px rgb(0 0 0 / 64%);
  box-shadow:
    0 0.16rem 0.25rem rgb(0 0 0 / 38%),
    inset 0 0 0 0.12rem rgb(0 0 0 / 16%);
  cursor: pointer;
}

.spl-token:disabled {
  cursor: default;
  opacity: 0.55;
}

.spl-token.is-picked {
  outline: 0.16rem solid #ffe887;
  outline-offset: 0.13rem;
  transform: translateY(-0.14rem);
}

.spl-token.is-picked::after {
  content: '✓ ' attr(data-picked);
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  padding: 0 4px;
  border-radius: 999px;
  background: #dfad3e;
  color: #352515;
  font-size: 0.7rem;
}

.spl-take {
  display: flex;
  gap: 0.3rem;
  margin-left: auto;
}

.spl-players {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.spl-player {
  flex: 1 1 10rem;
  min-width: 9rem;
  padding: 0.32rem;
  border: 0.13rem solid #85613b;
  border-left: 0.3rem solid var(--seat);
  border-radius: 0.42rem;
  background: rgb(11 28 35 / 64%);
  color: #f2dfa7;
}

.spl-player.is-active {
  box-shadow:
    0 0 0 0.12rem var(--seat),
    inset 0 0 0 1px rgb(255 238 173 / 13%);
}

.spl-player-head {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}

.spl-player-name {
  color: var(--seat);
}

.spl-player-gems,
.spl-reserved {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.spl-gemstat {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px;
  border: 1px solid var(--gem);
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--gem) 30%, #162931);
  font-size: 0.75rem;
}

.spl-gemstat b {
  color: #fff3c9;
}

.spl-gemstat i {
  font-style: normal;
  opacity: 0.75;
}

.spl-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 2.5rem;
  height: 2rem;
  padding: 0 4px;
  border: 1px solid #9c7440;
  border-top: 0.25rem solid var(--gem, #9c7440);
  border-radius: 0.28rem;
  background: #e9d7a2;
  color: #283642;
  font-size: 0.8rem;
  font-weight: 800;
}

.spl-mini.is-hidden {
  background: repeating-linear-gradient(135deg, #38263a 0 0.25rem, #59365a 0.25rem 0.5rem);
  border-top-color: #d1a550;
  color: #f6dfa0;
}

.spl-card-actions {
  display: flex;
  gap: 3px;
}

.spl-btn {
  flex: 1;
  min-height: 2rem;
  padding: 3px 6px;
  border: 1px solid #9d7844;
  border-radius: 0.25rem;
  background: #263d43;
  color: #f5e3ad;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.spl-btn:hover:not(:disabled) {
  border-color: #f0ca68;
  filter: brightness(1.08);
}

.spl-btn.is-primary {
  border-color: #eed071;
  background: linear-gradient(180deg, #ddae4b, #9b672e);
  color: #2f2115;
}

.spl-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (min-width: 768px) and (max-height: 520px) {
  .spl-board {
    gap: 0.2rem;
    height: calc(100dvh - 8rem);
    padding: 0.28rem;
    overflow: hidden;
  }

  .spl-nobles {
    flex-wrap: nowrap;
    gap: 0.18rem;
  }

  .spl-noble {
    min-width: 0;
    flex: 1 1 0;
    gap: 0;
    padding: 0.12rem;
    font-size: 0.52rem;
  }

  .spl-market,
  .spl-row {
    gap: 0.18rem;
  }

  .spl-deck {
    min-width: 2rem;
    font-size: 0.58rem;
  }

  .spl-card {
    height: 2.85rem;
    min-width: 0;
    min-height: 2.5rem;
    gap: 1px;
    padding: 0.14rem;
    border-top-width: 0.22rem;
  }

  .spl-card-pts {
    font-size: 0.74rem;
  }

  .spl-card-bonus {
    width: 0.65rem;
    height: 0.65rem;
    border-width: 1px;
  }

  .spl-cost {
    gap: 1px;
  }

  .spl-pip {
    width: 0.66rem;
    height: 0.66rem;
    font-size: 0.45rem;
  }

  .spl-card-actions {
    gap: 1px;
  }

  .spl-btn {
    min-height: 1.05rem;
    padding: 0 2px;
    font-size: 0.44rem;
  }

  .spl-bank {
    gap: 0.18rem;
    padding: 0.18rem;
  }

  .spl-token {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.62rem;
  }

  .spl-take {
    gap: 0.18rem;
  }

  .spl-players {
    flex-wrap: nowrap;
    gap: 0.18rem;
  }

  .spl-player {
    min-width: 0;
    padding: 0.16rem;
    font-size: 0.56rem;
  }

  .spl-player-gems {
    gap: 1px;
    margin-top: 2px;
  }

  .spl-gemstat {
    gap: 1px;
    padding: 0 2px;
    font-size: 0.45rem;
  }

  .spl-reserved {
    display: none;
  }
}