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

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

.hearts-board {
  --hearts-night: #160d19;
  --hearts-wine: #6d1d33;
  --hearts-paper: #f6e6cb;
  display: grid;
  grid-template-rows: auto auto minmax(4.5rem, 1fr) auto;
  gap: clamp(0.45rem, 1.1vw, 0.85rem);
  padding: clamp(0.65rem, 1.4vw, 1rem);
  border: 0.34rem solid #30161e;
  outline: 1px solid rgb(224 154 134 / 50%);
  outline-offset: -0.68rem;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(117 28 56 / 29%), transparent 42%),
    repeating-radial-gradient(
      ellipse at 50% 50%,
      transparent 0 3rem,
      rgb(255 226 194 / 3%) 3.1rem 3.16rem
    ),
    linear-gradient(135deg, #2c1121, var(--hearts-night) 58%, #230e1b);
  box-shadow:
    inset 0 0 0 0.17rem rgb(0 0 0 / 48%),
    inset 0 0 3rem rgb(0 0 0 / 43%),
    0 1rem 2rem rgb(0 0 0 / 30%);
}

.hearts-board[data-visual-theme='arcade'] {
  --hearts-night: #1a0f22;
  --hearts-wine: #c2338f;
  --hearts-paper: #ffe3f6;
}

.hearts-board[data-visual-theme='midnight'] {
  --hearts-night: #0b1220;
  --hearts-wine: #1c5b82;
  --hearts-paper: #dff1fd;
}

.hearts-board[data-visual-theme='daylight'] {
  --hearts-night: #2b1f4a;
  --hearts-wine: #6b3fa0;
  --hearts-paper: #f3ecff;
}

.hearts-board[data-visual-theme='amber'] {
  --hearts-night: #1f1305;
  --hearts-wine: #8a5a12;
  --hearts-paper: #fff0d2;
}

.hearts-status {
  margin: 0;
  padding: 0.34rem 0.7rem;
  border-block: 1px solid rgb(231 162 141 / 45%);
  color: var(--hearts-paper);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.78rem, 1.2vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.hearts-scores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.38rem;
}

.hearts-score {
  min-width: 3.6rem;
  padding: 0.28rem 0.5rem;
  border: 1px solid rgb(246 230 203 / 23%);
  border-radius: 0.2rem;
  background: rgb(0 0 0 / 18%);
  color: rgb(246 230 203 / 84%);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.hearts-trick {
  display: grid;
  grid-template-columns: repeat(4, minmax(3.2rem, 5.2rem));
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1vw, 0.8rem);
  min-height: 0;
}

.hearts-trick-slot,
.hearts-trick-card {
  display: grid;
  place-items: center;
  min-height: clamp(3.8rem, 7vw, 5.6rem);
  padding: 0.3rem;
  border-radius: 0.24rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  font-weight: 700;
  text-align: center;
}

.hearts-trick-slot {
  border: 1px dashed rgb(246 230 203 / 22%);
  color: rgb(246 230 203 / 58%);
}

.hearts-trick-card {
  border: 1px solid rgb(91 47 44 / 64%);
  background: linear-gradient(135deg, #fff3d9, var(--hearts-paper));
  box-shadow:
    inset 0 0 0 0.12rem rgb(91 50 34 / 15%),
    0 0.28rem 0.42rem rgb(0 0 0 / 35%);
  color: #251b20;
}

.hearts-hand {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  align-items: end;
  gap: clamp(0.14rem, 0.45vw, 0.38rem);
}

.hearts-card {
  min-width: 0;
  min-height: clamp(3.2rem, 6vw, 5.3rem);
  padding: 0.25rem;
  border: 1px solid rgb(91 47 44 / 68%);
  border-radius: 0.22rem;
  background: linear-gradient(135deg, #fff3dc, var(--hearts-paper));
  box-shadow:
    inset 0 0 0 0.12rem rgb(91 50 34 / 16%),
    inset 0 -0.15rem rgb(94 53 35 / 18%),
    0 0.22rem 0.34rem rgb(0 0 0 / 32%);
  color: #2a2022;
  cursor: pointer;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.67rem, 1.02vw, 0.86rem);
  font-weight: 700;
  transition:
    filter var(--ease-ui),
    translate var(--ease-ui),
    box-shadow var(--ease-ui);
}

.hearts-card.hearts-suit-1,
.hearts-card.hearts-suit-2,
.hearts-trick-card.hearts-suit-1,
.hearts-trick-card.hearts-suit-2 {
  color: #9f283d;
}
.hearts-card.hearts-suit-3,
.hearts-trick-card.hearts-suit-3 {
  color: #241b2a;
}
.hearts-card:disabled {
  cursor: default;
  opacity: 0.72;
}
.hearts-card:not(:disabled):hover,
.hearts-card:not(:disabled):focus-visible {
  filter: brightness(1.07);
  translate: 0 -0.33rem;
  box-shadow:
    inset 0 0 0 0.12rem rgb(91 50 34 / 16%),
    0 0 0 2px rgb(227 102 126 / 67%),
    0 0.45rem 0.55rem rgb(0 0 0 / 36%);
}
.hearts-card.is-selected {
  outline: 0;
  translate: 0 -0.42rem;
  box-shadow:
    inset 0 0 0 0.14rem #fff0d1,
    0 0 0 2px #d64361,
    0 0.55rem 0.7rem rgb(0 0 0 / 42%);
}

@media (max-height: 500px) and (orientation: landscape) {
  .hearts-board {
    gap: 0.32rem;
    padding: 0.42rem;
    border-width: 0.22rem;
  }
  .hearts-status {
    padding: 0.18rem;
    font-size: 0.67rem;
  }
  .hearts-scores {
    gap: 0.24rem;
  }
  .hearts-score {
    min-width: 2.7rem;
    padding: 0.18rem;
    font-size: 0.6rem;
  }
  .hearts-trick {
    grid-template-columns: repeat(4, minmax(2.4rem, 3.5rem));
    gap: 0.3rem;
  }
  .hearts-trick-slot,
  .hearts-trick-card {
    min-height: 2.35rem;
    padding: 0.14rem;
    font-size: 0.57rem;
  }
  .hearts-hand {
    gap: 0.12rem;
  }
  .hearts-card {
    min-height: 3rem;
    padding: 0.1rem;
    font-size: 0.55rem;
  }
}