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

:root {
  --title-color: #f4b7a9;
  --sushi-ink: #263b40;
  --sushi-rice: #fff7df;
  --sushi-lacquer: #542d30;
  --sushi-salmon: #ec806d;
  --sushi-wasabi: #92b65b;
}

.sushi-go-board {
  --sushi-bg-hi: #5b3134;
  --sushi-bg-mid: #302f35;
  --sushi-bg-lo: #1e3031;
  --sushi-board-border: #b78162;
  --sushi-mat-border: #c59170;
  --sushi-mat: #ead8ae;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.35rem, 0.8vw, 0.7rem);
  min-height: 0;
  padding: clamp(0.38rem, 1vw, 0.8rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 12%, rgb(255 225 190 / 20%), transparent 21%),
    repeating-linear-gradient(90deg, rgb(255 231 198 / 4%) 0 1px, transparent 1px 1.25rem),
    linear-gradient(135deg, var(--sushi-bg-hi), var(--sushi-bg-mid) 57%, var(--sushi-bg-lo));
  border: 0.18rem solid var(--sushi-board-border);
  border-radius: 1rem;
  box-shadow:
    0 1rem 2rem rgb(0 0 0 / 42%),
    inset 0 0 0 0.12rem rgb(255 224 181 / 15%);
}

.sushi-go-board[data-visual-theme='arcade'] {
  --sushi-bg-hi: #5e1f4f;
  --sushi-bg-mid: #351830;
  --sushi-bg-lo: #1e0f22;
  --sushi-board-border: #ff4fd8;
  --sushi-mat-border: #d9639f;
  --sushi-mat: #ffe0f2;
}

.sushi-go-board[data-visual-theme='midnight'] {
  --sushi-bg-hi: #1c3a56;
  --sushi-bg-mid: #17283a;
  --sushi-bg-lo: #0e1a26;
  --sushi-board-border: #38bdf8;
  --sushi-mat-border: #4f8fb0;
  --sushi-mat: #d7ecfc;
}

.sushi-go-board[data-visual-theme='daylight'] {
  --sushi-bg-hi: #4a3168;
  --sushi-bg-mid: #2d2148;
  --sushi-bg-lo: #1c1530;
  --sushi-board-border: #7c3aed;
  --sushi-mat-border: #9d81c9;
  --sushi-mat: #ede4ff;
}

.sushi-go-board[data-visual-theme='amber'] {
  --sushi-bg-hi: #5a3a17;
  --sushi-bg-mid: #362409;
  --sushi-bg-lo: #221604;
  --sushi-board-border: #fbbf24;
  --sushi-mat-border: #b98946;
  --sushi-mat: #ffe9bc;
}

.sushi-go-table {
  display: grid;
  align-content: stretch;
  gap: clamp(0.32rem, 0.7vw, 0.55rem);
  min-height: 0;
}

.sushi-go-player {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
  padding: clamp(0.35rem, 0.8vw, 0.65rem);
  overflow: hidden;
  border: 0.14rem solid var(--sushi-mat-border);
  border-radius: 0.6rem;
  background:
    repeating-linear-gradient(0deg, rgb(95 42 42 / 5%) 0 1px, transparent 1px 0.52rem),
    var(--sushi-mat);
  color: var(--sushi-ink);
  box-shadow:
    inset 0 0 0 0.1rem rgb(255 251 226 / 58%),
    0 0.18rem 0.28rem rgb(0 0 0 / 18%);
}

.sushi-go-player strong {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  color: #522f30;
  font-size: 0.9rem;
}

.sushi-go-player strong::before {
  content: '●';
  color: #d65c5d;
  font-size: 0.62rem;
}

.sushi-go-played {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  align-content: flex-start;
}

.sushi-go-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
  padding: 0.4rem;
  border: 0.14rem solid #c59170;
  border-radius: 0.6rem;
  background: rgb(29 49 49 / 68%);
}

.sushi-go-hand h2 {
  width: 100%;
  margin: 0 0 0.06rem;
  color: #ffe0ab;
  font-family: Georgia, serif;
  font-size: 1rem;
}

/* Every draft card is an individual plate, with its food family visible before text. */
.sushi-go-card {
  --card-accent: #d66b61;
  --card-art: '●';
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: clamp(5.5rem, 9vw, 7rem);
  min-height: 4.6rem;
  padding: 0.35rem 0.38rem 0.32rem;
  overflow: hidden;
  border: 0.15rem solid #9b604e;
  border-top: 0.34rem solid var(--card-accent);
  border-radius: 0.55rem;
  background:
    radial-gradient(ellipse at 50% 40%, rgb(255 255 241 / 90%) 0 31%, transparent 32%),
    linear-gradient(135deg, rgb(255 255 255 / 78%), transparent 42%), var(--sushi-rice);
  color: #302f34;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  box-shadow:
    0 0.2rem 0.32rem rgb(0 0 0 / 28%),
    inset 0 0 0 1px rgb(255 255 255 / 72%);
  cursor: default;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    filter 150ms ease;
}

.sushi-go-card::before {
  content: var(--card-art);
  display: block;
  margin-bottom: 0.14rem;
  color: var(--card-accent);
  font-size: 1.42rem;
  line-height: 0.9;
  text-shadow: 0 0.06rem 0 rgb(64 37 25 / 24%);
}

.sushi-go-card.is-playable {
  cursor: pointer;
  border-color: #eeb16e;
}

.sushi-go-card.is-playable:hover {
  z-index: 1;
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    0 0.45rem 0.7rem rgb(0 0 0 / 36%),
    0 0 0 0.14rem rgb(255 213 131 / 55%);
  transform: translateY(-0.28rem) rotate(-0.5deg);
}

.sushi-go-card--maki1,
.sushi-go-card--maki2,
.sushi-go-card--maki3 {
  --card-accent: #435f4b;
  --card-art: '◉';
}

.sushi-go-card--maki2::before {
  content: '◉ ◉';
  font-size: 1rem;
}

.sushi-go-card--maki3::before {
  content: '◉ ◉ ◉';
  font-size: 0.85rem;
}

.sushi-go-card--nigiriS {
  --card-accent: #e77e6e;
  --card-art: '◒';
}

.sushi-go-card--nigiriSq {
  --card-accent: #8c9da3;
  --card-art: '◒';
}

.sushi-go-card--nigiriE {
  --card-accent: #e5b83f;
  --card-art: '◒';
}

.sushi-go-card--sashimi {
  --card-accent: #d85055;
  --card-art: '▰';
}

.sushi-go-card--tempura {
  --card-accent: #d69735;
  --card-art: '✦';
}

.sushi-go-card--dumpling {
  --card-accent: #dfac78;
  --card-art: '◖';
}

.sushi-go-card--wasabi {
  --card-accent: var(--sushi-wasabi);
  --card-art: '✹';
}

.sushi-go-card--pudding {
  --card-accent: #8b5938;
  --card-art: '◒';
}

.sushi-go-card--chopsticks {
  --card-accent: #a64939;
  --card-art: '╱ ╲';
}

.sushi-go-played .sushi-go-card {
  width: 4.45rem;
  min-height: 2.55rem;
  padding: 0.2rem;
  border-top-width: 0.22rem;
  border-radius: 0.38rem;
  font-size: 0.58rem;
}

.sushi-go-played .sushi-go-card::before {
  margin-bottom: 0.05rem;
  font-size: 0.85rem;
}

@media (min-width: 768px) and (max-height: 520px) {
  .sushi-go-board {
    gap: 0.24rem;
    height: calc(100dvh - 8rem);
    padding: 0.28rem;
  }

  .sushi-go-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
  }

  .sushi-go-player {
    gap: 0.16rem;
    padding: 0.26rem;
  }

  .sushi-go-player strong {
    font-size: 0.68rem;
  }

  .sushi-go-played {
    gap: 0.14rem;
  }

  .sushi-go-played .sushi-go-card {
    width: 2.85rem;
    min-height: 1.8rem;
    padding: 0.1rem;
    font-size: 0.42rem;
  }

  .sushi-go-played .sushi-go-card::before {
    display: none;
  }

  .sushi-go-hand {
    flex-wrap: nowrap;
    gap: 0.28rem;
    padding: 0.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .sushi-go-hand h2 {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0.08rem 0 0;
    font-size: 0.68rem;
  }

  .sushi-go-hand .sushi-go-card {
    width: 4.05rem;
    min-height: 3.25rem;
    padding: 0.22rem;
    font-size: 0.58rem;
  }

  .sushi-go-hand .sushi-go-card::before {
    font-size: 0.94rem;
  }
}